/* ═══════════════════════════════════════════════════════
   FRENESSÍ · CÁPSULA INMERSIVA
   Orden de capas
     0  .cosmos   fondo fijo: mesa → espacio → cielo → mar
     1  .astro    el astronauta, siempre por detrás del texto
     2  main/foot el contenido
     850 .hud · 900 .nav · 8999 scanlines · 9000 grain · 9999 loader
   ═══════════════════════════════════════════════════════ */

:root{
  --void:#04040a;
  --ink:#08080f;
  --ink-2:#0d0d18;
  --line:rgba(255,255,255,.10);
  --magenta:#e6007e;
  --magenta-soft:#ff3d9e;
  --cyan:#6ff2ff;
  --violet:#8b5cf6;
  --lime:#d6ff3f;
  --paper:#f2f2f5;
  --mute:rgba(242,242,245,.56);
  --mute-2:rgba(242,242,245,.34);

  --shell:min(1360px, 90vw);
  --gut:clamp(1.1rem,4vw,3.4rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  background:var(--void);
  color:var(--paper);
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden;height:100vh}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--magenta);color:#fff}

/* clip (no hidden): recorta sin crear contenedor de scroll, así los
   sticky siguen funcionando. En móvil, cualquier cosa que asome por los
   lados ensanchaba la página y el navegador la alejaba y dejaba bailar */
main,.foot{position:relative;z-index:2;overflow-x:clip}
.wrap{width:var(--shell);margin-inline:auto;position:relative;z-index:2}
.anchor{position:absolute;top:-90px}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#2a2a38;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--magenta)}

/* ═══════════ TIPOGRAFÍA ═══════════ */
.eyebrow{
  font-size:clamp(.6rem,.7vw,.72rem);
  letter-spacing:.4em;text-transform:uppercase;font-weight:500;
  color:var(--mute);margin-bottom:1.4rem;
}
.eyebrow--pulse{color:var(--magenta-soft)}
.eyebrow--pulse::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--magenta);margin-right:.8em;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(230,0,126,.7);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(230,0,126,.65)}
  70%{box-shadow:0 0 0 14px rgba(230,0,126,0)}
  100%{box-shadow:0 0 0 0 rgba(230,0,126,0)}
}

.h2{
  font-size:clamp(1.75rem,3.4vw,3.1rem);
  font-weight:300;line-height:1.06;letter-spacing:-.028em;
  text-shadow:0 2px 26px rgba(4,4,10,.7);
}
.h2 em,.capsule__h em,.launch__h em,.final__h em{
  font-style:normal;
  background:linear-gradient(100deg,var(--magenta-soft),var(--violet) 45%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.body{
  font-size:clamp(.95rem,1.05vw,1.06rem);
  color:var(--mute);max-width:56ch;line-height:1.75;
  text-shadow:0 1px 18px rgba(4,4,10,.6);
}

/* ═══════════ BOTONES ═══════════ */
.btn{
  --pad:.95em 2em;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:var(--pad);
  font-size:clamp(.64rem,.72vw,.73rem);
  letter-spacing:.22em;font-weight:600;text-transform:uppercase;
  border-radius:100px;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--magenta);color:#fff;box-shadow:0 6px 30px -10px rgba(230,0,126,.85)}
.btn--solid::before{background:#fff}
.btn--solid:hover{color:var(--void)}
.btn--ghost{border:1px solid rgba(255,255,255,.28);color:var(--paper);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost::before{background:var(--paper)}
.btn--ghost:hover{color:var(--void);border-color:var(--paper)}
.btn--lg{--pad:1.1em 2.5em}

/* ═══════════════════════════════════════════════════════
   CABINA DE DESPEGUE
   Estados: arrancando → .is-ready → .is-launching → .is-gone
   ═══════════════════════════════════════════════════════ */
.gate{
  position:fixed;inset:0;z-index:9999;background:#020207;
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .9s var(--ease),visibility .9s;
}
.gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.skip-gate .gate{display:none}
.gate__warp{position:absolute;inset:0;width:100%;height:100%}
.gate__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,transparent 30%,rgba(2,2,7,.85) 100%),
    radial-gradient(circle at 50% 50%,rgba(230,0,126,.10),transparent 45%);
}

/* marco de visor */
.gate__frame{position:absolute;inset:clamp(14px,3vw,34px);pointer-events:none}
.gate__corner{
  position:absolute;width:clamp(26px,4vw,54px);height:clamp(26px,4vw,54px);
  border:1.5px solid rgba(111,242,255,.55);
}
.gate__corner--tl{top:0;left:0;border-right:0;border-bottom:0}
.gate__corner--tr{top:0;right:0;border-left:0;border-bottom:0}
.gate__corner--bl{bottom:0;left:0;border-right:0;border-top:0}
.gate__corner--br{bottom:0;right:0;border-left:0;border-top:0}
.gate__cross{position:absolute;background:rgba(111,242,255,.12)}
.gate__cross--h{top:50%;left:0;right:0;height:1px}
.gate__cross--v{left:50%;top:0;bottom:0;width:1px}

/* telemetría */
.gate__tele{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1.1rem;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
}
.gate__tele--l{left:clamp(34px,6vw,90px)}
.gate__tele--r{right:clamp(34px,6vw,90px);text-align:right}
.gate__tele p{display:flex;flex-direction:column;gap:.3rem}
.gate__tele span{color:rgba(111,242,255,.55)}
.gate__tele b{color:var(--paper);font-weight:500;letter-spacing:.14em}
#gateEngine{transition:color .4s}
.gate.is-ready #gateEngine{color:var(--lime)}
.gate.is-launching #gateEngine{color:var(--magenta-soft)}

/* radar */
.gate__radar{
  position:absolute;left:clamp(34px,6vw,90px);bottom:clamp(40px,8vh,90px);
  width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(111,242,255,.35);
  background:
    radial-gradient(circle,transparent 32%,rgba(111,242,255,.14) 33%,transparent 34%),
    radial-gradient(circle,transparent 64%,rgba(111,242,255,.14) 65%,transparent 66%);
  overflow:hidden;
}
.gate__radar i{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(111,242,255,.55),transparent 22%);
  animation:radarSweep 2.6s linear infinite;
}
@keyframes radarSweep{to{transform:rotate(360deg)}}

/* núcleo */
.gate__core{position:relative;z-index:2;text-align:center;width:min(420px,84vw)}
.gate__logo{
  width:min(300px,64vw);height:auto;margin:0 auto 2.2rem;
  filter:drop-shadow(0 0 24px rgba(230,0,126,.45));
  animation:gateLogo 3s var(--ease-io) infinite;
}
@keyframes gateLogo{0%,100%{opacity:.85}50%{opacity:1}}
.gate__status{
  font-size:.62rem;letter-spacing:.46em;text-transform:uppercase;
  color:var(--mute);margin-bottom:1.1rem;min-height:1em;
}
.gate__bar{height:1px;background:rgba(255,255,255,.14);overflow:hidden;margin-inline:auto;width:100%}
.gate__bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  box-shadow:0 0 10px rgba(111,242,255,.7);transition:width .25s linear;
}
.gate__count{
  margin-top:.8rem;font-size:.62rem;letter-spacing:.34em;
  color:var(--mute-2);font-variant-numeric:tabular-nums;
}
.gate.is-ready .gate__bar,.gate.is-ready .gate__count,
.gate.is-launching .gate__bar,.gate.is-launching .gate__count{opacity:0;transition:opacity .4s}

/* botón de despegue: aparece cuando los sistemas están listos */
.gate__btn{
  position:relative;display:grid;place-items:center;
  width:clamp(128px,15vw,164px);aspect-ratio:1;margin:1.6rem auto 0;
  border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#ff2f97,var(--magenta) 55%,#8a0050);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 0 40px rgba(230,0,126,.6),0 0 90px rgba(230,0,126,.3);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .4s var(--ease);
}
.gate.is-ready .gate__btn{opacity:1;transform:scale(1);pointer-events:auto}
.gate__btn:hover{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 60px rgba(230,0,126,.85),0 0 130px rgba(230,0,126,.45)}
.gate__btn:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}
.gate__btn-txt{
  position:relative;z-index:2;
  font-size:.74rem;letter-spacing:.3em;text-indent:.3em;font-weight:600;color:#fff;
}
.gate__ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(230,0,126,.6);
  animation:gateRing 2.2s var(--ease-io) infinite;
}
.gate__ring--2{animation-delay:1.1s}
@keyframes gateRing{from{transform:scale(.9);opacity:.9}to{transform:scale(1.55);opacity:0}}
.gate__hint{
  margin-top:1.6rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute-2);opacity:0;transition:opacity .6s var(--ease) .3s;
}
.gate.is-ready .gate__hint{opacity:1}

/* secuencia de lanzamiento */
.gate__countdown{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  font-size:clamp(5rem,20vw,14rem);font-weight:200;letter-spacing:-.04em;
  color:var(--paper);pointer-events:none;
  text-shadow:0 0 60px rgba(111,242,255,.6);
}
.gate__countdown.tick{animation:countTick .5s var(--ease) both}
@keyframes countTick{from{opacity:0;transform:scale(1.6)}30%{opacity:1}to{opacity:0;transform:scale(.7)}}
.gate.is-launching .gate__core,
.gate.is-launching .gate__tele,
.gate.is-launching .gate__radar{opacity:0;transform:scale(.94);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gate.is-launching{animation:shake .12s linear infinite}
@keyframes shake{
  0%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}
  50%{transform:translate(-1px,2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(1px,1px)}
}
.gate__flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.9) 30%,rgba(230,0,126,.6) 70%,transparent);
}
.gate.is-flash .gate__flash{animation:flash .9s var(--ease) both}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* El hero espera a que despegues en vez de animarse escondido */
body:not(.launched) .hero__logo,
body:not(.launched) .hero__sub,
body:not(.launched) .hero__line,
body:not(.launched) .hero__actions,
body:not(.launched) .scroll-cue{animation-play-state:paused}

@media (max-width:760px){
  .gate__tele,.gate__radar,.gate__cross{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gate.is-launching{animation:none}
  .gate__radar i,.gate__ring{animation:none}
}

/* ═══════════════════════════════════════════════════════
   EL DESCENSO · fondo fijo por altitud
   ═══════════════════════════════════════════════════════ */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--void)}
/* Velo tenue sobre cualquier fondo: el texto blanco tiene que aguantar
   igual sobre el cielo de mediodía que sobre el espacio profundo. */
.cosmos::after{
  content:"";position:absolute;inset:0;z-index:5;
  background:
    linear-gradient(to bottom,rgba(4,4,10,.30),rgba(4,4,10,.10) 30% 70%,rgba(4,4,10,.30)),
    radial-gradient(ellipse 80% 60% at 50% 50%,transparent,rgba(4,4,10,.22));
}
.bd{position:absolute;inset:0;opacity:0;will-change:opacity}
.bd--hero{opacity:1}

/* — la mesa — */
.bd__video{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.06)}
.bd__grade{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 100% 72% at 50% 52%,transparent 0%,rgba(4,4,10,.30) 60%,rgba(4,4,10,.88) 100%),
    linear-gradient(to bottom,rgba(4,4,10,.72) 0%,rgba(4,4,10,.10) 24%,rgba(4,4,10,.22) 70%,var(--void) 100%),
    linear-gradient(115deg,rgba(139,92,246,.2),transparent 45%,rgba(230,0,126,.2));
}

/* — espacio — */
.bd--space{background:
  radial-gradient(ellipse 120% 80% at 20% 0%,rgba(139,92,246,.10),transparent 60%),
  radial-gradient(ellipse 110% 70% at 85% 100%,rgba(230,0,126,.09),transparent 62%),
  var(--void);
}
.stars-l{
  position:absolute;inset:-800px -10% -10% -10%;
  background-repeat:repeat;will-change:transform;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 14% 12%,#fff,transparent),
    radial-gradient(1px 1px at 62% 28%,#fff,transparent),
    radial-gradient(1px 1px at 33% 71%,#fff,transparent),
    radial-gradient(1px 1px at 84% 58%,#fff,transparent),
    radial-gradient(1px 1px at 47% 91%,#fff,transparent),
    radial-gradient(1px 1px at 92% 15%,#fff,transparent),
    radial-gradient(1px 1px at 7% 46%,#fff,transparent);
  background-size:340px 340px;
}
.stars-l--2{
  opacity:.72;background-size:520px 520px;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 34%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 71% 18%,rgba(200,225,255,.95),transparent),
    radial-gradient(1.6px 1.6px at 44% 77%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 89% 64%,rgba(255,220,240,.9),transparent),
    radial-gradient(1.5px 1.5px at 12% 88%,#fff,transparent);
  animation:twinkle 6.5s ease-in-out infinite alternate;
}
.stars-l--3{
  opacity:.9;background-size:760px 760px;
  background-image:
    radial-gradient(2.2px 2.2px at 18% 52%,#fff,transparent),
    radial-gradient(2px 2px at 76% 37%,rgba(190,240,255,.95),transparent),
    radial-gradient(2.4px 2.4px at 52% 84%,#fff,transparent),
    radial-gradient(1.9px 1.9px at 94% 22%,rgba(255,200,235,.9),transparent);
  animation:twinkle 4.2s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}

/* El degradado radial ya es suave: nada de filter:blur, que obligaría
   a recalcular el desenfoque en cada fotograma. */
.nebula{position:absolute;border-radius:50%;will-change:transform}
.nebula--violet{
  width:52vw;height:52vw;left:-14vw;top:8vh;
  background:radial-gradient(circle,rgba(139,92,246,.26),rgba(139,92,246,.10) 38%,transparent 70%);
  animation:nebulaDrift 42s ease-in-out infinite;
}
.nebula--magenta{
  width:44vw;height:44vw;right:-10vw;top:48vh;
  background:radial-gradient(circle,rgba(230,0,126,.22),rgba(230,0,126,.08) 38%,transparent 70%);
  animation:nebulaDrift 55s ease-in-out infinite reverse;
}
.nebula--cyan{
  width:36vw;height:36vw;left:38vw;top:72vh;
  background:radial-gradient(circle,rgba(111,242,255,.14),rgba(111,242,255,.05) 40%,transparent 72%);
  animation:nebulaDrift 68s ease-in-out infinite;
}
@keyframes nebulaDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,-4vh,0) scale(1.14)}
  66%{transform:translate3d(-5vw,5vh,0) scale(.92)}
}

/* — cielo — */
.sky-grad{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    #0d1638 0%,#1d2f66 16%,#33538f 38%,#5c82b6 60%,#8fb0d4 80%,#c2d8ea 100%);
}
.cloud{
  position:absolute;width:auto;max-width:none;
  will-change:transform;opacity:1;
  filter:drop-shadow(0 20px 60px rgba(10,16,48,.35));
}
.cloud--1{top:6%;left:-12%;height:32vh}
.cloud--2{top:26%;right:-16%;height:46vh}
.cloud--3{top:52%;left:-8%;height:40vh}
.cloud--4{top:70%;right:-10%;height:52vh}
.cloud--5{top:38%;left:34%;height:26vh;opacity:.62}

/* — nubes por delante del contenido —
   Van por encima de main (z2) para que el texto pase por detrás:
   así se siente que la cápsula atraviesa el banco de nubes.
   Desenfocadas y sin sombra: están fuera del plano de foco. */
.bd--front{
  position:fixed;inset:0;z-index:3;
  pointer-events:none;overflow:hidden;
}
.bd--front .cloud{
  filter:blur(3px);
  opacity:.5;
}
/* Rozan las esquinas en vez de sentarse sobre el texto: el efecto lo
   da el movimiento al hacer scroll, no la cantidad de nube. */
.cloud--f1{top:-16%;left:-18%;height:50vh}
.cloud--f2{bottom:-26%;right:-24%;height:52vh;opacity:.36!important}
.cloud--f3{top:62%;left:70%;height:30vh;opacity:.22!important}

/* — mar — */
.sea-grad{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    #4d93b2 0%,#1d6285 8%,#0d4460 24%,#082e45 46%,#041d2f 68%,#02121f 86%,#010a13 100%);
}
.caustics{
  position:absolute;inset:-20%;opacity:.22;
  background-image:
    radial-gradient(ellipse 30% 8% at 20% 12%,rgba(190,255,255,.7),transparent 60%),
    radial-gradient(ellipse 26% 7% at 62% 20%,rgba(190,255,255,.6),transparent 60%),
    radial-gradient(ellipse 34% 9% at 40% 32%,rgba(190,255,255,.5),transparent 60%),
    radial-gradient(ellipse 22% 6% at 82% 40%,rgba(190,255,255,.55),transparent 60%);
  animation:caustic 14s ease-in-out infinite alternate;
}
.caustics--2{
  opacity:.14;animation-duration:19s;animation-direction:alternate-reverse;
  background-image:
    radial-gradient(ellipse 28% 7% at 34% 8%,rgba(150,235,255,.6),transparent 60%),
    radial-gradient(ellipse 32% 8% at 74% 26%,rgba(150,235,255,.5),transparent 60%),
    radial-gradient(ellipse 24% 6% at 12% 44%,rgba(150,235,255,.55),transparent 60%);
}
@keyframes caustic{
  0%{transform:translate3d(-3%,-2%,0) scaleY(1)}
  50%{transform:translate3d(2%,3%,0) scaleY(1.25)}
  100%{transform:translate3d(4%,-1%,0) scaleY(.9)}
}
.bubbles{position:absolute;inset:0}
.bubble{
  position:absolute;bottom:-40px;border-radius:50%;
  border:1px solid rgba(200,245,255,.5);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(160,225,255,.08) 55%,transparent 70%);
  animation:rise linear infinite;
}
@keyframes rise{
  from{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.75}
  88%{opacity:.5}
  to{transform:translate3d(var(--sway,20px),-115vh,0) scale(1.1);opacity:0}
}

/* — meteoros — */
.meteors{position:absolute;inset:0}
.meteor{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.9);
  animation:meteorRun linear forwards;
}
.meteor::after{
  content:"";position:absolute;right:1px;top:50%;
  width:var(--tail,150px);height:1px;transform:translateY(-50%);
  background:linear-gradient(to left,rgba(255,255,255,.85),transparent);
}
@keyframes meteorRun{
  from{transform:translate3d(0,0,0);opacity:0}
  8%{opacity:1} 85%{opacity:1}
  to{transform:translate3d(var(--dx),var(--dy),0);opacity:0}
}

/* ═══════════════════════════════════════════════════════
   EL ASTRONAUTA · siempre entre el fondo y el texto
   ═══════════════════════════════════════════════════════ */
.astro{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease) .4s;
}
body.ready .astro{opacity:1}
.astro__body{
  position:absolute;top:0;left:0;
  width:var(--astro-w,300px);
  margin:calc(var(--astro-w,300px) * -.62) 0 0 calc(var(--astro-w,300px) * -.5);
  will-change:transform;
}
.astro__spin{animation:astroBob 9s ease-in-out infinite;transform-origin:52% 46%}
.astro__img{
  width:100%;height:auto;
  filter:drop-shadow(0 0 34px rgba(111,242,255,.32)) drop-shadow(0 26px 60px rgba(0,0,0,.75));
}
@keyframes astroBob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-14px) rotate(2.5deg)}
  50%{transform:translateY(4px) rotate(-1.5deg)}
  75%{transform:translateY(-9px) rotate(1.8deg)}
}
.astro__halo{
  position:absolute;left:50%;top:46%;width:180%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(111,242,255,.18),rgba(139,92,246,.09) 42%,transparent 68%);
  animation:haloPulse 7s var(--ease-io) infinite;
}
@keyframes haloPulse{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
}
.astro__ring{
  position:absolute;left:50%;top:46%;width:158%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(74deg);
  border:1px solid rgba(111,242,255,.22);border-radius:50%;
  animation:ringSpin 26s linear infinite;
}
.astro__ring::before{
  content:"";position:absolute;top:-3px;left:50%;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--magenta-soft);box-shadow:0 0 12px 2px rgba(255,61,158,.9);
}
@keyframes ringSpin{
  from{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}
}
.astro__trail{position:absolute;inset:0}
.astro__trail i{
  position:absolute;top:0;left:0;
  width:var(--d,6px);height:var(--d,6px);margin:calc(var(--d,6px) * -.5);
  border-radius:50%;background:rgba(111,242,255,.5);
  box-shadow:0 0 10px rgba(111,242,255,.55);
  will-change:transform,opacity;
}

/* ═══════════ HUD DE ALTITUD ═══════════ */
.hud{
  position:fixed;left:var(--gut);top:50%;z-index:850;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease) 1s;
}
body.ready .hud{opacity:1}
.hud__zone{
  font-size:.56rem;letter-spacing:.34em;color:var(--cyan);font-weight:600;
  writing-mode:vertical-rl;text-orientation:mixed;
}
.hud__bar{
  width:1px;height:clamp(90px,16vh,160px);
  background:rgba(255,255,255,.14);position:relative;overflow:hidden;
}
.hud__bar i{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(to bottom,var(--cyan),var(--magenta));
  box-shadow:0 0 8px rgba(111,242,255,.7);
}
.hud__alt{
  font-size:.54rem;letter-spacing:.18em;color:var(--mute-2);
  writing-mode:vertical-rl;font-variant-numeric:tabular-nums;
}
.hud__alt b{color:var(--paper);font-weight:500}
@media (max-width:1100px){.hud{display:none}}

/* ═══════════ ACABADO ═══════════ */
.grain{
  position:fixed;inset:-120%;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)} 50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)} 83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed;inset:0;z-index:8999;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.2) 3px 4px);
}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9100;background:rgba(255,255,255,.06);pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--violet),var(--cyan));box-shadow:0 0 12px rgba(230,0,126,.8)}
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;z-index:1;
  margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(230,0,126,.16),transparent 62%);
  opacity:0;transition:opacity .6s var(--ease);will-change:transform;
}
body.has-cursor .cursor-glow{opacity:1}
@media (hover:none),(max-width:900px){.cursor-glow{display:none}}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:2rem;
  padding:1.4rem var(--gut);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease),background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
}
.nav.stuck{
  background:rgba(6,6,12,.7);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);padding-block:.85rem;
}
.nav.hide{transform:translateY(-110%)}
.nav__logo img{height:clamp(14px,1.3vw,18px);width:auto;opacity:.95}
.nav__logo:hover img{filter:drop-shadow(0 0 12px rgba(230,0,126,.8))}
.nav__links{display:flex;gap:2rem;margin-left:auto}
.nav__links a{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);position:relative;padding-block:.35rem;transition:color .35s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--magenta);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{--pad:.75em 1.6em}
.nav__burger{display:none;width:34px;height:34px;margin-left:auto;position:relative}
.nav__burger i{position:absolute;left:6px;right:6px;height:1.5px;background:var(--paper);transition:transform .45s var(--ease)}
.nav__burger i:nth-child(1){top:13px}
.nav__burger i:nth-child(2){top:20px}
.nav__burger.open i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav__burger.open i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:880;background:rgba(4,4,10,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  font-size:1.35rem;letter-spacing:.16em;font-weight:300;text-transform:uppercase;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.08s}
.drawer.open a:nth-child(2){transition-delay:.15s}
.drawer.open a:nth-child(3){transition-delay:.22s}
.drawer.open a:nth-child(4){transition-delay:.29s}
.drawer.open a:nth-child(5){transition-delay:.38s}
.drawer a:hover{color:var(--magenta-soft)}
.drawer__cta{
  margin-top:1rem;background:var(--magenta);color:#fff;
  padding:.9em 2.4em;border-radius:100px;font-size:.78rem!important;
  letter-spacing:.24em!important;font-weight:600;
}

/* ═══════════ 01 · HERO ═══════════ */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
}

/* El astronauta ocupa la franja central del hero: el texto se reparte
   arriba y abajo para dejarle ese hueco y seguir siendo legible. */
.hero__content{
  position:relative;z-index:4;text-align:center;
  width:var(--shell);min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(5rem,12vh,7.5rem) clamp(8.5rem,17vh,11rem);
}
.hero__top,.hero__bottom{position:relative}
.hero__top::before,.hero__bottom::before{
  content:"";position:absolute;inset:-40% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(4,4,10,.72),transparent 68%);
}
/* El wordmark es el logo oficial. Entra con un barrido de izquierda a
   derecha, que sustituye al antiguo montaje letra a letra. */
.hero__title{
  margin:.4rem 0 1.3rem;
  display:flex;justify-content:center;
}
.hero__logo{
  width:clamp(240px,44vw,640px);height:auto;
  clip-path:inset(0 100% 0 0);
  opacity:0;
  animation:logoIn 1.25s var(--ease) .55s forwards;
  filter:
    drop-shadow(0 0 40px rgba(255,255,255,.22))
    drop-shadow(0 0 70px rgba(230,0,126,.35))
    drop-shadow(0 6px 30px rgba(0,0,0,.7));
}
@keyframes logoIn{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  8%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1}
}

.hero__sub{
  display:flex;justify-content:center;align-items:center;gap:1rem;
  font-size:clamp(.62rem,1vw,.86rem);letter-spacing:.48em;
  text-transform:uppercase;color:rgba(242,242,245,.85);font-weight:400;
  text-indent:.48em;animation:fadeUp 1s var(--ease) 1.25s both;
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}
.hero__sub em{color:var(--magenta);font-style:normal;letter-spacing:0}
.hero__line{
  max-width:40ch;margin:0 auto;
  font-size:clamp(.88rem,1vw,1rem);color:rgba(242,242,245,.72);line-height:1.7;
  animation:fadeUp 1s var(--ease) 1.45s both;
  text-shadow:0 2px 18px rgba(0,0,0,.85);
}
.hero__actions{
  display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;
  animation:fadeUp 1s var(--ease) 1.6s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.scroll-cue{
  position:absolute;bottom:clamp(2rem,4.5vh,3.2rem);left:50%;
  transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  animation:fadeUp 1s var(--ease) 2s both;
}
.scroll-cue__txt{font-size:.55rem;letter-spacing:.4em;color:var(--mute-2)}
.scroll-cue__line{display:block;width:1px;height:50px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.scroll-cue__line i{
  position:absolute;top:0;left:0;width:100%;height:40%;
  background:linear-gradient(to bottom,transparent,var(--magenta));
  animation:cueRun 2.1s var(--ease-io) infinite;
}
@keyframes cueRun{0%{transform:translateY(-110%)}100%{transform:translateY(260%)}}

/* ═══════════ 02 · MANIFIESTO ═══════════ */
.manifest{position:relative;padding:clamp(6rem,15vh,11rem) 0;overflow:hidden}
/* Los cuerpos flotantes se disuelven contra los bordes de la sección.
   Antes había aquí dos velos opacos y dejaban una línea negra dura
   sobre el fondo fijo: una máscara hace lo mismo sin pintar nada. */
.manifest__decor{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.manifest .wrap{max-width:1000px;text-align:center}
.manifest__text{
  font-size:clamp(.98rem,1.55vw,1.35rem);
  font-weight:300;line-height:1.68;letter-spacing:0;margin-bottom:2.2rem;
  max-width:62ch;margin-inline:auto;
}
.manifest__welcome{
  font-size:clamp(.9rem,1.5vw,1.25rem);
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  background:linear-gradient(100deg,var(--magenta-soft),var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
[data-words] .w{
  display:inline-block;color:rgba(242,242,245,.14);
  transform:translateY(.12em);
  transition:color .5s var(--ease),transform .5s var(--ease),text-shadow .5s var(--ease);
}
[data-words] .w.on{color:var(--paper);transform:none;text-shadow:0 2px 26px rgba(4,4,10,.7)}

.float{position:absolute;pointer-events:none;z-index:1;will-change:transform}
.float--crystal{top:6%;right:-4vw;width:clamp(130px,20vw,320px);opacity:.4;filter:drop-shadow(0 0 60px rgba(111,242,255,.35));animation:drift 20s ease-in-out infinite}
.float--planet{bottom:-10%;left:-6vw;width:clamp(160px,22vw,360px);opacity:.6;animation:spinSlow 90s linear infinite}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-32px) rotate(4deg)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.debris{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.debris img{position:absolute;opacity:.2;filter:blur(.4px) drop-shadow(0 0 22px rgba(111,242,255,.28));will-change:transform}

.orbit{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none;z-index:1}
.orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%}
.orbit--a{width:min(560px,62vw);aspect-ratio:1;right:-14vw;top:6%;transform:rotateX(72deg);animation:ringSpin 34s linear infinite}
.orbit--a i{background:var(--cyan);box-shadow:0 0 16px 3px rgba(111,242,255,.85)}
.orbit--b{width:min(680px,72vw);aspect-ratio:1;left:-16vw;bottom:-14%;transform:rotateX(70deg);animation:ringSpin 46s linear infinite reverse}
.orbit--b i{background:var(--magenta-soft);box-shadow:0 0 16px 3px rgba(255,61,158,.85)}

/* ═══════════ 03 · STATEMENT ═══════════ */
.statement{position:relative;padding:clamp(6rem,16vh,12rem) 0;display:grid;place-items:center}
.statement .wrap{max-width:1180px;text-align:center}
.statement__h{
  font-size:clamp(1.15rem,2.1vw,1.85rem);
  font-weight:300;line-height:1.5;letter-spacing:-.01em;
  max-width:48ch;margin-inline:auto;
}

/* ═══════════ 04 · LAS CIFRAS ═══════════ */
.specs{position:relative;padding:clamp(5rem,13vh,9rem) 0}
.specs__head{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
.specs__row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,2.4rem);
}
.spec{
  display:flex;flex-direction:column;gap:.5rem;
  padding-top:1.4rem;border-top:1px solid var(--line);
  position:relative;
}
.spec b{
  filter:drop-shadow(0 3px 22px rgba(4,4,10,.7));
  font-size:clamp(2.6rem,6vw,5.2rem);
  font-weight:200;line-height:.92;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,var(--paper) 20%,var(--magenta-soft));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.spec__k{
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper);font-weight:500;margin-top:.4rem;
  text-shadow:0 2px 16px rgba(4,4,10,.85);
}
.spec__v{
  font-size:.8rem;color:rgba(242,242,245,.74);line-height:1.6;max-width:24ch;
  text-shadow:0 2px 16px rgba(4,4,10,.85);
}
/* la barra corre a la vez que el número: refuerza que está contando */
.spec__bar{
  position:absolute;top:-1px;left:0;height:1px;width:0;
  background:linear-gradient(to right,var(--magenta),var(--cyan));
  box-shadow:0 0 8px rgba(230,0,126,.8);
  transition:width 1.4s var(--ease);
}
.spec.on .spec__bar{width:100%}
.spec .infinity{animation:infPulse 5s var(--ease-io) infinite}
@keyframes infPulse{0%,100%{opacity:1;letter-spacing:-.04em}50%{opacity:.55;letter-spacing:.02em}}

/* ═══════════ 05 · THE BRIEF · riel horizontal ═══════════ */
.brief{position:relative;padding:clamp(5rem,12vh,9rem) 0;overflow:hidden}
.brief__head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.brief__track{
  display:flex;gap:clamp(1rem,1.6vw,1.5rem);
  padding-inline:calc((100vw - var(--shell)) / 2);
  will-change:transform;
}
.slab{
  position:relative;flex:0 0 clamp(280px,30vw,420px);
  padding:clamp(1.8rem,2.4vw,2.6rem);
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(10,10,20,.62),rgba(10,10,20,.42)),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:transform .6s var(--ease),border-color .6s var(--ease);
}
.slab:hover{border-color:rgba(230,0,126,.42)}
.slab__n{
  font-size:clamp(2.4rem,4vw,3.6rem);font-weight:200;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(230,0,126,.75);
  display:block;margin-bottom:.6rem;
}
.slab__line{height:1px;background:linear-gradient(to right,var(--magenta),transparent);margin-bottom:1.4rem}
.slab h3{font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:400;letter-spacing:-.01em;margin-bottom:.9rem}
.slab p{font-size:.9rem;color:var(--mute);line-height:1.72;flex:1}
.slab p b{color:var(--paper);font-weight:500}
.slab__tag{
  margin-top:1.6rem;font-size:.56rem;letter-spacing:.26em;
  color:var(--cyan);text-transform:uppercase;
}

/* ═══════════ 06 · LOS MUNDOS ═══════════ */
.worlds{position:relative}
.worlds__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.worlds__head{
  width:var(--shell);margin:0 auto clamp(1.4rem,2.6vh,2.2rem);
  display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.worlds__head .h2{flex:1;min-width:240px}
.worlds__hint{font-size:.58rem;letter-spacing:.34em;color:var(--mute-2);display:flex;align-items:center;gap:.7rem;padding-bottom:.5rem}
.worlds__hint span{animation:nudge 1.8s var(--ease-io) infinite;display:inline-block}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

.worlds__rail{display:flex;gap:clamp(.9rem,1.5vw,1.4rem);padding-inline:calc((100vw - var(--shell)) / 2);will-change:transform}
.world{
  position:relative;flex:0 0 clamp(220px,24vw,330px);
  height:clamp(320px,48vh,480px);
  border-radius:18px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);padding:clamp(1.3rem,1.8vw,1.8rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  transition:border-color .6s var(--ease);
  animation:zeroG 12s ease-in-out infinite;
}
.world:nth-child(2n){animation-duration:14s;animation-delay:-3s}
.world:nth-child(3n){animation-duration:16s;animation-delay:-6s}
@keyframes zeroG{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.world:hover{animation-play-state:paused;border-color:rgba(111,242,255,.4)}
.world::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--img,none);background-size:cover;background-position:center;
  background-color:color-mix(in srgb,var(--tint,#6ff2ff) 20%,#080810);
  opacity:.58;filter:saturate(1.12) contrast(1.04);
  transition:transform 1.1s var(--ease),opacity .6s var(--ease);
}
.world::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(4,4,10,.97) 26%,rgba(4,4,10,.8) 46%,rgba(4,4,10,.4) 66%,rgba(4,4,10,.2)),
    radial-gradient(ellipse 120% 80% at 50% 100%,color-mix(in srgb,var(--tint,#6ff2ff) 20%,transparent),transparent 72%);
}
.world:hover{border-color:color-mix(in srgb,var(--tint,#6ff2ff) 55%,transparent)}
.world:hover::before{transform:scale(1.09);opacity:.8}
.world__n{
  position:absolute;top:clamp(1.1rem,1.8vw,1.6rem);left:clamp(1.3rem,1.8vw,1.8rem);
  font-size:.62rem;letter-spacing:.3em;font-weight:600;
  color:var(--tint,var(--cyan));
}
.world__sub{
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tint,var(--cyan));margin-bottom:.5rem;font-weight:500;
}
.world h3{
  font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:500;
  letter-spacing:.04em;margin-bottom:.6rem;line-height:1.1;
}
.world__txt{font-size:.82rem;color:rgba(242,242,245,.68);line-height:1.62}

.cruiser{
  position:absolute;top:12%;left:0;
  width:clamp(140px,18vw,300px);z-index:1;opacity:.42;
  filter:drop-shadow(0 0 40px rgba(214,255,63,.3));
  will-change:transform;pointer-events:none;
}

/* ═══════════ 07 · DESPEGUE · fila horizontal ═══════════ */
.launch{position:relative;min-height:78svh;display:grid;place-items:center;overflow:hidden}
.launch__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.1)}
.launch__grade{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,transparent,rgba(4,4,10,.82) 88%),
    linear-gradient(to bottom,var(--void),rgba(4,4,10,.3) 28% 72%,var(--void));
}
.launch__row{
  z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(2rem,5vw,5rem);flex-wrap:wrap;padding-block:5rem;
}
.launch__copy{flex:1;min-width:min(100%,420px)}
.launch__h{font-size:clamp(1.8rem,4vw,3.6rem);font-weight:300;line-height:1.06;letter-spacing:-.03em}
.launch__act{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.launch__meta{
  font-size:.56rem;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;
}

/* ═══════════ 08 · DENTRO DE LA CÁPSULA · banda ═══════════ */
.capsule{position:relative;padding:clamp(4.5rem,11vh,8rem) 0}
.capsule__row{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(1.6rem,3.5vw,3.4rem);align-items:center;
}
.capsule__frame{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
  aspect-ratio:2.4/1;background:#000;
}
.capsule__frame video{width:100%;height:100%;object-fit:cover}
.capsule__btn{
  position:absolute;inset:0;margin:auto;
  width:60px;height:60px;border-radius:50%;background:rgba(230,0,126,.9);
  display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(230,0,126,.6);
  animation:pulse 2.6s var(--ease-io) infinite;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.capsule__btn svg{width:26px;height:26px;fill:#fff;margin-left:2px}
.capsule__btn:hover{transform:scale(1.08)}
.capsule__frame.playing .capsule__btn{opacity:0;pointer-events:none;animation:none}
/* cargando: el botón se vuelve un anillo que gira */
.capsule__frame.is-loading .capsule__btn{animation:none;background:rgba(4,4,10,.55);pointer-events:none}
.capsule__frame.is-loading .capsule__btn svg{opacity:0}
.capsule__frame.is-loading .capsule__btn::after{
  content:"";position:absolute;inset:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);border-top-color:var(--magenta);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* fallo: el botón vuelve y avisa, en vez de dejar un fotograma congelado */
.capsule__frame.is-failed .capsule__btn{animation:none;background:rgba(4,4,10,.7)}
.capsule__frame.is-failed::after{
  content:"No se pudo reproducir · pulsa para reintentar";
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:rgba(4,4,10,.75);
  padding:.5em 1em;border-radius:100px;white-space:nowrap;
}
.capsule__frame figcaption{
  position:absolute;left:1rem;bottom:.85rem;
  font-size:.54rem;letter-spacing:.3em;color:rgba(255,255,255,.6);text-transform:uppercase;
}
.capsule__h{
  font-size:clamp(1.3rem,2.1vw,1.95rem);
  font-weight:300;line-height:1.16;letter-spacing:-.02em;margin-bottom:1.1rem;
}
.capsule__copy .body{font-size:.9rem}

/* ═══════════ BOLA DE DISCO ═══════════
   Todo CSS. Las teselas son una rejilla que se desplaza en horizontal
   dentro de un círculo: con el sombreado esférico encima se lee como
   una bola girando. Los reflejos giran alrededor y barren la sección. */
.capsule{overflow:hidden;padding-top:clamp(12rem,27vh,16rem)!important}
/* a la izquierda, sobre el vídeo: el astronauta planea por la derecha */
.disco{
  position:absolute;top:0;left:clamp(8%,14vw,20%);z-index:1;
  width:clamp(104px,11vw,176px);pointer-events:none;
}
.disco__string{
  width:1px;height:clamp(34px,6vh,64px);margin:0 auto;
  background:linear-gradient(to bottom,transparent,rgba(242,242,245,.5));
}
.disco__cap{
  width:16%;height:7px;margin:0 auto -3px;position:relative;z-index:1;
  background:linear-gradient(to bottom,#c9ced8,#5d6270);
  border-radius:3px 3px 5px 5px;
}
/* la esfera se dibuja en canvas (script.js · BOLA DE DISCO) */
.disco__ball{
  display:block;width:100%;aspect-ratio:1;
  filter:drop-shadow(0 0 36px rgba(230,0,126,.38)) drop-shadow(0 0 90px rgba(111,242,255,.18));
  animation:discoSway 7s ease-in-out infinite;
  transform-origin:50% -40%;
}
@keyframes discoSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* reflejos que barren la sección girando alrededor de la bola */
.disco__rays{
  position:absolute;left:50%;top:calc(clamp(34px,6vh,64px) + clamp(52px,5.5vw,88px));
  width:2000px;height:2000px;margin:-1000px 0 0 -1000px;
  background-image:
    radial-gradient(22px 13px at 12% 30%,rgba(255,255,255,.34),transparent),
    radial-gradient(18px 11px at 22% 64%,rgba(111,242,255,.32),transparent),
    radial-gradient(24px 14px at 31% 18%,rgba(255,61,158,.34),transparent),
    radial-gradient(16px 10px at 38% 80%,rgba(255,255,255,.28),transparent),
    radial-gradient(20px 12px at 55% 12%,rgba(111,242,255,.3),transparent),
    radial-gradient(22px 13px at 61% 72%,rgba(255,61,158,.3),transparent),
    radial-gradient(18px 11px at 68% 34%,rgba(255,255,255,.3),transparent),
    radial-gradient(16px 10px at 74% 88%,rgba(111,242,255,.28),transparent),
    radial-gradient(24px 14px at 82% 22%,rgba(255,255,255,.34),transparent),
    radial-gradient(20px 12px at 88% 58%,rgba(255,61,158,.3),transparent),
    radial-gradient(18px 11px at 16% 86%,rgba(255,255,255,.26),transparent),
    radial-gradient(16px 10px at 6% 52%,rgba(111,242,255,.28),transparent),
    radial-gradient(22px 13px at 44% 44%,rgba(255,255,255,.22),transparent),
    radial-gradient(18px 11px at 93% 40%,rgba(255,214,122,.3),transparent);
  animation:discoRays 22s linear infinite,raysTwinkle 2.4s ease-in-out infinite alternate;
  filter:blur(1.5px);
}
@keyframes discoRays{to{transform:rotate(360deg)}}
@keyframes raysTwinkle{from{opacity:.55}to{opacity:.95}}

@media (max-width:1100px){
  .disco{top:-10px;left:8%;width:92px}
  .disco__string{height:30px}
}
@media (prefers-reduced-motion:reduce){
  .disco__ball,.disco__rays{animation:none}
}

/* ═══════════ MARQUESINA · voces y marcas ═══════════ */
.marquee{position:relative;overflow:hidden;padding-block:.5rem}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right,var(--void),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--void),transparent)}
.marquee__row{display:flex;gap:clamp(.9rem,1.4vw,1.4rem);width:max-content;will-change:transform}
.marquee:hover .marquee__row{animation-play-state:paused}

/* ═══════════ 09 · VOCES ═══════════ */
.voices{position:relative;padding:clamp(4.5rem,11vh,8rem) 0}
.voices__head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.quote{
  flex:0 0 clamp(280px,26vw,380px);
  padding:clamp(1.6rem,2.2vw,2.1rem);
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(10,10,20,.62),rgba(10,10,20,.42)),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:border-color .55s var(--ease);
}
.quote:hover{border-color:rgba(230,0,126,.36)}
.quote__stars{color:var(--magenta);letter-spacing:.2em;font-size:.78rem;margin-bottom:1rem}
.quote h3{font-size:.98rem;font-weight:500;margin-bottom:.8rem;letter-spacing:-.005em}
.quote p{font-size:.86rem;color:var(--mute);line-height:1.7;flex:1}
.quote footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
.quote footer b{font-size:.8rem;font-weight:500}
.quote footer span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2)}

/* ═══════════ 10 · SEDES · banda compacta ═══════════ */
.venues{position:relative;padding:clamp(4.5rem,11vh,8rem) 0;overflow:hidden}
.venues__head{margin-bottom:clamp(2rem,4vw,3rem)}
.venues__band{display:grid;grid-template-columns:1fr;gap:clamp(.7rem,1.2vw,1rem)}
.port{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(230px,1.2fr) minmax(210px,1fr) minmax(0,auto);
  align-items:center;gap:clamp(1.2rem,3vw,3rem);
  overflow:visible;
  padding:clamp(1.2rem,2vw,1.7rem) clamp(1.3rem,2.2vw,2rem);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,rgba(10,10,20,.62),rgba(10,10,20,.42)),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .6s var(--ease);
}
.port:hover{border-color:rgba(230,0,126,.4)}
.port__id h3{font-size:clamp(1.25rem,2vw,1.9rem);font-weight:300;letter-spacing:.04em;line-height:1.05;white-space:nowrap}
.port__id span{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--magenta);display:block;margin-top:.35rem}
.port__sched{display:flex;flex-direction:column;gap:.4rem}
.port__sched > div{display:flex;justify-content:space-between;gap:.8rem}
.port__sched dt{font-size:.76rem;color:var(--mute)}
.port__sched dd{font-size:.76rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.port__data{display:flex;flex-direction:column;gap:.22rem}
.port__data a{font-size:.8rem;width:fit-content;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.port__data a:hover{color:var(--magenta-soft);border-bottom-color:var(--magenta)}
.port__data p{font-size:.74rem;color:var(--mute);line-height:1.5;margin-top:.35rem}
.port__cta{--pad:.85em 1.7em;justify-self:end;position:relative;z-index:3}
/* el botón no puede quedar bajo la inclinación 3D de la tarjeta */
.port.tilt:hover .port__cta{transform:translateZ(24px)}

/* ═══════════ 11 · MARCAS ═══════════ */
.brands{position:relative;padding:clamp(4.5rem,11vh,8rem) 0}
.brands__head{margin-bottom:clamp(2rem,4vw,3rem)}
.marquee--brands .marquee__row{gap:4px}
.brand{
  position:relative;flex:0 0 clamp(190px,17vw,260px);
  aspect-ratio:4/3;overflow:hidden;display:block;isolation:isolate;border-radius:10px;
}
.brand img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);transition:transform 1s var(--ease),filter .7s var(--ease)}
.brand::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,4,10,.9),transparent 60%)}
.brand span{
  position:absolute;left:1.1rem;bottom:1rem;z-index:2;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  transition:color .5s var(--ease),transform .5s var(--ease);
}
.brand:hover img{filter:grayscale(0) brightness(.85);transform:scale(1.07)}
.brand:hover span{color:var(--magenta-soft);transform:translateY(-3px)}

/* ═══════════ 12 · CIERRE ═══════════ */
.final{position:relative;min-height:88svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.final__bg{position:absolute;inset:-14% 0;z-index:0;background-size:cover;background-position:center;opacity:.32;filter:saturate(1.2);will-change:transform}
.final::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(4,4,10,.5),rgba(4,4,10,.94) 80%),
    linear-gradient(to bottom,var(--void),transparent 25% 75%,var(--void));
}
/* El astronauta pasa justo por detrás del cierre: el texto necesita
   su propio velo para no perderse contra el casco. */
.final__content{z-index:3;padding-block:5rem;position:relative}
.final__content::before{
  content:"";position:absolute;inset:-10% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(4,4,10,.78),rgba(4,4,10,.42) 55%,transparent 75%);
}
.final__h{font-size:clamp(2.2rem,6vw,5.4rem);font-weight:300;line-height:.98;letter-spacing:-.04em;margin-bottom:1.4rem}
.final__content .body{margin-inline:auto;text-align:center}
.float--planet-final{
  position:absolute;top:-8%;right:-8vw;width:clamp(180px,26vw,420px);opacity:.45;z-index:1;
  filter:drop-shadow(0 0 80px rgba(139,92,246,.35));animation:spinSlow 120s linear infinite;
}

/* ═══════════ FOOTER ═══════════ */
.foot{position:relative;padding:clamp(2.2rem,5vh,3.4rem) 0 1.4rem;background:#020205;border-top:1px solid var(--line)}
.foot__grid{
  display:grid;grid-template-columns:1.4fr .8fr .8fr 1.2fr;
  gap:clamp(1.1rem,2.2vw,2rem);
  padding-bottom:clamp(1.3rem,3vh,2rem);border-bottom:1px solid var(--line);
}
.foot__logo{height:14px;width:auto;margin-bottom:.7rem;opacity:.9}
.foot__brand p{font-size:.72rem;color:var(--mute-2);max-width:34ch;line-height:1.6}
.foot__col{display:flex;flex-direction:column;gap:.3rem}
.foot h5{font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute-2);font-weight:500;margin-bottom:.4rem}
.foot__col a{font-size:.74rem;color:var(--mute);width:fit-content;transition:color .35s var(--ease),transform .35s var(--ease)}
.foot__col a:hover{color:var(--magenta-soft);transform:translateX(4px)}
.foot__field{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:100px;
  padding:.22rem .22rem .22rem 1rem;transition:border-color .4s var(--ease);
  max-width:420px;
}
.foot__field:focus-within{border-color:rgba(230,0,126,.55)}
.foot__field input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);font-family:inherit;font-size:.74rem;padding-block:.45rem}
.foot__field input::placeholder{color:var(--mute-2)}
.foot__field button{background:var(--magenta);color:#fff;border-radius:100px;padding:.65em 1.2em;font-size:.56rem;letter-spacing:.2em;font-weight:600;transition:background .4s var(--ease),color .4s}
.foot__field button:hover{background:var(--paper);color:var(--void)}
.foot__msg{font-size:.72rem;color:var(--cyan);margin-top:.7rem;min-height:1.2em;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
.foot__msg.show{opacity:1;transform:none}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;flex-wrap:wrap}
.foot__seratta{height:18px;width:auto;opacity:.55}
.foot__bottom p{font-size:.62rem;color:var(--mute-2);letter-spacing:.04em}

/* ═══════════ REVELADOS ═══════════ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.on{opacity:1;transform:none}
.venues__band .reveal:nth-child(2){transition-delay:.12s}

.h2 .chr,.launch__h .chr,.final__h .chr,.capsule__h .chr{
  display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.on .chr{opacity:1;transform:none}
.wd{display:inline-block;white-space:nowrap}
.chr[data-i]{transition-delay:calc(var(--i) * 20ms)}

.tilt{transition:transform .35s var(--ease),border-color .6s var(--ease)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1100px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .capsule__row{grid-template-columns:1fr;gap:1.8rem}
  .foot__grid{grid-template-columns:1.3fr 1fr 1fr}
  .foot__news{grid-column:1/-1}
  .venues__band{grid-template-columns:1fr}
  .port{grid-template-columns:minmax(150px,.85fr) 1fr auto}
  .port__data{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:.8rem;align-items:baseline}
  .port__data p{margin-top:0;flex:1 0 100%}
}

@media (max-width:820px){
  .specs__head{grid-template-columns:1fr;gap:1.4rem}
  .specs__row{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
}

@media (max-width:700px){
  :root{--shell:88vw}
  .hero__logo{width:82vw}
  .hero__sub{gap:.6rem;letter-spacing:.32em}
  /* los botones tienen que quedar por encima del indicador de descenso */
  .hero__content{padding-bottom:clamp(7.5rem,17vh,10rem)}
  .worlds__sticky{height:auto;position:static;padding-block:4.5rem}
  .worlds__rail{
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:6vw;transform:none!important;
    -webkit-overflow-scrolling:touch;padding-bottom:1rem;
  }
  .world{flex:0 0 78vw;scroll-snap-align:center;height:400px;animation:none}
  .brief__track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:6vw;transform:none!important;
    -webkit-overflow-scrolling:touch;padding-bottom:1rem;
  }
  .slab{flex:0 0 80vw;scroll-snap-align:center}
  .worlds__rail,.brief__track{scrollbar-width:none}
  .worlds__rail::-webkit-scrollbar,.brief__track::-webkit-scrollbar{display:none}
  .port{grid-template-columns:1fr;gap:1.1rem}
  .port__cta{justify-self:start}
  .launch__row{align-items:flex-start}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  .scanlines{display:none}
  /* A 150% cada nube era una sábana blanca que cubría toda la pantalla y
     el texto no se leía: más pequeñas, sin la sombra (carísima al moverse)
     y con un velo azul noche solo en el tramo del cielo. */
  .cloud{height:auto!important;width:95%;filter:none}
  .bd--sky::after{content:"";position:absolute;inset:0;background:rgba(8,14,40,.42)}
  .specs__row{grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem}
  /* En pantalla estrecha una nube delantera tapa media vista:
     se encogen, se aclaran y sobra la tercera. */
  .bd--front .cloud{width:105%;opacity:.2!important;filter:none}
  .cloud--f3{display:none}
  /* el halo de legibilidad no puede salirse del margen lateral */
  .hero__top::before,.hero__bottom::before{inset:-40% -6vw}
  /* Rendimiento: en el móvil cada desenfoque de fondo y cada fusión a
     pantalla completa se recalcula en cada fotograma del scroll, y eso
     era lo que lo hacía ir a tirones. Mismo aspecto, cristal más opaco. */
  .grain{display:none}
  .slab,.quote,.port,.btn--ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
  .slab,.quote,.port{background:linear-gradient(160deg,rgba(10,10,20,.84),rgba(10,10,20,.7))}
  .btn--ghost{background:rgba(10,10,20,.45)}
  .disco__rays{filter:none}
  /* centrada sobre el vídeo: a la izquierda chocaba con el logo del menú */
  .disco{left:50%;margin-left:-46px}
  .disco__ball{filter:drop-shadow(0 0 26px rgba(230,0,126,.36))}
}

@media (prefers-reduced-motion:reduce){
  .astro{display:none}
  .stars-l,.nebula,.meteors,.cruiser,.orbit,.caustics,.bubbles,.cloud{animation:none!important}
  .world{animation:none}
  .marquee__row{animation:none!important;transform:none!important}
  .chr{opacity:1!important;transform:none!important}
}

/* ═══════════════════════════════════════════════════════
   SUBPÁGINAS · preguntas frecuentes
   ═══════════════════════════════════════════════════════ */
/* Sin recorrido de altitud: el espacio se queda encendido y gana
   al valor en línea que pinta el motor del descenso. */
.page-sub .bd--space{opacity:1!important}
.page-sub .cosmos::after{
  background:
    linear-gradient(to bottom,rgba(4,4,10,.6),rgba(4,4,10,.34) 30% 70%,rgba(4,4,10,.6)),
    radial-gradient(ellipse 80% 60% at 50% 50%,transparent,rgba(4,4,10,.4));
}

.subhead{position:relative;padding:clamp(8rem,18vh,12rem) 0 clamp(3rem,7vh,5rem);overflow:hidden}
.subhead__bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.2;filter:saturate(1.15);
}
.subhead::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(4,4,10,.72),rgba(4,4,10,.55) 40%,var(--void));
}
.subhead__inner{z-index:2}
.subhead__back{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mute-2);margin-bottom:2.2rem;
  transition:color .35s var(--ease),gap .35s var(--ease);
}
.subhead__back:hover{color:var(--paper);gap:1rem}
.subhead__h{
  font-size:clamp(2.2rem,6vw,4.6rem);
  font-weight:300;line-height:1;letter-spacing:-.035em;margin-bottom:1.4rem;
}
.subhead__h em{
  font-style:normal;
  background:linear-gradient(100deg,var(--magenta-soft),var(--violet) 45%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ln{
  color:var(--paper);border-bottom:1px solid rgba(230,0,126,.55);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.ln:hover{color:var(--magenta-soft);border-bottom-color:var(--magenta)}

/* ── bloques ── */
.faq{position:relative;padding-block:clamp(2rem,5vh,3.4rem)}
.faq__group{
  display:flex;align-items:baseline;gap:1.2rem;
  margin-bottom:1.8rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.faq__n{
  font-size:.66rem;letter-spacing:.3em;color:var(--magenta);font-weight:600;
}

/* ── acordeón ── */
.qa{
  border-bottom:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.qa[open]{border-bottom-color:rgba(230,0,126,.35)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.5rem) 0;
  cursor:pointer;list-style:none;
  font-size:clamp(.95rem,1.25vw,1.12rem);font-weight:400;line-height:1.4;
  transition:color .35s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--magenta-soft)}
/* el signo se convierte en menos al abrir */
.qa summary i{
  position:relative;flex:0 0 auto;width:14px;height:14px;
}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;left:50%;top:50%;
  width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;
  background:var(--magenta);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0);opacity:0}
.qa__body{
  padding-bottom:clamp(1.3rem,2.4vw,1.9rem);
  max-width:66ch;
  animation:qaIn .5s var(--ease) both;
}
@keyframes qaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qa__body p{font-size:.92rem;color:var(--mute);line-height:1.8}
.qa__body p + p{margin-top:.9rem}
.qa__body b{color:var(--paper);font-weight:500}
.qa__lead{
  color:var(--paper)!important;font-weight:500;
  margin-top:1.6rem!important;margin-bottom:.2rem;
}
.qa__note{font-size:.78rem!important;color:var(--mute-2)!important;margin-top:.9rem!important}

/* tasas de devolución */
.rates{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.rates li{
  display:grid;grid-template-columns:64px 1fr;align-items:center;gap:1.2rem;
  padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(120deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.rates li > b{
  font-size:1.1rem;font-weight:500;text-align:center;
  color:var(--magenta-soft);font-variant-numeric:tabular-nums;
}
.rates li > span{font-size:.86rem;color:var(--mute);line-height:1.65}

/* horarios */
.hours{display:flex;flex-direction:column;gap:.6rem;margin-top:1.1rem;max-width:420px}
.hours > div{
  display:flex;justify-content:space-between;gap:1.2rem;
  padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;
}
.hours dt{font-size:.84rem;color:var(--mute)}
.hours dd{font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── cierre ── */
.subcta{position:relative;padding:clamp(4.5rem,11vh,8rem) 0 clamp(5rem,12vh,9rem);text-align:center}
.subcta__inner .body{margin-inline:auto;margin-top:1rem}
.subcta__acts{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

@media (max-width:700px){
  .rates li{grid-template-columns:1fr;gap:.4rem;text-align:left}
  .rates li > b{text-align:left}
  .hours > div{flex-direction:column;gap:.2rem}
}

/* Autorización de datos bajo el newsletter (se agregó al publicar en Vercel). */
.foot__consent{font-size:.6rem;line-height:1.5;color:var(--mute-2);margin-top:.55rem;max-width:36ch}
.foot__consent a{text-decoration:underline;text-underline-offset:2px}
.foot__consent a:hover{color:var(--magenta-soft)}

/* ── iPhone: sin filtros sobre imágenes con transparencia (15-sep) ──
   En Sombras, Safari de iPhone pintó el logo como un rectángulo blanco: WebKit
   pierde la transparencia de una imagen grande cuando lleva filter (drop-shadow
   de radio grande o blur). Frenessí usa el mismo recurso en varias imágenes, así
   que en pantallas táctiles o angostas van SIN filtro. Se pierde el resplandor
   de color alrededor; el fondo del sitio ya da el ambiente. */
@media (hover:none), (pointer:coarse), (max-width:820px){
  .gate__logo, .hero__logo, .nav__logo img, .nav__logo:hover img,
  .astro__img, .float--crystal, .float--planet-final, .cruiser,
  .debris img, .disco__ball, .cloud, .bd--front .cloud, .disco__rays{
    filter:none !important;
  }
}


/* ── Rendimiento (16-sep) ─────────────────────────────────────
   «El astronauta se traba y las transiciones se demoran». Sin cambiar el
   diseño: la barra de progreso y el HUD crecen con transform (no con width /
   height, que recalculaban la maqueta en cada fotograma de scroll); las nubes
   van sin filtro (una sombra de 60 px sobre capas de 1400 px que se mueven con
   el scroll se volvía a pintar entera cada vez; las de delante usan una imagen
   ya desenfocada, *-f.webp); el grano deja la mezcla «screen», que obligaba a
   componer toda la pantalla; en táctil el grano se oculta y el menú fijo pierde
   el desenfoque de fondo; y el retardo letra a letra tiene tope, para que un
   titular largo no tarde casi dos segundos en terminar de aparecer. */
.progress span{width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.hud__bar i{height:100%;transform:scaleY(0);transform-origin:50% 0;will-change:transform}
.cloud,.bd--front .cloud{filter:none}
.grain{mix-blend-mode:normal}
.chr[data-i]{transition-delay:calc(min(var(--i), 28) * 16ms)}
@media (hover:none),(pointer:coarse){
  .grain{display:none}
  .nav.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,6,12,.92)}
}