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

:root {

  /* ---- COLOR ---------------------------------------------------------- */
  --c-tinta:    #17201C;   /* verde casi negro: textos y fondos oscuros    */
  --c-tinta-80: #24312B;   /* superficies oscuras secundarias              */
  --c-porcelana:#EEF0E9;   /* fondo principal, blanco verdoso              */
  --c-papel:    #FCFCF8;   /* tarjetas                                     */
  --c-bosque:   #1E4D3A;   /* acento principal: botones y enlaces          */
  --c-bosque-osc:#153A2B;  /* hover del acento                             */
  --c-miel:     #C8811A;   /* acento secundario: precios y etiquetas       */
  --c-humo:     #6B7268;   /* texto secundario                             */
  --c-linea:    #D3D6CB;   /* bordes y separadores                         */
  --c-alerta:   #B0472F;   /* promociones y avisos                         */

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  --f-display: "Fraunces", Georgia, serif;        /* títulos               */
  --f-texto:   "Karla", "Helvetica Neue", sans-serif; /* párrafos          */
  --f-mono:    "DM Mono", "Courier New", monospace;   /* precios, etiquetas*/

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.5rem, 5vw, 2rem);
  --t-xl:   clamp(1.9rem, 7vw, 3rem);
  --t-hero: clamp(2.6rem, 12vw, 5rem);

  --tracking: 0.16em;

  /* ---- ESPACIADO ------------------------------------------------------- */
  --e-1: 0.5rem;
  --e-2: 0.875rem;
  --e-3: 1.25rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --seccion-y: clamp(3rem, 8vw, 5.5rem);
  --ancho-max: 1080px;
  --margen-lateral: 1.15rem;   /* respiro lateral en celular */

  /* Alturas de las barras fijas (se usan para calcular el scroll) */
  --alto-barra-sup: 58px;
  --alto-dock: 66px;

  /* ---- FORMA Y PROFUNDIDAD --------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;
  --sombra-sm: 0 2px 10px -4px rgba(23, 32, 28, 0.22);
  --sombra: 0 14px 34px -20px rgba(23, 32, 28, 0.45);
  --borde: 1px solid var(--c-linea);

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

  /* ---- ÁREA SEGURA EN CELULAR (notch / barra de gestos) ---------------- */
  --safe-abajo: env(safe-area-inset-bottom, 0px);
}