/* RESET E PADRÕES GERAIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Evita rolagem lateral indesejada */
}

/* HEADER E NAVEGAÇÃO DESKTOP */
header {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 10px 30px rgba(15, 42, 92, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* LOGOMARCA */
.logo-link { text-decoration: none !important; }
.logo-container { display: flex; align-items: center; gap: 16px; }
.logo-img { height: 48px; }
.brand-name { font-size: 22px; color: #00306e; font-weight: 400; display: block; }
.brand-sub { font-size: 12px; color: #64748b; display: block; }

/* MENU DESKTOP */
header nav ul { display: flex; list-style: none; gap: 16px; margin: 0; padding: 0; }
header nav a { 
    text-decoration: none; 
    color: #475569; 
    font-weight: 600; 
    font-size: 15px; 
    padding: 10px 18px; 
    border-radius: 999px; 
    transition: 0.2s; 
}
header nav a:hover { background: #f3f4f6; color: #0f2a5c; }
header nav a.active { 
    color: #0f2a5c !important; 
    background: #eff6ff !important; 
    font-weight: 700 !important; 
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2) !important; 
}

/* BOTÃO HAMBURGUER */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1010;
    padding: 10px;
}
.menu-toggle span { width: 25px; height: 3px; background: #00306e; transition: 0.3s; border-radius: 2px; }

/* OVERLAY (Fundo escuro ao abrir menu) */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 42, 92, 0.4);
    backdrop-filter: blur(4px);
    z-index: 990;
}
.menu-overlay.active { display: block; }

/* RESPONSIVIDADE MOBILE (TABLETS E CELULARES) */
@media (max-width: 850px) {
    .menu-toggle { display: flex; }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Escondido à direita */
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background: #ffffff;
        z-index: 1005;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 100px 20px 40px;
        display: block !important;
    }

    .nav-menu.open { right: 0; }

    header nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100%;
    }

    header nav li { width: 100%; }

    header nav a {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 18px;
        padding: 15px 20px;
        background: #f8fafc;
        color: #475569 !important;
        border-radius: 12px;
    }

    /* ANIMAÇÃO DO BOTÃO PARA "X" */
    .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(-8px) rotate(-45deg); }
}

/* AJUSTES ESPECÍFICOS PARA TELAS PEQUENAS (CELULARES) */
@media (max-width: 650px) {
    /* FORÇA LOGO E BOTÃO NA MESMA LINHA */
    header {
        display: flex !important;
        flex-direction: row !important; /* Garante que não empilhe */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 5% !important;
        height: 70px; /* Altura fixa para controle */
    }

    .logo-container {
        display: flex !important;
        align-items: center !important;
    }

    .menu-toggle {
        display: flex !important; /* Mostra o botão */
        background: transparent !important; /* Tira qualquer fundo azul */
        border: none !important;
    }

    /* MENU SUSPENSO (CORRIGINDO A BAGUNÇA) */
    header nav ul {
        display: none; 
        flex-direction: column !important;
        position: absolute !important;
        top: 70px; /* Exatamente abaixo do header */
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important; /* Fundo branco limpo */
        padding: 10px 0 !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #f1f5f9;
        margin: 0 !important;
        z-index: 9999 !important;
    }

    /* Remove a linha azul ou fundo azul que aparece nos itens */
    header nav ul.active {
        display: flex !important;
    }

    header nav li {
        width: 100% !important;
        padding: 0 20px !important;
    }

    header nav a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 12px 15px !important;
        background: #f8fafc !important; /* Fundo cinza claro pros botões */
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        color: #475569 !important;
        box-shadow: none !important; /* Tira sombras internas azuis */
    }

    /* Estilo do item ativo no mobile */
    header nav a.active {
        background: #eff6ff !important;
        color: #00306e !important;
        border-left: 4px solid #00306e; /* Destaque lateral em vez de fundo azul total */
    }

    /* ESCONDE O BOTÃO DE FECHAR ANTIGO */
    .btn-fechar-menu { display: none !important; }
}