/* ==========================================================================
   Mega Emporium — Variables de diseño
   --------------------------------------------------------------------------
   Identidad corporativa: borgoña profundo + rojo vibrante + dorado + blanco
   ========================================================================== */

:root {
  /* === Paleta principal === */
  --color-fondo-oscuro:       #4A0005;   /* Borgoña profundo (tipo corona) */
  --color-fondo-oscuro-alt:   #2D0003;   /* Borgoña más oscuro (sombras) */
  --color-fondo-oscuro-claro: #6B0A12;   /* Borgoña claro (hovers) */

  --color-primario:           #E30613;   /* Rojo vibrante (bolsas / ofertas) */
  --color-primario-hover:     #B8050F;   /* Rojo oscuro (hover) */

  --color-dorado:             #D4AF37;   /* Oro premium (detalles corona) */
  --color-dorado-claro:       #F4D77A;   /* Oro claro (acentos) */
  --color-dorado-hover:       #B8941F;   /* Oro oscuro (hover) */

  --color-blanco:             #FFFFFF;
  --color-blanco-suave:       #F5F0E8;   /* Blanco cálido (textos suaves) */
  --color-gris-claro:         #F5F5F5;
  --color-gris-medio:         #C9C2BA;
  --color-texto-oscuro:       #1A0001;
  --color-texto-suave:        #6B6B6B;

  --color-whatsapp:           #25D366;   /* Verde oficial WhatsApp */
  --color-whatsapp-hover:     #1DA851;

  --color-exito:              #2E7D32;
  --color-error:              #B3261E;

  /* === Tipografía ===
     Se unifica TODO el sitio en una única familia (la que usa la sección
     Contacto / Dirección): Inter. Se conservan los alias antiguos
     apuntando a la misma fuente para no romper selectores existentes. */
  --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulos:   var(--fuente-principal);
  --fuente-cuerpo:    var(--fuente-principal);

  --texto-xs:   0.75rem;     /* 12px */
  --texto-sm:   0.875rem;    /* 14px */
  --texto-base: 1rem;        /* 16px */
  --texto-md:   1.125rem;    /* 18px */
  --texto-lg:   1.25rem;     /* 20px */
  --texto-xl:   1.5rem;      /* 24px */
  --texto-2xl:  1.875rem;    /* 30px */
  --texto-3xl:  2.25rem;     /* 36px */
  --texto-4xl:  3rem;        /* 48px */
  --texto-5xl:  3.75rem;     /* 60px */

  --peso-normal:   400;
  --peso-medio:    500;
  --peso-semibold: 600;
  --peso-bold:     700;

  --interlineado-cerrado:  1.2;
  --interlineado-base:     1.5;
  --interlineado-relajado: 1.75;

  /* === Espaciado === */
  --espaciado-xs:  0.25rem;
  --espaciado-sm:  0.5rem;
  --espaciado-md:  1rem;
  --espaciado-lg:  1.5rem;
  --espaciado-xl:  2rem;
  --espaciado-2xl: 3rem;
  --espaciado-3xl: 4rem;
  --espaciado-4xl: 6rem;

  /* === Bordes y radios === */
  --radio-sm:   4px;
  --radio-md:   8px;
  --radio-lg:   12px;
  --radio-xl:   20px;
  --radio-pill: 999px;

  /* === Sombras === */
  --sombra-sm:       0 2px 8px rgba(0, 0, 0, 0.08);
  --sombra-md:       0 6px 24px rgba(0, 0, 0, 0.12);
  --sombra-lg:       0 12px 36px rgba(0, 0, 0, 0.18);
  --sombra-dorada:   0 4px 16px rgba(212, 175, 55, 0.35);
  --sombra-borgoña:  0 8px 24px rgba(74, 0, 5, 0.35);
  --sombra-whatsapp: 0 4px 16px rgba(37, 211, 102, 0.4);

  /* === Transiciones === */
  --transicion-corta: 150ms ease;
  --transicion-media: 300ms ease;
  --transicion-larga: 500ms ease;
  --transicion-global: all 0.3s ease;

  /* === Layout === */
  --ancho-contenedor:      1200px;
  --ancho-contenedor-amplio: 1400px;
  --alto-header:           72px;
  --alto-header-scroll:    64px;
  --z-header:              100;
  --z-modal:               200;
}