/* SISTEMA DE COLORES LITÚRGICOS */

:root {
    /* Por defecto: Tiempo Ordinario (Verde) — la temporada más larga del año.
       El color real lo fija el script litúrgico según la fecha. */
    --color-primary: #2E7D32;
    --color-secondary: #43A047;
    --color-bg-light: #EEF7EF;
    --color-primary-rgb: 46, 125, 50;
    --color-secondary-rgb: 67, 160, 71;

    /* Colores fijos */
    --color-text: #3A312B;          /* charcoal cálido, alto contraste */
    --color-text-light: #6E6259;    /* gris cálido */
    --color-white: #FFFFFF;
    --color-cream: #FBF6EE;
    --color-cream-deep: #F4ECDF;
    --color-surface: rgba(255, 255, 255, 0.72); /* tarjetas: blanco con ligera transparencia */
    --color-gold: #C9A24B;
    --color-gold-rgb: 201, 162, 75;
    --color-whatsapp: #25D366;

    /* Fondo acuarela — por defecto Tiempo Ordinario (verde) */
    --bg-base: #FCFDFC;
    --bg-grad1: #EEF7EF;
    --bg-grad2: #DFF0E1;

    /* Tipografías */
    --font-title: 'Playfair Display', serif;
    --font-subtitle: 'Lora', serif;
    --font-body: 'Montserrat', sans-serif;

    /* Sombras cálidas y suaves (tinte marrón tibio) */
    --shadow-sm: 0 3px 12px rgba(90, 65, 40, 0.07);
    --shadow-md: 0 12px 32px rgba(90, 65, 40, 0.10);
    --shadow-lg: 0 24px 55px rgba(90, 65, 40, 0.14);
    --shadow-colored: 0 12px 28px rgba(var(--color-primary-rgb), 0.20);
    --shadow-colored-hover: 0 18px 38px rgba(var(--color-primary-rgb), 0.28);
    --gradient-primary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    --gradient-surface: var(--color-surface);

    /* Radios redondeados y amables */
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 30px;
    --radius-pill: 999px;
}

/* TIEMPO ORDINARIO (Verde) */
.liturgical-ordinary {
    --color-primary: #2E7D32;
    --color-secondary: #43A047;
    --color-bg-light: #EEF7EF;
    --color-primary-rgb: 46, 125, 50;
    --color-secondary-rgb: 67, 160, 71;
    --bg-base: #FCFDFC;
    --bg-grad1: #EEF7EF;
    --bg-grad2: #DFF0E1;
}

/* PENTECOSTÉS Y MÁRTIRES (Rojo) */
.liturgical-pentecost {
    --color-primary: #C62828;
    --color-secondary: #D84343;
    --color-bg-light: #FAEEEE;
    --color-primary-rgb: 198, 40, 40;
    --color-secondary-rgb: 216, 67, 67;
    --bg-base: #FDFBFB;
    --bg-grad1: #FAEEEE;
    --bg-grad2: #F5DADA;
}

/* NAVIDAD Y PASCUA (Dorado) */
.liturgical-christmas {
    --color-primary: #C8A05A;
    --color-secondary: #D8B87C;
    --color-bg-light: #FAF8F2;
    --color-primary-rgb: 200, 160, 90;
    --color-secondary-rgb: 216, 184, 124;
    --bg-base: #FFFEFC;
    --bg-grad1: #FAF8F2;
    --bg-grad2: #F3E8D2;
}

/* ADVIENTO Y CUARESMA (Morado) */
.liturgical-advent {
    --color-primary: #6F3A8A;
    --color-secondary: #8B5FB2;
    --color-bg-light: #F4EFF8;
    --color-primary-rgb: 111, 58, 138;
    --color-secondary-rgb: 139, 95, 178;
    --bg-base: #FCFAFD;
    --bg-grad1: #F4EFF8;
    --bg-grad2: #E8DDF2;
}

/* Aplicación de colores a componentes */

/* Header */
.header {
    background: var(--color-surface);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

/* Menú */
.navbar {
    background: var(--color-primary); /* fallback si no hay color-mix */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 82%, #000) 0%,
            var(--color-primary) 42%,
            var(--color-secondary) 100%);
}

.menu-link::after {
    background-color: var(--color-secondary);
}

.menu-link.active::after,
.menu-link:hover::after {
    background: linear-gradient(90deg, var(--color-gold), var(--color-white));
}

/* Botones */
.btn-primary {
    background: var(--color-primary);
    box-shadow: var(--shadow-colored);
}

.btn-primary:hover {
    background: var(--color-secondary);
    box-shadow: var(--shadow-colored-hover);
}

.btn-secondary {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--color-primary);
}

/* Tarjetas */
.card-highlight {
    border-left: 5px solid var(--color-primary);
}

.card-header i {
    color: var(--color-primary);
}

/* Sacramentos */
.sacrament-icon {
    color: var(--color-primary);
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.12) 0%, transparent 72%);
}

/* Fondo general — base casi blanca (las manchas acuarela van en body::before) */
body {
    background-color: var(--bg-base);
    transition: background-color 0.6s ease;
}

/* Separadores y acentos */
.section-subtitle {
    color: var(--color-primary);
}

.section-title::after {
    background: var(--color-gold);
}

/* Indicadores del carrusel */
.carousel-indicators .indicator.active {
    background-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.carousel-indicators .indicator {
    background-color: rgba(255, 255, 255, 0.55);
}

/* Redes sociales */
.social-icons a {
    background-color: var(--color-primary);
}

.social-icons a:hover {
    background-color: var(--color-secondary);
}

/* Footer */
.footer {
    border-top: 3px solid var(--color-primary);
}

.footer-links a {
    color: var(--color-primary);
}

.footer-links a:hover {
    color: var(--color-secondary);
}