/* NAVBAR - Mobile */

@media screen and (max-width: 630px) {
    /* Container do menu */
    header nav#nav-esq {
        justify-content: space-between;
        position: relative;
    }

    /* Ícone do menu (hambúrguer) */
    header nav#nav-esq ul#icon-menu {
        display: flex;
        gap: 1rem;
    }

    /* Ícone de fechar (X) escondido por padrão */
    header nav#nav-esq ul#icon-menu li#menuX {
        display: none;
    }

    /* Menu lateral (dropdown mobile) */
    header nav#nav-esq ul#menu-principal {
        flex-direction: column;
        width: 75%;
        height: auto; /* Em vez de 85vh */
        background: linear-gradient(to right, rgba(0, 0, 0, 0.95), rgba(46, 46, 46, 0.95));
        padding: 1.5rem 1rem;
        position: absolute;
        top: 4rem; /* Ajuste conforme altura do header */
        right: 0;
        z-index: 999;
        display: none;
        border-radius: 8px 0 0 8px;
    }

    /* Itens do menu */
    header nav#nav-esq ul#menu-principal li {
        margin: 1rem 0;
    }

    header nav#nav-esq ul#menu-principal li a {
        font-size: 18px;
        color: #fff;
        text-decoration: none;
    }

    /* Classe ativa para abrir o menu */
    header nav#nav-esq ul#menu-principal.active {
        display: flex;
    }

    /* Quando o menu está aberto, mostrar o X e esconder o hambúrguer */
    header nav#nav-esq.menu-aberto ul#icon-menu li#menuX {
        display: block;
    }

    header nav#nav-esq.menu-aberto ul#icon-menu li#menuHamburguer {
        display: none;
    }
}