/* ==========================================================================
   MATESEREÑO — Design Tokens
   Acá vive toda la identidad visual. Si mañana cambia un color o una
   tipografía, se edita UNA sola vez acá y se propaga a todo el sitio.
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --verde-mate:        #113704;   /* color principal de la marca */
  --verde-mate-oscuro: #0A2603;   /* variante oscura para hovers/gradientes */
  --verde-mate-suave:  #1D4D0C;   /* variante para superficies grandes */
  --verde-tinta:       #061602;   /* casi negro, para fondos profundos */

  /* ---- Secundarios (madera, cuero, cálidos) ---- */
  --madera:        #8B5E3C;
  --madera-claro:  #C9A66B;
  --cuero:         #6F4E37;
  --beige:         #EFE6D6;
  --crema:         #FAF6EE;
  --blanco:        #FFFFFF;
  --dorado-sutil:  #B8935A;   /* detalle premium, usar con moderación */
  --dorado-claro:  #D9BC86;

  /* ---- Superficies claras para los íconos de las viñetas ----
     Los recuadros verdes oscuros no se distinguían sobre el fondo crema,
     así que las viñetas usan una superficie clara con el ícono en verde. */
  --verde-tenue:  #E6EFDC;
  --verde-borde:  rgba(17, 55, 4, 0.16);
  --arena-tenue:  #F6EBD5;
  --arena-borde:  rgba(184, 147, 90, 0.38);
  --arena-texto:  #8A6520;

  /* ---- Celular de Ofertas (marco de titanio y pantalla) ---- */
  --titanio-claro:  #E3E5E8;
  --titanio:        #A7ACB4;
  --titanio-oscuro: #5D626A;
  --pantalla:       #0B0C0E;

  /* ---- Verde "precio con descuento / llega el…" (6:1 sobre blanco) ---- */
  --verde-ok: #117326;

  /* ---- WhatsApp ----
     Botones: verde de marca con texto oscuro (9.4:1). El blanco sobre el
     verde claro daba 2:1 y no se leía. El flotante usa un verde más
     profundo para que el ícono blanco contraste. */
  --whatsapp:        #25D366;
  --whatsapp-claro:  #1FC25C;
  --whatsapp-oscuro: #168A43;
  --whatsapp-texto:  #062B12;

  /* ---- Ofertas: sello de descuento (texto blanco sobre rojo, 5.6:1) ---- */
  --oferta-fondo: #C4260F;
  --oferta-texto: #FFFFFF;

  /* ---- Texto ---- */
  --texto-principal: #1C1B17;
  --texto-suave:      #5C5648;
  --texto-invertido:  #F7F3E9;

  /* ---- Tipografía ---- */
  --fuente-display: 'Fraunces', serif;
  --fuente-cuerpo:  'Jost', sans-serif;

  /* ---- Escala tipográfica ----
     Todo tamaño de letra que se repite en más de un lugar sale de acá.
     Si un elemento necesita algo puntual (un dígito de reloj, una firma
     suelta), puede seguir con su propio valor: la escala es para los
     roles que se repiten (títulos, precios, texto de cuerpo, captions). */
  --texto-2xs:  11px;                       /* micro-etiquetas */
  --texto-xs:   12.5px;                     /* chips, badges, columnas de footer */
  --texto-sm:   13.5px;                     /* texto secundario / descripciones */
  --texto-base: 15px;                       /* cuerpo de texto */
  --texto-md:   16px;                       /* texto destacado chico */
  --texto-lg:   19px;                       /* subtítulos de tarjeta (nombre, FAQ) */
  --texto-xl:   clamp(22px, 2.8vw, 28px);   /* subtítulos de sección (carrusel, precio grande) */
  --texto-2xl:  clamp(30px, 4vw, 44px);     /* títulos de sección */

  /* ---- Espaciado ---- */
  --espacio-xs:  8px;
  --espacio-sm:  16px;
  --espacio-md:  32px;
  --espacio-lg:  64px;
  --espacio-xl:  120px;

  /* Ritmo vertical de las secciones (se achica solo en mobile) */
  --seccion-y: clamp(64px, 8vw, 112px);

  /* ---- Bordes / superficies ---- */
  --radio-sm:   6px;
  --radio-md:   14px;
  --radio-lg:   28px;
  --radio-pill: 100px;  /* botones y chips en forma de pastilla, todos iguales */

  /* ---- Sombra premium ---- */
  --sombra-suave:  0 20px 60px -25px rgba(17, 55, 4, 0.35);
  --sombra-media:  0 24px 60px -30px rgba(17, 55, 4, 0.45);
  --sombra-fuerte: 0 30px 80px -20px rgba(10, 38, 3, 0.5);

  /* ---- Líneas / bordes suaves ---- */
  --linea: rgba(17, 55, 4, 0.10);
  --linea-clara: rgba(247, 243, 233, 0.16);

  /* ---- Transiciones ---- */
  --ease-suave:  cubic-bezier(0.16, 1, 0.3, 1);   /* salida muy suave */
  --ease-salida: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-rapida: 0.3s;
  --dur-media:  0.6s;
  --dur-lenta:  1.1s;

  /* Altura del header fijo (se usa para el scroll-margin de las secciones) */
  --header-alto: 132px;
}

@media (max-width: 860px) {
  :root { --header-alto: 150px; }
}