/* ========================================
   PÁGINA HOME - SEÇÕES PRINCIPAIS
   ======================================== */

/* ===== HERO SECTION ===== */
#hero {
    min-height: 90vh;
    background-image: url("../assets/images/hero-background.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    align-items: flex-start;
}

#hero .container-column {
    gap: var(--gap-sm);
    text-align: center;
    padding: var(--gap-lg) 0;
}

#hero #hero-logo {
    width: 30rem;
}

/* ===== NOSSAS VANTAGENS ===== */
.vantagens-card {
    background-color: var(--white);
    border-radius: 0.5rem;
    padding: var(--gap-md);
    align-items: center;
    gap: var(--gap-sm);
    text-align: center;
}

.vantagens-card p {
    color: var(--black);
}

.vantagens-card img {
    width: 4rem;
    height: 4rem;
    padding: 1rem;
    border-radius: 99rem;
    background-color: var(--light-blue);
}

/* ===== NÚMEROS DO MARANHÃO ===== */
#maranhao-numeros {
    background-image: url("../assets/images/maranhao-numeros-background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 0.5rem;
    padding: var(--gap-lg);
}

#maranhao-numeros .section-title {
    width: auto;
}

#maranhao-numeros * {
    color: var(--white);
}

.maranhao-numeros-card {
    align-items: flex-start;
    gap: var(--gap-md);
    width: 100%;
}

#maranhao-numeros .container-space {
    align-items: stretch;
}

.maranhao-numeros-card h1 {
    text-wrap: nowrap;
}

.maranhao-numeros-card img {
    width: 4rem;
    height: 4rem;
    padding: 1rem;
    border-radius: 99rem;
    background-color: var(--white);
}

/* ===== INFRAESTRUTURA E LOGÍSTICA ===== */
#infraestrutura-logistica {
    background-color: var(--white);
}

.infralog-card {
    gap: var(--gap-lg);
}

.infralog-card:nth-of-type(3) {
    flex-direction: row-reverse;
}

.infralog-info img {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border-radius: 99rem;
    background-color: var(--light-blue);
}

.infralog-info {
    align-items: flex-start;
    gap: var(--gap-sm);
}

.infralog-info p {
    color: var(--black);
}

.infralog-image {
    width: 14rem;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    border-radius: 0.5rem 0 0 0.5rem;
}

.infralog-image-container {
    gap: 0;
    box-shadow: 0px 60px 60px -60px rgba(0, 0, 0, 0.25);
    padding: var(--gap-sm) 0;
}

.infralog-image-info {
    padding: var(--gap-md);
    border-radius: 0 0.5rem 0.5rem 0;
    gap: var(--gap-xs);
    justify-content: center;
    width: 10rem;
}

.infralog-image-info h1 {
    font-size: 3rem;
}

.infralog-image-info * {
    color: var(--white);
    opacity: 40%;
}

/* ===== GRADIENTES INFRAESTRUTURA ===== */
.infralog-blue {
    background: linear-gradient(
        0deg, 
        #066A93 11%, 
        #0481A6 38%, 
        #088DAE 72%, 
        #12A0B8 94%
    );
}

.infralog-green {
    background: linear-gradient(
        0deg, 
        #2E9F4E 11%, 
        #43A856 38%, 
        #79C069 72%, 
        #79C069 94%
    );
}

.infralog-orange {
    background: linear-gradient(
        0deg, 
        #D0641B 11%, 
        #DD8023 38%, 
        #E79529 72%, 
        #F5B230 94%
    );
}

.infralog-red {
    background: linear-gradient(
        0deg,  
        #761919 11%,
        #9f1a1a 38%,
        #c22d2d 72%,
        #de3e3e 94%
    );
}

/* ===== NOSSOS PARCEIROS ===== */
#nossos-parceiros {
    overflow: hidden;
    position: relative;
}

#nossos-parceiros .section-title {
    align-items: flex-start;
    text-align: start;
    width: 100%;
}

#nossos-parceiros h2,
#fale-conosco h2 {
    color: var(--white);
    padding: var(--gap-sm) var(--gap-lg);
    border: 0px;
    border-radius: 0.75rem;
    background-color: var(--dark-blue);
    padding: var(--gap-sm) var(--gap-md);
}

#nossos-parceiros p {
    color: var(--black);
}

/* ===== CARROSSEL DE LOGOS ===== */
#logo-carousel {
    display: flex;
    gap: var(--gap-xl);
    width: max-content;
    animation: scroll 10s linear infinite;
}

#logo-carousel img {
    flex-shrink: 0; 
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-22%);
    }
}

/* ===== ÚLTIMAS NOTÍCIAS ===== */
#ultimas-noticias {
    background-color: var(--white);
    padding-bottom: 0;
}

#news-container {
    align-items: stretch;
}

.news-card {
    border-radius: 0.5rem;
    gap: 0;
    height: 100%;
    overflow: hidden;
}

.news-image {
    height: 100%;
    width: 100%;
    background-image: url("../assets/images/building-construction-worker-site.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-position: center;
    background-size: cover;
}

#main-news .news-image {
    height: 20rem;
}

.news-info {
    background-color: var(--light-blue);
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    align-items: flex-start;
}

.news-info h4 {
    color: var(--dark-blue);
}

.news-info small {
    color: var(--black);
}

#top-detail {
    width: 100vw;
}

/* ===== PRONTO PARA INVESTIR ===== */
#pronto-investir {
    background-color: var(--dark-blue);
    color: var(--white);
    padding-top: 0;
}

#pronto-investir .section-title {
    margin-top: 5rem;
}

#pronto-investir h1 {
    color: var(--white);
}

#pronto-investir p {
    text-align: center;
    width: 75%;
}

/* ===== FEEDBACKS ===== */
#feedbacks {
    position: relative;
    background-color: var(--white);
    padding-top: calc(var(--gap-lg) + var(--gap-md));
}

#feedbacks h3 {
    color: var(--yellow);
}

#feedbacks h1 {
    font-weight: 400;
    color: var(--black);
}

.feedback-card {
    background-color: var(--dark-blue);
    border-radius: 0.5rem;
    padding: var(--gap-md);
    align-items: flex-start;
    gap: var(--gap-sm);
}

.feedback-card img {
    padding: 1rem;
    background-color: var(--white);
    border-radius: 99rem;
}

.feedback-card * {
    color: var(--white);
}

.feedback-person {
    gap: var(--gap-xs);
    align-items: flex-start;
}

.feedback-person p:nth-of-type(2) {
    font-weight: 200;
}

.feedback {
    font-size: 0.9rem;
    padding-bottom: var(--gap-sm);
    border-bottom: 1px solid var(--blue);
}

#bottom-detail {
    height: 4rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

/* ===== FALE CONOSCO ===== */
#fale-conosco .section-title,
#fale-conosco .container-row {
    align-items: flex-start;
    text-align: start;
    width: 100%;
}

#fale-conosco {
    background-color: var(--light-gray);
    align-items: stretch;
}

#fale-conosco > * {
    width: 100%;    
}

#fale-conosco p {
    color: var(--black);
}

.contact-info {
    width: 100%;
    padding: var(--gap-md);
    border-radius: 0.5rem;
    background-color: var(--light-blue);
    gap: var(--gap-sm);
    align-items: start;
}

.contact-info * {
    color: var(--black);
}

#fale-conosco .button-secondary {
    width: 100%;
    background-color: var(--dark-blue);
    text-wrap: nowrap;
}

/* ===== FORMULÁRIO DE CONTATO ===== */
#contact-form {
    width: 100%;
    background-color: var(--white);
    padding: var(--gap-md);
    border-radius: 1rem;
    box-shadow: 0px 0px 30px -20px rgba(0, 0, 0, 0.25);
}

#contact-form .form-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap-xs);
}

#contact-form .form-input * {
    color: var(--black);
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    background-color: var(--light-blue);
    border: 0;
    border-radius: 0.5rem;
    padding: var(--gap-sm);
    resize: none;
}

#contact-form #mensagem,
#contact-form .form-input:nth-of-type(3) {
    min-height: 8rem;
    height: 100%;
}


/* ========================================
   PÁGINA QUEM SOMOS - INVESTE MA
   ======================================== */

/* ===== SEÇÕES INTERNAS ===== */
.sections-inner {
    background-color: var(--white);
}

.sections-inner h2 {
    font-size: 25px;
    font-weight: 600;
    color: var(--dark-blue);
    gap: var(--gap-sm);
}

.sections-inner h2 div {
    height: 22px;
    width: 22px;
    border-radius: 50px;
}

.sections-inner p {
    color: var(--black);
}

.sections-inner figure {
    height: 470px;
    width: 100%;
    background-color: var(--light-blue);
    border-radius: 20px;
}

/* ===== BOX MISSÃO, VALORES E VISÃO ===== */
.box-missao-valores-visao {
    gap: var(--gap-md);
    background-color: var(--dark-blue);
    padding: 35px;
    border-radius: 10px;
}

.box-missao-valores-visao p {
    color: var(--white);
}

/* ===== SEÇÃO LEGISLAÇÃO ===== */
.section-legislação ul {
    gap: var(--gap-sm);
}

.section-legislação li {
    width: 100%;
    min-height: 114px;
    background-color: var(--light-blue);
    border-radius: 14px;
    padding: 20px;
    gap: var(--gap-sm);
}

.section-legislação li p {
    color: var(--dark-blue);
}

.section-legislação li .box-hammer {
    width: 74px;
    height: 74px;
    background-color: var(--white);
    border-radius: 12px;
    padding: 18px;
    font-size: 36px;
    color: var(--dark-blue);
}

/* ===== CONTAINER TEAM ===== */
.container-team {
    gap: var(--gap-lg);
    height: 250px;
}

.box-text-team {
    gap: var(--gap-sm);
    width: 50%;
}

.box-image-team {
    background-color: var(--light-gray);
    width: 50%;
}

.box-image-team figure {
    height: 200px;
}

/* ===== BOTÕES ===== */
.button-blue {
    border: none;
    background-color: var(--dark-blue);
    padding: 9px 17px;
    border-radius: 8px;
    color: var(--white);
}

.button-blue:hover {
    background-color: var(--dark-blue-hover);
}

.button-blue-light {
    background-color: var(--light-blue);
    color: var(--dark-blue);
    padding: var(--padding-button);
    gap: var(--gap-xs);
    font-size: var(--size-xxs);
    border-radius: 8px;
}

.button-blue-light:hover {
    background-color: var(--light-blue-hover);
}

/* ===== CONTAINER DE LINKS ===== */
.container-links {
    width: 100%;
    gap: var(--gap-sm);
}

.container-links p {
    color: var(--dark-blue);
}

.container-links a {
    width: 100%;
}

.container-links button {
    width: 100%;
    padding: 20px;
}

.container-links i {
    font-size: 35px;
}

/* ========================================
   PÁGINA DE NOTÍCIAS
   ======================================== */

/* ===== GRID DE NOTÍCIAS ===== */
.box_more_news {
    gap: var(--gap-md);
    flex-wrap: wrap;
    width: 100%;
}

.container_box_news {
    max-height: 400px;
    background-color: var(--light-blue);
    border-radius: var(--border-radius-sm);
}

.container_box_news figure {
    background-color: var(--light-blue-hover);
    height: 400px;
    width: 50%;
}

.news {
    background-color: var(--light-blue);
    border-radius: var(--border-radius-sm);
    width: 300px;
}

.news figure {
    height: 160px;
    background-color: var(--light-blue-hover);
    border-radius: var(--border-radius-sm);
}

/* ===== BOX DE TEXTO DAS NOTÍCIAS ===== */
.box_text_news_main {
    width: 50%;
}

.box_text_news {
    max-height: 400px;
    padding: 23px;
    gap: var(--gap-sm);
}

.box_text_news .summary {
    overflow: hidden;
    max-height: 150px;
}

/* ===== BOTÃO DE RETORNO ===== */
.return_button_news {
    width: 100%;
}

.return_button_news button {
    font-size: var(--size-xxs);
    background-color: #ffffff00;
    color: var(--black);
}

/* ===== SEÇÃO PRINCIPAL DE NOTÍCIAS ===== */
.section_main_news div {
    gap: var(--gap-md);
}

.section_main_news i {
    color: var(--black);
    font-size: var(--size-xs);
}

.section_main_news span small {
    color: var(--black);
}

/* ===== PAGINAÇÃO DE NOTÍCIAS ===== */
.box_pagination {
    gap: var(--gap-md);
}

.box_pagination button {
    background-color: var(--light-blue);
    padding: var(--padding-button);
    border-radius: 5px;
}

.box_pagination button:hover {
    background-color: var(--light-blue-hover);
}



/* ========================================
   PÁGINA O MARANHÃO
   ======================================== */

/* ===== HERO SECTIONS ===== */
.hero-container {
    background-image: url('../assets/images/hero.jpg');
    background-size: cover;
    min-height: 60vh;
    display: flex;
}

.hero-container-projetos {
    background-image: url('../assets/images/hero-container-projetos.jpg');
    background-size: cover;
    min-height: 60vh;
    display: flex;
}

.hero-container-negocios {
    background-image: url('../assets/images/hero-container-negocios.jpg');
    background-size: cover;
    min-height: 60vh;
    display: flex;
}

.hero-container-quem-somos {
    background-image: url('../assets/images/hero-container-investema.jpg');
    background-size: cover;
    min-height: 60vh;
    display: flex;
}

/* ===== MAIN CONTAINER ===== */
.main {
    background-color: #F9FAFB;
}

/* ===== MENU DE NAVEGAÇÃO ===== */
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-info {
    display: flex;
    align-items: center;
}

.menu-info ul {
    display: flex;
    justify-content: center;
    list-style: none;
    width: 100%;
}

/* ===== CONTAINERS COLORIDOS DO MENU ===== */
.laranja-container { 
    margin: 0 15px;
    background-color: #EE9521;
    width: 100%;
}

.vermelho-container { 
    margin: 0 15px;
    background-color: #DC2E2F;
    width: 100%;
}

.verde-container { 
    margin: 0 15px;
    background-color: #36A548;
    width: 100%;
}

.titulo-info {
    color: #ffffff;
    padding: 6px 12px;
    text-decoration: none;
}

.titulo-info:hover {
    color: #000209;
    transition: 0.3s;
}
/* ===== SISTEMA DE ABAS ===== */
.nav_sub_menu {
    padding: 0;
}

.tab-input { 
    display: none; 
}

/* ===== GRID DE ABAS ===== */
.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: -4px; /* cola no hero */
}

.tabsdois {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: -4px; /* cola no hero */
}

/* ===== ESTILO DAS ABAS ===== */
.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px; /* altura das faixas do protótipo */
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease, transform .15s ease;
}

.tab:hover { 
    filter: brightness(0.96); 
    transform: translateY(-1px); 
}

/* ===== CORES DAS ABAS ===== */
.tab.laranja { 
    background: #EE9521; 
}

.tab.vermelho { 
    background: #DC2E2F; 
}

.tab.verde { 
    background: #36A548; 
}

.tab.azul { 
    background: #21336D; 
}

/* ===== PAINÉIS DE CONTEÚDO ===== */
.pane { 
    display: none; 
    padding: 0; 
}

/* ===== STAGE - FAIXA GRANDE COLORIDA ===== */
.stage {
    padding: 64px 16px 80px;
    text-align: center;
    color: #fff;
}

.stage h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 12px;
    font-weight: 700;
    color: #fff;
}

.stage p {
    font-size: 18px;
    opacity: .95;
    max-width: 920px;
    margin: 0 auto;
    color: #fff;
}

/* ===== CONTAINER NEGÓCIOS ===== */
.container-negocios {
    padding: 64px 16px 80px;
    width: 100%;
    text-align: center;
    background-color: #21336D;
}

.container-negocios h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 12px;
    font-weight: 700;
    color: #fff;
}

.container-negocios p {
    font-size: 18px;
    opacity: .95;
    max-width: 920px;
    margin: 0 auto;
    color: #fff;
}

/* ===== ÍCONES ===== */
.ico {
    color: #fff;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    flex: 0 0 auto;
    filter: brightness(0) invert(1); 
}
 
/* ===== CONTEÚDO PRINCIPAL ===== */
.content {
    background: #F9FAFB;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 16px 56px;
}

/* ===== CARDS ===== */
.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    padding: 24px;
}

p, label {
    font-size: 1rem;
    font-weight: 300;
    color: #4B5563;
    padding: 1rem 1rem;
}

.card h3 { 
    color: #21336D; 
    font-weight: 700; 
    margin-bottom: 8px; 
    padding: 1rem 1rem; 
}

.card p { 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

/* ===== GRÁFICOS E IMAGENS ===== */
.grafico-wrap { 
    display: flex; 
    justify-content: center; 
    margin: 12px 0 8px; 
    padding: 60px; 
    gap: 70px; 
}

.grafico-grid { 
    width: 27%; 
    border-radius: 12px;
}

.grafico-invest { 
    width: 50%; 
    border-radius: 12px;
}

.grafico-grid-geologia { 
    width: 33%; 
    border-radius: 12px;
}

.grafico-grid-exportacao { 
    width: 23%; 
    border-radius: 12px;
}

/* ===== LAYOUTS DE IMAGEM E TEXTO ===== */
.imagem-texto-esquerdo { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
}

.imagem-texto-esquerdo p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

.imagem-texto-esquerdo img { 
    width: 100%; 
    border-radius: 12px;  
}

.imagem-texto-direito { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
    flex-direction: row-reverse; 
}

.imagem-texto-direito p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem;
}

.imagem-texto-direito img { 
    width: 100%; 
    border-radius: 12px;  
}

/* ===== BIOMAS ===== */
.biomas-esquerdo { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 50px;  
    text-align: justify; 
    margin: 12px 0 8px;
}

.biomas-esquerdo p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
}

.biomas-esquerdo img { 
    width: 60%; 
    border-radius: 12px; 
    margin: 12px 0 8px; 
    margin-bottom: 50px;
}

.biomas-direito { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
    flex-direction: row-reverse; 
}

.biomas-direito p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

.biomas-direito img { 
    width: 60%; 
    border-radius: 12px; 
    margin-bottom: 50px;
}

/* ===== POTENCIAL HIDROGRÁFICO ===== */
.potencial-hidrografico {
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 50px;  
    text-align: justify;
}

.potencial-hidrografico p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
}

.potencial-hidrografico img { 
    width: 39%; 
    height: 39%; 
    border-radius: 12px; 
    margin-bottom: 50px;
}

/* ===== MAPA SOLAR ===== */
.mapa-solar { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin: 50px; 
    text-align: justify; 
    margin-left: 100px;
}

.mapa-solar p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
}

.mapa-solar img { 
    width: 100%; 
    border-radius: 12px; 
    margin-bottom: 50px;
}

/* ===== LAYOUTS DE PROGRAMAÇÃO ===== */
.imagem-texto-esquerdo-prog { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
}

.imagem-texto-esquerdo-prog p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

.imagem-texto-esquerdo-prog img { 
    width: 45%; 
    border-radius: 12px;  
    margin-bottom: 50px; 
    margin-top: 50px;
}

.imagem-texto-direito-prog { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
    flex-direction: row-reverse; 
}

.imagem-texto-direito-prog p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

.imagem-texto-direito-prog img { 
    width: 45%; 
    border-radius: 12px;  
    margin-bottom: 50px; 
    margin-top: 50px;
}

/* ===== LAYOUTS ZIG-ZAG ===== */
.zig-zag-container-esquerdo { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
}

.zig-zag-container-esquerdo img { 
    width: 35%; 
    border-radius: 12px;  
}

.zig-zag-container-esquerdo p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}

.zig-zag-container-direito { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-top: 20px; 
    text-align: justify; 
    flex-direction: row-reverse; 
}

.zig-zag-container-direito img { 
    width: 35%; 
    border-radius: 12px; 
}

.zig-zag-container-direito p { 
    font-size: 16px; 
    color: #3f4654; 
    line-height: 1.65; 
    padding: 1rem 1rem; 
}
/* ===== GRID DE CHIPS ===== */
.container_chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 40px;
    padding: 40px 24px;
    max-width: 1320px;
    margin: 0 auto;
}

/* ===== CARDS CHIP ===== */
.chip {
    position: relative;
    height: 420px; /* altura próxima ao protótipo */
    border-radius: 18px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    overflow: hidden;
}

/* ===== VINHETA SUAVE ===== */
.chip::after {
    content: "";
    position: absolute; 
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.18));
    pointer-events: none;
}

/* ===== ÍCONE GRANDE ===== */
.chip__icon {
    width: 160px; 
    height: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* assegura branco se svg/png escuro */
    margin-top: 8px;
}

/* ===== NÚMERO/MARCADOR ===== */
.chip__metric {
    margin-top: 20px;
    font-weight: 800;
    font-size: 32px; /* bem destacado */
    letter-spacing: .5px;
    color: #fff;
}

/* ===== TÍTULO ===== */
.chip__title {
    margin-top: 18px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

/* ===== LEGENDA ===== */
.chip__caption {
    margin-top: 6px;
    font-size: 18px;
    font-style: italic;
    opacity: .9;
    color: #fff;
}

/* ===== VARIAÇÕES DE COR DOS CHIPS ===== */
.chip.orange { 
    background: linear-gradient(180deg, #F88F36, #EA6E1D); 
}

.chip.red { 
    background: linear-gradient(180deg, #b91c1c, #8b0000); 
}

.chip.green { 
    background: linear-gradient(180deg, #22c55e, #15803d); 
}

.chip.blue { 
    background: linear-gradient(180deg, #0284c7, #0369a1); 
}

.chip.gold { 
    background: linear-gradient(180deg, #F88F36, #EA6E1D); 
}

.chip.cinza { 
    background: linear-gradient(180deg, #3f4654, #3f4654); 
}

/* ===== REGRAS DE SELEÇÃO DAS ABAS ===== */
#tab-socio:checked ~ .tabs label[for="tab-socio"] { 
    filter: brightness(0.92); 
}

#tab-invest:checked ~ .tabs label[for="tab-invest"] { 
    filter: brightness(0.92); 
}

#tab-clima:checked ~ .tabs label[for="tab-clima"] { 
    filter: brightness(0.92); 
}

#tab-prog:checked ~ .tabsdois label[for="tab-prog"] { 
    filter: brightness(0.92); 
}

#tab-bene:checked ~ .tabsdois label[for="tab-bene"] { 
    filter: brightness(0.92); 
}

#tab-quem-somos:checked ~ .tabs label[for="tab-quem-somos"] { 
    filter: brightness(0.92); 
}

#tab-transparencia:checked ~ .tabs label[for="tab-transparencia"] { 
    filter: brightness(0.92); 
}

/* ===== EXIBIÇÃO DOS PAINÉIS ===== */
#tab-socio:checked ~ #pane-socio { 
    display: block; 
}

#tab-invest:checked ~ #pane-invest { 
    display: block; 
}

#tab-clima:checked ~ #pane-clima { 
    display: block; 
}

#tab-prog:checked ~ #pane-prog { 
    display: block; 
}

#tab-bene:checked ~ #pane-bene { 
    display: block; 
}

#tab-quem-somos:checked ~ #pane-quem-somos { 
    display: block; 
}

#tab-transparencia:checked ~ #pane-transparencia { 
    display: block; 
}

/* ===== CORES DA FAIXA GRANDE POR ABA ===== */
#tab-socio:checked ~ #pane-socio .stage { 
    background: #EE9521; 
}

#tab-invest:checked ~ #pane-invest .stage { 
    background: #DC2E2F; 
}

#tab-clima:checked ~ #pane-clima .stage { 
    background: #36A548; 
}

#tab-prog:checked ~ #pane-prog .stage { 
    background: #36A548; 
}

#tab-bene:checked ~ #pane-bene .stage { 
    background: #21336D; 
}

#tab-quem-somos:checked ~ #pane-quem-somos .stage { 
    background: #EE9521; 
}

#tab-transparencia:checked ~ #pane-transparencia .stage { 
    background: #DC2E2F; 
}

/* ===== TÍTULO COM BOLINHA ===== */
.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #003A70;
    margin: 10px 0 18px; 
    padding: 1.5rem;
}

.section-heading .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EE9521;
    box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}

.section-heading span {
    font-weight: 500; 
    font-size: 28px;
}

/* ===== BOLINHA MUDA DE COR CONFORME ABA ATIVA ===== */
#tab-socio:checked ~ #pane-socio .section-heading .dot {
    background: #EE9521;
}

#tab-invest:checked ~ #pane-invest .section-heading .dot {
    background: #DC2E2F;
}

#tab-clima:checked ~ #pane-clima .section-heading .dot {
    background: #36A548;
}

#tab-prog:checked ~ #pane-prog .section-heading .dot {
    background: #36A548;
}

#tab-bene:checked ~ #pane-bene .section-heading .dot {
    background: #21336D;
}

#tab-quem-somos:checked ~ #pane-quem-somos .section-heading .dot {
    background: #EE9521;
}

#tab-transparencia:checked ~ #pane-transparencia .section-heading .dot {
    background: #DC2E2F;
}
 
 
 
/* ========================================
   BOTÕES E ELEMENTOS FLUTUANTES
   ======================================== */

/* ===== BOTÃO IR PARA O TOPO ===== */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #DFEBF9;
    color: #21336D;
    border: 1px solid rgba(0,0,0,.08);
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.to-top:active {
    transform: translateY(0);
}

.to-top .chev {
    width: 18px;
    height: 18px;
    color: #21336D;
}

/* ===== BOTÃO LINK ZPE ===== */
.button-link {
    background: #058F39; 
    color: white; 
    border: 1px solid rgba(2, 40, 3, 0.08);
    padding: 10px 14px; 
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(1, 74, 20, 0.15);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.button-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.button-link:active {
    transform: translateY(0);
}

.button-link .chev {
    width: 18px;
    height: 18px;
    color: #058F39;
}

/* ========================================
   DROPDOWN MENU
   ======================================== */
.dropdown {
    position: relative;
    display: inline-flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1f3570; 
    min-width: 220px;
    z-index: 999;
    flex-direction: column;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown:hover .dropdown-content {
    display: flex;
}

/* ========================================
   SELETOR DE IDIOMAS
   ======================================== */
.lang-desktop {
    position: fixed; /* gruda na viewport, como no protótipo */
    right: 16px;
    top: 120px; /* ajuste conforme seu hero */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1200; /* acima do hero */
}

.lang-desktop .lang-flag {
    display: inline-flex;
    width: 42px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.lang-desktop .lang-flag:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.26);
}

.lang-desktop .lang-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mostra só no desktop; no mobile o seletor fica no menu hambúrguer */
@media (max-width: 960px) {
    .lang-desktop { 
        display: none; 
    }
}

/* ========================================
   GOOGLE TRANSLATE - OCULTAR ELEMENTOS
   ======================================== */
/* Barra superior do Google Translate */
.goog-te-banner-frame,
.goog-te-banner,
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Evita "empurrar" o body quando a barra tentaria abrir */
html, body { 
    top: 0 !important; 
}

/* Highlights do Google (quando passa mouse sobre textos traduzidos) */
.goog-text-highlight {
    background: transparent !important;
    box-shadow: none !important;
}

/* Iframe/menus do widget, fora de vista */
.goog-te-menu-frame.skiptranslate { 
    display: none !important; 
}

.goog-te-balloon-frame { 
    display: none !important; 
}

/* Deixa o container do tradutor invisível */
.gt-invisible { 
    display: none !important; 
}

.VIpgJd-ZVi9od-ORHb {
    display: none !important;
}

#goog-gt-tt,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-te-menu-frame {
    display: none !important;
    visibility: hidden !important;
}

/* Alguns temas aplicam essa classe nos iframes do Google */
iframe.skiptranslate,
.skiptranslate iframe {
    display: none !important;
    visibility: hidden !important;
}

/* O Google empurra a página pra baixo com top:40px; zera isso */
html, body {
    top: 0 !important;
    margin-top: 0 !important;
}

/* ========================================
   ELEMENTOS ESPECÍFICOS
   ======================================== */

/* ===== ÍCONES DE DADOS SOCIOECONÔMICOS ===== */
.icons_dados_socios {
    width: 70px;
    height: 70px;
}

.section_dados_socios {
    padding: 0px;
    gap: var(--gap-sm);
}

.section_dados_socios span {
    width: 100%;
    gap: var(--gap-sm);
}

/* ===== FAIXA COLORIDA ===== */
.faixa {
    width: 100%;
    height: 16px;
}

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

.faixa div:nth-child(1) { 
    background: #003366; 
    border-radius: 8px 0px 0px 8px;
}

.faixa div:nth-child(2) { 
    background: #1e4f72; 
}

.faixa div:nth-child(3) { 
    background: #3a678f; 
}

.faixa div:nth-child(4) { 
    background: #5c84a6; 
}

.faixa div:nth-child(5) { 
    background: #7da2bd; 
    border-radius: 0px 8px 8px 0px;
}