/* ============================================================
   core.css — capa compartida para las 4 landings (MB / smart / Subaru / MG)
   No contiene NINGÚN valor de marca. Cada skin define los tokens de abajo.
   ============================================================ */

/* --- Contrato de tokens que cada marca DEBE definir en su theme.css ---
   --bg  --fg  --surface  --line  --muted  --accent  --accent-ink
   --font-display  --font-body  --font-ui
   --radius  --field-radius
   Opcionales: --ease, --ease-exit, --dur-fast/base/slow  (hay defaults)
------------------------------------------------------------------- */

:root {
  /* Curvas: entrada decidida sin rebote. El rebote es de juguete, no de auto. */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-swap:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   180ms;
  --dur-base:   340ms;
  --dur-slow:   620ms;

  --shell: min(1560px, 100% - 2 * var(--gutter));
  --gutter: clamp(20px, 4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Muchos componentes de abajo declaran display, lo que gana sobre la regla
   [hidden] del navegador. Sin esto, ocultar por atributo deja de funcionar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.55vw + 13px, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* dd trae margin-inline-start: 40px del navegador: sin esto las listas de
   descripción salen descuadradas respecto a su etiqueta. */
h1, h2, h3, p, figure, fieldset, dl, dt, dd { margin: 0; }

/* Una lista CON CLASE es un contenedor de layout, no una lista de prosa: el
   padding-inline-start de 40px del navegador la separa del borde y rompe
   cualquier grilla. :where() deja la especificidad en cero, así una regla de
   marca que sí quiera padding sigue mandando sin tener que pelear. */
:where(ul[class], ol[class]) { padding-inline-start: 0; }

/* Trampa anti-bot. NO se usa display:none ni [hidden] a propósito: los bots que
   valen algo saltean lo que está oculto así. Se la saca de la pantalla, que para
   un lector automático sigue pareciendo un campo normal. Las personas no la ven,
   no la tabulan (tabindex="-1") y los lectores de pantalla la ignoran por el
   aria-hidden del contenedor. */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Puntos de carrusel ----------
   Mismo marcado en varias landings; los colores salen de los tokens de marca.
   Sin esto los <button> quedan con el estilo por defecto del navegador y, al
   ser inline, envuelven a dos filas en pantallas angostas. */

.dots { display: flex; align-items: center; gap: 7px; flex: none; }
.dot {
  flex: none;
  width: 7px; height: 7px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              width var(--dur-base, var(--dur, .3s)) var(--ease);
}
.dot[aria-current="true"] { width: 20px; border-radius: 4px; background: var(--accent); }
.dots--light .dot { background: rgba(255, 255, 255, .42); }
.dots--light .dot[aria-current="true"] { background: #fff; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Accesibilidad ---------- */

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-skip {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px;
  background: var(--fg); color: var(--bg);
  text-decoration: none; font-family: var(--font-ui);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.u-skip:focus-visible { transform: none; }

/* ---------- Reveal al hacer scroll (IntersectionObserver, ver lead-form.js) ---------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; translate: none; }

/* ---------- Primitivas de formulario ----------
   Neutras a propósito: el color y el radio salen de los tokens de marca. */

.field { display: grid; gap: 7px; }

.field__label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.field__control {
  width: 100%;
  padding: 13px 15px;
  /* --campo es la superficie del CAMPO, no la de la página. Con --bg, una
     marca cuyo formulario vive sobre una tarjeta clara dentro de una página
     oscura terminaba con los campos negros. */
  background: var(--campo, var(--bg));
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--field-radius, 0px);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.field__control::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.field__control:hover { border-color: color-mix(in srgb, var(--fg) 40%, var(--line)); }
.field__control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Select: quitamos la flecha del SO y ponemos la nuestra */
select.field__control {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
}

/* Validación: sólo después de que la persona interactuó (:user-invalid).
   Nunca sólo color — siempre borde + mensaje con icono. */
.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--danger, #C41E1E);
}
.field__control:user-invalid,
.field__control.is-invalid {
  border-color: var(--danger, #C41E1E);
  /* El tinte se mezcla contra la superficie del campo. Mezclarlo contra --bg
     daba un campo casi negro, con el texto negro encima e ilegible. */
  background: color-mix(in srgb, var(--danger, #C41E1E) 6%, var(--campo, var(--bg)));
}
.field__control:user-invalid ~ .field__error,
.field__control.is-invalid ~ .field__error { display: flex; }

/* Grupos de opción única: el error no cuelga de un campo sino del fieldset,
   así que se muestra cuando alguno de sus radios quedó inválido. */
fieldset:has(input:is(.is-invalid, :user-invalid)) > .field__error { display: flex; }

/* Autofill: que no lo pinte el navegador de amarillo */
.field__control:autofill,
.field__control:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  box-shadow: 0 0 0 100px var(--surface) inset;
}

/* ---------- Grupo de radios tipo "chip" (Tiempo de compra) ---------- */

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.chip { position: relative; display: block; cursor: pointer; }
.chip__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chip__face {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--field-radius, 0px);
  font-family: var(--font-ui); font-size: 0.875rem;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.chip__face::after {
  content: ""; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.chip__input:hover + .chip__face { border-color: color-mix(in srgb, var(--fg) 40%, var(--line)); }
.chip__input:checked + .chip__face { border-color: var(--accent); }
.chip__input:checked + .chip__face::after {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--accent);
}
.chip__input:focus-visible + .chip__face {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Botón ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%;
  padding: 17px 24px;
  border: 0; border-radius: var(--field-radius, 0px);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-ui); font-size: 0.9375rem;
  text-decoration: none;   /* también se usa sobre <a> en las diapositivas */
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover, color-mix(in srgb, var(--accent) 86%, #000)); }
.btn:active { transform: scale(0.99); }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.72; }
.btn__arrow { transition: translate var(--dur-base) var(--ease); }
.btn:hover .btn__arrow { translate: 5px 0; }

/* ---------- Estado de éxito del formulario ---------- */

.form-done {
  display: none;
  place-content: center;
  text-align: center;
  gap: 14px;
  min-height: 300px;
}
.form-done.is-on { display: grid; }
.form-done.is-on > * {
  animation: doneIn var(--dur-slow) var(--ease) backwards;
}
.form-done.is-on > :nth-child(2) { animation-delay: 70ms; }
.form-done.is-on > :nth-child(3) { animation-delay: 140ms; }
@keyframes doneIn { from { opacity: 0; translate: 0 14px; } }

/* ---------- Respeto por reduced-motion: se corta todo el movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; translate: none; }
}