/* Animaciones de la maqueta, con el lenguaje de movimiento de Bwit Manager:
   - curvas y duraciones del portal (--curva .4,0,.6,1 · --curva-reactiva .32,.72,0,1);
   - la entrada de apple.com que midió el portal: fundido de 0,9 s + empujón de 30 px en 0,7 s,
     easeInOutQuad, escalonado 150 ms con tope de 600 ms;
   - los pulsos de luz amarilla que recorren las pistas de circuito (rediseño v5);
   - la foto que viaja de la rejilla a la ficha (View Transitions, como en el portal).
   Todo va bajo html.anim, que solo pone animaciones.js si el sistema no pide «reducir movimiento». */
:root{
  --curva:cubic-bezier(.4,0,.6,1); --curva-reactiva:cubic-bezier(.32,.72,0,1); --curva-apple:cubic-bezier(.45,0,.55,1);
  --dur-fundido:.9s; --dur-empujon:.7s; --empujon:30px; --pista-luz:#FFD348;
}

/* ── 1. Entrada al hacer scroll (StaggeredFadeIn de apple.com) ── */
html.anim .revela{opacity:0;transform:translateY(var(--empujon))}
html.anim .revela.dentro{opacity:1;transform:none;
  transition:opacity var(--dur-fundido) var(--curva-apple) var(--retardo,0ms),transform var(--dur-empujon) var(--curva-apple) var(--retardo,0ms)}

/* Titular de cabecera: cada línea sube desde detrás de una máscara */
html.anim .linea-titular{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
html.anim .linea-titular>span{display:inline-block;transform:translateY(105%);animation:sube-linea 1s var(--curva-reactiva) forwards;animation-delay:calc(120ms + var(--i,0) * 110ms)}
@keyframes sube-linea{to{transform:none}}
html.anim .hero .lema,html.anim .cab-pagina .miga,html.anim .hero .botones,html.anim .cab-pagina .sub{opacity:0;animation:aparece-suave .9s var(--curva-apple) forwards;animation-delay:var(--d,.05s)}
@keyframes aparece-suave{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Foto de la cabecera: entra desde abajo con un leve zoom, y luego flota */
html.anim .hero-foto img{animation:entra-foto 1.3s var(--curva-reactiva) .15s both,flota 7s ease-in-out 1.5s infinite}
@keyframes entra-foto{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -8px}}
html.anim .hero-foto::before{animation:sombra-flota 7s ease-in-out 1.5s infinite}
@keyframes sombra-flota{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.92);opacity:.75}}

/* ── 2. Circuitos vivos ── */
/* Las pistas se dibujan al entrar en pantalla… */
html.anim .circuitos .pista{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--curva) var(--rp,0ms)}
html.anim .circuitos.dibujado .pista{stroke-dashoffset:0}
html.anim .circuitos .pad,html.anim .circuitos .pad-hueco,html.anim .circuitos .via,html.anim .circuitos .via-hueco{opacity:0;transition:opacity .5s var(--curva) calc(var(--rp,0ms) + 1.1s)}
html.anim .circuitos.dibujado .pad,html.anim .circuitos.dibujado .pad-hueco,html.anim .circuitos.dibujado .via,html.anim .circuitos.dibujado .via-hueco{opacity:1}
/* …y luego las recorre una luz amarilla, cada una a su ritmo */
.circuitos .luz{fill:none;stroke:var(--pista-luz);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.07 .93;stroke-dashoffset:1.07;opacity:0;filter:drop-shadow(0 0 3px var(--pista-luz))}
html.anim .circuitos.dibujado .luz{animation:pulso var(--dur,7s) linear var(--ret,0s) infinite}
@keyframes pulso{0%{stroke-dashoffset:1.07;opacity:0}6%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* los pads laten cuando la luz llega */
html.anim .circuitos.dibujado .pad{transform-box:fill-box;transform-origin:center;animation:late-pad var(--dur,7s) ease-in-out var(--ret,0s) infinite}
@keyframes late-pad{0%,82%,100%{transform:scale(1)}90%{transform:scale(1.45)}}
.lv-mapa .luz,.lv-post .luz{stroke-width:2.4}

/* ── 3. Lo que responde a la mano ── */
/* Tarjetas: se elevan, la foto se acerca y un brillo sigue al ratón */
html.anim .prod,html.anim .lv-destacado,html.anim .lv-sol,html.anim .testimonio,html.anim .lv-persona,html.anim .lv-post,html.anim .lv-pilar{position:relative;isolation:isolate;
  transition:transform .35s var(--curva-reactiva),box-shadow .35s var(--curva-reactiva),border-color .35s var(--curva-reactiva)}
html.anim .prod:hover,html.anim .lv-destacado:hover,html.anim .lv-sol:hover,html.anim .lv-post:hover,html.anim .lv-persona:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(21,40,61,.05),0 24px 50px -26px rgba(21,40,61,.4);border-color:#B9CCE4}
html.anim .prod figure img,html.anim .lv-destacado figure img,html.anim .lv-sol figure img{transition:transform .6s var(--curva-reactiva)}
html.anim .prod:hover figure img,html.anim .lv-destacado:hover figure img{transform:scale(1.07)}
html.anim .lv-sol:hover figure img{transform:translateY(-6px) scale(1.04)}
html.anim .brillo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s var(--curva);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,76,151,.08),transparent 55%)}
html.anim .brillo:hover::after{opacity:1}
/* «Leer más →»: la flecha empuja */
html.anim .lv-leer{transition:letter-spacing .3s var(--curva-reactiva)}
html.anim .lv-destacado:hover .lv-leer{letter-spacing:.02em}
/* Botones: destello que cruza al pasar */
html.anim .boton{position:relative;overflow:hidden;transition:transform .25s var(--curva-reactiva),box-shadow .25s var(--curva-reactiva),background .25s}
html.anim .boton::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
html.anim .boton:hover::before{animation:destello-boton .8s var(--curva)}
html.anim .boton:hover{transform:translateY(-1px)}
html.anim .boton:active{transform:scale(.97)}
@keyframes destello-boton{to{left:130%}}
html.anim .boton .flecha{display:inline-block;transition:transform .3s var(--curva-reactiva)}
html.anim .boton:hover .flecha{transform:translateX(4px)}

/* Menú: una raya amarilla que viaja bajo el apartado, como la barra segmentada del portal */
.c-menu-lista{position:relative}
.menu-ind{position:absolute;bottom:-6px;height:2px;border-radius:2px;background:var(--amarillo);pointer-events:none;opacity:0;
  transition:left .32s var(--curva),width .32s var(--curva),opacity .2s}
html.anim .c-menu-lista a[aria-current]{border-bottom-color:transparent!important}
/* Desplegable: las columnas caen en cascada */
html.anim .con-mm:hover .mm-dentro>div,html.anim .con-mm:focus-within .mm-dentro>div{animation:cae-columna .5s var(--curva-reactiva) both}
html.anim .mm-dentro>div:nth-child(2){animation-delay:40ms!important}html.anim .mm-dentro>div:nth-child(3){animation-delay:80ms!important}
html.anim .mm-dentro>div:nth-child(4){animation-delay:120ms!important}html.anim .mm-dentro>div:nth-child(5){animation-delay:160ms!important}html.anim .mm-dentro>div:nth-child(6){animation-delay:200ms!important}
@keyframes cae-columna{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Menú pegado: al bajar, se vuelve translúcido y gana sombra */
.c-menu{transition:background .3s var(--curva),box-shadow .3s var(--curva),backdrop-filter .3s}
.c-menu.bajado{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 8px 30px rgba(21,40,61,.06)}
/* Barra de progreso de lectura: el conector amarillo del logo */
.progreso-lectura{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--amarillo),#FFD348);z-index:60;pointer-events:none}

/* ── 4. Detalles que cuentan algo ── */
/* Estrellas de los testimonios: se encienden una a una */
html.anim .estrellas .e{display:inline-block;opacity:.2;transform:scale(.6);transition:opacity .4s var(--curva),transform .5s var(--curva-reactiva);transition-delay:calc(var(--k) * 90ms + 250ms)}
html.anim .dentro .estrellas .e,html.anim .estrellas.dentro .e{opacity:1;transform:none}
/* Recuentos del índice de Soluciones: la cifra gira al entrar */
html.anim .gira{display:inline-block;animation:gira-cifra .6s var(--curva-reactiva) both}
@keyframes gira-cifra{0%{opacity:0;transform:translateY(-60%)}100%{opacity:1;transform:none}}
/* Al filtrar Soluciones, los productos entran en cascada */
html.anim .prods .prod.entra{animation:entra-widget .55s var(--curva-reactiva) both;animation-delay:calc(min(var(--i,0), 14) * 35ms)}
@keyframes entra-widget{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* Chincheta del mapa: onda */
html.anim .lv-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--azul);opacity:0;animation:onda 2.4s var(--curva) infinite}
@keyframes onda{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(2.2)}}
/* Arcos que derivan despacio al fondo de las cabeceras (rediseño v5) */
.arcos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.arcos i{position:absolute;border-radius:50%;border:1px solid rgba(0,76,151,.10)}
.arcos i:nth-child(1){width:560px;height:560px;right:-180px;top:-320px}
.arcos i:nth-child(2){width:360px;height:360px;right:80px;top:-190px;border-color:rgba(233,185,32,.18)}
.arcos i:nth-child(3){width:220px;height:220px;right:260px;top:-130px}
html.anim .arcos i:nth-child(1){animation:deriva 32s ease-in-out infinite alternate}
html.anim .arcos i:nth-child(2){animation:deriva-2 40s ease-in-out infinite alternate}
html.anim .arcos i:nth-child(3){animation:deriva-3 29s ease-in-out infinite alternate}
@keyframes deriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,26px) scale(1.06)}100%{transform:translate(30px,-18px) scale(.97)}}
@keyframes deriva-2{0%{transform:translate(0,0)}50%{transform:translate(34px,-20px) scale(1.05)}100%{transform:translate(-26px,16px)}}
@keyframes deriva-3{0%{transform:translate(0,0)}100%{transform:translate(-30px,24px) scale(1.08)}}
/* Aviso de formulario: sube como el toast del portal */
.aviso{transition:opacity .3s var(--curva),transform .3s var(--curva)!important}

/* ── 5. La foto viaja de la tarjeta a la ficha (entre páginas) ── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--curva)}
::view-transition-group(foto-producto){animation-duration:.5s;animation-timing-function:var(--curva-reactiva)}
.lv-galeria img{view-transition-name:foto-producto}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}