/* =====================================================================
   VARIABLES — Rustik Coffee
   ---------------------------------------------------------------------
   Aquí están los colores, tipografías y medidas de todo el sitio.
   Si cambias un valor aquí, cambia en TODAS las secciones.
   ===================================================================== */

:root {
  /* ---------- Colores ---------- */
  --negro:        #0B0908;  /* fondo principal (secciones oscuras) */
  --carbon:       #2A2826;  /* fondo alterno (secciones gris carbón) */
  --tarjeta:      #1A1715;  /* fondo de tarjetas (reseñas, packs) */
  --tarjeta-2:    #141110;  /* fondo de tarjetas más oscuro (pop up) */
  --borde:        #3A3431;  /* líneas y bordes suaves */

  --cobre:        #B98068;  /* color de acento (botones, títulos chicos) */
  --cobre-claro:  #F3D2C1;  /* brillo del cobre en los precios */
  --cobre-instagram: #EC9526;  /* naranja/cobre de la marca en Instagram */

  --texto:        #F2EDE7;  /* texto principal (casi blanco) */
  --texto-2:      #D9D1C9;  /* texto secundario */
  --texto-suave:  #BDB3AA;  /* descripciones */
  --texto-apagado:#8F857D;  /* notas y letra chica */

  --crema:        #F2EDE7;  /* fondo claro detrás de la ilustración de la taza */


  /* ---------- Tipografías ---------- */
  /* Estilo Apple: usa San Francisco en Mac/iPhone y Helvetica en el resto */
  --fuente:       -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-logo:  "Kaushan Script", cursive;

  /* ---------- Medidas ---------- */
  --ancho-max:    1280px;                    /* ancho máximo del contenido */
  --margen:       clamp(20px, 6vw, 96px);   /* margen lateral: 20px en celular, 96px en pantallas grandes */
  --espacio-seccion: clamp(64px, 9vw, 120px); /* espacio arriba y abajo de cada sección */
  --alto-header:  164px;                     /* alto del header en escritorio (se ajusta en header.css) */

  --radio:        28px;                      /* esquinas redondeadas (tarjetas, recuadros) */

  /* ---------- Otros ---------- */
  --transicion:   .3s ease;
}