/* ============================================================
   OBBA MOTORS
   Paleta muestreada de las imágenes de marca.
   Bronce #AE905E = color real del logo y del producto.
   ============================================================ */
:root{
  --canvas:#0E1112;
  --canvas-warm:#15100D;
  --panel:#171B1C;
  --panel-2:#1E2324;
  --line:#2A3031;
  --line-soft:#20262700;

  --brass:#AE905E;
  --brass-hot:#D9BC86;
  --brass-dim:#9A8257;   /* 4.6:1 sobre el fondo, para texto chico */

  --accent:#C0392B;
  --accent-hot:#D94B3C;

  --text:#E9E4DC;
  --text-2:#9A948B;
  --text-3:#857F78;      /* 5.1:1 sobre el fondo, para etiquetas chicas */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f-dis:"Archivo",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,80px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font:400 clamp(15px,1.05vw,17px)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  animation:pageIn 1s var(--ease-out) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-dis);font-weight:800;letter-spacing:-.01em;line-height:1.02;margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brass);color:#14100A;padding:.8em 1.2em;font-weight:500}
.skip:focus{left:0}

/* ---------- capa de ambiente (una sola, fija) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(45% 38% at 22% 18%,rgba(174,144,94,.10),transparent 70%),
    radial-gradient(40% 40% at 82% 72%,rgba(31,79,74,.12),transparent 72%);
  animation:envDrift 84s var(--ease) -14s infinite alternate;
}
@keyframes envDrift{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
.env-grain{
  position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:14px var(--pad);
  background:linear-gradient(to bottom,rgba(14,17,18,.92),rgba(14,17,18,0));
  backdrop-filter:blur(6px);
}
.nav-brand{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-dis);font-weight:600;font-size:.94rem;letter-spacing:.14em;color:var(--text)}
.nav-brand b{color:var(--brass);font-weight:800}
.nav-mark{width:26px;height:26px;color:var(--brass);flex:none}
.nav-links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;font-size:.86rem;color:var(--text-2)}
.nav-links a{position:relative;padding:.4em 0;transition:color .3s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-btn{font-size:.82rem;padding:.62em 1.1em}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:500 .9rem/1 var(--f-body);letter-spacing:.01em;
  padding:.92em 1.5em;border:1px solid transparent;border-radius:2px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#FBEFEC}
.btn-accent:hover{background:var(--accent-hot)}
.btn-quiet{border-color:var(--line);color:var(--text-2)}
.btn-quiet:hover{border-color:var(--brass);color:var(--brass)}
.btn-big{padding:1.15em 2.1em;font-size:1rem}
.btn-ic{width:1.15em;height:1.15em;fill:currentColor;flex:none}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- HERO 3D ---------- */
.hero{position:relative;height:460vh;z-index:1}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
/* hero estático: la foto compuesta, no un vacío */
.hero-stage.no3d .hero-fallback{opacity:1}
.hero-stage.no3d #scene{display:none}
.hero-stage.no3d .hero-vignette{
  background:
    radial-gradient(115% 75% at 60% 38%,transparent 30%,rgba(14,17,18,.72) 100%),
    linear-gradient(to bottom,rgba(14,17,18,.62),rgba(14,17,18,.15) 30%,rgba(14,17,18,.82) 72%,rgba(14,17,18,.97));
}
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 45%,transparent 38%,rgba(14,17,18,.72) 100%),
    linear-gradient(to bottom,rgba(14,17,18,.55),transparent 22%,transparent 62%,rgba(14,17,18,.9));
}

/* bandas de texto */
.bands{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--pad);pointer-events:none}
.band{
  grid-area:1/1;max-width:19ch;text-align:center;
  font-family:var(--f-dis);font-weight:800;font-size:clamp(1.9rem,5.2vw,4.1rem);line-height:1.02;
  letter-spacing:-.015em;opacity:var(--op,0);
  text-shadow:0 2px 30px rgba(14,17,18,.85),0 1px 4px rgba(14,17,18,.9);
}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block;will-change:transform,opacity}

/* entradas, scrubbed por --k */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
.band[data-entrance="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
.band[data-entrance="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - .14)*2.8,1);
  opacity:var(--kc);
  transform:scale(calc(.62 + .52*var(--kc) - .14*var(--ks)));
}
.band[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);
  transform:scale(calc(.8 + .2*var(--kc)));
}
.band[data-entrance="depth"]{color:var(--brass-hot)}

/* settle */
.settle{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(64px,11vh,120px);
  opacity:var(--op,0);pointer-events:none;
}
.settle.on{pointer-events:auto}
.settle-kicker{
  font:500 .72rem/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase;color:var(--brass);
  opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0))*10px));margin-bottom:.9em;
}
.settle-title{
  font-size:clamp(2.6rem,9.2vw,7.4rem);line-height:.9;letter-spacing:-.02em;
}
.settle-title .w{display:inline-block;
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*34px));
}
.settle-sub{
  max-width:46ch;margin-top:1.1em;color:var(--text-2);font-size:clamp(.95rem,1.35vw,1.08rem);
  --ks:clamp(0,(var(--k,0) - .5)*3.2,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*16px));
}
.settle-cta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:2em;
  --kb:clamp(0,(var(--k,0) - .68)*3.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px));
}

/* cue + hud */
.cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:grid;justify-items:center;gap:8px;opacity:var(--cue,1);transition:opacity .5s var(--ease)}
.cue-line{width:1px;height:42px;background:linear-gradient(to bottom,transparent,var(--brass));animation:cueRun 2.6s var(--ease) -0.6s infinite}
@keyframes cueRun{0%{transform:scaleY(.2);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cue-txt{font:500 .62rem/1 var(--f-mono);letter-spacing:.3em;color:var(--text-3)}
.hud{
  position:absolute;right:var(--pad);top:50%;translate:0 -50%;
  display:grid;justify-items:end;gap:2px;font-family:var(--f-mono);color:var(--brass-dim);
  font-size:.74rem;letter-spacing:.12em;opacity:.85;
}
.hud #hudVal{font-size:1.5rem;color:var(--brass);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hud-u{font-size:.64rem;letter-spacing:.3em}

/* ---------- secciones base ---------- */
.sec{position:relative;z-index:1;padding:clamp(88px,13vh,170px) var(--pad)}
.kicker{font:500 .72rem/1 var(--f-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin-bottom:1.5em}
.sec h2{font-size:clamp(1.75rem,4vw,3.15rem);line-height:1.04;max-width:20ch}

/* Solo se esconden si JS está vivo. Sin JS, la página se lee completa. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- 1. premisa (centrada, cotas) ---------- */
.premise{background:var(--canvas-warm);border-block:1px solid var(--line)}
.premise-wrap{max-width:900px;margin-inline:auto;text-align:center}
.premise .kicker{margin-bottom:1.2em}
.premise-h{font-size:clamp(1.8rem,4.4vw,3.4rem);max-width:none;margin-inline:auto}
.premise-p{max-width:56ch;margin:1.6em auto 0;color:var(--text-2)}
.dim{display:block;width:min(100%,600px);height:34px;margin-inline:auto;overflow:visible}
.dim-top{margin-bottom:26px}
.dim-bot{margin-top:40px}
.dim path{fill:none;stroke:var(--brass);stroke-width:1.2;vector-effect:non-scaling-stroke}
.js .dim-line{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.5s var(--ease-out)}
.js .dim-cap{opacity:0;transition:opacity .6s var(--ease) .9s}
.premise.in .dim-line{stroke-dashoffset:0}
.premise.in .dim-cap{opacity:.8}
.dim-label{font:400 .7rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dim);margin-top:12px}

/* ---------- 2. problema (titular a la izquierda, cuerpo a la derecha) ---------- */
.problem{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,76px);align-items:start}
.problem-head h2{max-width:14ch}
.problem-txt>p{max-width:52ch;color:var(--text-2);font-size:clamp(1rem,1.4vw,1.12rem)}
.facts{margin-top:2.4em;display:grid;gap:1px;background:var(--line)}
.facts li{display:flex;align-items:baseline;gap:1.1em;background:var(--canvas);padding:1.15em .2em}
.facts-n{font:500 .74rem/1 var(--f-mono);color:var(--brass);letter-spacing:.1em;flex:none}
.facts li span:last-child{max-width:54ch;color:var(--text-2);font-size:.94rem}

/* ---------- 3. medidor ---------- */
.gauge{background:var(--panel);border-block:1px solid var(--line)}
.gauge-head{max-width:640px;margin-bottom:clamp(38px,6vh,68px)}
.gauge-lead{margin-top:1.1em;color:var(--text-2);max-width:52ch}
.gauge-box{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  background:var(--canvas);border:1px solid var(--line);padding:clamp(24px,4vw,56px);
}
.gauge-visual{position:relative;aspect-ratio:1/.72;display:grid;place-items:center}
.gauge-ring{
  width:var(--d,120px);height:var(--d,120px);border-radius:50%;
  border:3px solid var(--brass);
  box-shadow:0 0 0 1px rgba(174,144,94,.18),0 0 44px rgba(174,144,94,.16),inset 0 0 22px rgba(174,144,94,.1);
  transition:width .45s var(--ease-out),height .45s var(--ease-out);
}
.gauge-jaw{position:absolute;top:8%;bottom:8%;width:2px;background:var(--text-3);transition:transform .45s var(--ease-out)}
.gauge-jaw::before{content:"";position:absolute;top:50%;width:16px;height:2px;background:var(--text-3)}
.gauge-jaw-l{left:50%;transform:translateX(calc(var(--d,120px)/-2 - 8px))}
.gauge-jaw-l::before{right:-16px}
.gauge-jaw-r{left:50%;transform:translateX(calc(var(--d,120px)/2 + 6px))}
.gauge-jaw-r::before{left:-16px}
.gauge-ticks{position:absolute;left:0;right:0;bottom:2%;height:22px;display:flex;justify-content:space-between;align-items:flex-end;opacity:.5}
.gauge-ticks i{width:1px;background:var(--text-3);height:7px}
.gauge-ticks i.maj{height:15px;background:var(--brass-dim)}

.gauge-read{display:flex;align-items:baseline;gap:.35em;font-family:var(--f-mono)}
.gauge-num{font-size:clamp(2.6rem,7vw,4.4rem);color:var(--brass);font-variant-numeric:tabular-nums;line-height:1}
.gauge-mm{font-size:1rem;color:var(--text-3);letter-spacing:.2em}
.gauge-label{display:block;margin:1.2em 0 .7em;font:400 .7rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.gauge-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:grab}
.gauge-range:active{cursor:grabbing}
.gauge-range::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.gauge-range::-moz-range-track{height:2px;background:var(--line)}
.gauge-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 6px rgba(174,144,94,.14);transition:box-shadow .3s var(--ease)}
.gauge-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--brass);box-shadow:0 0 0 6px rgba(174,144,94,.14)}
.gauge-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(174,144,94,.2)}
.gauge-match{margin-top:1.5em;min-height:3.2em;color:var(--text-2);font-size:.93rem;max-width:40ch;transition:opacity .35s var(--ease)}
.gauge-match b{color:var(--text);font-weight:500}
.gauge-go{margin-top:.4em}

/* ---------- 4. la pieza (imagen ancha + panel encima) ---------- */
.piece{padding-inline:0;display:grid}
.piece-media{grid-area:1/1;position:relative}
.piece-media img{width:100%;height:clamp(420px,62vh,660px);object-fit:cover;filter:contrast(1.05)}
.piece-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(14,17,18,.94) 32%,rgba(14,17,18,.45) 62%,rgba(14,17,18,.7));
}
.piece-panel{
  grid-area:1/1;position:relative;z-index:1;align-self:center;
  margin-inline:var(--pad);max-width:min(100%,520px);
}
.piece-panel h2{font-size:clamp(1.5rem,3.1vw,2.35rem);margin-bottom:.6em}
.piece-panel>p{color:var(--text-2);max-width:42ch}
.piece-chip-label{margin:2em 0 .9em;font:400 .7rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:500 .92rem/1 var(--f-mono);color:var(--text);
  background:rgba(14,17,18,.6);border:1px solid var(--line);border-radius:2px;
  padding:.72em .95em;min-height:44px;min-width:56px;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease-out);
}
.chip::after{content:" mm";font-size:.72em;color:var(--text-3)}
.chip:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.chip.on{border-color:var(--brass);background:rgba(174,144,94,.14);color:var(--brass-hot)}
.piece-note{margin-top:1.4em;color:var(--text-2);font-size:.9rem;max-width:40ch}
.spec{margin-top:2em;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.spec>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.5em;background:var(--canvas);padding:.85em 1.1em}
.spec dt{font:400 .68rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.spec dd{font-family:var(--f-mono);font-size:.88rem;color:var(--brass)}

/* ---------- 5. pasos ---------- */
.steps{background:var(--canvas-warm);border-block:1px solid var(--line)}
.steps-head{margin-bottom:clamp(38px,6vh,70px)}
.steps-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:1.6em;border-top:1px solid var(--line)}
.step::before{
  content:"0" counter(s);position:absolute;top:-.85em;left:0;
  background:var(--canvas-warm);padding-right:.8em;
  font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;color:var(--brass);
}
.step-art{width:100%;max-width:150px;height:auto;margin-bottom:1.5em;overflow:visible}
.step-art [class^="sa-"]{fill:none;stroke:var(--brass-dim);stroke-width:2;stroke-linecap:round}
.step-art .sa-dot{fill:var(--brass);stroke:none}
.js .step-art .sa-ring,.js .step-art .sa-check,.js .step-art .sa-arrow,.js .step-art .sa-jaw{
  stroke-dasharray:var(--l,240);stroke-dashoffset:var(--l,240);
  transition:stroke-dashoffset 1.3s var(--ease-out);
}
.step.in .sa-ring,.step.in .sa-check,.step.in .sa-arrow,.step.in .sa-jaw{stroke-dashoffset:0}
.step.in .sa-check{stroke:var(--brass)}
.step h3{font-size:1.12rem;margin-bottom:.5em}
.step p{color:var(--text-2);font-size:.92rem;max-width:34ch}

/* fila de transportes */
.ship{
  margin-top:clamp(40px,6vh,72px);padding-top:clamp(24px,4vh,38px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em clamp(14px,2.4vw,30px);
}
.ship-label{font:400 .7rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.ship-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,2vw,24px)}
.ship-list b{font-family:var(--f-dis);font-weight:600;font-size:clamp(1rem,1.9vw,1.35rem);letter-spacing:.04em;color:var(--brass)}
.ship-list i{width:4px;height:4px;border-radius:50%;background:var(--line);align-self:center}

/* ---------- 6. dudas ---------- */
.faq-head{margin-bottom:clamp(30px,5vh,56px)}
.faq-list{max-width:880px;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  display:flex;align-items:baseline;gap:1em;cursor:pointer;list-style:none;
  padding:1.4em 2.5em 1.4em 0;position:relative;
  font-family:var(--f-dis);font-weight:600;font-size:clamp(1rem,1.7vw,1.22rem);
  transition:color .3s var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease-out);
}
.q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.q summary:hover{color:var(--brass)}
.q p{padding:0 3em 1.7em 0;color:var(--text-2);max-width:62ch;font-size:.95rem}

/* ---------- 7. cierre ---------- */
.close{text-align:center;background:var(--panel);border-top:1px solid var(--line)}
.close-wrap{max-width:760px;margin-inline:auto}
.close-h{font-size:clamp(1.9rem,5vw,3.6rem);max-width:none;margin-inline:auto}
.close-p{margin:1.4em auto 2.4em;color:var(--text-2);max-width:48ch}
.close-note{margin-top:1.4em;font:400 .72rem/1.5 var(--f-mono);letter-spacing:.1em;color:var(--text-3)}

/* ---------- pie ---------- */
.foot{position:relative;z-index:1;padding:clamp(44px,7vh,80px) var(--pad);border-top:1px solid var(--line)}
.foot-in{display:grid;gap:1.1em;justify-items:center;text-align:center}
.foot-tag{color:var(--text-2);font-size:.92rem}
.foot-legal{font:400 .72rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--text-3)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .problem{grid-template-columns:1fr;gap:22px}
  .problem-head h2{max-width:none}
  .gauge-box{grid-template-columns:1fr;gap:34px}
  .piece-media img{height:100%;min-height:520px}
  .piece-panel{padding-block:clamp(30px,6vh,60px)}
  .steps-list{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav{gap:10px;padding-inline:18px}
  .nav-brand{white-space:nowrap;font-size:.82rem;letter-spacing:.1em}
  .nav-mark{width:22px;height:22px}
  .nav-btn{margin-left:auto;white-space:nowrap;font-size:.76rem;padding:.6em .9em}
  .hero{height:auto;min-height:100svh}
  .hero-stage{position:relative;height:100svh;min-height:560px}
  .bands{display:none}
  .settle{opacity:1;position:absolute;bottom:clamp(40px,8vh,90px);pointer-events:auto}
  .settle-kicker,.settle-title .w,.settle-sub,.settle-cta{opacity:1;transform:none}
  .cue,.hud{display:none}
}
@media (max-height:560px) and (min-width:761px){.cue,.hud{display:none}}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .hero{height:auto;min-height:100svh}
  .hero-stage{position:relative;height:100svh}
  .bands{display:none}
  .settle{opacity:1;pointer-events:auto}
  .settle-kicker,.settle-title .w,.settle-sub,.settle-cta{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .dim-line{stroke-dashoffset:0}
  .dim-cap{opacity:.8}
  .step .sa-ring,.step .sa-check,.step .sa-arrow,.step .sa-jaw{stroke-dashoffset:0}
  .cue,.hud{display:none}
}

/* pausa global de animaciones en pestaña oculta */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}