/* ─────────────────────────────────────────────────────────────
   SeguritoSegurito · Sitio v2 · Tokens
   Tono: amable/cercano · road-trip cálido · seriedad asegurada
   Las fuentes (Bricolage Grotesque + Manrope) se cargan vía <link>
   en el <head> del HTML para evitar el encadenamiento de @import.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Anclas — azul Segurito reinterpretado */
  --ink:        #0E1A47;
  --ink-2:      #2A3870;
  --ink-3:      #5C6688;
  --ink-4:      #9AA0BA;

  /* Crema cálida (no gris frío) */
  --cream:      #FBF5E9;
  --cream-2:    #F4ECD9;
  --paper:      #FFFFFF;
  --line:       #ECE3CD;
  --line-soft:  #F4ECD9;

  /* Atardecer carretera — acento principal */
  --sun:        #E07A3C;
  --sun-2:      #C46728;
  --sun-soft:   #FBD9B8;
  --sun-tint:   #FFF1E1;

  /* Indicadores */
  --leaf:       #2F8B5A;
  --leaf-soft:  #DFF1E5;
  --whats:      #14A085;

  /* Texto */
  --muted:      #6B6557;
  --muted-2:    #8A8474;

  --shadow-sm:  0 0.0625rem 0.125rem rgba(14,26,71,.06), 0 0.0625rem 0.0625rem rgba(14,26,71,.04);
  --shadow-md:  0 0.375rem 1.375rem -0.5rem rgba(14,26,71,.18), 0 0.125rem 0.375rem rgba(14,26,71,.06);
  --shadow-lg:  0 1.5rem 3rem -1rem rgba(14,26,71,.22), 0 0.375rem 0.875rem rgba(14,26,71,.08);

  --radius-sm:  0.625rem;
  --radius:     1rem;
  --radius-lg:  1.375rem;
  --radius-xl:  1.75rem;

  --ff-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ff-body:    "Manrope", system-ui, sans-serif;

  --maxw:       82.5rem;
}

/* ── Paleta dinámica por producto ──────────────────────────────
   USA (default) usa la paleta de :root (Navy + Coral).
   México reconfigura las 6 variables clave a "Pino + Durazno" y, como
   estas variables gobiernan todo el sitio, reskinea la página completa.
   El <script> inline del <head> fija data-product antes de pintar, así
   que entrar con ?v=mx carga directamente en Pino + Durazno. */
html[data-product="mx"] {
  --ink:        #143A2E;   /* pino */
  --ink-2:      #2C5747;
  --ink-3:      #5C6E64;   /* gris verdoso (texto secundario) */
  --ink-4:      #97A69C;   /* gris verdoso claro */
  --sun:        #E8924A;   /* durazno · CTA principal */
  --sun-2:      #C4702A;
  --sun-soft:   #FADFC0;
  --sun-tint:   #FBF2E3;
}
/* Transición suave al alternar producto (solo superficies grandes). */
body, .hero, .why, .footer, .dircard, .cotiza-fab__btn { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }

/* ── Reset suave ── */
*, *::before, *::after { box-sizing: border-box; }

/* Tamaño raíz: gobierna toda la escala en rem.
   16px en desktop; sube a 20px en celular (×1.25) — ver styles.css. */
/* Root fluido en escritorio: 16px en laptops chicas → ~19px en monitores grandes.
   En celular se sobreescribe a 20px (ver media query en styles.css). */
html { font-size: clamp(16px, 1vw + 4px, 19px); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul { margin: 0; padding: 0; list-style: none; }

img { display: block; max-width: 100%; }

.ff-display { font-family: var(--ff-display); letter-spacing: -0.02em; }
.ff-body    { font-family: var(--ff-body); }

:focus-visible {
  outline: 0.1875rem solid var(--sun);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}

.visually-hidden {
  position: absolute;
  width: 0.0625rem; height: 0.0625rem;
  padding: 0; margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
