/* ============================================================
   ASTILLERO AVALON — prototipo dinámico
   Paleta: agua del Delta (ocre limo), gelcoat marfil, LED frío.
   ============================================================ */

:root{
  /* neutros con sesgo cálido — limo del río, no gris de fábrica */
  --carbon:  #131110;
  --carbon-2:#1b1815;
  --carbon-3:#262119;
  --gel:     #e9e4d9;
  --gel-2:   #f3efe6;

  /* acentos */
  --silt:    #9c7a4b;   /* ocre del Delta — filetes, rótulos */
  --led:     #4fa8e0;   /* luz LED de cortesía — el único golpe frío */
  --steel:   #7e868c;

  /* superficies de marca: oscuras en escritorio y celular */
  --ground:  var(--carbon);
  --surface: var(--carbon-2);
  --text:    #ece6da;
  --text-dim:#98918a;
  --rule:    rgba(236,230,218,.15);
  --rule-2:  rgba(156,122,75,.55);

  --chrome:  rgba(19,17,16,.74);   /* barras fijas: siempre oscuras */
  --chrome-text:#efe9dd;
  --logo-invert:0;                 /* los logos vienen en blanco */

  /* tipografía */
  --display: "Arial Black","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --body: "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  --pad: clamp(20px, 5vw, 96px);
  --maxw: 1440px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:  var(--carbon);
    --surface: var(--carbon-2);
    --text:    #ece6da;
    --text-dim:#98918a;
    --rule:    rgba(236,230,218,.15);
    --rule-2:  rgba(156,122,75,.55);
    --logo-invert:0;
  }
}
:root[data-theme="dark"]{
  --ground:  var(--carbon);
  --surface: var(--carbon-2);
  --text:    #ece6da;
  --text-dim:#98918a;
  --rule:    rgba(236,230,218,.15);
  --rule-2:  rgba(156,122,75,.55);
  --logo-invert:0;
}
:root[data-theme="light"]{
  --ground:  var(--gel);
  --surface: #ded8cb;
  --text:    #17140f;
  --text-dim:#5d574c;
  --rule:    rgba(23,20,15,.14);
  --rule-2:  rgba(156,122,75,.42);
  --logo-invert:1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:clamp(15px,1.02vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
a[href^="https://wa.me/"]{touch-action:manipulation; -webkit-tap-highlight-color:rgba(79,168,224,.22)}
:focus-visible{outline:2px solid var(--led); outline-offset:3px; border-radius:2px}

/* ---------- primitivas tipográficas ---------- */
.eyebrow{
  font-family:var(--display); font-size:clamp(9px,.72vw,11px); font-weight:900;
  letter-spacing:.38em; text-transform:uppercase; color:var(--silt);
  display:flex; align-items:center; gap:14px; margin:0;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--rule-2)}
.eyebrow.solo::after{display:none}

.h1{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(40px,13vw,186px); line-height:.86; letter-spacing:-.045em;
  margin:0; white-space:nowrap;
}
.h2{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,5.4vw,80px); line-height:.9; letter-spacing:-.04em;
  margin:0; text-wrap:balance;
}
.h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(19px,2.1vw,30px); line-height:1.02; letter-spacing:-.02em; margin:0;
}
.lede{font-size:clamp(17px,1.55vw,23px); line-height:1.5; color:var(--text); max-width:34ch; text-wrap:pretty}
.body-col{max-width:60ch; color:var(--text-dim)}
.body-col p{margin:0 0 1.1em}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- chrome fijo ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60; height:64px;
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding:0 var(--pad);
  background:transparent; color:var(--chrome-text);
  transition:background .45s ease, backdrop-filter .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
.topbar.stuck{
  background:var(--chrome); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(236,230,218,.12);
}
.wordmark{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.wordmark img{width:clamp(96px,9vw,132px); height:auto}
.wordmark span{
  font-family:var(--display); font-size:8px; font-weight:900; letter-spacing:.34em;
  color:var(--silt); text-transform:uppercase; padding-left:11px;
  border-left:1px solid rgba(236,230,218,.24); line-height:1.25;
}
.nav{display:flex; gap:clamp(12px,1.9vw,28px); margin-left:auto; align-items:center}
.nav a{
  font-family:var(--display); font-size:10px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--chrome-text);
  opacity:.62; transition:opacity .25s, color .25s; padding:6px 0; white-space:nowrap;
}
.nav a:hover, .nav a.active{opacity:1; color:#fff}
.nav a.active{color:var(--led)}

/* menú compacto */
.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--chrome-text); font-family:var(--display); font-size:10px; font-weight:900;
  letter-spacing:.2em; text-transform:uppercase; padding:10px 0 10px 14px; align-items:center; gap:9px;
}
.burger i{display:block; width:20px; height:9px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor}
.menu-open .burger i{border-bottom-color:transparent}
@media(max-width:860px){
  .nav a:not(.wa){display:none}
  .burger{display:inline-flex}
  .nav{margin-left:0}
}
@media(max-width:660px){
  .wordmark span{display:none}
  .burger span{display:none}
  .burger{padding-left:6px}
  .topbar{gap:12px}
  .wa{padding:8px 13px !important; font-size:9.5px}
}
.sheet{
  position:fixed; inset:0; z-index:59; background:rgba(15,13,12,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:80px var(--pad) 40px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.menu-open .sheet{opacity:1; visibility:visible}
.sheet a{
  font-family:var(--display); font-weight:900; text-transform:uppercase; text-decoration:none;
  font-size:clamp(28px,9vw,44px); letter-spacing:-.03em; line-height:1.16; color:#f2ece0;
  border-bottom:1px solid rgba(242,236,224,.14); padding:10px 0;
}
.sheet a:last-child{border-bottom:0; color:var(--led)}

.wa{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(236,230,218,.32); border-radius:999px; padding:8px 15px !important;
  opacity:1 !important; touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(79,168,224,.22);
}
.wa .dot{width:6px;height:6px;border-radius:50%;background:var(--led);flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .wa:hover{background:var(--led); border-color:var(--led); color:var(--carbon) !important}
  .wa:hover .dot{background:var(--carbon)}
}
.wa:active{background:var(--led); border-color:var(--led); color:var(--carbon) !important}
.wa:active .dot{background:var(--carbon)}

/* riel de progreso — cuadernas del casco */
.rail{
  position:fixed; right:calc(var(--pad) * .42); top:50%; transform:translateY(-50%);
  z-index:55; display:flex; flex-direction:column; gap:13px; align-items:flex-end;
  mix-blend-mode:difference;
}
@media(max-width:900px){ .rail{display:none} }
.rail a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:#fff; opacity:.35;
  transition:opacity .3s;
}
.rail a::after{content:""; width:16px; height:1px; background:#fff; transition:width .35s ease}
.rail a:hover{opacity:.8}
.rail a.on{opacity:1}
.rail a.on::after{width:38px}
.rail .label{opacity:0; transform:translateX(6px); transition:opacity .3s, transform .3s}
.rail a.on .label, .rail a:hover .label{opacity:1; transform:none}

.scrollbar-top{
  position:fixed; top:0; left:0; height:2px; z-index:70;
  background:var(--led); width:0%; transition:width .1s linear;
}

/* ---------- HERO ---------- */
/* El hero scrollea normal: la animación del titular corre por tiempo, no por scroll,
   así que no hace falta clavar la página para que se vea. */
.hero{position:relative; height:100svh; min-height:560px; background:var(--carbon)}
.hero-stage{position:relative; height:100%; overflow:hidden}
.hero-media{position:absolute; inset:-8% 0 -8% 0; will-change:transform}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:52% 58%}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 80% at 0% 100%, rgba(12,11,10,.88) 0%, rgba(12,11,10,.48) 45%, transparent 74%),
    linear-gradient(180deg, rgba(19,17,16,.72) 0%, rgba(19,17,16,.16) 32%, rgba(19,17,16,.34) 56%, rgba(19,17,16,.94) 100%),
    radial-gradient(115% 78% at 50% 96%, rgba(19,17,16,.86), transparent 62%);
}
.hero-grain{
  position:absolute; inset:-40px; opacity:.16; pointer-events:none; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:140px 140px;
  animation:grain .55s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      20%{transform:translate3d(-14px,7px,0)}
  40%{transform:translate3d(9px,-11px,0)} 60%{transform:translate3d(-7px,-6px,0)}
  80%{transform:translate3d(12px,9px,0)} 100%{transform:translate3d(0,0,0)}
}
.hero-inner{
  position:relative; z-index:3; height:100%; padding:0 var(--pad) clamp(28px,5vh,58px);
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; justify-content:flex-end; color:#f6f2ea;
}
.hero .h1{color:#fff; text-shadow:0 2px 60px rgba(0,0,0,.4)}
/* el hero es video: los cuadros claros se comían el rótulo superior */
.hero .eyebrow{text-shadow:0 1px 16px rgba(12,10,9,.85)}
.hero-tag{text-shadow:0 1px 14px rgba(12,10,9,.8)}
.hero-line{overflow:hidden; display:block; padding-bottom:.09em; margin-bottom:-.09em}
.hero-line > span{display:block; animation:rise 1.15s cubic-bezier(.16,.84,.3,1) both}
.hero-line:nth-child(2) > span{animation-delay:.09s}
@keyframes rise{from{transform:translateY(105%)} to{transform:none}}
.hero-sub{
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,40px); align-items:flex-end;
  margin-top:clamp(20px,3.4vh,38px); padding-top:20px; border-top:1px solid rgba(255,255,255,.2);
  animation:fade .9s .5s ease both;
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.hero-sub p{margin:0; max-width:40ch; color:#e2dbcd; font-size:clamp(14px,1.05vw,16.5px)}
.hero-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#cfc6b4; white-space:nowrap;
}
.hero-tag b{color:var(--led); font-weight:400}
.hero-cue{
  position:absolute; left:var(--pad); bottom:clamp(28px,5vh,58px); z-index:4;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:12px;
}
.hero-cue::after{content:""; width:1px; height:56px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:900px){ .hero-cue{display:none} }

/* ---------- franja cinética ---------- */
.kinetic{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--surface); overflow:hidden; padding:clamp(12px,1.6vw,20px) 0;
  display:flex; flex-direction:column; gap:4px;
}
.k-track{display:flex; gap:0; white-space:nowrap; will-change:transform}
.k-track span{
  flex:0 0 auto;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(24px,4.4vw,64px); letter-spacing:-.03em; line-height:1.04;
  padding-right:.42em; color:var(--text); opacity:.9;
}
.k-track span.ghost{
  color:transparent; -webkit-text-stroke:1px var(--silt); opacity:.75;
}
.k-track.b span{font-size:clamp(15px,2.1vw,30px); opacity:.5; letter-spacing:.02em}

/* ---------- layout de secciones ---------- */
section{position:relative}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.pad-y{padding-top:clamp(72px,11vh,168px); padding-bottom:clamp(72px,11vh,168px)}

.split{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(26px,5vw,84px); align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:26px} }

/* reveals */
[data-anim]{opacity:0; transform:translateY(26px); transition:opacity .95s cubic-bezier(.2,.7,.3,1), transform .95s cubic-bezier(.2,.7,.3,1)}
[data-anim].in{opacity:1; transform:none}
[data-anim][data-d="1"]{transition-delay:.09s}
[data-anim][data-d="2"]{transition-delay:.18s}
[data-anim][data-d="3"]{transition-delay:.27s}
[data-anim][data-d="4"]{transition-delay:.36s}

/* ---------- cifras ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-top:clamp(38px,6vh,72px);
}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--ground); padding:clamp(20px,2.6vw,36px) clamp(14px,1.8vw,26px)}
.stat .v{
  font-family:var(--display); font-weight:900; font-size:clamp(34px,4.6vw,64px);
  letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline;
}
.stat .v i{font-style:normal; font-size:.44em; letter-spacing:-.02em; color:var(--silt); padding-left:.14em}
.stat .k{
  margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-dim); line-height:1.5;
}

/* ---------- historia sticky ---------- */
.chapters{position:relative; height:360vh; background:var(--carbon)}
.chapters-stage{position:sticky; top:0; height:100svh; overflow:hidden}
.ch-media{position:absolute; inset:0}
.ch-media figure{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s ease}
.ch-media figure.on{opacity:1}
.ch-media img{width:100%; height:100%; object-fit:cover; will-change:transform}
.ch-veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(19,17,16,.94) 0%, rgba(19,17,16,.72) 42%, rgba(19,17,16,.28) 100%);
}
.ch-inner{
  position:relative; z-index:3; height:100%; display:flex; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); color:#f2ece0;
}
.ch-hold{max-width:min(52ch,54vw); position:relative}
@media(max-width:900px){ .ch-hold{max-width:none} }
.ch-item{
  position:absolute; inset:auto 0 auto 0; opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); pointer-events:none;
}
.ch-item.on{opacity:1; transform:none; position:relative; pointer-events:auto}
.ch-year{
  font-family:var(--display); font-weight:900; font-size:clamp(52px,9vw,132px);
  letter-spacing:-.05em; line-height:.86; color:transparent; -webkit-text-stroke:1.4px rgba(242,236,224,.72);
  display:block; margin-bottom:.1em;
}
.ch-item h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(22px,2.9vw,42px); line-height:.98; margin:0 0 .55em; color:#fff;
}
.ch-item p{margin:0; color:#d5cdbd; max-width:50ch; font-size:clamp(14.5px,1.08vw,17px)}
.ch-dots{
  position:absolute; z-index:4; left:var(--pad); bottom:clamp(28px,5vh,54px);
  display:flex; gap:9px; align-items:center;
}
.ch-dots i{width:34px; height:2px; background:rgba(242,236,224,.26); display:block; transition:background .4s}
.ch-dots i.on{background:var(--led)}

/* ---------- flota (estaciones sticky) ---------- */
.station{position:relative; height:155vh; --station-p:0}
.station-stage{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--carbon)}
.station-media{position:absolute; inset:-6% 0; will-change:transform}
.station-media img{width:100%; height:100%; object-fit:cover; will-change:transform; transform-origin:center}
.station-veil{
  position:absolute; inset:0;
  background:
    /* pozo abajo a la izquierda: es donde caen el claim y el párrafo */
    radial-gradient(120% 85% at 0% 100%, rgba(12,11,10,.90) 0%, rgba(12,11,10,.55) 42%, transparent 72%),
    /* banda inferior a todo el ancho: sostiene la ficha técnica y las pastillas */
    linear-gradient(180deg,
      rgba(19,17,16,.62) 0%,
      rgba(19,17,16,.20) 30%,
      rgba(19,17,16,.72) 62%,
      rgba(19,17,16,.94) 100%);
}
.station-inner{
  position:relative; z-index:3; height:100%; max-width:var(--maxw); margin:0 auto;
  padding:88px var(--pad) clamp(26px,5vh,54px);
  display:flex; flex-direction:column; justify-content:flex-end; color:#f4efe4;
}
.station-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.station-name{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(40px,8.6vw,132px); line-height:.82; letter-spacing:-.05em; margin:0; color:#fff;
}
.station-name em{font-style:normal; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.8)}
.station-claim{
  font-family:var(--mono); font-size:clamp(11px,.9vw,13px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--led); margin:clamp(12px,1.4vh,20px) 0 .7em;
}
.station-desc{margin:0; color:#ddd5c6; max-width:44ch; font-size:clamp(14px,1.02vw,16.5px)}
.station-claim, .station-desc, .spec dt, .spec dd{text-shadow:0 1px 14px rgba(12,10,9,.6)}
.station-progress{
  position:absolute; z-index:5; right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none;
  color:rgba(255,255,255,.74); font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
}
.station-progress span{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap}
.station-progress i{display:block; width:2px; height:76px; overflow:hidden; background:rgba(255,255,255,.22)}
.station-progress b{display:block; width:100%; height:100%; background:var(--led); transform:scaleY(var(--station-p)); transform-origin:top; will-change:transform}
@media(max-width:900px){
  .station-veil{
    background:
      radial-gradient(140% 70% at 0% 100%, rgba(12,11,10,.88) 0%, rgba(12,11,10,.5) 50%, transparent 78%),
      linear-gradient(180deg,rgba(19,17,16,.62) 0%,rgba(19,17,16,.26) 20%,rgba(19,17,16,.86) 46%,rgba(19,17,16,.97) 100%);
  }
  /* recorridos más cortos en pantallas chicas */
  .station{height:132vh}
  .station-progress{
    top:76px; left:var(--pad); right:var(--pad); transform:none;
    flex-direction:row; gap:12px; align-items:center;
  }
  .station-progress span{writing-mode:horizontal-tb; transform:none}
  .station-progress i{height:2px; width:auto; flex:1}
  .station-progress b{transform:scaleX(var(--station-p)); transform-origin:left}
  .chapters{height:300vh}
}

.specs{
  margin-top:clamp(18px,3vh,34px); border-top:1px solid rgba(255,255,255,.24);
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
}
@media(max-width:1080px){ .specs{grid-template-columns:repeat(4,1fr)} }
@media(max-width:600px){ .specs{grid-template-columns:repeat(2,1fr)} }
.spec{
  padding:14px 12px 4px 0; border-right:1px solid rgba(255,255,255,.14);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.spec:last-child{border-right:0}
.on-specs .spec{opacity:1; transform:none}
.on-specs .spec:nth-child(1){transition-delay:.04s}
.on-specs .spec:nth-child(2){transition-delay:.09s}
.on-specs .spec:nth-child(3){transition-delay:.14s}
.on-specs .spec:nth-child(4){transition-delay:.19s}
.on-specs .spec:nth-child(5){transition-delay:.24s}
.on-specs .spec:nth-child(6){transition-delay:.29s}
.on-specs .spec:nth-child(7){transition-delay:.34s}
.spec dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 6px;
}
.spec dd{
  margin:0; font-family:var(--display); font-weight:900; font-size:clamp(16px,1.55vw,25px);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:#fff; line-height:1.05;
}
.spec dd small{font-size:.5em; letter-spacing:.04em; color:rgba(255,255,255,.62); font-weight:900; padding-left:.2em}
.kit{
  margin:clamp(14px,2.2vh,24px) 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:7px;
}
.kit li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:#cdc4b3;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px 11px;
}
@media(max-width:600px){ .kit li:nth-child(n+4){display:none} }

/* ---------- planta cenital ---------- */
.planta{background:var(--surface); overflow:hidden}
.planta-frame{
  position:relative; margin-top:clamp(30px,5vh,58px);
  border:1px solid var(--rule); background:var(--ground);
}
.planta-frame img{width:100%; height:auto; display:block}
.planta-cover{
  position:absolute; inset:0; background:var(--surface);
  transform-origin:right center; will-change:transform;
}
.planta-cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--led)}
.planta-marks{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--rule); margin-top:1px;
}
.planta-marks div{background:var(--ground); padding:16px 18px}
.planta-marks b{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--silt); font-weight:400; margin-bottom:6px;
}
.planta-marks span{font-family:var(--display); font-weight:900; font-size:clamp(15px,1.4vw,21px); letter-spacing:-.02em}

/* ---------- oficio ---------- */
.craft{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.5vw,20px); margin-top:clamp(34px,6vh,68px)}
.craft figure{margin:0; position:relative; overflow:hidden; background:var(--carbon-2)}
.craft figure img{width:100%; height:100%; object-fit:cover; will-change:transform}
.craft .c1{grid-column:span 5; aspect-ratio:3/4}
.craft .c2{grid-column:span 7; aspect-ratio:16/10}
.craft .c3{grid-column:span 4; aspect-ratio:1}
.craft .c4{grid-column:span 4; aspect-ratio:1}
.craft .c5{grid-column:span 4; aspect-ratio:1}
@media(max-width:820px){
  .craft .c1{grid-column:span 12; aspect-ratio:4/3}
  .craft .c2{grid-column:span 12}
  .craft .c3,.craft .c4,.craft .c5{grid-column:span 12; aspect-ratio:16/10}
}
.craft figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:14px 16px;
  background:linear-gradient(transparent,rgba(19,17,16,.86));
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#efe8da;
}
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--rule); margin-top:clamp(34px,6vh,68px)}
.pillar{background:var(--ground); padding:clamp(20px,2.4vw,32px)}
.pillar b{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--silt); font-weight:400; margin-bottom:14px;
}
.pillar h4{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(15px,1.35vw,20px); letter-spacing:-.02em; margin:0 0 10px}
.pillar p{margin:0; color:var(--text-dim); font-size:14.5px}

/* ---------- galería ---------- */
.gal{columns:3; column-gap:clamp(10px,1.4vw,18px); margin-top:clamp(34px,6vh,68px)}
@media(max-width:900px){ .gal{columns:2} }
@media(max-width:560px){ .gal{columns:1} }
.gal button{
  display:block; width:100%; padding:0; border:0; background:var(--carbon-2); cursor:zoom-in;
  margin:0 0 clamp(10px,1.4vw,18px); overflow:hidden; position:relative; break-inside:avoid;
}
.gal img{width:100%; height:auto; transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .6s}
.gal button:hover img{transform:scale(1.045)}
.gal button::after{
  content:"↗"; position:absolute; right:12px; top:10px; color:#fff; font-size:15px;
  opacity:0; transition:opacity .35s; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.gal button:hover::after{opacity:1}

.lightbox{
  position:fixed; inset:0; z-index:120; background:rgba(10,9,8,.95);
  display:none; align-items:center; justify-content:center; padding:clamp(14px,4vw,52px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox.open{display:flex; animation:fade .3s ease}
.lightbox img{max-width:100%; max-height:88svh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox .close{
  position:absolute; top:18px; right:22px; background:none; border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:999px; width:40px; height:40px; font-size:17px; cursor:pointer;
}
.lightbox .close:hover{background:#fff; color:var(--carbon)}

/* ---------- proveedores ---------- */
.suppliers{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; padding:clamp(26px,3.4vw,40px) 0; background:var(--ground)}
.s-track{display:flex; gap:clamp(38px,5.2vw,86px); white-space:nowrap; will-change:transform; align-items:center}
.s-track img{
  flex:0 0 auto; width:auto; height:clamp(17px,1.9vw,26px);
  filter:invert(var(--logo-invert)); opacity:.55;
}
.s-track img.badge{height:clamp(30px,3.4vw,46px)}

/* ---------- contacto ---------- */
.contact{background:var(--carbon); color:#efe9dd; position:relative; overflow:hidden}
.contact::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 12% 0%, rgba(79,168,224,.14), transparent 58%);
}
.contact .wrap{position:relative; z-index:2}
.contact .h2{color:#fff}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:rgba(255,255,255,.14); margin-top:clamp(34px,6vh,64px)}
.cc{background:var(--carbon); padding:clamp(20px,2.4vw,32px)}
.cc b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--silt); font-weight:400; margin-bottom:12px}
.cc a, .cc p{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(14px,1.25vw,19px); letter-spacing:-.01em; color:#fff; text-decoration:none; line-height:1.35}
@media (hover:hover) and (pointer:fine){ .cc a:hover{color:var(--led)} }
.cc small{display:block; margin-top:8px; font-family:var(--body); font-weight:400; font-size:13.5px; color:#9a9288; letter-spacing:0}

.cta-big{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(30px,5vh,54px);
  background:var(--led); color:#0d1418; text-decoration:none;
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(15px,1.6vw,23px); padding:clamp(14px,1.5vw,20px) clamp(20px,2.4vw,34px);
  border-radius:999px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
  touch-action:manipulation; -webkit-tap-highlight-color:rgba(79,168,224,.22);
}
@media (hover:hover) and (pointer:fine){
  .cta-big:hover{transform:translateY(-3px); box-shadow:0 16px 44px rgba(79,168,224,.32)}
}
.cta-big:active{transform:translateY(-1px); box-shadow:0 8px 22px rgba(79,168,224,.24)}
.cta-big i{font-style:normal; font-size:1.15em; line-height:0}

footer{background:var(--carbon); color:#8d867c; padding:26px var(--pad) 34px; border-top:1px solid rgba(255,255,255,.12)}
.foot{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.foot img{width:88px; opacity:.7}
.foot .note{margin-left:auto; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:12px; color:#6f6960; max-width:46ch}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-anim]{opacity:1; transform:none}
  .hero-line > span{transform:none}
  .hero-sub{opacity:1}
  .planta-cover{display:none}
  .station{height:112vh}
  .station-progress{display:none}
}
/* ============================================================
   Acciones de la estación de flota
   ============================================================ */
.station-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(14px,2.2vh,24px)}
.act{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.11em;
  font-size:clamp(10px,.86vw,12px); text-decoration:none;
  padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.34);
  background:none; color:#f4efe4; transition:background .28s, color .28s, border-color .28s, transform .28s;
}
.act:hover{background:#f4efe4; color:var(--carbon); border-color:#f4efe4; transform:translateY(-2px)}
.act.primary{background:var(--led); border-color:var(--led); color:#0d1418}
.act.primary:hover{background:#fff; border-color:#fff}
.act .n{font-family:var(--mono); font-weight:400; letter-spacing:0; opacity:.72}
.act .arr{transition:transform .28s}
.act:hover .arr{transform:translateX(4px)}

/* ============================================================
   Galería desplegable por modelo
   ============================================================ */
.model-gal{
  position:fixed; inset:0; z-index:110; background:var(--carbon);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .3s ease;
}
.model-gal.open{opacity:1}
.model-gal[hidden]{display:none}
.mg-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px var(--pad); background:rgba(19,17,16,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(236,230,218,.14);
}
.mg-head h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(19px,2.4vw,32px); margin:0; color:#fff;
}
.mg-head .cnt{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--silt)}
.mg-close{
  margin-left:auto; cursor:pointer; background:none; color:#efe9dd;
  border:1px solid rgba(236,230,218,.34); border-radius:999px; padding:9px 17px;
  font-family:var(--display); font-weight:900; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.mg-close:hover{background:#efe9dd; color:var(--carbon)}
.mg-grid{
  columns:3; column-gap:clamp(10px,1.4vw,18px);
  padding:clamp(18px,3vw,34px) var(--pad) clamp(40px,6vw,80px);
}
@media(max-width:900px){ .mg-grid{columns:2} }
@media(max-width:560px){ .mg-grid{columns:1} }
.mg-grid button{
  display:block; width:100%; padding:0; border:0; background:var(--carbon-2); cursor:zoom-in;
  margin:0 0 clamp(10px,1.4vw,18px); overflow:hidden; break-inside:avoid; position:relative;
}
.mg-grid img{width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.mg-grid button:hover img{transform:scale(1.04)}

/* ============================================================
   Video
   ============================================================ */
.hero-media video{width:100%; height:100%; object-fit:cover; object-position:52% 58%; display:block}
.vframe{position:relative; overflow:hidden; margin:0; background:var(--carbon-2); border:1px solid var(--rule)}
.vframe video{width:100%; height:auto; display:block}
/* los videos verticales no se comen la pantalla */
.vframe.tall video{height:min(62svh,600px); object-fit:cover; object-position:50% 68%}
.vframe figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(transparent,rgba(19,17,16,.86));
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#efe8da;
}
.aerial-feature{margin-top:clamp(38px,7vh,78px)}
.aerial-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-bottom:clamp(18px,2.8vh,30px);
}
.aerial-head .h3{margin:.65em 0 0}
.aerial-head > p{margin:0; max-width:42ch; color:var(--text-dim); line-height:1.65}
.vframe.cinematic video{aspect-ratio:16/9; object-fit:cover}
@media(max-width:720px){
  .aerial-head{display:block}
  .aerial-head > p{margin-top:16px}
}
.vpair{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(10px,1.5vw,20px); margin-top:clamp(30px,5vh,58px); align-items:start}
@media(max-width:820px){ .vpair{grid-template-columns:1fr} }

/* ---------- historias visuales de producto ---------- */
.model-feature-section{overflow:hidden}
.interior-story{
  display:grid; grid-template-columns:minmax(240px,.78fr) repeat(2,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.story-copy{
  background:var(--surface); padding:clamp(26px,3.3vw,48px);
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.story-copy .h3{margin:.75em 0 .7em}
.story-copy > p:last-child{margin:0; color:var(--text-dim); font-size:clamp(14px,1.15vw,16px); line-height:1.7}
.story-photo{position:relative; overflow:hidden; margin:0; aspect-ratio:4/3; background:var(--carbon-2)}
.story-photo img{width:100%; height:100%; display:block; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.story-photo:hover img{transform:scale(1.035)}
.story-photo figcaption{
  position:absolute; inset:auto 0 0; padding:46px 18px 16px;
  background:linear-gradient(transparent,rgba(10,12,13,.9)); color:#f3eee4;
  font-family:var(--mono); font-size:10px; line-height:1.4; letter-spacing:.11em; text-transform:uppercase;
}
.story-photo figcaption span{color:var(--sky); margin-right:10px}
@media(max-width:940px){
  .interior-story{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-copy{grid-column:1/-1}
}
@media(max-width:620px){
  .interior-story{grid-template-columns:1fr}
  .story-copy{grid-column:auto}
}

/* ---------- Siroco: terrazas y manga útil ---------- */
.beam-section{overflow:hidden}
.beam-story{
  display:grid; grid-template-columns:minmax(330px,.76fr) minmax(300px,1fr);
  gap:clamp(34px,7vw,110px); align-items:start;
}
.beam-visual{position:relative; overflow:hidden; margin:0; border:1px solid var(--rule); background:#0d1b22}
.beam-visual img{width:100%; height:auto; display:block}
.beam-cota{
  position:absolute; left:5.5%; right:5.5%; top:79.2%; z-index:2;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.78));
}
.beam-cota i{position:relative; display:block; height:2px; background:#55b8eb}
.beam-cota i:first-child::before,.beam-cota i:last-child::after{
  content:""; position:absolute; top:-7px; width:2px; height:16px; background:#55b8eb;
}
.beam-cota i:first-child::before{left:0}
.beam-cota i:last-child::after{right:0}
.beam-cota strong{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px;
  background:rgba(11,15,17,.8); border:1px solid rgba(85,184,235,.7); color:#fff;
  font-family:var(--display); font-weight:900; font-size:clamp(20px,2.5vw,34px); letter-spacing:-.03em; line-height:.9;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.beam-cota small{font-family:var(--mono); font-size:8px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:#78caf2}
.beam-copy{position:sticky; top:120px; padding-top:clamp(18px,8vh,90px); max-width:620px}
.beam-copy .h3{margin:.72em 0 .65em; max-width:13ch}
.beam-copy > p{margin:0; color:var(--text-dim); font-size:clamp(15px,1.25vw,18px); line-height:1.7; max-width:50ch}
.beam-shift{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px,2vw,24px);
  margin-top:clamp(30px,5vh,52px); padding-top:22px; border-top:1px solid var(--rule);
}
.beam-shift div{display:flex; flex-direction:column; gap:7px}
.beam-shift span{font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim)}
.beam-shift b{font-family:var(--display); font-size:clamp(25px,3vw,42px); letter-spacing:-.04em; line-height:1}
.beam-shift > i{font-style:normal; color:var(--silt); font-size:20px}
.beam-shift .beam-focus b{color:var(--sky)}
@media(max-width:900px){
  .beam-story{grid-template-columns:1fr; gap:28px}
  .beam-visual{width:min(100%,580px); margin-inline:auto}
  .beam-copy{position:static; padding-top:0; max-width:680px}
  .beam-copy .h3{max-width:15ch}
}
@media(max-width:520px){
  .beam-cota{left:4.5%; right:4.5%}
  .beam-cota strong{padding:7px 9px}
  .beam-shift{gap:9px}
}

/* ============================================================
   Sub-páginas de modelo
   ============================================================ */
.m-hero{position:relative; height:78svh; min-height:460px; overflow:hidden; background:var(--carbon)}
.m-hero .bg{position:absolute; inset:-6% 0; will-change:transform}
.m-hero .bg img, .m-hero .bg video{width:100%; height:100%; object-fit:cover}
.m-hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(19,17,16,.78) 0%,rgba(19,17,16,.18) 34%,rgba(19,17,16,.94) 100%);
}
.m-hero .inner{
  position:relative; z-index:3; height:100%; max-width:var(--maxw); margin:0 auto;
  padding:96px var(--pad) clamp(28px,5vh,58px);
  display:flex; flex-direction:column; justify-content:flex-end; color:#f5f0e6;
}
.back{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; align-self:flex-start;
  font-family:var(--display); font-weight:900; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,240,230,.72); margin-bottom:auto;
}
.back:hover{color:#fff}
.m-name{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(44px,9vw,140px); line-height:.82; letter-spacing:-.05em; margin:0; color:#fff;
}
.m-name em{font-style:normal; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.82)}
.m-claim{
  font-family:var(--mono); font-size:clamp(11px,.95vw,14px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--led); margin:clamp(14px,1.8vh,22px) 0 0;
}

.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--ground); border:1px solid var(--rule); margin-top:clamp(28px,4.5vh,52px)}
.ficha > div{background:var(--ground); padding:clamp(16px,2vw,26px); outline:1px solid var(--rule)}
.ficha dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin:0 0 8px}
.ficha dd{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(19px,2.1vw,30px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.04}
.ficha dd small{font-size:.48em; letter-spacing:.04em; color:var(--text-dim); padding-left:.22em}

.equipo{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(24px,3.4vw,54px); margin-top:clamp(30px,5vh,58px)}
.equipo h4{
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(13px,1.15vw,16px); margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--rule-2); color:var(--silt);
}
.equipo ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.equipo li{position:relative; padding-left:20px; color:var(--text-dim); font-size:14.5px; line-height:1.5}
.equipo li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--silt)}

.studio{background:var(--surface); border:1px solid var(--rule); padding:clamp(24px,4vw,54px); margin-top:clamp(30px,5vh,58px)}
.studio img{width:100%; height:auto; mix-blend-mode:multiply}
@media (prefers-color-scheme: dark){ .studio img{mix-blend-mode:normal; filter:invert(1) hue-rotate(180deg) brightness(1.05)} }
:root[data-theme="dark"] .studio img{mix-blend-mode:normal; filter:invert(1) hue-rotate(180deg) brightness(1.05)}
:root[data-theme="light"] .studio img{mix-blend-mode:multiply; filter:none}

.m-nav{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border-top:1px solid var(--rule)}
.m-nav a{
  background:var(--ground); padding:clamp(22px,3vw,40px) var(--pad); text-decoration:none;
  display:flex; flex-direction:column; gap:10px; transition:background .3s;
}
.m-nav a:hover{background:var(--surface)}
.m-nav b{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--silt); font-weight:400}
.m-nav span{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(17px,2vw,27px); letter-spacing:-.03em}
.m-nav a:last-child{text-align:right; align-items:flex-end}
@media(max-width:600px){ .m-nav{grid-template-columns:1fr} .m-nav a:last-child{text-align:left; align-items:flex-start} }

/* ============================================================
   INDUSTRIA → ARGENTINA: las letras se reacomodan con el scroll
   Sin JS se ven las dos palabras, una por línea. El JS agrega .vivo
   y recién ahí arma el morph: el titular nunca depende del script.
   ============================================================ */
.morph .mrow{display:block}
/* en el respaldo sin JS son dos renglones: se achica para que entren los dos */
.morph:not(.vivo){font-size:clamp(34px,9vw,124px)}
.morph.vivo{position:relative; white-space:nowrap}
.morph.vivo .mrow{position:absolute; left:0; top:0; white-space:nowrap; display:inline}
.morph.vivo .mrow.medir{visibility:hidden; pointer-events:none}
.morph.vivo .ml{position:relative; display:inline-block; will-change:transform,opacity}
.morph.vivo .ml b{font-weight:inherit; display:inline-block}
.morph.vivo .ml .g1{position:absolute; left:0; top:0; opacity:0}