/* ============================================================
   MG Ecuador — capa de marca
   Paleta de la web oficial: negro #1B1B1B, blanco y MG Red.
   El rojo es el valor exacto del manual ("MG Brand Colour Palette.pdf").
   core.css no sabe nada de MG: sólo consume los tokens de abajo.

   La página tiene dos ambientes: oscuro arriba y abajo (banner, header,
   pie) y claro en el medio (los autos y el formulario). En vez de duplicar
   cada componente, los componentes leen tokens semánticos —tinta, sup,
   campo, linea, tenue— y la sección clara los redefine una sola vez.
   ============================================================ */

/* ---------- Tipografías ---------- */
/* Reparto según el manual (p. 57-59): Favorit para titular y cuerpo, Favorit
   Mono para captions, CTA y los recursos gráficos. La familia de texto salió
   de "10. Fonts/Favorit/MG Font Web" del manual, que ya venía en WOFF2. */

@font-face {
  font-family: "Favorit";
  src: url("assets/fonts/favorit-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("assets/fonts/favorit-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Favorit Mono";
  src: url("assets/fonts/favorit-mono-book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Favorit Mono";
  src: url("assets/fonts/favorit-mono-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --negro:   #1B1B1B;
  --panel:   #242424;
  --blanco:  #FFFFFF;
  --gris:    #F7F7F7;   /* gris de las tarjetas */
  --rojo:    #FD2F33;   /* MG Red exacto: superficies y texto grande */

  /* Cuatro variantes del mismo rojo, cada una por una razón medida:
     · cta    → blanco encima da 4.53:1; sobre el MG Red puro sólo 3.73
     · claro  → rojo como TEXTO sobre negro (el puro da 4.16 sobre el panel)
     · oscuro → rojo como TEXTO sobre blanco (el puro da 3.73)
     · error  → separado del rojo de marca para que no se lea como acento */
  --rojo-cta:    #E32A2D;
  --rojo-on:     #C2141B;
  --rojo-claro:  #FF4A4D;
  --rojo-oscuro: #D01E22;
  --err-claro:   #FF7A7C;
  --err-oscuro:  #C2141B;

  /* --- Tokens semánticos. Ambiente oscuro por defecto. --- */
  --tinta: var(--blanco);
  --sup:   var(--panel);
  --campo: #161616;
  --linea: rgba(255, 255, 255, .13);
  --tenue: rgba(255, 255, 255, .60);
  --rojo-acento: var(--rojo-claro);
  --rojo-error:  var(--err-claro);

  /* --- Contrato que consume shared/core.css --- */
  --bg: var(--negro);
  --fg: var(--blanco);
  --surface: var(--panel);
  --line: var(--linea);
  --muted: var(--tenue);
  --accent: var(--rojo-cta);
  --accent-hover: var(--rojo-on);
  --accent-ink: #FFFFFF;

  --font-display: "Favorit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Favorit", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Favorit Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 14px;
  --field-radius: 8px;

  --gutter: clamp(16px, 4vw, 40px);
  --shell: min(1320px, 100vw - var(--gutter) * 2);
  --nav-h: 78px;

  --dur-fast: .18s;
  --dur: .5s;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

body { font-family: var(--font-body); background: var(--negro); color: var(--blanco); }

/* ============================================================
   HEADER — transparente sobre el banner, sólido al bajar
   ============================================================ */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Sobre el banner el header no tiene fondo, así que el texto blanco se apoya
   en una sombra suave: sin ella se pierde contra el cielo claro de la foto. */
.nav:not(.is-solid) .nav__in { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.nav.is-solid {
  background: color-mix(in srgb, var(--negro) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .13);
}
.nav__in {
  width: var(--shell); margin-inline: auto; min-height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}

.nav__brand { display: inline-flex; }
/* El octágono va de máscara y no de <img>: así el color lo decide CSS. Un
   <use> apuntando a otro archivo no funciona en Chrome. */
.badge {
  display: block; background: currentColor;
  -webkit-mask: url("assets/brand/mg-badge.svg") center / contain no-repeat;
          mask: url("assets/brand/mg-badge.svg") center / contain no-repeat;
}
.badge--nav { width: 42px; aspect-ratio: 1; color: var(--blanco); }
.badge--ok  { width: 44px; aspect-ratio: 1; color: var(--rojo-oscuro); }

.nav__menu { display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); }
.nav__menu a {
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--blanco); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__menu a:hover { border-bottom-color: var(--rojo); }

.nav__acts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.nav__wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px;
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--blanco); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__wa:hover { border-color: var(--blanco); background: rgba(255, 255, 255, .08); }
.nav__cta {
  padding: 11px 20px; border-radius: 999px;
  background: var(--rojo-cta); color: #fff; text-decoration: none;
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__cta:hover { background: var(--rojo-on); }

.nav__burger {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 10px;
  background: rgba(0, 0, 0, .25); cursor: pointer;
}
.nav__burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: #fff; }

.nav__movil {
  display: grid; gap: 2px; padding: 8px var(--gutter) 18px;
  border-top: 1px solid rgba(255, 255, 255, .13); background: var(--negro);
}
.nav__movil a {
  padding: 13px 2px; color: var(--blanco); text-decoration: none;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

/* ============================================================
   BANNER — una sola pieza de campaña, fija
   ============================================================ */

.banner {
  --velo: .42;          /* opacidad del velo negro: subila o bajala acá */
  position: relative;
  height: min(82svh, 760px); min-height: 420px;
  background: #121212; overflow: clip;
  /* Foto y texto en la MISMA celda: el texto va encima sin sacarlo del flujo,
     así en móvil basta darle su propia fila y baja debajo de la foto. */
  /* minmax(0, 1fr) y no 1fr: el mínimo automático de una pista fr es su
     min-content, y el de la foto es su alto intrínseco (810 px a 1440 de
     ancho). Con eso la fila crecía más que el banner y el texto, alineado
     abajo, terminaba fuera de lo que se ve. */
  display: grid; grid-template-areas: "escena"; grid-template-rows: minmax(0, 1fr);
}
.banner__foto {
  grid-area: escena; min-width: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Velo negro sobre la foto. El titular ahora va arriba a la izquierda, así
   que el peso se carga en esa esquina; abajo lo justo para que el lockup y el
   "THE NEW MOVE" de la pieza sigan leyéndose. */
.banner::after {
  content: ""; grid-area: escena; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / calc(var(--velo) + .26)) 0%,
                               rgb(0 0 0 / var(--velo)) 54%,
                               rgb(0 0 0 / calc(var(--velo) + .16)) 100%),
    linear-gradient(to right, rgb(0 0 0 / .38) 0%, transparent 62%);
}

/* El lockup de campaña, ahora pieza suelta. */
.banner__marca {
  grid-area: escena; z-index: 2; align-self: end; justify-self: start;
  width: clamp(150px, 17vw, 250px); height: auto;
  margin-inline-start: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  margin-block-end: clamp(22px, 4vh, 44px);
  opacity: .92; pointer-events: none;
}

/* --- El titular sobre la pieza --- */

.banner__in {
  grid-area: escena; z-index: 2;
  /* Arriba, apenas debajo del header: es lo primero que se lee. */
  align-self: start; justify-self: start;
  width: var(--shell); margin-inline: auto;
  padding-block: calc(var(--nav-h) + clamp(20px, 5vh, 54px)) clamp(28px, 6vh, 60px);
  display: grid; justify-items: start; gap: 0;
}

.banner__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.02em; color: #fff; text-wrap: balance;
  max-width: 17ch;
  text-shadow: 0 2px 24px rgb(0 0 0 / .5);
}
.banner__titulo em { font-style: normal; color: var(--rojo-claro); }

.banner__lema {
  margin-top: 14px; max-width: 46ch;
  font-size: .9375rem; line-height: 1.55; color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 16px rgb(0 0 0 / .55);
}

.banner__cta {
  margin-top: clamp(18px, 3vh, 26px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--rojo-cta); color: #fff; text-decoration: none;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  transition: background-color var(--dur-fast) var(--ease);
}
.banner__cta:hover { background: var(--rojo-on); }

/* ============================================================
   LOS AUTOS — ambiente claro. Redefine los tokens y todos los
   componentes de adentro se adaptan sin duplicar reglas.
   ============================================================ */

.autos {
  --tinta: var(--negro);
  --sup:   var(--gris);
  --campo: var(--blanco);
  --linea: rgba(27, 27, 27, .14);
  --tenue: rgba(27, 27, 27, .66);
  --rojo-acento: var(--rojo-oscuro);
  --rojo-error:  var(--err-oscuro);

  background: var(--blanco); color: var(--tinta);
  padding-block: clamp(44px, 7vh, 86px);
}
.autos__in { width: var(--shell); margin-inline: auto; }

.autos__cabeza { max-width: 40ch; margin-bottom: clamp(26px, 4vh, 44px); }

.headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.03;
  letter-spacing: -.02em; color: var(--tinta); text-wrap: balance;
}
.headline em { font-style: normal; color: var(--rojo-acento); }
.lema {
  margin-top: 14px;
  font-size: .9375rem; line-height: 1.55; color: var(--tenue); max-width: 44ch;
}

.autos__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: clamp(24px, 3.4vw, 54px); align-items: start;
}

/* --- La tarjeta del modelo --- */

.modelo {
  position: relative; isolation: isolate;
  display: grid; gap: clamp(14px, 2vh, 22px);
  padding: clamp(20px, 3vh, 30px) clamp(18px, 2.4vw, 30px);
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radius);
  overflow: clip;
}

.modelo__foto { position: relative; z-index: 1; aspect-ratio: 16 / 8; min-height: 0; }
/* Piso de apoyo: los renders vienen recortados sobre transparente y sin nada
   abajo quedan flotando sobre el fondo plano. */
.modelo__foto::after {
  content: ""; position: absolute; z-index: 0;
  left: 10%; right: 10%; bottom: 4%; height: 22px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(27, 27, 27, .20), transparent 70%);
}
.modelo__auto {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modelo__auto.is-on { opacity: 1; }

.modelo__datos {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.modelo__nombre {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1;
  letter-spacing: -.02em; color: var(--tinta);
}
.modelo__tipo {
  font-family: var(--font-ui); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tenue);
}
.modelo__precio {
  margin-left: auto;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 700;
  color: var(--rojo-acento); white-space: nowrap;
}
.modelo__nota { position: relative; z-index: 1; font-size: .8125rem; line-height: 1.5; color: var(--tenue); }

/* Colores: sólo aparecen en los modelos que tienen más de uno cargado. */
.colores { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.colores__label {
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tenue);
  margin-right: 2px;
}
.color {
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 50%;
  background: var(--tono);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.color:hover { transform: scale(1.1); }
.color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sup), 0 0 0 4px var(--tinta); }

/* Cinta de specs, sólo en los modelos que la tienen verificada. */
.mspecs {
  position: relative; z-index: 1; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--linea);
}
.mspecs li { display: grid; gap: 3px; }
.mspecs b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1; letter-spacing: -.02em;
  color: var(--tinta);
}
.mspecs span {
  font-family: var(--font-ui); font-size: .5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tenue);
}

/* --- Elegir modelo --- */

.rail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: clamp(14px, 2vh, 20px); }
.rail__btn {
  padding: 10px 15px; min-height: 42px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 999px;
  background: transparent; color: var(--tenue);
  font-family: var(--font-ui); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.rail__btn:hover { color: var(--tinta); border-color: rgba(27, 27, 27, .34); }
.rail__btn[aria-pressed="true"] { background: var(--rojo-cta); border-color: var(--rojo-cta); color: #fff; }

/* --- Los cuatro rasgos de la gama --- */

.rasgos {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, auto);
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(20px, 3vh, 30px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--linea);
}
.rasgo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  align-items: start;
}
.rasgo b {
  display: block;
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
  color: var(--tinta); text-wrap: balance;
}
.rasgo span {
  display: block; margin-top: 5px;
  font-size: .75rem; line-height: 1.45; color: var(--tenue);
}

/* El icono toma su color de aquí: dentro del símbolo todo es currentColor,
   así el mismo sprite sirve en la sección clara y sobre fondo oscuro. */
.rasgo__ico {
  width: 28px; height: 28px; flex: none;
  color: var(--rojo-acento);
}

/* ============================================================
   FORMULARIO
   ============================================================ */

.panel {
  position: sticky; top: calc(var(--nav-h) + 16px);
  display: grid; align-content: start; gap: clamp(11px, 1.6vh, 16px);
  padding: clamp(20px, 3vh, 30px) clamp(18px, 2.4vw, 28px);
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radius);
}
.panel__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--tinta);
}
.panel__bajada { margin-top: -6px; font-size: .8125rem; line-height: 1.45; color: var(--tenue); }
.panel__legal { font-size: .625rem; line-height: 1.5; color: var(--tenue); text-align: center; }

.confia {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, auto); gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--linea);
}
.confia li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px;
  align-items: center;
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.45;
  color: var(--tenue);
}
.confia__ico { width: 22px; height: 22px; flex: none; color: var(--rojo-acento); }

.form { display: grid; gap: inherit; }
.field { display: grid; gap: 5px; }
.field__label, .legend {
  font-family: var(--font-ui); font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta);
}
.field__control {
  width: 100%; padding: 11px 13px;
  font-family: var(--font-body); font-size: .8125rem; color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linea); border-radius: var(--field-radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.field__control::placeholder { color: rgba(27, 27, 27, .44); }
.field__control:focus-visible {
  outline: none; border-color: var(--rojo-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo-acento) 24%, transparent);
}
/* La flecha del select va oscura: todos los desplegables viven en la sección
   clara, así que no hace falta una segunda versión. */
select.field__control {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231B1B1B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
}

.field__error {
  display: none; gap: 6px; align-items: center;
  font-size: .6875rem; line-height: 1.35; color: var(--rojo-error);
}
.field__control[aria-invalid="true"] { border-color: var(--rojo-error); }
.field__control[aria-invalid="true"] ~ .field__error { display: flex; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip__face {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  font-size: .75rem; color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linea); border-radius: var(--field-radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.chip__face::after {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(27, 27, 27, .32);
}
.chip__input:checked + .chip__face { border-color: var(--rojo-acento); }
.chip__input:checked + .chip__face::after {
  border-color: var(--rojo-acento); background: var(--rojo-acento);
  box-shadow: inset 0 0 0 2.5px var(--campo);
}
.chip__input:focus-visible + .chip__face {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo-acento) 24%, transparent);
}
.chip__input.is-invalid + .chip__face { border-color: var(--rojo-error); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--rojo-cta); color: #fff;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--rojo-on); }
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

.form__feedback:empty { display: none; }
.form__feedback {
  font-size: .6875rem; line-height: 1.4; color: var(--rojo-error); text-align: center;
}

.form-done { display: none; text-align: center; padding: clamp(16px, 3vh, 28px) 0; }
.form-done.is-on { display: grid; gap: 10px; justify-items: center; }
.form-done__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; color: var(--tinta);
}
.form-done__text { font-size: .8125rem; line-height: 1.5; color: var(--tenue); }

/* ============================================================
   PIE
   ============================================================ */

.foot { background: var(--negro); color: rgba(255, 255, 255, .66); }
.foot__in {
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(22px, 3vh, 32px);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: .6875rem;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: rgba(255, 255, 255, .82); }
.foot a:hover { color: #fff; }

/* ============================================================
   Coreografía de entrada
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js :where(.autos__cabeza, .modelo, .rail, .panel) { opacity: 0; translate: 0 16px; }
  .js.is-ready :where(.autos__cabeza, .modelo, .rail, .panel) {
    opacity: 1; translate: none;
    transition: opacity .62s var(--ease) var(--d, 0ms),
                translate .62s var(--ease) var(--d, 0ms);
  }
  .js .modelo { --d: 100ms; }
  .js .rail   { --d: 180ms; }
  .js .panel  { --d: 140ms; }
}

/* ============================================================
   Adaptación
   ============================================================ */

/* Entre 1081 y 1320 la columna izquierda todavía comparte fila con el
   formulario y cuatro rasgos quedan en tiras de 80 px. De a dos respiran.
   Sobre 1320 el contenedor ya llegó a su ancho máximo y los cuatro entran. */
@media (min-width: 1081px) and (max-width: 1320px) {
  /* En este tramo la columna izquierda todavía comparte fila con el
     formulario y quedan ~126 px de texto por badge. Apilar el icono sobre
     el título devuelve los 38 px que ocupaba al lado. */
  .rasgo, .confia li { grid-template-columns: 1fr; gap: 7px; }
}

@media (max-width: 1080px) {
  .autos__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; max-width: 640px; }
  .banner { height: min(72svh, 620px); }
}

@media (max-width: 980px) {
  .nav__in { grid-template-columns: auto 1fr; }
  .nav__menu, .nav__wa { display: none; }
  .nav__burger { display: block; }
}

@media (max-width: 720px) {
  :root { --nav-h: 64px; }
  /* Mismo encuadre que en desktop, sólo que la foto se recorta más. Un
     banner más bajo deja ver una franja más ancha de la foto: a 620 px de
     alto sólo entraba el 36% del ancho y el auto salía partido. Al 30% el
     auto entra entero y los sellos quedan fuera de cuadro en vez de
     asomar cortados por la mitad. */
  .banner { height: min(62svh, 500px); min-height: 440px; }
  .banner__foto { object-position: 30% center; }
  .banner__marca { width: clamp(126px, 38vw, 180px); margin-block-end: clamp(16px, 3vh, 26px); }
  .banner__in { padding-block: calc(var(--nav-h) + clamp(14px, 3vh, 26px)) clamp(20px, 4vh, 34px); }
  .mspecs { grid-template-columns: 1fr 1fr; }
  .rasgos, .confia { grid-template-columns: 1fr; }
  /* El precio salta de línea sólo en los modelos de nombre largo (ZS HEV,
     S5 EV, Cyberster) y la tarjeta cambiaba de alto al pasar de uno a otro.
     Bajándolo siempre, las seis miden igual. */
  .modelo__precio { margin-left: 0; flex-basis: 100%; }
  /* En móvil el pie va centrado: apilado y alineado a la izquierda dejaba
     todo el lado derecho vacío. */
  .foot__in { flex-direction: column; align-items: center; text-align: center; }
  .foot__links { justify-content: center; }
}

@media (max-width: 420px) {
  .headline { font-size: clamp(1.7rem, 8.4vw, 2.2rem); }
  /* A este ancho "MG Cyberster" ya no deja sitio al tipo en la misma línea y
     sólo esa tarjeta crecía. Bajándolo siempre, las seis miden igual. */
  .modelo__tipo { flex-basis: 100%; }
}

/* Firma del pie: el logo de Teojama junto al copyright. */
.foot__firma { display: flex; align-items: center; gap: 14px; }
.foot__teojama { flex: none; width: 112px; height: auto; opacity: .9; }

@media (max-width: 720px) {
  .foot__firma { flex-direction: column; gap: 10px; text-align: center; }
}