@font-face {
    font-family: 'Cubano';
    src: url('../fonts/Cubano.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ============================================================
       PALETA FUNGIVERSE — Manual de Identidad Oficial
       Fuente: Manual de Identidad_Fungiverse.pdf (pág. 6)
       Última actualización: 17/04/2026
       ============================================================ */

    /* === Primarios (Manual de Identidad pág. 6) === */
    --fv-primary:         #e84d44;   /* Rojo Fungiverse — R232 G77 B68 */
    --fv-primary-dark:    #db1f26;   /* Rojo oscuro — R219 G31 B38 */
    --fv-primary-light:   #f07068;   /* Rojo claro (derivado) */

    /* === Secundarios (Manual de Identidad pág. 6) === */
    --fv-blue:            #5790ce;   /* Azul — R87 G144 B206 */
    --fv-teal:            #57b7bc;   /* Teal — R87 G183 B188 */
    --fv-pink:            #d763a6;   /* Rosa — R215 G99 B166 */
    --fv-yellow:          #e6ce3a;   /* Amarillo — R230 G206 B58 */
    --fv-green:           #66ae4c;   /* Verde — R102 G174 B76 */

    /* === Colores de categorías POR BENEFICIO ===
       Usar SIEMPRE estas variables para todo lo relacionado a cada categoría.
       Son los mismos colores secundarios pero asignados semánticamente.
       Ref: Manual de Identidad pág. 6 — colores secundarios.
       Usados en: benefit-categories.php, archive-product.php (--hero-accent) */
    --fv-cat-energia:     #e6ce3a;   /* Amarillo — Energía (Cordyceps) */
    --fv-cat-foco:        #5790ce;   /* Azul — Foco (Melena de León) */
    --fv-cat-calma:       #66ae4c;   /* Verde — Calma y Armonía (Reishi) */
    --fv-cat-defensas:    #57b7bc;   /* Teal — Inmunidad y Defensas (Cola de Pavo) */
    --fv-cat-hormonas:    #d763a6;   /* Rosa — Equilibrio Hormonal (Fem Balance) */

    /* === Colores de categorías POR FORMATO ===
       Usados en archive-product.php para el hero gradient.
       Slugs WC: capsulas, gotero, polvo, combos-15off */
    --fv-cat-capsulas:    #e84d44;   /* Rojo primario — Cápsulas */
    --fv-cat-gotero:      #c97b3a;   /* Ámbar — Tinturas / Gotero */
    --fv-cat-polvo:       #8b9a3e;   /* Oliva — Pulverizados / Polvo */
    --fv-cat-combos:      #e84d44;   /* Rojo primario — Combos */

    /* === Aliases de conveniencia (mapeados a la paleta real) === */
    --fv-red:             #e84d44;
    --fv-red-light:       #f07068;
    --fv-red-dark:        #db1f26;

    /* === Ex-kraft → Ahora mapeado al rojo de marca ===
       El manual NO tiene color kraft. Se remapea al rojo primario
       para que todo acento/hover siga la identidad oficial. */
    --fv-kraft:           #e84d44;
    --fv-kraft-light:     #f07068;
    --fv-kraft-dark:      #db1f26;

    /* === Ex-beige → Ahora neutros limpios ===
       El manual NO tiene colores beige/cálidos.
       Se reemplazan por grises neutros modernos. */
    --fv-beige:           #F5F5F5;
    --fv-beige-alt:       #EEEEEE;
    --fv-beige-dark:      #DDDDDD;

    /* === Backgrounds (neutros limpios, alineados con manual) === */
    --fv-bg:              #FAFAFA;   /* Fondo principal — off-white limpio */
    --fv-bg-alt:          #F5F5F5;   /* Secciones alternadas */
    --fv-bg-warm:         #F2F2F2;   /* Secciones de contraste suave */
    --fv-bg-accent:       #EBEBEB;   /* Fondo de sección destacada */
    --fv-bg-dark:         #000000;   /* Negro puro — Manual de Identidad */

    /* === Accent (antes marrón #7C4A1A → ahora rojo de marca) === */
    --fv-accent:          #e84d44;

    /* === Superficies === */
    --fv-surface:         #FFFFFF;
    --fv-surface-alt:     #F9F9F9;

    /* === Texto === */
    --fv-text:            #000000;   /* Negro puro — Manual de Identidad */
    --fv-text-light:      #FAFAF5;
    --fv-text-muted:      #555555;
    --fv-text-subtle:     #888888;

    /* === Bordes (neutros, sin tonos cálidos) === */
    --fv-border:          #E0E0E0;
    --fv-border-light:    #EEEEEE;

    /* === Tipografía === */
    --fv-font-heading:    'Cubano', sans-serif;
    --fv-font-body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fv-font-subtitle:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* === Escala tipográfica (clamp responsive) === */
    --fv-text-xs:    clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --fv-text-sm:    clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --fv-text-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --fv-text-lg:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --fv-text-xl:    clamp(1.3rem, 1.1rem + 1vw, 1.625rem);
    --fv-text-2xl:   clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem);
    --fv-text-3xl:   clamp(2.5rem, 2rem + 2vw, 4rem);
    --fv-text-4xl:   clamp(3rem, 2.5rem + 3.5vw, 5.5rem);
    --fv-text-5xl:   clamp(4rem, 3rem + 5vw, 7.5rem);

    /* === Espaciado === */
    --fv-space-xs:   0.25rem;
    --fv-space-sm:   0.5rem;
    --fv-space-md:   1rem;
    --fv-space-lg:   1.5rem;
    --fv-space-xl:   2rem;
    --fv-space-2xl:  3rem;
    --fv-space-3xl:  4rem;
    --fv-space-4xl:  8rem;
    --fv-space-5xl:  12rem;

    /* === Bordes redondeados === */
    --fv-radius-sm:   6px;
    --fv-radius-md:   12px;
    --fv-radius-lg:   20px;
    --fv-radius-xl:   32px;
    --fv-radius-full: 9999px;

    /* === Sombras (base negra neutra, no marrón) === */
    --fv-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.05);
    --fv-shadow-md:   0 4px 20px rgba(0, 0, 0, 0.10), 0 8px 40px rgba(0, 0, 0, 0.06);
    --fv-shadow-lg:   0 12px 48px rgba(0, 0, 0, 0.14), 0 24px 80px rgba(0, 0, 0, 0.08);
    --fv-shadow-xl:   0 24px 80px rgba(0, 0, 0, 0.18);

    /* === Layout / Containers === */
    --fv-container:        1200px;
    --fv-container-wide:   1440px;
    --fv-container-narrow: 800px;
    --fv-gutter:           clamp(1rem, 5vw, 3rem);

    /* === Degradados (alineados a paleta del manual) === */
    --fv-gradient-warm:      linear-gradient(135deg, #000000 0%, #111111 100%);
    --fv-gradient-kraft:     linear-gradient(135deg, #F5F5F5 0%, #EEEEEE 100%);
    --fv-gradient-hero:      linear-gradient(160deg, #000000 0%, #0a0a0a 60%, #1a1a1a 100%);
    --fv-gradient-overlay:   linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

    /* === Transiciones === */
    --fv-transition-fast:    150ms ease;
    --fv-transition-base:    250ms ease;
    --fv-transition-slow:    400ms ease;
    --fv-transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-index scale === */
    --fv-z-base:      0;
    --fv-z-above:     10;
    --fv-z-dropdown:  100;
    --fv-z-sticky:    200;
    --fv-z-overlay:   300;
    --fv-z-modal:     400;
    --fv-z-toast:     500;

    /* === Header / Nav === */
    --fv-pill-bg:             rgba(255, 255, 255, 0.85);
    --fv-pill-blur:           blur(16px) saturate(180%);
    --fv-pill-shadow:         0 2px 20px rgba(0, 0, 0, 0.08);
    --fv-pill-radius:         9999px;
    --fv-announcement-bg:     linear-gradient(90deg, #e84d44, #db1f26);
    --fv-header-height:       64px;
    --fv-announcement-height: 36px;
    --fv-transition-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
}