/* ============================================================
   smart Ecuador — skin de marca
   Paleta y tipografía del smart Global Brand Compass v3.2 (p.54).
   El brief pide el mismo minimalismo que Mercedes pero con más color,
   por el target más joven: de ahí el lima como acento vivo y las
   esquinas redondeadas, que vienen de la propia geometría del logo.
   ============================================================ */

/* ---------- Tipografías oficiales FOR smart (ya venían en WOFF2) ---------- */

/* El Brand Compass (p. 51) fija la jerarquía: titulares en FOR smart Next
   Regular, y Sans Regular para subtítulos, cuerpo y CTA. Next es la firma de
   la marca; Sans es la que aporta claridad. */
@font-face {
  font-family: "smart Next";
  src: url("assets/fonts/next-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "smart Sans";
  src: url("assets/fonts/sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "smart Sans";
  src: url("assets/fonts/sans-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  /* Brand Compass p.54 — valores oficiales */
  --fg:      #141413;   /* Pantone 419 C */
  --bg:      #FFFFFF;
  --lima:    #D7E600;   /* Pantone 389 C — el color de smart */
  --lima-texto: #8A9B00;  /* mismo tono, oscurecido para poder usarlo en texto */
  --rojo:    #D2323D;   /* Pantone 1797 C */
  --gris:    #595959;   /* Cool Gray 10 C */
  --gris-cl: #969DA3;   /* Pantone 877 C */
  --surface: #F2F2F2;
  --line:    #DFE2E5;
  --muted:   #595959;
  --danger:  #D2323D;

  /* El CTA va en negro con el lima reservado para señalar estado:
     el lima sobre blanco no llega a 4.5:1 y un botón no puede fallar contraste. */
  --accent:       #141413;
  --accent-ink:   #FFFFFF;
  --accent-hover: #333331;

  --font-display: "smart Next", "smart Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "smart Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "smart Sans", "Helvetica Neue", Arial, sans-serif;

  /* smart es redondo: el isotipo es un círculo partido. */
  --campo: #FFFFFF;   /* superficie de los campos del formulario */
  --field-radius: 10px;
  --radius-card: 18px;

  --panel-w: clamp(380px, 32vw, 480px);
  --nav-h: 68px;
}

::selection { background: var(--lima); color: var(--fg); }

.hero, .slider, .panel, .foot { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ============================================================
   HEADER
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, 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,.05); }
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

/* Tres columnas para que el menú quede centrado de verdad, y no sólo
   empujado: los laterales miden 1fr cada uno y el menú va al medio. */
.nav__in {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(16px, 3vw, 46px);
  height: var(--nav-h); padding-inline: var(--gutter);
}
.nav__brand { display: flex; align-items: center; justify-self: start; }
.nav__brand img { width: 108px; height: auto; }

.nav__menu { display: flex; justify-self: center; gap: clamp(14px, 2vw, 30px); }
.nav__menu a {
  position: relative; padding-block: 6px;
  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: 3px; border-radius: 2px; background: var(--lima);
  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; justify-self: end; gap: 10px; }
.nav__wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  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: 10px 22px; border-radius: 999px;
  /* Lima con texto negro: al revés que el texto sobre blanco, esta
     combinación sí contrasta de sobra. */
  background: var(--lima); color: var(--fg);
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__cta:hover { background: color-mix(in srgb, var(--lima) 82%, var(--fg)); }

.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: none; cursor: pointer;
}
.nav__burger span {
  display: block; height: 2px; border-radius: 2px; 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 6px; rotate: 45deg; }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

.nav__movil { display: none; }
.nav__movil a {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--fg); text-decoration: none;
}
.nav__movil a:last-child { border-bottom: 0; }

/* ============================================================
   SLIDER PRINCIPAL
   ============================================================ */

.slider { position: relative; isolation: isolate; background: var(--fg); overflow: clip; }
.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;
  scale: 1.06; transition: scale 8s linear;
}
.sl.is-on .sl__img { scale: 1; }
.sl::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(20,20,19,.9) 0%, rgba(20,20,19,.74) 26%,
                    rgba(20,20,19,.4) 50%, rgba(20,20,19,.06) 70%, transparent 86%),
    linear-gradient(to top, rgba(20,20,19,.4) 0%, transparent 42%);
}
.sl__body {
  position: relative; z-index: 2;
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(48px, 9vh, 96px); color: #fff;
}
.sl__body > * { max-width: 20ch; }
.sl__text { max-width: 44ch; }

.sl__kicker {
  /* justify-self para que la píldora mida lo que su texto, no el ancho del
     bloque; y nowrap para que no parta "smart #1 BRABUS" en dos líneas. */
  justify-self: start;
  max-width: none; white-space: nowrap;
  display: inline-block;
  padding: 5px 12px; border-radius: 999px;
  background: var(--lima); color: var(--fg);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sl__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.3vw, 3.8rem); line-height: 1.02;
  letter-spacing: -0.02em; margin-top: 16px; text-wrap: balance;
}
.sl__text {
  font-size: clamp(.9375rem, 1.05vw, 1.125rem); line-height: 1.5;
  margin-top: 14px; color: rgba(255,255,255,.88);
}
.sl__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px,3vh,32px); max-width: none; }

@media (prefers-reduced-motion: no-preference) {
  .sl__kicker, .sl__title, .sl__text, .sl__cta { opacity: 0; translate: 0 16px; }
  .sl.is-on :where(.sl__kicker, .sl__title, .sl__text, .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; }
}

/* En el slider el CTA se invierte: sobre foto oscura un botón negro se pierde */
.btn--sm { width: auto; padding: 14px 26px; font-size: .875rem; font-weight: 700; }
.sl__cta .btn { background: var(--lima); color: var(--fg); }
.sl__cta .btn:hover { background: color-mix(in srgb, var(--lima) 84%, #fff); }
.btn-ghost {
  display: inline-flex; align-items: center;
  padding: 14px 26px; border-radius: var(--field-radius);
  border: 1px solid rgba(255,255,255,.55);
  font-size: .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,.14); }
.slider :where(a, button):focus-visible { outline-color: var(--lima); }

.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; flex-wrap: nowrap;
  gap: clamp(6px, 2.4vw, 14px);
  max-width: calc(100vw - var(--gutter) * 2);
  padding: 7px clamp(6px, 2vw, 10px); border-radius: 999px;
  background: rgba(20,20,19,.34); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
}
.slider__arrow {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none;
  color: rgba(255,255,255,.72); cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.slider__arrow:hover { color: #fff; }
.slider__pause {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: none; color: rgba(255,255,255,.72); cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.slider__pause:hover { color: #fff; }

/* ============================================================
   HERO — izquierda los 2 modelos, derecha el formulario
   ============================================================ */

.hero {
  display: grid; grid-template-columns: 1fr var(--panel-w);
  min-height: calc(100svh - var(--nav-h));
  overflow-x: clip;
}

.stage {
  position: relative; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: clamp(34px, 5vh, 60px) 0 clamp(20px, 3vh, 34px) var(--gutter);
  background: transparent;
}
.stage > * { position: relative; z-index: 1; }

.stage__bar { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lima); color: var(--fg);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.stage__copy { padding-block: clamp(12px, 2.6vh, 30px); padding-right: clamp(24px, 4vw, 72px); }
.headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 3.85vw, 3.6rem); line-height: 1.03;
  letter-spacing: -0.025em; max-width: 13ch;
}
.headline__line { display: block; overflow-y: clip; overflow-x: visible; }
.headline__line > span { display: block; white-space: nowrap; }
/* El mockup pide "contigo." en lima. El #D7E600 puro da 1.6:1 sobre blanco y
   no se lee, así que va un lima oscurecido que sí pasa el mínimo de texto
   grande (3:1) y se sigue leyendo como el color de smart. */
.headline__line--accent > span { color: var(--lima-texto); }
.lema {
  margin-top: clamp(12px, 1.8vh, 20px);
  font-size: clamp(.9375rem, 1vw, 1.125rem); color: var(--gris);
}
.lema b { font-weight: 700; color: var(--fg); }

/* ---------- Escenario del auto ---------- */

.showroom {
  position: relative; display: grid; place-items: center;
  min-height: clamp(120px, 16vh, 160px); max-height: 33vh;
  padding-right: clamp(20px, 4vw, 70px);
}
.ghost {
  position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 0; margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 11rem); line-height: .82; letter-spacing: -0.03em;
  color: #C6CCD1; white-space: nowrap; user-select: none; pointer-events: none;
  -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%);
}
.ghost__ch { display: inline-block; will-change: transform, opacity; }
.showroom__floor {
  position: absolute; bottom: 6%; left: 50%; translate: -50% 0; z-index: 0;
  width: min(66%, 560px); aspect-ratio: 7 / 1;
  background: radial-gradient(ellipse at center, rgba(20,20,19,.15) 0%, rgba(20,20,19,0) 68%);
  transition: opacity var(--dur-base) var(--ease-swap);
}
.shots { position: absolute; inset: 0; z-index: 1; }
.shot {
  position: absolute; inset: auto 0 0 0; margin-inline: auto;
  width: 100%; height: 82%; max-width: 660px;
  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; }

/* ---------- Selector de color: el gesto propio de smart ---------- */

.colores {
  position: absolute; z-index: 2;
  inset-block-end: 0; inset-inline-end: clamp(20px, 4vw, 70px);
  display: flex; align-items: center; gap: 10px;
}
.color {
  position: relative; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tono);
  box-shadow: inset 0 0 0 1px rgba(20,20,19,.16);
  transition: scale var(--dur-base) var(--ease);
}
.color::after {
  content: ""; position: absolute; inset: -5px;
  border: 2px solid var(--fg); border-radius: 999px;
  opacity: 0; scale: .8;
  transition: opacity var(--dur-fast) var(--ease), scale var(--dur-base) var(--ease);
}
.color:hover { scale: 1.12; }
.color[aria-pressed="true"]::after { opacity: 1; scale: 1; }
.color__nombre {
  position: absolute; inset-inline-end: 0; inset-block-end: 42px;
  font-size: .75rem; color: var(--gris); white-space: nowrap;
  opacity: 0; translate: 0 4px;
  transition: opacity var(--dur-fast) var(--ease), translate var(--dur-base) var(--ease);
}
.colores.is-hint .color__nombre { opacity: 1; translate: 0 0; }

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

.rail {
  display: flex; align-items: flex-end; gap: clamp(18px, 2.6vw, 40px);
  padding-right: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--line); 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-size: 1rem; font-weight: 700; color: var(--gris-cl);
  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: 3px; border-radius: 2px; background: var(--lima);
  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);
}
.spec { display: grid; gap: 3px; }
.spec__val { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.spec__key { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-cl); }

/* Cuatro rasgos. Viven dentro del panel del formulario, en 2x2. */
.rasgos {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px 22px;
  margin: 0; padding: 32px 0 0; list-style: none;
  border-top: 1px solid var(--line);
}
.rasgo { display: flex; gap: 10px; align-items: flex-start; }
.rasgo svg { flex: none; width: 34px; height: 34px; color: var(--fg);
  padding: 7px; border-radius: 999px; background: var(--lima); }
.rasgo div { display: grid; gap: 3px; min-width: 0; }
.rasgo b { font-size: .8125rem; line-height: 1.25; }
.rasgo span { font-size: .6875rem; line-height: 1.3; color: var(--gris); }

/* Tres sellos bajo el CTA */
.sellos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px solid var(--line);
}
.sellos li { display: grid; gap: 4px; justify-items: start; }
.sellos svg { width: 19px; height: 19px; color: var(--fg); }
.sellos span { font-size: .6875rem; line-height: 1.3; color: var(--gris); }

/* ============================================================
   PANEL DEL FORMULARIO
   ============================================================ */

.panel {
  position: relative; z-index: 2; display: grid; align-content: start;
  gap: clamp(18px, 2.6vh, 26px);
  margin: clamp(18px, 2.4vh, 28px) clamp(16px, 1.6vw, 28px);
  padding: clamp(26px, 3.3vh, 34px) clamp(24px, 2vw, 36px) clamp(22px, 2.6vh, 28px);
  background: #FFFFFF;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px rgba(20, 20, 19, .10), 0 2px 8px rgba(20, 20, 19, .04);
}
/* Sin fondo detrás del formulario: la tarjeta se apoya en blanco y se define
   sola por su sombra y su radio. */
.hero { position: relative; background: #FFFFFF; }

/* El arco lima del mockup, en CSS y no como foto: el selector de color sigue
   funcionando sobre fondo neutro y no pesa nada.
   Va en su propia capa que abarca las dos columnas: así cruza por detrás de la
   tarjeta del formulario sin cortarse en el borde de columna, y su recorte no
   toca la sombra de la tarjeta. Sin esta capa el círculo se derramaba sobre el
   pie cuando el panel se acorta al enviarse el formulario. */
.hero__fondo {
  position: absolute; inset: 0; z-index: 0;
  overflow: clip; pointer-events: none;
}
.hero__fondo::before {
  content: "";
  position: absolute;
  top: 2%; left: 36%;
  width: min(54%, 680px); aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #E9F27A 0%, #D7E600 46%, #BCCB00 100%);
  opacity: .5;
}
.hero__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 40%, rgba(255,255,255,.85) 100%);
}
.stage, .panel { position: relative; z-index: 1; }
.panel__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.9vw, 2rem); line-height: 1.05; letter-spacing: -0.02em;
}
.panel__intro { font-size: .9375rem; color: var(--gris); margin-top: 6px; }

.form { display: grid; gap: clamp(28px, 4.6vh, 46px); }
.legend { font-size: .8125rem; color: var(--gris); margin-bottom: 8px; }
.panel__legal { font-size: .6875rem; line-height: 1.5; color: var(--gris-cl); }
.panel__legal a { color: var(--gris); }
.form__feedback { font-size: .8125rem; color: var(--danger); min-height: 1lh; }

.field__control { border-radius: var(--field-radius); }
.chip__face { border-radius: var(--field-radius); }
.btn { border-radius: var(--field-radius); font-weight: 700; }

/* El check del radio en lima: es señal de estado, no texto, así que el
   contraste se resuelve con el borde oscuro alrededor. */
.chip__input:checked + .chip__face { border-color: var(--fg); background: #fff; }
.chip__input:checked + .chip__face::after {
  border-color: var(--fg); box-shadow: inset 0 0 0 4px var(--lima);
}

.form-done__star { width: 54px; height: auto; justify-self: center; }
.form-done__title { font-family: var(--font-display); font-weight: 400; font-size: 1.6875rem; line-height: 1.1; }
.form-done__text { color: var(--gris); font-size: .9375rem; }

/* ---------- Tarjetas de modelo con foto ---------- */

.mcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mcard { position: relative; display: block; cursor: pointer; }
.mcard__in { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mcard__face {
  display: grid; gap: 2px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--field-radius);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.mcard__img {
  width: 84%; height: auto; aspect-ratio: 16 / 9;
  margin: 0 auto 2px;
  object-fit: contain; object-position: center bottom;
}
.mcard__n { font-size: .9375rem; font-weight: 700; line-height: 1.2; }
.mcard__s { font-size: .6875rem; color: var(--gris); line-height: 1.25; }
.mcard__in:hover + .mcard__face { border-color: var(--gris-cl); }
.mcard__in:checked + .mcard__face {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg), 0 0 0 3px var(--lima);
}
.mcard__in:focus-visible + .mcard__face { outline: 2px solid var(--fg); outline-offset: 3px; }
.mcard__in.is-invalid + .mcard__face { border-color: var(--danger); }


/* ---------- Cotizador por pasos ---------- */

.pasos-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 4px;
  margin: 0; padding: 0; list-style: none;
}
.paso-chip { flex: 0 1 auto; min-width: 0; }
.paso-chip__btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--gris-cl);
  transition: color var(--dur-fast) var(--ease);
}
.paso-chip__btn:disabled { cursor: default; }
.paso-chip__n {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: .75rem; font-weight: 700;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.paso-chip__t {
  font-size: .75rem; font-weight: 700; line-height: 1.15; white-space: nowrap;
}
.paso-chip.is-on .paso-chip__btn { color: var(--fg); }
.paso-chip.is-on .paso-chip__n { background: var(--lima); border-color: var(--lima); color: var(--fg); }
.paso-chip.is-hecho .paso-chip__btn { color: var(--gris); }
.paso-chip.is-hecho .paso-chip__n { background: var(--fg); border-color: var(--fg); color: #fff; }
/* La línea entre pasos: se pinta cuando el anterior ya está hecho */
.paso-chip + .paso-chip { position: relative; padding-left: 8px; }
.paso-chip + .paso-chip::before {
  content: ""; position: absolute; left: -2px; top: 13px;
  width: 8px; height: 1.5px; background: var(--line);
}
.paso-chip.is-on::before, .paso-chip.is-hecho::before { background: var(--fg); }

.paso { display: grid; gap: clamp(28px, 4.6vh, 46px); }
.paso__ayuda { font-size: .8125rem; color: var(--gris-cl); }

/* Aviso de validación al intentar avanzar con campos vacíos.
   Ya no se ve: cada campo dice lo suyo, igual que en las otras tres landings,
   y dos textos señalando el mismo error es ruido. Se conserva en el DOM porque
   es role="alert" y resume en una frase todo lo que falta, que es justo lo que
   un lector de pantalla necesita oír al pulsar «Siguiente» —el borde rojo y la
   posición del mensaje, que son la pista visual, ahí no se perciben. */
.pasos-aviso {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pasos-acciones { display: grid; gap: 18px; }
.btn-paso--volver {
  justify-self: start;
  padding: 8px 4px; border: 0; background: none;
  font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--gris);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.btn-paso--volver:hover { color: var(--fg); }
/* Volver va debajo del botón principal, no compitiendo con él */
.pasos-acciones { grid-template-areas: "principal" "volver"; }
.btn-paso--siguiente, .pasos-acciones > .btn { grid-area: principal; }
.btn-paso--volver { grid-area: volver; }

/* Al cambiar de paso el bloque entra desde abajo, corto y sin rebote */
@media (prefers-reduced-motion: no-preference) {
  .paso:not([hidden]) { animation: pasoIn 380ms var(--ease) backwards; }
  @keyframes pasoIn { from { opacity: 0; translate: 0 10px; } }
}

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

.foot { padding-block: clamp(46px, 7vh, 82px) clamp(24px, 3vh, 34px); background: var(--fg); color: #fff; }
.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-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lima); margin-bottom: 16px;
}
.foot__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot__col a {
  font-size: .875rem; color: rgba(255,255,255,.72); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.foot__col a:hover { color: #fff; }
.foot__horario { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.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 rgba(255,255,255,.16); font-size: .75rem;
  color: rgba(255,255,255,.62);
}
.foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.foot__marca { width: 96px; height: auto; 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.5; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__legal a { color: rgba(255,255,255,.62); text-decoration: none; }
.foot__legal a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   SECUENCIA DE ENTRADA
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js .headline__line > span { translate: 0 105%; }
  .js :where(.lema, .stage__bar > *, .rail__item, .specs, .shots, .colores, .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 :where(.lema, .stage__bar > *, .rail__item, .specs, .colores, .ghost) {
    opacity: 1; transition: opacity 700ms var(--ease) var(--d, 0ms);
  }
  .js.is-ready .panel {
    opacity: 1; translate: 0 0;
    transition: opacity 760ms var(--ease) 640ms, translate 760ms var(--ease) 640ms;
  }
  .js .stage__bar > * { --d: 60ms; }
  .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 .rasgos { opacity: 0; }
  .js.is-ready .rasgos   { opacity: 1; transition: opacity 700ms var(--ease) 1000ms; }
  .js .ghost   { --d: 400ms; }
  .js .specs   { --d: 840ms; }
  .js .colores { --d: 940ms; }
  .js .rail__item:nth-child(1) { --d: 700ms; }
  .js .rail__item:nth-child(2) { --d: 760ms; }

  .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
   ============================================================ */

@media (min-width: 1081px) and (max-height: 950px) {
  .panel { margin-block: 22px; padding-block: 30px 24px; gap: 14px; }
  .panel__intro { display: none; }
  .form, .paso { gap: 30px; }
  .field { gap: 5px; }
  .field__control { padding-block: 11px; }
  .chip__face { padding-block: 10px; }
  .btn { padding-block: 15px; }
  .form__feedback { min-height: 0; }
  .sellos { padding-top: 12px; }
  .sellos span { font-size: .625rem; }
}
@media (min-width: 1081px) and (max-height: 860px) {
  .panel { margin-block: 18px; padding-block: 26px 20px; gap: 11px; }
  .form, .paso { gap: 24px; }
  .field__control { padding-block: 9px; }
  .chip__face { padding-block: 9px; }
  .btn { padding-block: 13px; }
  .legend { margin-bottom: 6px; }
  .sellos { display: none; }
}
@media (min-width: 1081px) and (max-height: 790px) {
  .panel { margin-block: 16px; padding-block: 24px 16px; gap: 9px; }
  .panel__title { font-size: 1.4375rem; }
  .form, .paso { gap: 20px; }
  .field__control { padding-block: 8px; }
  .chip__face { padding-block: 8px; }
  .chips { gap: 6px; }
  .btn { padding-block: 12px; }
}
@media (min-width: 1081px) and (max-height: 700px) {
  .panel { margin-block: 12px; padding-block: 20px 12px; gap: 7px; }
  .field__label { font-size: .6875rem; }
  .field__control { padding-block: 6px; }
  .chip__face { padding-block: 6px; }
  .btn { padding-block: 10px; }
  .panel__legal { display: none; }
}

@media (max-width: 900px) {
  /* Sin menú al medio, vuelve a dos columnas: marca y acciones. */
  .nav__in { grid-template-columns: auto 1fr; }
  .nav__menu, .nav__wa { display: none; }
  .nav__burger { display: flex; }
  .nav__movil { display: grid; padding: 6px var(--gutter) 18px; border-top: 1px solid var(--line); }
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .stage { padding-right: var(--gutter); padding-bottom: clamp(26px,4vh,40px); min-height: 92svh; }
  .panel { margin-inline: var(--gutter); }
  .form { max-width: 620px; }
  .js .panel { translate: 0 24px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .stage { min-height: auto; padding-bottom: 30px; }
  .stage__copy { padding-right: 0; }
  .headline { font-size: clamp(2.125rem, 10vw, 3rem); max-width: none; }
  /* El auto y el selector compartían el borde inferior del showroom y se
     montaban: .shots usa inset:0, que se mide contra la caja de padding, así
     que el padding-bottom no le reservaba nada. Ahora el auto termina donde
     empieza la fila de colores. */
  .showroom { padding-right: 0; padding-block: 8px 0; min-height: 264px; }
  .shots { inset: 0 0 54px; }
  .colores { inset-inline: 0; inset-block-end: 6px; justify-content: center; }
  .ghost { font-size: clamp(2.75rem, 16vw, 4.5rem); }
  .specs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .slider__view { min-height: 520px; }
  .sl__body > * { max-width: none; }
  .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; }
}

@media (min-width: 1800px) {
  .stage { padding-left: max(var(--gutter), calc((100vw - var(--panel-w) - 1400px) / 2)); }
}