/* ========================================================
   LINAJE HEALING CENTER - VARIABLES Y ESTILOS BASE
   ======================================================== */

/* --- VARIABLES DE COLOR Y TIPOGRAFIA (DISENO LINAJE) --- */
:root {
    --color-black: #050807;
    --color-dark: #07100e;
    --color-overlay: rgba(4, 10, 8, 0.62);

    --color-green: #1f5f4a;
    --color-green-dark: #0f2b22;
    --color-jade: #7fb8a0;
    --color-petrol: #0f2a24;

    --color-orange: #c06b3b;
    --color-orange-light: #d58b55;
    --color-copper: #b56a3a;
    --color-fire: #d07a3d;

    --color-cyan: #4aa9a6;
    --color-cyan-soft: #d8f4f2;
    --color-turquoise: #5bb6b1;
    --color-leaf-soft: #eef6f1;

    /* Colores de Texto */
    --color-white: #ffffff;
    --color-text-light: #eef6f1;
    --color-text-light-mobile: #eef6f1;
    --color-text-dark: #333333;

    /* Aliases conservados para compatibilidad con el CSS existente */
    --color-gold: #cbb58a;
    --color-gold-light: #e8dcc4;
    --color-cream: var(--color-cyan-soft);
    --color-cream-text: var(--color-leaf-soft);
    --color-primary: var(--color-black);
    --color-secondary: var(--color-orange);
    --color-light: #f5f5f5;
    --color-border: rgba(203, 181, 138, 0.16);

    /* Tipografia */
    --font-title: 'Cinzel', serif;
    --font-subtitle: 'Cormorant Garamond', serif;
    --font-body: 'Inter', 'Manrope', 'Arial', sans-serif;

    /* Aliases para compatibilidad */
    --font-serif: 'Cinzel', serif;
    --font-serif-alt: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', 'Manrope', 'Arial', sans-serif;

    /* Transiciones */
    --transition: all 0.3s ease-in-out;

    --shadow-cinematic: 0 28px 90px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.38);

    /* Alturas del Header */
    --header-height: 82px;
    --header-height-mobile: 70px;

    --glass-bg: rgba(7, 20, 16, 0.55);
    --glass-border: rgba(192, 107, 59, 0.18);
    --glass-border-2: rgba(203, 181, 138, 0.14);
    --glow-amber: 0 0 0 1px rgba(192, 107, 59, 0.16), 0 0 28px rgba(192, 107, 59, 0.12);
    --glow-jade: 0 0 0 1px rgba(31, 95, 74, 0.18), 0 0 34px rgba(31, 95, 74, 0.12);
}

/* --- RESET Y BOX-SIZING --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* --- CONTAINER --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
}