/* =================================
   ESTILOS RESPONSIVOS (max-width: 768px)
================================= */

@media (max-width: 768px) {
    /* --- 1. MOSTRA O BOTÃO HAMBÚRGUER E ESCONDE O MENU PRINCIPAL --- */

    .menu-toggle {
        display: block; /* Mostra o botão hambúrguer */
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        z-index: 1001; /* Garante que ele fique na frente */
    }

    .nav {
        display: none; /* Esconde o menu de navegação por padrão */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Ocupa a tela inteira */
        background-color: #141927;
        z-index: 1000;
    }

    /* --- 2. EXIBE O MENU QUANDO ESTIVER ATIVO --- */
    
    .nav.active {
        display: flex; /* Exibe o menu quando o JS adicionar a classe .active */
        z-index: 1000;
    }

    /* --- 3. ESTILIZA O LAYOUT DO MENU MOBILE (VERTICAL) --- */
    
    .nav-menu {
        flex-direction: column; /* Itens um embaixo do outro */
        width: 100%;
        align-items: center;
        justify-content: center; /* Centraliza verticalmente */
        padding: 20px 0;
        gap: 30px;
    }

    .nav-menu li a {
        font-size: 1.2rem; /* Aumenta a fonte para melhor toque */
    }


    /* --- 4. ALTERNA O ÍCONE DE HAMBÚRGUER PARA 'X' --- */

    /* Garante que o 'X' comece escondido */
    .menu-toggle .fa-xmark {
        display: none;
    }

    /* Quando o botão tiver a classe 'active', esconde as barras */
    .menu-toggle.active .fa-bars {
        display: none;
    }

    /* E mostra o 'X' */
    .menu-toggle.active .fa-xmark {
        display: block;
    }
}