/* ============================================================
   base.css — cimiento del sistema de diseño
   Dirección: Clorofila (ver DISENO.md §2.1)
   Sin build: se sirve tal cual desde /public/css.
   Todo componente lee SIEMPRE los tokens var(--*), nunca hex sueltos.
   ============================================================ */

/* ---- Fuentes auto-hospedadas (no Google Fonts: rendimiento + privacidad) ---- */
@font-face {
  font-family: "Lato";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/lato-700.woff2") format("woff2");
}
@font-face {
  /* Oswald variable: un archivo cubre 200–700 */
  font-family: "Oswald";
  font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("/fonts/oswald.woff2") format("woff2");
}

/* ---- Tokens (Clorofila) ---- */
:root {
  /* Fondo y superficie — luminoso */
  --color-bg:            #fbfcf9;
  --color-surface:       #ffffff;
  --color-surface-tint:  #edf5ee;

  /* Texto — verde-negro profundo */
  --color-ink:           #14231a;
  --color-text-body:     #24312a;
  --color-text-muted:    #5f7267;
  --color-border:        rgba(20, 35, 26, .13);
  --color-border-strong: rgba(20, 35, 26, .24);  /* filo de marcos y estado activo */
  --color-bg-glass:      rgba(251, 252, 249, .92); /* barras fijas con desenfoque */

  /* Marca */
  --color-brand-green:       #009848;  /* relleno vivo */
  --color-brand-green-text:  #0a7d3e;  /* verde SEGURO para texto sobre blanco */
  --color-brand-blue:        #0068a0;  /* acento "ciencia" */

  /* Error — estaba en DISENO.md §2.1 pero nunca se declaró aquí, así que
     `var(--color-danger)` no resolvía: el asterisco de campo obligatorio y
     los mensajes de validación salían del color del texto normal. Un error
     que no se ve como error. */
  --color-danger:        #dc2626;  /* texto de error sobre blanco (AA) */
  --color-danger-strong: #a12626;  /* más oscuro: el aviso va sobre fondo rosa */
  --color-danger-bg:     #fdecec;
  --color-danger-border: #f4c4c4;

  /* Gráficos: una sola tinta en dos pasos, del «antes» (claro) al «después»
     (oscuro). Pareja validada: el paso claro mantiene 2,28:1 sobre blanco. */
  --color-chart-before: #66bd8b;
  --color-chart-after:  var(--color-brand-green-text);

  /* Tipografía */
  --font-heading: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Rótulos técnicos: unidades, antetítulos, metadatos. Mono del sistema:
     cero descargas. Nunca para párrafos. */
  --font-label:   ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica (mobile-first, rem) */
  --step--1: 0.875rem;   /* 14px — leyendas */
  --step-0:  1rem;       /* 16px — cuerpo */
  --step-1:  1.15rem;    /* entradilla */
  --step-2:  1.4rem;     /* h3 */
  --step-3:  1.9rem;     /* h2 */
  --step-4:  2.6rem;     /* h1 */
  --step-5:  clamp(2.6rem, 6vw, 3.6rem); /* hero */

  /* Espaciado — base 8 */
  --space-xs: .25rem;  --space-sm: .5rem;   --space-md: 1rem;
  --space-lg: 1.5rem;  --space-xl: 2.5rem;  --space-2xl: 4rem;

  /* Forma y filo (2026-10-16). La tarjeta ya no «flota»: se marca con un
     filo de 1 px hecho con box-shadow, que no mueve el layout, y la sombra
     queda para lo que de verdad se eleva (hover). Ver DISENO.md §2.2. */
  --radius-sm:   6px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-card:  0 0 0 1px var(--color-border), 0 1px 2px rgba(20, 35, 26, .04);
  --shadow-hover: 0 0 0 1px var(--color-border-strong), 0 12px 28px rgba(20, 35, 26, .08);

  --content-max: 1180px;
  --header-height: 69px;  /* cabecera fija: 68 px + su filo; ancla las barras fijas */
}

/* ---- Reset ligero ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p  { margin: 0 0 1em; max-width: 68ch; }
a  { color: var(--color-brand-green-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-brand-blue); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(0, 152, 72, .18); }
/* Alpine: oculta elementos con x-cloak hasta que el framework arranca,
   así la insignia de cotización no parpadea con un "0" al cargar. */
[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Utilidades base ---- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.container--narrow { max-width: 800px; }

/* ---- Sección genérica ---- */
/* El encabezado (.section__head) vive en components/section-head.css */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Oculta a la vista pero lo deja disponible para lectores de pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Antetítulo como rótulo de ficha técnica: mono, pequeño y con aire. */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--color-brand-green-text);
  margin: 0 0 var(--space-md);
}

/* Los botones viven en components/button.css, que el layout carga siempre. */