/**

 * ARWA CACAO — Design Tokens

 * Copiar estos valores a Elementor → Site Settings → Global Colors / Fonts

 * o al Customizer de Woodmart.

 */

:root {

  /* Colores principales */

  --purple: #231831;

  --purple-light: #3d2a4a;

  --purple-dark: #1a1220;

  /* Superficie del menú (pastilla nav) */
  --nav-surface: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%);

  /* Fondo del header (zona crema, fuera de la pastilla nav) */
  --header-surface: var(--cream);

  /* Panel suave sobre textura — Alianzas, etc. */
  --surface-panel: linear-gradient(135deg, rgba(35, 24, 49, 0.04), rgba(201, 169, 110, 0.08));

  --gold: #c9a96e;

  --gold-light: #dfc99a;

  --gold-text: #9a6a22;

  --gold-text-hover: #805619;

  --cream: #f5f0eb;

  --cream-dark: #ebe3da;

  --ivory: #faf7f3;

  --cacao: #6b4c3b;

  --white: #ffffff;

  --text: #3b3038;

  --text-dark: #2a2228;



  /* Tipografía — Google Fonts */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Escala tipográfica — legibilidad */
  --font-size-root: 118.75%;
  --text-base: 1rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --heading-display: clamp(2.125rem, 4.1vw, 3.35rem);
  --heading-hero: clamp(2rem, 3.85vw, 3.15rem);
  --heading-section: clamp(1.875rem, 3.75vw, 3.125rem);
  --heading-section-sm: clamp(1.625rem, 3.25vw, 2.625rem);
  --heading-lead: clamp(1rem, 2vw, 1.3rem);
  --line-height-body: 1.75;
  --line-height-copy: 1.8;



  /* Espaciado y forma */

  --radius: 16px;

  --radius-lg: 24px;

  --header-h: 80px;
  --benefits-bar-h: 6.75rem;
  --section-gap-before-violet: 4.25rem;
  --packaging-panel: #231831;
  --packaging-panel-dark: #1a1220;

  --container: min(1280px, 100%);
  --container-archive: min(1480px, 100%);
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);



  /* Sombras */

  --shadow: 0 4px 24px rgba(35, 24, 49, 0.08);

  --shadow-hover: 0 16px 48px rgba(35, 24, 49, 0.16);



  /* Transición estándar (hover cards) */

  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);



  /* Textura de fondo global */
  --texture-page: url("../textures/textura-5.png");
  --texture-page-tile: 768px 512px;
  --texture-grain: url("../textures/paper-grain.png");
  --texture-grain-tile: 480px;
  --texture-grain-opacity: 0.24;
  --texture-grain-blur: 1.25px;
  --texture-wash: rgba(255, 250, 241, 0.52);
}



/*

  BREAKPOINTS para replicar en Elementor:

  - Desktop:  > 1024px  → grid 5 cols (tarjetas), header completo

  - Tablet:   768–1024  → grid 3 cols, menú hamburguesa

  - Mobile:   < 768     → carrusel horizontal, 1 col

*/