/* ====== LETRAS (en fonts/) ====== */
@font-face{font-family:"Chakra Petch";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2")}

/* ====== SISTEMA DE DISEÑO DE GAMA PERFORMANT ======
   Bloques que alternan oscuro, blanco y gris claro, con rejilla técnica.
   Paleta del logo + blanco. El lima marca la acción; el rojo, el límite; el amarillo, el destino de la traza. */
:root{
  /* colores */
  --brand:#B8F808; --brand-hi:#D8F808; --brand-deep:#58B808;
  --yellow:#FFF802; --red:#FF0806; --error:#B00403;
  --chrome:#E6E9EC; --chrome-lo:#9AA2A6;
  --ink:#040604; --surface:#0B0F0A; --surface-2:#131A11;
  --text:#EEF2EA; --muted:#9FAA98;
  --paper:#FFFFFF; --paper-2:#E6E9EC;
  --ink-2:rgba(4,6,4,.68); --ink-line:rgba(4,6,4,.16);
  --line:rgba(154,162,166,.22); --line-soft:rgba(154,162,166,.12);
  /* botón principal */
  --cta:var(--brand); --cta-ink:var(--ink); --cta-hover:var(--brand-hi);
  /* letras */
  --font-display:"Chakra Petch",system-ui,sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
  /* formas del logo: esquina cortada, botón inclinado, inclinación de la cursiva */
  --cut:14px; --skew:12px; --slant:-13deg;
  /* movimiento (pareja de la tabla M de js/main.js) */
  --ease:cubic-bezier(.16,1,.3,1);          /* expo.out: entradas */
  --ease-io:cubic-bezier(.76,0,.24,1);      /* power3.inOut: cortinas, menú, trazas */
  --ease-pop:cubic-bezier(.34,1.68,.68,1);  /* back.out(2): solo el nodo amarillo */
  --dur:.8s; --dist:36px; --t-hover:.3s;
  /* medidas */
  --gutter:clamp(16px,5vw,56px); --maxw:1280px; --section-y:clamp(72px,11vw,140px);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ink);overflow-x:hidden}   /* nada se sale en horizontal */
html:not(.js){scroll-behavior:smooth}                                        /* con JS el scroll suave lo lleva Lenis */
body{background:var(--ink);color:var(--text);font:400 16px/1.55 var(--font-body);overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.paper :focus-visible,.paper-2 :focus-visible{outline-color:var(--ink)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id],details[id]{scroll-margin-top:84px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--brand);color:var(--ink);padding:15px 16px;font:700 14px/1 var(--font-display);text-transform:uppercase}
.skip:focus{top:10px}
.pend{background:rgba(255,248,2,.16);color:inherit;padding:1px 6px;border:1px dashed currentColor;font-weight:500}

.paper{background:var(--paper);color:var(--ink)}
.paper-2{background:var(--paper-2);color:var(--ink)}
.dark{background:var(--ink);color:var(--text)}

/* Lenis (scroll suave): reglas de lenis.css 1.3.11 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ====== PIEZAS ====== */
.tag{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.2 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tag::before{content:"";width:8px;height:8px;background:var(--brand);flex:none}
.tag--ink{color:var(--ink-2)}
.tag--ink::before{background:var(--ink);box-shadow:3px 3px 0 var(--brand)}
.big{font:700 clamp(38px,5.8vw,88px)/.92 var(--font-display);font-style:italic;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.big em{font-style:inherit;color:var(--brand)}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:52ch}
.lead--ink{color:var(--ink-2)}
/* títulos que suben desde una ranura (SplitText): aire para acentos y cursiva */
.linea-mask{padding:.24em .16em .12em 0;margin:-.24em -.16em -.12em 0}

/* Botón: paralelogramo, como la cursiva del logo */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 30px;text-decoration:none;border:0;cursor:pointer;
  font:700 15px/1 var(--font-display);font-style:italic;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cta-ink);background:var(--cta);
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),scale .15s var(--ease)}
@media (hover:hover){.btn:hover{background:var(--cta-hover)}}
.btn:active{scale:.97}                                   /* se hunde sin cambiar de color; scale suelto: transform es de GSAP */
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
@media (hover:hover){.btn--ink:hover{background:var(--ink);color:var(--brand)}}
.btn--ink:focus-visible{box-shadow:inset 0 0 0 3px var(--brand)}
.btn--sm{min-height:44px;padding:0 20px;font-size:12px}
.btn--lg{min-height:58px;padding:0 38px;font-size:16px}
/* el texto del botón rueda al pasar el ratón (la copia de abajo es una sombra del propio texto) */
.roll{display:inline-block;vertical-align:top;line-height:1.3}
.roll__in{display:block}
@media (hover:hover) and (pointer:fine){
  .roll{overflow:hidden;padding:0 .16em;margin:0 -.16em}
  .roll__in{white-space:nowrap;text-shadow:0 1.3em 0 currentColor;transition:transform var(--t-hover) var(--ease)}
  :is(a,button):hover .roll__in,:is(a,button):focus-visible .roll__in{transform:translateY(-1.3em)}
}
.link{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 13px/1 var(--font-display);font-style:italic;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome);text-decoration:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.link::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg;transition:translate var(--t-hover) var(--ease)}
@media (hover:hover){
  .link:hover{color:var(--brand);border-color:var(--brand)}
  .link:hover::after{translate:4px 0}
  .link--ink:hover{color:var(--ink);border-color:var(--ink)}
}
.link--ink{color:var(--ink);border-color:var(--ink-line)}

/* Esquinas cortadas (como el chasis del logo) con su filo dibujado */
.chaf{--edge:var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background-image:linear-gradient(135deg,var(--edge) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,var(--edge) calc(50% + 1px),transparent calc(50% + 1px));
  background-position:0 0,100% 100%;background-size:var(--cut) var(--cut);background-repeat:no-repeat;background-origin:border-box}

/* Rejilla técnica con cruces (como un banco de pruebas) */
.grid-lines{position:absolute;inset:0;pointer-events:none;z-index:1}
.grid-lines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(230,233,236,.12)}
.grid-lines i:nth-child(1){left:20%}.grid-lines i:nth-child(2){left:40%}.grid-lines i:nth-child(3){left:60%}.grid-lines i:nth-child(4){left:80%}
.grid-lines i::before,.grid-lines i::after{content:"+";position:absolute;left:-5px;font:400 14px/1 var(--font-display);color:rgba(230,233,236,.55)}
.grid-lines i::before{top:28%}.grid-lines i::after{top:72%}
.grid-lines::before,.grid-lines::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(230,233,236,.1)}
.grid-lines::before{top:28%}.grid-lines::after{top:72%}

/* Cintas en movimiento: dos grupos iguales; sin animación se recorren con el dedo */
.marquee{overflow-x:auto;scrollbar-width:none}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-run{overflow:hidden}
.marquee__track{display:flex;width:max-content}
.marquee.is-run .marquee__track{will-change:transform}
.marquee__group{display:flex;align-items:center;flex:none;list-style:none}
.marquee:not(.is-run) .marquee__group[aria-hidden="true"]{display:none}

/* ====== ENTRADA (animación firma): el anillo sube de vueltas, corta y la cortina se abre ====== */
.preloader{display:none}
.js .preloader{display:grid;place-items:center;position:fixed;inset:0;z-index:200;overflow:hidden;animation:soltar 0s 10s forwards}
@keyframes soltar{to{visibility:hidden}}                 /* último respaldo: si el JS falla, a los 10 s deja ver la página */
.pl-cortina{position:absolute;inset:0}
.pl-cortina__luz,.pl-cortina__cuerpo{position:absolute;top:0;bottom:0;right:-30vh;transform:skewX(var(--slant))}
.pl-cortina__cuerpo{left:-30vh;background:var(--ink)}
.pl-cortina__luz{left:calc(-30vh - 10px);background:var(--brand)}
.pl-centro{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(14px,3vh,26px)}
.pl-anillo{position:relative;width:min(64vw,300px,42vh);aspect-ratio:1}
.pl-marcas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pt{stroke:var(--chrome-lo);stroke-opacity:.26}
.pt.is-on{stroke:var(--brand);stroke-opacity:1}
.pl-anillo.is-red .pt.is-on{stroke:var(--red)}
.pl-anillo.is-corte .pl-marcas{animation:zonaRoja .14s steps(1,end) 3}
.pl-simbolo{position:absolute;left:50%;top:45%;width:56%;height:auto;translate:-50% -50%}
.pl-rpm{position:absolute;left:0;right:0;bottom:5%;text-align:center;color:var(--paper)}
.pl-rpm b{display:block;font:700 clamp(20px,6vw,28px)/1 var(--font-display);font-style:italic;font-variant-numeric:tabular-nums}
.pl-rpm span{display:block;margin-top:5px;font:600 10px/1 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pl-anillo.is-red .pl-rpm b{color:var(--red)}
.pl-nombre{width:min(52vw,230px);height:auto}

/* ====== CABECERA: píldora flotante ====== */
.top{position:fixed;left:0;right:0;top:calc(10px + var(--safe-t));z-index:50;display:flex;justify-content:center;padding-inline:max(12px,env(safe-area-inset-left,0px));pointer-events:none}
.top__pill{pointer-events:auto;display:flex;align-items:center;gap:18px;width:100%;max-width:1120px;padding:8px 8px 8px 18px;background:rgba(4,6,4,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-soft);position:relative}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:28px;width:auto}
.nav{display:none}
.nav a{position:relative;white-space:nowrap;font:600 12px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--chrome-lo);padding:16px 4px;transition:color var(--t-hover) var(--ease)}
.nav a::after{content:"";position:absolute;left:4px;right:4px;bottom:8px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-hover) var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--paper)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.top__cta{display:none;margin-left:auto;white-space:nowrap}
.burger{margin-left:auto;width:44px;height:44px;background:none;border:0;color:var(--chrome);cursor:pointer;position:relative;display:none}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .45s var(--ease),opacity .2s}
.burger i:nth-of-type(1){top:15px}.burger i:nth-of-type(2){top:21px}.burger i:nth-of-type(3){top:27px}
.js .burger{display:block}
.menu-open .burger i:nth-of-type(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger i:nth-of-type(2){opacity:0}
.menu-open .burger i:nth-of-type(3){transform:translateY(-6px) rotate(-45deg)}
.top__rev{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}   /* línea de avance de la página */
.top__rev i{display:block;height:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
html:not(.scrolly) .top__rev{display:none}
html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:0 14px;margin-left:auto}
@media (min-width:900px){
  .nav,html:not(.js) .nav{display:flex;gap:20px;margin-left:auto}
  .top__cta{display:inline-flex;margin-left:6px}
  .js .burger{display:none}
}

/* Menú de móvil: se abre con un corte inclinado */
.menu{position:fixed;inset:0;z-index:45;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:calc(92px + var(--safe-t)) var(--gutter) calc(28px + var(--safe-b));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
  clip-path:polygon(150% 0,150% 0,150% 100%,100% 100%);transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.menu[hidden]{display:none}
.menu.is-open{visibility:visible;clip-path:polygon(0 0,150% 0,150% 100%,-50% 100%);transition:clip-path .7s var(--ease-io),visibility 0s 0s}
.menu__nav{position:relative;z-index:2;display:grid;counter-reset:m}
.menu__nav a{counter-increment:m;display:flex;align-items:baseline;gap:14px;padding:12px 0;min-height:58px;text-decoration:none;border-bottom:1px solid var(--line-soft);overflow:hidden;
  font:700 clamp(28px,8.6vw,40px)/1.15 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--paper)}
.menu__nav a::before{content:"0" counter(m);font:600 12px/1 var(--font-display);font-style:normal;letter-spacing:.18em;color:var(--muted)}
.menu__nav a span{display:block;padding-right:.16em;transform:translateY(125%);transition:transform .7s var(--ease)}
.menu.is-open .menu__nav a span{transform:none}
.menu.is-open .menu__nav a:nth-child(1) span{transition-delay:.16s}
.menu.is-open .menu__nav a:nth-child(2) span{transition-delay:.21s}
.menu.is-open .menu__nav a:nth-child(3) span{transition-delay:.26s}
.menu.is-open .menu__nav a:nth-child(4) span{transition-delay:.31s}
.menu.is-open .menu__nav a:nth-child(5) span{transition-delay:.36s}
.menu__pie{position:relative;z-index:2;display:grid;gap:14px;justify-items:start;opacity:0;transition:opacity .4s var(--ease)}
.menu.is-open .menu__pie{opacity:1;transition-delay:.45s}
.menu__pie .btn{width:100%}
html.menu-open:not(.lenis){overflow:hidden}
@media (min-width:900px){.menu{display:none!important}}

/* ====== 1 · PORTADA ====== */
.hero{position:relative;background:var(--ink)}
.hero__stick{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
/* la foto va en un lienzo 16:9 que siempre cubre la pantalla: así las anclas de la traza quedan pegadas al coche */
.hero__img{--w:max(100vw,calc(max(100vh,560px) * 16 / 9));position:absolute;width:var(--w);aspect-ratio:16/9;left:calc(50% - var(--w) / 2);top:calc(55% - var(--w) * 9 / 16 * .55);transform-origin:50% 60%}
@supports (height:100svh){.hero__img{--w:max(100vw,calc(max(100svh,560px) * 16 / 9))}}
.hero__img-in{position:absolute;inset:0;transform-origin:50% 60%}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__ancla{position:absolute;width:0;height:0}
.hero__ancla--d{left:30%;top:47%}                        /* el capó: donde va la centralita */
.hero__ancla--m{left:30%;top:47%}
.hero__velo,.hero__noche,.hero__oscurece{position:absolute;inset:0;pointer-events:none}
.hero__velo{background:linear-gradient(180deg,rgba(4,6,4,.5) 0%,rgba(4,6,4,0) 30%,rgba(4,6,4,0) 55%,rgba(4,6,4,.62) 100%)}
.hero__noche,.hero__oscurece{background:var(--ink);opacity:0}
.hero__luz{position:absolute;left:0;top:0;width:76vmin;height:76vmin;margin:-38vmin 0 0 -38vmin;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(230,233,236,.15),rgba(230,233,236,0));mix-blend-mode:screen}
.hero__card{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(40px,11vh,120px);width:min(420px,calc(100% - 2 * var(--gutter)))}
.hero__card-in{position:relative;padding:22px 22px 24px;background-color:rgba(4,6,4,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);display:grid;gap:12px}
.hero__h1{font:700 clamp(30px,3vw,40px)/.95 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--paper)}
.hero__h1 em{font-style:inherit;color:var(--brand)}
.hero__line{display:block;overflow:hidden;padding:.24em .16em .12em 0;margin:-.24em -.16em -.12em 0}   /* máscara con aire para la cursiva */
.hero__line-in{display:block}
.js .hero__line-in{transform:translateY(130%);animation:lineaRescate 0s 12s forwards}   /* oculto desde el primer pintado, solo con JS */
@keyframes lineaRescate{to{transform:none}}
.hero__p{color:var(--chrome);font-size:15px}
.hero__cta{position:relative;justify-self:start}
/* la traza del logo: del nodo rojo (el coche) al nodo amarillo (el botón) */
.camino{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:4;pointer-events:none;overflow:visible;visibility:hidden}
.camino.is-listo{visibility:visible}
.camino__traza{fill:none;stroke:var(--chrome);stroke-width:1.5;stroke-linejoin:miter}
.camino__pulso{fill:none;stroke:var(--paper);stroke-width:2.5;opacity:0}
.camino__rojo{fill:var(--red);stroke:var(--ink);stroke-width:2}
.camino__amarillo{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5}
.camino__halo{fill:none;stroke:var(--yellow);stroke-width:1.5;opacity:0}
.hero__desliza{display:none;position:absolute;z-index:3;left:var(--gutter);bottom:clamp(40px,11vh,120px);align-items:center;gap:12px;font:600 11px/1 var(--font-display);letter-spacing:.24em;text-transform:uppercase;color:var(--chrome-lo)}
.scrolly .hero__desliza{display:flex}
.hero__desliza i{position:relative;width:1px;height:44px;background:rgba(230,233,236,.25);overflow:hidden}
.hero__desliza i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--paper);animation:desliza 2.6s var(--ease-io) infinite}
@keyframes desliza{0%{transform:translateY(-110%)}65%,100%{transform:translateY(260%)}}

/* ====== 1b · CINTA DE MARCAS ====== */
.cinta{position:relative;background:var(--ink);border-block:1px solid var(--line-soft);padding-block:clamp(22px,3.2vw,38px)}
.cinta__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,22px)}
.cinta__head .tag{font-weight:600}
.marquee--logos{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee--logos .marquee__group{gap:10px;padding-right:10px}
.cinta__logo{position:relative;display:grid;place-items:center;width:clamp(100px,11vw,136px);height:clamp(66px,7vw,86px);background:var(--surface);border:1px solid var(--line-soft);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.cinta__logo img{width:auto;height:auto;max-width:58%;max-height:60%;object-fit:contain;opacity:.85;transition:opacity var(--t-hover) var(--ease),scale var(--t-hover) var(--ease)}
@media (hover:hover){
  .cinta__logo:hover{border-color:var(--chrome-lo);background:var(--surface-2)}
  .cinta__logo:hover img{opacity:1;scale:1.08}
}
@media (max-width:599px){.cinta__ir{display:none}}

/* ====== 2 · CIFRAS ====== */
.cifras__stick{display:grid;gap:40px;padding-block:var(--section-y)}
.cifras__txt{display:grid;gap:22px;align-content:start;justify-items:start}
.barras{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;height:min(62vh,520px);border-bottom:1px solid var(--ink-line)}
.barra{position:relative;height:100%;--g:1}
.barra::before{content:"";position:absolute;left:0;bottom:0;width:2px;height:calc(var(--h) * var(--g) * 100%);background:var(--ink)}
.barra::after{content:"";position:absolute;left:-3px;bottom:calc(var(--h) * var(--g) * 100% - 4px);width:8px;height:8px;background:var(--brand);box-shadow:0 0 0 2px var(--ink)}
.barra b,.barra>span{position:absolute;left:12px;top:calc(100% - var(--h) * var(--g) * 100%);display:block;padding-right:6px}
.barra b{font:700 clamp(24px,3vw,44px)/1 var(--font-display);font-style:italic;font-variant-numeric:tabular-nums;transform:translateY(calc(-100% - 8px))}
.barra>span{font:600 11px/1.25 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);max-width:14ch;transform:translateY(10px)}
@media (min-width:900px){.cifras__stick{grid-template-columns:1fr 1.1fr;align-items:center;min-height:100svh}}
@media (max-width:899px){
  .cifras__stick{gap:24px;padding-bottom:110px}
  .barras{height:clamp(200px,calc(100svh - 430px),340px)}
  .barra b{font-size:24px;left:9px}
  .barra>span{font-size:9.5px;letter-spacing:.06em;max-width:calc(100% - 14px);left:9px}
  .js .cifras__txt>div:last-child{display:none}          /* en móvil el botón ya está en la barra fija de abajo */
}

/* ====== 3 · LO QUE MEJORAMOS ====== */
.mejoras__stick{display:grid;overflow:hidden}
.mejoras__txt{display:flex;align-items:center}
.mejoras__in{width:100%;max-width:560px;margin-inline:auto;padding:28px var(--gutter);display:grid;gap:20px}
.mej-slides{display:grid}
.mej{grid-area:1/1;display:grid;gap:14px;align-content:start}
.mej .big{font-size:clamp(32px,4.2vw,60px)}
.mej p{color:var(--ink-2);max-width:44ch}
.mej .btn{justify-self:start}
.medidor{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;background:var(--paper);border:1px solid var(--ink-line)}
.medidor>div{padding:12px 14px;min-width:0}
.medidor>div+div{border-left:1px solid var(--ink-line)}
.medidor__dato b{display:block;font:700 clamp(26px,3vw,40px)/1 var(--font-display);font-style:italic;font-variant-numeric:tabular-nums}
.medidor__dato span{font:600 11px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.medidor__dato--rpm{display:none}                        /* solo en pantallas bajas, cuando no cabe el dial */
.medidor .dial{width:100%;height:auto;overflow:visible}
.dial__track{fill:none;stroke:var(--ink);stroke-opacity:.18;stroke-width:6}
.dial__zona{fill:none;stroke:var(--brand);stroke-width:8}
.dial__fill{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:.08;opacity:.4}
.tk{stroke:var(--ink);stroke-opacity:.4}
.tk--fin{stroke:var(--brand-deep);stroke-opacity:1}
.tk.is-on{stroke-opacity:1}
.lb{font:600 20px/1 var(--font-display);fill:var(--ink-2);text-anchor:middle}
.lb--fin{fill:var(--brand-deep)}
.needle polygon{fill:var(--ink);transition:fill .25s var(--ease)}
.needle.is-red polygon,html:not(.scrolly) .needle polygon{fill:var(--red)}   /* roja a partir de 5.000 r/min */
.dial__hub{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.dial__limit{fill:var(--red)}
.dial__rpm{font:700 italic 52px/1 var(--font-display);fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
.dial__unit{font:600 16px/1 var(--font-display);letter-spacing:.2em;fill:var(--ink-2);text-anchor:middle;text-transform:uppercase}
.mejoras__img{position:relative;background:var(--ink);overflow:hidden;display:flex;align-items:center}
.vistas{position:relative;width:100%;aspect-ratio:16/9;max-height:100%}
.vista{position:absolute;inset:0}
/* cada vista va en un lienzo 16:9 ampliado según lo que ocupa el coche; la etiqueta vive dentro y sigue al coche */
.vista__lienzo{position:absolute;left:0;top:50%;width:100%;aspect-ratio:16/9;translate:0 -50%;transform:scale(var(--z,1))}
.vista__lienzo img{width:100%;height:100%;object-fit:cover}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2;scale:calc(1 / var(--z,1))}
.pin__nodo{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(184,248,8,.25)}
.pin__traza{position:absolute;left:-2px;bottom:-2px;width:46px;height:30px;max-width:none;overflow:visible}
.pin__traza path{fill:none;stroke:var(--chrome);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.pin__txt{position:absolute;left:44px;top:-20px;translate:0 -50%;padding:7px 11px;font:600 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:rgba(4,6,4,.8);border:1px solid rgba(230,233,236,.35);white-space:nowrap}
.pin--izq .pin__traza{left:auto;right:-2px;transform:scaleX(-1)}
.pin--izq .pin__txt{left:auto;right:44px}
.rail{display:none}
@media (min-width:900px){.mejoras__stick{grid-template-columns:1fr 1.25fr}}

/* Cuentarrevoluciones en zona roja (más de 5.000 r/min): todo rojo y parpadeando */
.medidor.is-red .tk,.medidor.is-red .tk--fin{stroke:var(--red);stroke-opacity:1}
.medidor.is-red .lb,.medidor.is-red .lb--fin,.medidor.is-red .dial__rpm,.medidor.is-red .dial__unit{fill:var(--red)}
.medidor.is-red .dial__track,.medidor.is-red .dial__zona,.medidor.is-red .dial__fill{stroke:var(--red);stroke-opacity:1;opacity:1}
.medidor.is-red .dial__hub{stroke:var(--red)}
.medidor.is-red{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.medidor.is-red .medidor__dial,.medidor.is-red .medidor__dato--rpm b{animation:zonaRoja .5s steps(1,end) infinite}
.medidor.is-red .medidor__dato--rpm b{color:var(--red)}
@keyframes zonaRoja{0%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,8,6,.75))}50%{opacity:.3;filter:none}}

/* ====== 4 · SERVICIOS (pista horizontal) ====== */
.servicios{--card-w:min(300px,78vw);background:var(--ink);overflow-x:clip}
.servicios__stick{display:flex;flex-direction:column;justify-content:center;gap:30px;padding-block:var(--section-y)}
.servicios__head{display:grid;gap:14px;justify-items:start}
.serv__prog{display:none;align-items:center;gap:14px;font:600 11px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-lo)}
.serv__linea{position:relative;flex:none;width:clamp(72px,22vw,280px);height:2px;background:var(--line)}
.serv__linea i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.pista{overflow-x:auto;scrollbar-width:thin}
.pista__in{display:flex;gap:16px;padding-inline:var(--gutter);width:max-content}
.card{--edge:var(--line);position:relative;width:var(--card-w);flex:none;background-color:var(--surface);border:1px solid var(--line-soft);display:flex;flex-direction:column;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.card__foto{aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
.card__foto img{width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease),scale .9s var(--ease)}
.card__txt{padding:16px 18px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__txt p{color:var(--muted);font-size:15px;flex:1}
.card__txt .link{align-self:flex-start}
.card h3{font:700 min(21px,calc(var(--card-w) * .074))/1.05 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--paper)}
.card--otro{background-color:var(--paper);justify-content:center}
.card--otro h3{color:var(--ink)}.card--otro p{color:var(--ink-2);flex:none}.card--otro .tag{color:var(--ink-2)}
.card--otro .card__txt{flex:none}
.card--otro .link{color:var(--ink);border-color:var(--ink-line)}

/* ====== 4b · CALCULADORA ====== */
.calc__form{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:16px}
.calc__form .campo{grid-column:auto}
.calc__form .campo:first-child{grid-column:1/-1}
.calc__form select:disabled{opacity:.5;cursor:not-allowed}
/* traza de avance: un nodo por dato elegido; el último, amarillo */
.calc__traza{--k:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:12px;margin-bottom:10px}
.calc__traza::before{content:"";position:absolute;left:0;top:5px;width:calc((100% + 12px) * .8);height:2px;background:var(--ink-line)}
.calc__traza i{position:absolute;left:0;top:5px;width:calc((100% + 12px) * .8);height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(calc(var(--k) / 4));transition:transform .6s var(--ease-io)}
.calc__traza b{position:relative;z-index:1;justify-self:start;width:12px;height:12px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--chrome-lo);transition:background-color .3s var(--ease) .25s,box-shadow .3s var(--ease) .25s,scale .5s var(--ease-pop) .25s}
.calc__traza b.is-on{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.calc__traza b:first-of-type.is-on{background:var(--red)}
.calc__traza b:last-of-type.is-on{background:var(--yellow);scale:1.35}
@media (min-width:900px){.calc__form{grid-template-columns:repeat(5,1fr)}.calc__form .campo:first-child{grid-column:auto}}
.calc__res{background:var(--ink);color:var(--text);min-height:240px;position:relative;overflow:hidden;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.calc__vacio{padding:34px 26px;display:grid;gap:12px;align-content:center;min-height:240px}
.calc__vacio-t{font:700 clamp(20px,2.4vw,30px)/1.1 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--chrome);max-width:28ch}
.ficha{display:grid;gap:0}
.ficha>div{padding:24px 22px;min-width:0}
.ficha>div+div{border-top:1px solid var(--line-soft)}
.ficha__coche h3{font:700 clamp(26px,3vw,40px)/1 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--paper);margin:10px 0 6px}
.ficha__sub{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.chips li{font:600 11px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line);color:var(--chrome)}
.chips li b{color:var(--paper);font-weight:700;margin-left:4px}
.ganancia{display:grid;gap:14px;align-content:center;justify-items:center}
.reloj{width:min(100%,280px)}
.reloj__svg{width:100%;height:auto;overflow:visible}
.reloj__pista{fill:none;stroke:var(--surface-2);stroke-width:12}
.reloj__serie{fill:none;stroke:var(--chrome-lo);stroke-width:12}
.reloj__s1{fill:none;stroke:var(--brand);stroke-width:12}
.reloj__marcas line{stroke:var(--chrome-lo);stroke-opacity:.5;stroke-width:1.5}
.reloj__aguja polygon{fill:var(--paper)}
.reloj__eje{fill:var(--ink);stroke:var(--paper);stroke-width:2.5}
.reloj__n{font:700 italic 44px/1 var(--font-display);fill:var(--paper);text-anchor:middle;font-variant-numeric:tabular-nums}
.reloj__u{font:600 11px/1 var(--font-display);letter-spacing:.2em;fill:var(--muted);text-anchor:middle;text-transform:uppercase}
.mas{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;width:100%}
.mas li{display:grid;gap:3px;padding-top:10px;border-top:1px solid var(--line-soft)}
.mas span{font:600 11px/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mas b{font:700 clamp(22px,2.4vw,30px)/1 var(--font-display);font-style:italic;color:var(--paper);font-variant-numeric:tabular-nums}
.mas .mas--g b{color:var(--brand)}
.ficha__precio{display:grid;gap:12px;align-content:center;justify-items:start;background:var(--surface)}
.precio-n{font:700 clamp(46px,5.4vw,76px)/.9 var(--font-display);font-style:italic;color:var(--paper);font-variant-numeric:tabular-nums}
.precio-n small{font-size:.45em;margin-left:4px;color:var(--chrome)}
.precio-n--txt{font-size:34px}
.calc__nota{margin-top:14px;font-size:13px;color:var(--ink-2);max-width:80ch}
.calc__nota a{color:var(--ink)}
html:not(.js) .calc__traza,html:not(.js) .calc__form,html:not(.js) .calc__res{display:none}   /* sin JS no hay calculadora: queda la nota con el enlace */
noscript .calc__nota{font-size:16px;margin:0 0 14px}
@media (min-width:900px){.ficha{grid-template-columns:1.15fr 1.2fr .9fr}.ficha>div+div{border-top:0;border-left:1px solid var(--line-soft)}}
.ficha.is-nueva>div{animation:fichaIn var(--dur) var(--ease) backwards}
.ficha.is-nueva>div:nth-child(2){animation-delay:.07s}
.ficha.is-nueva>div:nth-child(3){animation-delay:.14s}
@keyframes fichaIn{from{opacity:0;transform:translateY(16px)}}

/* logos de las marcas (fichas oscuras: el cromado de los logos luce mejor) */
.logos{margin-bottom:20px;display:grid;gap:12px}
.logos__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.logos__buscar{flex:1 1 220px;max-width:340px}
.logos__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;width:100%;max-height:212px;overflow:hidden;transition:max-height .7s var(--ease-io)}
.logos.is-open .logos__grid,.logos.is-buscando .logos__grid{max-height:none}
.logo-m{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:6px;height:102px;min-width:0;padding:12px 6px 10px;background:var(--ink);border:1px solid transparent;cursor:pointer;color:var(--chrome);transition:border-color var(--t-hover) var(--ease),translate var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.logo-m[hidden]{display:none}
.logo-m img{width:auto;height:auto;max-width:78%;max-height:52px;object-fit:contain}
.logo-m span{font:600 10px/1.1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.logo-m:hover{border-color:var(--chrome-lo);translate:0 -2px}}
.logo-m[aria-pressed="true"]{border-color:var(--brand);background:var(--surface-2)}
.logo-m[aria-pressed="true"] span{color:var(--brand)}
.logo-m:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.logos__nada{font-size:15px;color:var(--ink-2)}
.ficha__marca{display:flex;align-items:center;gap:12px}
.ficha__marca img{width:52px;height:52px;object-fit:contain}
@media (max-width:599px){.logos__grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:200px}.logo-m{height:96px;padding:10px 4px 8px}.logo-m img{max-height:44px}.logos__buscar{max-width:none}}

/* ====== 5-7 · SECCIONES CLARAS ====== */
.sec{padding-block:var(--section-y)}
.sec__head{display:grid;gap:14px;margin-bottom:40px;justify-items:start}
/* pasos: la traza del logo avanza de nodo en nodo; empieza en rojo y llega al amarillo */
.pasos{list-style:none;display:grid}
.paso{position:relative;display:grid;gap:8px;align-content:start;padding:0 0 30px 32px}
.paso__nodo{position:absolute;z-index:1;left:0;top:1px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper);transition:background-color .3s var(--ease),scale .5s var(--ease)}
.paso:first-child .paso__nodo{background:var(--red)}
.paso--fin .paso__nodo{background:var(--yellow);box-shadow:0 0 0 2px var(--ink),0 0 0 6px var(--paper);transition-timing-function:var(--ease),var(--ease-pop)}
.paso::before,.paso::after{content:"";position:absolute;left:5px;top:7px;bottom:-7px;width:2px}
.paso::before{background:var(--ink-line)}
.paso::after{background:var(--ink);transform-origin:50% 0;transition:transform .7s var(--ease-io)}
.paso:last-child::before,.paso:last-child::after{display:none}
.paso__n{font:700 15px/1 var(--font-display);letter-spacing:.18em;color:var(--ink-2)}
.paso h3{font:700 clamp(22px,2.2vw,28px)/1.05 var(--font-display);font-style:italic;text-transform:uppercase}
.paso p{color:var(--ink-2);max-width:36ch}
@media (min-width:860px){
  .pasos{grid-template-columns:repeat(4,1fr)}
  .paso{padding:36px 24px 0 0}
  .paso__nodo{top:0}
  .paso::before,.paso::after{left:6px;right:-6px;top:5px;bottom:auto;width:auto;height:2px}
  .paso::after{transform-origin:0 50%}
}
/* con animación: cada nodo se enciende cuando la traza llega a él */
.scrolly .paso:not(.is-on) .paso__nodo{background:var(--paper);scale:.7;box-shadow:0 0 0 2px var(--chrome-lo),0 0 0 6px var(--paper)}
.scrolly .paso.is-on .paso__nodo{transition-delay:.5s}
.scrolly .paso:first-child.is-on .paso__nodo{transition-delay:0s}
.scrolly .paso:not(.is-sal)::after{transform:scaleY(0)}
@media (min-width:860px){.scrolly .paso:not(.is-sal)::after{transform:scaleX(0)}}

.garantias{display:grid;gap:14px}
.gar{position:relative;padding:24px;background:var(--paper);display:grid;gap:8px;align-content:start}
.gar::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
@media (hover:hover){.gar:hover::before{transform:scaleX(1)}}
.gar h3{font:700 20px/1.1 var(--font-display);font-style:italic;text-transform:uppercase}
.gar p{color:var(--ink-2)}
.gar .link{justify-self:start}
.gar--big{background:var(--ink);color:var(--text)}
.gar--big::before{background:var(--brand)}
.gar--big p{color:var(--muted)}
.gar__n{font:700 clamp(80px,14vw,140px)/.85 var(--font-display);font-style:italic;color:var(--brand)}
@media (min-width:700px){.garantias{grid-template-columns:1fr 1fr}.gar--big{grid-row:span 2}}
@media (min-width:700px){.gar--ancha{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px}.gar--ancha h3,.gar--ancha p{grid-column:1}.gar--ancha .link{grid-column:2;grid-row:1/span 2}}
@media (min-width:1000px){.garantias{grid-template-columns:repeat(3,1fr)}}

/* preguntas: acordeón (sin JS las respuestas quedan abiertas) */
.faq-wrap{display:grid;gap:10px}
@media (min-width:960px){.faq-wrap{grid-template-columns:1fr 1.4fr;column-gap:clamp(32px,5vw,80px);align-items:start}.faq-wrap .sec__head{position:sticky;top:110px}.faq-wrap .big{font-size:clamp(38px,4.6vw,68px)}}
.faq{display:grid;border-top:2px solid var(--ink)}
.qa{border-bottom:1px solid var(--ink-line)}
.qa h3{font:inherit}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;min-height:64px;text-align:left;background:none;border:0;color:inherit;cursor:pointer;
  font:700 clamp(17px,1.8vw,21px)/1.2 var(--font-display);font-style:italic;text-transform:uppercase}
.qa__icon{position:relative;flex:none;width:36px;height:30px;background:var(--paper-2);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background-color var(--t-hover) var(--ease)}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .5s var(--ease),background-color var(--t-hover) var(--ease)}
.qa__icon::after{transform:rotate(90deg)}
.qa.is-open .qa__icon{background:var(--ink)}
.qa.is-open .qa__icon::before,.qa.is-open .qa__icon::after{background:var(--brand)}
.qa.is-open .qa__icon::after{transform:rotate(0deg)}     /* el + se vuelve - */
html:not(.js) .qa__icon{display:none}
.qa__a{display:grid;grid-template-rows:1fr}
.js .qa__a{grid-template-rows:0fr}
.js .qa.is-open .qa__a{grid-template-rows:1fr}
.qa-listo .qa__a{transition:grid-template-rows .55s var(--ease)}   /* se enciende cuando el JS ya cerró las respuestas */
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 0 22px;color:var(--ink-2);max-width:62ch}
.qa__a a{color:var(--ink);text-underline-offset:3px}

/* ====== 8 · CONTACTO ====== */
.contacto{display:grid;gap:36px}
.contacto .big{margin:14px 0}
.datos-c{list-style:none;display:grid;gap:8px;margin-top:24px;color:var(--muted)}
.datos-c b{display:block;font:600 12px/1.3 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--chrome)}
.datos-c a{display:inline-flex;align-items:center;min-height:44px;color:var(--chrome);text-underline-offset:4px}
.datos-c a:hover{color:var(--brand)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:24px 20px;background:var(--paper);color:var(--ink)}
.campo{grid-column:1/-1;display:grid;gap:6px}
.campo--mitad{grid-column:span 1}
label{font:600 12px/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
input,select,textarea{font:400 16px/1.4 var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--ink-line);border-bottom:2px solid var(--ink);padding:12px 14px;min-height:48px;width:100%;border-radius:0;transition:border-color .2s;color-scheme:light}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(-45deg,transparent 50%,var(--ink) 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:.85}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);border-bottom-color:var(--brand-deep)}
input[aria-invalid="true"]{border-color:var(--red)}
.err{color:var(--error);font-size:14px}
.form .btn{grid-column:1/-1;width:100%}
.form__nota,.form__abrir{grid-column:1/-1;font-size:13px;color:var(--ink-2)}
.form__abrir{font-size:15px;color:var(--ink)}
.form__nota a,.form__abrir a{color:var(--ink)}
@media (min-width:860px){.contacto{grid-template-columns:1fr 1.1fr;align-items:start}.form{padding:30px}}

/* ====== 9 · PIE ====== */
.foot{position:relative;overflow:hidden;overflow:clip;padding-top:clamp(150px,27vw,380px)}
.foot__img{position:absolute;inset:0 0 auto 0;height:clamp(260px,44vw,620px);overflow:hidden}
.foot__img img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 60%}   /* más alta que su marco: se mueve sin enseñar bordes */
.foot__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,4,.1),var(--ink) 92%)}
.foot__cierre{position:relative;z-index:2;display:grid;gap:22px;justify-items:start;padding-bottom:clamp(36px,6vw,72px)}
.foot__frase{font:700 clamp(34px,6.4vw,92px)/.95 var(--font-display);font-style:italic;text-transform:uppercase;color:var(--paper);max-width:13ch;text-wrap:balance}
.foot__in{position:relative;z-index:2;display:grid;gap:18px;padding-block:20px;border-top:1px solid var(--line-soft)}
.foot__logo{height:30px;width:auto}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px 22px}
.foot ul a{display:inline-block;padding:16px 0;text-underline-offset:4px;font:600 13px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.foot ul a:hover{color:var(--brand)}
.foot small{color:var(--muted);font-size:13px}
.marquee--nombre{position:relative;z-index:2;margin-top:10px;overflow:hidden;pointer-events:none;white-space:nowrap;padding-block:.05em .1em;
  font:700 clamp(84px,17vw,320px)/.82 var(--font-display);font-style:italic;text-transform:uppercase;letter-spacing:-.01em;color:var(--paper)}
.marquee--nombre .marquee__group{gap:.3em;padding-right:.3em}
.marquee--nombre b{font-weight:inherit;color:transparent;-webkit-text-stroke:1.5px var(--chrome-lo)}   /* "Performant" en contorno: menos verde, más cromo */
.marquee__sep{flex:none;width:.2em;height:.2em;background:var(--brand);transform:skewX(var(--slant))}
.legal{position:relative;z-index:2;display:grid;gap:8px;padding-block:20px 36px}
.legal details{border:1px solid var(--line-soft);background:var(--surface)}
.legal summary{cursor:pointer;list-style:none;font:600 13px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;min-height:48px;padding:16px;display:flex;align-items:center}
.legal summary::-webkit-details-marker{display:none}
.legal .resp{padding:0 16px 18px;font-size:14px;color:var(--muted);display:grid;gap:10px;max-width:72ch}
.legal .resp h3{margin-top:8px;font:600 12px/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--chrome)}
.legal .resp ul{display:grid;gap:4px;padding-left:18px}
.legal .resp a{color:var(--chrome)}
.legal .resp code{font-size:.92em;color:var(--chrome)}
.legal__fecha{font-size:12px}
@media (min-width:860px){.foot__in{grid-template-columns:auto 1fr auto;align-items:center}.foot ul{justify-content:center}.legal{grid-template-columns:repeat(3,1fr);align-items:start}.legal details[open]{grid-column:1/-1}}

/* Barra fija en móvil: aparece al pasar la portada y se esconde en el contacto y el pie */
.barra-m{display:none}
@media (max-width:899px){
  .js .barra-m{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + var(--safe-b));background:linear-gradient(180deg,rgba(4,6,4,0),rgba(4,6,4,.94) 40%);transform:translateY(120%);transition:transform .6s var(--ease)}
  .js .barra-m.is-on{transform:none}
  .barra-m .btn{width:100%}
}

/* ====== MODO SCROLL (JS, GSAP y sin "reducir movimiento"): escenas fijas ====== */
@media (min-width:700px) and (min-aspect-ratio:13/10){
  .scrolly .hero{height:170vh;height:170svh}
  .scrolly .hero__stick{position:sticky;top:0}
}
.scrolly .cifras{height:170vh;height:170svh}
.scrolly .cifras__stick{position:sticky;top:0;min-height:100vh;min-height:100svh;align-content:center;padding-block:clamp(72px,10vh,140px)}
.scrolly .mejoras{height:520vh;height:520svh}
.scrolly .mejoras__stick{position:sticky;top:0;height:100vh;height:100svh}
.scrolly .mej{opacity:0;visibility:hidden;transform:translate3d(0,26px,0);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .4s}
.scrolly .mej.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .22s,transform var(--dur) var(--ease) .22s,visibility 0s .22s}
/* la vista se oscurece y sale la siguiente; el coche no se mueve */
.scrolly .vista{opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .45s var(--ease),transform 0s .45s,visibility 0s .45s}
.scrolly .vista.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--ease) .3s,transform 1.6s var(--ease) .3s,visibility 0s .3s}
.scrolly .pin__nodo{scale:0;transition:scale .5s var(--ease)}
.scrolly .pin__traza path{stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease-io)}
.scrolly .pin__txt{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .4s var(--ease),clip-path .6s var(--ease)}
.scrolly .pin--izq .pin__txt{clip-path:inset(0 0 0 100%)}
.scrolly .vista.is-on .pin__nodo{scale:1;transition-delay:.8s}
.scrolly .vista.is-on .pin__traza path{stroke-dashoffset:0;transition-delay:.95s}
.scrolly .vista.is-on .pin__txt{opacity:1;clip-path:inset(0 0 0 0);transition-delay:1.2s}
/* carril de pasos de "Lo que mejoramos": marcas de cuentarrevoluciones que se pueden pulsar */
.scrolly .rail{display:flex;position:absolute;z-index:3;left:50%;bottom:10px;translate:-50% 0;list-style:none}
.rail__b{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.rail__b i{display:block;width:2px;height:24px;background:var(--chrome-lo);transform:skewX(var(--slant)) scaleY(.5);transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
@media (hover:hover){.rail__b:hover i{background:var(--paper)}}
.rail__b[aria-current="step"] i{background:var(--brand);transform:skewX(var(--slant)) scaleY(1)}
/* servicios: las tarjetas pasan en horizontal; su tamaño se ajusta al alto de la pantalla */
.scrolly .servicios{--card-w:clamp(190px,calc(100vh - 540px),300px)}
@supports (height:100svh){.scrolly .servicios{--card-w:clamp(190px,calc(100svh - 540px),300px)}}
.scrolly .servicios__stick{position:sticky;top:0;height:100vh;height:100svh;padding-block:80px 30px;overflow:hidden;justify-content:safe center}
.scrolly .serv__prog{display:flex}
.scrolly .pista__in{will-change:transform;backface-visibility:hidden}
.scrolly .pista{overflow:visible;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.scrolly .pista.is-drag{cursor:grabbing}
.scrolly .pista.is-drag a{pointer-events:none}
.scrolly .pista img{-webkit-user-drag:none;pointer-events:none}
.scrolly .card:not(.card--otro) .card__foto img{filter:grayscale(1) brightness(.75)}
.scrolly .card.is-on{border-color:var(--brand)}
.scrolly .card.is-on .card__foto img{filter:none;scale:1.03}
@media (hover:hover){.scrolly .card:hover .card__foto img{filter:none}}
@media (max-width:899px){
  .scrolly .mejoras__stick{grid-template-rows:44% 56%}
  .scrolly .mejoras__txt{order:2;align-items:flex-start}
  .scrolly .mejoras__in{padding-top:18px;gap:14px}
  .scrolly .mej p{font-size:15px}
  .scrolly .medidor>div{padding:8px 10px}
}
/* Sin animación: todo visible y en orden */
html:not(.scrolly) .mej+.mej{margin-top:34px}
html:not(.scrolly) .mej{grid-area:auto}
html:not(.scrolly) .vistas{aspect-ratio:auto;display:grid;gap:2px}
html:not(.scrolly) .vista{position:relative;aspect-ratio:16/9;overflow:hidden}
html:not(.scrolly) .paso-n{display:none}

/* ====== PORTADA APILADA: móviles y pantallas más altas que anchas (iPad en vertical) ======
   El coche entero arriba, la tarjeta debajo y la traza baja de uno a otra. El ancho de la foto
   se ajusta para que el coche quepa a lo ancho y no pise la tarjeta. */
@media (max-width:699px),(max-aspect-ratio:13/10){
  .hero__img{--w:max(240px,min(132vw,calc((100vh - 432px) / .382)));left:calc(50% - var(--w) / 2);top:calc(70px + var(--safe-t) - var(--w) * .068)}
  .hero__img-in{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%)}
  .hero__velo{background:linear-gradient(180deg,rgba(4,6,4,.35),rgba(4,6,4,0) 24%)}
  .hero__card{left:var(--gutter);right:auto;width:min(440px,calc(100% - 2 * var(--gutter)));bottom:calc(92px + var(--safe-b))}
  .hero__desliza{left:50%;translate:-50% 0;bottom:calc(20px + var(--safe-b))}
  .hero__desliza i{height:30px}
}
@supports (height:100svh){@media (max-width:699px),(max-aspect-ratio:13/10){.hero__img{--w:max(240px,min(132vw,calc((100svh - 432px) / .382)))}}}

/* ====== AJUSTES DE MÓVIL: coches y textos enteros ====== */
@media (max-width:699px){
  .big{font-size:clamp(26px,8.4vw,44px)}
  .mej .big{font-size:clamp(24px,7.6vw,36px)}
  .hero__h1{font-size:clamp(24px,7.4vw,34px)}
  .logo img{height:26px}
  .grid-lines i:nth-child(odd){display:none}
  .hero__card{right:var(--gutter);width:auto}
  .hero__card-in{padding:18px}
  /* lo que mejoramos: cada vista entera */
  .vista__lienzo{transform:scale(var(--zm,1));transform-origin:50% 61%}   /* 61 %: centro vertical del coche en la foto */
  .vista[data-step="0"]{--zm:1.3}.vista[data-step="1"]{--zm:1.1}.vista[data-step="2"]{--zm:1.75}.vista[data-step="3"]{--zm:1.45}.vista[data-step="4"]{--zm:1.75}
  .pin{scale:calc(1 / var(--zm,1))}
  .pin__txt{font-size:10px;padding:6px 9px}
  .scrolly .mejoras{height:430vh;height:430svh}
  .scrolly .mejoras__stick{grid-template-rows:auto 1fr}
  .scrolly .mejoras__img{padding-top:calc(62px + var(--safe-t))}
  .scrolly .vistas{aspect-ratio:16/10}
  .scrolly .mejoras__in{padding-bottom:96px;gap:10px}
  .scrolly .rail{bottom:0}
  .medidor{grid-template-columns:1fr 1fr 1fr}
  .medidor__dato b{font-size:22px}
  .medidor__dato span{font-size:9.5px}
  .mej p{font-size:14.5px}
  /* servicios: título por debajo de la cabecera y tarjetas por encima de la barra fija */
  .servicios{--card-w:min(270px,74vw)}
  .scrolly .servicios{--card-w:clamp(190px,calc(100vh - 450px),min(270px,74vw))}
  .scrolly .servicios__stick{padding-block:calc(76px + var(--safe-t)) calc(86px + var(--safe-b));gap:16px}
  .scrolly .servicios__head{gap:10px}
  .card__txt{padding:14px 14px 10px}
  .card__txt p{font-size:14.5px}
  .barra-m .btn{font-size:14px;padding:0 16px}
  .foot{padding-bottom:calc(84px + var(--safe-b))}        /* que la barra fija no tape lo último */
}
@supports (height:100svh){@media (max-width:699px){.scrolly .servicios{--card-w:clamp(190px,calc(100svh - 450px),min(270px,74vw))}}}
@media (max-width:699px) and (max-height:779px){.scrolly .servicios__head .lead{display:none}}
@media (min-width:700px) and (max-height:719px){.scrolly .servicios__head .lead{display:none}}
@media (max-width:359px){
  .hero__cta .btn{font-size:13px;padding:0 18px;letter-spacing:.02em}
  .big{font-size:clamp(23px,8vw,30px)}
  .mej .big{font-size:22px}
  .pin__txt{font-size:9px;padding:5px 8px}
  .scrolly .mej p{font-size:13.5px}
}
/* móviles bajos: no cabe el dial; queda el número de vueltas, que también se pone rojo y parpadea */
@media (max-width:699px) and (max-height:739px){
  .hero__p{display:none}
  .scrolly .vistas{aspect-ratio:16/9}
  .scrolly .mejoras__in{padding-bottom:88px;gap:8px}
  .scrolly .medidor{grid-template-columns:1fr 1fr}
  .scrolly .medidor__dial,.scrolly .medidor>div:last-child{display:none}
  .scrolly .medidor__dato--rpm{display:block;border-left:0}
}

/* ====== MENOS MOVIMIENTO ====== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .preloader{display:none}
  .js .hero__line-in{transform:none}
  .medidor.is-red .medidor__dial,.medidor.is-red .medidor__dato--rpm b{animation:none}
  .hero__desliza i::after{animation:none}
}