/**
 * Dunes Parfums - Design System & Visual Foundation (Fase 4, 7.3 & U2)
 * Centraliza la paleta oficial, escala tipográfica, espaciados, radios, sombras,
 * componentes base (botones, tarjetas, formularios, badges) y accesibilidad.
 */

:root {
    /* ==========================================================================
       Tipografía Premium Unificada (Fase U2)
       Cormorant Garamond: Encabezados, títulos y nombres de productos.
       Montserrat: Interfaz, botones, precios, formularios y navegación.
       ========================================================================== */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-title: 'Cormorant Garamond', Georgia, serif;
    --font-titles: 'Cormorant Garamond', Georgia, serif;
    --font-product-name: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', Arial, sans-serif;
    --font-ui: 'Montserrat', Arial, sans-serif;

    /* ==========================================================================
       Paleta Premium del Catálogo (Fase 7.3)
       ========================================================================== */
    --catalog-background: #FAF8F4;
    --catalog-card-background: #FFFEFC;
    --catalog-text: #171717;
    --catalog-text-secondary: #6F6F6F;
    --catalog-gold: #B18225;
    --catalog-gold-border: #E7D3A5;
    --catalog-gold-hover: #C49A3E;
    --catalog-green: #159447;
    --catalog-black-button: #171717;
    --catalog-white: #FFFFFF;

    /* ==========================================================================
       1. Paleta Oficial de Colores
       ========================================================================== */
    --color-black: #121212;
    --color-black-soft: #1A1A1A;
    --color-gold: #B68A32;
    --color-gold-dark: #9A7B1C;
    --color-gold-light: #F3E5AB;
    --color-gold-gradient: linear-gradient(135deg, #DFBA6B 0%, #C5A059 50%, #9E7D3B 100%);

    /* Valores RGB para superposiciones transparentes */
    --color-gold-rgb: 212, 175, 55;
    --color-black-rgb: 18, 18, 18;
    --color-success-rgb: 31, 122, 77;
    --color-danger-rgb: 220, 53, 69;

    /* Superficies y Fondos */
    --color-white: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-background: #F9F9FB;
    --color-card: #FFFFFF;

    /* Textos */
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #7A7A7A;
    --color-text-light: #FFFFFF;

    /* Estados y Bordes */
    --color-border-light: #E5E5E5;
    --color-border-gold: rgba(212, 175, 55, 0.3);
    --color-success: #1F7A4D;
    --color-danger: #DC3545;
    --color-info: #17A2B8;
    --color-whatsapp: #25D366;
    --color-focus: rgba(212, 175, 55, 0.5);

    /* ==========================================================================
       2. Tipografías y Escala (Unificada en Fase U2)
       ========================================================================== */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: clamp(1.75rem, 3vw, 2.25rem);
    --text-3xl: clamp(2.25rem, 5vw, 3.5rem);

    /* ==========================================================================
       3. Escala de Espaciados y Secciones
       ========================================================================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --section-padding-y: 80px;
    --section-padding-y-mobile: 48px;

    /* ==========================================================================
       4. Radios de Borde, Sombras y Transiciones
       ========================================================================== */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-pill: 9999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 0 15px rgba(212, 175, 55, 0.25);

    --transition-fast: 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-base: 220ms cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* ==========================================================================
       5. Tokens Unificados de Tarjetas y Contenedores (Fase U5)
       ========================================================================== */
    --surface-card: #FFFEFC;
    --border-card: 1px solid var(--catalog-gold-border, #E7D3A5);
    --border-card-hover: 1px solid var(--catalog-gold-hover, #C49A3E);
    --radius-card: 18px;
    --radius-control: 8px;
    --shadow-card: 0 8px 24px rgba(31, 24, 12, 0.08), 0 2px 6px rgba(31, 24, 12, 0.04);
    --shadow-card-hover: 0 16px 35px rgba(31, 24, 12, 0.14);
    --space-card: 24px;
    --gap-card: 20px;
}

/* ==========================================================================
   5. Focus Accesible Global
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Selección de texto elegante */
::selection {
    background-color: rgba(var(--color-gold-rgb), 0.25);
    color: var(--color-text-dark);
}

/* Reset de accesibilidad visual */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reducción de movimiento por preferencia de usuario */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Utilidades Estándar de Iconos (Fase U3)
   ========================================================================== */
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-sm { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-md { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-lg { width: 24px; height: 24px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon-xl { width: 32px; height: 32px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   Sistema Unificado de Encabezados Internos (.page-heading)
   Basado 100% en el estándar ultra-compacto y limpio del Catálogo
   ========================================================================== */
.page-heading,
.section-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 12px;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    gap: 2px;
}

/* Ocultar etiquetas superiores completamente sin reservar espacio */
.page-heading__eyebrow,
.section-subtitle,
.ayuda-badge {
    display: none !important;
}

/* Título Principal */
.page-heading__title,
.section-title,
.ayuda-title {
    font-family: var(--font-titles, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-heading--light .page-heading__title,
.page-heading--light .section-title {
    color: #171717;
}

.page-heading--dark .page-heading__title,
.page-heading--dark .section-title,
.ayuda-title {
    color: #FFFEFC;
}

/* Único divisor dorado */
.page-heading__divider {
    width: 36px;
    height: 2px;
    background: #B18225;
    background: linear-gradient(90deg, transparent 0%, #B18225 30%, #B18225 70%, transparent 100%);
    margin: 4px auto 6px auto;
    border-radius: 1px;
}

/* Ocultar pseudoelementos ::after duplicados cuando existe .page-heading__divider */
.page-heading .section-title::after,
.page-heading__title::after {
    display: none !important;
}

/* Descripción */
.page-heading__description,
.section-header p,
.ayuda-subtitle {
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 400;
    max-width: 560px;
    margin: 2px auto 0 auto;
    text-align: center;
}

.page-heading--light .page-heading__description,
.page-heading--light p {
    color: #666666;
}

.page-heading--dark .page-heading__description,
.page-heading--dark p,
.ayuda-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    .page-heading,
    .section-header {
        margin-bottom: 16px;
        gap: 4px;
    }

    .page-heading__title,
    .section-title,
    .ayuda-title {
        font-size: 1.8rem;
        margin-bottom: 2px;
    }

    .page-heading__divider {
        width: 44px;
        margin: 6px auto 6px auto;
    }

    .page-heading__description,
    .section-header p,
    .ayuda-subtitle {
        font-size: 0.88rem;
        max-width: 600px;
    }
}