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

   Este sitio usa fondo oscuro: los trabajos de uñas y pestañas se ven
   mucho mejor sobre café oscuro que sobre blanco.
   ========================================================================== */

:root {

  /* ---- COLOR ---------------------------------------------------------- */
  --c-cacao:       #1A1512;   /* fondo principal, café casi negro cálido   */
  --c-cacao-80:    #241D19;   /* superficies y tarjetas                    */
  --c-cacao-60:    #2F2620;   /* superficies elevadas                      */
  --c-ceramica:    #F4EFE9;   /* texto principal sobre oscuro              */
  --c-verdigris:   #2F8F86;   /* acento principal: botones y enlaces       */
  --c-verdigris-cl:#4FB3A9;   /* acento aclarado para texto y hover        */
  --c-champagne:   #D8B98C;   /* precios y detalles metálicos              */
  --c-humo:        #A0958B;   /* texto secundario                          */
  --c-linea:       #3A312B;   /* bordes y separadores                      */
  --c-arena:       #EFE7DC;   /* bloques claros de contraste               */

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  --f-display: "Marcellus", "Trajan Pro", Georgia, serif;  /* títulos       */
  --f-texto:   "Jost", "Futura", sans-serif;               /* párrafos      */
  --f-mono:    "Space Mono", "Courier New", monospace;     /* datos, horas  */

  --t-xs:   0.72rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.5rem, 4.5vw, 2rem);
  --t-xl:   clamp(2rem, 7vw, 3.2rem);
  --t-hero: clamp(2.7rem, 11vw, 5rem);

  --tracking: 0.22em;

  /* ---- 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: 60px;

  /* ---- FORMA Y PROFUNDIDAD --------------------------------------------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;
  --sombra-sm: 0 2px 12px -6px rgba(0, 0, 0, 0.6);
  --sombra: 0 20px 44px -26px rgba(0, 0, 0, 0.8);
  --borde: 1px solid var(--c-linea);

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

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