@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



/* Criado para fazer rolagem suave da página pricipal */
html {
    scroll-behavior: smooth;
}


/* Declaração de Variáveis de Cor */
:root {
    /* ...suas variáveis de cor... */
    --laranja: #f9992e;
    --cinza-escuro: #747474;
    --cinza-claro: #848484;
    --preto: #000000;
    --branco: #ffffff;
    --preto-cinza: #333;
    --branco-tingido: #f0f0f0; 
    --preto-diferente: #332F47;

    
    --font-padrao: 'Playfair Display', serif;
    --font-secundaria: 'Quicksand', sans-serif;
    --font-paginas-internas: 'Raleway', sans-serif;
    --font-titulos: 'Bebas Neue' sans-serif;
    --font-terceira: 'BBH Sans Bartle' sans-serif;
    --font-alumni: 'Alumni Sans', sans-serif;
}

/* Reset Global e Boas Práticas */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- CORREÇÃO PARA NÃO "ARREDAR" PARA O LADO --- */
html, body {
    width: 100%;
    overflow-x: hidden; /* <--- ESSE É O SEGREDO: impede a rolagem lateral */
    margin: 0;
    padding: 0;
}

/* Garante que imagens grandes não estourem a tela */
img {
    max-width: 100%;
    height: auto;
}

/* Estilos Base para o Corpo da Página (Mobile-First) */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--branco-tingido);
    color: var(--cinza-escuro);
}

/* Regra para o nosso contêiner geral */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Estilização do Cabeçalho --- */
header {
    background-color: var(--branco);
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    /* Prepara para a animação de esconder/mostrar */
    position: fixed; /* MUDANÇA IMPORTANTE */
    top: 39px;
    width: 100%;
    z-index: 999;
    transition: transform 0.4s ease-in-out;
    border-bottom: 4px solid var(--laranja);
    font-family: var(--font-alumni);
}

/* Classe que o JS usará para esconder o header */
header.header-hidden {
    transform: translateY(-125%);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 54px;
    filter: none; /* Garante que a logo não fique escura */
    margin-left: -20px;
}

/* =============================================== */
/* --- ESTILOS PARA O MENU DE DESKTOP --- */
/* =============================================== */
@media (min-width: 993px) {
    .desktop-nav {
        display: block;
    }

    .desktop-nav ul {
        list-style: none;
        display: flex;
        align-items: center;
        margin-left: -850px; /* <- Regra agora aplicada SÓ no desktop */
    }

    .desktop-nav ul li {
        margin-left: 20px;
        position: relative;
    }

    .desktop-nav ul li:not(:first-child)::before {
        content: '|';
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--preto);
    }

    .desktop-nav ul li a {
        text-decoration: none;
        color: var(--preto);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 1px;
        padding: 10px 0;
        position: relative;
        transition: color 0.3s ease;
    }

    .desktop-nav ul li a::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 3px;
        background-color: var(--laranja);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s ease;
    }

    .desktop-nav ul li a:hover {
        color: var(--laranja);
    }

    .desktop-nav ul li a:hover::after {
        transform: scaleX(1);
    }

    .mobile-nav, #mobile-menu-btn {
        display: none;
    }
}

/* =============================================== */
/* --- ESTILOS PARA O MENU MOBILE --- */
/* =============================================== */
@media (max-width: 992px) {
    .desktop-nav {
        display: none;
    }

    #mobile-menu-btn {
        display: block;
        background: none; border: none;
        color: var(--laranja);
        font-size: 30px;
        cursor: pointer;
        z-index: 1001; /* Fica na frente do menu */
        margin-right: 75px;
    }

    .mobile-nav {
        display: block;
        position: fixed;
        top: 0; right: 0;
        width: 205px;
        height: 100%;
        background-color: var(--branco);
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        z-index: 1000;
        transform: translateX(100%); /* Começa escondido */
        transition: transform 0.4s ease-in-out;
    }

    .mobile-nav.is-open {
        transform: translateX(0);
    }

    .mobile-nav ul {
        list-style: none;
        padding: 90px 40px 40px 40px;
        margin: 0; /* Reseta a margem negativa do desktop */
    }
    
    .mobile-nav ul li a {
        display: block;
        padding: 15px 0;
        color: var(--preto); /* Garante a cor escura dos links */
        text-decoration: none;
        border-bottom: 3px solid var(--laranja);
    }

    .mobile-submenu {
        padding-left: 15px;
        display: none; /* Escondido por padrão */
    }
    .mobile-dropdown.is-open .mobile-submenu {
        display: block; /* Mostra quando o pai é clicado */
    }
    .mobile-submenu a {
        font-size: 16px;
        padding: 10px 0;
        border-bottom: none;
    }
    .mobile-dropdown-toggle i {
        transition: transform 0.3s ease;
    }
    .mobile-dropdown.is-open .mobile-dropdown-toggle i {
        transform: rotate(180deg);
    }
}



.hero {
  position: relative;
  width: 100%;
  height: 103vh;
  overflow: hidden;
  color: var(--branco);
  display: flex;
  align-items: flex-end;
  text-align: left;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 90px;
  box-shadow: 1px 2px 4px var(--preto);
  border-bottom-left-radius: 10px;
}

.hero-slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Mantém as imagens atrás do texto */
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin-left: 5%;
}

.hero-text {
  animation: fadeInText 1s ease-in-out;
}

.hero-text h1 {
  font-family: var(--font-alumni);
  font-weight: bold;
  font-size: 40px;
  text-transform: uppercase;
  color: var(--branco-tingido);
  letter-spacing: 2px;
  text-shadow: 0px 1px 2px var(--preto);
}

.hero-text p {
  font-family: var(--font-paginas-internas);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--laranja);
  text-shadow: 0px 1px 1px var(--preto);
}

@keyframes fadeInText {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.hero-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 13px;
  z-index: 4;
}

.hero-indicators .dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--branco);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-indicators .dot.active {
  background-color: var(--laranja);
  border-color: var(--preto-cinza);
}







/* --- Estilo Reutilizável de Botão --- */
.btn {
    display: inline-block;
    background-color: var(--laranja);
    color: var(--branco);
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-secundaria);
}

.btn:hover {
    background-color: #333;
    color: var(--laranja); 
}

/* --- Estilização da Seção de Destaques (Mobile-First) --- */
.destaques {
    padding: 60px 0;
}

.destaques h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
    font-family: var(--font-padrao);
    color: var(--preto-cinza);
    text-align: center;
}


.destaques-grid {
    display: flex;
    flex-direction: column; /* PADRÃO: UMA COLUNA (Mobile) */
    gap: 20px;
}

.card {
    font-family: var(--font-alumni);
    color: var(--preto);
    border: 1.5px solid var(--branco-tingido);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.button{
    display: inline-block;
    background-color: var(--laranja);
    color: var(--branco);
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-secundaria);    
    margin-top: 20px;/* Ajuste o valor conforme necessário da distância dos botões*/
}

.button:hover {
    background-color: var(--preto-cinza);
    color: var(--laranja);
}


/* Efeito ao passar o mouse */
.card:hover {   
    transform: translateY(-10px); /* move o card para cima */
    box-shadow: 2px 2px 8px var(--laranja); /* Esse box-shadow que criei vai adicionar sombra  aos cards */
}

.card h3 {
    margin-bottom: 15px;
    color: var(--preto);
    font-family: var(--font-padrao);
}

.card p {
    font-family: var(--font-alumni);
    line-height: 1.6;
    color: var(--preto);
}




/* --- Estilização da Seção Sobre Nós (Mobile-First) --- */
.sobre {
    padding: 60px 0;
    background-color: var(--branco);
}

.sobre .container {
    display: flex;
    flex-direction: 4 column; /* PADRÃO: UMA COLUNA (Mobile) */
    gap: 30px;
    align-items: center; /* Adicionado para melhor alinhamento */
}

.sobre-texto {
    text-align: center; /* Centraliza TUDO que está dentro dele, incluindo o botão */
}

.sobre-texto h2 {
    font-family: var(--font-paginas-internas);
    font-size: 31px;
    margin-bottom: 20px;
    color: var(--preto);
    font-weight: 400;
    text-align: center;
}

.sobre-texto p {
    font-family: var(--font-secundaria);
    color: var(--preto-cinza);
    margin-bottom: 30px;
    line-height: 1.7;
    text-align: center;
}

/* --- Carrossel (Slider) --- */
.sobre-imagens {
    position: relative;
    width: 100%;
    overflow: hidden; /* Esconde as imagens fora da área visível */
    border-radius: 2px;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease; /* Efeito de transição suave para o movimento */
}

.carousel-image {
    min-width: 100%;
    flex-shrink: 0;
}

.carousel-image img {
    width: 100%;
    height: 425px; /* Altura fixa para todas as imagens */
    object-fit: cover;
    display: block;
}

.sobre-imagens .prev,
.sobre-imagens .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    width: 45px; /* Tamanho explícito */
    height: 45px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.sobre-imagens .prev:hover,
.sobre-imagens .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.sobre-imagens .prev {
    left: 15px; /* Posição da seta esquerda */
}

.sobre-imagens .next {
    right: 15px; /* Posição da seta direita */
}

/* --- Media Query para telas grandes --- */
@media (min-width: 768px) {
    .sobre .container {
        flex-direction: row; /* Alinha tudo em linha (horizontal) para telas grandes */
        justify-content: space-between; /* Distancia o texto e as imagens */
    }

    .sobre-texto {
        flex: 1;
        padding-right: 30px;
    }

    .sobre-imagens {
        flex: 2;
        display: flex; /* Exibe as imagens lado a lado */
    }
}

.botao {
    display: inline-block;
    background-color: var(--laranja);
    color: var(--branco);
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-secundaria);
}

.botao:hover {
    background-color: #333;
    color: var(--laranja);
}

/* === Seção de Últimas Notícias === */
.highlight {
    background-color: var(--laranja);
    padding: 70px 20px;
    text-align: center;
}

.highlight h3 {
    font-family: var(--font-padrao);
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--preto-cinza); /* Preto/cinza escuro -  Criar variável dessa cor*/  
}

.highlight p {
    font-family: var(--font-secundaria);
    font-size: 16px;
    max-width: 800px;
    margin: 0 auto;
    color: var(--preto-cinza); /* Preto/cinza escuro */
}

/* === Rodapé === */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--preto);
    color: var(--laranja);
    padding: 60px 20px 30px 20px;
    border-top: 4px solid var(--laranja);
}

.footer-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    width: 100%;
    max-width: 1140px; /* Alinha com o resto do conteúdo do site */
    margin-bottom: 50px; /* Cria um espaço entre as colunas e o texto de copyright */
}

.footer h4 {
    font-family: var(--font-alumni);
    font-size: 30px;
    margin-bottom: 10px;
}

.footer p {
    font-family: var(--font-secundaria);
    color: var(--branco-tingido);
    font-size: 16px;
    line-height: 1.6;
}

/* ======== Ícones paaraa colocar redes sociais criado ============*/
.footer .social-icons {
    display: flex;
    gap: 18px;
    margin-top: 15px;
}

.footer .social-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: var(--branco-tingido);
    color: var(--preto);
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid var(--laranja);
}

.footer .social-icons a:hover {
    background-color: var(--laranja);
    transform: translateY(-1px);
    color: var(--preto);
}

.footer .copyright {
    width: 100%;
    max-width: 1140px;
    text-align: center;
    font-size: 13px;
    color: var(--branco);
    padding-top: 20px;
    border-top: 1px solid var(--branco); /* Linha sutil para separar */
}

.footer .footer-section {
    flex: 1;
    min-width: 220px;
}

  .footer .social-icons {
        justify-content: flex-start; /* Alinha os ícones à esquerda no desktop */
    }


/* Responsivo: rodapé em linha em telas maiores */
@media (min-width: 768px) {
    .footer-grid {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    font-size: 13px;
    color: var(--branco);
    padding: 15px 0;
}

/* --- Estilização do Rodapé --- */
footer {
    background-color: var(--laranja);
    color: var(--branco);
    padding: 20px 0;
    text-align: center;
}

/* =============================================== */
/* === MEDIA QUERY PARA TABLETS E DESKTOPS === */
/* =============================================== */

@media (min-width: 768px) {

    /* Aumenta a fonte do Hero em telas maiores */
    .hero h1 {
        font-size: 48px;
    }
    .hero p {
        font-size: 22px;
    }

    /* Transforma o grid de serviços em 3 colunas */
    .destaques-grid {
        flex-direction: row; /* Volta a ser linha */
        flex-wrap: wrap; /* Permite a quebra de linha */
    }

    .card {
        flex-basis: calc(33.333% - 14px); /* Volta a ter 1/3 da largura */
    }

    /* Transforma a seção "Sobre" em 2 colunas */
    .sobre .container {
        flex-direction: row; /* Volta a ser linha */
        align-items: center;
    }
}

/* =============================================== */
/* === ESTILOS PARA PÁGINAS INTERNAS (SOBRE) === */
/* =============================================== */

/* --- Cabeçalho da Página (Título) --- */
.page-header {
    background-image: url('../img/page-header-bg.jpg'); /* Caminho para sua nova imagem */
    background-size: cover;          /* Garante que a imagem cubra toda a área */
    background-position: center 18%;     /* Centraliza a imagem */
    background-repeat: no-repeat;    /* Evita que a imagem se repita */
    height: 377px;                   /* Defina uma altura para a seção */
    color: var(--branco);            /* Cor do texto continua branca */
    display: flex;                   /* Usa flexbox para centralizar o conteúdo */
    flex-direction: column;          /* Alinha o título e o parágrafo verticalmente */
    justify-content: center;         /* Centraliza verticalmente o conteúdo */
    align-items: center;             /* Centraliza horizontalmente o conteúdo */
    text-align: center;              /* Garante que o texto também esteja centralizado */
    position: relative;              
}

/* Adiciona uma camada escura sobre a imagem para o texto ficar legível */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Cor preta com 40% de opacidade */
    z-index: 1; /* Garante que a sobreposição fique acima da imagem */
}

/* Garante que o conteúdo (título e parágrafo) fique acima da sobreposição */
.page-header .container {
    position: relative;
    z-index: 2;
}

.page-header h1 {
    font-family: var(--font-padrao);
    font-weight: bold;
    font-size: 55px;
    margin-bottom: 10px;
    color: var(--branco); /* Garante que o título seja branco */
}

.page-header p {
    font-family: var(--font-paginas-internas); /* Usa a fonte secundária */
    font-size: 18px;
    color: var(--branco); /* Garante que o texto seja branco */
    max-width: 800px; /* Limita a largura para melhor leitura */
}

/* --- Conteúdo Principal da Página Sobre --- */
.about-content {
    padding: 80px 0;
    background-color: #f5f7fa; /* NOVO: Fundo da seção em cinza bem claro */
    border-top: 1px solid #e0e0e0; /* Linha sutil para separar do cabeçalho */
}

.about-text {
    background-color: var(--branco); /* O painel do texto continua branco */
    padding: 40px 50px;           /* Espaçamento interno para o texto "respirar" */
    border-radius: 8px;           /* Bordas arredondadas para suavizar */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); /* Sombra suave para dar o efeito de "flutuar" */
}

.about-grid {
    display: flex;
    flex-direction: column; /* Coluna única no mobile */
    gap: 40px;
    align-items: center;
}

.about-text h2, 
.about-text h3 {
    background-image: linear-gradient(to right, var(--laranja), var(--branco));
    font-family: var(--font-secundaria);
    color: var(--preto-cinza);
    margin-bottom: 15px;
    margin-top: 30px;
    letter-spacing: 1px;
}

.about-text h2 {
    font-size: 32px;
}

.about-text h3 {
    font-size: 24px;
}

.about-text p,
.about-text li {
    font-family: var(--font-secundaria);
    line-height: 1.8;
    color: var(--preto-cinza);
    margin-bottom: 15px;
}

.about-text ul {
    list-style: none; /* Remove as bolinhas padrão */
    padding-left: 0;
}

.about-image img {
    width: 100%;
    max-width: 500px; /* Limita o tamanho da imagem no mobile */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* Media Query para telas maiores (tablets e desktops) */
@media (min-width: 768px) {
    .about-grid {
        justify-content: center; /* Centraliza o conteúdo (que agora é só o texto) */
    }

    .about-text {
       max-width: 800px; /* Define uma largura máxima para o texto não ficar esticado */
    }
   
}

/* =============================================== */
/* === ESTILOS PARA SEÇÃO DE PARCEIROS (LOGO) === */
/* =============================================== */
.partners {
    background-color: var(--branco);
    padding: 40px 0;
}

.partners h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 10px;
    font-family: var(--font-paginas-internas);
    color: var(--preto-cinza);
    font-weight: 300;
}

#representantes-carousel .logo-slide {
    padding: 0 -130px; /* << CONTROLE MANUAL DO ESPAÇO */
}

.logo-carousel {
    overflow: hidden; /* Esconde os logos que estão fora da área visível */
    position: relative;
    width: 100%;
    /* Adiciona um gradiente suave nas laterais para o efeito de "fade" */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.logo-track {
    display: flex;
    align-items: center; /* Alinha os logos verticalmente */
    width: fit-content; /* Largura se ajusta ao conteúdo */
    /* Animação de rolagem */
    animation: scroll 40s linear infinite;
}

.logo-slide {
    flex: 0 0 230px; /* Define uma largura fixa para cada logo */
    padding: 0 40px; /* Espaçamento entre os logos */
}

.logo-slide img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    opacity: 0.8; /* Aumentei um pouco a opacidade para a cor ficar mais viva */
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.logo-track:hover {
    animation-play-state: paused; 
}

.logo-slide:hover img {
    filter: grayscale(0%); /* Deixa o logo colorido */
    opacity: 1;
    transform: scale(1.2); /* Aumenta levemente o tamanho */
}

/* Animação de rolagem infinita */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Metade da largura total da track (o JS duplica os logos) */
        transform: translateX(-50%); 
    }
}

/* =============================================== */
/* === ESTILOS PARA PÁGINAS DE SERVIÇO INTERNAS === */
/* =============================================== */
.service-detail {
    padding: 80px 0;
}

.service-grid {
    display: flex;
    flex-direction: column; /* Coluna única no mobile */
    gap: 40px;
}

.service-image img {
    width: 100%;
    border-radius: 8px;
}

.service-text h2, 
.service-text h3 {
    font-family: var(--font-paginas-internas, 'Raleway', sans-serif);
    font-weight: 700;
    color: var(--preto-cinza);
    margin-bottom: 15px;
    margin-top: 30px;
}

.service-text h2 {
    font-size: 32px;
}

.service-text h3 {
    font-size: 22px;
    border-left: 3px solid var(--laranja);
    padding-left: 15px;
}

.service-text p,
.service-text li {
    font-family: var(--font-paginas-internas, 'Raleway', sans-serif);
    font-weight: 400;
    line-height: 1.8;
    color: var(--preto-cinza);
    margin-bottom: 15px;
}

.service-text ul {
    list-style: none;
    padding-left: 0;
}

/* Seção de Chamada para Ação (CTA) */
.cta {
    position: relative; /* Essencial para a sobreposição */
    color: var(--branco);
    padding: 90px 0; /* Aumentei um pouco o padding para a imagem respirar */
    text-align: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto com 60% de opacidade */
    z-index: 1;
}

/* Garante que o conteúdo (títulos, parágrafos, botão) fique na FRENTE da camada escura */
.cta .container {
    position: relative;
    z-index: 2;
}

/* Imagem de fundo para o CTA da página de Sismografia */
.cta-sismografico {
    background-image: url('../img/LogoFundoEqSismografico.jpg');
    background-position: center 40%;
}

/* Imagem de fundo para o CTA da página de Detonação */
.cta-detonacao {
    background-image: url('../img/LogoEngenhariaDeDetonacao.jpg');
    background-position: center 55%;
}

/* Imagem de fundo para o CTA da página de Monitoramento Geomecânico */
.cta-geomecanico {
    background-image: url('../img/LogoFundoParaGeomecanico.png');
    background-position: center 45%;
}

/* Imagem de fundo para o CTA da página de Mecânica de Rochas */
.cta-mecanica-rocha {
    background-image: url('../img/sobre-imagem.JPG');
    background-position: center 45%;
}

/* Imagem de fundo para o CTA da página de Aerolevantamento */
.cta-aerolevantamento {
    background-image: url('../img/LogoFundoAerolevantamento.jpg');
    background-position: center 45%;
}

/* Imagem de fundo para o CTA da página de Geomecânico */
.cta-geotecnico {
    background-image: url('../img/LogoFundoGeotecnico.jpg');
    background-position: center 45%;
}


.cta h2 {
    font-family: var(--font-padrao);
    font-size: 28px;
    margin-bottom: 15px;
}

.cta p {
    font-family: var(--font-secundaria);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Deixa o layout em 2 colunas em telas maiores */
@media (min-width: 992px) {
    .service-grid {
        flex-direction: row;
        align-items: flex-start;
    }
    .service-image {
        flex: 1; /* Coluna da imagem */
    }
    .service-text {
        flex: 1.5; /* Coluna do texto (um pouco maior) */
        padding-left: 50px;
    }
}

/* ===== Unificando os estilos para todas as classes de botão ===== */
.btn, .button, .botao {
    display: inline-block;
    background-color: var(--laranja);
    color: var(--branco);
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-secundaria);
    border: none; /* Garante que não haja bordas */
    cursor: pointer; /* Muda o cursor para a "mãozinha" */
    transition: all 0.3s ease-in-out;
     border: 2px solid var(--branco);
}

.btn:hover, .button:hover, .botao:hover {
    /* Opcional: Levanta o botão levemente para dar feedback */
    transform: translateY(-3px);
    background-color: var(--branco); /* Fundo fica branco no hover */
    color: var(--laranja); /* Texto fica laranja no hover */
    border-color: var(--laranja); /* Borda se torna laranja */

    /* O EFEITO DE BRILHO ACONTECE AQUI */
    box-shadow: 0 0 2px rgba(249, 153, 46, 0.6), 
                0 0 4px rgba(255, 170, 74, 0.4); 
}

/* =============================================== */
/* === ESTILOS PARA SEÇÃO DE NOTÍCIAS (CARROSSEL) === */
/* =============================================== */
.news-section {
    padding: 60px 0;
    background-color: var(--branco);
    background-image: url(../img/hero/FundoBranco.jpg);
}

.news-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 48px;
    font-family: var(--font-alumni);
    color: var(--preto);
    font-weight: 500;
}

.news-carousel-container {
    position: relative;
    overflow: hidden;
}

.news-carousel {
    display: flex;
    gap: 20px; /* Espaço entre os cards */
    transition: transform 0.5s ease-in-out;
}

.news-carousel-wrapper {
    position: relative; /* Cria o contexto para os botões se posicionarem */
}



.news-card {
    flex: 0 0 100%; /* Em telas pequenas, cada card ocupa 100% da largura */
    border: 1px solid  var(--cinza-escuro);
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem não ultrapasse as bordas arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center 40%;
    border: 1px solid var(--cinza-escuro);
}

.news-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz este container crescer para ocupar o espaço do card */
}

.news-card-content h3 {
    font-family: var(--font-alumni);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--preto);
    text-align: center;
    text-transform: uppercase;
}

.news-card-content p {
    font-family: var(--font-paginas-internas);
    line-height: 1.6;
    color: var(--preto-cinza);
    margin-bottom: 20px;
    text-align: center;
}

.news-card-content .button {
    margin-top: auto;
    text-align: center;
}

/* Estilos dos botões de navegação */
.carousel-btn {
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--laranja); /* Fundo branco sólido para melhor visibilidade */
    border: 1px solid var(--preto);
    border-radius: 50%;
    width: 45px; /* Aumentei um pouco o tamanho */
    height: 45px;
    font-size: 22px;
    color: var(--preto); /* Cor do ícone da seta */
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Sombra um pouco mais forte */
    transition: all 0.2s ease;
}

.carousel-btn:hover {
    background-color: var(--laranja);
    color: var(--branco);
    border-color: var(--branco);
}


/* Botões do carrossel (invisíveis por padrão) */
.news-carousel-wrapper .prev-btn,
.news-carousel-wrapper .next-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.4s ease;
  transform: translateY(-120%);
}

/* Quando visíveis */
.news-carousel-wrapper .prev-btn.visible,
.news-carousel-wrapper .next-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* Responsividade para telas maiores */
@media (min-width: 768px) {
    .news-card {
        flex: 0 0 calc(50% - 10px); /* 2 cards por vez */
    }
}

@media (min-width: 992px) {
    .news-card {
        flex: 0 0 calc(33.333% - 14px); /* 3 cards por vez */
    }
    .prev-btn {
        left: -25px;
    }
    .next-btn {
        right: -25px;
    }
}


/* =============================================== */
/* === ESTILOS PARA O MENU DROPDOWN VERSÃO JAVASCRIPT - ficou melhor === */
/* =============================================== */

/* Prepara o container (sem mudanças) */
.dropdown-container {
    position: relative;
}
.dropdown-toggle i {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.dropdown-container.is-open .dropdown-toggle i {
    transform: rotate(180deg);
}

/* Caixa do menu dropdown */
.dropdown-menu {
    display: block;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 0;
    list-style: none;
    width: 260px;
    z-index: 100;
    overflow: hidden; /* Importante para a animação */
    border-top: 41px solid var(--laranja);
    background-color: #2d2d2d; /* Fundo escuro sólido */
    
    opacity: 0;
    visibility: hidden;
    /* Transição apenas para a caixa, sem afetar os itens */
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
}

.dropdown-container.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

/* Cabeçalho do dropdown */
.dropdown-header {
    padding: 15px 20px;
    font-family: var(--font-paginas-internas);
    font-size: 14px;
    font-weight: bold;
    color: var(--branco);
    background-color: rgba(0,0,0,0.1); /* Fundo um pouco mais escuro para o header */
}

/* NOVO: Estilo para os subtítulos de agrupamento */
.dropdown-subheader {
    padding: 15px 20px 5px 20px;
    font-size: 10px;
    font-weight: bold;
    color: var(--cinza-escuro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Links dentro do dropdown */
.dropdown-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: var(--branco-tingido); /* Texto claro */
    font-size: 11px;
    white-space: nowrap;
    border-left: 3px solid transparent; /* Prepara para o efeito hover */
    transition: all 0.2s ease;
}

/* EFEITO DE HOVER REFINADO */
.dropdown-menu li a:hover {
    background-color: rgba(0,0,0,0.2); /* Fundo um pouco mais claro no hover */
    color: var(--laranja);
    border-left-color: var(--laranja);
    padding-left: 25px;
}

/* Seta do link */
.dropdown-menu li a i {
    font-size: 12px;
    color: var(--cinza-claro);
    transition: all 0.2s ease;
}
.dropdown-menu li a:hover i {
    color: var(--laranja);
    transform: translateX(3px);
}

/* ANIMAÇÃO CASCATA */
.dropdown-menu li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdown-container.is-open .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}
/* Atraso para cada item */
.dropdown-container.is-open .dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(2) { transition-delay: 0.1s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(4) { transition-delay: 0.2s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(5) { transition-delay: 0.25s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(6) { transition-delay: 0.3s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(7) { transition-delay: 0.35s; }
.dropdown-container.is-open .dropdown-menu li:nth-child(8) { transition-delay: 0.4s; }


/* =============================================== */
/* === INDICADOR DE ROLAGEM === */
/* =============================================== */

/* Este container de fora cuida APENAS do POSICIONAMENTO */
.scroll-down-indicator {
    position: absolute;
    bottom: -160px;
    left: 50%;
    transform: translateX(-50%); /* Centralização horizontal CORRIGIDA */
    z-index: 5;
}

/* Este container de dentro cuida da ANIMAÇÃO e do conteúdo */
.scroll-down-animado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--branco);
    text-align: center;
    animation: bounce 2s infinite ease-in-out; /* Animação aplicada aqui */
}

.scroll-down-animado span {
    font-family: var(--font-paginas-internas);
    color: var(--branco);
    font-size: 11px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.scroll-down-animado i {
    font-size: 18px;
}

/* A animação @keyframes bounce continua a mesma */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* =============================================== */
/* === SEÇÃO DE CERTIFICAÇÃO - SOBRE NÓS === */
/* =============================================== */

.certification-section {
  text-align: center;
  background-color: var(--branco);
  padding: 60px 20px;
  background-image: url(../img/hero/FundoBranco.jpg);
}

.certification-section h2 {
  font-family: var(--font-alumni);
  font-weight: 500;
  font-size: 50px;
  color: var(--preto);
  margin-bottom: 20px;
}

.certification-section p {
  font-family: var(--font-paginas-internas);
  color: var(--preto-cinza);
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

.certification-logo img {
  max-width: 260px;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.certification-logo img:hover {
  transform: scale(1.01);
}






/* =============================================== */
/* === ESTILOS PARA A PÁGINA DE CONTATO === */
/* =============================================== */

.contact-section {
    padding: 80px 0;
    background-color: #f5f7fa;
}

.contact-section .contact-form .btn {
    width: 100%;
    font-size: 18px;
    padding: 15px;
    margin-top: 20px; /* Adiciona um espaço superior, se necessário */
    position: relative; /* Garante que ele fique no fluxo normal */
    z-index: auto; /* Garante que ele não seja puxado para frente indevidamente */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Coluna única no mobile */
    gap: 50px;
}

/* Estilos para o formulário */
.contact-form h2, .contact-info h2 {
    font-family: var(--font-padrao);
    margin-bottom: 20px;
    font-size: 28px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-family: var(--font-secundaria);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-secundaria);
    font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--laranja);
    box-shadow: 0 0 5px rgba(249, 153, 46, 0.5);
}

/* Estilos para as informações de contato */
.contact-info p {
    margin-bottom: 30px;
    line-height: 1.7;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.info-item i {
    font-size: 20px;
    color: var(--laranja);
    margin-top: 5px;
}

.info-item strong {
    font-family: var(--font-secundaria);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.info-item p {
    margin: 0;
    color: var(--cinza-escuro);
}




/* =============================================== */
/* === DESIGN REFINADO PARA A PÁGINA DE PRODUTOS === */
/* =============================================== */

/* Fundo Degradê */
.gradient-bg {
    background: linear-gradient(150deg, var(--laranja), var(--branco-tingido), var(--branco-tingido), var(--branco-tingido), var(--branco-tingido), var(--branco-tingido), var(--branco-tingido), var(--laranja) 100%);
    padding: 80px 0;
}
.product-section {
    padding: 0;
}
.product-section h2, .product-section .section-description {
    text-align: center;
    margin-bottom: 20px;
    font-size: 32px;
    font-family: var(--font-padrao);
    color: var(--branco);
    font-weight: 700;
}
.product-section .section-description {
    margin-bottom: 50px;
    font-size: 18px;
    color: #e0e0e0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Grid de produtos */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* === CARD DE PRODUTO REFINADO === */
.product-card {
    background-color: var(--branco);
    border-radius: 8px; /* Cantos um pouco menos arredondados */
    overflow: hidden; /* ESSENCIAL para o efeito de zoom na imagem */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* EFEITO DE ZOOM NA IMAGEM */
.product-card .product-image-container {
    overflow: hidden; /* Garante que a imagem ampliada não vaze */
}
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease; /* Transição suave para o zoom */
}
.product-card:hover img {
    transform: scale(1.0); /* Aumenta a imagem em 10% no hover */
}

.product-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* NOVO: Estilo para a tag de categoria */
.product-category {
    display: inline-block;
    align-self: flex-start; /* Alinha a tag no início */
    background-color: var(--laranja);
    color: var(--branco);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px; /* Deixa a tag arredondada */
    margin-bottom: 15px;
    font-family: var(--font-secundaria);
}

/* Tipografia refinada */
.product-card-content h3 {
    font-family: var(--font-padrao);
    font-size: 22px; /* Título um pouco maior */
    margin-bottom: 10px;
    color: var(--preto-cinza);
    line-height: 1.3;
}
.product-card-content p {
    font-family: var(--font-secundaria);
    line-height: 1.6;
    color: var(--cinza-escuro);
    flex-grow: 1;
    margin-bottom: 20px;
    font-size: 15px;
}

/* Botão refinado com ícone */
.product-card-content .button {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex; /* Para alinhar o ícone com o texto */
    align-items: center;
}
/* Adiciona a seta no botão usando um pseudo-elemento */
.product-card-content .button::after {
    content: '→'; /* Seta simples */
    font-family: Arial, sans-serif;
    margin-left: 10px;
    transition: transform 0.2s ease;
}
.product-card-content .button:hover::after {
    transform: translateX(5px); /* Move a seta no hover */
}


/* =============================================== */
/* === IMAGEM DE FUNDO ESPECÍFICA PARA "PÁGINAS INTERNAS" === */
/* =============================================== */

.page-header h1 {
    font-family: var(--font-alumni); /* Aplica a fonte Bebas Neue */
    font-size: 78px; 
    font-weight: 700; 
    text-transform: uppercase; /* Garante que o texto fique em maiúsculas */
    letter-spacing: -1px; /* Espaçamento entre as letras, que combina bem com esta fonte */
    color: var(--branco-tingido);
    text-shadow: 3px 6px 8px var(--preto);
    /* A propriedade text-shadow será controlada pelas classes específicas abaixo */
}

.header-sobre {
    background-image: url('../img/hero/HeroCapa994.webp'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 10%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 635px;
    align-items: flex-end;
    padding-bottom: 30px;
    padding-top: 130px;
    display: flex;
    justify-content: center;
     box-shadow: 1px 2px 5px var(--preto);
     background-attachment: fixed;
}

.header-sismografico {
    background-image: url('../img/imgPaginas/ImagemSismografico.jpg'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 45%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
}


.header-geotecnico {
    background-image: url('../img/imgPaginas/Geotc1.jpg'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 45%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
}

.header-geomecanico {
    background-image: url('../img/imgPaginas/MonitoramentoGeo.png'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 45%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
}

.header-mecanica-rocha{
    background-image: url('../img/imgPaginas/MRocha.jpg'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 45%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    height: 30vh;
    display: flex;
    justify-content: center;
    padding-top: 110px;
}

.header-detonacao{
    background-image: url('../img/imgPaginas/ImagemDetonacao.jpg'); /* <-- Coloque o nome da sua nova imagem aqui */
    background-position: center 20%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
}



.header-aerolevantamento {
    background-image: url('../img/hero/Aerolevantamento.webp'); /* <-- Coloque o nome da sua nova imagem aqui */  
    background-position: center 68%; 
    text-shadow: 2px 4px 1px var(--preto-diferente);
    min-height: 600px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    background-attachment: fixed;
}

.header-equipe {
    background-image: url('../img/hero/FotoDroneParaHero.webp'); /* Substitua pela sua imagem de cabeçalho */
    background-position: center 25%; 
    text-shadow: 2px 4px 1px var(--preto);
    min-height: 643px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    background-attachment: fixed;
}

.header-denuncia {
    background-image: none; 
    background-position: center -80%; 
    text-shadow: 2px 4px 1px var(--preto);
    min-height: 600px;
    display: flex;
    justify-content: center;
    box-shadow: 1px 1px 5px var(--preto);
}

.header-denuncia h1{
    color: var(--preto-cinza);
    text-shadow: 2px 2px 1px var(--cinza-claro);
    padding-top: 100px;
    box-shadow: 1px 1px 5px var(--preto);
}

.header-artigos {
    background-image: url('../img/hero/HeroCapa992.webp');
    background-position: center 50%;
    min-height: 635px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    box-shadow: 1px 2px 5px var(--preto);
    background-attachment: fixed;
}

.header-diversidade {
    background-image: url('../img/hero/HeroCapa990.webp');
    background-position: center 18%;
    min-height: 635px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    box-shadow: 1px 1px 5px var(--preto);
    background-attachment: fixed;
}

.header-produto-individual{
    background-image: url('../img/produtos/D-rebarFundo.png');
    background-position: center 50%;
    min-height: 650px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    background-attachment: fixed;
}

.header-expertise{
    background-image: url('../img/sobre-imagem.JPG');
    background-position: center 40%;
    min-height: 635px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    background-attachment: fixed;
     box-shadow: 1px 3px 5px var(--preto);
}

.header-tecnologias{
    background-image: url('../img/tecnologias/CapaTecnologia.webp');
    background-position: center 40%;
    min-height: 635px;
    display: flex;
    justify-content: center;
    padding-top: 110px;
    background-attachment: fixed;
    box-shadow: 7px 2px 4px var(--preto);
}

.page-header.header-tecnologias h1 {
    color: var(--branco);
    text-shadow: 6px 3px 5px var(--preto);
    margin-bottom: 0; /* Remove margem inferior padrão */
    z-index: 2; /* Garante que o título fique acima do background */
    position: relative; /* Necessário para z-index funcionar */
    opacity: 0.9;
}

.page-header.header-expertise h1 {
    color: var(--branco);
    text-shadow: 4px 7px 6px var(--preto);
    margin-bottom: 0; /* Remove margem inferior padrão */
    z-index: 2; /* Garante que o título fique acima do background */
    position: relative; /* Necessário para z-index funcionar */
    opacity: 0.9;
}

.header-tuneis {
    background-image: url('../img/expertise/Capa01.webp');
    margin-top: 137px;
    background-attachment: fixed;
     min-height: 400px;
     box-shadow: 7px 2px 4px var(--preto);
}

.header-subterraneo {
    background-image: url('../img/hero/SubCapa.webp');
    margin-top: 137px;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-vibracoes {
    background-image: url('../img/expertise/ExpertiseSismografia2.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-desmonte {
    background-image: url('../img/hero/FotoCapaHero5.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-drone {
    background-image: url('../img/expertise/ExpertiseDroneCapa.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-mineracao {
    background-image: url('../img/expertise/ExpertiseMineracaoCA2.jpg');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-geoprocessamento {
    background-image: url('../img/expertise/ExpertiseGeo10.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 400px;
}

.header-meio-ambiente {
    background-image: url('../img/hero/Espeleologia4.webp');
    margin-top: 137px;
    background-position: center 68%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 440px;
}


.header-sensores {
    background-image: url('../img/tecnologias/SensoresCapa.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 440px;
}


.header-engenharia {
    background-image: url('../img/hero/HeroCapa899.webp');
    margin-top: 137px;
    background-position: center 20%;
    background-attachment: fixed;
     min-height: 550px;
}

.header-est-subterraneo {
    background-image: url('../img/hero/SubterraneoCapa.webp');
    margin-top: 137px;
    background-position: center 50%;
    background-attachment: fixed;
     min-height: 550px;
}

.header-investigativos {
    background-image: url('../img/tecnologias/HC10.jpeg');
    margin-top: 137px;
    background-position: center 2%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 440px;
}


.header-vibracao {
    background-image: url('../img/tecnologias/Sismografo3.webp');
    margin-top: 137px;
    background-position: center 65%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 440px;
}


.header-irata {
    background-image: url('../img/hero/Irata16.webp');
    margin-top: 137px;
    background-position: center 30%;
    background-attachment: fixed;
     box-shadow: 7px 2px 4px var(--preto);
     min-height: 440px;
}


.header-laboratorio {
    background-image: url('../img/cards/minha-nova-foto-lab11.pdf.webp.webp');
    margin-top: 127px;
    background-position: center 68%;
    background-attachment: fixed;
     min-height: 550px;
}

.header-est-drones {
    background-image: url('../img/hero/CapaDrone2.webp');
    margin-top: 137px;
    background-position: center 44%;
    background-attachment: fixed;
     min-height: 550px;
}

/* =============================================== */
/* === NOVOS ESTILOS PARA A PÁGINA "SOBRE NÓS" === */
/* =============================================== */

/* Seção de Introdução */
.about-intro {
    padding: 80px 0;
    background-color: var(--branco);
}
.about-intro h1 {
    font-family: var(--font-alumni);
    font-size: 42px;
    font-weight: 500;
    color: var(--preto);
    margin-bottom: 30px;
    line-height: 1.5;
    text-align: center;
}
.about-intro p {
    font-family: var(--font-paginas-internas);
    font-size: 17px;
    line-height: 1.8;
    color: var(--preto);
    margin-bottom: 20px;
    text-align: center;
}

/* =============================================== */
/* === ANIMAÇÃO "REVELAR AO ROLAR" === */
/* =============================================== */

/* 1. Prepara o estado inicial (escondido) de TODOS os elementos que serão animados */
.about-intro h1,
.mission-item, 
.history-timeline h2, 
.timeline-gallery,
.timeline-nav,
.team-member,
.team-highlight .highlight-text,
.destaques h2, 
.destaques-grid,
.article-category-title,
.article-card-content,
.simple-content-section p,
.product-header-infobox,
.product-header-infobox h2,
.product-header-infobox .product-description,
.product-header-infobox .product-features,
.product-specifications-section,
.feature-item h4,
.product-details-section h3,
.product-details-section h2,
.hero h1,
.hero p,
.header-equipe,
.specialized-text-box h2,
.specialized-text-box p,
.specialized-image-column,
.specialties-list li a,
.header-aerolevantamento,
.banner-specialties .banner-image,
.stats-title,
.specialties-section h2,
.news-section h2,
.sobre-texto h2,
.sobre-texto p,
.partners-section h2,
.expertise-intro,
.header-expertise-logo{
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Define o estado final (visível) que o JavaScript vai ativar */
.about-intro h1.is-visible,
.mission-item.is-visible,
.history-timeline h2.is-visible,
.timeline-gallery.is-visible,
.timeline-nav.is-visible,
.team-member.is-visible,
.team-highlight .highlight-text.is-visible,
.destaques h2.is-visible,
.destaques-grid.is-visible,
.article-category-title.is-visible,
.article-card-content.is-visible,
.simple-content-section p.is-visible,
.product-header-infobox.is-visible,
.product-header-infobox h2.is-visible,
.product-header-infobox .product-description.is-visible,
.product-header-infobox .product-features.is-visible,
.product-specifications-section.is-visible,
.feature-item h4.is-visible,
.product-details-section h3.is-visible,
.product-details-section h2.is-visible,
.hero h1.is-visible,
.hero p.is-visible,
.header-equipe.is-visible,
.specialized-text-box h2.is-visible,
.specialized-text-box p.is-visible,
.specialized-image-column.is-visible,
.specialties-list li a.is-visible,
.header-aerolevantamento.is-visible,
.banner-specialties .banner-image.is-visible,
.stats-title.is-visible,
.specialties-section h2.is-visible,
.news-section h2.is-visible,
.sobre-texto h2.is-visible,
.sobre-texto p.is-visible,
.partners-section h2.is-visible,
.expertise-intro.is-visible,
.header-expertise-logo.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* NOVO: Efeito cascata para os cards da equipe */
.team-member.is-visible:nth-child(2) { transition-delay: 0.2s; }
.team-member.is-visible:nth-child(3) { transition-delay: 0.4s; }
.team-member.is-visible:nth-child(4) { transition-delay: 0.1s; } /* Segunda linha */
.team-member.is-visible:nth-child(5) { transition-delay: 0.3s; }
.team-member.is-visible:nth-child(6) { transition-delay: 0.5s; }

/* 3. Efeito cascata para a seção Missão, Visão e Valores */
.mission-item.is-visible:nth-child(2) {
    transition-delay: 0.2s;
}
.mission-item.is-visible:nth-child(3) {
    transition-delay: 0.4s;
}



/* Seção Missão, Visão e Valores */
.mission-vision {
    padding: 80px 0;
    background-color: var(--branco); 
    background-image: url(../img/hero/FundoBranco.jpg);
}
.mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
.mission-item h2 {
    font-family: var(--font-alumni);
    font-size: 50px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
    color: var(--preto);
}
.mission-item p, .mission-item li {
    font-family: var(--font-paginas-internas);
    text-align: center;
    color: var(--preto);
    line-height: 1.7;
}
.mission-item ul {
    list-style: none;
    padding-left: 0;
}


/* Seção da Linha do Tempo */
.history-timeline {
    padding: 90px 0;
    background-color: var(--laranja); 
    color: var(--branco-tingido);
    line-height: 1.7;
    border-bottom: 3px solid var(--laranja);
    border-top: 3px solid var(--laranja);
    font-family: var(--font-paginas-internas);
    background:
        linear-gradient(rgba(0,0,0,0.80), rgba(0,0,0,0.99)),
        url(../img/hero/FH2.webp);
    background-size: cover;
    background-position: center;
    text-shadow: 1px 1px 1px var(--laranja);
}

.history-timeline h2 {
    text-align: center;
    font-family: var(--font-alumni);
    font-weight: 400;
    font-size: 80px;
    margin-bottom: 20px;
    color: var(--branco);
    text-shadow: 1px 1px 1px var(--laranja);
}
.history-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.7;
    letter-spacing: 1px;
    color: var(--branco-tingido);
    text-shadow: 1px 1px 1px var(--laranja);
}
.timeline-nav {
    display: flex;
    justify-content: center;
    border-bottom: 3px solid var(--laranja);
    margin-bottom: 40px;
}
.timeline-tab {
    padding: 15px 25px;
    cursor: pointer;
    background-color: var(--laranja);
    border: none;
    color: var(--preto);
    font-family: var(--font-alumni);
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 16px;
    border-top: 1px solid var(--preto);
    border-left: 2px solid var(--preto);
}
.timeline-tab.active, .timeline-tab:hover {
    background-color: var(--branco-tingido);
    color: var(--preto);
    text-shadow: 1px 1px 1px var(--laranja);
}
.timeline-pane {
    display: none; /* Esconde todos os painéis por padrão */
    animation: fadeIn 0.5s;
}
.timeline-pane.active {
    display: block; /* Mostra apenas o painel ativo */
}
.timeline-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 5px;
    margin-top: 30px;
}
.timeline-gallery img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 2px;
    border: 3px solid var(--preto);
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsividade */
@media(min-width: 768px) {
    .mission-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =============================================== */
/*             === PÁGINA: EQUIPE === */
/* =============================================== */

/* Seção de Destaque (sem mudanças) */
.team-highlight {
    background-color: var(--preto); 
    padding: 30px 20px;
    text-align: center;
    border-bottom: 2px solid var(--laranja);
    border-top: 2px solid var(--laranja);
}

.team-highlight .highlight-text {
    font-family: var(--font-alumni);
    font-size: 28px;
    letter-spacing: 0.8px;
    max-width: 900px;
    margin: 0 auto;
    color: var(--branco);
    text-align: center;
}

.team-highlight .company-name {
    font-family: var(--font-titulos);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: -25px;
    color: var(--branco-tingido);
    text-shadow: 1px 2px 1px var(--preto-diferente);
    text-align: center;
}


/* Grid de Membros da Equipe */
.team-grid-section {
    padding: 80px 0;
    background-color: var(--branco);
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
     align-items: stretch;
}

/* Card principal */
.team-member {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 2px solid var(--laranja);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
}

/* Container para as informações (textos e link) */
.team-member-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Garante que os cards tenham a mesma altura */
    padding: 20px;
}

/* Nome do membro */
.team-member-info h3 {
    font-family: var(--font-alumni);
    font-size: 24px;
    font-weight: 700;
    color: var(--preto);
}

/* Estilo para o cargo */
.team-member-role {
    font-family: var(--font-alumni);
    font-size: 17px;
    color: var(--preto-cinza);
    margin-top: 12px;
}

/* Estilo para o ícone do LinkedIn */
.team-member-social {
    margin-top: auto; /* EMPURRA o ícone para a base */
    padding-top: 15px; /* Espaço acima do ícone */
    font-size: 25px;
    color: #0076b5;
    transition: color 0.3s ease, transform 0.3s ease;
}
.team-member-social:hover {
    color: #05478a;
    transform: scale(1.0);
}

/* =============================================== */
/* === AJUSTE DE ZOOM E POSIÇÃO MANUAL NAS FOTOS DA EQUIPE (NOVA ABORDAGEM) === */
/* =============================================== */

/* Estilo geral para o container da foto */
.team-member-photo {
    width: 100%;
    height: 280px; /* Altura fixa para todos */
    background-size: cover; /* Garante que a imagem cubra o espaço */
    background-repeat: no-repeat;
    background-position: center center; /* Posição padrão */
    border-radius: 8px 0px 0 0; /* Seus border-radius aqui */
    overflow: hidden; /* Importante para cortar o excesso do zoom */
    border-bottom: 1px solid var(--laranja);
}

/* --- AJUSTES INDIVIDUAIS PARA CADA FOTO --- */

#photo-arthur {
    background-image: url('../img/funcionarios/Arthur\ Matos.webp'); /* Caminho da imagem */
    background-position: center 55%; /* Puxa um pouco para baixo (20% do topo) */
    background-size: 110%; /* Dê um zoom de 130% */
}


#photo-gazolla {
    background-image: url('../img/funcionarios/Gazzola.webp'); /* Caminho da imagem */
    background-position: center 66%; /* Posição um pouco diferente */
    background-size: 130%; /* Zoom um pouco menor */
}

#photo-alexandre {
    background-image: url('../img/funcionarios/Alexandre\ \ Júnior.webp'); /* Caminho da imagem */
    background-position: center 74%; /* Puxa mais para cima */
    background-size: 100%; /* Outro nível de zoom */
}

#photo-vitor {
    background-image: url('../img/funcionarios/Vitor.webp'); /* Caminho da imagem */
    background-position: center 36%; /* Puxa mais para cima */
    background-size: 135%; /* Outro nível de zoom */
}

#photo-joao {
    background-image: url('../img/funcionarios/Jõao.webp'); /* Caminho da imagem */
    background-position: center 49%; /* Puxa mais para cima */
    background-size: 107%; /* Outro nível de zoom */
}

#photo-leo {
    background-image: url('../img/funcionarios/Leo2.webp'); /* Caminho da imagem */
    background-position: center 55%; /* Puxa mais para cima */
    background-size: 105%; /* Outro nível de zoom */
}

#photo-vera {
    background-image: url('../img/funcionarios/Vera.webp'); /* Caminho da imagem */
    background-position: center 80%; /* Puxa mais para cima */
    background-size: 114%; /* Outro nível de zoom */
}

#photo-bruno {
    background-image: url('../img/funcionarios/Bruno1.webp'); /* Caminho da imagem */
    background-position: center 45%; /* Puxa mais para cima */
    background-size: 112%; /* Outro nível de zoom */
}

#photo-max {
    background-image: url('../img/funcionarios/Max2.webp'); /* Caminho da imagem */
    background-position: center 83%; /* Puxa mais para cima */
    background-size: 100%; /* Outro nível de zoom */
}

#photo-ivo {
    background-image: url('../img/funcionarios/Ivo.webp'); /* Caminho da imagem */
    background-position: center 60%; /* Puxa mais para cima */
    background-size: 110%; 
}

#photo-alexandregontijo {
    background-image: url('../img/funcionarios/Alexandre001.webp'); /* Caminho da imagem */
    background-position: center 40%; /* Puxa mais para cima */
    background-size: 104%; 
}


#photo-pedro {
    background-image: url('../img/funcionarios/Pedro.webp'); /* Caminho da imagem */
    background-position: center 80%; /* Puxa mais para cima */
    background-size: 105%; 
}

#photo-leandro {
    background-image: url('../img/funcionarios/Leandro.webp'); /* Caminho da imagem */
    background-position: center 85%; /* Puxa mais para cima */
    background-size: 103%; 
}

#photo-rejane {
    background-image: url('../img/funcionarios/Rejane.webp'); /* Caminho da imagem */
    background-position: center 90%; /* Puxa mais para cima */
    background-size: 105%; 
}

#photo-bruno1 {
    background-image: url('../img/funcionarios/Bruno\ Diniz.webp'); /* Caminho da imagem */
    background-position: center 50%; /* Puxa mais para cima */
    background-size: 100%; 
}

#photo-flavio {
    background-image: url('../img/funcionarios/Flavio\ .webp'); /* Caminho da imagem */
    background-position: center 80%; /* Puxa mais para cima */
    background-size: 106%; 
}

#photo-feldmann {
    background-image: url('../img/funcionarios/Pedro\ Feldmann.webp'); /* Caminho da imagem */
    background-position: center 88%; /* Puxa mais para cima */
    background-size: 102%; 
}

#photo-ribas {
    background-image: url('../img/funcionarios/Ribas.webp'); /* Caminho da imagem */
    background-position: center 60%; /* Puxa mais para cima */
    background-size: 100%; 
}

#photo-Ramon {
    background-image: url('../img/funcionarios/Ramon.webp'); /* Caminho da imagem */
    background-position: center 92%; /* Puxa mais para cima */
    background-size: 100%; 
}


/* Media Queries para responsividade */
@media (max-width: 768px) {
    .team-highlight .highlight-text {
        font-size: 30px;
    }
    .team-highlight .company-name {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .team-highlight .highlight-text {
        font-size: 24px;
    }
    .team-highlight .company-name {
        font-size: 18px;
    }
    .team-member img {
        height: 250px;
    }
    .team-member h3 {
        font-size: 18px;
    }
}

/* =============================================== */
/* === ESTILO REFINADO PARA CARDS DE SERVIÇOS === */
/* =============================================== */

/* Seção de Destaques (pode manter o fundo claro ou colocar um mais escuro se quiser) */
#servicos.destaques {
    position: relative; /* Necessário para a camada escura */
    padding: 80px 0;
    
    /* IMAGEM DE FUNDO COM EFEITO PARALLAX */
    background-image: url('../img/hero/FundoBranco.jpg'); /* << Imagem de sua escolha */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#servicos.destaques::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#servicos.destaques .container {
    position: relative;
    z-index: 2;
}


#servicos.destaques h2 {
    text-align: center;
    margin-bottom: 60px;
    font-family: var(--font-alumni);
    font-size: 50px;
    font-weight: 300;
    color: var(--preto-cinza);
}

.destaques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background-color: var(--branco);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    text-align: center; /* CENTRALIZA O TEXTO E CONTEÚDO */
    padding: 30px;
    transition: all 0.3s ease-in-out;
    border-top: 5px solid transparent; /* Prepara para o efeito hover */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-top-color: var(--laranja);
}

/* NOVO: Estilo para o container da logo */
.service-icon {
    display: flex; /* Para centralizar a imagem */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente se tiver altura fixa */
    height: 70px; /* Altura fixa para o container do ícone/logo */
    margin-bottom: 25px; /* Mais espaço abaixo da logo */
}

/* NOVO: Estilo para a IMG da logo */
.service-icon img {
    max-width: 180px; /* Tamanho máximo da sua logo */
    max-height: 160px; /* Tamanho máximo da sua logo */
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
    transition: transform 0.3s ease;
}

.card:hover .service-icon img {
    transform: scale(1.1); /* Efeito suave de zoom na logo no hover */
}

.card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center; /* CENTRALIZA ITENS DENTRO DO CARD-CONTENT */
}

.card h3 {
    font-family: var(--font-alumni);
    font-weight: 600;
    font-size: 23px;
    margin-bottom: 15px;
    color: var(--preto-cinza);
}

.card p {
    font-family: var(--font-alumni);
    line-height: 1.6;
    font-size: 15px;
    font-weight: 700;
    color: var(--preto-cinza);
    flex-grow: 1;
    margin-bottom: 25px; /* Mais espaço antes do botão */
    max-width: 85%; /* Para evitar que o texto se espalhe muito em cards largos */
}

.card .button {
    margin-top: auto;
    align-self: center; /* CENTRALIZA O BOTÃO */
}


/* =============================================== */
/* === ESTILOS PARA A PÁGINA DE ARTIGOS === */
/* =============================================== */
.articles-section {
  background-color: var(--branco); /* fundo branco */
  padding: 60px 0;        /* espaço interno superior e inferior */
  background-image: url(../img/hero/FundoBranco.jpg);
}

.article-category-title {
  font-family: var(--font-alumni);
  font-size: 48px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 60px;
  color: var(--preto);
}


.page-header p {
  position: relative;
  z-index: 2;
  font-size: 18px;
  max-width: 700px;
  margin: 15px auto 0;
}

/* FILTRO */
.articles-filter {
  text-align: center;
  margin: 60px auto 30px;
}

.filter-btn {
  background: var(--preto);
  color: var(--branco);
  border: 1px solid var(--laranja);
  padding: 10px 18px;
  margin: 10px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-alumni);
  font-size: 17px;
  letter-spacing: 1px;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--laranja);
  color: var(--preto);
  border: 1px solid var(--preto);
}

/* GRID */
.articles-grid {
  display: flex;
  flex-wrap: wrap;                /* 🔹 permite que os cards quebrem linha */
  justify-content: center;        /* 🔹 centraliza os cards na tela */
  gap: 30px;                      /* 🔹 espaçamento entre cards */
  margin-top: 30px;
}

/* CARD */
.article-card {
  background-image: url(../img/hero/FundoBranco.jpg);
  border-radius: 8px;
  border: 1px solid var(--preto-cinza);
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease, box-shadow 0.3s ease;
  width: 320px;          /* largura padrão */
  height: 530px;         /* 🔹 altura fixa */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 15px auto;
}

.article-card:hover {
  transform: translateY(-6px);
}

.article-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--preto);
}

.article-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--branco);
  border-radius: 50%;
  padding: 8px;
}

.article-icon i {
  color: red;
  font-size: 18px;
}

.article-card-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.article-meta {
  font-size: 14px;
  color: var(--preto-cinza);
  margin-bottom: 10px;
  font-family: var(--font-paginas-internas);
}

.article-card h3 {
  font-family: var(--font-alumni);
  font-size: 20px;
  color: var(--preto);
  margin-bottom: 10px;
  text-align: center;
}

.article-card-content p {
  font-size: 0.9rem;
  font-family: var(--font-paginas-internas);
  color: var(--preto-cinza);
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* 🔹 mostra só 3 linhas */
  -webkit-box-orient: vertical;
}

.article-card .button {
  background: var(--laranja);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
  text-align: center;
}

.article-card .button:hover {
  background: #e37a00;
}


@media (max-width: 768px) {
  .article-card {
    width: 90%;        /* ocupa quase toda a tela */
    height: auto;      /* permite crescer se precisar */
  }
}




/* =============================================== */
/* === ESTILOS PARA A BARRA SUPERIOR (TOP BAR) === */
/* =============================================== */
.top-bar {
    background-color: var(--preto); 
    padding: 12px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
}

.top-bar-content {
    display: flex;
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    align-items: center;
    height: 15px;
}

.top-bar-socials {
   position: absolute;  /* libera do fluxo normal */
    top: 8px;           /* distância do topo */
    right: 125px;          /* distância da esquerda */
    display: flex;
    gap: 15px;
}

.top-bar-socials a {
    color: var(--laranja);
    font-size: 24px;
}

.top-bar-socials a:hover {
    color: var(--branco); /* Cor do ícone no hover */
    transform: scale(1.1); /* Aumenta um pouco o ícone no hover */
}

/* NOVO ESTILO PARA O LINK DE CONTATO */
.top-bar-contact a {
    display: flex; /* Alinha o ícone e o texto */
    align-items: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
    
    color: var(--branco);
    text-decoration: none;
    font-family: var(--font-alumni);
    font-weight: 600;
    font-size: 17px;
    transition: color 0.3s ease;
}

.top-bar-phone a,
.top-bar-about a,
.top-bar-articles a{
    display: flex;
    align-items: center;
    color: var(--branco);
    text-decoration: none;
    font-family: var(--font-alumni);
    font-weight: 600;
    font-size: 17px;
    transition: color 0.3s ease;
    gap: 8px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    /* Espaço entre "Contato" e as Redes Sociais */
}

.top-bar-contact {
    margin-left: 835px; /* << CONTROLE MANUAL DO ESPAÇO */
}

.top-bar-phone {
    margin-left: 20px; /* << CONTROLE MANUAL DO ESPAÇO */
}

.top-bar-about {
    margin-left: -418px; /* << CONTROLE MANUAL DO ESPAÇO */
}

.top-bar-articles {
    margin-left: -318px; /* << CONTROLE MANUAL DO ESPAÇO */
}

.top-bar-phone a:hover{
    color: var(--laranja);
}

.top-bar-contact a:hover {
    color: var(--laranja);
}

.top-bar-about a:hover {
    color: var(--laranja);
}

.top-bar-articles a:hover{
    color: var(--laranja);
}

.top-bar {
    transition: transform 0.4s ease-in-out;
}

.top-bar.top-bar-hidden {
    transform: translateY(-100%);
}




/* =============================================== */
/* === ESTILOS CORRIGIDOS PARA O MEGA MENU === */
/* =============================================== */

/* Prepara o container principal (o <li> com a classe "produtos-dropdown") */
.produtos-dropdown {
    position: relative;
}

/* A caixa principal do Mega Menu */
.mega-menu {
    display: flex; /* Mantém o flex para as colunas */
    gap: 10px; /* Espaço entre as colunas */
    
    position: absolute;
    top: 120%; /* Começa um pouco mais para baixo para a animação */
    left: 50%;
    transform: translateX(-50%); /* Centraliza o mega menu */
    
    width: 900px; /* Largura fixa para melhor controle */
    max-width: 95vw; /* Garante que não ultrapasse a tela em janelas menores */
    
    background-color: #1a1a1a; /* Um preto um pouco mais suave */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-top: 3px solid var(--laranja);
    z-index: 999;

    /* ESCONDE o menu por padrão e prepara a animação */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    flex-wrap: nowrap; /* Impede que as colunas quebrem a linha em telas grandes */
}

/* Classe que o JavaScript vai adicionar para MOSTRAR o mega menu */
.produtos-dropdown.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    top: 100%; /* Sobe suavemente para a posição final */
}

/* Estilo para cada coluna */
.mega-column {
    flex: 1;
}

.mega-column h4 {
    color: var(--laranja); /* Usando sua variável de cor */
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444; /* Linha separadora sutil */
    font-size: 15px;
    font-family: var(--font-padrao);
    text-transform: uppercase;
}

/* Estilo para os links dos produtos */
.mega-column a {
    display: block; /* Garante que cada link ocupe uma linha */
    color: #ccc; /* Cinza claro para melhor leitura */
    text-decoration: none;
    padding: 6px 0;
    font-size: 14px;
    font-family: var(--font-secundaria);
    transition: all 0.3s ease;
}

.mega-column a:hover {
    color: var(--branco);
    padding-left: 10px; /* Efeito de deslize no hover */
}

/* Estilos para Mobile */
@media (max-width: 992px) {
    .mega-menu {
        width: 600px; /* Largura menor para tablets */
        flex-wrap: wrap; /* Permite que as colunas quebrem a linha */
    }
    .mega-column {
        flex-basis: 45%; /* Cada coluna ocupa quase metade da largura */
    }
}

@media (max-width: 768px) {
    .mega-menu {
        width: 95vw; /* Ocupa quase toda a largura da tela */
        flex-direction: column; /* Colunas uma embaixo da outra */
        left: 0;
        transform: translateX(0);
    }
    .produtos-dropdown {
        position: static; /* Ajuste para mobile */
    }
}


/* =============================================== */
/* === PÁGINAS INDIVIDUAIS DE PRODUTOS === */
/* =============================================== */

.header-produto-individual h1 {
    font-size: 3.5em; /* Título principal do produto */
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.header-produto-individual .product-tagline {
    font-family: var(--font-secundaria);
    font-size: 1.3em;
    max-width: 800px;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Seção de Detalhes do Produto --- */
.product-details-section {
    padding: 80px 0;
    background-color: var(--branco);
}
.product-details-section h2 {
    font-size: 2.5em;
    color: var(--preto-cinza);
    margin-bottom: 30px;
    text-align: left;
}
.product-details-section h3 {
    font-size: 1.8em;
    color: var(--laranja);
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
}
.product-details-section p {
    font-family: var(--font-secundaria);
    font-size: 1em;
    line-height: 1.8;
    color: var(--cinza-escuro);
    margin-bottom: 15px;
}
.product-details-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}
.product-details-section ul li {
    font-family: var(--font-secundaria);
    font-size: 1em;
    color: var(--cinza-escuro);
    line-height: 1.8;
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px;
}
.product-details-section ul li::before {
    content: "\f00c"; /* Ícone de check do Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--laranja);
    position: absolute;
    left: 0;
    top: 0;
}

/* Layout Grid para Imagem e Informações */
.product-grid-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.product-gallery {
    flex: 1; /* Ocupa 1 parte do espaço */
    max-width: 50%;
}
.main-product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.thumbnail-gallery {
    display: flex;
    gap: 15px;
    justify-content: center;
}
.thumbnail-gallery img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.thumbnail-gallery img:hover, .thumbnail-gallery img.active {
    border-color: var(--laranja);
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.4);
}
.product-info {
    flex: 1; /* Ocupa 1 parte do espaço */
    max-width: 50%;
}

/* Grid de Características */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 40px;
}
.feature-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    background-color: #fcfcfc;
}
.feature-item i {
    font-size: 3em;
    color: var(--laranja);
    margin-bottom: 15px;
}
.feature-item h4 {
    font-size: 1.2em;
    color: var(--preto-cinza);
    margin-bottom: 10px;
    font-weight: bold;
}
.feature-item p {
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--cinza-escuro);
}

/* --- Seção de Especificações Técnicas --- */
.product-specifications-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}
.product-specifications-section h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--preto-cinza);
    font-size: 2.2em;
}
.specs-table {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--branco);
}
.spec-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}
.spec-row:last-child {
    border-bottom: none;
}
.spec-label, .spec-value {
    padding: 15px 20px;
    font-family: var(--font-secundaria);
    font-size: 1em;
    flex: 1;
}
.spec-label {
    background-color: #f5f5f5;
    font-weight: bold;
    color: var(--preto-cinza);
}
.spec-value {
    color: var(--cinza-escuro);
    text-align: right;
}

/* --- Call to Action para Produto --- */
.call-to-action-product {
    padding: 80px 0;
    text-align: center;
    background-color: var(--laranja); /* Um laranja escuro para CTA */
    color: var(--branco);
}
.call-to-action-product h2 {
    font-size: 2.8em;
    margin-bottom: 20px;
    color: var(--branco);
}
.call-to-action-product p {
    font-family: var(--font-secundaria);
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}
.call-to-action-product .white-button {
    background-color: var(--branco);
    color: var(--laranja);
    border: 2px solid var(--branco);
    padding: 15px 40px;
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.call-to-action-product .white-button:hover {
    background-color: transparent;
    color: var(--branco);
}


/* --- Responsividade para Páginas de Produto --- */
@media (max-width: 992px) {
    .product-grid-layout {
        flex-direction: column;
        gap: 40px;
    }
    .product-gallery, .product-info {
        max-width: 100%;
    }
    .header-produto-individual h1 {
        font-size: 2.8em;
    }
    .features-grid {
        grid-template-columns: 1fr; /* Uma coluna em tablets */
    }
    .spec-label, .spec-value {
        padding: 12px 15px;
        font-size: 0.95em;
    }
}

@media (max-width: 768px) {
    .product-details-section, .product-specifications-section, .call-to-action-product {
        padding: 50px 0;
    }
    .header-produto-individual h1 {
        font-size: 2.2em;
    }
    .header-produto-individual .product-tagline {
        font-size: 1em;
    }
    .product-details-section h2 {
        font-size: 2em;
    }
    .product-details-section h3 {
        font-size: 1.5em;
    }
    .thumbnail-gallery img {
        width: 80px;
        height: 60px;
    }
    .call-to-action-product h2 {
        font-size: 2em;
    }
    .call-to-action-product p {
        font-size: 1em;
    }
    .call-to-action-product .white-button {
        padding: 12px 30px;
        font-size: 1em;
    }
}



/* 2. Estilo do "Quadrado Azul" (o painel de informações) */
.product-header-infobox {
    background-color: rgba(52, 73, 94, 0.623); /* Azul escuro com 90% de opacidade */
    -webkit-backdrop-filter: blur(10px); /* Efeito de vidro/desfoque para navegadores Webkit */
    backdrop-filter: blur(10px); /* Efeito de vidro/desfoque */
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 500px; /* Largura máxima do painel */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Estilos do texto dentro do painel */
.product-header-infobox h2 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--branco);
    text-align: left;
}

.product-header-infobox .product-description {
    font-family: var(--font-secundaria);
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
    
    color: #f0f0f0;
    text-align: left;
}

/* 4. Estilos da lista de características com checkmarks */
.product-header-infobox .product-features {
    list-style: none;
    padding: 0;
    text-align: left;
}
.product-header-infobox .product-features li {
    font-family: var(--font-secundaria);
    font-size: 1em;
    margin-bottom: 15px;
    padding-left: 35px;
    position: relative;
    color: #f0f0f0;
}
.product-header-infobox .product-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--laranja);
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1.1em;
}



/* === SEÇÃO DE PARCEIROS (EFEITO ROCHA) === */
.partners-section {
    position: relative;
    background-color: var(--branco); 
    padding: 30px 0;
    text-align: center;
    overflow: hidden;
   
}

.partners-section .container {
    position: relative;
    z-index: 2;
}

.logo-carousel {
    padding: 23px 0;
    margin-top: 7px; /* Cria um espaço entre o título e a linha de cima */
}

.partners-section h2 {
    font-family: var(--font-alumni);
    font-size: 36px;
    font-weight: 400;
    color: var(--preto);
    text-transform: uppercase;
    letter-spacing: 1.7px;
    margin-bottom: 25px;
    margin-top: 20px;
}


/* ===== SEÇÃO DE ESPECIALIDADES  ===== */
.specialties-section {
  width: 100%;
  overflow: hidden;
  padding: 60px 0;
  background-color: var(--branco);
  text-align: center;
}

.specialties-section h2 {
  font-family: var(--font-paginas-interna);
  color: var(--cinza-escuro);
  font-size: 35px;
  font-weight: 300;
  margin-bottom: 40px;
}

/* ===== Container e Carrossel ===== */
.specialties-carousel-wrapper {
  position: relative;
  width: 100%; /* agora ocupa toda a tela */
  overflow: hidden;
  margin: 0 auto;
}

.specialties-gallery-container {
  overflow: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.specialties-gallery {
  display: flex;
  gap: 6px;
  transition: transform 0.5s ease;
}

/* ===== Itens do Carrossel ===== */
.gallery-item {
  position: relative;
  flex: 0 0 20%; /* ocupa 20% da largura total — 5 imagens por tela */
  height: 430px;
  border-radius: 3px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #000;
  transition: transform 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* ===== Overlay (efeito escurecido e texto) ===== */
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
}

.gallery-item-overlay h3 {
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0 10px;
  text-align: center;
}

.gallery-item:hover .gallery-item-overlay {
  background: rgba(0, 0, 0, 0.0);
  opacity: 1;
}

/* ===== Botões do Carrossel ===== */
.specialty-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  font-size: 25px;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}

.specialty-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.specialty-prev-btn {
  left: 10px;
}

.specialty-next-btn {
  right: 10px;
}

/* ===== Responsividade ===== */
@media (max-width: 1024px) {
  .gallery-item {
    flex: 0 0 33.33%; /* 3 imagens por tela */
    height: 400px;
  }
}

@media (max-width: 768px) {
  .gallery-item {
    flex: 0 0 80%; /* 1 imagem quase cheia no mobile */
    height: 280px;
  }

  .specialties-section h2 {
    font-size: 1.8rem;
  }
}


/* =============================================== */
/* === BANNER ACIMA DAS ESPECIALIDADES === */
/* =============================================== */

.banner-specialties {
    width: 100%;
    padding: 40px 0; /* Espaçamento interno acima e abaixo da imagem */
    background-color: var(--branco); /* Ou a cor de fundo que melhor se integrar */
    text-align: center; /* Centraliza a imagem horizontalmente */
    background-image: url('../img/hero/FundoBranco.jpg'); 
}

.banner-specialties .container {
    max-width: 1200px; /* Adapte à largura máxima do seu layout */
    margin: 0 auto; /* Centraliza o conteúdo (a imagem) */
}

.banner-specialties .banner-image {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do container */
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Remove espaços extras abaixo da imagem */
    border-radius: 10px; /* Opcional: bordas arredondadas para a imagem */
}

/* Para telas menores */
@media (max-width: 768px) {
    .banner-specialties {
        padding: 20px 0;
    }
}


/* =============================================== */
/* === SEÇÃO DE ESTATÍSTICAS E EXPERIÊNCIA === */
/* =============================================== */

.stats-section {
    padding: 80px 0;
    background-color: var(--branco);
    background-image: url('../img/hero/FundoBranco.jpg'); 
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    position: relative; /* Para o Intersection Observer */
}

.stats-title {
    font-size: 53px;
    font-weight: 300; /* Fonte mais fina */
    color: var(--preto);
    margin-bottom: 60px;
    font-family: var(--font-alumni);
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha */
    gap: 70px;
}

.stat-item {
    flex: 1;
    min-width: 200px;
}

.stat-number {
    font-size: 70px;
    font-weight: 500;
    color: var(--laranja);
    font-family: var(--font-alumni);
    display: block;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px var(--preto);
}

.stat-label {
    font-size: 23px;
    color: var(--preto);
    font-family: var(--font-alumni);
    margin: 0;
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .stats-section {
        padding: 50px 0;
    }
    .stats-title {
        font-size: 28px;
    }
    .stat-item {
        flex-basis: calc(50% - 20px);
        margin-bottom: 30px;
    }
    .stat-number {
        font-size: 48px;
    }
}



/* =============================================== */
/* === SEÇÃO DE ESPECIALIDADES COM OVERLAY (FINAL) === */
/* =============================================== */

.specialties-section {
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}
/* ... (Seu estilo para .specialties-section h2 continua o mesmo) ... */

.specialties-carousel-wrapper {
    position: relative;
}
/* ... (Seu estilo para o container do carrossel e as setas continua o mesmo) ... */


/* NOVO ESTILO DOS ITENS DA GALERIA */
.gallery-item {
    position: relative;
    height: 450px;
    border-radius: 5px;
    display: block;
    text-decoration: none;
    overflow: hidden; /* Importante para o overlay */
    cursor: pointer;
    flex: 0 0 23%; /* Para 5 itens visíveis, ajuste se necessário */
    margin: 0 0px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* O OVERLAY (a camada laranja com o conteúdo) */
.specialty-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(249, 153, 46, 0.4); /* Laranja com 90% de opacidade */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    opacity: 0; /* Começa invisível */
    transition: opacity 0.4s ease;
}

/* Conteúdo dentro do overlay */
.specialty-icon {
    max-width: 70px;
    height: auto;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
    transform: translateY(20px); /* Começa um pouco para baixo */
    filter: brightness(0) invert(1);
}

.specialty-title {
    color: var(--branco);
    font-size: 22px;
    font-weight: bold;
    font-family: var(--font-paginas-internas);
    padding: 0 15px;
    transition: transform 0.4s ease;
    transform: translateY(20px); /* Começa um pouco para baixo */
}

/* EFEITO AO PASSAR O MOUSE (HOVER) */
.gallery-item:hover .specialty-overlay {
    opacity: 1; /* Torna o overlay visível */
}

.gallery-item:hover .specialty-icon,
.gallery-item:hover .specialty-title {
    transform: translateY(0); /* Move os elementos para a posição final */
}

.gallery-item:hover img {
    transform: scale(1.1); /* Efeito de zoom na imagem de fundo */
}


/* =============================================== */
/* === SEÇÃO DE VÍDEO (PÁGINAS INTERNAS) === */
/* =============================================== */

.video-section {
    padding: 60px 0;
    background-color: #f5f7fa; /* Fundo cinza claro para a seção */
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px; /* Largura máxima do vídeo */
    margin: 0 auto; /* Centraliza o vídeo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden; /* Garante que o vídeo respeite as bordas arredondadas */
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block; /* Remove espaços extras */
}




/* =============================================== */
/* === BOTÃO "VOLTAR AO TOPO" === */
/* =============================================== */

#back-to-top-btn {
    position: fixed; /* Fica fixo na tela */
    bottom: 30px;
    right: 30px;
    
    width: 45px;
    height: 45px;
    background-color: var(--preto);
    color: var(--laranja);
    
    border-radius: 50%; /* Deixa o botão redondo */
    text-decoration: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
    z-index: 999;

    /* Esconde por padrão e prepara a animação de entrada */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Começa um pouco para baixo */
    transition: all 0.4s ease-in-out;
}

/* Classe que o JavaScript vai adicionar para mostrar o botão */
#back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Sobe para a posição final */
}

#back-to-top-btn:hover {
    background-color: var(--laranja);
    transform: translateY(-2px);
    color: var(--branco);
}




/* =============================================== */
/* === PÁGINA DE EXPERTISE === */
/* =============================================== */

.expertise-section {
    padding: 80px 0;
    background-color: var(--preto);
    background: linear-gradient(to bottom, var(--preto),var(--preto), var(--preto), var(--preto), var(--preto), var(--preto), var(--branco), var(--branco) );
}
.expertise-intro {
    font-family: var(--font-alumni);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.7;
    letter-spacing: 1px;
    color: var(--preto);
    margin: 0 auto 60px auto;
    text-align: justify;
    text-transform: uppercase;
}
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 22px; /* Mantém o espaçamento para o lado */
    row-gap: 60px;
}
.expertise-card {
    display: block;
    text-decoration: none;
    background-color: var(--preto);
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 2px solid var(--laranja);
}
.expertise-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.expertise-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-bottom: 1px solid var(--laranja);
}
.expertise-card-content {
    padding: 27px;
    padding-right: 13px;
    padding-left: 13px;
}
.expertise-card-content h3 {
    font-family: var(--font-alumni);
    font-size:24px;
    color: var(--laranja);
    margin-bottom: 10px;
    text-align: center;
}

.expertise-card-content p {
    font-family: var(--font-secundaria);
    color: var(--branco-tingido);
    font-size: large;
    line-height: 1.5;
    text-align: center;
}


/* =============================================== */
/* === SEÇÃO DE INTRODUÇÃO DA EXPERTISE (CORRIGIDO) === */
/* =============================================== */

/* Aplica a cor de fundo APENAS na faixa de introdução */
.expertise-intro-banner {
    background-color: var(--branco); /* << MUDE A COR AQUI */
    padding: 48px 0;
}

/* Ajusta a cor do texto DENTRO da faixa para que ele fique visível */
.expertise-intro-banner .expertise-intro {
    color: var(--preto); 
    opacity: 0.9;
    margin-bottom: 0;
}


/* Seção de Vídeos */
.video-gallery-section {
    padding:30px 0;
    background-color: var(--preto);
    border-top: 3px solid var(--laranja);
    border-bottom: 3px solid var(--laranja);
}

.video-gallery-section h2 {
    text-align: center;
    font-family: var(--font-alumni);
    font-size: 45px;
    margin-bottom: 70px;
    font-weight: 500;
    color: var(--branco);
    opacity: 0.9;
    text-shadow: 1px 1px 1px var(--laranja);
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.video-item {
    position: relative;
    cursor: pointer;
}

.video-item video {
  width: 100%;
  height: 350px; /* 🔸 controla o tamanho do player */
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  border: 1px solid var(--laranja);
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.video-item:hover .video-overlay {
    opacity: 0;
}

.video-overlay i {
    color: var(--laranja);
    font-size: 50px;
}

.video-title {
    margin-top: 18px;
    font-family: var(--font-alumni);
    font-weight: bold;
    text-align: center;
}

@media (max-width: 768px) {
    .video-grid { grid-template-columns: 1fr; }
}



/* ================================================= */
/* === ESTILOS PARA A NOVA SEÇÃO DE CONTATO === */
/* ================================================= */

.contact-form-section {
    padding: 0; /* Removemos o padding para as colunas tocarem as bordas */
    overflow: hidden; /* Garante que nada vaze da seção */
}

.contact-grid {
    display: flex;
    background-color: var(--preto); /* Cor de fundo de fallback */
}

/* --- Coluna da Imagem (Esquerda) --- */
.contact-image-column {
    flex-basis: 60%; /* Ocupa 50% da largura */
    min-height: 200px; /* Altura mínima para a seção */
    background-size: cover;
    background-position: center;
    /* A MÁGICA DO OVERLAY ACONTECE AQUI! 
       1. O gradiente vai do seu laranja para um roxo.
       2. A imagem é a segunda camada.
       Troque 'img/sua-imagem-de-contato.jpg' pela imagem que você quer usar.
    */
    background-image: linear-gradient(to right, rgba(245, 130, 32, 0.8), rgba(0, 0, 0, 0.85)), url('../img/sobre-imagem.JPG');
}

/* --- Coluna do Formulário (Direita) --- */
.contact-form-column {
    flex-basis: 50%; /* Ocupa os outros 50% */
    background-color: var(--preto); /* Cor azul escura do modelo */
    padding: 8px 10px;
    color: var(--branco);
    font-family: var(--font-alumni);
}

.contact-form-column h2 {
    font-size: 1.9rem;
    margin-bottom: 40px;
    text-align: center;
    padding-top: 25px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px 0;
    color: var(--branco);
    font-size: 16px;
    font-family: var(--font-alumni); /* Usa a mesma fonte do resto do site */
    outline: none; /* Remove a borda azul ao focar */
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--laranja); /* Destaque laranja ao focar */
}

.form-group textarea {
    resize: vertical; /* Permite que o usuário redimensione apenas na vertical */
}

.btn-submit {
    font-family: var(--font-alumni);
    font-size: 15px;
    background: transparent;
    border: 2px solid var(--branco);
    color: var(--branco);
    padding: 12px 35px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background-color: var(--laranja);
    color: var(--branco); /* Cor de fundo da coluna */
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
    .contact-grid {
        flex-direction: column; /* Coloca as colunas uma sobre a outra */
    }

    .contact-image-column {
        min-height: 300px; /* Reduz a altura da imagem no mobile */
    }

    .contact-form-column {
        padding: 40px 30px;
    }
}


/* ================================================= */
/* === ESTILOS PARA A PÁGINA DE CONTATO === */
/* ================================================= */

/* Bloco 1: Hero Section com Formulário */
.contact-hero-section .contact-grid {
    display: flex;
    padding-top: 90px;
}

.contact-hero-section .contact-image-column {
    flex-basis: 51%;
    min-height: 550px;
    background-size: cover;
    background-position: center;
    /* Troque pela imagem que desejar */
    background-image: linear-gradient(to right, rgba(245, 130, 32, 0.8), rgba(0, 0, 0, 0.89)), url('../img/sobre-imagem.JPG'); 
}

.contact-hero-section .contact-form-column {
    flex-basis: 50%;
    background-color: var(--preto);
    padding: 60px 50px;
    color: var(--branco);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-hero-section .contact-form-column h2 {
    font-size: 2.6rem;
    margin-bottom: 15px;
}

.contact-hero-section .contact-form-column p {
    margin-bottom: 30px;
    font-size: 0.7rem;
    font-family: var(--font-secundaria);
    opacity: 0.9;
    line-height: 1.5;
    text-align: center;
}


/* Bloco 2: Seção de Detalhes de Contato */
.contact-details-section {
    padding: 80px 0;
    background-color: var(--branco);
}

.contact-details-section .contact-info h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    font-family: var(--font-alumni);
    color: var(--preto);
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    align-items: center;
}

.info-item i {
    font-size: 30px;
    color: var(--laranja);
    margin-right: 5px;
    width: 30px; /* Garante alinhamento */
    text-align: center;
}

.info-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.4rem;
    color: var(--preto);
    font-family: var(--font-alumni);
}

.info-item p {
    margin: 0;
    line-height: 1.6;
    color: var(--preto-cinza);
    font-family: var(--font-secundaria);
}


/* Bloco 3: Seção do Mapa */
.map-section {
    padding: 0;
    line-height: 0; /* Remove espaço extra abaixo do iframe */
}


/* --- RESPONSIVIDADE PARA A PÁGINA DE CONTATO --- */
@media (max-width: 992px) {
    .contact-hero-section .contact-grid {
        flex-direction: column;
    }

    .contact-hero-section .contact-image-column {
        min-height: 300px;
    }

    .contact-hero-section .contact-form-column {
        padding: 40px 30px;
    }

    .contact-details-section {
        padding: 60px 0;
    }
}



/* ================================================= */
/* === ESTILOS PARA A PÁGINA DE DENÚNCIA === */
/* ================================================= */

/* Bloco Principal da Página de Denúncia */
.denuncia-hero-section .contact-grid {
    display: flex;
    padding-top: 100px;
}


/* Coluna da Imagem com um visual mais sóbrio */
.denuncia-hero-section .denuncia-image {
    flex-basis: 52%;
    min-height: 650px; /* Um pouco mais alta para acomodar mais campos */
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(to right, rgba(245, 130, 32, 0.8), rgba(0, 0, 0, 0.94)), url('../img/sobre-imagem.JPG'); 
}

/* Coluna do Formulário */
.denuncia-hero-section .contact-form-column {
    flex-basis: 50%;
    background-color: var(--preto); 
    padding: 50px;
    color: var(--branco);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Estilo do checkbox de anonimato */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

.checkbox-group label {
    font-size: 12px;
    color: var(--branco);
    font-family: var(--font-secundaria);
}

/* Estilo para o campo de upload de arquivo */
.form-group input[type="file"] {
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-family: var(--font-secundaria);
}

/* Estilo para o campo de select */
.form-group select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px 5px; /* Ajuste no padding */
    color: var(--branco);
    font-size: 13px;
    font-family: var(--font-secundaria);
    outline: none;
}

.form-group select option {
    background-color: var(--preto);
}


.denuncia-hero-section .contact-form-column h2 {
    font-size: 2.6rem;
    margin-bottom: 15px;
    text-align: center;
}

.denuncia-hero-section .contact-form-column p {
    margin-bottom: 30px;
    font-size: 0.7rem;
    font-family: var(--font-secundaria);
    opacity: 0.9;
    line-height: 1.5;
    text-align: center;
}


/* --- RESPONSIVIDADE PARA A PÁGINA DE DENÚNCIA --- */
@media (max-width: 992px) {
    .denuncia-hero-section .contact-grid {
        flex-direction: column;
    }

    .denuncia-hero-section .denuncia-image {
        min-height: 300px;
    }

    .denuncia-hero-section .contact-form-column {
        padding: 40px 30px;
    }
}




/* Container da seção */
.specialties-section {
  width: 100%;
  background-color: var(--laranja);
  overflow: hidden;
  border-top: 1px solid var(--preto);
  border-bottom: 1px solid var(--preto);
}

.specialties-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Cada bloco (linha) */
.specialty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px; /* altura base no desktop */
}

/* Alterna posição da imagem quando contém .reverse */
.specialty.reverse {
  direction: rtl; /* facilita alternância */
}
.specialty.reverse .specialty-image,
.specialty.reverse .specialty-content {
  direction: ltr; /* anula direção do conteúdo interno */
}

/* Imagem como background cobrindo a metade */
.specialty-image {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

/* Conteúdo textual */
.specialty-content {
  padding: 80px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff; /* se quiser o fundo creme altere para var(--hero-bg) */
  background-image: url(../img/hero/FundoBranco.jpg);
}

/* rótulo pequeno */
.specialty-label {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--preto);
  margin-bottom: 12px;
  font-family: var(--font-alumni);
}

/* número grande */
.specialty-number {
  font-size: 6.1rem;
  line-height: 0.9;
  color: var(--preto);
  font-weight: 300;
  margin-bottom: 12px;
  letter-spacing: -4px;
  font-family: var(--font-alumni);
}

/* título grande */
.specialty-title {
  font-size: 4.2rem;
  margin: 0 0 22px 0;
  color: #fd9115;
  font-weight: 500;
  letter-spacing: -1px;
  max-width: 520px;
  font-family: var(--font-alumni);
}

/* CTA */
.specialty-cta {
  display: inline-block;
  background-color: var(--preto);           /* fundo preto */
  color: var(--branco);                      /* texto branco */
  border: 2px solid var(--laranja);        /* borda laranja */
  font-weight: 600;
  text-transform: none;             /* mantém letras normais, não todas maiúsculas */
  font-size: 0.95rem;
  padding: 8px 20px;
  border-radius: 4px;               /* cantos levemente arredondados */
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: 20px;
  text-align: center;
}

.specialty-cta:hover {
  background-color: var(--laranja);        /* fundo laranja no hover */
  color: var(--preto);                      /* texto preto */
  border-color: var(--laranja);
}

/* Padrão: elementos invisíveis até a animação começar */
.animate-left,
.animate-right {
  opacity: 0;
  transform: translateX(100px); /* movimento padrão */
  transition: all 0.8s ease;
}

.animate-left {
  transform: translateX(-100px); /* entra da esquerda */
}

/* Quando o elemento entra na tela */
.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

/* RESPONSIVO: empilha no mobile */
@media (max-width: 992px) {
  .specialty {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .specialty.reverse {
    direction: ltr;
  }
  .specialty-image {
    min-height: 220px;
  }
  .specialty-content {
    padding: 28px 5vw;
  }
  .specialty-number {
    font-size: 2.2rem;
  }
  .specialty-title {
    font-size: 1.6rem;
    margin-bottom: 14px;
    max-width: 100%;
  }
}

/* Pequenos refinamentos visuais */
.specialty-content p { color: #444; line-height: 1.6; }


/* =============================================== */
/* === ESTILOS PARA LINKS EXTRAS DO RODAPÉ === */
/* =============================================== */

/* Container que agrupa os links */
.footer-links-extra {
    margin-top: 20px; /* Espaço acima dos links */
    display: flex;
    flex-direction: column; /* Coloca os links um embaixo do outro */
    align-items: flex-start; /* Alinha os links à esquerda */
    gap: 10px; /* Espaço vertical entre os links */
}

/* Estilo individual de cada link */
a.footer-link {
    color: var(--branco-tingido);
    text-decoration: none;
    font-family: var(--font-secundaria);
    font-size: 13px;
    padding-bottom: 2px;
    border-bottom: 1px dotted var(--cinza-claro);
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

a.footer-link:hover {
    color: var(--laranja);
    border-bottom-color: var(--laranja);
}


/* =============================================== */
/* === PÁGINA DE DETALHE DA EXPERTISE === */
/* =============================================== */

/* Seção de Galeria de Fotos */
.photo-gallery-section {
    padding: 80px 0;
    background-image: url(../img/hero/FundoBranco.jpg);
}

.photo-gallery-section h2 {
    text-align: center;
    font-family: var(--font-alumni);
    color: var(--preto);
    font-weight: 500;
    font-size: 50px;
    margin-bottom: 15px;
    background-color: var(--branco);
    text-transform: uppercase;
}

.section-subtitle {
    background-color: var(--branco);
    text-align: center;
    font-family: var(--font-paginas-internas);
    color: var(--preto-cinza);
    margin-bottom: 40px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gallery-grid img {
    width: 365px;
    height: 390px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid var(--preto);
    gap: 20px;
    cursor: pointer;
}

.gallery-grid img:hover {
    transform: scale(1.02);
}

/* Seção de Chamada para Ação (CTA) */
.cta-expertise {
    background-color: var(--preto-cinza);
    color: var(--branco);
}
.cta-expertise .btn {
    background-color: var(--laranja);
    color: var(--branco);
}
.cta-expertise .btn:hover {
    background-color: var(--branco);
    color: var(--preto-cinza);
}


/* =============================================== */
/* === SEÇÃO DE EXPLICAÇÃO COM IMAGEM E TÓPICOS === */
/* =============================================== */

.explanation-section {
    padding: 80px 0;
    background-color: var(--branco); /* Ou a cor que preferir */
}

.explanation-grid {
    display: flex;
    gap: 50px; /* Espaçamento entre o texto e a imagem */
    align-items: flex-start; /* Alinha o conteúdo ao topo */
}

.explanation-text {
    flex: 1; /* Ocupa metade do espaço */
}
.explanation-text .section-title {
    font-family: var(--font-alumni);
    font-size: 37px;
    font-weight: 500;
    color: var(--preto);
    margin-bottom: 30px;
    line-height: 1.3;
    text-transform: uppercase;
}
.explanation-text .topic {
    margin-bottom: 25px; /* Espaço entre cada tópico */
}
.explanation-text .topic h3 {
    font-family: var(--font-alumni);
    font-size: 27px;
    font-weight: bold;
    color: var(--laranja);
    margin-bottom: 8px;
}
.explanation-text .topic p {
    font-family: var(--font-paginas-internas);
    font-size: 15px;
    color: var(--preto);
    line-height: 1.7;
}

.explanation-image {
    flex: 1; /* Ocupa a outra metade */
    display: flex; /* Para centralizar a legenda */
    flex-direction: column;
    align-items: center;
}
.explanation-image img {
    width: 108%;
    object-fit: cover;
    height: 700px;
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 1px solid var(--preto);
}
.explanation-image .image-caption {
    font-family: var(--font-secundaria);
    font-size: 14px;
    color: var(--preto);
    margin-top: 15px;
    text-align: center;
    max-width: 80%; /* Limita a largura da legenda */
}


/* --- Responsividade --- */
@media (max-width: 992px) {
    .explanation-grid {
        flex-direction: column; /* Empilha o texto e a imagem */
        gap: 40px;
    }
    .explanation-text .section-title {
        text-align: center;
    }
}


/* =============================================== */
/* === SEÇÃO DE IMPLEMENTAÇÕES (CARDS COM FOTOS) === */
/* =============================================== */

.implementations-section {
    padding: 80px 0;
    /* Adaptei para uma cor média, como na sua imagem de referência.
       Você pode usar var(--branco) ou #f5f7fa se preferir. */
    background-color: var(--branco); /* Cor de fundo ligeiramente azul-acinzentada */
    text-align: center;
}

.implementations-section .section-title {
    font-family: var(--font-alumni);
    font-size: 40px;
    font-weight: 500;
    color: var(--preto);
    margin-bottom: 15px;
}

.implementations-section .section-subtitle {
    font-family: var(--font-paginas-internas);
    color: var(--preto-cinza);
    margin-bottom: 50px;
    font-size: 17px;
}

.implementations-grid {
    display: grid;
    /* Quatro colunas com tamanho flexível, mínimo de 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Espaçamento entre os cards */
}

.implementation-card {
    background-color: var(--branco);
    border-radius: 3px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* Garante que a imagem arredondada não vaze */
    text-align: left; /* Conteúdo interno alinhado à esquerda */
    padding-bottom: 25px; /* Espaçamento na parte inferior */
    border: 1px solid var(--preto);
}

.implementation-card img {
    width: 100%;
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Recorta para preencher sem distorcer */
    display: block; /* Remove espaços indesejados abaixo da imagem */
    margin-bottom: 20px;
}

.implementation-card h3 {
    font-family: var(--font-secundaria);
    font-size: 20px;
    font-weight: bold;
    color: var(--azul-escuro); /* Cor do título */
    margin: 0 20px 10px 20px; /* Espaçamento interno */
}

.implementation-card p {
    font-family: var(--font-secundaria);
    font-size: 15px;
    color: var(--preto);
    line-height: 1.6;
    margin: 0 20px; /* Espaçamento interno */
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .implementations-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 2 colunas em telas menores */
        gap: 20px;
    }
    .implementations-section .section-title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .implementations-grid {
        grid-template-columns: 1fr; /* 1 coluna em telas muito pequenas */
    }
}




/* =============================================== */
/* === NOVA SEÇÃO SCAN TUNNEL (LAYOUT ALTERNADO) === */
/* =============================================== */

.scan-tunnel-section {
    padding: 80px 0;
    background-color: var(--branco); /* Fundo branco para esta seção */
}

/* Títulos da seção */
.scan-tunnel-section .section-title,
.scan-tunnel-section .section-subtitle {
    text-align: center;
    font-family: var(--font-paginas-internas);
    font-size: 13px;
    color: var(--preto);
}
.scan-tunnel-section .section-title {
    font-family: var(--font-alumni);
    font-size: 45px;
    font-weight: 400;
    margin-bottom: 15px;
    color: var(--preto);
}
.scan-tunnel-section .section-subtitle {
    max-width: 700px;
    margin: 0 auto 60px auto;
    color: var(--preto);
}


/* Layout dividido (container de cada item) */
.split-layout {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px; /* Espaço entre cada etapa */
}

/* Inverte a ordem para o layout alternado */
.split-layout.reverse {
    flex-direction: row-reverse;
}

/* Coluna de Imagem */
.split-image {
    flex: 1; /* Ocupa metade do espaço */
}
.split-image img {
    width: 580px;
    height: 480px;
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Coluna de Texto */
.split-text {
    flex: 1; /* Ocupa a outra metade */
}
.split-text h3 {
    font-family: var(--font-alumni);
    font-size: 38px;
    color: var(--laranja);
    margin-bottom: 20px;
}
.split-text p {
    font-family: var(--font-secundaria);
    font-size: 16px;
    line-height: 1.8;
    color: var(--cinza-escuro);
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .split-layout,
    .split-layout.reverse {
        flex-direction: column; /* Empilha as colunas em telas menores */
        text-align: center;
    }
}


/* ================ SEÇÃO SCAN TUNNEL ================= */


.scan-tunnel-section {
  margin: 0;
  padding: 0;
}

.scan-tunnel-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: #fafcff;
}

/* Lado da imagem */
.scan-tunnel-image {
  flex: 1;
}

.scan-tunnel-image img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
   border-top: 2px solid var(--laranja);
   border-bottom: 2px solid var(--laranja);
}

/* Lado do texto */
.scan-tunnel-text {
  flex: 1;
  padding: 80px;
  background-color: var(--branco);
  color: var(--preto);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--cinza-claro);
  border-bottom: 1px solid var(--cinza-claro);
  border-left: 1px solid var(--cinza-claro);
  border-right: 1px solid var(--cinza-claro);
  background-image: url(../img/hero/FundoBranco.jpg);
}

.scan-tunnel-subtitle {
  font-size: 25px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  font-family: var(--font-alumni);
  color: var(--laranja);
}


.scan-tunnel-title {
  font-size: 45px;
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0 25px 0;
  font-family: var(--font-alumni);
}

.scan-tunnel-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 500px;
  font-family: var(--font-secundaria);
}

.scan-tunnel-section.left-image {
  flex-direction: row-reverse;
}


/* === BLOCO INTERNO === */
.scan-tunnel-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* BLOCO INVERTIDO (imagem à esquerda) */
.scan-tunnel-block.invertido {
  flex-direction: row-reverse;
}

/* Garante que os blocos fiquem empilhados (um abaixo do outro) */
.scan-tunnel-section {
  display: block;
}

/* Responsivo (mantém padrão no mobile) */
@media (max-width: 900px) {
  .scan-tunnel-block,
  .scan-tunnel-block.invertido {
    flex-direction: column;
  }
}


/* === RESPONSIVO === */
@media (max-width: 900px) {
  .scan-tunnel-section {
    flex-direction: column;
  }

  .scan-tunnel-image img {
    height: 50vh;
  }

  .scan-tunnel-text {
    padding: 50px 25px;
    text-align: center;
  }

  .scan-tunnel-description {
    margin: 0 auto 30px auto;
  }
}




/* --- ESTILOS PARA A FAIXA DE VÍDEO --- */

.video-banner {
    position: relative;
    width: 100%;
    height: 65vh; /* Define a altura da faixa (70% da altura da tela). Ajuste se precisar. */
    overflow: hidden;
    background-color: #333; /* Cor de fundo enquanto o vídeo carrega */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--cinza-escuro);
}

#droneVideo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz o vídeo cobrir todo o espaço sem distorcer */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Camada de trás */
    border-bottom: 15px solid var(--branco);
}


/* Ajuste para telas de celular */
@media (max-width: 768px) {
    .video-banner {
        height: 50vh; /* Faixa fica um pouco mais baixa no celular */
    }
    .video-banner .video-texto h2 {
        font-size: 1.8rem; /* Texto menor no celular */
    }
}



.section-category-title {
    font-family: var(--font-alumni);
    font-size: 42px;
    letter-spacing: 1px;
    font-weight: 300;
    color: var(--branco);
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-align: center;
    text-shadow: 0px 1px 2px var(--preto-diferente);
}


/* =============================================== */
/* === AJUSTE PARA PÁGINAS SEM HEADER DE IMAGEM === */
/* =============================================== */

/* Adiciona espaçamento no topo para compensar o menu fixo */
.no-header-padding {
    padding-top: 150px; /* Ajuste este valor conforme a altura do seu menu */
}

/* Opcional: Se quiser um fundo diferente para essas páginas */
.no-header-padding {
    background-color: var(--branco); /* Exemplo de cor de fundo leve */
}




/* ... seus estilos anteriores para .gallery-image ... */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.gallery-image {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.gallery-image img {
  width: 100%;
  height: 320px; /* Altura padrão para todas as imagens */
  object-fit: cover; /* Corta o excesso e preenche o espaço */
  display: block;
  transition: transform 0.3s ease;
}

/* Efeito de zoom leve ao passar o mouse */
.gallery-image:hover img {
  transform: scale(1.0);
}

/* Overlay laranja translúcido */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(249, 153, 46, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Ícone central */
.gallery-overlay i {
  color: var(--branco);
  font-size: 35px;
  transform: scale(0.5);
  transition: transform 0.3s ease;
}

/* Hover: mostra o overlay e o ícone */
.gallery-image:hover .gallery-overlay {
  opacity: 1;
}

.gallery-image:hover .gallery-overlay i {
  transform: scale(1);
}





/* =============================================== */
/* === ESTILOS PARA A PÁGINA "ESTUDOS DE ENGENHARIA" === */
/* =============================================== */

/* --- Seção Hero Dividida --- */
.split-hero-section {
    height: 100vh; /* Ocupa a tela inteira */
    min-height: 600px;
    background-color: var(--branco);
    position: relative;
    overflow: hidden; /* Para garantir que a imagem não vaze */
}

.split-hero-container {
    display: flex;
    height: 100%;
}

/* Coluna da Imagem (Esquerda) */
.split-hero-image {
    flex: 1.8; /* Ocupa um pouco mais da metade */
    height: 100%;
}

.split-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o espaço */
}

/* Coluna do Conteúdo (Direita) */
.split-hero-content {
    flex: 0.8; /* Ocupa o restante do espaço */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px; /* Espaçamento interno generoso */
    background-color: var(--branco); /* Um fundo bem leve para destacar */
    background-image: url(../img/hero/FundoBranco.jpg);
    border-bottom: 1px solid var(--branco-tingido);
    border-left: 1px solid var(--branco-tingido);
}

.split-hero-pretitle {
    font-family: var(--font-alumni);
    font-size: 20px;
    color: var(--preto);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 170px;
    margin-bottom: 20px;
    font-weight: 400;
}

.split-hero-title {
    font-family: var(--font-alumni); /* Ou sua fonte de títulos mais elegante */
    font-size: 94px; /* Tamanho grande e impactante */
    line-height: 1.1;
    color: var(--preto);
    margin-bottom: 40px;
    margin-top: 50px;
    font-weight: 400;
}

.highlight-number {
    color: var(--laranja); /* Destaca o número com a cor da marca */
    font-family: var(--font-alumni);
    text-shadow: 1px 1px 1px var(--preto);
}

/* --- Seção de Detalhes --- */
.details-section {
    padding: 100px 0;
    background-color: var(--branco);
     background-image: url(../img/hero/FundoBranco.jpg);
}

.details-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Texto ocupa mais espaço que a lista */
    gap: 60px;
    align-items: start;
}

.details-text h2 {
    font-family: var(--font-alumni);
    font-size: 38px;
    color: var(--laranja);
    margin-bottom: 30px;
    text-transform: uppercase;
}

.details-text p {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-paginas-internas);
    line-height: 1.8;
    color: var(--preto);
    margin-bottom: 20px;
}

.details-topics {
    background-color: var(--branco);
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid var(--preto-cinza);
}

.details-topics h3 {
    font-size: 24px;
    color: var(--laranja);
    margin-bottom: 25px;
}

.details-topics ul {
    list-style: none;
    padding: 0;
}

.details-topics ul li {
    font-size: 18px;
    color: var(--preto);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.details-topics ul li i {
    color: var(--laranja);
    margin-right: 15px;
    font-size: 16px;
}

/* Responsividade */
@media (max-width: 992px) {
    .split-hero-container,
    .details-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    .split-hero-image,
    .split-hero-content {
        flex: auto;
        width: 100%;
        height: 50vh; /* Divide a tela em duas no mobile */
    }
    .split-hero-content {
        padding: 40px;
        align-items: center;
        text-align: center;
    }
    .split-hero-title {
        font-size: 48px;
    }
}



/* === SEÇÃO DE CONTATO === */
.contact-details-section {
  padding: 80px 0;
  background-color: var(--branco);
  background-image: url(../img/hero/FundoBranco.jpg);
}

.contact-title {
  text-align: center;
  font-family: var(--font-alumni);
  font-size: 50px;
  margin-bottom: 60px;
  font-weight: 500;
  color: var(--preto);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  border: 1px solid var(--cinza-escuro);
  border-radius: 12px;
  padding: 40px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.contact-card {
  text-align: center;
  padding: 20px;
  border-right: 1px solid var(--cinza-escuro);
}

.contact-card:last-child {
  border-right: none;
}

.contact-card i {
  font-size: 45px;
  color: var(--laranja);
  margin-bottom: 15px;
}

.contact-card h3 {
  font-family: var(--font-alumni);
  font-size: 25px;
  font-weight: bold;
  color: var(--preto);
  margin-bottom: 10px;
}

.contact-card p {
  color: var(--preto-cinza);
  font-family: var(--font-paginas-internas);
  font-size: 15px;
  margin-bottom: 15px;
  line-height: 1.5;
}

.contact-link {
  font-size: 15px;
  color: var(--preto);
  text-decoration: none;
  transition: 0.3s ease;
  font-family: var(--font-paginas-internas);
}

.contact-link:hover {
  color: var(--laranja);
}

.contact-card .icon-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px auto;
  background-color: var(--preto);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  transition: all 0.3s ease;
}

.contact-card:hover .icon-circle {
  background-color: #000;
  transform: scale(1.06);
}


/* Responsividade */
@media (max-width: 1024px) {
  .contact-cards {
    grid-template-columns: 1fr 1fr;
  }

  .contact-card {
    border-right: none;
    border-bottom: 1px solid #dcdcdc;
  }

  .contact-card:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}



/* === MAPA === */
.map-section {
  background-color: var(--branco);
  padding: 60px 0;
  display: flex;
  flex-direction: column; /* O SEGREDO: Isso manda um ficar em cima do outro */
  align-items: center;    /* Isso centraliza tudo no meio da tela */
  justify-content: center;
  background-image: url(../img/hero/MapaFundo.jpg);
}

.map-container {
  width: 85%; /* controla a largura total */
  max-width: 1000px; /* impede que ocupe demais em telas grandes */
  height: 420px; /* altura reduzida */
  border-radius: 15px;
  overflow: hidden; /* arredonda o mapa */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--cinza-escuro);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* --- Estilos para o Cabeçalho do Mapa --- */

.map-header-info {
    text-align: center; /* Centraliza tudo */
    padding-bottom: 30px; /* Espaço entre o texto e o mapa */
    padding-top: 40px;    /* Espaço acima do texto */
}

.map-title {
    font-family: var(--font-alumni); /* Sua fonte de títulos */
    font-size: 3.2rem;
    color: var(--preto); 
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.map-address {
    font-family: var(--font-alumni);
    font-size: 1.9rem;
    color: var(--preto);
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 5px;
}

.map-address strong {
    font-size: 1.8rem;
    color: var(--preto-cinza);
    display: block; /* Faz o nome da empresa ficar na linha de cima sozinho */
    margin-bottom: 5px;
    font-weight: 600;

}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .map-title {
        font-size: 2.2rem;
    }
    .map-address {
        font-size: 1.1rem;
        padding: 0 15px;
    }
}

/* Responsivo */
@media (max-width: 768px) {
  .map-container {
    width: 95%;
    height: 300px;
  }
}




/* === Barra de Acessibilidade === */
.accessibility-bar {
  position: fixed;
  top: 150px;
  right: 20px;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  padding: 8px 15px;
  gap: 10px;
  z-index: 9999;
  font-family: var(--font-paginas-internas);
  border: 1px solid var(--preto);
}

/* Botões de fonte */
.accessibility-bar button {
  border: none;
  background: transparent;
  color: var(--preto);
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s;
}

.accessibility-bar button:hover {
  color: #ff8800;
}




/* === Switch de contraste === */
.contrast-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.contrast-switch input {
  display: none;
}

.contrast-switch .slider {
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  position: relative;
  transition: background-color 0.3s;
}

.contrast-switch .slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Quando o botão estiver ativo */
.contrast-switch input:checked + .slider {
  background-color: var(--preto);
}

.contrast-switch input:checked + .slider::before {
  transform: translateX(20px);
}

.label-text {
  font-size: 14px;
  color: var(--preto);
}




/* === Modo Alto Contraste === */
body.high-contrast {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast a {
  color: var(--laranja) !important;
}


body.high-contrast header,
body.high-contrast footer,
body.high-contrast section{
  background-color: var(--preto) !important;
  border-color: var(--branco) !important;
}

/* Imagens mais visíveis e equilibradas no modo contraste */
/* Imagens mais visíveis e equilibradas no modo contraste */
body.high-contrast img {
  filter: grayscale(100%) !important; /* Deixa a imagem em P&B */
  opacity: 1;            /* Mantém leve suavização */
  border: 2px solid #fff;  /* Dá contraste com fundo escuro */
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* Opcional: se quiser que imagens de fundo fiquem visíveis também */
body.high-contrast [style*="background-image"] {
  filter: grayscale(100%) !important; /* Aplica P&B em fundos */
  opacity: 1;
}

/* ====================================================== */
/* ↓↓↓ ADIÇÕES PARA CORRIGIR AS CORES DOS TEXTOS ↓↓↓ */
/* ====================================================== */

/* 1. EXCEÇÃO para seções de fundo claro (capacete, "Estudos de...") */
/* Lembre-se de adicionar a classe "fundo-claro" no HTML dessas seções */
body.high-contrast .fundo-claro {
  background-color: #fff !important; /* Garante que fique branco */
  color: #000 !important; /* !! FORÇA O TEXTO PADRÃO A SER PRETO !! */
  border: 1px solid #000 !important;
}

/* 2. AJUSTE para os textos que eram laranja (agora pretos) */
/* (Ex: "Estudos de Engenharia") */
/* Lembre-se de adicionar a classe "texto-laranja" no HTML desses textos */
body.high-contrast .texto-laranja { 
  color: #000 !important; 
}

/* 3. AJUSTE para botões e links dentro do .fundo-claro */
/* (Ex: o botão "+ INFORMAÇÕES") */
body.high-contrast .fundo-claro a,
body.high-contrast .fundo-claro .specialty-cta { /* Use a classe real do seu botão */
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
}

body.high-contrast .stats-section
body.high-contrast .history-timeline {
    background-color: #000 !important;
}


body.high-contrast .stats-section,
body.high-contrast .news-section,
body.high-contrast .contact-details-section,
body.high-contrast .map-section,
body.high-contrast .banner-specialties,
body.high-contrast .details-section,
body.high-contrast .mission-vision,
body.high-contrast .certification-section{
    background-image: none !important;
}



body.high-contrast .stats-section .stats-title,
body.high-contrast .stats-section .stat-number,
body.high-contrast .stats-section .stat-label,
body.high-contrast .history-timeline .history-intro,
body.high-contrast .history-timeline .timeline,
body.high-contrast .history-timeline h2,
body.high-contrast .partners-section h2,
body.high-contrast .news-section h2,
body.high-contrast .news-section p,
body.high-contrast .news-section h3,
body.high-contrast .contact-details-section h2,
body.high-contrast .contact-details-section p,
body.high-contrast .contact-details-section h3,
body.high-contrast .team-grid-section h3,
body.high-contrast .team-grid-section p,
body.high-contrast .expertise-intro-banner p,
body.high-contrast .expertise-card-content h3,
body.high-contrast .about-intro h1,
body.high-contrast .about-intro p,
body.high-contrast .mission-vision h2,
body.high-contrast .mission-vision p,
body.high-contrast .mission-vision ul,
body.high-contrast .mission-vision li,
body.high-contrast .explanation-section h2,
body.high-contrast .explanation-section h3,
body.high-contrast .explanation-section p,
body.high-contrast .details-section p,
body.high-contrast .certification-section p,
body.high-contrast .certification-section h2,
body.high-contrast .mission-item p{
    color: #fff !important;
}



body.high-contrast .preserve-background-image {
  background-color: transparent !important; /* Impede o fundo preto de cobrir a imagem */
  filter: grayscale(100%) !important; /* Aplica o filtro P&B na imagem de fundo */
  opacity: 1 !important;
}

/* Garante que o texto DENTRO do banner (ex: "EQUIPE") fique branco */
body.high-contrast .preserve-background-image h1,
body.high-contrast .preserve-background-image h2,
body.high-contrast .preserve-background-image p {
   color: #fff !important; 
}








.tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tab-button {
  background: var(--preto);
  border: 2px solid var(--laranja);
  padding: 12px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  color: var(--branco);
  transition: 0.3s;
  font-family: var(--font-alumni);
  font-size: 18px;
  letter-spacing: 1px;
}

.tab-button.active {
  background: var(--laranja);
  color: var(--preto);
  border: 2px solid var(--preto);
}

.tab-button:hover {
  background: var(--laranja);
  color: white;
}

/* Conteúdos */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Datasheets cards */
.datasheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.datasheet-card {
  background: #fff;
  padding: 35px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  font-family: var(--font-paginas-internas);
  font-size: 13px;
  color: var(--preto);
}

.datasheet-icon {
  font-size: 45px;
  color: red;
  margin-bottom: 20px;
}








.articles-filter {
  text-align: center;
  margin-bottom: 25px;
}

.articles-filter .filter-button {
  background: var(--preto);
  color: #fff;
  border: none;
  padding: 10px 18px;
  margin: 5px;
  border-radius: 30px;
  font-family: var(--font-alumni);
  letter-spacing: 1px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
   border: 2px solid var(--laranja);
}



.articles-filter .filter-button.active {
  background: var(--laranja);
  border: 2px solid var(--preto);
  color: var(--preto);
}






/* ======================================================= */
/* === DIVERSIDADE E INCLUSÃO — ESTILO DA PÁGINA ======== */
/* ======================================================= */

.header-diversidade .lead {
    font-size: 18px;
    opacity: 0.9;
    margin-top: 10px;
}

.diversidade-content p {
    font-family: var(--font-paginas-internas);
    font-size: 18px; /* ajuste opcional */
    line-height: 1.7;
    color: var(--preto-cinza);
    text-align: justify;
}

.diversidade-content h2 {
    margin-top: 35px;
    margin-bottom: 30px;
    font-size: 47px;
    color: var(--preto);
    font-weight: 500;
    font-family: var(--font-alumni);
    text-align: center;
}

.diversidade-content h3 {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 36px;
    color: var(--preto);
    font-family: var(--font-alumni);
    text-align: center;
}

.diversidade-content ul {
    margin-top: 10px;
    margin-bottom: 25px;
    padding-left: 20px;
    line-height: 1.7;
    text-align: center;
}

.diversidade-content ul li {
    margin-bottom: 8px;
}

.document-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 12px 18px;
    background: var(--laranja);
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s ease;
    text-decoration: none;
}

.document-link:hover {
    background: #d45e00;
}

.diversidade-content hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.12);
}


.simple-content-section {
    padding: 80px 0;
    background-color: var(--branco);
    background-image: url(../img/hero/FundoBranco.jpg);
}


/* --- Estilos para Colunas da Página de Diversidade --- */

.diversidade-columns {
    display: flex; /* Ativa o modo lado a lado */
    justify-content: space-between; /* Distribui o espaço entre elas */
    gap: 30px; /* Espaço entre as colunas */
    align-items: flex-start; /* Alinha o topo das colunas */
    flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
    margin-top: 40px;
}

.column-item {
    flex: 1; /* Faz todas as colunas terem a mesma largura */
    min-width: 280px; /* Garante que a coluna não fique muito fina */
    padding: 20px; /* Espaço interno */
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra leve para destacar */
}

.column-item h2 {
    font-size: 3.4rem;
    color: var(--preto); 
    text-shadow: 0px 1px 1px var(--laranja);
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    font-weight: 500;
}

.column-item ul {
    padding-left: 20px;
    list-style-type: disc;
    list-style: none;
}

.column-item ul li {
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--preto-cinza);
    font-family: var(--font-paginas-internas);
}

/* Ajuste para Telas Menores (Tablets e Celulares) */
@media (max-width: 768px) {
    .diversidade-columns {
        flex-direction: column; /* Volta a ficar um embaixo do outro */
    }
    
    .column-item {
        width: 100%; /* Ocupa a largura total */
    }
}



/* ========================================= */
/* ===== Estilos Seção Jornada (Overlay) ===== */
/* ========================================= */

.jornada-container {
    position: relative; /* Necessário para posicionar a imagem e o conteúdo sobre ela */
    width: 100%;
    min-height: 80vh; /* Altura mínima para a seção */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    padding: 2rem 0; /* Espaçamento interno em cima e embaixo */
    box-sizing: border-box;
    border-top: 1px solid var(--laranja);
    border-bottom: 1px solid var(--laranja);
    padding-bottom: 80px;
}


.jornada-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/estudos/ExpwertiseMineracao1002.webp'); 
    background-size: cover;
    background-position: center center;
    z-index: -1; /* Coloca a imagem atrás do conteúdo */
    background-color: rgba(0, 0, 0, 0.4); 
    background-blend-mode: multiply; 
}


/* 2. Posicionamento Absoluto da Seta (A Mágica acontece aqui) */
.jornada-container .scroll-down-arrow {
    position: absolute;  /* Solta a seta do Flexbox */
    bottom: 20px;        /* Cola no fundo */
    left: 50%;           /* Move para o meio */
    transform: translateX(-50%); /* Centraliza perfeitamente */
    right: auto;         /* Remove o 'right' antigo */
    
    width: 40px;         /* Ajuste de tamanho para a animação */
    height: 60px;
    
    /* Removemos a borda de bolinha antiga para ficar só as setinhas */
    border: none;        
    border-radius: 0;
    
    z-index: 10;
}

/* O conteúdo de texto */
.jornada-conteudo {
    position: relative; /* Para o z-index funcionar */
    width: 45%; /* Ocupa 50% da largura, como na imagem de referência */
    padding: 3rem;
    background-color: rgba(0, 0, 0, 0.90);/* Cor marrom-avermelhada para o fundo do texto */
    color: #ffffff;
    box-sizing: border-box;
    /* Adicione uma leve sombra para dar mais profundidade, se quiser */
     box-shadow: -5px 0 15px rgba(0, 0, 0, 0.6); 
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
     border: 1px solid var(--branco-tingido);
}

.jornada-conteudo h2 {
    font-size: 3.5rem; 
    margin-bottom: 1.5rem;
    font-weight: bold;
    color: var(--branco-tingido);
    font-family: var(--font-alumni);
    text-align: center;
}


.jornada-conteudo p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--branco-tingido);
    font-family: var(--font-paginas-internas);
    text-align: justify;
}

/* Estilo do Ícone de Rolar para Baixo (mantido como antes) */
.scroll-down-arrow {
    position: relative;
    bottom: 45px;
    right: 30px; 
    width: 50px;
    height: 50px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--branco-tingido);
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 10; /* Garante que a seta fique acima de tudo */
}

.scroll-down-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* 3. Estilo das Setinhas (Chevrons) e Animação */
.jornada-container .scroll-down-arrow span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    
    /* COR BRANCA para aparecer no fundo escuro */
    border-left: 3px solid var(--branco-tingido); 
    border-bottom: 3px solid var(--branco-tingido);
    
    transform: rotate(-45deg);
    animation: scrollDownAnim 2s infinite;
    opacity: 0;
    box-sizing: border-box;
}

/* Delays para o efeito de cascata */
.jornada-container .scroll-down-arrow span:nth-child(1) {
    animation-delay: 0s;
}
.jornada-container .scroll-down-arrow span:nth-child(2) {
    top: 16px;
    animation-delay: .15s;
}
.jornada-container .scroll-down-arrow span:nth-child(3) {
    top: 32px;
    animation-delay: .3s;
}

/* Remove o efeito de hover antigo (fundo cinza) pois não combina com as setinhas */
.jornada-container .scroll-down-arrow:hover {
    background-color: transparent;
    transform: translateX(-50%) scale(1.1); /* Mantém a centralização ao dar zoom */
}

/* A Animação (Caso você não tenha colado antes) */
@keyframes scrollDownAnim {
    0% { opacity: 0; transform: rotate(-45deg) translate(0, 0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-45deg) translate(-20px, 20px); }
}

/* --- Responsividade para Celulares --- */
@media (max-width: 768px) {
    .jornada-container {
        flex-direction: column; 
        height: auto; 
        justify-content: center; /* Centraliza o conteúdo */
    }

    .jornada-container::before {
        /* No mobile, a imagem pode ter uma altura específica */
        height: 100%; /* Ajusta conforme o conteúdo */
        /* background-position: top center; */ /* Ajuste o foco da imagem no mobile */
    }

    .jornada-conteudo {
        width: 90%; /* Ocupa mais largura em telas pequenas */
        padding: 2rem;
        margin-top: 2rem; /* Espaçamento entre o topo (imagem) e o texto */
        /* background-color: rgba(106, 58, 42, 0.9); */ /* Pode deixar o fundo do texto um pouco transparente */
    }

    .scroll-down-arrow {
       display: none; /* Esconde a seta em telas pequenas */
    }
}






/* --- Estilos para Página de Sensores --- */

/* Define o espaçamento (padding) para as duas novas seções.
  Isso substitui o 'style="padding: 60px 0;"' que estava no HTML.
*/
.sensores-geotecnicos,
.sensores-hidricos {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--branco);
}

.sensores-geotecnicos h2,
.sensores-hidricos h2{
    font-family: var(--font-alumni);
    color: var(--laranja);
    font-size: 55px;
    font-weight: 600;
    text-align: center;
    text-shadow: 1px 1px 1px var(--preto);
}


.sensores-geotecnicos p,
.sensores-hidricos p {
    margin-top: 20px;
    font-family: var(--font-paginas-internas);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--preto-cinza);
    
}




/* --- Estilos para a Seção de Sensores Geotécnicos --- */

/* Define o espaçamento (padding) para a seção inteira */
.sensores-geotecnicos {
    padding-top: 80px;
    padding-bottom: 80px;
    background-image: url(../img/hero/FundoBranco.jpg);
}

/* Estiliza o parágrafo de introdução (logo abaixo do título da seção) */
.sensores-geotecnicos .specialty-item + .specialty-item p {
    margin-top: 30px;
    margin-bottom: 50px; 
    font-size: 1.1rem; 
    line-height: 1.6;
    font-family: var(--font-paginas-internas);
    text-align: justify;
    color: var(--preto);
}

/* Adiciona espaço entre os tópicos (Tiltimetro, Crackmeter, etc.) */
/* :not(:last-child) garante que o último item não tenha margem extra */
.sensores-geotecnicos .topic:not(:last-child) {
    margin-bottom: 40px;
}


/* Estiliza o título de cada sensor (h3) */
.sensores-geotecnicos .topic h3 {
    font-size: 2.6rem; 
    margin-bottom: 15px;
    font-family: var(--font-alumni);
    color: var(--preto);
    font-weight: 500;
    text-align: center;
    text-shadow: 0px 1px 1px var(--laranja);
}

/* Estiliza a lista de "Principais Aplicações" */
.sensores-geotecnicos .topic ul {
    list-style-position: inside; 
    margin-left: 10px;
    margin-top: 10px; /* Dá espaço acima da lista */
    font-family: var(--font-paginas-internas);
    color: var(--preto-cinza);
    font-size: 15px;
}

/* Estiliza o <div> do placeholder da imagem (o último <div> dentro do .topic) */
.sensores-geotecnicos .topic > div:last-child {
    text-align: center; 
    margin-top: 20px; 
}




/* --- Estilos Adicionais para Imagens ao Lado do Texto na Seção Geotécnica --- */

/* Transforma cada "topic" em um container flexível */
.sensores-geotecnicos .topic {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas menores */
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    gap: 30px; /* Espaço entre o texto e a imagem */
    margin-bottom: 40px; /* Espaço entre um tópico e outro */
}

/* Garante que o último tópico também tenha a margem se precisar */
.sensores-geotecnicos .topic:last-child {
    margin-bottom: 0;
}

/* Estiliza a área do texto dentro de cada tópico */
.sensores-geotecnicos .topic .text-content {
    flex: 2; /* Ocupa 2 partes do espaço disponível */
    min-width: 300px; /* Garante que o texto não fique muito estreito */
}

/* Estiliza a área da imagem dentro de cada tópico */
.sensores-geotecnicos .topic .image-content {
    flex: 1; /* Ocupa 1 parte do espaço disponível */
    min-width: 250px; /* Garante que a imagem não fique muito estreita */
    text-align: center; /* Centraliza a imagem se ela for menor */
    padding-top: 20px; /* Adiciona um pouco de espaço no topo da imagem, se necessário */
}

.sensores-geotecnicos .topic .image-content img {
    max-width: 100%; /* Garante que a imagem não transborde */
    height: auto;
    border-radius: 5px; /* Opcional: bordas arredondadas para as imagens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: sombra para as imagens */
    border: 1px solid var(--preto);
}

/* Responsividade: em telas pequenas, o texto e a imagem ficam um abaixo do outro */
@media (max-width: 768px) {
    .sensores-geotecnicos .topic {
        flex-direction: column;
        align-items: center; /* Centraliza o conteúdo verticalmente */
    }
    .sensores-geotecnicos .topic .text-content,
    .sensores-geotecnicos .topic .image-content {
        flex: none; /* Desabilita o flex-grow */
        width: 100%; /* Ocupa a largura total */
        min-width: unset; /* Remove a largura mínima */
    }
    .sensores-geotecnicos .topic .image-content {
        order: -1; /* Coloca a imagem acima do texto em mobile */
        padding-top: 0;
        margin-bottom: 20px; /* Espaço entre imagem e texto em mobile */
    }
}




/* --- Estilos para a Seção de Sensores Hídricos --- */

.sensores-hidricos {
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url(../img/hero/FundoBranco.jpg);
}

.sensores-hidricos .topic h3{
    font-size: 2.6rem; 
    margin-bottom: 15px;
    font-family: var(--font-alumni);
    color: var(--preto);
    font-weight: 500;
    text-align: center;
    text-shadow: 0px 1px 1px var(--laranja);
}

/* Estiliza o parágrafo de introdução (logo abaixo do título da seção) */
.sensores-hidricos .specialty-item + .specialty-item p {
    margin-top: 20px;
    margin-bottom: 40px; 
    font-size: 1.1rem; 
    line-height: 1.6;
    font-family: var(--font-paginas-internas);
}


.sensores-hidricos .topic ul {
    list-style-position: inside; 
    margin-left: 10px;
    margin-top: 10px; /* Dá espaço acima da lista */
    font-family: var(--font-paginas-internas);
    color: var(--preto-cinza);
    font-size: 15px;
}

/* --- Layout de Imagem ao Lado do Texto (para Sensores Hídricos) --- */

/* Transforma cada "topic" em um container flexível */
.sensores-hidricos .topic {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar a linha em telas menores */
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    gap: 30px; /* Espaço entre o texto e a imagem */
    margin-bottom: 40px; /* Espaço entre um tópico e outro */
}

/* Garante que o último tópico não tenha a margem */
.sensores-hidricos .topic:last-child {
    margin-bottom: 0;
}

/* Estiliza a área do texto dentro de cada tópico */
.sensores-hidricos .topic .text-content {
    flex: 2; /* Ocupa 2 partes do espaço disponível */
    min-width: 300px; /* Garante que o texto não fique muito estreito */
}

/* Estiliza a área da imagem dentro de cada tópico */
.sensores-hidricos .topic .image-content {
    flex: 1; /* Ocupa 1 parte do espaço disponível */
    min-width: 250px; /* Garante que a imagem não fique muito estreita */
    text-align: center; /* Centraliza a imagem se ela for menor */
    padding-top: 20px; 
}

.sensores-hidricos .topic .image-content img {
    max-width: 100%; /* Garante que a imagem não transborde */
    height: auto;
    border-radius: 8px; /* Opcional: bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: sombra */
    border: 1px solid var(--preto);
}

/* Responsividade: em telas pequenas, o texto e a imagem ficam um abaixo do outro */
@media (max-width: 768px) {
    .sensores-hidricos .topic {
        flex-direction: column;
        align-items: center; 
    }
    .sensores-hidricos .topic .text-content,
    .sensores-hidricos .topic .image-content {
        flex: none; 
        width: 100%; 
        min-width: unset; 
    }
    .sensores-hidricos .topic .image-content {
        order: -1; /* Coloca a imagem acima do texto em mobile */
        padding-top: 0;
        margin-bottom: 20px; 
    }
}





/* --- Estilos para o Acordeão (Nossos Objetivos) --- */

.nossos-objetivos-section {
    padding: 60px 0;
    background-image: url(../img/hero/FundoBranco.jpg);
}

.objetivos-title {
    color: var(--preto); 
    font-size: 3.5rem;
    margin-bottom: 70px;
    font-weight: 500;
    font-family: var(--font-alumni);
    text-align: center;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre as caixas */
}

.accordion-item {
    background-color: #fff;
    border: 1px solid var(--preto-cinza);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    outline: none;
    font-family: var(--font-secundaria);
    font-size: 25px;
    font-weight: bold;
}

.accordion-header span {
    font-size: 1.1rem;
    color: var(--preto); 
    font-weight: 500;
}

.accordion-header .icon {
    font-size: 1.2rem;
    color: var(--laranja);
    border: 2px solid var(--preto);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Estilo do conteúdo (escondido inicialmente) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
    color: var(--preto);
}

.accordion-content p {
    padding: 0 20px 20px 20px;
    color: var(--cinza-escuro);
    line-height: 1.6;
    margin: 0;
}

/* Classe que o JavaScript vai adicionar quando estiver aberto */
.accordion-item.active .accordion-header .icon {
    transform: rotate(45deg); 
    background-color: var(--laranja);
    color: #fff;
}



/******************** Página Monitoramento Subterrâneo *****************/

/* Deixa a imagem do lado esquerdo */
.explanation-grid.invert {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
}

/* Garante que o texto ocupe o lado direito certinho */
.explanation-grid.invert .explanation-text {
    flex: 1;
}

/* Ajusta a imagem */
.explanation-grid.invert .explanation-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}






/* --- Estilos Exclusivos para Estudos de Engenharia (Renomeado) --- */

.estudos-section {
    padding: 80px 0;
    background-color: var(--branco);
    background-image: url(../img/hero/FundoBranco.jpg);

}

.estudos-intro-section{
    padding: 60px 0;
    background-color: var(--laranja);
    border-bottom: 1px solid var(--preto);
}

.subterraneo-intro-destaque {
    padding: 50px 0; /* Aumentei o espaçamento para dar mais presença */
    background-color: #e67e22; /* A cor Laranja da MecRoc */
    text-align: center;
    
   background-image: linear-gradient(var(--preto), rgba(0, 0, 0, 0.2)), url(../img/hero/SubterraneoCapa.webp);
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--laranja);
    background-position: center 50%;
    background-attachment: fixed;
   
}

.estudos-intro-destaque {
    padding: 50px 0; /* Aumentei o espaçamento para dar mais presença */
    background-color: #e67e22; /* A cor Laranja da MecRoc */
    text-align: center;
    
   background-image: linear-gradient(var(--preto), rgba(0, 0, 0, 0.2)), url(../img/hero/HeroCapa899.webp);
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--laranja);
    background-position: center 20%;
    background-attachment: fixed;
}


.laboratorio-intro-destaque {
    padding: 50px 0; /* Aumentei o espaçamento para dar mais presença */
    background-color: #e67e22; /* A cor Laranja da MecRoc */
    text-align: center;
    
   background-image: linear-gradient(var(--preto), rgba(0, 0, 0, 0.2)), url(../img/cards/minha-nova-foto-lab14.pdf.webp.webp);
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--laranja);
    background-position: center 40%;
    background-attachment: fixed;
   
}


.laboratorio-intro-destaque h2 {
    font-family: var(--font-alumni); /* Usa sua fonte de títulos */
    font-size: 3.8rem; /* Título maior */
    color: var(--branco-tingido); /* Cor branca */
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 2px 2px var(--preto);
}

.laboratorio-intro-destaque p {
    font-family: var(--font-paginas-internas);
    font-size: 1.2rem; /* Texto ligeiramente maior */
    line-height: 1.8;
    color: var(--branco-tingido); /* Cor branca */
    max-width: 800px; /* Limita a largura para ficar fácil de ler */
    margin: 0 auto; /* Centraliza o bloco de texto */
    font-weight: 500;
    text-shadow: 1px 1px var(--preto);
}




.aerolevantamento-intro-destaque {
    padding: 50px 0; /* Aumentei o espaçamento para dar mais presença */
    background-color: #e67e22; /* A cor Laranja da MecRoc */
    text-align: center;
    
   background-image: linear-gradient(var(--preto), rgba(0, 0, 0, 0.2)), url(../img/hero/CapaDrone2.webp);
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--laranja);
    background-position: center 33%;
    background-attachment: fixed;
   
}


.aerolevantamento-intro-destaque h2 {
    font-family: var(--font-alumni); /* Usa sua fonte de títulos */
    font-size: 3.8rem; /* Título maior */
    color: var(--branco-tingido); /* Cor branca */
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 2px 2px var(--preto);
}

.aerolevantamento-intro-destaque p {
    font-family: var(--font-paginas-internas);
    font-size: 1.2rem; /* Texto ligeiramente maior */
    line-height: 1.8;
    color: var(--branco-tingido); /* Cor branca */
    max-width: 800px; /* Limita a largura para ficar fácil de ler */
    margin: 0 auto; /* Centraliza o bloco de texto */
    font-weight: 500;
    text-shadow: 1px 1px var(--preto);
}



.estudos-intro-destaque h2 {
    font-family: var(--font-alumni); /* Usa sua fonte de títulos */
    font-size: 3.8rem; /* Título maior */
    color: var(--branco-tingido); /* Cor branca */
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 2px 2px var(--preto);
}

.estudos-intro-destaque p {
    font-family: var(--font-paginas-internas);
    font-size: 1.2rem; /* Texto ligeiramente maior */
    line-height: 1.8;
    color: var(--branco-tingido); /* Cor branca */
    max-width: 800px; /* Limita a largura para ficar fácil de ler */
    margin: 0 auto; /* Centraliza o bloco de texto */
    font-weight: 500;
    text-shadow: 1px 1px var(--preto);
}


.subterraneo-intro-destaque h2 {
    font-family: var(--font-alumni); /* Usa sua fonte de títulos */
    font-size: 3.8rem; /* Título maior */
    color: var(--branco-tingido); /* Cor branca */
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 2px 2px var(--preto);
}

.subterraneo-intro-destaque p {
    font-family: var(--font-paginas-internas);
    font-size: 1.2rem; /* Texto ligeiramente maior */
    line-height: 1.8;
    color: var(--branco-tingido); /* Cor branca */
    max-width: 800px; /* Limita a largura para ficar fácil de ler */
    margin: 0 auto; /* Centraliza o bloco de texto */
    font-weight: 500;
    text-shadow: 1px 1px var(--preto);
}






/* Específico para h2 e p dentro desta seção para não afetar o site todo */
.estudos-section .container h2 {
    font-family: var(--font-alumni);
    font-size: 3.9rem;
    color: var(--preto);
    font-weight: 600;
}

.estudos-section .container p {
    font-family: var(--font-paginas-internas);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--preto-cinza);
    margin-top: 20px;
}

/* Container Flexível para alinhar Imagem e Texto */
.estudos-wrapper {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between;
    gap: 50px; /* Espaço entre texto e imagem */
}

/* Classe para inverter a ordem (Imagem na Esquerda, Texto na Direita) */
.estudos-wrapper.estudos-invertido {
    flex-direction: row-reverse;
}

/* Estilo da área de Texto */
.estudos-text {
    flex: 1; /* Ocupa metade */
    padding-left: 20px;
}

/* Ajuste quando invertido */
.estudos-wrapper.estudos-invertido .estudos-text {
    padding-left: 20px;
    padding-right: 0;
}

.estudos-text h2 {
    font-size: 4.3rem;
    color: #e67e22; /* Título Laranja */
    margin-bottom: 20px;
    font-weight: 600;
    font-family: var(--font-alumni);
}

.estudos-text p {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--preto-cinza);
    margin-bottom: 20px;
    font-family: var(--font-paginas-internas);
}

/* O texto de destaque */
.estudos-note {
    font-size: 0.95rem;
    color: var(--preto-cinza);
    font-weight: 600;
    margin-top: 20px;
    display: block;
    font-family: var(--font-paginas-internas);
}

.estudos-note strong {
    color: var(--laranja); /* Laranja */
}

/* Estilo da área de Imagem */
.estudos-image {
    flex: 1; /* Ocupa metade */
    position: relative;
}

.estudos-image img {
    width: 109%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Sombra suave */
    object-fit: cover;
    min-height: 450px; /* Garante uma altura boa para a imagem */
    
    /* Suas bordas personalizadas */
    border-left: 30px solid var(--branco-tingido);
    border-top: 1px solid var(--preto);
    border-bottom: 1px solid var(--preto);
    border-right: 1px solid var(--preto);
}

/* Responsividade para Celular (Empilhar tudo) */
@media (max-width: 900px) {
    .estudos-wrapper, 
    .estudos-wrapper.estudos-invertido {
        flex-direction: column; /* Coloca um embaixo do outro */
        gap: 30px;
    }

    .estudos-text, 
    .estudos-wrapper.estudos-invertido .estudos-text {
        border-left: 5px solid #e67e22; /* Mantém a barra na esquerda no mobile */
        padding-left: 15px;
        width: 100%;
    }

    .estudos-image img {
        min-height: auto;
        width: 100%; /* Ajuste para não quebrar no mobile */
        border-left: 10px solid #e67e22; /* Borda menor no mobile */
    }
}





/* --- Banner de Cookies (LGPD) --- */
.cookie-banner {
    position: fixed;
    bottom: 0; /* Fixamos no bottom 0 */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Escureci um pouco para contraste */
    backdrop-filter: blur(8px); /* Efeito de vidro fosco (moderno) */
    color: #fff;
    padding: 20px 0;
    z-index: 10000;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    
    /* Lógica da Animação melhorada */
    transform: translateY(100%); /* Empurra 100% para baixo (esconde independente da altura) */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Animação mais elegante */
}

/* Classe para mostrar o banner via JS */
.cookie-banner.show {
    transform: translateY(0); /* Traz de volta para a posição original */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px; /* Aumentei um pouco o gap para o texto não colar no botão */
    flex-wrap: wrap; 
}

.cookie-content p {
    font-size: 1rem; /* 1.1rem pode ficar muito grande em telas pequenas */
    line-height: 1.5;
    margin: 0;
    flex: 1; 
    font-family: var(--font-alumni);
    font-weight: 400; /* 600 pode ficar muito pesado para texto longo, testar 400 ou 500 */
    text-align: left; /* Fica mais bonito alinhado à esquerda no PC ao lado do botão */
}

.cookie-content a {
    color: #e67e22; 
    text-decoration: underline;
}

.cookie-content button {
    background-color: #0a8634; 
    color: var(--branco-tingido, #fff); /* Fallback caso a variável falhe */
    border: none;
    padding: 12px 30px; /* Botão um pouco mais clicável */
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; 
    font-family: var(--font-alumni);
    font-size: 16px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5); /* Ajuste de sombra */
    letter-spacing: 1px;
}

.cookie-content button:hover {
    background-color: var(--branco-tingido, #fff); 
    color: var(--preto, #000);
    transform: scale(1.05); /* Pequeno efeito de zoom ao passar o mouse */
}

/* Ajuste para celular */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cookie-content p {
        text-align: center; /* No celular fica melhor centralizado */
        font-size: 0.95rem; /* Texto levemente menor para economizar espaço */
    }

    .cookie-content button {
        width: 100%; /* Botão largura total no celular facilita o clique */
        max-width: 300px; /* Mas com um limite para não ficar gigante em tablets */
    }
}




/* --- Seta de Scroll Down Animada --- */

.scroll-down-arrow {
    display: block;
    margin: 40px auto 20px auto; /* Espaço acima e abaixo, centralizado */
    width: 40px;
    height: 60px;
    position: relative;
    cursor: pointer;
}

/* Cria as três setinhas usando os spans */
.scroll-down-arrow span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    border-left: 3px solid #333; /* Cor da seta (use a cor do seu texto, ex: #000) */
    border-bottom: 3px solid #333;
    transform: rotate(-45deg);
    animation: scrollDownAnim 2s infinite;
    opacity: 0;
    box-sizing: border-box;
}

/* Atraso na animação de cada seta para criar o efeito cascata */
.scroll-down-arrow span:nth-child(1) {
    animation-delay: 0s;
}
.scroll-down-arrow span:nth-child(2) {
    top: 16px;
    animation-delay: .15s;
}
.scroll-down-arrow span:nth-child(3) {
    top: 32px;
    animation-delay: .3s;
}

/* A Animação de "Quicar" e Desaparecer */
@keyframes scrollDownAnim {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(0, 0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(-45deg) translate(-20px, 20px); /* Move para baixo e esquerda */
    }
}





/* --- Estilos da Página de Notícia Individual --- */

/* Cabeçalho do Artigo */
.article-header-section {
    padding: 180px 0 40px 0;
    background-color: var(--branco); /* Fundo cinza claro para destacar o topo */
    text-align: center;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--preto-cinza);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
}

.back-link:hover {
    color: var(--laranja);
}

.article-title {
    font-family: var(--font-alumni); 
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--preto);
    max-width: 900px;
    margin: 0 auto 20px auto;
}

.article-meta {
    color: var(--preto-cinza);
    font-size: 0.9rem;
    font-family: var(--font-paginas-internas);
}

.article-meta span {
    margin: 0 10px;
}

/* Conteúdo Principal */
.article-content-section {
    padding: 50px 0 80px 0;
    background-color: var(--branco);
}

/* Container mais estreito para leitura confortável */
.article-container {
    max-width: 800px !important; /* Força ser mais estreito que o padrão */
    margin: 0 auto;
}

/* Imagem de Destaque */
.article-featured-image {
    max-width: 500px; /* Define o tamanho máximo. Pode testar 500px ou 700px se preferir */
    margin: 0 auto 40px auto; /* O "auto" nas laterais é o que centraliza o bloco */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid var(--cinza-escuro);
}

.article-featured-image img {
    width: 100%; /* Garante que a imagem ocupe 100% do espaço definido acima (600px) */
    height: auto; /* Mantém a proporção original da foto */
    display: block;
    border-bottom: 1px solid var(--preto-cinza);
}


.article-featured-image figcaption {
    padding: 10px;
    background: var(--laranja);
    color: var(--preto);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

/* Texto do Artigo */
.article-text {
    font-family: var(--font-paginas-internas);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--preto-cinza);
}

.article-text p {
    margin-bottom: 20px;
}

.article-text .intro-text {
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
}

.article-text h3 {
    font-family: var(--font-alumni);
    font-size: 2rem;
    color: #e67e22; /* Laranja */
    margin-top: 40px;
    margin-bottom: 15px;
}

/* Rodapé do Artigo (Compartilhar) */
.article-footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--branco-tingido);
    border-bottom: 1px solid var(--branco-tingido);
    border-left: 1px solid var(--branco-tingido);
    border-right: 1px solid var(--branco-tingido);
    text-align: center;
    background-image: url(../img/hero/FundoBranco.jpg);
}

.article-footer h4 {
    margin-bottom: 20px;
    color: var(--preto-cinza);
}

.share-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-btn.linkedin { background-color: #0077b5; }
.share-btn.whatsapp { background-color: #25D366; }

/* Responsivo */
@media (max-width: 768px) {
    .article-title { font-size: 2.2rem; }
    .article-text { font-size: 1rem; }
}