/*
  Tokens de Finanzas Seguras para la web.
  Fuente única: GL-001 «Sistema de diseño de Finanzas Seguras», secciones 2, 3, 5 y 11.
  Nombre CSS = nombre del token con guiones (web.boton.alto-min -> --web-boton-alto-min).
  El resto del CSS solo cita estas variables. Si un valor cambia, se cambia aquí.
  Los puntos de corte (web.corte.*) no pueden ser variables en @media: están en
  estilos.css como 37.5em (tableta) y 60em (escritorio), comentados con su token.
*/
:root {
  /* 2.1 Color de marca [MEDIDO] */
  --color-marca-verde: #094E39;
  --color-marca-dorado: #E7C27E;
  --color-marca-blanco: #FFFFFF;
  /* 2.1 Verde de apoyo (M1): solo detalles sobre blanco. Nunca texto sobre crema. */
  --color-apoyo-verde-detalle: #087B55;
  /* P7 sí, 2026-10-24 */
  --color-apoyo-crema-folleto: #F4E4A9;

  /* 3. Fuentes (P2 aprobada). Alojadas en /fuentes (estilos.css); respaldo del sistema mientras cargan. */
  --fuente-titular: "Lora", Georgia, "Times New Roman", serif;
  --fuente-lema: "Lora", Georgia, "Times New Roman", serif;
  --fuente-rotulo: "League Spartan", "Segoe UI", Arial, sans-serif;
  --fuente-cuerpo-pantalla: "League Spartan", "Segoe UI", Arial, sans-serif;

  /* 5. Espaciado: espacio.1 a espacio.7 */
  --espacio-1: 8px;
  --espacio-2: 16px;
  --espacio-3: 24px;
  --espacio-4: 32px;
  --espacio-5: 48px;
  --espacio-6: 64px;
  --espacio-7: 96px;

  /* 11.2 Anchos y márgenes */
  --web-ancho-contenedor: 1120px;
  --web-ancho-texto: 65ch;
  --web-ancho-titular: 22ch;
  --web-margen-movil: 20px;
  --web-margen-tableta: 32px;
  --web-margen-escritorio: 48px;

  /* 11.3 Escala tipográfica */
  --web-tipo-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --web-tipo-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --web-tipo-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
  --web-tipo-lema: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --web-tipo-rotulo: 1rem;
  --web-tipo-cuerpo: 1.125rem;
  --web-tipo-boton: 1.125rem;
  --web-tipo-nota: 1rem;
  --web-interlineado-h1: 1.15;
  --web-interlineado-h2: 1.15;
  --web-interlineado-h3: 1.2;
  --web-interlineado-lema: 1.3;
  --web-interlineado-rotulo: 1.3;
  --web-interlineado-cuerpo: 1.6;
  --web-interlineado-nota: 1.5;
  --web-espaciado-rotulo: 0.08em;
  --web-espaciado-lema: 0.02em;

  /* 11.4 Espaciado y esquinas (P9 no: todo 8 px) */
  --web-seccion-relleno-movil: var(--espacio-6);
  --web-seccion-relleno-escritorio: var(--espacio-7);
  --web-espacio-titular-texto: var(--espacio-3);
  --web-espacio-rotulo-titular: var(--espacio-1);
  --web-espacio-entre-tarjetas: var(--espacio-3);
  --web-espacio-entre-botones: var(--espacio-2);
  --web-radio-tarjeta: 8px;
  --web-radio-panel: 8px;
  --web-radio-boton: 8px;

  /* 11.6 Botones */
  --web-boton-alto-min: 48px;
  --web-boton-relleno-vertical: 14px;
  --web-boton-relleno-lateral: 28px;
  --web-boton-icono: 24px;
  --web-boton-icono-separacion: 8px;
  --web-borde: 2px;

  /* 11.7 Foco y objetivos táctiles */
  --web-foco-grosor: 3px;
  --web-foco-separacion: 3px;
  --web-foco-color-claro: var(--color-marca-verde);
  --web-foco-color-marca: var(--color-marca-dorado);
  --web-tactil-minimo: 48px;

  /* 11.8 Tarjeta de servicio */
  --tarjeta-servicio-circulo: 56px;
  --tarjeta-servicio-icono: 28px;
  --tarjeta-servicio-relleno-movil: var(--espacio-3);
  --tarjeta-servicio-relleno-tableta: var(--espacio-4);

  /* 11.10 Logo en la web */
  --web-logo-alto-movil: 48px;
  --web-logo-alto-escritorio: 56px;
}