/* =====================================================================
   BASE · Integral Automotriz
   Tokens de diseño, reseteo, tipografía y utilidades.
   Ver docs/diseno/09-design-system.md §2.
   Sin fuentes externas: pila del sistema. Sin degradados decorativos.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Neutros: el 85 % de la interfaz */
  --c-bg:            #FFFFFF;
  --c-bg-soft:       #F6F8FA;
  --c-bg-sunken:     #EDF1F4;
  --c-border:        #E2E8ED;
  --c-border-strong: #CBD5DD;

  /* Texto.
     Los grises se eligieron midiendo el contraste WCAG 2.1 real: deben superar
     4,5:1 tanto sobre blanco como sobre los dos fondos claros del diseño. */
  --c-text:          #14202B;   /* 16,5:1 sobre blanco */
  --c-text-body:     #3C4A56;   /*  9,1:1 sobre blanco */
  --c-text-muted:    #5F6E7C;   /*  5,2:1 en blanco · 4,9:1 en gris · 4,6:1 en hundido */
  --c-text-invert:   #FFFFFF;

  /* Marca: azul técnico */
  --c-primary:       #1E5F8C;
  --c-primary-hover: #174C71;
  --c-primary-soft:  #E8F1F7;
  --c-primary-dark:  #123A56;

  /* Acento: SOLO para la acción de compra y precios destacados */
  --c-accent:        #E4572E;
  --c-accent-hover:  #C7461F;
  --c-accent-soft:   #FDEDE8;

  /* Semánticos.
     Cada color de texto supera 4,5:1 sobre su propio fondo suave y sobre blanco,
     medido con la fórmula de contraste de WCAG 2.1 (docs/09 §5 exige AA). */
  --c-success:       #0A6A5B;   /* 5,7:1 sobre su fondo · 6,5:1 sobre blanco */
  --c-success-soft:  #E4F3F0;
  --c-warning:       #8F5500;   /* 5,5:1 sobre su fondo · 6,1:1 sobre blanco */
  --c-warning-soft:  #FDF3E3;
  --c-danger:        #A11F18;   /* 6,6:1 sobre su fondo · 7,7:1 sobre blanco */
  --c-danger-soft:   #FBEAE9;
  --c-premium:       #6F5714;   /* 6,3:1 sobre su fondo · 6,9:1 sobre blanco */
  --c-premium-soft:  #FBF4E4;

  /* Tipografía */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-xs:   0.8125rem;  /* 13 px */
  --fs-sm:   0.9375rem;  /* 15 px */
  --fs-base: 1.0625rem;  /* 17 px */
  --fs-lg:   1.25rem;    /* 20 px */
  --fs-xl:   1.625rem;   /* 26 px */
  --fs-2xl:  2rem;       /* 32 px */
  --fs-3xl:  2.5rem;     /* 40 px */

  --lh-tight: 1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20,32,43,.06);
  --shadow:    0 2px 8px rgba(20,32,43,.07);
  --shadow-lg: 0 8px 24px rgba(20,32,43,.10);

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* ---------------------------------------------------------------------
   2. Reseteo
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--c-primary);
  text-decoration: none;
}
a:hover { color: var(--c-primary-hover); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); }

figure { margin: 0 0 var(--sp-5); }
figcaption { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--sp-2); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
th, td {
  border: 1px solid var(--c-border);
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
}
th { background: var(--c-bg-soft); color: var(--c-text); font-weight: var(--fw-semibold); }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

blockquote {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
blockquote p:last-child { margin-bottom: 0; }

pre {
  background: var(--c-text);
  color: #E8F1F7;
  padding: var(--sp-4);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
}
code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--c-bg-sunken);
  padding: 2px 6px;
  border-radius: 4px;
}
pre code { background: none; padding: 0; color: inherit; }

mark { background: #FFF3C4; color: inherit; padding: 0 2px; border-radius: 3px; }

/* Foco visible siempre: nunca `outline: none` sin reemplazo (docs/09 §5). */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------
   3. Utilidades
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  /* `min-width: 0` para que las rejillas de dentro puedan encogerse por debajo
     del ancho de su contenido. Es la causa habitual de que una tarjeta con una
     imagen o una tabla ancha desborde la pantalla en móvil. */
  min-width: 0;
}

.container--narrow { max-width: 820px; }

.section { padding: var(--sp-8) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--tight { padding: var(--sp-6) 0; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section__head h2 { margin: 0; }
.section__more { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  background: var(--c-primary);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: top .15s ease-out;
}
.skip-link:focus { top: var(--sp-4); color: #fff; text-decoration: none; }

.text-muted { color: var(--c-text-muted); }
.text-center { text-align: center; }
.text-body { color: var(--c-text-body); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.hidden, [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   4. Movimiento (docs/09 §6): solo opacity, transform y background-color
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}