/* ==========================================================
   VARIABLES — los valores de marca de toda la página.
   Si un color, una tipografía o un radio cambia, cambia acá.
   Fuente: tableros S* de la maqueta + vairis-identidad-visual.
   ========================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2');
}

:root {
  /* Fondos: el grafito es el fondo de la marca en la web */
  --grafito: #17202B;          /* fondo de la página */
  --grafito-alto: #101922;     /* cielo del hero */
  --grafito-pie: #10171F;      /* pie de página (variante B) */
  --tarjeta: #1C2631;
  --tarjeta-hover: #202B38;

  /* Bordes */
  --borde: #333E4A;
  --borde-hover: #6E5439;      /* el borde "se calienta" */
  --borde-boton: #4D5863;
  --borde-menu: #2F3A46;
  --borde-marco: #45505C;      /* marco de los íconos de tarjeta */
  --divisor: #2E3844;          /* línea de los rótulos de grupo */
  --filete-hover: #4E3C2A;     /* filete de los casos al pasar el cursor; borde de los nodos del proceso */
  --borde-dato: #3B4653;       /* píldoras de dato (plazo, "a medida") */
  --borde-destacada: #3F4A57;  /* tarjeta del relevamiento */
  --fondo-diagrama: #1A2430;   /* un punto más hundido que la tarjeta */
  --fondo-nodo: #1D2733;

  /* Texto */
  --crema: #F9F5EC;            /* titulares y texto principal */
  --texto-kicker: #D4D0C7;
  --texto-suave: #B4AFA5;      /* párrafos de apoyo, micro-copy (7:1) */
  --texto-tarjeta: #ABA69C;
  --texto-situacion: #A19C93;  /* la situación de cada caso: un punto más apagada que el resultado */
  --texto-menu: #C9C5BC;
  --texto-rotulo: #9C978D;

  /* Bronce */
  --bronce: #B26D3A;           /* puro: solo filetes y resplandor, nunca texto */
  --bronce-web: #E29A58;       /* acentos y cursivas de titulares (pasa AA) */
  --bronce-pildora: #E3AE7E;   /* texto de las píldoras */
  --boton: #9C6A48;            /* botón principal en reposo (4,6:1) */
  --boton-hover: #BC6A2E;      /* botón principal encendido */

  /* Tipografía */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Radios */
  --radio-pildora: 999px;
  --radio-tarjeta: 16px;

  /* Medidas */
  --ancho: 1200px;             /* columna de contenido: se abre hacia los costados en pantallas grandes */
  --gutter: clamp(24px, 4vw, 64px);  /* margen lateral: 24px en teléfono, crece con la pantalla */
  --alto-menu: 92px;           /* reserva para que las anclas no queden bajo el menú */

  /* Movimiento: lento a propósito, nunca velocidad */
  --t-luz: .45s ease;
  --t-resplandor: .6s ease;
  --t-tarjeta: .3s ease;
}