body {
    font-family: 'Helvetica', sans-serif;
    color: #333;
}

/* =======================
   Animación del Menú de Navegación
   ======================= */

/* Preparamos el contenedor del enlace */
.navbar-nav .nav-item .nav-link {
    position: relative; /* Necesario para posicionar la línea de abajo */
    text-decoration: none; /* Quitamos cualquier subrayado por defecto */
    transition: color 0.3s ease-in-out; /* Animación suave del color del texto (opcional) */
}

/* Creamos la línea (usando un pseudo-elemento ::after) */
.navbar-nav .nav-item .nav-link::after {
    content: ''; /* Obligatorio para que el pseudo-elemento se muestre */
    position: absolute;
    bottom: 0.5em; /* Posición de la línea, un poco por debajo del texto */
    left: 50%; /* La línea empieza en el centro horizontal */
    transform: translateX(-50%); /* Truco para asegurar que el centrado es perfecto */
    
    width: 0%; /* La línea empieza sin ancho, por eso está oculta */
    height: 2px; /* Grosor de la línea */
    background-color: currentColor; /* Usa el mismo color que el texto del enlace */
    
    transition: width 0.3s ease-in-out; /* ¡Esta es la animación! Anima el cambio de ancho */
}

/* Definimos lo que pasa al pasar el ratón (hover) */
.navbar-nav .nav-item .nav-link:hover::after {
    width: 100%; /* La línea se expande al 100% del ancho del enlace */
}

/* Opcional: Hacer el texto un poco más brillante al pasar el ratón */
.navbar-nav .nav-item .nav-link:hover {
    filter: brightness(1.2);
}