/* ==========================================================================
   AUTO-OK — main.css
   Sistema de estilos centralizado (tokens) + reset + tipografía base.
   Mobile-first: las reglas base son para 360-390px, luego se amplía con
   media queries min-width en responsive.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

:root {
  /* ---- Color: tomado directamente del logo real de AUTO-OK ----
     PROPUESTA (ver docs/decisiones.md): en el Prompt 01 se había definido
     un acento amarillo tipo cartel vial, pero el logo provisto no usa
     amarillo. Para que la web sea coherente con la marca real, el acento
     ahora es el azul del propio logo, y el verde se ajustó al tono exacto
     del check del emblema. La base navy se mantuvo casi igual (ya coincidía). */
  --color-asfalto-900: #0A2440;   /* navy del logo — headers, texto fuerte */
  --color-asfalto-700: #16385C;   /* variante para hover/estados */
  --color-senial-500:  #0061CB;   /* azul del logo — acento de acción/CTA */
  --color-senial-600:  #004A9E;
  --color-verde-600:   #0F9D5F;   /* verde del check del logo — confirmación */
  --color-rojo-600:    #C94A3B;   /* alerta, rechazado (no proviene del logo, es neutro de sistema) */
  --color-ambar-600:   #C97F0E;   /* advertencia/atención (no proviene del logo, es neutro de sistema) */
  --color-bg:           #F3F5F7; /* fondo general, gris-celeste muy claro */
  --color-bg-alt:        #FFFFFF;
  --color-linea:        #D9DEE4;
  --color-texto:        #16202C;
  --color-texto-suave:  #4B5A68;
  --color-texto-inverso:#F3F5F7;

  /* ---- Tipografía ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-cuerpo:  "Inter", system-ui, sans-serif;
  --font-patente: "JetBrains Mono", "Courier New", monospace;

  --texto-xs:   0.8125rem;
  --texto-sm:   0.9375rem;
  --texto-base: 1rem;
  --texto-md:   1.125rem;
  --texto-lg:   1.375rem;
  --texto-xl:   1.75rem;
  --texto-2xl:  2.25rem;

  /* ---- Espaciado (escala de 4px) ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* ---- Bordes y radios ---- */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 18px;
  --borde: 1px solid var(--color-linea);

  /* ---- Sombras ---- */
  --sombra-sm: 0 1px 2px rgba(16, 35, 59, 0.06);
  --sombra-md: 0 4px 16px rgba(16, 35, 59, 0.10);
  --sombra-lg: 0 12px 32px rgba(16, 35, 59, 0.16);

  /* ---- Layout ---- */
  --ancho-contenido: 480px;   /* referencia mobile-first */
  --ancho-maximo: 1120px;     /* tope en desktop */
  --altura-tap-minima: 48px;  /* área táctil cómoda */
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  font-size: var(--texto-base);
  line-height: 1.5;
  overflow-x: hidden; /* sin scroll horizontal, ver regla mobile-first */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--esp-3) 0;
  color: var(--color-asfalto-900);
}
h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-md); }
p  { margin: 0 0 var(--esp-4) 0; color: var(--color-texto-suave); }

/* ---- Foco visible (accesibilidad) ---- */
:focus-visible {
  outline: 3px solid var(--color-senial-500);
  outline-offset: 2px;
}

/* ---- Layout base ---- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--esp-4);
}
.seccion {
  padding: var(--esp-7) 0;
}
.seccion--alt {
  background: var(--color-bg-alt);
  border-top: var(--borde);
  border-bottom: var(--borde);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Evita que un salto a una ancla interna (ej. el CTA del header hacia
   #patente o #iniciar-pedido) quede tapado por el header sticky —
   detectado durante las pruebas de navegación mobile/desktop. */
[id] { scroll-margin-top: 84px; }

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}