/* ==========================================================================
   VARIABLES — colores, tipografía y espaciado de toda la web.
   Si quieres cambiar el aspecto general, empieza por aquí.
   ========================================================================== */

/* Fuentes alojadas en el propio dominio (sin llamadas a Google: mejor para
   la privacidad y permite una CSP estricta). Solo subconjunto latino. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* --- Colores base --- */
  --fondo: #070c16;            /* azul casi negro */
  --superficie: #0b1220;       /* tarjetas, ligeramente elevadas */
  --superficie-2: #0f1828;     /* elementos sobre tarjetas */
  --borde: rgba(148, 178, 216, 0.1);
  --borde-fuerte: rgba(148, 178, 216, 0.18);

  --texto: #e6edf5;
  --texto-suave: #9aa9bd;
  --texto-tenue: #6b7b91;

  /* --- Acentos del logo: usar con moderación --- */
  --cian: #22e0e8;
  --menta: #2be8a5;
  --degradado: linear-gradient(100deg, var(--cian), var(--menta));
  --cian-tenue: rgba(34, 224, 232, 0.12);
  --menta-tenue: rgba(43, 232, 165, 0.12);
  --aviso: #f5c451;            /* solo para etiquetas de estado tipo [LENTO] */

  /* --- Tipografía --- */
  --f-titulos: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Tamaños fluidos: crecen suavemente del móvil al escritorio */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --t-h1: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);

  /* --- Espaciado: mucho aire entre secciones --- */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --seccion: clamp(6rem, 12vw, 10rem);
  --ancho: 72rem;
  --ancho-texto: 38rem;

  --radio: 14px;
  --radio-sm: 8px;

  --transicion: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --cabecera-alto: 4.25rem;
}