/* Estilo básico para el menú de navegación en escritorio */
#main-nav {
    background-color: #333; /* Color de fondo del menú */
    overflow: hidden; /* Asegura que el contenido no desborde el contenedor */
    display: block; /* Muestra el menú por defecto en escritorio */
    position: fixed; /* Fija el menú en la parte superior */
    top: 0; /* Alinea el menú en la parte superior de la página */
    width: 100%; /* Asegura que el menú ocupe el ancho completo */
    z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
}

/* Asegura que el contenido de la página no quede oculto detrás del menú fijo */
body {
    margin-top: 60px; /* Ajusta este valor según la altura de tu menú */
}

#main-nav ul {
    list-style-type: none; /* Elimina los puntos de lista predeterminados */
    margin: 0;
    padding: 0;
    display: flex; /* Alinea los elementos horizontalmente */
}

#main-nav ul li {
    flex: 1; /* Asegura que los elementos se distribuyan equitativamente */
}

#main-nav ul li a {
    display: block;
    color: white; /* Color del texto */
    text-align: center;
    padding: 15px 20px; /* Espaciado interno */
    text-decoration: none; /* Elimina el subrayado */
    background-color: #444; /* Color de fondo de los elementos */
    transition: background-color 0.3s; /* Transición suave del color de fondo */
}

#main-nav ul li a:hover {
    background-color: #555; /* Color de fondo al pasar el ratón */
}

#main-nav ul li:first-child a {
    border-radius: 5px 0 0 5px; /* Bordes redondeados para el primer elemento */
}

#main-nav ul li:last-child a {
    border-radius: 0 5px 5px 0; /* Bordes redondeados para el último elemento */
}

/* Estilo del ícono del menú para móviles */
#menu-icon {
    display: none; /* Oculta el ícono del menú en dispositivos de escritorio */
}