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

:root {

  /* ---- COLOR ---------------------------------------------------------- */
  --c-tinta:     #241C2E;   /* casi negro con matiz violeta: textos        */
  --c-tinta-80:  #332A3F;   /* superficies oscuras secundarias            */
  --c-nube:      #F0EDF3;   /* fondo principal, lila muy claro            */
  --c-papel:     #FDFCFE;   /* tarjetas                                   */
  --c-iris:      #5A3E9B;   /* acento principal: botones y enlaces        */
  --c-iris-osc:  #462F7C;   /* hover del acento                           */
  --c-tallo:     #4A7A5C;   /* verde tallo: temporada y disponibilidad    */
  --c-rubor:     #D4547A;   /* rosa fuerte: solo para destacar            */
  --c-humo:      #6E6878;   /* texto secundario                           */
  --c-linea:     #D8D3DE;   /* bordes y separadores                       */
  --c-estraza:   #E3DCD0;   /* papel de estraza: etiquetas colgantes      */

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  --f-display: "Bodoni Moda", "Didot", Georgia, serif;   /* títulos        */
  --f-texto:   "Manrope", "Helvetica Neue", sans-serif;  /* párrafos       */
  --f-mono:    "IBM Plex Mono", "Courier New", monospace;/* precios, datos */

  --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(2rem, 7vw, 3.2rem);
  --t-hero: clamp(2.8rem, 12vw, 5.4rem);

  --tracking: 0.2em;

  /* ---- 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(36, 28, 46, 0.28);
  --sombra: 0 18px 40px -24px rgba(36, 28, 46, 0.5);
  --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);
}