/* ========================================
   RESPONSIVIDADE - IPAD
   ======================================== */
@media (min-width: 768px) and (max-width: 1036px) {
    :root {
        --padding-space: 10vw;
    }

    /* ===== LAYOUTS EM COLUNA ===== */
    #fale-conosco,
    #feedbacks > .container-row {
        display: flex;
        flex-direction: column;
    }

    /* ===== TÍTULOS DAS SEÇÕES ===== */
    .section-title {
        width: 60%;
    }

    /* ===== HERO SECTION ===== */
    #hero {
        min-height: 50vh;
        align-items: center;
    }

    #hero #hero-logo {
        width: 60%;
    }

    /* ===== FOOTER ===== */
    #footer-info-container {
        gap: var(--gap-md);
        justify-content: space-between;
        width: 100%;
    }

    #footer-logo {
        height: unset;
        width: 12rem;
    }

    #footer-info {
        align-items: flex-start;
    }

    /* ===== GRIDS RESPONSIVOS ===== */
    .container-grid-default {
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(2, auto); 
    }

    #maranhao-numeros .container-space {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(2, auto); 
    }

    /* ===== CARDS DE INFRAESTRUTURA ===== */
    .infralog-card {
        flex-direction: column !important;
    }

    .infralog-image-container,
    .infralog-info {
        width: 60%;
    }

    .infralog-image {
        width: 100%;
    }
}
/* ========================================
   RESPONSIVIDADE - MOBILE
   ======================================== */
@media (max-width: 767px) {
    :root {
        --padding-space: 10vw;
    }

    /* ===== LAYOUTS EM COLUNA ===== */
    .container-grid-default,
    #footer-copyright span,
    #maranhao-numeros .container-space,
    #news-container,
    #feedbacks .container-row,
    #fale-conosco,
    #contacts-button-container {
        display: flex;
        flex-direction: column;
    }

    /* ===== TÍTULOS DAS SEÇÕES ===== */
    .section-title {
        width: 100%;  
        align-items: center !important;
        text-align: center !important;
    }

    /* ===== HERO SECTION ===== */
    #hero {
        min-height: 60vh;
        align-items: center;
    }

    #hero #hero-logo {
        width: 100%;
    }

    #hero .container-column {
        padding: var(--gap-md) 0;
    }

    /* ===== NAVEGAÇÃO ===== */
    #nav-links-container {
        display: none;
    }

    /* ===== FOOTER ===== */
    #footer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
    }

    #footer-copyright small:first-of-type {
        border-right: 0;
        padding-right: 0;
    }

    #footer-info-container {
        gap: var(--gap-md);
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #footer-info-container .container-column {
        gap: var(--gap-xs);
    }

    #footer-info-container .container-column:first-of-type {
        width: 100%;
    }

    #footer-menu-container {
        width: 100%;
        justify-content: space-between;
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ===== NÚMEROS DO MARANHÃO ===== */
    #maranhao-numeros {
        padding: var(--gap-lg) var(--gap-sm);
    }

    .maranhao-numeros-card {
        align-items: center;
        text-align: center;
    }

    /* ===== CARDS DE INFRAESTRUTURA ===== */
    .infralog-card {
        flex-direction: column !important;
    }

    .infralog-image-container {
        width: 100%;
    }

    .infralog-image img {
        width: 50%;
    }

    .infralog-image-info {
        width: 8rem;
    }

    /* ===== NOTÍCIAS ===== */
    .news-image {
        height: 10rem !important;
    }

    #ultimas-noticias {
        position: relative;
        padding-bottom: calc(var(--gap-lg)*3);
    }

    #top-detail {
        width: 200vw;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    #bottom-detail {
        height: unset;
        width: 90vw;
    }
}


/* ========================================
   PÁGINA O MARANHÃO - MOBILE
   ======================================== */
@media (max-width: 960px) {
    /* ===== SISTEMA DE ABAS ===== */
    .tab { 
        height: 72px; 
        font-size: 20px; 
    }    
    
    .tabs { 
        grid-template-columns: 1fr; 
    }
    
    .tabsdois { 
        grid-template-columns: 1fr; 
    }
    
    .tabdois span {
        text-align: center;
    }

    /* ===== STAGE - FAIXA COLORIDA ===== */
    .stage { 
        padding: 44px 16px 56px; 
    }
    
    .stage h2 { 
        font-size: 32px; 
        color: #003A70; 
    }
    
    .stage p { 
        font-size: 16px; 
        color: #003A70; 
    }

    /* ===== TÍTULOS COM BOLINHA ===== */
    .section-heading span { 
        font-size: 20px; 
    }
    
    .section-heading .dot { 
        width: 10px; 
        height: 10px; 
    }
    
    .section-heading { 
        margin: 10px 0 18px; 
        padding: 1rem; 
    }

    /* ===== CORES DA FAIXA GRANDE POR ABA ===== */
    #tab-socio:checked ~ #pane-socio .stage { 
        background: #F9FAFB; 
    }
    
    #tab-invest:checked ~ #pane-invest .stage { 
        background: #F9FAFB; 
    }
    
    #tab-clima:checked ~ #pane-clima .stage { 
        background: #F9FAFB; 
    }
    
    #tab-prog:checked ~ #pane-prog .stage { 
        background: #F9FAFB; 
    }
    
    #tab-bene:checked ~ #pane-bene .stage { 
        background: #F9FAFB; 
    }
    
    #tab-quem-somos:checked ~ #pane-quem-somos .stage { 
        background: #F9FAFB; 
    }
    
    #tab-transparencia:checked ~ #pane-transparencia .stage { 
        background: #F9FAFB; 
    }

    /* ===== GRÁFICOS E IMAGENS ===== */
    .grafico-grid,
    .grafico-grid-geologia { 
        width: 100%; 
        min-width: 0; 
    }
    
    .grafico-invest { 
        max-width: 100%; 
    }
    
    .grafico-wrap { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        margin: 12px 0 8px; 
        padding: 20px; 
        gap: 10px; 
    }
    
    .grafico-wrap img { 
        width: 70%; 
        border-radius: 12px; 
        padding: 1rem 2rem; 
    }

    /* ===== TEXTOS ===== */
    .biomas-esquerdo p,
    .biomas-direito p,
    .potencial-hidrografico p,
    .imagem-texto-esquerdo p,
    .imagem-texto-direito p,
    .imagem-texto-direito-prog p,
    .imagem-texto-esquerdo-prog p { 
        font-size: 16px; 
    }

    /* ===== IMAGENS ===== */
    .biomas-esquerdo img,
    .biomas-direito img,
    .potencial-hidrografico img,
    .imagem-texto-esquerdo img,
    .imagem-texto-direito img,
    .imagem-texto-esquerdo-prog img,
    .imagem-texto-direito-prog img { 
        width: 90%; 
        border-radius: 12px; 
    }

    /* ===== LAYOUTS EM COLUNA ===== */
    .biomas-esquerdo,
    .biomas-direito,
    .potencial-hidrografico,
    .imagem-texto-esquerdo,
    .imagem-texto-direito-prog,
    .imagem-texto-esquerdo-prog,
    .imagem-texto-direito { 
        grid-template-columns: 1fr;  
        flex-direction: column; 
    }
}
/* ========================================
   TELAS MUITO PEQUENAS (350px)
   ======================================== */
@media (max-width: 350px) {
    .hero-container,
    .hero-container-projetos,
    .hero-container-quem-somos,
    .hero-container-negocios {
        min-height: 30vh; 
        width: 120%;
        background-size: cover; 
        background-position: left; 
        display: flex;
        align-items: left; 
        text-align: left; 
        padding: 0 16px; 
        margin-left: -60px;
    }
}

/* ========================================
   TELAS MOBILE PADRÃO (768px)
   ======================================== */
@media (max-width: 768px) {
    .hero-container,
    .hero-container-projetos,
    .hero-container-quem-somos,
    .hero-container-negocios {
        min-height: 40vh; 
        background-size: cover; 
        background-position: left; 
        display: flex;
        align-items: center; 
        text-align: center; 
        padding: 0 16px; 
    }
}

/* ========================================
   GRID DE CHIPS - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .container_chips { 
        grid-template-columns: 1fr 1fr; 
    }
    
    .chip { 
        height: 380px; 
        padding: 28px 22px; 
    }
    
    .chip__icon { 
        width: 130px; 
        height: 130px; 
    }
    
    .chip__metric { 
        font-size: 28px; 
    }
    
    .chip__title { 
        font-size: 20px; 
    }
    
    .chip__caption { 
        font-size: 16px; 
    }
}

/* ========================================
   LAYOUTS ZIG-ZAG - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .zig-zag-container-esquerdo {
        flex-direction: column;
    }

    .zig-zag-container-direito {
        flex-direction: column;
        order: 1;
        margin-top: 3rem;
    }

    .zig-zag-container-esquerdo img,
    .zig-zag-container-direito img {
        width: 100%;
        margin: 0 !important;
        opacity: 10;
    }
}
    
/* ========================================
   PÁGINA QUEM SOMOS - MOBILE
   ======================================== */
@media (max-width: 768px) {
    /* ===== CONTAINER PRINCIPAL ===== */
    .sections-inner {
        width: 100%;
        max-width: 1024px;
        padding: 24px 16px;
        margin: 0 auto;
        gap: 16px;
    }

    /* ===== TÍTULOS DAS SEÇÕES ===== */
    .sections-inner h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 20px;
        line-height: 1.3;
    }
    
    .container-color-orange,
    .container-color-red {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    /* ===== TEXTOS PADRÃO ===== */
    .sections-inner p {
        font-size: 14px;
        line-height: 1.65;
    }

    /* ===== MISSÃO, VALORES E VISÃO ===== */
    .box-missao-valores-visao {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
    }
    
    .box-missao-valores-visao img {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }
    
    .box-missao-valores-visao p {
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }

    /* ===== ORGANOGRAMA ===== */
    .figure-organograma {
        width: 100%;
        min-height: 220px;           
        border-radius: 12px;
        background: #E9EFF7;
    }

    /* ===== EQUIPE ===== */
    .container-team,
    .container-team.position-center-row {
        display: flex;
        flex-direction: column !important;
        gap: 16px;
        height: auto !important;
    }
    
    .container-team .box-image-team { 
        order: 2; 
    }
    
    .container-team .box-image-team figure {
        width: 100%;
        height: 220px;               
        border-radius: 12px;
        background: #E6EDF9;
    }

    .container-team .box-text-team { 
        order: 1; 
    }
    
    .container-team .box-text-team h2 {
        margin: 8px 0 6px;           
        line-height: 1.25;
    }
    
    .container-team .box-text-team p {
        margin: 0 0 12px;
        line-height: 1.6;
    }

    /* ===== BOTÕES ===== */
    .container-team .button-blue {
        width: 100%;
        justify-content: center;
    }

    /* ===== LEGISLAÇÃO ===== */
    .section-legislação ul {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 0;
    }
    
    .section-legislação li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    
    .section-legislação h3 { 
        font-size: 16px; 
    }
    
    .section-legislação p { 
        font-size: 14px; 
    }
    
    .box-hammer {
        min-width: 40px;
        min-height: 40px;
        border-radius: 10px;
    }

    /* ===== LINKS ÚTEIS ===== */
    .container-links {
        width: 100%;
        padding: 16px;
        border-radius: 12px;
        gap: 8px;
    }
    
    .container-links h3 { 
        font-size: 16px; 
    }
    
    .container-links p { 
        font-size: 14px; 
    }
    
    .container-links .button-blue-light {
        width: 100%;
        justify-content: center;
    }

    /* ===== BOTÃO VOLTAR AO TOPO ===== */
    .sections-inner.position-center-row-right {
        justify-content: center;
    }
}

/* ========================================
   PÁGINA DE NOTÍCIAS - MOBILE
   ======================================== */
@media (max-width: 768px) {
    /* ===== HEADER DAS NOTÍCIAS ===== */
    .section-notícias.section-box header {
        padding-top: 12px;
    }

    /* ===== DESTAQUE PRINCIPAL ===== */
    .container_box_news {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .container_box_news .box_text_news_main { 
        order: 1; 
    }
    
    .container_box_news figure {
        order: 2;
        min-height: 220px; /* menor no mobile */
    }

    /* ===== BOTÕES ===== */
    .container_box_news .button-blue {
        width: 100%;
        justify-content: center;
    }

    /* ===== MAIS NOTÍCIAS ===== */
    .box_more_news {
        grid-template-columns: 1fr;
        gap: 16px;
        justify-content: center;
    }
    
    .box_more_news .news {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
    
    .box_more_news .news figure {
        aspect-ratio: 16/9;
        width: 100%;
    }
    
    .box_more_news .news .button-blue {
        width: 100%;
        justify-content: center;
    }

    /* ===== PAGINAÇÃO ===== */
    .box_pagination {
        gap: 8px;
    }

    /* ========================================
       NOTÍCIA ABERTA - MOBILE
       ======================================== */
    .section_main_news {
        padding: 24px 16px 48px;
    }

    .section_main_news h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    /* ===== LAYOUT DA NOTÍCIA ===== */
    .section_main_news .position-center-column-left {
        gap: 12px;
    }

    .section_main_news figure {
        min-height: 220px;
    }

    /* ===== BOTÕES DE NAVEGAÇÃO ===== */
    .section_main_news .return_button_news button,
    .sections-inner .button-blue-light {
        width: 100%;
        text-align: left;
    }
}


/* ========================================
   MENU MOBILE
   ======================================== */

/* ===== ÍCONE HAMBÚRGUER ===== */
.mobile-menu-icon {
    display: none;
}

.mobile-menu-icon button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
}

.hamburguer-icon {
    width: 32px;
    height: 32px;
    margin: 0 20px;
}

/* ===== CONTAINER DO MENU MOBILE ===== */
.mobile-menu {
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 80px; 
    z-index: 1100;
    background: #DFEBF9; 
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    transform-origin: top; 
    transform: scaleY(0); 
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.mobile-menu.open { 
    transform: scaleY(1); 
    opacity: 1; 
}

.mobile-menu ul { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    padding: 10px 0; 
}

/* ===== ITEM PADRÃO DO MENU ===== */
.mobile-menu .navItem {
    display: flex; 
    justify-content: center; 
    align-items: center;
    height: 56px; 
    background: #DFEBF9; 
    border-bottom: 1px solid #cfe0f3;
}

/* ===== LINKS DO MENU ===== */
.mobile-menu .navItem a {
    display: block; 
    width: 100%; 
    text-align: center; 
    align-items: center;
    justify-content: center;
    color: #0B1020; 
    font-size: 16px; 
    text-decoration: none;
    padding: 16px 20px;
}

/* ===== BOTÃO CTA ===== */
.mobile-menu .button-secondary {
    display: inline-flex; 
    margin: 16px auto 22px; 
    width: auto; 
    align-self: center; 
    align-items: center;
    justify-content: center;
}

/* ===== ACORDEÃO: NEGÓCIOS ===== */
.mobile-menu .navItem.has-sub {
    height: auto; 
    flex-direction: column; 
    align-items: stretch; 
    padding: 0;
}

.mobile-menu .sub-toggle {
    width: 100%; 
    height: 56px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0 20px; 
    background: #DFEBF9; 
    color: #0F2559; 
    border: 0; 
    cursor: pointer; 
    font: inherit;
    border-bottom: 1px solid #cfe0f3;
}

.mobile-menu .sub-toggle i { 
    font-size: 18px; 
    transition: transform .2s ease; 
}

.mobile-menu .has-sub.open > .sub-toggle i { 
    transform: rotate(180deg); 
}

.mobile-menu .sub-toggle { 
    align-items: center;
    justify-content: center; 
}

/* ===== LISTA DE SUBITENS ===== */
.mobile-menu .submenu { 
    display: none; 
    background: #E9F2FD; 
    width: 100%; 
    align-items: center;
    justify-content: center; 
}

.mobile-menu .has-sub.open > .submenu { 
    display: block; 
}

.mobile-menu .submenu li a {
    display: block; 
    width: 100%; 
    text-align: left; /* subitens ficam alinhados à esquerda */
    padding: 14px 20px; 
    color: #0F2559; 
    text-decoration: none; 
    border-bottom: 1px solid #d6e5f7;
}

/* ===== BREAKPOINTS ===== */
@media (max-width: 960px) {
    .mobile-menu-icon {
        display: block; 
        margin-left: auto;
    }
    
    #nav-links-container {
        display: none;
    }
    
    #fale-conosco-button {
        display: none;
    }
    
    header nav {
        position: sticky; 
        top: 0; 
        z-index: 1200;
    }
}

@media (min-width: 961px) {
    .mobile-menu {
        display: none !important; 
        transform: none !important; 
        opacity: 0 !important; 
        pointer-events: none !important;
    }
}

/* ========================================
   SELETOR DE IDIOMAS - MOBILE
   ======================================== */
@media (max-width: 960px) {
    /* ===== ACESSIBILIDADE ===== */
    .sr-only {
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden;
        clip: rect(0,0,0,0); 
        white-space: nowrap; 
        border: 0;
    }
    
    /* ===== ESTILO DO SELECT ===== */
    .lang-select {
        appearance: none; 
        -webkit-appearance: none; 
        -moz-appearance: none;
        background: var(--blue); 
        color: #fff; 
        border: 1px solid rgba(255,255,255,.25);
        padding: 10px 40px 10px 12px; 
        border-radius: 10px; 
        font: 500 14px/1.2 "Poppins", sans-serif;
        cursor: pointer; 
        width: 100%; 
        max-width: 280px; 
        margin: 6px auto;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat; 
        background-position: right 12px center; 
        background-size: 16px;
    }
    
    /* ===== OCULTAR ELEMENTOS DO GOOGLE TRANSLATE ===== */
    #goog-gt-tt {
        display: none !important;
    }
    
    .goog-te-banner-frame {
        display: none !important;
    }
    
    .goog-te-menu-value:hover {
        text-decoration: none !important;
    }
    
    .goog-text-highlight {
        background: transparent !important; 
        box-shadow: none !important;
    }
    
    #google_translate_element2 {
        display: none !important;
    }
    
    body { 
        top: 0 !important; 
    }
    
    /* ===== VISIBILIDADE ===== */
    .lang-mobile-only { 
        display: none; 
    }
    
    .lang-mobile-only { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        height: auto; 
    }
    
    .flags-desktop-only { 
        display: none !important; 
    }
}


/* ========================================
   DADOS SOCIOECONÔMICOS - IPAD
   ======================================== */
@media (min-width: 768px) {
    h5 {
        font-size: 1.5rem;
    }
    
    .icons_dados_socios {
        width: 40px;
        height: 40px;
    }
    
    .section_dados_socios span {
        width: 100%;
        gap: var(--gap-sm);
    }

    .faixa {
        width: 100%;
        height: 10px;
    }
    
    .sections-inner h2 {
        font-size: 18px;
    }
    
    .faixa div {
        width: 20%;
        height: 10px;
    }
}

/* ========================================
   DADOS SOCIOECONÔMICOS - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .position-conter_column-left-mobile {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    h5 {
        font-size: 1rem;
        white-space: wrap;
    }
    
    .icons_dados_socios {
        width: 30px;
        height: 30px;
    }
    
    .section_dados_socios span {
        width: 100%;
        gap: var(--gap-sm);
    }

    .faixa {
        width: 100%;
        height: 10px;
    }
    
    .faixa div {
        width: 20%;
        height: 10px;
    }
}