/* --- ESTILOS PARA EL LOGO Y NAVEGACIÓN --- */

/* * 1. Estilos Base para el Logo 
 */
.navbar-logo {
    /* Define un tamaño máximo para que no se vea gigantesco */
    width: 100%;
    max-width: 80px; /* Tamaño del logo en escritorio */
    height: auto;
    /* Para transiciones suaves en animaciones */
    transition: transform 0.3s ease, filter 0.3s ease; 
    margin-right: 15px; /* Espacio entre el logo y el texto de la marca */
    
    /* Configuración inicial del filtro para la animación de scroll */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* * 2. Responsividad del Logo (para pantallas más pequeñas, se ve un poco más grande)
 */
@media (max-width: 576px) {
    .navbar-logo {
        max-width: 60px; /* Un poco más grande en móviles */
    }
}

/* * 3. Animación: Efecto de 'Bounce' al pasar el ratón por el logo 
 */
.navbar-logo:hover {
    transform: scale(1.1); /* Hace el logo 10% más grande */
}

/* * 4. Estilos para los Enlaces de Navegación 
 */
.nav-link {
    font-weight: 500;
    font-size: 1.05rem;
    position: relative;
    /* Transición para la animación de hover */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* * 5. Animación: Subrayado elegante al pasar el ratón por los enlaces 
 */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: white; /* O tu color de acento */
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    /* Un ligero levantamiento al pasar el ratón */
    transform: translateY(-2px); 
    color: #f8f9fa !important; /* Asegura el color blanco al hacer hover */
}

/* * 6. Fijar la barra de navegación al hacer scroll (opcional) 
 */
#main-navbar {
    position: sticky;
    top: 0;
    z-index: 1020; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Transición para la animación del scroll */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* --- ANIMACIÓN ADICIONAL: Modo 'Oscuro' del Logo al hacer scroll --- */

/* * 7. Clases para el efecto de scroll
 * NOTA: Esto requiere JavaScript, ver la siguiente sección.
 * La clase 'scrolled' se agregará a la barra de navegación con JS.
 */
.navbar.scrolled {
    /* Puedes cambiar el fondo si quieres, o dejar el bg-success */
    /* background-color: rgba(0, 0, 0, 0.95) !important; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.navbar.scrolled .navbar-logo {
    /* Aquí se usa tu logo en blanco y negro (asumiendo que tiene el mismo nombre pero la ruta cambia) */
    /* Si tienes la imagen en 'assets/img/logoBN.svg', descomenta esto: */
    /* content: url('../img/logoBN.svg'); */
    
    /* Alternativa más limpia: Usar filtros CSS para el efecto BN si usas el mismo archivo SVG */
    filter: grayscale(100%) brightness(1.2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    transform: scale(0.95); /* Se hace un poco más pequeño */
}