/* ==========================================================================
   HEADER - ESTRUTURA LATITUDE OFFSHORE
   ========================================================================== */
.main-header {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Mantém Logo | Menu | Botão */
    align-items: center;
    padding: 20px 40px;
}

/* LOGO - Lado Esquerdo */
.logo img {
    height: 50px; /* Ajuste conforme a imagem enviada */
    width: auto;
    display: block;
}

/* MENU CENTRAL */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-menu ul li a {
    text-decoration: none;
    color: #4A5568; /* Cinza do layout */
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    transition: 0.3s;
}

.nav-menu ul li a:hover, 
.nav-menu ul li a.active {
    color: #002D4B;
    border-bottom: 3px solid #8c8c8c;
}

/* BOTÃO WHATSAPP - Lado Direito */
.btn-inscricao-whats {
    background-color: #99FF00; /* Verde limão do print */
    color: #002D4B;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    transition: 0.3s;
}

/* ESCONDE O ÍCONE NO DESKTOP */
.mobile-menu-icon { display: none; }

/* ==========================================================================
   CONFIGURAÇÃO MOBILE (Ajustada para os prints da Latitude Offshore)
   ========================================================================== */
@media (max-width: 992px) {
    /* Impede que o site "vaze" para a direita */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-header {
        position: fixed; /* Fixa o header no topo */
        width: 100%;
        height: 70px;
        z-index: 10000;
    }

    .header-container {
        display: flex !important;
        justify-content: flex-start !important; /* Hambúrguer na esquerda */
        align-items: center;
        padding: 0 15px;
        position: relative;
        height: 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* ESCONDE O BOTÃO E MENU ORIGINAL */
    .nav-menu, .header-action {
        display: none !important;
    }

    /* GATILHO DO HAMBÚRGUER (Posicionado à Esquerda) */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 10002;
    }

    /* Transformando a DIV única nas 3 barras */
    .hamburger {
        width: 25px;
        height: 3px;
        background-color: #333;
        position: relative;
        transition: 0.3s;
    }
    .hamburger::before, .hamburger::after {
        content: '';
        width: 100%;
        height: 3px;
        background-color: #333;
        position: absolute;
        left: 0;
        transition: 0.3s;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { bottom: -8px; }

    /* ==========================================================================
       CORREÇÃO DA ANIMAÇÃO PARA 'X' 
       (Espaço adicionado entre .active e .hamburger para indicar herança)
       ========================================================================== */
    .mobile-menu-toggle.active .hamburger { 
        background-color: transparent !important; 
    }
    
    .mobile-menu-toggle.active .hamburger::before { 
        transform: rotate(45deg); 
        top: 0; 
    }
    
    .mobile-menu-toggle.active .hamburger::after { 
        transform: rotate(-45deg); 
        bottom: 0; 
    }

    /* LOGO CENTRALIZADA */
    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10001;
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
    }

    .logo img {
        height: 40px !important;
        width: auto !important;
        display: block !important;
    }
}

/* include/header.css */

/* ESCONDE O MENU MOBILE POR PADRÃO NO DESKTOP */
.nav-mobile-wrapper {
    display: none;
}

/* include/header.css */

/* MENU DESKTOP - Link Ativo com a barra embaixo */
.nav-menu ul li a.active {
    color: #002D4B !important; /* Azul escuro da Latitude */
    border-bottom: 3px solid #FF6600 !important; /* Laranja da logo para dar destaque */
    padding-bottom: 5px; /* Espaço para a barra não colar na letra */
}

/* Efeito ao passar o mouse para visualizar a barra também */
.nav-menu ul li a:hover {
    color: #002D4B;
    border-bottom: 3px solid #cccccc;
    padding-bottom: 5px;
}

/* ==========================================================================
   Ajuste do Menu Aberto (Gaveta Lateral)
   ========================================================================== */
@media (max-width: 992px) {
    .nav-mobile-wrapper.active {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #000000;
        z-index: 9999;
        padding: 40px;
        align-items: center;
        overflow-y: auto;
    }

    .main-footer .footer-container { display: flex !important; }

    
}

/* ==========================================================================
   ESTILIZAÇÃO E INTERATIVIDADE MOBILE UNIFICADA ( PREMIUM )
   ========================================================================== */
@media (max-width: 992px) {
    /* 1. Refina o fundo da gaveta lateral aberta (Mantém o topo que você definiu) */
    .nav-mobile-wrapper.active {
        background-color: rgba(10, 10, 10, 0.96) !important; /* Preto suave semi-transparente */
        backdrop-filter: blur(12px); /* Efeito moderno de vidro fosco */
        -webkit-backdrop-filter: blur(12px);
        padding: 60px 40px !important;
        justify-content: flex-start !important; /* Alinha o menu a partir do topo */
    }

    /* 2. Organiza e centraliza a lista (ul) interna do menu mobile */
    .nav-mobile-wrapper.active ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important; /* Espaçamento ideal para o clique do dedo */
        align-items: center !important;
    }

    /* 3. Garante que cada item ocupe a largura correta */
    .nav-mobile-wrapper.active ul li {
        width: 100% !important;
        text-align: center !important;
    }

    /* 4. Transforma os links (Limpa o azul e o sublinhado padrão do navegador) */
    .nav-mobile-wrapper.active ul li a {
        color: #ffffff !important;
        text-decoration: none !important; /* Remove o sublinhado roxo/azul antigo */
        font-weight: 700 !important;
        font-size: 18px !important; /* Tamanho de leitura perfeito para celular */
        text-transform: uppercase !important; /* Mantém em caixa alta */
        letter-spacing: 2px !important; /* Espaçamento sofisticado entre as letras */
        padding: 12px 20px !important;
        display: inline-block !important;
        position: relative !important;
        transition: color 0.2s ease-in-out, transform 0.2s ease-in-out !important;
    }

    /* 5. ESTADO DE INTERAÇÃO (Ao passar o mouse, focar ou tocar com o dedo) */
    .nav-mobile-wrapper.active ul li a:hover,
    .nav-mobile-wrapper.active ul li a:focus,
    .nav-mobile-wrapper.active ul li a:active,
    .nav-mobile-wrapper.active ul li a.active {
        color: #FF6600 !important; /* Laranja Latitude Offshore */
        transform: scale(1.08) !important; /* Efeito tátil de aproximação */
    }

    /* 6. Linha inferior decorativa que surge na interação */
    .nav-mobile-wrapper.active ul li a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0px !important;
        left: 50% !important;
        transform: translateX(-50%) scaleX(0) !important;
        width: 30px !important;
        height: 3px !important;
        background-color: #FF6600 !important;
        transition: transform 0.2s ease-in-out !important;
    }

    /* Ativa a linha dinamicamente no hover/toque */
    .nav-mobile-wrapper.active ul li a:hover::after,
    .nav-mobile-wrapper.active ul li a:focus::after,
    .nav-mobile-wrapper.active ul li a:active::after,
    .nav-mobile-wrapper.active ul li a.active::after {
        transform: translateX(-50%) scaleX(1) !important;
    }
}