/* ==========================================================================
   RESET E COMPORTAMENTO PADRÃO DO BOTÃO (COMPUTADOR / TELAS GRANDES)
   ========================================================================== */
.menu-toggle {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001 !important; /* Sempre no topo absoluto */
    padding: 0;
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--accent-color);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   REGRAS EXCLUSIVAS PARA CELULARES E TABLETS (ATÉ 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Alinhamento Horizontal do Header Mobile */
    header {
        padding: 15px 6%;
        display: flex !important;
        flex-direction: row !important;  
        justify-content: space-between !important; 
        align-items: center !important;  
        width: 100% !important;
        height: 70px !important;
        z-index: 9999 !important; /* Garante que a barra do topo fique acima do banner */
    }

    /* Oculta completamente toda a estrutura do PC */
    .nav-desktop, header > .btn-login {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. Exibe o Botão Hambúrguer */
    .menu-toggle {
        display: flex !important; 
    }

    /* 3. Estilização da Barra Lateral Mobile (Corrigido Transparência e Z-Index) */
    .nav-menu {
        display: flex !important;      
        position: fixed !important;
        top: 0 !important;
        right: -100%;                  
        width: 280px !important;                  
        height: 100vh !important;
        background-color: #161616 !important; /* Cor sólida para bloquear o fundo */
        border-left: 1px solid #2d2d2d !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 35px !important;
        transition: right 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) !important; 
        z-index: 10000 !important; /* Fica acima do banner e abaixo do botão toggle */
        padding: 40px 20px !important;
    }

    /* 4. Gatilho de Abertura */
    .nav-menu.active {
        right: 0 !important; 
    }

    /* 5. Alinhamento Vertical dos Links do Menu Mobile */
    .nav-menu ul {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 25px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .nav-menu ul li a {
        font-size: 1.2rem !important;
        display: block !important;
        padding: 10px 0 !important;
        color: var(--text-color) !important;
        text-decoration: none !important;
    }

    /* 6. Estilização do Botão de Login Mobile */
    .nav-menu .btn-mobile {
        display: block !important;
        width: 90% !important;
        text-align: center !important;
        padding: 12px 0 !important;
        margin-top: 15px !important;
    }

    /* 7. Animação dos riscos virando um "X" perfeito e centralizado */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* ==========================================================================
       CORREÇÕES EXTRA DE RESPONSIVIDADE DO CONTEÚDO (BANNER / FOTOS)
       ========================================================================== */
    section {
        padding: 90px 6% 50px 6% !important;
    }

    /* Garante que o slider não force uma camada visual acima do menu */
    #home, .slider, .slide {
        z-index: 1 !important;
    }

    h2 {
        font-size: 1.8rem !important;
        margin-bottom: 35px !important;
    }

    .slide-content h1 {
        font-size: 2.2rem !important;
    }

    .slide-content p {
        font-size: 1rem !important;
    }

    .quem-somos-container, .contato-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .about-text h2 {
        text-align: center !important;
    }

    .about-photo {
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .portfolio-grid, .pacotes-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .btn-more-services {
        width: 100% !important;
        text-align: center !important;
    }

    .pacote-item, .pacote-item.mais-vendido {
        height: auto !important;
        padding: 35px 20px !important;
    }

    .contato-form {
        padding: 30px 20px !important;
    }

    .contato-map iframe {
        min-height: 300px !important;
    }
}