/* ===== KW TREADING MX — tokens ===== */
:root{
  --canvas:#0E1319;
  --panel:#151C24;
  --panel-2:#1D262F;
  --accent:#2E86DE;
  --accent-hover:#2374C4;
  --accent-muted:rgba(46,134,222,.32);
  --steel:#7C8B9A;
  --text-primary:#EDF2F7;
  --text-secondary:#9FADBC;
  /* secondary ink for body text sitting over footage or photography: the
     normal secondary token measures under 4.5:1 there, this one clears it */
  --text-on-media:#DCE5ED;
  --hairline:rgba(159,173,188,.15);
  --hairline-strong:rgba(159,173,188,.34);

  --tshadow:0 1px 2px rgba(4,7,11,.95),0 3px 12px rgba(4,7,11,.78),0 10px 44px rgba(4,7,11,.8);
  --tshadow-hero:
    -1.5px -1.5px 0 rgba(3,6,10,.88), 1.5px -1.5px 0 rgba(3,6,10,.88),
    -1.5px 1.5px 0 rgba(3,6,10,.88), 1.5px 1.5px 0 rgba(3,6,10,.88),
    0 2px 4px rgba(3,6,10,.9),0 6px 18px rgba(3,6,10,.75),0 14px 48px rgba(3,6,10,.7);
  --ease-1:cubic-bezier(.16,.8,.28,1);
  --ease-2:cubic-bezier(.65,0,.35,1);

  --font-display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

/* ===== reset ===== */
*,*::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-primary);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--panel);color:var(--text-primary);
  padding:.75rem 1.25rem;border-radius:8px;
  transition:top .25s var(--ease-1);
}
.skip-link:focus{top:1rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== the environment layer (one place, not stacked sections) ===== */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%,rgba(46,134,222,.09),transparent 62%),
    radial-gradient(ellipse 60% 50% at 84% 78%,rgba(124,139,154,.07),transparent 60%);
  animation:envdrift 84s ease-in-out infinite;
  animation-delay:-21s;
}
@keyframes envdrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}
}
/* body's own type selector gives this higher specificity than a plain
   class, which was silently winning over .nav's position:fixed further
   down and turning the header into a block that scrolls away with the
   page instead of staying pinned. .nav already sets its own stacking
   (fixed, z-index:100) and doesn't need this rule's help. */
body > *:not(.env):not(.nav){position:relative;z-index:1}

/* ===== layout helpers ===== */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.wrap-wide{max-width:1420px}
.kicker{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:1rem;
}
.section{padding-block:clamp(5rem,12vw,9rem);position:relative}
.section h2{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:clamp(1.85rem,3.5vw,2.85rem);line-height:1.14;letter-spacing:-.015em;
  max-width:22ch;
}
.section .lede{
  margin-top:1.25rem;color:var(--text-secondary);
  font-size:clamp(1rem,1.35vw,1.12rem);max-width:60ch;line-height:1.75;
}
.section .lede + .lede{margin-top:1rem}

/* ===== nav ===== */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem clamp(1.25rem,4vw,2.5rem);
  background:linear-gradient(to bottom,rgba(14,19,25,.78),transparent);
  backdrop-filter:blur(6px);
}
.nav.is-solid{background:rgba(14,19,25,.9);border-bottom:1px solid var(--hairline)}
.nav .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
/* the source badge is itself a circle on a square canvas, so a full radius
   matches its own edge instead of clipping into the ring */
.nav .brand img{height:30px;width:30px;border-radius:50%;object-fit:cover}
.nav .brand span{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:.98rem;letter-spacing:.06em;
}
.nav ul{list-style:none;display:flex;gap:clamp(1rem,2.4vw,2rem);padding:0;align-items:center;margin:0}
.nav a.navlink{
  font-size:.92rem;color:var(--text-secondary);text-decoration:none;
  transition:color .25s var(--ease-1);
}
.nav a.navlink:hover{color:var(--text-primary)}
.nav a.navlink.quote{
  color:var(--text-primary);border:1px solid var(--hairline-strong);
  padding:.5rem 1rem;border-radius:999px;
  transition:border-color .25s var(--ease-1),color .25s var(--ease-1);
}
.nav a.navlink.quote:hover{border-color:var(--accent);color:var(--accent)}

/* ===== hero ===== */
/* The felt pace of a scrubbed hero is set here, not in the clip: the same
   13.4 seconds mapped over less scroll plays faster under the same finger.
   700vh is a deliberate deviation below the usual pacing floor, chosen because
   this build wants speed; the flick test decides whether any beat has to merge. */
.hero{position:relative;height:700vh}
.hero .stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas);
}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform:translateZ(0);
}
.hero .poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .6s var(--ease-1);
}
.stage.video-ready .poster{opacity:0}
.stage:not(.video-ready) video{opacity:0}

/* the honest progress ring, while the hero video streams in behind the poster */
.loader-ring{
  position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%) rotate(-90deg);
  width:34px;height:34px;color:var(--accent);pointer-events:none;
  opacity:.85;transition:opacity .5s var(--ease-1);
}
.loader-ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .loader-ring,
.stage.video-failed .loader-ring{opacity:0}
@media (max-height:560px){.loader-ring{display:none}}

/* dim, never flatten: the measured worst-pixel audit left a lot of headroom
   over the 3.5:1 floor, so the footage is allowed to stay a photograph */
.scrim-global{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 132% 100% at 46% 56%,rgba(6,10,14,.1) 0%,rgba(6,10,14,.26) 36%,rgba(6,10,14,.62) 100%);
}

.band{
  position:absolute;inset:0;display:flex;align-items:center;
  padding-inline:clamp(1.5rem,7vw,6.5rem);
  opacity:0;pointer-events:none;
  isolation:isolate;
}
.band[data-side="left"]{justify-content:flex-start}
.band[data-side="right"]{justify-content:flex-end}
.band[data-side="center"]{justify-content:center;flex-direction:column;text-align:center}
/* Containers get px/rem, never ch: a ch on a container resolves against the
   font the container inherits (the body face), not the display face inside it,
   so a ch cap here measures in the wrong font and breaks the headline. The ch
   caps live on the text elements themselves, below. */
.band .col{max-width:min(34rem,44vw);position:relative}
.band[data-side="center"] .col{max-width:min(44rem,62vw)}
.band .col.col-wide{max-width:min(40rem,54vw)}
.band h3{max-width:16ch}
.band[data-side="center"] h3{max-width:none}

/* Each band carries its own scrim strength in --sc, tuned against that band's
   own worst frame rather than the average. The crossing is the brightest beat
   in the whole clip, so it needs by far the deepest one. */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;
  opacity:calc(var(--sc,1) * (.2 + .3*var(--k,1)));
}
.band[data-side="left"]::before{
  background:radial-gradient(ellipse 66% 80% at 20% 50%,rgba(4,8,12,.92) 0%,rgba(4,8,12,.72) 54%,rgba(4,8,12,0) 88%);
}
.band[data-side="right"]::before{
  background:radial-gradient(ellipse 66% 80% at 80% 50%,rgba(4,8,12,.92) 0%,rgba(4,8,12,.72) 54%,rgba(4,8,12,0) 88%);
}
.band[data-side="center"]::before{
  background:radial-gradient(ellipse 88% 78% at 50% 48%,rgba(4,8,12,.94) 0%,rgba(4,8,12,.76) 56%,rgba(4,8,12,0) 90%);
}
/* The settle block stacks four elements (mark, h1, sub, cue) into a column
   taller than the other bands' single line, and its worst frame puts a bright
   cabin ceiling right behind the top of that stack, outside where the shared
   center scrim above has already fallen to zero. A wash that never reaches
   zero alpha — instead of a bigger radius on the same falling-to-zero shape —
   is what actually covers the whole tall box, top to bottom. */
.band.band-settle::before{
  background:
    linear-gradient(to bottom,rgba(4,8,12,.86) 0%,rgba(4,8,12,.5) 24%,rgba(4,8,12,.48) 62%,rgba(4,8,12,.8) 100%),
    radial-gradient(ellipse 100% 92% at 50% 44%,rgba(4,8,12,.96) 0%,rgba(4,8,12,.86) 55%,rgba(4,8,12,.62) 85%,rgba(4,8,12,.42) 100%);
}

.band h3{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  color:var(--text-primary);letter-spacing:-.015em;
  font-size:clamp(1.45rem,3.5vw,2.55rem);line-height:1.18;text-shadow:var(--tshadow-hero);
}
.band .settle-mark{
  display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:1.15rem;
}
.band .settle-mark img{height:36px;width:36px;border-radius:50%;object-fit:cover}
.band .settle-mark span{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:1.02rem;letter-spacing:.09em;text-shadow:var(--tshadow-hero);
}
.band .settle-tag{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  color:var(--text-primary);letter-spacing:-.015em;
  font-size:clamp(1.45rem,3.1vw,2.25rem);line-height:1.16;
  text-shadow:var(--tshadow-hero);margin-bottom:.9rem;
  max-width:20ch;margin-inline:auto;
}
/* body-sized text over live footage needs 4.5:1, and the secondary token
   measured 4.15:1 against this band's worst pixel. Lifting the ink is the fix
   that does not cost the footage any more light. */
.band .settle-sub{
  color:var(--text-on-media);font-size:clamp(.95rem,1.25vw,1.04rem);
  max-width:46ch;margin-inline:auto;text-shadow:var(--tshadow-hero);
}
.band .settle-cue{
  display:inline-block;margin-top:1.6rem;color:var(--text-on-media);
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
  text-shadow:0 2px 8px rgba(3,6,10,.9),0 0 3px rgba(3,6,10,.85);
  text-decoration:none;opacity:.88;
  transition:opacity .25s var(--ease-1),transform .25s var(--ease-1);
}
.band .settle-cue:hover{opacity:1;transform:translateY(2px)}

/* word split entrances, driven by --k (0..1) written per band */
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
/* a higher multiplier makes each word snap into place instead of fading, which
   is what a fast hero needs: the beat has to land, not dissolve */
.split-w .w{
  display:inline-block;
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px));
  transition:none;
}
/* The variant class sits on the headline, not on the word span, so these
   selectors descend from it. Each entrance echoes what the footage is doing
   at that beat, which is the whole point of having five of them. */
.split-vis{display:inline}
/* drift-down: the words fall while the camera drops toward the ground */
.drift .split-w .w{transform:translateY(calc((1 - var(--kc))*-28px))}
/* streak: the words come in sideways while the flank rushes past the lens */
.streak .split-w .w{transform:translateX(calc((1 - var(--kc))*-80px))}
/* blur-to-sharp: the line resolves exactly as the lens clears the windscreen */
.blur .split-w .w{filter:blur(calc((1 - var(--kc))*10px));transform:translateY(calc((1 - var(--kc))*14px))}
/* approach-from-depth: the words grow toward the reader while the camera
   travels down the aisle */
.depth .split-w{overflow:visible}
.depth .split-w .w{transform:scale(calc(.8 + .2*var(--kc)))}
.rise .split-w .w{transform:translateY(calc((1 - var(--kc))*22px))}

/* the settle block's three staged arrivals */
.band[data-side="center"] .settle-sub{
  --ks:clamp(0,(var(--k,0) - .5)*3.4,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));
}
.band[data-side="center"] .settle-cue{
  --kb:clamp(0,(var(--k,0) - .72)*4.2,1);
  opacity:calc(.88*var(--kb));transform:translateY(calc((1 - var(--kb))*12px));
}

/* ===== static hero (the five gates) ===== */
.static-hero{
  position:sticky;top:0;height:100vh;display:none;
  background-size:cover;background-position:center;
  align-items:center;justify-content:center;text-align:center;
  padding-inline:1.5rem;
}
/* one continuous wash, no local box behind the text: an ellipse sized to the
   copy block draws a visible horizontal seam across the photo on a phone */
.static-hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(5,9,13,.5) 0%,rgba(5,9,13,.66) 38%,rgba(5,9,13,.82) 72%,rgba(5,9,13,.9) 100%),
    radial-gradient(ellipse 120% 78% at 50% 62%,rgba(4,8,12,.42) 0%,rgba(4,8,12,0) 78%);
}
.static-hero .content{position:relative;max-width:min(34rem,88vw)}
.static-hero .settle-mark{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:1.15rem}
.static-hero .settle-mark img{height:36px;width:36px;border-radius:50%;object-fit:cover}
.static-hero .settle-mark span{font-family:var(--font-display);font-weight:700;font-stretch:112%;font-size:1rem;letter-spacing:.09em;text-shadow:var(--tshadow)}
.static-hero .settle-tag{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:clamp(1.55rem,5vw,2.2rem);line-height:1.16;letter-spacing:-.015em;
  text-shadow:var(--tshadow);margin-bottom:.9rem;
}
.static-hero .settle-sub{color:var(--text-on-media);font-size:1rem;text-shadow:var(--tshadow)}
.static-hero .btn{margin-top:1.6rem}

@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:100vh}
  .hero .stage{display:none}
  .static-hero{display:flex}
}
/* portrait phones and tablets: `cover` on a 16:9 clip inside a tall narrow
   box scales to fill the height, which crops most of the width away and
   reads as a meaningless zoom — this is why the video looked frozen/wrong
   on a phone before: the static fallback was standing in for the real
   video everywhere narrow, not just where it has to. A width-based fit
   shows the whole frame instead, letterboxed top/bottom into the same dark
   canvas. Landscape-phone and reduced-motion above still get the static
   fallback and keep `cover`, which suits their wider boxes; everywhere
   else the real scrubbing video now plays, just fitted differently. The
   same width-based fit applies to the static fallback's own background,
   for the portrait + reduced-motion overlap. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .hero video{object-fit:contain}
  .hero .poster{background-size:100% auto;background-repeat:no-repeat;background-position:center}
  .static-hero{background-size:100% auto !important;background-repeat:no-repeat !important}
}
@media (max-height:560px){.hero .settle-cue{display:none}}

/* ===== the signature: la cota (engineer's dimension rule) ===== */
.cota{display:block;width:100%;height:40px}
.cota .rule{
  fill:none;stroke:var(--steel);stroke-width:1.4;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
  transition:stroke-dashoffset 1.15s var(--ease-2);
}
.cota .cap{fill:var(--steel);opacity:0;transition:opacity .5s var(--ease-1) .75s}
.cota .tick{stroke:var(--steel);stroke-width:1.1;opacity:0;transition:opacity .6s var(--ease-1) .5s}
.cota.in .rule{stroke-dashoffset:0}
.cota.in .cap,.cota.in .tick{opacity:.55}

/* ===== identidad ===== */
.identity{padding-block:clamp(3.5rem,8vw,6rem)}
.identity-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
.identity-text p{
  font-family:var(--font-display);font-weight:600;font-stretch:104%;
  font-size:clamp(1.05rem,1.75vw,1.32rem);line-height:1.55;letter-spacing:-.01em;
  color:var(--text-secondary);
}
.identity-text p strong{color:var(--text-primary);font-weight:700}
.identity-visual{
  aspect-ratio:1600/1242;background-size:cover;background-position:52% 50%;
  border-radius:14px;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 52% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at 52% 50%,#000 58%,transparent 100%);
}
@media (max-width:860px){
  .identity-grid{grid-template-columns:1fr}
  .identity-visual{order:-1}
}

/* ===== el problema ===== */
.problem{overflow:hidden}
.problem .bg-texture{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(105deg,rgba(46,134,222,.05) 0%,transparent 45%),
    repeating-linear-gradient(102deg,rgba(159,173,188,.035) 0 2px,transparent 2px 9px);
}
.problem .wrap{position:relative;max-width:900px}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent-muted);opacity:.55;
  animation:drift 15s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-26px) translateX(11px)}
}
.problem .punch{
  margin-top:2rem;font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1.35;letter-spacing:-.01em;
  color:var(--text-primary);
}

/* ===== la flota ===== */
.fleet{background:var(--panel)}
.fleet-grid{
  display:grid;gap:1.4rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.unit{
  background:var(--panel-2);border:1px solid var(--hairline);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease-1),border-color .4s var(--ease-1);
}
.unit:hover{transform:translateY(-4px);border-color:var(--hairline-strong)}
.unit .shot{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#0b1015}
.unit .body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.unit .code{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;
}
.unit h3{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:1.22rem;letter-spacing:-.01em;
}
.unit .blurb{color:var(--text-secondary);font-size:.92rem;line-height:1.6}
.unit .flag{
  align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-muted);border-radius:999px;padding:.2rem .6rem;
}

/* per-unit dimension bar: width is the real length, to scale */
.unit-cota{margin-top:.2rem}
.unit-cota svg{display:block;width:100%;height:26px;overflow:visible}
.unit-cota .track{stroke:var(--hairline-strong);stroke-width:1}
.unit-cota .rule{
  stroke:var(--accent);stroke-width:1.6;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
  transition:stroke-dashoffset 1s var(--ease-2) .15s;
}
.unit-cota .cap{fill:var(--accent);opacity:0;transition:opacity .45s var(--ease-1) .85s}
.unit.in .unit-cota .rule{stroke-dashoffset:0}
.unit.in .unit-cota .cap{opacity:1}
.unit-cota .len{
  font-family:var(--font-mono);font-size:.72rem;fill:var(--text-secondary);letter-spacing:.04em;
}

.spec{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;flex:1}
.spec li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.86rem;border-bottom:1px solid var(--hairline);padding-bottom:.4rem;
}
.spec li:last-child{border-bottom:0}
.spec .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);flex:none}
.spec .v{text-align:right;color:var(--text-primary);line-height:1.4}
.unit .unit-cta{
  margin-top:.4rem;font-size:.88rem;color:var(--text-primary);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease-1),color .25s var(--ease-1),gap .25s var(--ease-1);
}
.unit .unit-cta:hover{border-color:var(--accent);color:var(--accent);gap:.6rem}

/* ===== por qué sigue rodando (alternating rows, deliberately not cards) ===== */
.why{position:relative}
.pillar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4rem);align-items:center;
  margin-top:clamp(3rem,6vw,4.5rem);
}
/* nth-of-type, not nth-child: the kicker and the h2 share the parent, so a
   nth-child rule here would flip the wrong row the moment either one moves */
.pillar:nth-of-type(even) .pillar-shot{order:2}
.pillar-shot{
  aspect-ratio:1080/480;background-size:cover;background-position:center;
  border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85);
}
.pillar-n{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;
  color:var(--accent);display:block;margin-bottom:.7rem;
}
.pillar h3{
  font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.2;letter-spacing:-.015em;
  margin-bottom:.85rem;
}
.pillar p{color:var(--text-secondary);font-size:1rem;line-height:1.75;max-width:46ch}
@media (max-width:820px){
  .pillar{grid-template-columns:1fr;gap:1.5rem}
  .pillar:nth-child(even) .pillar-shot{order:-1}
  .pillar-shot{order:-1}
}

/* ===== the one interactive moment: the odometer ===== */
.odo{
  margin-top:clamp(3.5rem,7vw,5.5rem);
  border:1px solid var(--hairline);border-radius:18px;background:var(--panel);
  padding:clamp(1.75rem,4vw,2.75rem);
}
.odo-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;justify-content:space-between}
.odo button{
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid var(--hairline-strong);
  background:var(--panel-2);font-size:.94rem;text-align:left;
  transition:border-color .25s var(--ease-1);
}
.odo button:hover{border-color:var(--accent-muted)}
.odo .ring{width:22px;height:22px;flex:none}
.odo .ring circle{fill:none;stroke-width:2.5}
.odo .ring .track{stroke:var(--hairline-strong)}
.odo .ring .fill{
  stroke:var(--accent);stroke-dasharray:56;
  stroke-dashoffset:calc(56 - 56*var(--p,0));
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.odo-readout{display:flex;align-items:baseline;gap:.5rem}
.odo-km{
  font-family:var(--font-mono);font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.odo-unit{font-family:var(--font-mono);font-size:.9rem;color:var(--text-secondary)}
.odo-facts{
  list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
/* the three figures rest dimmed rather than absent: an empty panel reads as
   broken to a first-time visitor, a dimmed one reads as something to unlock */
.odo-facts li{
  opacity:.2;transform:translateY(10px);
  transition:opacity .6s var(--ease-1),transform .6s var(--ease-1);
  border-top:1px solid var(--hairline);padding-top:1rem;
}
.odo.done .odo-facts li{opacity:1;transform:none}
.odo-facts .fig{color:var(--text-secondary);transition:color .5s var(--ease-1)}
.odo.done .odo-facts .fig{color:var(--accent)}
.odo.done .odo-facts li:nth-child(2){transition-delay:.14s}
.odo.done .odo-facts li:nth-child(3){transition-delay:.28s}
.odo-facts .fig{
  display:block;font-family:var(--font-display);font-weight:700;font-stretch:112%;
  font-size:1.4rem;margin-bottom:.3rem;letter-spacing:-.01em;
}
.odo-facts .cap{font-size:.9rem;color:var(--text-secondary);line-height:1.55}
.odo-result{
  margin-top:1.75rem;font-family:var(--font-mono);font-size:.9rem;color:var(--text-secondary);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-1) .42s,transform .5s var(--ease-1) .42s;
}
.odo.done .odo-result{opacity:1;transform:none}

/* ===== ya están rodando (full-bleed plate with an overlapping panel) ===== */
.proof{background:var(--panel);padding-block:0;overflow:hidden}
.proof-plate{
  position:relative;min-height:clamp(420px,58vw,660px);
  background-size:cover;background-position:center 58%;
}
/* the plate is a bright white coach, so the reading side is darkened hard and
   the far side keeps enough light for the photo to stay a photograph */
.proof-plate::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,12,17,.96) 0%,rgba(8,12,17,.9) 26%,rgba(8,12,17,.6) 52%,rgba(8,12,17,.18) 80%,rgba(8,12,17,.38) 100%),
    linear-gradient(to bottom,rgba(8,12,17,.35) 0%,rgba(8,12,17,0) 24%);
}
.proof-panel{
  position:relative;z-index:2;max-width:1420px;margin-inline:auto;
  padding:clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,2.5rem);
}
.proof-panel .inner{max-width:min(38rem,100%)}
.proof-panel h2,.proof-panel .lede,.proof-panel .kicker{text-shadow:var(--tshadow)}
.proof-panel h2{max-width:20ch;margin-bottom:.4rem}
/* this section is .proof, not .section, so the shared lede rule never reaches
   it: state the paragraph style here instead of inheriting body defaults */
.proof-panel .lede{
  margin-top:1.15rem;color:var(--text-on-media);
  font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.75;max-width:52ch;
}
.proof-panel .lede + .lede{margin-top:.95rem}
/* narrow screens put the whole panel over the bodywork, so the horizontal
   gradient stops protecting the copy: darken from the top instead, and leave
   the lower part of the frame light so it still reads as a photograph */
@media (max-width:860px){
  .proof-plate::after{
    background:linear-gradient(to bottom,rgba(8,12,17,.93) 0%,rgba(8,12,17,.9) 48%,rgba(8,12,17,.72) 72%,rgba(8,12,17,.42) 100%);
  }
}
.proof-tag{
  margin-top:2rem;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);
  background:rgba(8,12,17,.6);border:1px solid var(--hairline-strong);
  border-radius:999px;padding:.45rem .95rem;backdrop-filter:blur(10px);
}
.proof-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--accent-muted);animation:pulse 4.5s var(--ease-1) infinite;
  animation-delay:-1.4s;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(46,134,222,.34)}
  50%{box-shadow:0 0 0 7px rgba(46,134,222,0)}
}

/* ===== king long en números ===== */
.numbers{padding-block:clamp(4rem,9vw,6.5rem)}
.numbers .head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem}
.numbers .head p{color:var(--text-secondary);font-size:.95rem;max-width:44ch}
.fig-grid{
  display:grid;gap:1px;margin-top:2.5rem;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.fig-cell{background:var(--canvas);padding:1.5rem 1.4rem}
.fig-cell .n{
  display:block;font-family:var(--font-display);font-weight:700;font-stretch:118%;
  font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.02em;color:var(--text-primary);
}
.fig-cell .l{
  display:block;margin-top:.4rem;font-family:var(--font-mono);font-size:.73rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);line-height:1.55;
}

/* ===== faq ===== */
.faq-section{background:var(--panel)}
.faq-section .wrap{max-width:860px}
.faq{
  margin-top:2.75rem;display:grid;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
}
.faq-item{background:var(--panel-2);padding:1.4rem 1.6rem}
.faq-item summary{
  cursor:pointer;font-weight:500;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  transition:color .25s var(--ease-1);
}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;color:var(--accent);font-size:1.25rem;line-height:1;transition:transform .3s var(--ease-1)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:.85rem;color:var(--text-secondary);font-size:.94rem;line-height:1.75;max-width:62ch}

/* ===== cotización ===== */
.quote-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);margin-top:3rem;grid-template-columns:.85fr 1.15fr}
.quote .aside p{color:var(--text-secondary);line-height:1.8;font-size:.98rem}
.quote .aside .direct{
  margin-top:1.75rem;display:flex;flex-direction:column;gap:.5rem;
  font-family:var(--font-mono);font-size:.86rem;
}
.quote .aside .direct a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--hairline-strong);width:fit-content;transition:color .25s var(--ease-1),border-color .25s var(--ease-1)}
.quote .aside .direct a:hover{color:var(--accent);border-color:var(--accent)}
/* <address> is italic by default in every browser; this is a postal address in
   a technical brand, so it stays upright */
.office{font-style:normal}
.quote .aside .office{
  margin-top:1.6rem;font-size:.9rem;line-height:1.7;color:var(--text-secondary);
}
.quote .aside .office-label{
  display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);opacity:.7;margin-bottom:.45rem;
}
.quote form{display:flex;flex-direction:column;gap:1.1rem}
.fields{display:flex;flex-direction:column;gap:1.1rem}
.field-row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.field label{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.45rem}
.field input,.field textarea,.field select{
  width:100%;background:var(--panel);border:1px solid var(--hairline-strong);border-radius:10px;
  padding:.8rem .95rem;color:var(--text-primary);font-family:var(--font-body);font-size:.95rem;
  transition:border-color .25s var(--ease-1);
}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:999px;font-size:.92rem;font-weight:600;
  font-family:var(--font-body);text-decoration:none;text-align:center;
  transition:background .25s var(--ease-1),transform .25s var(--ease-1),border-color .25s var(--ease-1),color .25s var(--ease-1);
}
.btn-primary{background:var(--accent);color:#07121e;border:1px solid var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--hairline-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.quote .send{align-self:flex-start}
.quote .success{
  margin-top:1rem;color:var(--text-secondary);font-size:.94rem;
  opacity:0;height:0;overflow:hidden;transition:opacity .4s var(--ease-1);
}
.quote form.sent .fields{display:none}
.quote form.sent .success{opacity:1;height:auto}
@media (max-width:860px){
  .quote-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

@media (pointer:coarse){
  .btn,.odo button,.nav a.navlink{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .odo button{justify-content:flex-start}
  .nav a.navlink{justify-content:center}
}

/* ===== footer ===== */
footer{background:var(--panel);border-top:1px solid var(--hairline);padding-block:3rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
footer .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
footer .brand img{height:30px;width:30px;border-radius:50%;object-fit:cover}
footer .brand span{font-family:var(--font-display);font-weight:700;font-stretch:112%;letter-spacing:.06em;font-size:.98rem}
footer .contact-lines{display:flex;flex-direction:column;gap:.4rem;font-size:.92rem;color:var(--text-secondary)}
footer .contact-lines a{text-decoration:none;color:var(--text-secondary);transition:color .25s var(--ease-1)}
footer .contact-lines a:hover{color:var(--text-primary)}
footer .office{margin-top:.5rem;font-size:.86rem;line-height:1.65;color:var(--text-secondary);opacity:.85}
footer .note{font-family:var(--font-mono);font-size:.74rem;color:var(--text-secondary);opacity:.75;max-width:38ch;line-height:1.7}

/* ===== reveal-on-scroll ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-1),transform .8s var(--ease-1)}
.reveal.in{opacity:1;transform:translateY(0)}
.stagger .reveal:nth-child(1){transition-delay:0ms}
.stagger .reveal:nth-child(2){transition-delay:90ms}
.stagger .reveal:nth-child(3){transition-delay:180ms}
.stagger .reveal:nth-child(4){transition-delay:270ms}
.stagger .reveal:nth-child(5){transition-delay:360ms}
.stagger .reveal:nth-child(6){transition-delay:450ms}
.stagger.settled .reveal:nth-child(1),
.stagger.settled .reveal:nth-child(2),
.stagger.settled .reveal:nth-child(3),
.stagger.settled .reveal:nth-child(4),
.stagger.settled .reveal:nth-child(5),
.stagger.settled .reveal:nth-child(6){transition-delay:0ms}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .cota .rule,.unit-cota .rule{stroke-dashoffset:0}
  .cota .cap,.cota .tick{opacity:.55}
  .unit-cota .cap{opacity:1}
  .odo-facts li{opacity:1;transform:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ===== responsive ===== */
@media (max-width:900px){
  .nav ul{gap:.75rem}
  .nav ul li:not(.quote-item){display:none}
}