@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    /* Color Palette */
    --color-primary: #1e3a8a;       /* Deep Navy / Spiritual Blue */
    --color-primary-light: #2563eb; /* Active Blue */
    --color-primary-dark: #1e293b;  /* Very Dark Blue/Slate */
    --color-secondary: #d97706;     /* Warm Gold / Divine Light */
    --color-secondary-light: #f59e0b;
    --color-accent: #fcd34d;        /* Golden highlight */
    
    /* Neutrals */
    --color-bg-primary: #fafaf9;    /* Creamy off-white for reading comfort */
    --color-bg-secondary: #ffffff;  /* Pure white for cards/sections */
    --color-bg-accent: #f3f4f6;     /* Light grey for contrast */
    --color-bg-dark: #0f172a;       /* Navy slate dark background */
    --color-text-primary: #1c1917;  /* Near black for maximum readability */
    --color-text-secondary: #44403c;/* Soft stone dark for secondary descriptions */
    --color-text-light: #f8fafc;     /* White/Light grey for dark backgrounds */
    --color-border: #e7e5e4;        /* Soft border color */
    
    /* Semantic Colors */
    --color-success: #15803d;       /* Warm green */
    --color-error: #b91c1c;         /* Warm red */
    --color-warning: #b45309;
    --color-info: #0369a1;

    /* Typography */
    --font-headers: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    
    /* ─── TIPOGRAFÍA FLUIDA CON clamp() ────────────────────────────────────
       Escala suavemente de 320px (móvil) a 1200px (escritorio).
       Fórmula: clamp(mínimo-móvil, valor-fluido-vw, máximo-escritorio)
       Esto elimina los saltos bruscos entre breakpoints.
    ───────────────────────────────────────────────────────────────────────── */
    --text-xs:   clamp(0.688rem, 0.6rem + 0.4vw,  0.75rem);   /*  11px → 12px */
    --text-sm:   clamp(0.75rem,  0.65rem + 0.5vw,  0.875rem);  /*  12px → 14px */
    --text-base: clamp(0.875rem, 0.75rem + 0.65vw, 0.975rem);  /*  14px → 15.6px */
    --text-lg:   clamp(0.938rem, 0.8rem + 0.7vw,  1.063rem);  /*  15px → 17px */
    --text-xl:   clamp(1rem,     0.85rem + 0.8vw,  1.188rem);  /*  16px → 19px */
    --text-2xl:  clamp(1.125rem, 0.95rem + 1vw,   1.375rem);  /*  18px → 22px */
    --text-3xl:  clamp(1.25rem,  1rem + 1.4vw,    1.688rem);  /*  20px → 27px */
    --text-4xl:  clamp(1.438rem, 1.1rem + 2vw,    2.063rem);  /*  23px → 33px */
    --text-5xl:  clamp(1.688rem, 1.25rem + 2.75vw, 2.563rem); /*  27px → 41px */

    /* Spacing & Layout */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Miscellaneous */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-premium: 0 20px 25px -5px rgba(30, 58, 138, 0.04), 0 10px 10px -5px rgba(30, 58, 138, 0.03);
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    --container-max-width: 1200px;
    --navbar-height: 80px;
}

/* ─── Ajustes en TABLET (769px – 1024px): solo espaciado menor, navbar igual ── */
@media (max-width: 768px) {
    :root {
        --navbar-height: 68px;
        --spacing-3xl: 3rem;
        --spacing-2xl: 2rem;
    }
}

/* ─── Ajustes en MÓVIL PEQUEÑO (≤576px): navbar compacta, espaciado reducido ── */
@media (max-width: 576px) {
    :root {
        --navbar-height: 60px;
        --spacing-3xl: 2.5rem;
        --spacing-2xl: 1.75rem;
        --spacing-xl: 1.5rem;
    }
}