/* ============================================================
   Mercedes-Benz Ecuador — skin de marca
   Todo valor sale del Manual de lineamientos MB 140 años 2026 LATAM.
   Color p.9 · Tipografía p.10-12 · Layout p.14 · Escenario translúcido p.29-31
   ============================================================ */

/* ---------- Tipografías oficiales MB Corpo (subset latino, WOFF2) ---------- */

@font-face {
  font-family: "MB Corpo A Cond";
  src: url("assets/fonts/mb-corpo-a-cond-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MB Corpo S Title";
  src: url("assets/fonts/mb-corpo-s-title-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "MB Corpo S Text";
  src: url("assets/fonts/mb-corpo-s-text-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens de marca ---------- */

:root {
  /* Manual p.9 — los únicos colores sancionados */
  --fg:      #000000;   /* Deep Black  */
  --bg:      #FFFFFF;   /* Plain White */
  /* El manual define Pure Blue (#0078D6) como color de CTA, pero el cliente
     pidió expresamente no usar azul. Queda todo en los dos primarios de marca:
     Deep Black sobre fondos claros, y blanco invertido sobre fondos oscuros
     (en el slider un botón negro se perdería contra la foto). */
  --accent:       #000000;
  --accent-ink:   #FFFFFF;
  --accent-hover: #2E2E2E;

  /* Neutros derivados (el manual no los define; gris puro, sin tinte) */
  --surface: #F2F2F2;
  --line:    #DCDCDC;
  --muted:   #6E6E6E;
  --ghost:   #D8D8D8;
  --danger:  #C41E1E;

  --font-display: "MB Corpo A Cond", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  /* Manual, p.11: cuerpo de texto en MB Corpo S Title Light por encima de
     14 pt, y MB Corpo S Text por debajo. --font-body es el de arriba de esa
     línea; --font-ui, el de abajo (labels, chips, legales, navegación). */
  --font-body:    "MB Corpo S Title", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "MB Corpo S Text", "Helvetica Neue", Arial, sans-serif;

  /* Mercedes es rectilíneo. Cero redondeo en ningún control. */
  --campo: #FFFFFF;   /* superficie de los campos del formulario */
  --field-radius: 0px;

  --panel-w: clamp(380px, 31vw, 468px);
  --bar-h: clamp(44px, 5vh, 64px);
  --nav-h: 68px;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: #fff; }

/* El header es sticky: sin esto, saltar por ancla deja la parte de arriba de
   cada sección debajo de la barra. */
.hero, .slider, .panel, .foot, .foot__col { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ============================================================
   HEADER — sticky. Estructura de mercedes-benz.com.ec/pasajeros.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.nav[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.05);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

.nav__in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 46px);
  height: var(--nav-h);
  padding-inline: var(--gutter);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.nav__brand img { width: 30px; height: 30px; }
.nav__brand span { font-family: var(--font-ui); font-size: 0.9375rem; }

.nav__menu { display: flex; gap: clamp(14px, 2vw, 30px); margin-right: auto; }
.nav__menu a {
  position: relative;
  padding-block: 6px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__menu a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1.5px;
  background: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-base) var(--ease);
}
.nav__menu a:hover { color: var(--fg); }
.nav__menu a:hover::after { scale: 1 1; }

.nav__acts { display: flex; align-items: center; gap: 10px; flex: none; }

.nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__wa:hover { border-color: var(--fg); }

.nav__cta {
  padding: 9px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__cta:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px; height: 40px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
}
.nav__burger span {
  display: block; height: 1.5px;
  background: var(--fg);
  transition: translate var(--dur-base) var(--ease),
              rotate var(--dur-base) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 5.5px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -5.5px; rotate: -45deg; }

/* Sólo existe cuando el menú está colapsado (ver el media query de 900px) */
.nav__movil { display: none; }
.nav__movil a {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--fg);
  text-decoration: none;
}
.nav__movil a:last-child { border-bottom: 0; }

/* ============================================================
   HERO — split: izquierda carrusel de modelos, derecha forms
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: 1fr var(--panel-w);
  /* min-height y no height: si el formulario no entra, crece el hero y
     scrollea la página. Antes el panel scrolleaba por dentro y salía una
     barra fea. Se puede porque todo lo del escenario (auto, fantasma, sombra,
     controles) está en absoluto: la fila 1fr no depende del render. */
  min-height: calc(100svh - var(--nav-h));
  /* El panel entra desplazado 24px a la derecha. Como la coreografía espera
     a que el hero se vea, ese desplazamiento quedaba en pantalla y provocaba
     scroll horizontal. Se contiene aquí. */
  overflow-x: clip;
}

/* ---------- Escenario izquierdo ---------- */

.stage {
  position: relative;
  display: grid;
  /* minmax(0,1fr) y no 1fr: si no, el mínimo automático de la fila es el alto
     intrínseco del render y el riel se va bajo el fold en pantallas de 768px. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  /* El mínimo automático de un grid item es su contenido: sin este 0 el
     escenario desborda el hero y el minmax de arriba nunca entra en juego. */
  min-height: 0;
  /* El hero ya no es la primera sección: nace pegado al slider, así que
     necesita aire arriba o se lee como una continuación de la foto. */
  padding: clamp(64px, 9.5vh, 112px) 0 clamp(20px, 3vh, 34px) var(--gutter);
  /* Luz de estudio: casi imperceptible, pero le da al panel translúcido
     algo real que desenfocar (manual p.31). */
  background:
    radial-gradient(120% 80% at 22% 12%, #FFFFFF 0%, #FCFCFC 46%, #F4F4F4 100%);
  overflow: clip;
}

/* La Estrella y el word mark ahora viven en el header; aquí queda el
   emblema conmemorativo, en esquina, como manda el manual (p.34). */
.stage__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: clamp(24px, 4vw, 64px);
  min-height: var(--bar-h);
}

/* Emblema 140 años — manual p.34: 3/4x de aire, sobre zona visualmente limpia,
   y lejos de la Estrella para que no compitan. */
.emblem140 { width: clamp(112px, 11vw, 168px); height: auto; }

/* ---------- Titular ---------- */

.stage__copy {
  padding-block: clamp(12px, 2.6vh, 34px);
  padding-right: clamp(24px, 4vw, 72px);
}

/* Manual p.10: máx 32 caracteres por línea, máx 3 líneas, interlineado 100%.
   Capitalización mixta, por lo tanto sin espaciado entre caracteres. */
.headline {
  font-family: var(--font-display);   /* MB Corpo A = Antiqua (serif). Es la correcta. */
  font-weight: 400;
  font-size: clamp(2.125rem, 3.9vw, 3.875rem);
  line-height: 1;
  letter-spacing: 0;
  max-width: 15ch;                    /* ch relativo a SU tamaño, no al del body */
}

/* La máscara del reveal recorta en vertical. En horizontal hay que dejar
   respirar o se comen el final de la línea. */
.headline__line { display: block; overflow-y: clip; overflow-x: visible; }
.headline__line > span { display: block; white-space: nowrap; }
.headline__line--accent { color: var(--accent); }

.rule {
  display: block;
  width: 62px; height: 1px;
  margin-block: clamp(18px, 2.6vh, 30px) clamp(14px, 2vh, 22px);
  background: var(--fg);
  transform-origin: left;
}

.lema {
  font-family: var(--font-body);
  font-weight: 300;
  /* 14 pt = 18,67 px es el mínimo que fija el manual para cuerpo en digital. */
  font-size: clamp(1.1875rem, 1.35vw, 1.375rem);
  line-height: 1.3;
  color: #2E2E2E;
}

/* ---------- Showroom: el auto y su nombre fantasma ---------- */

.showroom {
  position: relative;
  display: grid;
  place-items: center;
  /* Fijo en 190px el escenario desbordaba sobre el riel en pantallas de 720px. */
  min-height: clamp(140px, 20vh, 190px);
  max-height: 52vh;
  padding-right: clamp(20px, 4vw, 70px);
}

/* El nombre del modelo, enorme y casi invisible, detrás del auto.
   Es la única licencia visual de la página. */
.ghost {
  position: absolute;
  /* Sube por encima de la carrocería: si queda centrado detrás del auto,
     los modelos de nombre corto (E 400, E 350) no se leen. */
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  /* Más ancho que el auto a propósito: las puntas de las letras asoman
     por los costados y la carrocería corta el resto. */
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 0.85;
  color: var(--ghost);
  /* Se apaga hacia abajo: donde entra la carrocería, la letra ya se fue. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 94%);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.ghost__ch { display: inline-block; will-change: transform, opacity; }

/* Sombra de piso: ancla el render al escenario */
.showroom__floor {
  position: absolute;
  bottom: 7%;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
  width: min(70%, 620px);
  aspect-ratio: 7 / 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 68%);
  transition: opacity var(--dur-base) var(--ease-swap);
}

/* ---------- Carrusel de fotos del modelo activo ----------
   Las láminas se apilan y se cruzan por opacidad. Absoluto + object-fit
   en vez de max-height: el porcentaje sobre una fila 1fr no siempre
   resuelve, y el auto terminaba montado sobre el riel. */
.shots { position: absolute; inset: 0; z-index: 1; }

.shot {
  position: absolute;
  /* Apoyado abajo, no centrado: así el nombre del modelo tiene una franja
     limpia arriba. Centrado, los nombres cortos quedaban tapados por la
     carrocería y no se leían. */
  inset: auto 0 0 0;
  margin-inline: auto;
  width: 100%;
  height: 80%;
  max-width: 680px;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  translate: 22px 0;
  transition: opacity 460ms var(--ease), translate 680ms var(--ease);
  pointer-events: none;
}
.shot.is-on { opacity: 1; translate: 0 0; }

.shots__nav {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline-end: clamp(20px, 4vw, 70px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.shots__arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.shots__arrow:hover { border-color: var(--fg); background: var(--bg); }

/* Los puntos viven en shared/core.css: el marcado es el mismo en varias
   landings y sus colores ya salen de los tokens de marca. */

/* ---------- Riel de modelos + specs ---------- */

.rail {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 2.6vw, 40px);
  padding-right: clamp(24px, 4vw, 64px);
  padding-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail__item {
  position: relative;
  flex: none;
  padding: 4px 0 12px;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.rail__item::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-base) var(--ease);
}
.rail__item:hover { color: var(--fg); }
.rail__item[aria-pressed="true"] { color: var(--fg); }
.rail__item[aria-pressed="true"]::after { scale: 1 1; }

.specs {
  display: flex;
  gap: clamp(22px, 3vw, 52px);
  margin-top: 16px;
  padding-right: var(--gutter);
  font-family: var(--font-ui);
}
.spec { display: grid; gap: 3px; }
.spec__val { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.spec__key {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   PANEL DERECHO — el escenario translúcido del manual (p.29-31).
   Rectángulo que toca 3 bordes del formato y cubre como máximo 1/3
   del ancho. Ligeramente oscurecido porque el fondo es claro (p.31).
   ============================================================ */

.panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(18px, 2.4vh, 26px);
  /* Padding y no margin: con margin se veía el fondo del hero por encima del
     panel y quedaba una franja blanca. Así el gris llena toda la columna y el
     contenido entra 50px. */
  padding: clamp(34px, 6.2vh, 52px) clamp(26px, 2.4vw, 44px) clamp(28px, 4vh, 44px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  
      
         
}

.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.9vw, 1.9375rem);
  line-height: 1.05;
  font-weight: 400;
}
.panel__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--muted);
  margin-top: 6px;
}

.form { display: grid; gap: clamp(13px, 1.7vh, 18px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.legend {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.panel__legal {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--muted);
}
.panel__legal a { color: var(--muted); }

.form__feedback {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--danger);
  min-height: 1lh;
}

/* Éxito */
.form-done__star { width: 46px; height: 46px; justify-self: center; }
.form-done__title {
  font-family: var(--font-display);
  font-size: 1.6875rem;
  line-height: 1.1;
}
.form-done__text { font-family: var(--font-body); font-weight: 300; color: var(--muted); font-size: 1.1875rem; line-height: 1.3; }

/* ============================================================
   SLIDER PRINCIPAL — fotos de campaña con degradado y texto al lado.
   Provisional hasta que lleguen los banners del mes.
   ============================================================ */

.slider {
  position: relative;
  isolation: isolate;
  background: var(--fg);
  overflow: clip;
}

/* Las diapositivas se apilan en la misma celda de grid en vez de posicionarse
   en absoluto: así la sección toma altura real y el texto no se recorta. */
.slider__view {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(460px, 64svh, 680px);
}

.sl {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  min-height: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.sl.is-on { opacity: 1; }

.sl__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Deriva lentísima mientras la diapositiva está en pantalla: da vida
     sin que se note el truco. */
  scale: 1.06;
  transition: scale 8s linear;
}
.sl.is-on .sl__img { scale: 1; }

/* El degradado: opaco a la izquierda, transparente sobre el auto.
   Dos capas — una horizontal para el texto, una vertical suave para
   que el borde inferior no corte en seco. */
.sl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.74) 26%,
      rgba(0,0,0,0.42) 48%,
      rgba(0,0,0,0.08) 68%,
      rgba(0,0,0,0) 84%),
    linear-gradient(to top, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 42%);
  pointer-events: none;
}

.sl__body {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
  max-width: min(var(--shell), 100%);
  padding-block: clamp(48px, 9vh, 96px);
  color: #fff;
}
.sl__body > * { max-width: 21ch; }
.sl__text { max-width: 44ch; }

.sl__kicker {
  justify-self: start;
  max-width: none; white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.sl__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.1vw, 3.6rem);
  line-height: 1.02;
  margin-top: 14px;
  text-wrap: balance;
}
.sl__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.1875rem, 1.25vw, 1.3125rem);
  line-height: 1.35;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.88);
}
.sl__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vh, 32px); max-width: none; }

/* La entrada del texto se escalona; sólo corre en la diapositiva activa. */
@media (prefers-reduced-motion: no-preference) {
  .sl__kicker, .sl__title, .sl__text, .sl__cta { opacity: 0; translate: 0 16px; }
  .sl.is-on .sl__kicker,
  .sl.is-on .sl__title,
  .sl.is-on .sl__text,
  .sl.is-on .sl__cta {
    opacity: 1; translate: 0 0;
    transition: opacity 640ms var(--ease) var(--d), translate 640ms var(--ease) var(--d);
  }
  .sl.is-on .sl__kicker { --d: 120ms; }
  .sl.is-on .sl__title  { --d: 200ms; }
  .sl.is-on .sl__text   { --d: 290ms; }
  .sl.is-on .sl__cta    { --d: 380ms; }
}

/* Botón compacto y su hermano fantasma, para las diapositivas.
   Sobre la foto oscura el CTA se invierte: blanco con texto negro. Un botón
   negro sobre el degradado sería invisible. */
.btn--sm { width: auto; padding: 13px 24px; font-size: 0.875rem; }
.sl__cta .btn { background: #fff; color: #000; }
.sl__cta .btn:hover { background: rgba(255, 255, 255, 0.84); }

/* El foco por teclado también tiene que verse sobre fondo oscuro */
.slider :where(a, button):focus-visible { outline-color: #fff; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Todos los controles viven en la barra inferior: si las flechas van a los
   costados se montan sobre el texto, que en este layout arranca al borde. */
.slider__foot {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(18px, 3vh, 30px);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 9px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.slider__arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.slider__arrow:hover { color: #fff; }

.slider__foot .dots { margin-inline: 4px; }
.slider__pause {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.slider__pause:hover { color: #fff; }

/* ============================================================
   PIE — legales (manual p.12: al fondo, MB Corpo S Text)
   ============================================================ */

.foot {
  padding-block: clamp(46px, 7vh, 82px) clamp(24px, 3vh, 34px);
  background: var(--surface);
  font-family: var(--font-ui);
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.foot__in { width: var(--shell); margin-inline: auto; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(26px, 4vw, 56px);
  padding-bottom: clamp(32px, 5vh, 54px);
}

.foot__h {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 16px;
}
.foot__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot__col a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.foot__col a:hover { color: var(--fg); }

.foot__horario { font-size: 0.875rem; line-height: 1.35; }
.foot__horario span { display: inline-block; margin-top: 10px; }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-top: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}
.foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.foot__marca { width: 34px; height: 34px; flex: none; }

/* Logo de Teojama junto al de la marca: el distribuidor oficial firma la
   pieza. El separador es un signo "+" dibujado, no un carácter, para que el
   lector de pantalla no lo lea. */
.foot__mas {
  flex: none; width: 11px; height: 11px; opacity: .42;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.foot__teojama { flex: none; width: 118px; height: auto; }
.foot__brand p { line-height: 1.35; }

.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__legal a { color: var(--muted); text-decoration: none; }
.foot__legal a:hover { color: var(--fg); text-decoration: underline; }

/* ============================================================
   SECUENCIA DE ENTRADA — orquestada, no dispersa. ~1.2 s.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js .headline__line > span { translate: 0 105%; }
  .js .rule { scale: 0 1; }
  .js .lema,
  .js .stage__bar > *,
  .js .rail__item,
  .js .specs,
  .js .shots,
  .js .shots__nav,
  .js .ghost { opacity: 0; }
  .js .panel { opacity: 0; translate: 24px 0; }

  .js.is-ready .headline__line > span {
    translate: 0 0;
    transition: translate 820ms var(--ease) var(--d, 0ms);
  }
  .js.is-ready .rule {
    scale: 1 1;
    transition: scale 620ms var(--ease) 430ms;
  }
  .js.is-ready .lema,
  .js.is-ready .stage__bar > *,
  .js.is-ready .rail__item,
  .js.is-ready .specs,
  .js.is-ready .shots__nav,
  .js.is-ready .ghost {
    opacity: 1;
    transition: opacity 700ms var(--ease) var(--d, 0ms);
  }
  .js .shots__nav { --d: 940ms; }
  .js.is-ready .panel {
    opacity: 1; translate: 0 0;
    transition: opacity 760ms var(--ease) 640ms, translate 760ms var(--ease) 640ms;
  }

  .js .stage__bar > :first-child { --d: 60ms; }
  .js .stage__bar > :last-child  { --d: 180ms; }
  .js .headline__line:nth-child(1) > span { --d: 140ms; }
  .js .headline__line:nth-child(2) > span { --d: 225ms; }
  .js .headline__line:nth-child(3) > span { --d: 310ms; }
  .js .lema     { --d: 520ms; }
  .js .ghost    { --d: 400ms; }
  .js .specs    { --d: 840ms; }
  .js .rail__item:nth-child(1) { --d: 700ms; }
  .js .rail__item:nth-child(2) { --d: 755ms; }
  .js .rail__item:nth-child(3) { --d: 810ms; }
  .js .rail__item:nth-child(4) { --d: 865ms; }

  /* El auto no aparece: entra rodando desde la derecha. */
  .js .shots { translate: 46px 0; }
  .js.is-ready .shots {
    opacity: 1;
    translate: 0 0;
    transition: opacity 760ms var(--ease) 380ms, translate 900ms var(--ease) 380ms;
  }
}

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

/* Portátiles de 768–860px de alto: el botón de cotizar tiene que verse sin
   scrollear dentro del panel, o se pierde la conversión. Se aprieta el ritmo
   vertical y se sacrifica la bajada, que es la línea menos necesaria. */
/* Los tres escalones de abajo tienen una prioridad clara: el aire de arriba
   del panel no se toca nunca. Lo que se sacrifica, en orden, es la bajada,
   los espacios entre campos y el alto de los controles. */

/* Escalón 1 (860–950px): se va la bajada y se aprieta apenas el ritmo. */
@media (min-width: 1081px) and (max-height: 950px) {
  .panel { gap: 16px; }
  .panel__intro { display: none; }
  .form { gap: 12px; }
  .form__feedback { min-height: 0; }
  .panel__legal { font-size: 0.6875rem; }
}

/* Escalón 2 (≤ 860px): bajan los controles, el aire de arriba se mantiene. */
@media (min-width: 1081px) and (max-height: 860px) {
  .panel { padding-block: clamp(42px, 5.6vh, 52px) clamp(22px, 3vh, 30px); gap: 13px; }
  .form { gap: 10px; }
  .field { gap: 5px; }
  .field__control { padding-block: 10px; }
  .chip__face { padding-block: 9px; }
  .btn { padding-block: 14px; }
  .panel__legal { font-size: 0.625rem; }
  .legend { margin-bottom: 6px; }
}

/* Escalón 3 (≤ 790px): portátiles de 720p. Aún así el panel arranca a 34px. */
@media (min-width: 1081px) and (max-height: 790px) {
  .panel { padding-block: 46px 18px; gap: 10px; }
  .panel__title { font-size: 1.375rem; }
  .form { gap: 8px; }
  .field__control { padding-block: 8px; }
  .chip__face { padding-block: 8px; }
  .chips { gap: 6px; }
  .btn { padding-block: 12px; }
}

/* Escalón 4: pantallas bajas Y angostas (p. ej. 1152x700). El panel toca su
   ancho mínimo, el texto envuelve más y hace falta un último apretón. */
@media (min-width: 1081px) and (max-height: 760px) {
  .panel { padding-block: 46px 14px; gap: 8px; }
  .field__label { font-size: 0.75rem; }
  .form { gap: 7px; }
  .field__control { padding-block: 7px; }
  .chip__face { padding-block: 7px; font-size: 0.8125rem; }
  .btn { padding-block: 11px; font-size: 0.875rem; }
  .panel__legal { display: none; }
}

@media (min-width: 1081px) and (max-height: 680px) {
  .panel { padding-block: 42px 10px; gap: 6px; }
  .field__label { font-size: 0.6875rem; }
  .field__control { padding-block: 6px; }
  .chip__face { padding-block: 6px; }
  .chips { gap: 5px; }
  .btn { padding-block: 10px; }
}

/* Tablet: el panel deja de ser columna y pasa a bloque bajo el escenario */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .stage {
    padding-right: var(--gutter);
    padding-bottom: clamp(26px, 4vh, 40px);
    min-height: 92svh;
  }
  .panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-inline: var(--gutter);
  }
  .form { max-width: 620px; }
  .js .panel { translate: 0 24px; }
}

/* Tablet y abajo: el menú del header se colapsa en hamburguesa */
@media (max-width: 900px) {
  .nav__menu, .nav__wa { display: none; }
  .nav__burger { display: flex; }
  .nav__acts { margin-left: auto; }
  .nav__movil {
    display: grid;
    padding: 6px var(--gutter) 18px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .stage { min-height: auto; padding-bottom: 30px; }
  .stage__copy { max-width: none; padding-right: 0; }
  .headline { font-size: clamp(2.125rem, 10vw, 3rem); }
  .emblem140 { width: 92px; }
  .showroom { padding-right: 0; padding-block: 8px 46px; min-height: 210px; }
  .shots__nav { inset-inline: 0; justify-content: center; }
  .ghost { font-size: clamp(2.75rem, 16vw, 4.5rem); top: 0; }
  .specs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .form__row { grid-template-columns: 1fr; }

  .slider__view { min-height: 520px; }
  .sl__body > * { max-width: none; }
  .slider__foot { gap: 8px; }
  .sl__cta { display: grid; }
  .btn--sm, .btn-ghost { justify-content: center; text-align: center; }

  /* Columnas al ancho de su contenido y el sobrante repartido entre ellas:
     con 1fr 1fr la segunda medía la mitad del footer pero su texto ocupaba
     un tercio, y ese vacío se leía como padding de más a la derecha. */
  .foot__cols { grid-template-columns: auto auto; justify-content: space-between; gap: 26px 20px; }
  /* En móvil la barra va centrada: apilada a la izquierda dejaba todo el
     lado derecho vacío. */
  .foot__bar { flex-direction: column; align-items: center; text-align: center; }
  .foot__brand { justify-content: center; }
  /* Con los dos logos al lado, el copyright quedaba en una columna de 90 px.
     Se le da su propia línea. */
  .foot__brand p { flex-basis: 100%; }
  .foot__legal { justify-content: center; }
}

/* Pantallas muy anchas: que el escenario no se estire de más */
@media (min-width: 1800px) {
  .stage { padding-left: max(var(--gutter), calc((100vw - var(--panel-w) - 1400px) / 2)); }
}