/* ============================================================================
   BASE › VARIABLES (design tokens)
   ----------------------------------------------------------------------------
   Este archivo NO dibuja nada: solo define valores.
   Es el primero que se carga y el único lugar donde se tocan los colores.
   ¿Por qué separado? Porque cuando el proyecto crezca (más páginas, más
   componentes), todos van a leer de acá. Cambiás el amarillo en una línea y se
   actualiza el sitio entero.
   ============================================================================ */

:root {
  /* --- Paleta ------------------------------------------------------------- */
  --color-acento:        #f2d900;                 /* amarillo de la marca */
  --color-acento-suave:  rgba(242, 217, 0, .35);  /* mismo amarillo para halos/sombras */
  --color-negro:         #000000;
  --color-fondo:         #0a0a0a;                 /* negro "casi puro" del body */
  --color-texto:         #ffffff;
  --color-texto-suave:   #b9b9b9;                 /* textos secundarios */
  --color-borde:         rgba(255, 255, 255, .10);

  /* Capa oscura de las secciones inferiores.
     IMPORTANTE: no es negro 100% opaco sino 0.94 de opacidad. Se ve negro
     sólido a simple vista, pero deja que el video de fondo (que es fijo y
     cubre TODA la página) siga presente y respirando detrás.
     Si algún día lo querés totalmente opaco: cambiá este valor por #080808. */
  --color-panel:         rgba(8, 8, 8, .94);

  /* --- Tipografía --------------------------------------------------------- */
  --fuente: Arial, Helvetica, sans-serif;

  /* --- Movimiento --------------------------------------------------------- */
  /* Una sola transición para todo el sitio: mismo ritmo = sensación premium. */
  --transicion: 260ms cubic-bezier(.2, .7, .3, 1);

  /* --- Medidas ------------------------------------------------------------ */
  --ancho-max:   1100px;                          /* ancho del contenido centrado */
  --alto-header: 68px;                            /* se usa para el scroll-padding */
}