/* ==========================================================================
   VARIABLES.CSS — PALETA, TIPOGRAFÍA Y MEDIDAS GLOBALES
   Cambia un valor aquí y se actualiza en todo el sitio.
   ========================================================================== */

:root {

  /* ---- COLOR ---------------------------------------------------------- */
  --c-hierro:      #1B1D21;   /* gris hierro: textos y fondos oscuros      */
  --c-hierro-80:   #282B31;   /* superficies oscuras secundarias           */
  --c-concreto:    #E6E5E1;   /* fondo principal, gris cemento             */
  --c-yeso:        #FAFAF9;   /* tarjetas                                  */
  --c-cobalto:     #2340D8;   /* acento principal: botones y datos         */
  --c-cobalto-osc: #1A31A6;   /* hover del acento                          */
  --c-cinta:       #E8C319;   /* amarillo cinta: solo para destacar        */
  --c-humo:        #6E7076;   /* texto secundario                          */
  --c-linea:       #CFCEC9;   /* bordes y separadores                      */
  --c-verde:       #2C8A5B;   /* estado "abierto ahora"                    */

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  --f-display: "Archivo Black", "Arial Black", sans-serif;  /* títulos      */
  --f-texto:   "Chivo", "Helvetica Neue", sans-serif;       /* párrafos     */
  --f-mono:    "Chivo Mono", "Courier New", monospace;      /* datos, horas */

  --t-xs:   0.74rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.5rem, 4.5vw, 2rem);
  --t-xl:   clamp(1.9rem, 6.5vw, 3.1rem);
  --t-hero: clamp(2.7rem, 11vw, 5.6rem);

  --tracking: 0.18em;

  /* ---- ESPACIADO ------------------------------------------------------- */
  --e-1: 0.5rem;
  --e-2: 0.875rem;
  --e-3: 1.25rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --seccion-y: clamp(3.25rem, 8vw, 6rem);
  --ancho-max: 1140px;
  --margen-lateral: 1.15rem;
  --alto-barra: 62px;

  /* ---- FORMA Y PROFUNDIDAD --------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-full: 999px;
  --sombra-sm: 0 2px 10px -5px rgba(27, 29, 33, 0.3);
  --sombra: 0 16px 38px -22px rgba(27, 29, 33, 0.55);
  --borde: 1px solid var(--c-linea);

  /* ---- MOVIMIENTO ------------------------------------------------------ */
  --trans: 190ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --safe-abajo: env(safe-area-inset-bottom, 0px);
}