/* =============================================================
   TOKENS — Variables globales del sitio
   Éste es el archivo para tocar cuando quieras cambiar colores,
   tamaños, tiempos o curvas de animación de TODO el sitio.
   ============================================================= */

:root {
  /* --- Color --- */
  --negro:        #000000;
  --negro-suave:  #0a0a0a;
  --blanco:       #ffffff;
  --gris:         #8c8c8c;   /* gris del logo de carga */
  --gris-tenue:   rgba(255, 255, 255, 0.45);
  --linea:        rgba(255, 255, 255, 0.10);  /* separador entre bandas */
  --banda-hover:  rgba(255, 255, 255, 0.045); /* brillo de la banda activa */

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

  /* --- Fondo --- */
  --fondo-img: url("../img/fondo-negro-1.jpg");        /* carga y construcción */
  --fondo-home: url("../img/fondo-home-nuevo.jpg");    /* sólo el home */

  /* --- Home / menú --- */
  --banda-alto:      clamp(42px, 5svh, 72px);
  --menu-fuente:     clamp(14px, 1.75svh, 22px);
  --menu-espaciado:  0.01em;
  --menu-ancho:      17.4em; /* ancho del bloque ícono + texto (lo centra) */
  --icono-tamano:    3.6em;  /* relativo al texto del ítem */
  --icono-separacion: -0.5em;
  --menu-aire-abajo: 20svh;   /* espacio libre debajo del último ítem */

  /* Medidas propias del mobile (ver el bloque @media de home.css) */
  --logo-home-mobile:      56vw;
  --barra-y-mobile:        12svh;
  --menu-ancho-mobile:     15.2em;
  --banda-alto-mobile:     clamp(48px, 6svh, 68px);
  --icono-tamano-mobile:   3.2em;
  --menu-aire-abajo-mobile: 16svh;
  --redes-abajo-mobile:    4svh;
  --red-tamano-mobile:     18vw;

  /* Barra de arriba: logo y redes */
  --barra-y:    7.8svh;
  --barra-x:    6.7%;
  --logo-home:  clamp(240px, 23vw, 470px);
  --red-tamano: clamp(68px, 5.2vw, 108px);

  /* --- Logo del home --- */
  --logo-ancho: clamp(230px, 20vw, 390px);

  /* --- Loader --- */
  /* (la duración mínima se configura en assets/js/main.js) */
  --loader-tamano: clamp(150px, 13vw, 250px);

  /* --- Tiempos y curvas (segundos, formato GSAP) --- */
  --dur-rapida: 0.35s;
  --dur-media:  0.6s;
  --dur-pagina: 0.7s;
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);   /* equivale a power4.out */
}