/* ---------- ELEMENTOS DO HEADER (MOBILE E TABLET) ---------- */

/* Correção: Adicionado o seletor "header" que estava faltando */
@media screen and (max-width: 1200px) {
    header {
        background-image: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9)), url('../imagens/pagina1capaM.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

@media screen and (max-width: 600px) {
    header {
        background-image: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9)), url('../imagens/pagina1capaP.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

/* ------- NAVEGAÇÃO E MENU --------*/

/* Correção: Ajustado de 110px para 1100px (telas médias/tablets horizontais) */
@media screen and (max-width: 1100px) {  
    header nav#nav-esquerda ul.menu-principal li a {
        font-size: 90%;
    }
}

@media screen and (max-width: 970px) {
    header nav#nav-esquerda div#logo {
        margin-left: 1rem;
        z-index: 1000; 
        position: relative;
    }

    /* ---------- MENU HAMBURGUER ---------- */
    header nav#nav-esquerda {
        justify-content: space-between;
        align-items: center; 
    }

    header nav#nav-esquerda ul#icone-menu {
        display: flex;
        z-index: 1000; 
        position: relative;
        cursor: pointer;
        margin-right: 1rem; /* Dá um respiro na margem direita */
    }

    header nav#nav-esquerda ul#icone-menu li#menuX {
        display: none;
    }

    header nav#nav-esquerda ul#icone-menu ion-icon {
        font-size: 2.5rem; /* Aumenta o ícone para facilitar o toque */
        color: #00c8d4; /* Usa o Ciano da marca */
    }

    /* --------------- MENU LATERAL --------------- */
    header nav#nav-esquerda ul.menu-principal {
        flex-direction: column;
        width: 75%; 
        height: 100vh; 
        background: linear-gradient(135deg, #174c70 0%, #185ba8 100%);
        border-left: 4px solid #00c8d4; 
        padding-top: 6rem; 
        align-items: flex-end; /* Empurra todo o bloco para a direita */
        padding-right: 2rem; /* Dá um respiro da borda direita do celular */
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999; 
        display: none;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5); 
    }

    header nav#nav-esquerda ul.menu-principal li {
        margin: 0.7rem 0; 
        width: 100%;
        text-align: right; /* Alinha os textos estritamente à direita */
    }

    header nav#nav-esquerda ul.menu-principal li a {
        font-size: 1.3rem;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ---------- TEXTO DA CAPA (CHAMADA) ---------- */
    header div.chamada {
        top: 50%; 
        transform: translateY(-50%); /* Garante o centro exato no eixo Y */
        width: 90%; 
        margin: 0 auto;
        left: 0;
        right: 0;
        text-align: center; /* Centraliza tudo no mobile */
    }

    header div.chamada h1 {
        font-size: 1.8rem;
    }

    header div.chamada h2 {
        font-size: 1.1rem;
        margin-bottom: 30px; 
        line-height: 1.5;
    }

/* ---------- TEXTO DAS SUBPÁGINAS ---------- */
    header.cabecalho-subpagina {
        height: auto; /* Permite que o cabeçalho cresça conforme a necessidade do texto */
        min-height: 60vh; 
    }

    header.cabecalho-subpagina div.chamada-subpagina {
        position: relative; /* Remove a trava que causava a sobreposição */
        top: 0; 
        left: 0;
        transform: none; 
        margin-top: 40px; /* Empurra o título com segurança para baixo da logo */
        padding-bottom: 40px;
        width: 100%; 
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }

    header.cabecalho-subpagina div.chamada-subpagina h1 {
        font-size: 1.8rem;
    }

/* =========================================
       MEGA MENU - TRAVA DE VAZAMENTO LATERAL
       ========================================= */
    
    /* 1. Trava o botão pai para não ultrapassar a barra azul */
    ul.menu-principal li.item-mega-menu {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.7rem 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Permite que o título quebre de linha se o celular for muito estreito */
    a#btn-mega {
        display: block !important;
        text-align: right !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. Mantém a sanfona 100% contida e corta o que tentar vazar */
    .caixa-mega-menu {
        position: static !important; 
        width: 100% !important; 
        max-width: 100% !important;
        background-color: rgba(0, 0, 0, 0.25) !important;
        border-radius: 8px !important;
        padding: 10px !important; /* Padding reduzido para caber melhor */
        margin: 10px 0 0 0 !important; 
        box-sizing: border-box !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important; /* Corta o vazamento para a área branca */
    }

    /* 3. Anula completamente a grade do Bootstrap que empurrava a tela */
    .caixa-mega-menu .row,
    .caixa-mega-menu .col-mega {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important; 
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .col-mega {
        margin-bottom: 15px !important;
    }

    /* 4. Estética Interna */
    .col-mega h4 {
        color: #00c8d4 !important;
        font-size: 0.8rem !important;
        text-align: right !important;
        margin: 0 0 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: 5px !important;
    }

    .link-mega {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .link-mega div strong {
        color: #ffffff !important;
        font-size: 0.85rem !important; /* Fonte levemente menor para garantir encaixe */
        font-weight: 400 !important;
        text-shadow: none !important;
    }

    .link-mega ion-icon {
        color: #00c8d4 !important;
        font-size: 1.3rem !important;
    }