/* ==========================================================================
   motion.css · todas las animaciones en un solo lugar
   Criterio (igual que en Terra Ventus): se anima SOLO transform/opacity (los resuelve la GPU),
   lo que no está en pantalla se pausa, y todo se apaga con "reducir movimiento" y en equipos lentos.
   Las pocas animaciones que hay, en orden de importancia:
     1. entrada del hero (una vez)      2. recorrido que se desliza con el scroll (en scroll.js)
     3. olas del hero (bucle lento)     4. aparición de cada bloque al bajar (una vez)
     5. íconos que se dibujan (una vez) 6. ecualizador del video (solo mientras suena)
   ========================================================================== */

/* sin JavaScript no hay pantalla de carga ni nada escondido esperando animarse */
html.no-js .loader{display:none}

/* ---------- postal de bienvenida: sol, agua y un telón azul ----------
   Sin imágenes extra, filtros, canvas ni trabajo JavaScript por cuadro.
   El progreso refleja recursos resueltos; las olas solo animan transform. */
.loader{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(1.25rem,3.5vw,3rem);color:var(--cream);overflow:hidden;isolation:isolate;
  padding-top:max(clamp(1.25rem,3.5vw,3rem),env(safe-area-inset-top));
  padding-bottom:max(clamp(1.25rem,3.5vw,3rem),env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 42%,#164d72 0%,var(--pool-900) 48%,var(--pool-950) 100%);
  transition:transform .72s cubic-bezier(.76,0,.24,1),visibility 0s .72s;
  animation:ld-failsafe .01s 7s forwards}
.loader::before{content:"";position:absolute;inset:12px;border:1px solid rgba(191,234,245,.13);border-radius:3px;pointer-events:none;z-index:-1}
.loader::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--sun)}
html.is-ready .loader{transform:translateY(-101%);visibility:hidden;pointer-events:none}
html.no-loader .loader{display:none}
html.js:not(.is-ready):not(.no-loader){overflow:hidden;animation:ld-unlock .01s 7s forwards}
.loader__top,.loader__bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;width:100%;max-width:1440px;margin-inline:auto}
.loader__top{font-size:.65rem;font-weight:600;letter-spacing:.18em;color:var(--aqua-200);padding:.5rem}
.loader__in{display:grid;align-content:center;justify-items:center;gap:1rem;padding:1.5rem 0;text-align:center;
  transition:opacity .22s ease,transform .65s var(--ease)}
html.is-ready .loader__in{opacity:0;transform:translateY(-28px)}
.loader__scene{position:relative;width:clamp(126px,20vh,192px);aspect-ratio:4/5;margin-bottom:.5rem;animation:ld-scene .8s var(--ease-out) both}
.loader__portal{position:absolute;inset:0;overflow:hidden;border-radius:50% 50% 8px 8px;
  background:linear-gradient(160deg,#2e728d,#b0d8d2);border:1px solid rgba(255,248,236,.45)}
.loader__sun{position:absolute;left:21%;top:15%;width:58%;aspect-ratio:1;border-radius:50%;background:var(--sun);
  box-shadow:0 0 0 12px rgba(255,194,51,.09),0 0 0 25px rgba(255,194,51,.05);animation:ld-sun 1s var(--ease-out) both}
.loader__palm{position:absolute;right:-9%;bottom:20%;width:72%;height:77%;color:var(--pool-950);transform:rotate(9deg);transform-origin:50% 100%}
.loader__water{position:absolute;inset:56% 0 -24%;transform:translateY(calc((1 - var(--p,0))*24%));transition:transform .65s var(--ease)}
.loader__wave{position:absolute;top:0;left:0;width:200%;max-width:none;height:100%;animation:ld-wave 5s linear infinite;fill:var(--pool-500)}
.loader__wave--front{top:12%;fill:var(--pool-600);animation-duration:7s;animation-direction:reverse}
.loader__glint{position:absolute;left:34%;top:29%;width:32%;height:2px;background:rgba(255,248,236,.65);border-radius:50%;
  box-shadow:8px 9px 0 -0.3px rgba(255,248,236,.4),-5px 18px 0 -0.5px rgba(255,248,236,.3);animation:ld-glint 2.4s ease-in-out infinite alternate}
.loader__spark{position:absolute;width:26px;fill:var(--sun);animation:ld-spark .85s .18s var(--ease-out) both}
.loader__spark--a{top:16%;left:-29%}
.loader__spark--b{width:15px;right:-23%;bottom:21%;animation-delay:.3s}
.loader__name{font-family:var(--display);line-height:1;text-wrap:nowrap}
.loader__eyebrow{display:block;font:600 .65rem var(--sans);letter-spacing:.38em;margin-bottom:.6rem;color:var(--aqua-200);animation:ld-up .6s .08s var(--ease-out) both}
.loader__word{display:block;overflow:hidden;padding:0 .08em .12em}
.loader__word b{display:block;padding-inline:.1em;font-size:clamp(4rem,12vw,8.5rem);font-weight:800;letter-spacing:-.065em;animation:ld-word .85s .1s var(--ease-out) both}
.loader__dot{color:var(--sun)}
.loader__tagline{font-size:clamp(.85rem,2vw,1rem);color:var(--aqua-200);letter-spacing:.02em;animation:ld-up .65s .23s var(--ease-out) both}
.loader__bottom{padding:.5rem}
.loader__progress{width:min(240px,58vw)}
.loader__status{font-size:.72rem;color:var(--aqua-200);margin-bottom:.75rem}
.loader__bar{height:2px;background:rgba(191,234,245,.18);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--sun);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .35s var(--ease)}
.loader__skip{display:flex;align-items:center;gap:1rem;min-height:44px;padding:.5rem .25rem;font-size:.8rem;color:var(--cream)}
.loader__skip span{font-size:1.3rem;color:var(--sun);transition:transform .2s var(--ease)}
.loader__skip:hover span{transform:translate(2px,-2px)}
.loader__skip:focus-visible{outline-color:var(--sun)}
@keyframes ld-scene{from{opacity:0;transform:translateY(20px) rotate(-5deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes ld-sun{from{transform:translateY(65%) scale(.75)}to{transform:none}}
@keyframes ld-word{from{transform:translateY(110%) rotate(3deg)}to{transform:none}}
@keyframes ld-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ld-wave{to{transform:translateX(-50%)}}
@keyframes ld-glint{to{opacity:.4;transform:translateX(8px) scaleX(.8)}}
@keyframes ld-spark{from{opacity:0;transform:scale(.3) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes ld-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes ld-unlock{to{overflow:visible}}
.lite .loader,.return-visit .loader{transition:opacity .24s ease,visibility 0s .24s}
html.is-ready.lite .loader,html.is-ready.return-visit .loader{transform:none;opacity:0}
.lite .loader__in *,.return-visit .loader__in *{animation:none}
.lite .loader__in,.return-visit .loader__in{transition:opacity .2s;transform:none}
.loader.is-paused *{animation-play-state:paused!important}
@media(max-width:480px){
  .loader__top{font-size:.52rem;letter-spacing:.12em;gap:.75rem}
  .loader__in{gap:.65rem}
  .loader__scene{width:140px}
  .loader__bottom{gap:1rem}
}
@media(max-height:600px){
  .loader__in{gap:.35rem;padding:.5rem 0}
  .loader__scene{width:84px;margin-bottom:0}
  .loader__word b{font-size:3.6rem}
  .loader__eyebrow{margin-bottom:.3rem;font-size:.55rem}
  .loader__tagline{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .loader{display:none}
  html.js:not(.is-ready){overflow:visible;animation:none}
}

/* ---------- entrada del hero: arranca cuando se abre la pantalla de carga ---------- */
html.is-ready .hero__eyebrow{animation:rise .9s var(--ease-out) .25s backwards}
html.is-ready .hero__title .w>span{animation:word 1.05s var(--ease-out) calc(.3s + var(--i)*.085s) backwards}
html.is-ready .hero__title .w--key>span::after{animation:swoosh .9s var(--ease-out) 1.1s backwards}
html.is-ready .hero__lead{animation:rise .9s var(--ease-out) .75s backwards}
html.is-ready .hero__cta{animation:rise .9s var(--ease-out) .88s backwards}
html.is-ready .hero__chips{animation:rise .9s var(--ease-out) 1s backwards}
html.is-ready .arch--a{animation:arch-in 1.25s var(--ease-out) .35s backwards}
html.is-ready .arch--b{animation:arch-in 1.25s var(--ease-out) .6s backwards}
html.is-ready .hero__sun{animation:sun-in 1.4s var(--ease-out) .2s backwards}
html.is-ready .sticker{animation:pop .9s cubic-bezier(.3,1.5,.5,1) 1.2s backwards}
html.is-ready .badge{animation:pop .9s cubic-bezier(.3,1.5,.5,1) 1.35s backwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes word{from{transform:translateY(108%)}}
@keyframes swoosh{from{transform:scaleX(0)}}
@keyframes arch-in{from{opacity:0;transform:translateY(70px) scale(.93)}}
@keyframes sun-in{from{opacity:0;transform:scale(.6)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}

/* las olas del hero y la cenefa de datos se mueven despacio (se pausan fuera de pantalla) */
.wave{animation:drift 24s linear infinite}
.wave--b{animation-duration:38s;animation-direction:reverse}
.facts__key{animation:key-drift 6s linear infinite}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}
@keyframes key-drift{to{transform:translate3d(calc(var(--key-p)*-1),0,0)}}
.is-off .wave,.is-off .key{animation-play-state:paused}

/* ---------- aparición al bajar ----------
   Antes de aparecer el bloque solo está transparente; el desplazamiento vive únicamente dentro de la animación.
   (Un desplazamiento fijo en cientos de bloques impedía que Chrome/Lighthouse midieran el LCP de la página.)
   Se anima con "translate" y no con "transform" para no pelearse con los hover. */
html.js [data-reveal]:not(.is-in){opacity:0}
html.js [data-reveal].is-in{animation:reveal .95s var(--ease-out) calc(var(--i,0)*85ms) backwards}
@keyframes reveal{from{opacity:0;translate:0 34px}}

/* íconos de línea que se dibujan al aparecer (cada trazo tiene pathLength="1") */
.ic *{stroke-dasharray:1 2;stroke-dashoffset:0}
html.js .feat:not(.is-in) .ic *{stroke-dashoffset:1}
html.js .feat.is-in .ic *{animation:draw 1.4s var(--ease) calc(var(--i,0)*85ms + .3s) backwards}
@keyframes draw{from{stroke-dashoffset:1}}

/* al elegir una pregunta, la respuesta entra suave */
.panel:not([hidden]){animation:panel-in .5s var(--ease-out)}
@keyframes panel-in{from{opacity:0;translate:0 14px}}

/* barra "seña / resto" del precio */
html.js .ticket:not(.is-in) .split i{transform:scaleX(0)}
html.js .ticket.is-in .split__a{animation:grow 1s var(--ease-out) .5s backwards}
html.js .ticket.is-in .split__b{animation:grow 1.3s var(--ease-out) .7s backwards}
@keyframes grow{from{transform:scaleX(0)}}

/* ecualizador del video: solo se mueve mientras suena */
.vframe__badge{z-index:3;pointer-events:none}
.vframe.is-playing .eq i{animation:eq .8s ease-in-out infinite alternate}
.vframe.is-playing .eq i:nth-child(2){animation-duration:.55s;animation-delay:-.2s}
.vframe.is-playing .eq i:nth-child(3){animation-duration:.95s;animation-delay:-.45s}
.vframe.is-playing .eq i:nth-child(4){animation-duration:.65s;animation-delay:-.1s}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

/* ---------- equipos lentos ("lite", lo decide boot.js): sin bucles ni parallax ---------- */
.lite .wave,.lite .key{animation:none}
.lite [data-par]{translate:none!important}

/* ---------- "reducir movimiento" del sistema: todo queda quieto y visible ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js [data-reveal]:not(.is-in){opacity:1}
  .wave,.key{animation:none!important}
}