/* =================================================
   FIX GLOBAL - Resolve o scroll lateral (dança da tela)
   ================================================= */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

/* =================================================
   BREAKPOINT PRINCIPAL (900px e abaixo)
   ================================================= */


@media (max-width: 900px) {
    /* 1. Navbar Container */
    .navbar {
        height: 75px !important;
        background-color: #000 !important;
        z-index: 9999;
    }

    .navbar-container {
        display: grid !important;
        grid-template-columns: 60px 1fr 60px !important; 
        align-items: center !important;
        height: 75px !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    /* 2. Botão Hambúrguer Principal */
    .navbar-toggle {
    display: flex !important;
    grid-column: 1 !important; /* Fixa na esquerda */
    justify-content: center !important;
    align-items: center !important;
    font-size: 32px !important; 
    color: #ffffff !important;
    background: transparent !important; /* Remove fundo branco */
    border: none !important;             /* Remove bordas */
    outline: none !important;
    cursor: pointer;
    z-index: 10001;
    padding: 0 !important;
    line-height: 1;
}

    /* 3. Logótipo */
    .navbar-logo {
        grid-column: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .navbar-logo img {
        height: 70px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .navbar-container::after {
        content: "";
        grid-column: 3 !important;
    }

    /* 4. Menu de Links Organizado */
    .navbar-links {
        display: none; 
        position: fixed;
        top: 75px; 
        left: 0;
        width: 100%;
        height: calc(100vh - 75px);
        background: #0b0b0b;
        z-index: 10000;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: stretch !important;
        padding: 0 !important;
        overflow-y: auto;
    }

    .navbar-links.active {
        display: flex !important;
    }

    .navbar-links li {
        width: 100% !important;
        list-style: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        opacity: 0;
        transform: translateY(10px);
    }

    .navbar-links.active li {
        animation: slideInMenu 0.3s ease forwards;
    }

    .navbar-links.active li:nth-child(1) { animation-delay: 0.1s; }
    .navbar-links.active li:nth-child(2) { animation-delay: 0.15s; }
    .navbar-links.active li:nth-child(3) { animation-delay: 0.2s; }
    .navbar-links.active li:nth-child(4) { animation-delay: 0.25s; }
    .navbar-links.active li:nth-child(5) { animation-delay: 0.3s; }

    .navbar-links li a, 
    .navbar-links li .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 22px 25px !important; 
        color: #fff !important;
        font-family: inherit !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
        text-decoration: none !important;
        text-align: left !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
    }

    .navbar-links li a::after {
        content: "›" !important;
        font-size: 1.4rem !important;
        color: rgba(255, 255, 255, 0.3) !important;
    }

    /* CORREÇÃO: Adicionamos o sinal > para ser específico à lista principal */
.navbar-links > li:last-child a[href*="#"], 
.navbar-links li i.fa-bars,
.navbar-links .navbar-toggle-extra { 
    display: none !important; 
}

    /* 5. Submenus (Dropdowns) */
    .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        background: #151515 !important;
        padding: 0 !important;
        border: none !important;
        transform: none !important;
    }

    .nav-item.dropdown.active > .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu li a {
        padding: 15px 25px 15px 50px !important;
        font-size: 0.95rem !important;
        text-transform: none !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    }
/* 5.1. Estilização Especial para o Submenu Contactos */
    
    /* Títulos dos Departamentos e Instalações em Verde Chamativo */
    .dropdown-menu .item-texto strong {
        color: #28a745 !important; /* Verde chamativo da marca */
        display: block !important;
        padding: 15px 25px 5px 50px !important; /* Alinhado com os links */
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* Notas de custo de chamada em Branco Visível */
    .dropdown-menu .item-texto p {
        color: rgba(255, 255, 255, 0.9) !important; /* Branco quase total para leitura */
        padding: 0 25px 15px 50px !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
        font-style: italic !important;
    }

    /* Ajuste para o item de endereço (Instalações) */
    .dropdown-menu .item-texto a {
        padding: 5px 25px 15px 50px !important;
        line-height: 1.4 !important;
        text-transform: none !important;
    }

    /* Remover a seta (›) apenas dos textos informativos e endereços */
    .dropdown-menu .item-texto a::after,
    .dropdown-menu .item-texto strong::after {
        display: none !important;
    }
    /* 6. CORREÇÃO DEFINITIVA: REDES SOCIAIS (Geral e Contactos) */
    .container-redes-geral, .container-redes {
        display: block !important;
        padding: 20px 25px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .box-redes-sociais {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .box-redes-sociais li {
        width: auto !important;
        border: none !important;
        padding: 0 !important;
        opacity: 1 !important; /* Garante visibilidade */
        transform: none !important;
    }

    .box-redes-sociais li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
    }

    /* Remove a seta apenas dos ícones sociais */
    .box-redes-sociais li a::after {
        display: none !important;
    }

    /* Forçar todos os ícones (incluindo LinkedIn) a aparecerem brancos e nítidos */
    .box-redes-sociais i.fab, 
    .box-redes-sociais i.icon {
        padding-left: 5px;
        font-size: 20px !important;
        color: #ffffff !important;
        display: block !important;
        margin: 0 !important;
    }

    .navbar-cta, .navbar-container::before {
        display: none !important;
    }
}

/* Animação de Entrada */
@keyframes slideInMenu {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    @media (max-width: 900px) {
    /* 1. Reset Total do Contentor */
    .footer-container {
        display: block !important; /* Mudamos de Grid/Flex para Block para garantir que cada div ocupa a linha toda */
        width: 100% !important;
        text-align: center !important;
        padding: 2rem 5% !important;
    }

    /* 2. Forçar a Coluna de Telefone a ser Central */
    .footer-col.footer-info {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 2rem auto !important;
        display: block !important; /* Bloco simples para não haver desvios */
        float: none !important;
    }

    /* 3. Centralização Específica dos Números */
    .footer-phone-container {
        display: inline-block !important; /* Faz com que o contentor se comporte como texto para obedecer ao center */
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .footer-phone {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Forçar o texto do número e o ícone a estarem juntos no centro */
    .phone-number {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-left: 0 !important;
    }

    /* 4. WhatsApp e Email (Lado a Lado) */
    .footer-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 30px;
        margin: 20px auto !important;
        width: 100% !important;
    }

    /* 5. Redes Sociais em Linha (Sem afetar os de cima) */
    .box-redes-sociais {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 15px auto !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .footer-socials h4 {
        margin-bottom: 5px !important; /* Reduz a distância para os ícones */
        padding-bottom: 0 !important;
    }

    .box-redes-sociais {
        margin-top: 5px !important; /* Aproxima os ícones do título */
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }
}


/* =================================================
   BREAKPOINT ESPECÍFICO PARA SERVIÇOS (768px)
   ================================================= */
@media (max-width: 768px) {
    .servico-bloco {
        padding: 40px 5%;
    }

    .servico-container {
        flex-direction: column !important; /* Empilha imagem e texto */
        gap: 30px;
    }

    .servico-slider {
        width: 100% !important;
        height: 250px;
    }

    .servico-conteudo {
        padding: 0;
        text-align: center;
    }

    .servico-info {
        grid-template-columns: 1fr; /* Características uma debaixo da outra */
        gap: 20px;
    }
}