/* Capa de dinamismo de MIKA: cabecera fija, aparición al hacer scroll y microinteracciones.
   Todo el movimiento se apaga con prefers-reduced-motion y con «Movimiento reducido» del panel
   de accesibilidad (clase .reduce-motion en <html>). */

/* Cabecera fija con fondo translúcido. El fondo va en ::before, a todo el ancho, para no tocar
   el ancho ni el relleno con que la página alinea la cabecera. No cambia de alto al bajar:
   eso movería el contenido y haría saltar el scroll. */
body,main{overflow-x:clip}
header{position:sticky;top:0;z-index:50}
header::before{content:'';position:absolute;z-index:-1;top:0;bottom:-1px;left:50%;width:100vw;transform:translateX(-50%);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
header.compacta::before{box-shadow:0 6px 24px #0000001f}

/* Barra de progreso de lectura */
.progreso-lectura{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--purple),var(--mint));transform-origin:0 50%;transform:scaleX(var(--progreso,0));pointer-events:none}

/* Entrada y salida por la derecha al hacer scroll (solo si dinamica.js marcó <html> con
   .con-movimiento): oculto = encogido y corrido a la derecha, anclado a su borde derecho */
.con-movimiento [data-aparece]{opacity:0;transform:translateX(min(28vw,320px)) scale(.55);transform-origin:100% 50%;transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--retraso,0ms)}
.con-movimiento [data-aparece].visible{opacity:1;transform:none}
/* Las tarjetas que se elevan al pasar el cursor tienen que ganarle a la regla anterior */
.con-movimiento .service[data-aparece].visible:hover{transform:translateY(-6px);transition-delay:0ms}
.con-movimiento .crypto-brand[data-aparece].visible:hover{transform:translateY(-2px);transition-delay:0ms}

/* Entrada del hero */
.con-movimiento .hero-copy>*{animation:entrar .8s cubic-bezier(.2,.7,.2,1) both}
.con-movimiento .hero-copy>:nth-child(2){animation-delay:.08s}
.con-movimiento .hero-copy>:nth-child(3){animation-delay:.16s}
.con-movimiento .hero-copy>:nth-child(4){animation-delay:.24s}
.con-movimiento .hero-copy>:nth-child(5){animation-delay:.32s}
.con-movimiento .hero-art img{animation:respirar 14s ease-in-out infinite alternate}
@keyframes entrar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes respirar{from{transform:scale(1)}to{transform:scale(1.06) translateY(-1%)}}

/* Tarjetas de servicios: se elevan y la flecha avanza */
.service{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.service:hover{transform:translateY(-6px);box-shadow:0 18px 40px #2a1d8f26;border-color:var(--purple)}
.service-link [aria-hidden],.button [aria-hidden],.text-link [aria-hidden]{display:inline-block;transition:transform .25s ease}
.service:hover .service-link [aria-hidden],.button:hover [aria-hidden],.text-link:hover [aria-hidden]{transform:translate(3px,-3px)}
.crypto-brand{transition:background-color .25s ease,transform .25s ease}
.crypto-brand:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--purple) 10%,transparent)}

/* Pasos de cada servicio: texto con flechas, para que no parezcan botones */
.product-mini-flow span,.contrast.dark-mode .product-mini-flow span{padding:0;background:none;border:0;border-radius:0;font-weight:600;color:var(--purple)}

/* Flujos: los pasos se encienden en secuencia al cambiar de pestaña */
.con-movimiento .journey li{animation:entrar .5s ease both}
.con-movimiento .journey li:nth-child(2){animation-delay:.12s}
.con-movimiento .journey li:nth-child(3){animation-delay:.24s}
.con-movimiento .journey li:nth-child(4){animation-delay:.36s}
.con-movimiento .journey li>span{animation:encender .5s ease both;animation-delay:inherit}
@keyframes encender{from{background:var(--purple);color:#fff}}

/* Proceso: una línea se dibuja sobre cada etapa al aparecer */
.process-section article{position:relative}
/* En modo oscuro las etapas tienen fondo: el sitio original no les daba relleno y el texto tocaba el borde */
.dark-mode .steps article{padding:24px 24px 28px;border-radius:0 0 12px 12px}
.con-movimiento .process-section article::before{content:'';position:absolute;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--purple),var(--mint));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--retraso,0ms) + .2s)}
.con-movimiento .process-section article.visible::before{transform:scaleX(1)}

/* Cierre: el asterisco gira lento */
.con-movimiento .closing-star{animation:girar 60s linear infinite}
@keyframes girar{from{transform:rotate(12deg)}to{transform:rotate(372deg)}}

/* Pulsos de luz sobre las ilustraciones (los crea pulsos.js). En el hero siguen el zoom lento de
   la imagen; en las de producto, el acercamiento al pasar el cursor. */
.hero-art .pulsos,.product-picture .pulsos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.con-movimiento .hero-art .pulsos{animation:respirar 14s ease-in-out infinite alternate}
.product-picture .pulsos{transition:transform .8s}
.product-picture:hover .pulsos{transform:scale(1.035)}
.pulsos.pausado *{animation-play-state:paused!important}
.pulsos .pulso{fill:none;stroke-linecap:round;stroke-dasharray:130 1100;stroke-dashoffset:130;animation:recorrer var(--dur) linear var(--retraso-pulso) infinite}
.pulsos .estela{stroke-width:16}
.pulsos .menta.estela{stroke:#7dffc4}
.pulsos .morado.estela{stroke:#b69dff}
.pulsos .nucleo{stroke:#fff;stroke-width:5;stroke-dasharray:60 1100;stroke-dashoffset:60;animation-name:recorrer-nucleo}
.pulsos .tenue{opacity:.75}
.pulsos .orbita.estela{stroke-dasharray:45 1100;animation-name:orbitar}
.pulsos .orbita.nucleo{stroke-dasharray:20 1100;animation-name:orbitar-nucleo}
.pulsos .llegada,.pulsos .chispa{opacity:0;transform-box:fill-box;transform-origin:center}
.pulsos .llegada{animation:llegar var(--dur) linear var(--retraso-pulso) infinite}
.pulsos .chispa{animation:titilar 3.4s ease-in-out var(--retraso-pulso) infinite}
/* El pulso viaja en el 75 % del ciclo y descansa el resto; la cabeza llega al final hacia el 71 %.
   Estela y núcleo tienen largos distintos: los desfases mantienen sus cabezas juntas. */
@keyframes recorrer{0%{stroke-dashoffset:130}75%,100%{stroke-dashoffset:-930}}
@keyframes recorrer-nucleo{0%{stroke-dashoffset:60}75%,100%{stroke-dashoffset:-1000}}
/* En el anillo (camino cerrado) el pulso gira sin pausa */
@keyframes orbitar{from{stroke-dashoffset:45}to{stroke-dashoffset:-955}}
@keyframes orbitar-nucleo{from{stroke-dashoffset:20}to{stroke-dashoffset:-980}}
@keyframes llegar{0%,62%{opacity:0;transform:scale(.4)}71%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.3)}}
@keyframes titilar{0%,100%{opacity:0;transform:scale(.5)}45%{opacity:.95;transform:scale(1)}}

/* Sin movimiento: todo visible y quieto */
@media (prefers-reduced-motion:reduce){
  .con-movimiento [data-aparece]{opacity:1;transform:none}
  .progreso-lectura,.pulsos{display:none}
}
.reduce-motion .pulsos{display:none}
.reduce-motion [data-aparece]{opacity:1!important;transform:none!important}
.reduce-motion .progreso-lectura{display:none}