/* ═══════════════════════════════════════════════════════════════
   assets/css/animaciones.css — Escenas del panel derecho (includes/animaciones.php)
   Colores: blanco, var(--blue) = principal, var(--accent) = acento de la paleta.
   prefers-reduced-motion ya las detiene (portada.css).
   ═══════════════════════════════════════════════════════════════ */
.anim-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.escena .core{z-index:2}

/* 2 · Red de nodos */
.anim-red .lineas line{stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:6 8;animation:red-flujo 4s linear infinite}
.anim-red .n{fill:#fff;opacity:.85;transform-box:fill-box;transform-origin:center;animation:red-latido 3s ease-in-out infinite}
.anim-red .n.acc{fill:var(--accent);opacity:1}
@keyframes red-flujo{to{stroke-dashoffset:-56}}
@keyframes red-latido{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}

/* 3 · Pulso cardíaco */
.anim-pulso .onda{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2;transform-origin:200px 200px;animation:pulso-onda 3s ease-out infinite}
.anim-pulso .o2{animation-delay:1s}.anim-pulso .o3{animation-delay:2s}
.anim-pulso .ecg-fondo{fill:none;stroke:rgba(255,255,255,.32);stroke-width:3;stroke-linejoin:round}
.anim-pulso .ecg{fill:none;stroke:var(--accent);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:140 900;animation:pulso-ecg 2.4s linear infinite;filter:drop-shadow(0 0 6px var(--accent))}
@keyframes pulso-onda{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@keyframes pulso-ecg{from{stroke-dashoffset:140}to{stroke-dashoffset:-760}}

/* 4 · Engranajes */
.anim-engranajes path{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.6);stroke-width:2;stroke-linejoin:round}
.anim-engranajes circle{fill:var(--navy);stroke:rgba(255,255,255,.6);stroke-width:2}
.anim-engranajes .g2 path{fill:color-mix(in srgb,var(--accent) 35%,transparent);stroke:var(--accent)}
.anim-engranajes .g1{animation:giro 16s linear infinite}
.anim-engranajes .g2{animation:giro 10.6s linear infinite reverse}
.anim-engranajes .g3{animation:giro 8.4s linear infinite reverse}
@keyframes giro{to{transform:rotate(360deg)}}

/* 5 · Hojas flotando */
.anim-hojas .sol{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.25);stroke-width:1.5;stroke-dasharray:4 8}
.anim-hojas .hoja{transform:translate(var(--x),var(--y)) scale(var(--s));animation:hoja-sube 7s ease-in-out infinite}
.anim-hojas .hoja path{fill:rgba(255,255,255,.2);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.anim-hojas .hoja:nth-child(3n) path{fill:color-mix(in srgb,var(--accent) 45%,transparent);stroke:var(--accent)}
@keyframes hoja-sube{
  0%{transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(0);opacity:0}
  15%{opacity:1}
  100%{transform:translate(calc(var(--x) + 40px),calc(var(--y) - 320px)) scale(var(--s)) rotate(160deg);opacity:0}}

/* 6 · Crecimiento */
.anim-barras .base{stroke:rgba(255,255,255,.4);stroke-width:2}
.anim-barras rect{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.55);stroke-width:1.5;transform-box:fill-box;transform-origin:bottom;animation:barra-crece 3.6s ease-in-out infinite}
.anim-barras rect:last-of-type{fill:color-mix(in srgb,var(--accent) 55%,transparent);stroke:var(--accent)}
.anim-barras .tendencia{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;animation:linea-dibuja 3.6s ease-in-out infinite}
.anim-barras .punta{fill:var(--accent);animation:punta 3.6s ease-in-out infinite}
@keyframes barra-crece{0%{transform:scaleY(.15)}40%,80%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
@keyframes linea-dibuja{0%{stroke-dashoffset:420}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
@keyframes punta{0%,40%{opacity:0}50%,80%{opacity:1}100%{opacity:0}}

/* 7 · Educación */
.anim-educacion .aro{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:3 10;transform-origin:200px 200px;animation:giro 40s linear infinite}
.anim-educacion .estrella{fill:#fff;transform:scale(var(--s));animation:brillo 2.8s ease-in-out infinite}
.anim-educacion .estrella:nth-child(odd){fill:var(--accent)}
@keyframes brillo{0%,100%{opacity:.25;transform:scale(calc(var(--s) * .6))}50%{opacity:1;transform:scale(var(--s))}}

/* 8 · Escudo protector */
.anim-escudo .anillo{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;transform-origin:200px 200px;animation:pulso-onda 3.6s ease-out infinite}
.anim-escudo .a2{animation-delay:1.2s}.anim-escudo .a3{animation-delay:2.4s}
.anim-escudo .escudo-forma{fill:rgba(255,255,255,.08);stroke:var(--accent);stroke-width:4;stroke-linejoin:round;stroke-dasharray:640;animation:escudo-traza 6s ease-in-out infinite}
@keyframes escudo-traza{0%{stroke-dashoffset:640}35%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-640}}

/* 9 · Moléculas */
.anim-moleculas .mol{animation:giro 24s linear infinite}
.anim-moleculas line{stroke:rgba(255,255,255,.5);stroke-width:4;stroke-linecap:round}
.anim-moleculas .atomo{fill:rgba(255,255,255,.9)}
.anim-moleculas .atomo.acc{fill:var(--accent)}
.anim-moleculas .burbuja{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;animation:burbuja 6s ease-in infinite}
@keyframes burbuja{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-360px);opacity:0}}

/* 10 · Trazos creativos */
.escena-trazos .blob{position:absolute;border-radius:42% 58% 60% 40% / 45% 45% 55% 55%;filter:blur(2px);animation:blob 10s ease-in-out infinite;mix-blend-mode:screen}
.escena-trazos .b1{inset:12% 30% 38% 8%;background:color-mix(in srgb,var(--blue) 75%,transparent)}
.escena-trazos .b2{inset:40% 10% 10% 38%;background:color-mix(in srgb,var(--accent) 60%,transparent);animation-delay:-3s;animation-duration:12s}
.escena-trazos .b3{inset:28% 28% 28% 28%;background:rgba(255,255,255,.14);animation-delay:-6s;animation-duration:14s}
.anim-trazos .trazo{fill:none;stroke-linecap:round;stroke-dasharray:520;animation:linea-dibuja 5s ease-in-out infinite}
.anim-trazos .t-a{stroke:#fff;stroke-width:7}
.anim-trazos .t-b{stroke:var(--accent);stroke-width:5;animation-delay:-2.2s}
@keyframes blob{0%,100%{border-radius:42% 58% 60% 40% / 45% 45% 55% 55%;transform:rotate(0)}50%{border-radius:60% 40% 38% 62% / 58% 38% 62% 42%;transform:rotate(25deg) scale(1.06)}}