/* ============================================================
   VANTERA MOTORS — demo estática para portfolio
   HTML + CSS + JS vanilla. Sin frameworks, sin build.

   Índice
   00 Tipografía · 01 Variables · 02 Reset · 03 Utilidades
   04 Header · 05 Hero + stats · 06 Categorías · 07 Destacados
   08 Calidad · 09 Testimonios + newsletter · 10 Servicios
   11 Noticias · 12 CTA final · 13 Footer · 14 Responsive
   ============================================================ */

/* ---------- 00 Tipografía (auto-hospedada) ---------- */
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/jakarta-700.woff2') format('woff2'); }
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/jakarta-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/inter-500.woff2') format('woff2'); }

/* ---------- 01 Variables ---------- */
:root {
  /* Muestreados de la referencia */
  --navy: #05131E;
  --navy-alt: #0A1A29;
  --violeta: #5B62F2;
  --violeta-osc: #454CE0;
  --violeta-claro: #EEF0FE;
  --claro: #F5F8FC;
  --blanco: #FFFFFF;
  --tinta: #0D1724;
  --gris: #64748B;
  --gris-claro: #94A3B8;
  --linea: #E4E9F2;
  --linea-osc: rgba(255, 255, 255, .12);

  --ff-head: 'Jakarta', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --edge: 5%;              /* medido sobre la referencia: 33px sobre 679 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --sombra: 0 1px 2px rgba(13, 23, 36, .04), 0 12px 28px rgba(13, 23, 36, .08);
  --section-y: clamp(52px, 5.8vw, 92px);
}

/* ---------- 02 Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font-family: var(--ff-body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
input { font: inherit; }
h1, h2, h3 { font-family: var(--ff-head); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 99; background: var(--violeta); color: #fff; padding: 10px 18px; border-radius: 999px; }
.skip-link:focus { left: 12px; }

/* ---------- 03 Utilidades ---------- */
.container { padding-inline: var(--edge); }
.section { padding-block: var(--section-y); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 60px); margin-bottom: clamp(26px, 3vw, 42px); }
.section__head--fila { align-items: center; }
.section__head--centro { justify-content: center; text-align: center; }
.section__titulo { font-size: clamp(28px, 2.9vw, 42px); }
.section__titulo em { font-style: normal; color: var(--violeta); }
.section__titulo--claro { color: #fff; }
.section__titulo--claro em { color: #8C92FF; }
.section__lead { margin-top: 12px; max-width: 54ch; color: var(--gris); font-size: clamp(14.5px, 1.1vw, 16px); }
.section__cta { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

.eyebrow {
  display: block; margin-bottom: 10px;
  font-family: var(--ff-head); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--violeta);
}
.eyebrow--claro { color: #8C92FF; }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--md { width: 24px; height: 24px; }
.icon--quote { width: 40px; height: 40px; color: rgba(140, 146, 255, .55); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 15px 18px 15px 26px; border-radius: 999px;
  font-family: var(--ff-head); font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.btn__flecha { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform .2s; }
.btn__flecha .icon { width: 14px; height: 14px; }
.btn:hover .btn__flecha { transform: translateX(3px); }
.btn--violeta { background: var(--violeta); color: #fff; }
.btn--violeta:hover { background: var(--violeta-osc); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(91, 98, 242, .35); }
.btn--oscuro { background: var(--navy); color: #fff; }
.btn--oscuro:hover { background: #020A12; }
.btn--fantasma { border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; padding: 9px 24px 9px 9px; }
.btn--fantasma:hover { background: rgba(255, 255, 255, .1); }
.btn__play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--navy); }
.btn__play .icon { width: 13px; height: 13px; }
.btn--sm { padding: 10px 12px 10px 18px; font-size: 13.5px; }
.btn--sm .btn__flecha { width: 22px; height: 22px; }
.btn--sm .btn__flecha .icon { width: 12px; height: 12px; }

.link-flecha { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-head); font-size: 14.5px; font-weight: 700; color: var(--violeta); }
.link-flecha .icon { width: 15px; height: 15px; transition: transform .2s; }
.link-flecha:hover .icon { transform: translateX(3px); }
.link-flecha--claro { color: #fff; }
.link-flecha--sm { font-size: 12.5px; color: var(--gris); }
.link-flecha--sm .icon { width: 13px; height: 13px; }

.flecha { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--linea); color: var(--tinta); background: var(--blanco); transition: background-color .2s, color .2s, border-color .2s; }
.flecha:hover { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.flecha .icon { width: 17px; height: 17px; }
.carrusel__flechas { display: flex; gap: 10px; flex: none; }
.flecha[disabled] { opacity: .38; cursor: default; }
.flecha[disabled]:hover { background: var(--blanco); border-color: var(--linea); color: var(--tinta); }
.carrusel__flechas--claras .flecha[disabled]:hover { background: rgba(255, 255, 255, .1); border-color: var(--linea-osc); color: #fff; }
.carrusel__flechas--claras .flecha { background: rgba(255, 255, 255, .1); border-color: var(--linea-osc); color: #fff; }
.carrusel__flechas--claras .flecha:hover { background: var(--violeta); border-color: var(--violeta); }

.chip { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; }
.chip--violeta { background: var(--violeta-claro); color: var(--violeta); }
.chip--azul { background: #E7EEFE; color: #2E6BE6; }
.chip--verde { background: #E3F7EA; color: #17A44B; }
.chip--naranja { background: #FEF0E2; color: #E08322; }
.chip--agua { background: #E0F6F5; color: #14A6A0; }

.estrellas { display: inline-flex; gap: 2px; color: #F5B33C; }
.estrellas .icon { width: 14px; height: 14px; }
.avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--violeta); color: #fff; font-family: var(--ff-head); font-size: 15px; font-weight: 700; }

.badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 13px; border-radius: 999px; font-family: var(--ff-head); font-size: 12px; font-weight: 700; color: #fff; }
.badge--violeta { background: var(--violeta); }
.badge--verde { background: #17A44B; }
.badge--naranja { background: #E08322; }

/* ---------- 04 Header ---------- */
.site-header { position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 38px); padding-block: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: #fff; }
.logo__mark { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; color: var(--violeta); }
.logo__text { font-family: var(--ff-head); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); margin-inline: auto; }
.nav__link { position: relative; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .72); padding-block: 6px; transition: color .2s; }
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--violeta); border-radius: 2px; }
.site-header__acciones { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; transition: background-color .2s; }
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.icon-btn--menu { display: none; }
.icon-btn--menu .icon-close { display: none; }

/* ---------- 05 Hero + stats ---------- */
/* La foto no trae nada quemado; la zona navy limpia llega al 45%. */
.hero { position: relative; isolation: isolate; background: var(--navy); color: #fff; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* La zona navy limpia de la foto llega al 45%, pero al recortar por `cover`
   se corre segun el ancho del viewport. Este velo asegura que el titular se
   lea siempre, sin tapar el auto. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5, 19, 30, .96) 0%, rgba(5, 19, 30, .8) 32%, rgba(5, 19, 30, .3) 56%, rgba(5, 19, 30, 0) 72%);
}
.hero__texto { padding-block: clamp(44px, 7.6vw, 116px) clamp(40px, 6.4vw, 96px); max-width: 60%; }
.hero__titulo { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -.035em; }
.hero__titulo em { font-style: normal; color: #7C83FF; }
.hero__lead { margin: 20px 0 30px; max-width: 46ch; color: rgba(255, 255, 255, .74); font-size: clamp(14.5px, 1.2vw, 17px); line-height: 1.7; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.stats { background: rgba(3, 10, 18, .88); border-top: 1px solid var(--linea-osc); backdrop-filter: blur(8px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 30px); padding-block: clamp(18px, 2vw, 26px); }
.dato { display: flex; align-items: center; gap: 14px; padding-left: clamp(16px, 2vw, 30px); border-left: 1px solid var(--linea-osc); }
.dato:first-child { padding-left: 0; border-left: 0; }
.dato .icon { color: #9AA0FF; }
.dato div { display: flex; flex-direction: column; line-height: 1.25; }
.dato strong { font-family: var(--ff-head); font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; }
.dato span { font-size: 12.5px; color: rgba(255, 255, 255, .58); }

/* ---------- 06 Categorías ---------- */
.categorias { background: var(--claro); }
.categorias__pista { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.3vw, 20px); }
.categoria {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px 20px 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-md);
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.categoria:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: #D6DEEC; }
.categoria strong { margin-top: 12px; font-family: var(--ff-head); font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; }
.categoria img { width: 118%; max-width: none; margin: 8px 0 0 -9%; aspect-ratio: 2 / 1; object-fit: cover; }

/* ---------- 07 Destacados ---------- */
.destacados { background: var(--navy); color: #fff; padding-block: var(--section-y); }
.autos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.auto { background: var(--blanco); color: var(--tinta); border-radius: var(--r-lg); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.auto:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.auto__foto { position: relative; }
.auto__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--tinta);
  transition: background-color .2s, color .2s, transform .2s;
}
.fav:hover { transform: scale(1.08); }
.fav[aria-pressed="true"] { background: var(--violeta); color: #fff; }
.fav[aria-pressed="true"] .icon { fill: currentColor; }
.auto__cuerpo { padding: 18px 20px 20px; }
.auto h3 { font-size: clamp(16px, 1.35vw, 19px); }
.auto__specs { margin-top: 5px; font-size: 13px; color: var(--gris); }
.auto__specs span { color: var(--gris-claro); margin-inline: 3px; }
.auto__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.auto__pie strong { font-family: var(--ff-head); font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; }

/* ---------- 08 Calidad ----------
   La foto es una banda a ancho completo: el edificio ocupa el 55%
   izquierdo y el resto ya viene en blanco, con el corte en diagonal.
   El texto se apoya sobre esa mitad blanca. */
.calidad { position: relative; background: var(--blanco); }
.calidad__media { display: block; }
/* En la referencia esta banda es mas baja que la proporcion natural de la
   foto (2,24:1): se recorta a 2,9:1, que deja el cartel y los autos enteros. */
.calidad__media img { width: 100%; aspect-ratio: 1900 / 655; object-fit: cover; object-position: center 48%; }
.calidad__texto {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  /* Arranca al 60% del ancho, que es donde cae la diagonal de la foto */
  padding-left: 60%; padding-right: var(--edge);
}
.ventajas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(24px, 2.6vw, 36px); }
.ventajas li { display: flex; align-items: flex-start; gap: 13px; }
.ventajas span span, .ventajas li > span:last-child { display: flex; flex-direction: column; }
.ventajas strong { font-family: var(--ff-head); font-size: 15px; font-weight: 700; }
.ventajas small { font-size: 12.5px; line-height: 1.5; color: var(--gris); }

/* ---------- 09 Testimonios + newsletter ---------- */
.testimonios { position: relative; isolation: isolate; background: var(--navy); color: #fff; padding-block: var(--section-y); }
.testimonios__fondo { position: absolute; inset: 0; z-index: -2; display: block; }
.testimonios__fondo img { width: 100%; height: 100%; object-fit: cover; }
.testimonios::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 19, 30, .95) 0%, rgba(5, 19, 30, .82) 42%, rgba(5, 19, 30, .35) 70%, rgba(5, 19, 30, .2) 100%); }

.resenas { display: flex; gap: clamp(18px, 2vw, 32px); max-width: 52%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin-top: clamp(22px, 2.4vw, 34px); }
.resenas::-webkit-scrollbar { display: none; }
.resena { flex: 0 0 100%; scroll-snap-align: start; }
.resena blockquote { margin: 10px 0 24px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.7; color: rgba(255, 255, 255, .88); }
.resena figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.resena__quien { display: flex; flex-direction: column; line-height: 1.3; }
.resena__quien strong { font-family: var(--ff-head); font-size: 15.5px; font-weight: 700; }
.resena__quien small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.testimonios .carrusel__flechas { justify-content: flex-end; margin-top: clamp(18px, 2vw, 28px); }

.newsletter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  margin-top: clamp(28px, 3.2vw, 46px); padding: clamp(16px, 1.8vw, 22px);
  background: var(--violeta); border-radius: var(--r-lg);
}
.newsletter__icono { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .2); color: #fff; }
.newsletter__texto { display: flex; flex-direction: column; line-height: 1.35; margin-right: auto; }
.newsletter__texto strong { font-family: var(--ff-head); font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; }
.newsletter__texto small { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.newsletter__input { flex: 1 1 240px; min-width: 0; padding: 14px 20px; border: 0; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 14.5px; }
.newsletter__input::placeholder { color: var(--gris-claro); }

/* ---------- 10 Servicios ---------- */
.servicios { background: var(--claro); }
.servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 22px); }
.servicio { padding: clamp(22px, 2.2vw, 32px); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-md); text-align: center; transition: transform .25s, box-shadow .25s; }
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.servicio .chip { margin: 0 auto 16px; width: 52px; height: 52px; border-radius: 16px; }
.servicio .chip .icon { width: 24px; height: 24px; }
.servicio h3 { font-size: 17px; }
.servicio p { margin-top: 8px; font-size: 14px; color: var(--gris); }

/* ---------- 11 Noticias ---------- */
.noticias { background: var(--blanco); }
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.nota__foto { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; }
.nota__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .45s; }
.nota__foto:hover img { transform: scale(1.05); }
.nota__flecha { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--navy); }
.nota__flecha .icon { width: 16px; height: 16px; }
.nota h3 { margin-top: 16px; font-size: clamp(16px, 1.35vw, 19px); }
.nota h3 a:hover { color: var(--violeta); }
.nota > p { margin-top: 7px; font-size: 14px; color: var(--gris); }
.nota__fecha { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; color: var(--gris-claro); }
.nota__fecha .icon { width: 14px; height: 14px; }

/* ---------- 12 CTA final ---------- */
.cta-final { position: relative; isolation: isolate; background: var(--navy); color: #fff; }
.cta-final__media { position: absolute; inset: 0; z-index: -2; display: block; }
.cta-final__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 19, 30, .94) 0%, rgba(5, 19, 30, .78) 40%, rgba(5, 19, 30, .25) 72%, rgba(5, 19, 30, .1) 100%); }
.cta-final__texto { padding-block: clamp(46px, 5.4vw, 88px); max-width: 60%; }
.cta-final h2 { font-size: clamp(26px, 3vw, 44px); }
.cta-final h2 em { font-style: normal; color: #7C83FF; }
.cta-final p { margin: 14px 0 26px; color: rgba(255, 255, 255, .74); font-size: clamp(14.5px, 1.1vw, 16.5px); }

/* ---------- 13 Footer ---------- */
.site-footer { background: var(--navy); color: #fff; padding-block: clamp(42px, 5vw, 66px) 22px; }
.site-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 34px 40px; padding-bottom: clamp(26px, 3vw, 40px); }
.site-footer__marca p { margin-top: 16px; max-width: 34ch; color: rgba(255, 255, 255, .6); font-size: 14.5px; }
.site-footer h3 { margin-bottom: 16px; font-size: 17px; }
.site-footer a { color: rgba(255, 255, 255, .6); transition: color .2s; }
.site-footer nav a { font-size: 14.5px; }
.site-footer a:hover { color: #fff; }
.site-footer nav li + li { margin-top: 10px; }
.contacto li { display: flex; gap: 11px; font-size: 14.5px; color: rgba(255, 255, 255, .6); }
.contacto li + li { margin-top: 12px; }
.contacto .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--violeta); }
.redes { display: flex; gap: 12px; margin-top: 22px; }
.redes a { color: rgba(255, 255, 255, .6); }
.redes a:hover { color: var(--violeta); }
.redes .icon { width: 18px; height: 18px; }
.site-footer__pie { padding-top: 22px; border-top: 1px solid var(--linea-osc); text-align: center; font-size: 13px; color: rgba(255, 255, 255, .45); }

/* ============================================================
   14 RESPONSIVE
   ============================================================ */

/* --- Tablet ancha --- */
@media (max-width: 1180px) {
  /* Ya no entran las cinco: pasa a carrusel y las flechas empiezan a servir */
  .categorias__pista {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px;
  }
  .categorias__pista::-webkit-scrollbar { display: none; }
  .categoria { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
  .servicios__grid { grid-template-columns: repeat(2, 1fr); }
  .calidad { grid-template-columns: 38% 1fr; }
  .hero__texto { max-width: 70%; }
}

/* --- Tablet --- */
@media (max-width: 960px) {
  .icon-btn--menu { display: grid; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px; background: var(--navy); border: 1px solid var(--linea-osc); border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s, transform .22s, visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 13px 16px; border-radius: var(--r-sm); font-size: 15px; }
  .nav__link:hover { background: rgba(255, 255, 255, .08); }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: rgba(91, 98, 242, .28); }
  .site-header__acciones .btn--violeta { display: none; }

  .hero::before { background: linear-gradient(90deg, rgba(5, 19, 30, .97) 0%, rgba(5, 19, 30, .9) 44%, rgba(5, 19, 30, .55) 70%, rgba(5, 19, 30, .2) 100%); }
  .autos, .notas { grid-template-columns: repeat(2, 1fr); }
  .autos > :last-child, .notas > :last-child { grid-column: span 2; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
  .dato:nth-child(odd) { padding-left: 0; border-left: 0; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .section__head--centro { align-items: center; }
  /* Con el texto arrancando al 60% la columna queda muy angosta y ya no
     entra en la altura de la banda: por debajo de acá, foto arriba y
     texto debajo. */
  .calidad__texto { position: static; padding: clamp(26px, 3.4vw, 40px) var(--edge) clamp(30px, 3.8vw, 46px); }
  .resenas { max-width: 68%; }
  .hero__texto { max-width: 82%; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  :root { --edge: 18px; }

  /* La foto pasa a estar en el flujo, pero la cabecera tiene que seguir
     arriba de todo: en el HTML va despues del <picture>. */
  .hero { display: flex; flex-direction: column; }
  .hero::before { display: none; }
  .hero .site-header { order: -1; }
  .hero__media { position: static; }
  .hero__media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
  .hero__texto { max-width: 100%; padding-block: 30px 26px; }
  .hero__acciones .btn { flex: 1 1 auto; justify-content: center; }
  .stats__grid { grid-template-columns: 1fr; gap: 0; }
  .dato { padding: 12px 0; border-left: 0; border-top: 1px solid var(--linea-osc); }
  .dato:first-child { border-top: 0; }

  .categorias__pista { gap: 12px; }
  .categoria { flex: 0 0 68%; }

  .autos, .notas, .servicios__grid { grid-template-columns: 1fr; }
  .autos > :last-child, .notas > :last-child { grid-column: auto; }
  .ventajas { grid-template-columns: 1fr; }
  .calidad__media img { aspect-ratio: 9 / 7; object-position: center 4%; }
  .resenas { max-width: 100%; }
  .cta-final__texto { max-width: 100%; }
  .cta-final__media img { aspect-ratio: 4 / 5; }
  .newsletter__texto { margin-right: 0; flex: 1 1 200px; }
  .newsletter .btn { flex: 1 1 auto; justify-content: center; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 28px; }
}