/* ============================================================
   components.css — Componentes y micro-interacciones
   ============================================================ */

/* ---------- Icono base (blindaje: nunca un SVG a tamaño nativo) ---------- */
.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-4);
}
.section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  margin-bottom: var(--sp-12);
  max-width: 560px;
}

/* ---------- Logo ---------- */
.logo {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  /* El wordmark cabe SIEMPRE en una línea, y su tamaño se adapta al ancho.
     Estaba clavado a 22px para «AutoTipTop», que son 10 caracteres; la marca
     nueva son 21 y a 393px se partía en dos, doblando el alto de la cabecera y
     empujando la portada hacia abajo. Un wordmark partido no se lee como
     diseño, se lee como algo roto. Lo cazó el banco de móvil, no el ojo. */
  /* Medido, no estimado: a 393px el nav deja ~250px al wordmark y estas 21
     letras necesitan ~16px de ancho por cada px de cuerpo, así que 22px pedían
     360 y 18px seguían pisando el icono de cuenta — que es la clase que el
     banco NO marca, porque no se sale del viewport, sólo se monta encima. */
  font-size: clamp(13px, 3.4vw, 22px);
  white-space: nowrap;
  min-width: 0;
  letter-spacing: -0.5px;
  color: var(--c-text);
}
.logo span { color: var(--c-accent-text); }

/* Las pastillas de idioma (`.lang-btn`) y su separador vivían aquí. Se fueron con
   la franja superior el 2026-08-09: el idioma es ahora el globo del core en el nav
   (partials/header-actions.html), que es el canon y además dejó sitio para la forma
   de entrar. Reglas retiradas para no dejar CSS que nadie sabe si sigue vivo. */
/* `.theme-btn` se fue con la franja: el conmutador es ahora pieza del core
   (`.ha-theme`, estilada con los tokens --ha-* que este tema ya mapea). */

/* El cajón necesita separar sus enlaces de sus controles. */
.drawer__tools {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-start;
}

/* ---------- Nav links ---------- */
.nav__link {
  color: var(--c-text-dim);
  font-size: 14px;
  transition: color var(--dur-base);
}
.nav__link:hover { color: var(--c-text); }
.nav__link.is-active { color: var(--c-accent-text); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              opacity var(--dur-fast), background var(--dur-base), color var(--dur-base);
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn .icon { width: 18px; height: 18px; }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); font-weight: var(--fw-bold); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}
.btn--ghost:hover { border-color: var(--c-border-strong); }

.btn--dark { background: var(--c-bg); color: var(--c-text); font-weight: var(--fw-bold); }

/* El hover que MUEVE el elemento solo donde hay puntero de verdad: en táctil,
   :hover se queda pegado tras el toque y el botón parece encallado a media
   animación (canon Material/HIG: hover es estado de puntero, no de dedo). */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
  .btn--dark:hover { transform: translateY(-2px); }
}

.btn--nav {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: var(--fw-medium);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}
.btn--nav:hover { opacity: 0.88; }

.btn--block { width: 100%; }

/* ---------- Botón con máquina de estados ---------- */
.btn-state { position: relative; overflow: hidden; }
.btn-state[data-state="loading"] { pointer-events: none; opacity: 0.9; }
.btn-state[data-state="success"] { background: var(--c-success); color: var(--c-success-ink); }
.btn-state[data-state="error"]   { background: var(--c-error);   color: #fff; }
.btn-state[data-state="error"]   { animation: shake 0.4s var(--ease-std); }

.btn-state__icon { display: none; width: 18px; height: 18px; }
.btn-state[data-state="success"] .btn-state__icon--check,
.btn-state[data-state="error"]   .btn-state__icon--x { display: block; }

/* spinner CSS puro */
.spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(0,0,0,0.25);
  border-top-color: var(--c-accent-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-state[data-state="loading"] .spinner { display: inline-block; }
.btn-state[data-state="loading"] .btn-state__label { opacity: 0.6; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ---------- Hero text ---------- */
.hero__tag {
  display: inline-block;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  color: var(--c-accent-text);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-6);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: var(--fw-display);
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: var(--sp-6);
}
.hero__title em { font-style: normal; color: var(--c-accent-text); }
.hero__sub {
  color: var(--c-text-muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: var(--sp-8);
}

/* ---------- Trust badges ---------- */
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-item strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-display);
  color: var(--c-accent-text);
}
.trust-item span { font-size: 12px; color: var(--c-text-dim); letter-spacing: 0.04em; }

/* ============================================================
   WIZARD / FORM CARD
   ============================================================ */
.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  position: relative;
  box-shadow: var(--shadow-md);
}
.form-card__badge {
  position: absolute;
  top: -12px; left: 24px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

/* Cabecera: back + progreso */
.form-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  min-height: 28px;
}
.form-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  color: var(--c-text-dim);
  border: 1px solid var(--c-border-2);
  transition: color var(--dur-base), border-color var(--dur-base), opacity var(--dur-base);
}
.form-back:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.form-back[hidden] { display: none; }

/* Barra de progreso */
.progress {
  flex: 1;
  height: 4px;
  background: var(--c-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 25%;
  background: var(--c-accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-step) var(--ease-out-expo);
}

/* Dots */
.step-dots { display: flex; gap: 6px; }
.step-dots__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base), border-color var(--dur-base);
}
.step-dots__dot.is-done { background: var(--c-accent); border-color: var(--c-accent-text); }
.step-dots__dot.is-current { border-color: var(--c-accent-text); transform: scale(1.25); }

/*
  El VIEWPORT y las PANTALLAS: aquí ya no vive el mecanismo.

  Hasta 2026-08-26 estas reglas hacían la navegación a mano —posición absoluta,
  fundido cruzado y **24 píxeles** de desplazamiento— y ésa era la mitad del
  defecto que trajo el cliente: veinticuatro píxeles no se leen como cambio de
  pantalla, y durante la transición las dos preguntas estaban dentro de la misma
  caja recortada. Lo hace ahora `partials/step-stack.html` (core), con empuje de
  ancho completo, historial y movimiento reducido.

  Lo que se queda aquí es lo del TEMA: el reset del `<fieldset>` y el ritmo de la
  transición vía las variables que el mecanismo expone.
*/
.steps-viewport {
  --step-stack-duration: var(--dur-step);
  --step-stack-ease: var(--ease-out-expo);
}
.wizard-step {
  border: 0;            /* reset del borde nativo de <fieldset> */
  min-inline-size: 0;   /* evita el min-content de <fieldset> */
  padding: 0;
}

.wizard-step__q {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-5);
}

/* ---------- Quickfill (VIN / Typenschein → autorrellena) ---------- */
/* El atajo del VIN, ahora PLEGADO y debajo de la pregunta (ver wizard.html).
   `__hint` y `__sep` se retiran con su marcado: el rótulo pasó a ser el summary
   del plegable, y el separador «o introducirlo manualmente» sólo tenía sentido
   cuando este bloque iba ENCIMA de la elección. */
.quickfill { margin-top: var(--sp-4); }
.quickfill__body { padding-top: var(--sp-3); }
.quickfill__row { display: flex; gap: 8px; align-items: stretch; }
.quickfill__field { flex: 1; }
.quickfill__btn { padding: 0 16px; flex-shrink: 0; }
.quickfill__btn .spinner { display: none; }
.quickfill__btn.is-loading .spinner { display: inline-block; }
.quickfill__btn.is-loading .icon { display: none; }


/* ---------- Tarjetas táctiles (vehículo / condición) ---------- */
/* El REPARTO por ancho lo pone el core (`partials/choice-grid.html` →
   `assets/css/choice-grid.css`): `repeat(auto-fit, minmax(--choice-min, 1fr))`,
   que mide el sitio disponible en vez de adivinar el dispositivo. Aquí queda lo
   del tema, que es cómo se ve una tarjeta. contrato-base §14. */
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  text-align: left;
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  min-height: 44px;
  transition: transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
@media (hover: hover) and (pointer: fine) {
  .choice:hover { transform: scale(1.02); border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
}
/* En táctil el feedback es el de pulsación, no el de hover: se hunde al tocar
   y vuelve al soltar. Así el dedo recibe respuesta y nada se queda pegado. */
.choice:active { transform: scale(0.985); }
.choice.is-selected {
  border-color: var(--c-accent-text);
  background: var(--c-accent-soft);
}
.choice__icon { width: 30px; height: 30px; color: var(--c-text); }
.choice.is-selected .choice__icon { color: var(--c-accent-text); }
.choice__label { font-weight: var(--fw-medium); font-size: 15px; }
.choice__desc { font-size: 12px; color: var(--c-text-dim); line-height: 1.4; }
.choice__check {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.choice.is-selected .choice__check { opacity: 1; transform: scale(1); }
.choice__check .icon { width: 12px; height: 12px; }

/* ---------- Campos de formulario (floating label) ---------- */
.field { position: relative; margin-bottom: var(--sp-4); }
.field__control {
  width: 100%;
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-size: 15px;
  padding: 18px 14px 8px;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field__control::placeholder { color: transparent; transition: color var(--dur-fast); }
/* el placeholder (pista de ejemplo) solo se ve al enfocar, ya con la label flotada */
.field__control:focus::placeholder { color: var(--c-text-faint); }
.field__control:focus {
  border-color: var(--c-accent-text);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}
.field__label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 14px;
  color: var(--c-text-dim);
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out-expo), font-size var(--dur-fast), color var(--dur-fast);
}
.field__control:focus + .field__label,
.field__control:not(:placeholder-shown) + .field__label {
  transform: translateY(-9px);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}
.field--error .field__control { border-color: var(--c-error); }
.field--error .field__label { color: var(--c-error); }
.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-error);
}
/* El error no aparece de golpe: entra desde arriba, que es de donde "cae" del
   campo que lo produce. Sin desplazar nada más (el hueco ya lo ocupa el flujo). */
.field--error .field__error { display: flex; animation: errIn var(--dur-fast) var(--ease-out-expo); }
.field__error .icon { width: 13px; height: 13px; flex-shrink: 0; }
@keyframes errIn { from { opacity: 0; transform: translateY(-3px); } }

/* Teléfono con prefijo CH */
.field--phone .field__control { padding-left: 58px; }
.field__prefix {
  position: absolute;
  left: 14px; top: 16px;
  font-size: 15px;
  color: var(--c-text-dim);
  pointer-events: none;
}
.field--phone .field__label { left: 58px; }

/* ---------- Typeahead (marca) ---------- */
.typeahead { position: relative; }
.typeahead__list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: var(--z-sticky);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  transform-origin: top center;
  animation: dropIn var(--dur-fast) var(--ease-out-expo);
}
.typeahead__list[hidden] { display: none; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.96); } }
.typeahead__opt {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--c-text);
  transition: background var(--dur-fast);
}
.typeahead__opt:hover, .typeahead__opt.is-active { background: var(--c-accent-soft); color: var(--c-accent-text); }
.typeahead__empty { padding: 12px 14px; font-size: 13px; color: var(--c-text-dim); }
/* Una opción puede llevar un dato secundario a la derecha: de qué marca es este
   modelo, cuando todavía no se ha elegido marca. Va al final y en tono apagado —
   es contexto para reconocer la opción, no una segunda cosa que decidir. */
.typeahead__opt { display: flex; align-items: baseline; gap: 8px; }
.typeahead__opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typeahead__opt-sub { flex: none; font-size: 12px; color: var(--c-text-dim); }
.typeahead__opt:hover .typeahead__opt-sub,
.typeahead__opt.is-active .typeahead__opt-sub { color: inherit; opacity: .75; }

/* ---------- Segmented control (año) ---------- */
.segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--c-surface-3);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-2);
}
.segmented__seg {
  padding: 9px 4px;
  font-size: 13px;
  color: var(--c-text-dim);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.segmented__seg:hover { color: var(--c-text); }
.segmented__seg.is-selected { background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-medium); }

.link-toggle {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Slider (km) ---------- */
.slider-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--c-border-2);
  border-radius: var(--radius-pill);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  cursor: pointer;
  border: 3px solid var(--c-bg);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.slider:active::-webkit-slider-thumb { transform: scale(1.2); }
/* Firefox: mismo pulgar y mismo crecimiento al arrastrar que en WebKit/Blink
   (los pseudo-elementos no se pueden agrupar en una sola regla: si un motor no
   entiende el selector del otro, descarta el bloque entero). */
.slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  cursor: pointer;
  border: 3px solid var(--c-bg);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.slider:active::-moz-range-thumb { transform: scale(1.2); }
.slider-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.slider-readout strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-display);
  color: var(--c-accent-text);
}
.slider-readout span { font-size: 12px; color: var(--c-text-dim); }

/* ---------- Fila de campos (código postal + localidad) ----------
   El código postal suizo son 4 dígitos: darle el ancho de un campo entero
   invita a escribir otra cosa. La proporción comunica el formato esperado. */
.field-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.field-row .field { margin-bottom: var(--sp-4); }
.field--plz  { flex: 0 0 8.5rem; }
.field--city { flex: 1; min-width: 0; }

/* ---------- Chips sí/no ----------
   Dos opciones excluyentes no merecen el peso visual de las tarjetas grandes:
   con dos, la tarjeta grande obliga a leer de más para una respuesta binaria. */
.wizard-step__sub {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
}
/* `.chip-row` retirada el 2026-08-27: sus tres únicos usuarios —las preguntas
   de sí/no de la pantalla de ubicación— pasaron a `inline-field` del core, que
   pone el rótulo AL LADO en vez de encima. No quedaba nadie usándola. */
.chip {
  flex: 1;
  min-height: 44px;            /* objetivo táctil mínimo (Apple HIG / WCAG 2.5.5) */
  padding: 10px var(--sp-4);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-text);
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-md);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--c-border-strong); }
}
.chip:active { transform: scale(0.985); }
.chip.is-selected {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

/* Aclaración que aparece cuando la respuesta podría dar miedo ("no tengo los
   papeles"). Se anuncia por aria-live desde el marcado, no solo visualmente. */
.field-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  animation: errIn var(--dur-fast) var(--ease-out-expo);
}
.field-hint[hidden] { display: none; }

/* ---------- Consentimiento RGPD/nLPD ---------- */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--sp-4) 0;
  font-size: 12.5px;
  color: var(--c-text-muted);
  line-height: 1.5;
}
.consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--c-accent-text); flex-shrink: 0; }
.consent__note { display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--c-text-dim); }
.consent a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Pantalla final ---------- */
.wizard-done { text-align: center; padding: var(--sp-6) 0; }
.wizard-done__check {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent-text);
  animation: pop 0.5s var(--ease-spring);
}
.wizard-done__check .icon { width: 30px; height: 30px; }
/* `__title` y no `h3`: el titulo del acuse dejo de ser un encabezado el 2026-08-25 —
   vivia oculto en el DOM y se colaba como primer encabezado de la portada. Aqui solo
   cambia el selector; el aspecto es identico al que tenia. */
.wizard-done__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: var(--fw-display);
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}
.wizard-done p { color: var(--c-text-muted); font-size: 14px; margin-bottom: var(--sp-6); }
.wizard-done p.wizard-done__title { color: var(--c-text); font-size: 22px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.form-card.is-success { animation: cardPulse 0.5s var(--ease-out-expo); }
@keyframes cardPulse { 50% { transform: scale(1.01); } }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.step {
  position: relative;
  background: var(--c-surface);
  padding: var(--sp-8) var(--sp-6);
  overflow: hidden;
  transition: background var(--dur-base);
}
.step:hover { background: var(--c-surface-2); }
.step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.step:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.step__num {
  position: absolute;
  top: -10px; right: 14px;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: var(--fw-display);
  color: var(--c-step-num);
  line-height: 1;
}
.step__icon {
  width: 30px; height: 30px;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-5);
}
.step h3 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.step p { font-size: 13px; color: var(--c-text-dim); line-height: 1.6; }

/* ============================================================
   WHY US
   ============================================================ */
.why-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.why-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.why-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent-text);
}
.why-icon .icon { width: 20px; height: 20px; }
.why-list h3 { font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.why-list p { font-size: 13px; color: var(--c-text-dim); }

.why-visual {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  text-align: center;
}
.big-number {
  font-family: var(--font-display);
  /* Fluido: 96px en desktop, baja en móvil para que "500+" no fuerce el ancho
     de la tarjeta (antes 96px fijo en móviles >379px → desbordaba). */
  font-size: clamp(48px, 13vw, 96px);
  font-weight: var(--fw-display);
  color: var(--c-accent-text);
  line-height: 1;
}
.big-label { font-size: 14px; color: var(--c-text-dim); margin-top: var(--sp-2); }
.why-divider { width: 40px; height: 2px; background: var(--c-border-2); margin: var(--sp-6) auto; }
.regions { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.region-tag {
  background: var(--c-surface-3);
  border: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-dim);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
/*
  Desde el 2026-09-03 una región puede ser un ENLACE a su página de cantón —y
  puede no serlo, si esa página no existe en el idioma que se lee—, así que las
  dos formas tienen que verse igual en reposo y sólo la enlazable responder.

  No se sube a 44px de alto: con 12px de texto y 6px de padding la diana mide
  ~28px, por encima del mínimo de WCAG 2.2 AA (24×24), y llevarla a 44 cambiaría
  una fila de la portada que ya está aprobada. Se dice, no se hace por inercia.
*/
a.region-tag {
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
a.region-tag:hover,
a.region-tag:focus-visible {
  color: var(--c-text);
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.testimonial__stars { color: var(--c-accent-text); font-size: 14px; margin-bottom: var(--sp-4); letter-spacing: 2px; }
.testimonial p { font-size: 14px; color: var(--c-text-muted); line-height: 1.6; margin-bottom: var(--sp-5); }
.reviewer { display: flex; gap: var(--sp-3); align-items: center; }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333, #555);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: var(--fw-medium);
  flex-shrink: 0;
}
.reviewer__name { font-size: 13px; font-weight: var(--fw-medium); }
.reviewer__loc { font-size: 12px; color: var(--c-text-dim); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: var(--fw-display);
  color: var(--c-accent-ink);
  max-width: 520px;
}
.phone-big {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-display);
  color: var(--c-accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.phone-big .icon { width: 22px; height: 22px; }

/* ---------- Instalar la aplicación ----------
   Las reglas vivían aquí (`.install-cta`) y se fueron con el marcado: el botón es
   ahora `partials/pwa-install.html` del core, con su hoja en tokens. Lo único que
   este tema decide es cuánto respira dentro del pie — discreto a propósito: es una
   comodidad, no la acción principal. El resto (colores, foco, la instrucción de
   iOS) lo toma de los `--app-*` mapeados en tokens.css. */

/* ============================================================
   FOOTER
   ============================================================ */
.footer__brand p {
  color: var(--c-text-dim);
  font-size: 13px;
  line-height: 1.7;
  margin-top: var(--sp-3);
  max-width: 300px;
}
.footer h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--c-text-dim); font-size: 13px; transition: color var(--dur-base); }
.footer__col a:hover { color: var(--c-text); }
.footer__bottom p { font-size: 12px; color: var(--c-text-faint); }

/* ============================================================
   HAMBURGER + DRAWER + MOBILE BAR
   ============================================================ */
.nav__toggle {
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--c-text);
}
.hamburger { position: relative; width: 22px; height: 14px; }
.hamburger span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-base);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 6px; }
.hamburger span:nth-child(3) { top: 12px; }
.nav__toggle[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.drawer-overlay.is-open { opacity: 1; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(82vw, 320px);
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  z-index: var(--z-drawer);
  padding: var(--sp-8) var(--sp-6);
  transform: translateX(100%);
  transition: transform var(--dur-step) var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.drawer.is-open { transform: translateX(0); }
/* Cerrado = realmente oculto (el responsive pone display:flex y pisaba [hidden]),
   si no, el drawer fixed queda fuera de pantalla a la derecha y genera scroll horizontal. */
.drawer[hidden] { display: none; }
.drawer__close { align-self: flex-end; width: 40px; height: 40px; color: var(--c-text-dim); }
.drawer__close .icon { width: 22px; height: 22px; }
.drawer a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.drawer a:hover { color: var(--c-accent-text); }

.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-mobilebar);
  background: var(--c-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  /* Dos canales de contacto en icono + la conversión ocupando el resto.
     Antes eran dos columnas iguales; al entrar WhatsApp como tercero, la
     rejilla lo empujaba a UNA SEGUNDA FILA y la barra se comía el doble de
     alto — en móvil ese alto es lo más caro que hay (foto de Adán, 21:34).
     Los dos secundarios van a ancho fijo de icono y el primario se queda con
     todo lo demás: cabe en una fila, no se pierde ninguna acción y la
     conversión gana ancho respecto a antes. Canon: barra de acción de
     Booking/Airbnb — secundarias en icono, primaria dominante.
     El reparto va por flex (ver responsive.css): con columnas fijas la barra
     sólo cuadraría con el número exacto de botones previsto, y WhatsApp
     aparece o no según haya número guardado. */
  gap: 10px;
}
.mobile-bar a {
  display: flex;
  flex: 0 0 auto;
  min-width: 0; /* allow grid items to shrink — prevents the bar overflowing the viewport (fixed el → horizontal scroll) */
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  font-size: 15px;
}
.mobile-bar .icon { width: 18px; height: 18px; }
.mobile-bar__call { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border-2); }

/* Los dos canales de contacto son HERMANOS y se ven igual: misma píldora,
   mismo ancho, el color de marca sólo en el icono. Que uno fuera píldora y el
   otro texto suelto los hacía parecer cosas distintas. */
.mobile-bar__call,
.mobile-bar .wa-link {
  width: 52px;
  padding: 0;
  gap: 0;
}
/* El rótulo se OCULTA A LA VISTA, no se borra: un lector de pantalla lo sigue
   leyendo, así que el botón conserva su nombre. Un icono sin nombre es un botón
   mudo — y 52 px de ancho por 46 de alto pasa de sobra el mínimo táctil de 44. */
.mobile-bar__call span,
.mobile-bar .wa-link__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* La conversión se queda con todo el ancho que sobre, haya dos botones o tres.
   ⚠️ Va como `.mobile-bar a.mobile-bar__eval` a propósito: `.mobile-bar a` es
   clase+elemento (0,1,1) y le GANA a `.mobile-bar__eval` a secas (0,1,0), así
   que el `flex: 0 0 auto` de la regla general se imponía y el botón se quedaba
   a su ancho de contenido con un hueco al lado. Medido con el banco de móvil;
   razonarlo desde el CSS habría dado la respuesta contraria. */
.mobile-bar a.mobile-bar__eval { flex: 1 1 auto; }
.mobile-bar__eval { background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); }

/* ---------- Toast (errores no intrusivos) ---------- */
.toast-region {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-error);
  color: var(--c-text);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toastIn var(--dur-step) var(--ease-out-expo);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   MOVIMIENTO REDUCIDO — cierre del contrato de accesibilidad
   ------------------------------------------------------------
   tokens.css pone las DURACIONES a 0 con `prefers-reduced-motion`,
   lo que apaga las `transition` pero NO las `@keyframes`: cada
   animación lleva su duración escrita dentro. Estas son las que
   se movían igualmente (WCAG 2.3.3, movimiento por interacción).
   El spinner se mantiene: es el indicador de que algo está pasando
   y detenerlo sería peor (excepción de "movimiento esencial").
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wizard-done__check,
  .form-card.is-success,
  .btn-state[data-state="error"],
  .toast,
  .typeahead__list,
  .field--error .field__error { animation: none; }
}

/* ---------- Entrada animada del hero ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  .hero__content > * { animation: fadeUp var(--dur-slow) ease both; }
  .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__content > *:nth-child(2) { animation-delay: 0.12s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.19s; }
  .hero__content > *:nth-child(4) { animation-delay: 0.26s; }
  .hero__content > *:nth-child(5) { animation-delay: 0.33s; }
  .hero__form { animation: fadeUp var(--dur-slow) ease 0.3s both; }
}

/* ============================================================
   FAQ — acordeón nativo <details>/<summary>
   ------------------------------------------------------------
   Sin JavaScript: teclado y lector de pantalla funcionan por el
   propio elemento (canon GOV.UK / MDN). Solo tokens, cero colores
   literales. `prefers-reduced-motion` desactiva la animación.

   La altura SÍ se anima, sin JS: `interpolate-size: allow-keywords`
   hace interpolable `block-size: auto` y `::details-content` es la
   caja que <details> abre y cierra. Donde el navegador aún no lo
   soporta, el panel abre instantáneo con el fundido de respaldo de
   `.faq__a` — degradación, nunca roto (progressive enhancement).
   `interpolate-size` va acotado a .faq (es heredable) para no
   cambiar el comportamiento de altura del resto de la página.
   ============================================================ */
.faq {
  interpolate-size: allow-keywords;
  max-width: 76ch;
  margin-inline: auto;
  border-top: 1px solid var(--c-border);
}

.faq__item {
  border-bottom: 1px solid var(--c-border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--c-text);
  list-style: none;                 /* Firefox */
  transition: color var(--dur-fast) var(--ease-std);
}

/* El marcador por defecto de WebKit/Blink; lo sustituye el chevron. */
.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--c-accent-text); }

/* El foco va al <summary>, que es el control real: se marca ahí. */
.faq__q:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.faq__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.faq__item[open] .faq__q { color: var(--c-accent-text); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

/* La caja que <details> despliega. `content-visibility` con allow-discrete
   mantiene el contenido fuera del árbol mientras está cerrado (a11y y
   rendimiento) y lo conmuta al final de la transición, no de golpe. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur-step) var(--ease-out-expo),
              content-visibility var(--dur-step) allow-discrete;
}
.faq__item[open]::details-content {
  block-size: auto;
}

.faq__a {
  padding: 0 0.25rem 1.35rem;
  max-width: 68ch;
  color: var(--c-text-muted);
  line-height: 1.65;
  animation: faqReveal var(--dur-base) var(--ease-out-expo) both;
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron { transition: none; }
  .faq__a { animation: none; }
  .faq__item::details-content { transition: none; }
}

/* WhatsApp dentro de la barra inferior: la PIEZA es del core; aquí sólo van el
   encaje en esta barra y el color de la marca en el icono. */
.mobile-bar .wa-link {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--radius-md);
    min-height: 46px;
    height: 46px;
}
.mobile-bar .wa-link__icon { width: 20px; height: 20px; color: #25D366; }

/* ============================================================
   EL CAMINO CORTO — «¿prefiere que le llamemos?»

   Plegado y debajo del formulario, con `details` nativo: sin JavaScript, con
   teclado de fábrica y sin competir con la llamada a la acción principal. Un
   camino de menor esfuerzo puesto DELANTE se come al otro, y el otro es el que
   trae la información que decide el viaje.
   ============================================================ */
/* `hidden` es `display:none` de la hoja del NAVEGADOR, y cualquier regla del
   tema con `display` lo pisa sin que nada falle — el icono sale y abre una caja
   vacía. Pasó el 2026-08-14 con la campana del front y con la tarjeta de avisos,
   y por eso existe `FactoryPartialHiddenTest`. Aquí el camino corto nace oculto
   hasta la primera respuesta, así que la clase de defecto aplica: se blinda. */
.callback[hidden] { display: none; }

.callback {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
}
/* ── EL PLEGABLE, escrito UNA vez ──────────────────────────────────────────
   Este formulario tiene dos —el atajo del VIN y «¿prefiere que le llamemos?»— y
   dos plegables en la misma tarjeta que se vean distinto es deuda de diseño, no
   una variante (SCOPE §6: mismos tokens, mismos componentes, mismo patrón).
   El segundo nació copiando al primero con otro prefijo; al tocar los dos, se
   unifican — *strangler fig*, que es lo que manda SCOPE §5.

   ⚠️ Y NO sube al core, a propósito: aquí el MECANISMO —abrir, cerrar, teclado,
   lector de pantalla— lo da `<details>` de serie, así que lo único que queda es
   PIEL, y la piel es del tema. Subirla sería el §14 al revés. */
.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--c-text-dim);
  /* 44 px de área táctil: mínimo de las HIG de Apple y de Material. */
  min-height: 44px;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { color: var(--c-text); }
.disclosure__summary .icon { width: 16px; height: 16px; flex: 0 0 auto; }
/* El indicador de plegado, por CSS y sin un icono más que mantener. */
.disclosure__summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-step) var(--ease-out-expo);
}
.disclosure[open] .disclosure__summary::after { transform: rotate(-135deg); }
.callback__body { padding-top: var(--sp-3); }

/* El pie OFRECIDO: gana presencia, no se abre solo.
   Cuando algo va mal, el mismo elemento sube de peso —tinta plena y el icono en
   el color de marca— y su texto reconoce lo que acaba de pasar. Abrirlo por la
   persona se probó y se retiró el mismo día: empuja el contenido y cambia la
   pantalla bajo su dedo. Ofrecer no es imponer. */
.callback.is-offered .disclosure__summary { color: var(--c-text); }
.callback.is-offered .disclosure__summary .icon { color: var(--c-accent); }
.callback__sub {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  color: var(--c-text-dim);
}
.callback__done {
  margin: 0;
  padding: var(--sp-3) 0;
  font-size: 14px;
  color: var(--c-accent-text, currentColor);
}
@media (prefers-reduced-motion: reduce) {
  /* Sigue al patrón, no al consumidor: cuando el plegable se unificó, esta regla
     se quedó apuntando a `.callback__summary` y habría dejado al atajo del VIN
     con animación para quien pide que no la haya. WCAG 2.3.3. */
  .disclosure__summary::after { transition: none; }
}