header {
    position: relative;
    z-index: 9;
    color: #FFF;
}
header .navbar-brand img {
    width: 100px;
}
section p {
    font-family: 'Aeonik Regular', sans-serif;
}
section article p {
    font-family: 'Aeonik Light', sans-serif;
}
img.flag {
    width: 20px;
}
@media screen and (min-width: 992px) {
    header a.nav-link {
        color: #FFF;
    }
}
@media screen and (max-width: 992px) {
    header .navbar-brand img {
        filter: invert(1);
    }
}

@media screen and (max-width: 992px) {
    /* Animaciones del menú hamburguesa */
    /* 1. Estado Cerrado por defecto */
    .navbar-collapse {
        display: block !important; /* Evitamos que JS use display: none */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-10px);
        visibility: hidden; /* Oculta el menú a clics y lectores de pantalla al estar cerrado */
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
    }

    /* 2. Estado Abierto */
    .navbar-collapse.show {
        max-height: 800px; /* Pon un valor mayor a la altura total real de tu menú */
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    /* 3. Neutralizar la clase temporal de Bootstrap */
    .navbar-collapse.collapsing {
        height: auto !important; 
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
    }

    .navbar-collapse li.nav-item {
        line-height: 50px;
    }
}

.nav-link:focus, .nav-link:hover {
    color: #FFF;
    font-weight: bold;
}


/* Estilos por defecto del header */
#masthead-sticky {
    z-index: 9;
    position: sticky;
    top: 0;
}

@media screen and (max-width: 992px) {
    /* Estilos por defecto del header en desktop */
    #masthead-sticky.scrolled {
        background-color: #fff;
        border-bottom: #000 1px solid; /* Añade un borde inferior para separar el header del contenido */
        /* transition: background-color 0.3s ease, box-shadow 0.3s ease; */ /* Transición suave */
    }
}

@media screen and (min-width: 992px) {
    /* Estilos que se aplicarán al hacer scroll */
    #masthead-sticky.scrolled {
        background-color: #000; /* El fondo se vuelve negro */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Opcional: añade una pequeña sombra para que resalte */
        transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    }
}

/* @media (prefers-color-scheme: dark) {
    @media (max-width: 768px) {
        #masthead-sticky, #masthead-sticky.scrolled {
            background-color: #b1b1b1 !important;
        }
    }
} */