/* Proyecto SHE · Sistema de diseño
   Fuente: Identidad de Marca/Elementos (paleta, tipografías).
   Contrastes verificados contra WCAG AA (texto normal ≥ 4.5:1, texto grande ≥ 3:1). */

/* ---------- Tipografías de marca ---------- */
@font-face {
  font-family: "DM Serif Display";
  src: url("../assets/fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../assets/fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ---------- Color: paleta de marca ---------- */
  --violeta: #7C5CEC;        /* blanco sobre violeta 4.6:1 · negro sobre violeta 4.3:1 (solo texto grande) */
  --violeta-oscuro: #5A3BD6; /* enlaces y texto violeta sobre blanco 6.4:1 */
  --lima: #E5F00B;           /* solo acento · negro sobre lima 16:1 · nunca texto sobre blanco */
  --negro: #0B0B0F;          /* texto principal 19.6:1 sobre blanco */
  --blanco: #FFFFFF;
  --lavanda: #E9E3FD;        /* fondos y tarjetas */
  --lima-suave: #F5F9B8;     /* fondos y tarjetas */

  /* ---------- Color: neutros funcionales ---------- */
  --gris-texto: #4A4A55;     /* texto secundario 8.6:1 sobre blanco, 7.4:1 sobre lavanda */
  --gris-claro: #B9B9C6;     /* texto secundario sobre negro 9.7:1 */
  --borde: #E4E4EC;

  /* ---------- Roles ---------- */
  --color-fondo: var(--blanco);
  --color-texto: var(--negro);
  --color-texto-suave: var(--gris-texto);
  --color-enlace: var(--violeta-oscuro);
  --color-foco: var(--violeta-oscuro);

  /* ---------- Tipografía ---------- */
  --fuente-titulos: "DM Serif Display", Georgia, "Times New Roman", serif;
  --fuente-texto: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida (mobile → desktop), relación aprox. 1.25 */
  --texto-xs: 0.8125rem;                                   /* 13px */
  --texto-sm: 0.9375rem;                                   /* 15px */
  --texto-base: 1rem;                                      /* 16px */
  --texto-md: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);       /* 16 → 18 */
  --texto-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 → 24 */
  --texto-xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);      /* 28 → 40 */
  --texto-2xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);     /* 36 → 60 */
  --texto-stat: clamp(2.5rem, 2.1rem + 1.8vw, 3.5rem);      /* 40 → 56 */

  --interlineado-titulos: 1.08;
  --interlineado-texto: 1.6;
  --tracking-mayus: 0.08em;

  /* ---------- Espaciado: múltiplos de 8px ---------- */
  --esp-1: 0.5rem;   /*   8 */
  --esp-2: 1rem;     /*  16 */
  --esp-3: 1.5rem;   /*  24 */
  --esp-4: 2rem;     /*  32 */
  --esp-5: 2.5rem;   /*  40 */
  --esp-6: 3rem;     /*  48 */
  --esp-8: 4rem;     /*  64 */
  --esp-10: 5rem;    /*  80 */
  --esp-12: 6rem;    /*  96 */
  --esp-16: 8rem;    /* 128 */

  --seccion-y: clamp(var(--esp-6), 6vw, var(--esp-10));
  --gutter: var(--esp-2);
  --ancho-max: 75rem; /* 1200px */
  --ancho-texto: 40rem;

  /* ---------- Forma y profundidad ---------- */
  --radio-sm: 0.5rem;
  --radio-md: 1rem;
  --radio-lg: 1.5rem;
  --radio-xl: 2.5rem;
  --radio-pill: 999px;
  --sombra: 0 1px 2px rgb(11 11 15 / 0.06), 0 8px 24px rgb(11 11 15 / 0.08);
  --sombra-fuerte: 0 16px 48px rgb(11 11 15 / 0.18);

  --transicion: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --alto-header: 4.5rem; /* 72 */
}

@media (min-width: 48em) {
  :root { --gutter: var(--esp-4); }
}