/* ==========================================================
   AQUAARON — el recorrido (escena sticky + capítulos)
   Sin JS / movimiento reducido: escena estática en su estado final
   y las tarjetas se apilan al hacer scroll. Con JS: cámara + capas.
   ========================================================== */
.story{position:relative;background:var(--ink);--card-top:max(112px,calc(50svh - 190px))}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:
  radial-gradient(80% 60% at 66% 52%,rgba(60,200,234,.10),transparent 70%),
  radial-gradient(50% 40% at 70% 40%,rgba(255,194,60,.07),transparent 70%),
  var(--ink)}
.stage__grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 66% 50%,#000 20%,transparent 78%);mask-image:radial-gradient(70% 70% at 66% 50%,#000 20%,transparent 78%)}
.stage__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,28,40,.92) 0,rgba(11,28,40,.7) 30%,rgba(11,28,40,0) 58%)}
.stage svg#scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js .stage svg#scene{opacity:0;transition:opacity .9s .1s}
.js.is-ready .stage svg#scene{opacity:1}

.chapters{position:relative;margin-top:-100vh;margin-top:-100svh;z-index:2;pointer-events:none}
.chapter{position:relative;display:flow-root;height:calc(var(--w,1) * 100vh);height:calc(var(--w,1) * 100svh);padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto}
.card{position:sticky;top:var(--card-top);margin-top:var(--card-top);width:min(500px,100%);pointer-events:auto}
.card > * + *{margin-top:1.05rem}
.card h2{font-size:clamp(2.1rem,4.4vw,3.7rem)}
.card h2 em{font-style:normal;color:var(--water)}
.card p{color:var(--muted-light);font-size:1.08rem;max-width:44ch}
.card .idx{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--water);display:flex;align-items:center;gap:.8em}
.card .idx b{display:inline-grid;place-items:center;min-width:2.3em;height:2.3em;border:1.5px solid currentColor;border-radius:999px;font-weight:500}
.card .idx.is-alert{color:var(--alert)}
.card .idx.is-ok{color:var(--mint)}
.card .idx.is-spark{color:var(--spark)}
.card .idx.is-brick{color:#f08a6e}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{font-size:.86rem;font-weight:600;padding:.42em .85em;border-radius:999px;border:1px solid var(--line);background:rgba(245,239,228,.05)}
.card__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Hero */
.card--hero{width:min(720px,100%)}
.hero__tag{display:inline-flex;align-items:center;gap:.7em;padding:.45em 1em .45em .5em;border-radius:999px;border:1px solid var(--line);background:rgba(245,239,228,.06);font-size:.88rem;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero__tag b{background:var(--spark);color:var(--ink);border-radius:999px;padding:.15em .7em;font-family:var(--f-display);font-weight:800}
h1.hero__title{font-size:clamp(3.5rem,10.6vw,9.4rem);letter-spacing:-.06em;line-height:.86;font-weight:800;margin-left:-.04em}
h1.hero__title .aa{background:linear-gradient(100deg,var(--water) 20%,#9be9ff 60%,var(--water));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.hero__sub{font-family:var(--f-display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.85rem);letter-spacing:-.02em;line-height:1.15;color:var(--cal);max-width:20ch}
.hero__sub span{color:var(--spark)}
.hero__proof{display:flex;align-items:center;gap:.8rem;font-size:1.02rem;color:var(--muted-light);max-width:40ch}
.hero__proof strong{font-family:var(--f-display);font-size:2.6rem;letter-spacing:-.05em;color:var(--spark);line-height:1}
.scrollcue{position:absolute;left:var(--gutter);bottom:calc(var(--bar-h) + 22px);display:flex;align-items:center;gap:.9rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);z-index:3;pointer-events:none;transition:opacity .4s}
.scrollcue i{width:22px;height:36px;border:1.5px solid currentColor;border-radius:14px;position:relative}
.scrollcue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:3px;background:var(--water);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(14px);opacity:0}}

/* Carril de capítulos */
.rail{position:absolute;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.rail button{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;background:none;border:0;padding:6px 4px;color:var(--muted-light);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.rail button span{opacity:0;transform:translateX(8px);transition:.35s var(--ease);white-space:nowrap}
.rail button i{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:.35s var(--ease);flex:none}
.rail button:hover span,.rail button.is-on span{opacity:1;transform:none}
.rail button.is-on{color:var(--spark)}
.rail button.is-on i{background:var(--spark);transform:scale(1.35);border-color:var(--spark)}
.rail .rail__track{position:absolute;right:8.5px;top:12px;bottom:12px;width:1px;background:var(--line);z-index:-1}
@media (max-width:980px){.rail{display:none}}

/* Finale */
.card--final h2{font-size:clamp(2.4rem,5.4vw,4.6rem)}
.card--final{width:min(560px,100%)}

/* ---------- Móvil: escena arriba, tarjeta como hoja inferior ---------- */
@media (max-width:820px){
  .story{--card-top:55svh}
  .stage__veil{background:linear-gradient(0deg,rgba(11,28,40,.96) 0,rgba(11,28,40,.86) 34%,rgba(11,28,40,0) 58%)}
  .stage__grid{-webkit-mask-image:radial-gradient(90% 40% at 50% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(90% 40% at 50% 30%,#000 20%,transparent 80%)}
  .card{width:100%}
  .card > * + *{margin-top:.7rem}
  .card h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .card p{font-size:.98rem;line-height:1.5}
  .chips{display:none}
  .card .btn{padding:.8em 1.2em;font-size:.95rem}
  .card--hero{--card-top:47svh}
  .card--hero > * + *{margin-top:.55rem}
  h1.hero__title{font-size:clamp(3rem,15.5vw,4.8rem)}
  .hero__sub{font-size:1.1rem;max-width:none}
  .hero__proof{font-size:.92rem}
  .hero__proof strong{font-size:2rem}
  .scrollcue{display:none}
  .hero__tag{display:none}
  .card--hero .hero__proof{display:flex;gap:.6rem;align-items:center}
  .card--hero .hero__proof span{max-width:22ch;line-height:1.25}
}
@media (max-width:820px) and (max-height:700px){
  .story{--card-top:50svh}
  .card p{display:none}
  .card--hero p,.card--final p{display:block}
}

/* Estado sin cinemática: la escena se queda quieta y limpia */
@media (prefers-reduced-motion:reduce){
  h1.hero__title .aa{animation:none}
  .scrollcue i::after{animation:none}
}

/* Sin cinemática (movimiento reducido): tarjetas sobre cristal para leerse sobre la escena quieta */
.story.is-static .card{background:rgba(11,28,40,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:24px;padding:clamp(18px,2.4vw,28px)}
.story.is-static .chapter{height:auto;min-height:100vh;min-height:100svh}