/* Variáveis de Cores (Inspirado em tons corporativos e no logotipo) */
:root {
    --azul-escuro: #0a192f;
    --dourado: #d4af37;
    --branco: #ffffff;
    --fundo-claro: #f4f4f4;
    --texto-principal: #333333;
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    color: var(--texto-principal);
    background-color: var(--branco);
    line-height: 1.6;
}

/* --- MENU FIXO --- */
/* Fundo branco e estrutura principal */
.menu-principal {
    background-color: #FFFFFF;
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    padding: 15px 5%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
    position: sticky; 
    top: 0;
    z-index: 1000;
    
    /* TRAVA DE SEGURANÇA: Garante que o menu vai ter sempre essa altura total fixa */
    height: 110px; 
}

/* Tamanho da Logo */
.logo-container img {
    /* Voltamos para um tamanho que cabe perfeitamente dentro da trava de 90px do menu */
    max-height: 60px; 
    width: auto; 
    
    /* --- A MÁGICA ACONTECE AQUI --- */
    /* O número 1.5 significa que ela vai aparecer 50% maior do que realmente é.
       Se quiser maior ainda, tente 1.8, 2.0, 2.5... */
    transform: scale(1.8); 
    
    /* Isso garante que ao crescer, ela não invada o canto esquerdo da tela e acabe cortada */
    transform-origin: left center; 
}
.menu-principal {
  
    padding: 20px 5%; 
}
/* Centralizando os tópicos do menu */
.nav-links {
    flex-grow: 1; /* Faz a área de navegação ocupar o espaço restante */
    display: flex;
    justify-content: center; /* Centraliza os tópicos perfeitamente no meio da tela */
}

.nav-links ul {
    display: flex;
    list-style: none;
    gap: 40px; /* Espaçamento entre os links (pode aumentar se achar necessário) */
    margin: 0;
    padding: 0;
}

/* Aumentando a fonte e mudando a cor dos links */
.nav-links a {
    color: #1A1A1A; /* Letra escura já que o fundo é branco */
    font-size: 18px; /* Fonte maior conforme pedido (ajuste se quiser mais destaque) */
    font-weight: 600; /* Deixa a letra um pouco mais gordinha/elegante */
    text-decoration: none;
    transition: color 0.3s ease;
}
/* Container principal do banner */
.banner-rotativo {
    position: relative;
    width: 100%;
    height: 70vh; /* Ocupa 70% da altura da tela */
    overflow: hidden;
    background-color: #1A1A1A;
}

/* Configuração de cada slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Começa invisível */
    transition: opacity 1s ease-in-out; /* Efeito suave de 1 segundo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* O slide que tem a classe 'ativo' fica visível */
.slide.ativo {
    opacity: 1;
    z-index: 1;
}



/* Responsividade para celulares */
@media (max-width: 768px) {
    .banner-rotativo {
        height: 50vh; /* Fica um pouco menor no celular */
    }
    .conteudo-banner h1 {
        font-size: 2rem;
    }
    .conteudo-banner p {
        font-size: 1rem;
    }
}
.carrossel-container {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    position: relative;
    background-color: #1A1A1A;
}

.carrossel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out; /* Suavidade da transição entre os banners */
}

.slide-carrossel {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.camada-escura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 25, 40, 0.8);
    z-index: 1;
}

.conteudo-banner {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    max-width: 900px;
    padding: 0 20px;
    text-align: center;
}

.conteudo-banner h1 {
    font-size: 4.5rem;
    color: #C5A028;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.conteudo-banner p {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 35px;
}

.btn-banner {
    display: inline-block;
    background-color: #D4AF37;
    color: #030333;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-banner:hover {
    background-color: #C5A028;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .carrossel-container { height: 50vh; }
    .conteudo-banner h1 { font-size: 2.8rem; }
    .conteudo-banner p { font-size: 1.2rem; }
    .btn-banner { padding: 12px 30px; font-size: 1.1rem; }
}

/* Efeito ao passar o mouse no botão */
.btn-banner:hover {
    background-color: #C5A028; /* Dourado um pouco mais escuro */
    transform: scale(1.05); /* Botão cresce de leve */
}

/* Ajustes para a tela do Celular não quebrar o layout */
@media (max-width: 768px) {
    .conteudo-banner h1 { 
        font-size: 2.8rem; 
    }
    .conteudo-banner p { 
        font-size: 1.2rem; 
    }
    .btn-banner { 
        padding: 12px 30px; 
        font-size: 1.1rem; 
    }
/* 1. Regra de Ouro para Imagens no Celular */
    img {
        max-width: 100%; /* Impede que qualquer imagem seja maior que a tela */
        height: auto;
    }

    /* 2. Ajuste da seção "Conheça a Conduta" (Texto + Foto) */
    .conheca-container { /* Substitua pelo nome da classe real dessa seção */
        display: flex;
        flex-direction: column; /* Empilha o texto e a foto um embaixo do outro */
        width: 100%;
        padding: 20px; /* Dá um respiro nas laterais */
    }

    /* 3. Prevenção de vazamento geral */
    body, html {
        overflow-x: hidden; /* Corta qualquer espaço branco extra na lateral */
        width: 100%;
    }
    
}



.
}

/* Responsividade */
@media (max-width: 768px) {
    .carrossel-container { height: 50vh; }
    .conteudo-banner h1 { font-size: 2rem; }
    .conteudo-banner p { font-size: 1rem; }
}

/* Efeito ao passar o mouse */
.nav-links a:hover {
    color: #D4AF37; /* Sugestão: coloque aqui a cor principal/dourada da marca da Conduta */
}
.menu-fixo {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--azul-escuro);
    color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.menu-fixo .logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--dourado);
    letter-spacing: 2px;
}

.menu-fixo ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.menu-fixo a {
    text-decoration: none;
    color: var(--branco);
    font-weight: 500;
    transition: color 0.3s;
}

.menu-fixo a:hover {
    color: var(--dourado);
}




/* Container principal da seção */
/* Atualize este bloco no seu CSS */
.secao-consultoria {
    padding: 60px 0; /* Tiramos o padding lateral para o carrossel encostar nas bordas */
    background-color: #ffffff; 
    overflow: hidden; /* Evita que o site todo fique com rolagem horizontal vazada */
}

/* Atualize este bloco no seu CSS */
.cards-container {
    display: flex;
    gap: 20px;
    width: 100%; 
  
    margin: 0 auto;/* 100% da largura da tela (de ponta a ponta) */

    
    /* O padding lateral garante que o primeiro card não fique colado no limite do monitor */
    padding: 20px 5vw 40px 5vw; 
    
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; /* Essencial para o deslizamento automático ficar suave */
    
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.cards-container::-webkit-scrollbar {
    display: none;
}

/* Estilo individual de cada card */
.card-servico {
    /* MUDANÇA: Substitui o 'width' por 'flex'. O '0 0' impede o card de esmagar */
    flex: 0 0 270px; 
    scroll-snap-align: start; /* Ponto onde a rolagem "trava" */
    
    position: relative;
    height: 400px; /* Altura do card */
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* Joga o texto para a parte de baixo */
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* O que acontece quando o mouse passa por cima do card */
.card-servico:hover {
    transform: scale(1.05); /* Aumenta o tamanho do card em 5% */
    box-shadow: 0 12px 30px rgba(0,0,0,0.3); /* Sombra mais escura */
    z-index: 10; /* Garante que o card fique por cima dos vizinhos */
}

/* Camada escura por cima da imagem */
.overlay-escuro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,19,38,0.75); 
    z-index: 1;
    transition: background 0.3s ease;
}

/* Efeito ao passar o mouse: a imagem fica um pouco mais clara */
.card-servico:hover .overlay-escuro {
    background: rgba(20, 35, 50, 0.55);
}

/* Posicionamento do texto */
.conteudo-card {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    width: 100%;
    padding-bottom: 40px; 
    transition: transform 0.3s ease;
}

/* O texto cresce quando o mouse passa no card */
.card-servico:hover .conteudo-card {
    transform: scale(1.12);
    padding-bottom: 45px; 
}

/* Texto menor em cima (itálico) */
.subtitulo-card {
    display: block;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 2px;
}

/* Texto maior embaixo (Negrito e Maiúsculo) */
.titulo-card {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
}

/* --- MUDANÇAS NA RESPONSIVIDADE PARA O CARROSSEL --- */
@media (max-width: 900px) {
    .card-servico {
        /* Em tablets, mantemos o tamanho fixo para o carrossel rolar bem */
        flex: 0 0 280px; 
    }
}

@media (max-width: 600px) {
    .card-servico {
        /* No celular, o card ocupa 85% da tela. 
           Os 15% restantes deixam o próximo card aparecendo um pouquinho! */
        flex: 0 0 85%; 
        max-width: 320px;
        height: 350px;
    }
}

/* --- CONTAINER PRINCIPAL (Com Fundo Escuro) --- */
.sobre-container {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 50px;
    background-color: #001326; 
  padding-bottom: 0 !important;
    
    /* ALTERAÇÕES AQUI: */
 padding-top: 50px; /* Mantém o respiro em cima */
    padding-bottom: 0;
    width: 100%; /* Aumenta a largura máxima para 100% */
    margin: 60px auto; /* Aumenta o espaço externo em cima e embaixo para desgrudar da seção anterior/próxima */
}

/* --- ÁREA DA FOTO (DIREITA) --- */
.sobre-foto {
 position: relative;
    display: flex; /* Joga a foto para a direita */
    justify content: center;
  align-items: flex-end;
  margin-bottom: -60px !important;
}
.sobre-foto::after{
  content: "";
  position: absolute; 
  bottom:0;
  left:0; 
  width: 100%; /* Acompanha 100% da largura da imagem, não importa o tamanho dela */
    height: 75%; /* Altura do bloco branco (aqui cobre 35% da foto de baixo para cima. Ajuste como quiser) */
    background-color: #FFFFFF;
border-radius: 10px 10px 0 0; 
    
    z-index: 1; /* Coloca o bloco branco na camada de trás... */
}

.sobre-foto img {
  position: relative; 
    z-index: 2; /* ...e coloca a foto na camada da frente, sobrepondo o bloco branco! */
    display: block;
    width: 750px;
    height: auto;
    object fit;
}
/* Estilo das Imagens nos Cards de Consultoria */
.img-consultoria {
    width: 100%;
    height: 180px; /* Mantém todas as imagens com a mesma altura */
    object-fit: cover; /* Corta a imagem perfeitamente sem achatar ou esticar */
    border-radius: 6px; /* Cantos levemente arredondados */
    margin-bottom: 15px; /* Espaço entre a foto e o título */
}

/* --- ÁREA DO TEXTO (ESQUERDA) --- */
.sobre-conteudo {
  font-size: 25px;
  
    flex: 1 1 400px;
    text-align: justify;
    
    /* Garante que o texto dentro da caixa não fique colado na foto */
    padding-left: 0; 
    
    /* Mantém a trava de largura para continuar legível */
    max-width: 650px; 
    width: 100%;
    
    /* Evita que o texto cole na borda direita em telas menores */
    padding-right: 30px;
    
    /* Puxa o texto para a esquerda (o !important garante que vai funcionar agora) */
    margin-left: 100px !important; 
}

/* Estilo do Nome (Dourado) */
.sobre-conteudo h2 {
    color: #d4af37; /* Use aqui sua variável original, ex: var(--dourado) */
    font-size: 2em;
    margin-bottom: 20px;
}
/* Estilo do Botão de Consultoria */
.btn-consultoria {
    display: inline-block;
    background-color: #d4af37; /* Dourado da Conduta */
    color: #05162a; /* Azul institucional para o texto */
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-consultoria:hover {
    background-color: #05162a; /* Inverte as cores ao passar o mouse */
    color: #d4af37;
    border: 1px solid #d4af37;
}

/* Estilo do Texto (Claro para contrastar com o fundo) */
.sobre-conteudo p, 
.sobre-conteudo span {
  font-size: 1.5rem;
    color: #ffffff; /* Texto em branco */
    line-height: 1.6;
    margin-bottom: 15px;
}
/* Estilo para o texto em destaque (Dourado e Negrito) */
.sobre-conteudo .destaque {
    color: #d4af37; /* Cor dourada */
    font-weight: 700; /* Negrito (pode usar 'bold' também) */
}
/* Estilo para a lista de tópicos (Bullet points) */
.sobre-conteudo ul {
    padding-left: 20px; /* Dá um recuo para as bolinhas não sumirem */
    margin-bottom: 15px;
}
html {
    scroll-behavior: smooth; /* É essa linha mágica que faz a rolagem suave! */
}

/* Estilo atualizado para a lista de tópicos (Bullet points - Dourado e Negrito) */
.sobre-conteudo li {
    color: #d4af37; /* Cor dourada */
    font-weight: 700; /* Negrito */
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 10px; 
}
/* --- RESPONSIVIDADE (CELULARES) --- */
@media (max-width: 100%) {
    .sobre-container {
        flex-direction: column;
        text-align: center;
    }

    .sobre-foto {
        order: 1; /* Foto em cima no celular */
    }

    .sobre-conteudo {
        order: 2; /* Texto embaixo no celular */
        text-align: center;
    }
}


}
/* --- TRAVA DE TAMANHO DA LOGO --- */
.menu-fixo .logo img, .logo-img {
    max-height: 50px; /* Define a altura máxima permitida */
    max-width: 250px; /* Evita que logos muito largas quebrem o menu */
    width: auto;
    height: auto;
    display: block;
}
/* Negrito Dourado */
.destaque-dourado {
    color: #D4AF37; /* Tom de dourado. Substitua pelo Hex do seu botão se quiser idêntico */
    font-weight: bold; /* Garante que fique em negrito */
}
/* Configuração do Botão Flutuante */
.whatsapp-flutuante {
    position: fixed; /* É isso que faz ele ficar "preso" na tela */
    bottom: 30px; /* Distância da parte de baixo da tela */
    right: 30px; /* Distância da lateral direita da tela */
    width: 60px; /* Largura do botão */
    height: 60px; /* Altura do botão */
    background-color: #25D366; /* Verde oficial do WhatsApp */
    border-radius: 50%; /* Deixa o botão perfeitamente redondo */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); /* Sombra elegante sob o botão */
    z-index: 1000; /* Garante que o botão fique em cima de fotos e textos */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Deixa o efeito hover suave */
}

/* Efeito ao passar o mouse por cima (Hover) */
.whatsapp-flutuante:hover {
    transform: scale(1.1); /* O botão dá um leve "zoom" chamando a atenção */
    background-color: #20b858; /* Fica com um verde levemente mais escuro */
}

/* Correção do alinhamento para o ícone oficial */
.whatsapp-flutuante svg {
    display: block; 
    margin-top: -1px; 
    margin-left: -1px;
}
/* --- BOX DE AGENDAMENTO (CALL TO ACTION) --- */
.box-agendamento {
    background-color: #001326; /* Fundo cinza bem claro para destacar do resto do site */
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 40px 0; /* Espaço em cima e embaixo da box */
}

.agendamento-conteudo {
    max-width: 800px; /* Limita a largura para o texto não esticar demais */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px; /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave para dar profundidade */
    border-top: 5px solid #d4af37; /* Detalhe dourado no topo da caixa */
}

.agendamento-conteudo h3 {
    color:#001326;
    font-size: 2em;
    margin-bottom: 15px;
}

.agendamento-conteudo p {
    color: #555555;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- BOTÃO DE AGENDAR --- */
.btn-agendar {
    display: inline-block;
    background-color: #d4af37; /* Dourado Conduta */
    color: #ffffff;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 30px; /* Botão em formato de pílula */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-agendar:hover {
    background-color: #b8962e; /* Dourado um pouco mais escuro no hover */
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
}
/* ========================================================
   SEÇÃO NOSSAS SOLUÇÕES
   ======================================================== */
.secao-solucoes {
    background-color: #121212;
    padding: 80px 0;
    border-top: 1px solid #1e1e1e; 
}

.cabecalho-solucoes {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px auto; 
}

.cabecalho-solucoes h2 {
    font-size: 2.5rem;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cabecalho-solucoes h2 span {
    color: #d4af37;
}

.cabecalho-solucoes p {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Alinhamento dos cards que você vai colar */
.grid-solucoes-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.cta-solucoes {
    text-align: center;
    margin-top: 60px; 
}

.btn-contato-solucoes {
    display: inline-block;
    background-color: transparent;
    color: #d4af37;
    border: 2px solid #d4af37;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
/* ========================================================
   AJUSTES GERAIS PARA CELULAR (Telas até 768px)
   ======================================================== */
@media (max-width: 768px) {
    
    /* --- 1. PREVENÇÃO DE VAZAMENTO LATERAL --- */
    body, html {
        overflow-x: hidden; 
        width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* --- 2. MENU E NAVEGAÇÃO --- */
    .menu-principal {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto; 
        background-color: #ffffff; 
        padding: 15px 0;
        z-index: 1000; 
    }

    .nav-links {
        width: 100%;
    }

    .nav-links ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; 
        padding: 0;
        margin: 15px 0 0 0; 
    }

    /* --- 3. BANNERS ROTATIVOS / CAPA --- */
    .carrossel-container,
    .banner-rotativo { 
        height: 50vh; 
    }
    
    .conteudo-banner h1 { 
        font-size: 2rem; 
    }
    
    .conteudo-banner p { 
        font-size: 1 rem; 
    }
    
    .btn-banner { 
        padding: 12px 30px; 
        font-size: 1.1rem; 
    }

    /* --- 4. SEÇÃO "SOBRE / CONHEÇA A CONDUTA" --- */
    .sobre-container {
        flex-direction: column; /* Empilha foto e texto */
        padding: 20px 0 0 0; /* Zera os espaços malucos */
        margin: 20px 0;
        width: 100%;
        text-align: justify;
        font-size: 1.1rem;
    
    }

    .sobre-foto {
        order: 1; /* Força a foto a ficar em cima */
        width: 100%;
        margin-bottom: 0 !important;
        justify-content: center;
    }

    .sobre-foto img {
        width: 100%; /* Impede a foto de vazar da tela */
        max-width: 100%;
    }

    .sobre-conteudo {
        order: 2; /* Força o texto a ficar embaixo */
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important; /* REMOVE A MARGEM QUE ESTAVA ESPREMENDO O TEXTO */
        padding: 20px 30px !important; /* Dá um respiro lateral agradável */
        box-sizing: border-box; /* Garante que o padding não vaze a tela */
        text-align: justify; /* Deixa o texto alinhado à esquerda para leitura mais fácil */
        font-size: 1.6rem;
    }

    .sobre-conteudo h2 {
        text-align: center; /* Mantém apenas o título centralizado */
    }
    
    .capa-container h1 {
        font-size: 2rem; /* Reduz um pouco o tamanho do "Educação Profissional" */
    }

    /* --- 5. CENTRALIZAÇÃO DA LOGO NO CELULAR --- */
    .logo-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 15px; /* Dá um espacinho entre a logo e o botão INÍCIO */
    }

    .logo-container img {
        transform-origin: center center; /* Muda a âncora do zoom para o meio exato */
        transform: scale(1.5); 
    }

} /* <--- A ÚNICA chave fechando o @media deve ser esta aqui no final! */