/*
 * Tokens del design system (docs/design_system.md §12.1–12.3).
 * Montserrat alojada en el propio servidor: ningún recurso se carga de un CDN.
 * Fuente: @fontsource/montserrat 5.3.0, subconjunto latino, licencia OFL (fonts/montserrat/OFL.txt).
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-400-normal.e7198b2dcb57.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-500-normal.f96e8aab37e8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-600-normal.9e606da1cbeb.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-700-normal.1c0792ac34ef.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color: manual oficial (§12.1) ---
     Contraste sobre blanco entre corchetes. Por debajo de 4,5:1 NO sirven para texto normal. */
  --navy: #001862;            /* [16,1] texto, botón primario, header, footer */
  --blue: #3e87de;            /* [3,7]  acentos, iconos, bordes, texto ≥ 24 px */
  --blue-fundacion: #5b87da;  /* [3,5]  igual que --blue */
  --orange-oclac: #ff3f14;    /* [3,5]  acentos del Observatorio, texto ≥ 24 px */
  --green-pidel: #4e9d2d;     /* [3,4]  acentos de Tecnología, texto ≥ 24 px */
  --green-bendicion: #066351; /* [7,2]  texto y acentos de La Bendición */
  --lime-bendicion: #a2cb2f;  /* [1,9]  solo decorativo o sobre navy */
  --sky-bendicion: #0699dc;   /* [3,2]  solo decorativo o grande */

  /* Tonos derivados para texto y enlaces (pendientes de validar con la Dirección, D-006) */
  --blue-text: #1e6fb8;       /* [5,2] */
  --orange-text: #c7320e;     /* [5,4] */
  --green-text: #3d7f22;      /* [4,9] */

  /* Neutros */
  --ink: #0f172a;             /* [17,9] */
  --ink-2: #475569;           /* [7,6] */
  --muted: #64748b;           /* [4,8] */
  --line: #e2e8f0;
  --surface: #f8fafc;
  --white: #ffffff;

  /* Hover de los interactivos: navy oscurecido un 10 % (§12.4) */
  --navy-hover: #001658;
  --green-bendicion-hover: #055949; /* misma regla, para el botón de WhatsApp */

  /* --- Tipografía (§12.2) --- */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-body: 1.0625rem;       /* 17 px */
  --fs-small: 0.875rem;
  --lh-body: 1.6;
  --measure: 70ch;            /* longitud máxima de línea en textos */

  /* --- Espaciado, escala de 4 px (§12.3) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Contenedor y márgenes laterales (§12.3) ---
     Puntos de quiebre (§11.1): 360 · 640 · 768 · 1024 · 1280. Las variables CSS no
     funcionan dentro de @media: los valores se repiten literalmente en main.css. */
  --container-max: 1280px;
  --gutter: 20px;

  /* --- Forma --- */
  --radius-control: 6px;      /* inputs y botones */
  --radius-card: 12px;
  --radius-pill: 999px;       /* etiquetas */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);

  /* --- Movimiento (sesión de diseño, pendiente de ficha) --- */
  --duracion-entrada: 0.7s;
  --easing-entrada: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out: arranca y se posa despacio */
  --desplazamiento-entrada: clamp(48px, 8vw, 120px);  /* de lado, desde el borde de la pantalla */
  --escalon-entrada: 80ms;    /* retraso entre tarjetas de una misma fila */
  --duracion-carrusel: 0.6s;  /* cambio de afiche en /formacion/ */
  --desplazamiento-carrusel: 48px;

  /* --- Accesibilidad (§11.1, §11.3) --- */
  --focus-ring: 3px solid var(--blue);
  --focus-offset: 2px;
  --touch-min: 44px;
}

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