/* Importamos las tres fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Andika+Basic&family=Cinzel+Decorative:wght@400;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap');

/* ==========================================================
   1. TEXTOS GENERALES
   ========================================================== */
body, .com-content-article {
    font-family: 'Merriweather', serif;
    color: #616161;
    /* font-size: 1rem; */
}

/* ==========================================================
   2. ENCABEZADOS 1 a 5 (Andika Basic)
   ========================================================== */
h1, .article-title, .page-header {
    font-family: 'Andika Basic', sans-serif;
    color: #0F4C81;
}

h2 {
    font-family: 'Andika Basic', sans-serif;
    color: #0F4C81;
}

h3 {
    font-family: 'Andika Basic', sans-serif;
    color: #0F4C81;
}

h4, h5 {
    font-family: 'Andika Basic', sans-serif;
    color: #0F4C81;
}

/* ==========================================================
   3. ENCABEZADO 6 (Títulos especiales - Cinzel Decorative)
   ========================================================== */
h6 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem; /* Equivalente adaptativo a ~21px */
    color: #897053;
}

/* ==========================================================
   4. COLORES DE FONDO, TEXTO Y ALINEACIÓN (Pie de página)
   ========================================================== */

/* Fondo del pie de página y centrado general */
footer.container-footer, 
.container-footer,
.site-footer {
    background-color: #E9E4D8 !important;
    background-image: none !important;
    color: #616161 !important;
    padding: 3rem 0 !important;
    text-align: center !important;
}

/* Forzar centrado absoluto mediante Flexbox en el contenido del módulo */
.container-footer .grid-child,
.container-footer .custom,
.container-footer [class*="mod-"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Estilo y tamaño para el texto general y enlaces del pie */
footer.container-footer p,
footer.container-footer span,
footer.container-footer a,
.container-footer p,
.container-footer span,
.container-footer a {
    color: #616161 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}

/* Encabezados en el pie de página (Azul Andika Basic) */
footer.container-footer h1,
footer.container-footer h2,
footer.container-footer h3,
footer.container-footer h4,
footer.container-footer h5,
footer.container-footer h6,
.container-footer h1,
.container-footer h2,
.container-footer h3,
.container-footer h4,
.container-footer h5,
.container-footer h6 {
    color: #0F4C81 !important;
    text-align: center !important;
}

/* ==========================================================
   5. Fondo blanco para la cabecera (Zona del logo)
   ========================================================== */

header.header,
.container-header,
.header {
    background-color: #ffffff !important;
    background-image: none !important; /* Elimina el gradiente azul por defecto */
    box-shadow: none !important;        /* Opcional: elimina sombras si las hubiera */
}

/* ==========================================================
   6. ESTILOS DEL MENÚ PRINCIPAL (Cabecera)
   ========================================================== */

/* Estado normal de los enlaces del menú */
header.header .mod-menu a,
.container-header .mod-menu a,
.nav-link {
    background-color: #F5F5F5 !important; /* Background Color */
    color: #0F4C81 !important;            /* Text / Link Color */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 4px !important;         /* Bordes suavemente redondeados */
    transition: all 0.2s ease-in-out !important;
}

/* Estado al pasar el ratón por encima (Hover) y elemento activo */
header.header .mod-menu a:hover,
header.header .mod-menu a:focus,
.container-header .mod-menu a:hover,
.container-header .mod-menu .active > a,
.nav-link.active {
    background-color: #F5F5F5 !important; /* Se mantiene el fondo claro */
    color: #897053 !important;            /* Link Hover Color (Cinzel Decorative) */
}

/* ==========================================================
   7. MENÚ MÓVIL (Hamburguesa y Desplegable Centrado)
   ========================================================== */

@media (max-width: 991.98px) {
    /* Forzar al contenedor del menú a centrarse */
    .container-header .mod-menu,
    .container-header .navbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Botón de hamburguesa centrado */
    .navbar-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        float: none !important;
        border: 1px solid #0F4C81 !important;
        color: #0F4C81 !important;
        padding: 0.4rem 0.8rem !important;
        border-radius: 4px !important;
    }

    /* SOLO cuando el menú está abierto (.show), lo centramos en columna */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Lista de enlaces desplegada */
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* Elementos individuales centrados */
    .navbar-collapse.show .navbar-nav .nav-item,
    .navbar-collapse.collapsing .navbar-nav .nav-item {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-collapse.collapsing .navbar-nav .nav-link {
        display: inline-block !important;
        margin: 0.25rem auto !important;
        text-align: center !important;
        max-width: 250px !important;
        width: 100% !important;
    }
}