/* Efectos generales de los enlaces en el menú */
.navbar-nav .nav-link {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    color: #000; /* Color inicial del texto */
    font-size: 16px;
    text-decoration: none; /* Elimina el subrayado */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 50px; /* Forma ovalada */
    transition: all 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover */
.navbar-nav .nav-link:hover {
    background-color: #00bfff; /* Cambia el fondo a celeste al pasar el mouse */
    color: #fff; /* Cambia el texto a blanco */
}

/* Línea animada debajo del botón */
.navbar-nav .nav-link::before {
    content: ""; /* Pseudo-elemento vacío */
    position: absolute; /* Posiciona el pseudo-elemento en relación al enlace */
    bottom: 0; /* Ubicado en la parte inferior del enlace */
    left: 50%; /* Comienza en el centro */
    width: 0%; /* Ancho inicial de la línea */
    height: 3px; /* Grosor de la línea */
    background-color: red; /* Color rojo de la línea */
    transition: all 0.3s ease; /* Transición suave */
    transform: translateX(-50%); /* Centra el inicio de la línea */
}

/* Animación al pasar el mouse */
.navbar-nav .nav-link:hover::before {
    width: 100%; /* La línea ocupa todo el ancho del enlace */
}