/* Animaciones explicativas (ocular/animacion). Colores solo con variables del tema. */
.animacion{margin:1.75rem 0;padding:1rem;border:1px solid var(--wp--preset--color--borde);border-radius:18px;background:var(--wp--preset--color--tarjeta);display:grid;gap:.85rem}
.animacion__lienzo svg{display:block;width:100%;height:auto;max-height:420px}
.animacion__controles{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.animacion__pasos{display:flex;flex-wrap:wrap;gap:.4rem}
.animacion__paso,.animacion__pausa{font:inherit;font-size:.85rem;padding:.45rem .8rem;min-height:40px;border-radius:999px;border:1px solid var(--wp--preset--color--borde);background:transparent;color:inherit;cursor:pointer}
.animacion__paso:hover,.animacion__paso:focus-visible,.animacion__pausa:focus-visible{border-color:var(--wp--preset--color--acento-2);outline:none}
.animacion__paso.es-actual{background:linear-gradient(90deg,var(--wp--preset--color--acento-1),var(--wp--preset--color--acento-2));color:var(--wp--preset--color--fondo);border-color:transparent;font-weight:600}
.animacion__textos{margin:0;min-height:3.2em}
.animacion__texto{margin:0;display:none}
.animacion[data-paso="1"] [data-texto="1"],.animacion[data-paso="2"] [data-texto="2"],.animacion[data-paso="3"] [data-texto="3"],.animacion[data-paso="4"] [data-texto="4"]{display:block}

/* Visibilidad por paso: .v + .vN. */
.animacion .v{opacity:0;transition:opacity .5s ease}
.animacion[data-paso="1"] .v1,.animacion[data-paso="2"] .v2,.animacion[data-paso="3"] .v3,.animacion[data-paso="4"] .v4{opacity:1}

/* Piezas comunes. */
.animacion .ani-globo{fill:color-mix(in srgb,var(--wp--preset--color--acento-1) 8%,transparent);stroke:var(--wp--preset--color--acento-1);stroke-width:3}
.animacion .ani-retina{fill:none;stroke:#ff8fab;stroke-width:6;stroke-opacity:.55}
.animacion .ani-nervio{fill:#f2c94c;fill-opacity:.55}
.animacion .ani-camara{fill:var(--wp--preset--color--acento-2);fill-opacity:.12;transition:fill-opacity .8s ease}
.animacion .ani-cornea{fill:none;stroke:var(--wp--preset--color--acento-2);stroke-width:5;stroke-linecap:round}
.animacion .ani-iris{fill:none;stroke:var(--wp--preset--color--acento-1);stroke-width:9;stroke-linecap:round}
.animacion .ani-etiquetas text{font:500 15px/1 Outfit,system-ui,sans-serif;fill:var(--wp--preset--color--texto-suave)}
.animacion .ani-metal{fill:var(--wp--preset--color--texto-suave)}
.animacion .ani-mango{fill:var(--wp--preset--color--acento-1)}

/* Facoemulsificación. */
.animacion .ani-catarata{fill:#d8bf72;fill-opacity:.9;stroke:#b39a50;stroke-width:2}
.animacion .ani-capsula{fill:none;stroke:var(--wp--preset--color--texto-suave);stroke-width:2;stroke-dasharray:4 4}
.animacion .ani-incision{stroke:#ff6b81;stroke-width:4;stroke-linecap:round}
.animacion .ani-rexis{fill:none;stroke:var(--wp--preset--color--texto);stroke-width:4;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110}
.animacion .ani-sonda{stroke:var(--wp--preset--color--texto-suave);stroke-width:8;stroke-linecap:round}
.animacion .ani-punta{fill:var(--wp--preset--color--acento-2)}
.animacion .ani-frag{fill:#d8bf72;fill-opacity:.9}
.animacion .ani-lio-optica{fill:var(--wp--preset--color--acento-2);fill-opacity:.45;stroke:var(--wp--preset--color--acento-2);stroke-width:2}
.animacion .ani-lio-hapticos{fill:none;stroke:var(--wp--preset--color--acento-2);stroke-width:3;stroke-linecap:round}
.animacion .ani-lio{transform-box:fill-box;transform-origin:50% 50%}

/* Presión intraocular. */
.animacion .ani-cristalino{fill:var(--wp--preset--color--acento-2);fill-opacity:.25;stroke:var(--wp--preset--color--acento-2);stroke-width:2}
.animacion .ani-ciliar{fill:none;stroke:#f2994a;stroke-width:8;stroke-linecap:round}
.animacion .ani-gota,.animacion .ani-part{fill:var(--wp--preset--color--acento-2)}
.animacion .ani-part{offset-path:path('M 300 112 C 296 140 288 168 286 180 C 268 184 248 160 256 104 L 250 80');offset-distance:0%;opacity:0}
.animacion .ani-rejilla{stroke:var(--wp--preset--color--fondo);stroke-width:3;stroke-dasharray:3 3}
.animacion .ani-tapon path{stroke:#ff6b81;stroke-width:5;stroke-linecap:round}
.animacion .ani-excavacion{fill:none;stroke:#ff6b81;stroke-width:7;stroke-linecap:round}
.animacion .ani-arco{fill:none;stroke:var(--wp--preset--color--borde);stroke-width:12;stroke-linecap:round}
.animacion .ani-arco-alto{fill:none;stroke:#ff6b81;stroke-width:12;stroke-linecap:round}
.animacion .ani-aguja path{stroke:var(--wp--preset--color--texto);stroke-width:4;stroke-linecap:round}
.animacion .ani-aguja circle{fill:var(--wp--preset--color--texto)}
.animacion .ani-aguja{transform-box:fill-box;transform-origin:50% 88.5%;transform:rotate(-35deg);transition:transform 1.2s cubic-bezier(.3,1.4,.5,1)}
.animacion--presion-intraocular[data-paso="3"] .ani-aguja{transform:rotate(55deg)}
.animacion--presion-intraocular[data-paso="3"] .ani-humor{fill-opacity:.42}

@media (prefers-reduced-motion:no-preference){
  .animacion[data-paso="1"] .ani-bisturi{animation:ani-corte 2.4s ease-in-out infinite}
  .animacion[data-paso="2"] .ani-rexis{animation:ani-dibujar 2.4s ease-in-out infinite}
  .animacion[data-paso="3"] .ani-punta{animation:ani-pulso .5s ease-in-out infinite alternate}
  .animacion[data-paso="3"] .ani-frag{transform-box:fill-box;transform-origin:50% 50%;animation:ani-aspirar 3s ease-in infinite}
  .animacion[data-paso="3"] .f2{animation-delay:.8s}.animacion[data-paso="3"] .f3{animation-delay:1.6s}
  .animacion[data-paso="4"] .ani-lio{animation:ani-desplegar 1.6s ease-out both}
  .animacion--presion-intraocular .ani-gota{animation:ani-gotear 1.4s ease-in infinite}
  .animacion--presion-intraocular[data-paso="1"] .ani-part{animation:ani-flujo-adentro 3.2s linear infinite}
  .animacion--presion-intraocular[data-paso="2"] .ani-part{animation:ani-flujo 3.2s linear infinite}
  .animacion--presion-intraocular[data-paso="3"] .ani-part{animation:ani-flujo-tapado 3.2s linear infinite}
  .animacion--presion-intraocular .p2{animation-delay:.8s!important}.animacion--presion-intraocular .p3{animation-delay:1.6s!important}.animacion--presion-intraocular .p4{animation-delay:2.4s!important}
  .animacion--presion-intraocular[data-paso="3"] .ani-excavacion{animation:ani-pulso .8s ease-in-out infinite alternate}
}
/* Sin movimiento: se muestra el estado final de cada paso. */
@media (prefers-reduced-motion:reduce){
  .animacion[data-paso="2"] .ani-rexis{stroke-dashoffset:0}
  .animacion--presion-intraocular .ani-part{opacity:1}
  .animacion--presion-intraocular .p1{offset-distance:20%}.animacion--presion-intraocular .p2{offset-distance:45%}.animacion--presion-intraocular .p3{offset-distance:65%}.animacion--presion-intraocular .p4{offset-distance:85%}
  .animacion .ani-aguja{transition:none}
}
.animacion.esta-pausada *{animation-play-state:paused!important}

@keyframes ani-corte{0%,100%{transform:translate(-10px,-4px)}50%{transform:translate(8px,3px)}}
@keyframes ani-dibujar{0%{stroke-dashoffset:110}60%,100%{stroke-dashoffset:0}}
@keyframes ani-pulso{from{opacity:.35}to{opacity:1}}
@keyframes ani-aspirar{0%{transform:translate(0,0) scale(1);opacity:1}80%{transform:translate(-24px,-2px) scale(.25);opacity:.4}100%{transform:translate(-26px,-2px) scale(0);opacity:0}}
@keyframes ani-desplegar{0%{transform:scaleY(.2) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scaleY(1) rotate(0);opacity:1}}
@keyframes ani-gotear{0%{transform:translateY(0);opacity:1}80%{transform:translateY(26px);opacity:.2}100%{transform:translateY(30px);opacity:0}}
@keyframes ani-flujo-adentro{0%{offset-distance:0%;opacity:0}10%{opacity:1}100%{offset-distance:70%;opacity:1}}
@keyframes ani-flujo{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes ani-flujo-tapado{0%{offset-distance:0%;opacity:0}10%{opacity:1}85%,100%{offset-distance:88%;opacity:1}}