@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.navegacion-principal {
    background: transparent; /* Transparente inicialmente */
    position: fixed; /* Cambiado a fixed para permitir posicionar más abajo inicialmente */
    top: 50px; /* Ajusta esto según sea necesario */
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    transition: background-color 0.3s ease, top 0.3s ease; /* Transición suave para el color de fondo y la posición */
}

.navegacion-principal.solido {
    background: #2A63C3; /* Color sólido al desplazarse hacia abajo */
    top: 0; /* Ajustar a la parte superior de la ventana */
    box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
}


.menu-movil {
    display: none;
    cursor: pointer;
    /* Estilos adicionales para el botón de menú, como dimensiones, barras del menú, etc. */
}
.navegacion-principal a {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    font-family: 'Poppins',sans-serif;
}

.navegacion-principal a:hover{
    text-decoration: none;
    color: #00ace1;
    text-shadow: 3px 3px 15px  rgba(151, 222, 255, 0.897); /* Ejemplo de sombra */
}

.navegacion-principal.solido a{
    color: white; /* Color sólido al desplazarse hacia abajo */
}

.navegacion-principal.solido a:hover{
    text-decoration: none;
    color: #fff53d;
    text-shadow: 0px 0px 15px  rgba(255, 252, 151, 0.897); /* Ejemplo de sombra */
}





@media (max-width: 768px) {
    .menu-movil {
        display: block;
        padding-right: 5%;
    }
    .menu-movil span i {
        font-size: 40px;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3 ease;
    }
    
    .menu-movil span i:hover {
        font-size: 40px;
        background: #F2A103;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    

    .navegacion-principal {
        justify-content: end;
    }

    .navegacion-principal a {
        display: none;
        width: 100%;
        text-align: left;
        padding: 10px;
        font-size: 1rem !important;
    }

    .navegacion-principal.mostrar a {
        display: block;
    }
}

/* Resto de tus estilos */