/* Menú principal */

.main-menu {
    display: flex;
    justify-content: right;
    padding: 20px 60px 0 20px; /* Ajusta el padding si es necesario */
    position: relative;
    top: 0;
    left: 0;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    background: transparent;
    z-index: 10;
}

/* Ajusta la lista */
.main-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Espaciado entre elementos del menú */
.main-menu li {
    margin: 0 30px; /* Espaciado entre las opciones */
}

/* Estilos de los enlaces */
.main-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    padding: 10px 20px; /* Espacio interior */
    display: inline-block;
    transition: color 0.3s ease; /* Suaviza el cambio de color */
}

/* Efecto hover y active */
.main-menu a:hover::after,
.main-menu a.active::after {
    content: ""; /* Obligatorio para generar la línea */
    position: absolute;
    left: 0;
    bottom: 0; /* Coloca la línea justo debajo del texto */
    width: 100%; /* Línea del ancho del enlace */
    height: 2px; /* Grosor de la línea */
    background-color: #fff; /* Color de la línea */
    transition: width 0.3s ease; /* Animación suave */
}

.main-menu a::after {
    content: ""; /* Define el espacio inicial sin línea */
    position: absolute;
    left: 0;
    bottom: 0; /* Coloca la línea justo debajo del texto */
    width: 0; /* Línea oculta inicialmente */
    height: 2px; /* Grosor de la línea */
    background-color: #fff; /* Color de la línea */
    transition: width 0.3s ease; /* Animación suave */
}


/* Estilo por defecto para pantallas grandes */
/* Ya está definido en tu CSS original */

/* Estilo por defecto para pantallas grandes */
/* Ya está definido en tu CSS original */

/* Media Query para iPads (pantallas de hasta 1024px) */
/* Media Query para iPads (pantallas de hasta 1024px) */

@media (max-width: 1024px) {
    .main-menu {
        justify-content: center; /* Centra el menú horizontalmente */
        padding: 10px 0px; /* Reduce el padding arriba y abajo */
    }

    .main-menu ul {
        gap: 20px; /* Espacio reducido entre enlaces */
    }

    .main-menu a {
        font-size: 16px; /* Ajusta el tamaño del texto */
        padding: 8px 10px; /* Reduce el padding interno */
    }
}

/* Media Query para móviles (pantallas de hasta 768px) */
@media (max-width: 768px) {
    .main-menu {
        justify-content: center; /* Centra el menú horizontalmente */
        padding: 5px 0; /* Padding más reducido */
    }

    .main-menu ul {
        margin-left: 0px;
        margin: 0px 10px;
        gap: 0px; /* Espacio reducido entre enlaces */
    }

    .main-menu a {
        font-size: 14px; /* Tamaño de texto más pequeño */
        padding: 5px 0px; /* Reduce el padding interno */
    }
    .main-menu li {
        margin: 0 7.5px; /* Espaciado entre las opciones */
    }
    
}