/* ==========================================
   CONFIGURAÇÕES GERAIS E RESET
   ========================================== */
:root {
    --off-white: #f4f6f5;
}

/* Garante que o conteúdo não suba para trás do header */
main {
    display: block;
    width: 100%;
}

.padding-vertical {
    padding: 100px 0;
}

.center {
    text-align: center;
}

.text-white{
    color: white;
}

/* ==========================================
   HERO / CABEÇALHO DAS PÁGINAS (Padronizado)
   ========================================== */

   /* Seletor de alta especificidade para forçar a imagem */
section.hero-interna.pagina-contato {
    /*
     * Overlay estratégico: escurecimento concentrado à esquerda (onde está o texto)
     * e quase transparente à direita (onde a foto respira).
     * Mantém legibilidade sem apagar a imagem.
     */
    background-image:
        linear-gradient(
            105deg,
            rgba(10, 37, 28, 0.72) 0%,
            rgba(10, 37, 28, 0.45) 45%,
            rgba(10, 37, 28, 0.15) 100%
        ),
        url('imagens/contato.jpeg') !important;

    background-position: 60% 5% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: block !important;

    /*
     * margin-top empurra a SEÇÃO para baixo do header fixo (~90px de altura real).
     * Isso garante que o background-image comece visível, abaixo do header.
     * Usar padding-top aqui não resolve porque a regra !important do .hero-interna
     * sobrescreveria — o margin-top é o mecanismo estruturalmente correto.
     */
    margin-top: 140px;
}

/*
 * padding-top com !important garante hierárquia sobre a regra genérica
 * do .hero-interna (padding: 220px 0 100px !important).
 * Valor de 130px dá respiro elegante ao conteúdo dentro da seção.
 */
#contato {
    padding-top: 390px !important;
    padding-bottom: 100px !important;
}





/* ============================================================
   AJUSTE RESPONSIVO: PÁGINA DE CONTATO (Mobile)
   Garante que as cabeças dos colaboradores não sejam cortadas
   ============================================================ */

/* Aplica apenas para telas menores (mobile/tablet) */
@media (max-width: 992px) {

    section.hero-interna.pagina-contato {
        /* Header mobile é ligeiramente menor (~70-75px) */
        margin-top: 70px;
        background-image:
            linear-gradient(
                180deg,
                rgba(10, 37, 28, 0.60) 0%,
                rgba(10, 37, 28, 0.40) 60%,
                rgba(10, 37, 28, 0.20) 100%
            ),
            url('imagens/contato.jpeg') !important;
        background-position: 70% 0% !important;
        background-size: cover !important;
    }

    #contato {
        padding-top: 180px !important;
        padding-bottom: 80px !important;
    }
}

/* Unificando as classes de topo */
.hero-interna, .sobre-intro {
    padding: 220px 0 100px !important; 
    background-color: var(--off-white) !important;
    background-image: none !important;
    position: relative;
    width: 100%;
    display: block; /* Voltando para block para alinhar à esquerda naturalmente */
}

/* Remove overlays e fundos de imagem residuais */
.hero-interna .overlay, .overlay, .bg-personal, .bg-business {
    display: none !important;
    background: none !important;
}

/* Títulos (H1) Padronizados e Responsivos */
.hero-interna h1, .sobre-intro h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.4;
    color: var(--primary) !important;
    margin-top: 15px;
    font-weight: 300;
    text-align: left;
    word-wrap: break-word;
}

/* Na página de contato o texto fica sobre overlay escuro: ajusta cor para branco */
.pagina-contato h1,
.pagina-contato .label,
.pagina-contato p {
    color: #ffffff !important;
}

.hero-interna h1 strong, .sobre-intro h1 strong {
    font-weight: 700;
}

.label {
    display: block;
    color: var(--gold) !important;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 10px;
    text-align: left;
}

/* ==========================================
   PÁGINA: A CONSULTORIA (Sobre)
   ========================================== */

.grid-sobre {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
/* Estilização específica para a seção da Fundadora */
.texto-fundadora p {
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: var(--text-light);
    text-align: justify;
}

/* Garante que a imagem da fundadora tenha um acabamento premium */
.secao-fundadora .img-full {
    box-shadow: 15px 15px 0px var(--gold);
    margin-bottom: 25px;
}

/* Responsividade: No mobile a imagem vem antes do texto */
@media (max-width: 992px) {
    .texto-fundadora p {
        text-align: left;
    }
    .grid-invert .image-caption {
    text-align: left;
}
}

/* Inversão de Grid para efeito Zigue-Zague */
@media (min-width: 993px) {
    .grid-invert {
        /* Inverte a ordem visual: Conteúdo (1) e Imagem (2) */
        grid-template-columns: 1.2fr 1fr;
    }

    .grid-invert .sobre-content {
        order: 1;
        padding-right: 40px; /* Espaço entre texto e imagem à direita */
    }

    .grid-invert .sobre-image-wrapper {
        order: 2;
    }

.grid-invert .image-caption {
    text-align: center;
}
}



.sobre-image-wrapper {
    position: relative;
}

.img-full {
    width: 100%;
    height: auto;
    display: block;
    filter: none;
    border-radius: 4px;
    /* object-fit garante que a imagem preencha o container sem distorção */
    object-fit: cover;
}

/* Mônica Oliveira: mantido sem restrições de enquadramento
   para preservar a proporção original da fotografia */
.secao-fundadora .img-full {
    object-position: initial;
    max-height: none;
}

/* Enquadramento da foto analistas: centraliza na composição */
.manifesto-grid .img-full {
    object-position: center 30%;
    max-height: 550px;
}

.image-caption {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-top: 15px;
}

.thin-title {
    font-weight: 300;
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.valores-lista {
    margin-top: 40px;
}

.valor-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.valor-item span {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 200;
    line-height: 1;
}

.valor-item h4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 5px;
}

/*====================
PÁGINA DISC
======================*/

/* Garante que no desktop o título não volte para a esquerda */
@media (min-width: 993px) {
    .cta-disc-ajuste .thin-title {
        text-align: center !important;
    }
}
/* Centraliza verticalmente o conteúdo das colunas em telas grandes */
@media (min-width: 993px) {
    /* Garante que o título ignore o alinhamento à esquerda padrão das outras seções */
    .container.center .thin-title {
        text-align: center !important;
        width: 100%;
    }
}
@media (min-width: 993px) {
    .grid-2-large, .grid-sobre {
        align-items: center !important;
    }

    /* Opcional: Se quiser que o texto do título também seja centralizado horizontalmente */
    .hero-interna h1, .thin-title {
        text-align: left; /* Mantém à esquerda, mas centralizado na altura */
    }
}

/* ==========================================
   SEÇÕES DE SERVIÇOS (Empresas e Profissionais)
   ========================================== */

.servicos-intro {
    padding: 100px 0;
}

.grid-2-large {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.lead {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 30px;
    font-weight: 400;
    line-height: 1.6;
}

.highlight-box-verde {
    padding: 40px;
    background: var(--primary);
    color: #ffffff;
    box-shadow: 20px 20px 0px var(--gold);
}

.highlight-box-ouro {
    padding: 40px;
    background: #ffffff;
    border-left: 5px solid var(--gold);
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05);
}

.grid-servicos-detalhado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}



.servico-item-detalhe {
    background: white;
    padding: 45px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.servico-item-detalhe:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
}

.servico-icon {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 20px;
    display: block;
}

.servicos-lista{
  background-color: #0a251c;
}
.servicos-lista h2{
    color: white;
}
/*==========================================
PAGINA DE DISC
============================================*/
/* ==========================================
   DESTAQUE DISC
========================================== */

.disc-destaque {
    margin-top: 40px;
    background: linear-gradient(
        135deg,
        #0f3d2e 0%,
        #1b5a45 100%
    );
    padding: 70px;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

.disc-destaque::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: rgba(197,160,89,0.08);
    border-radius: 50%;
}

.disc-destaque-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.disc-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 25px;
}

.disc-destaque h3 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    color: white;
    font-weight: 300;
    margin-bottom: 25px;
}

.disc-destaque p {
    color: rgba(255,255,255,0.82);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 760px;
}

.disc-destaque .btn-main {
    width: fit-content;
}

@media (max-width: 992px) {

    .disc-destaque {
        padding: 45px 30px;
    }

    .disc-destaque h3 {
        font-size: 2rem;
    }

    .disc-destaque p {
        font-size: 1rem;
    }
}
/* Ajuste para alinhar as letras do DISC perfeitamente */
.valor-item {
    display: flex;
    align-items: flex-start; /* Alinha o topo da letra com o topo do texto */
    gap: 20px;
    margin-bottom: 30px;
}

.valor-item span {
    font-size: 2.5rem; /* Aumentei um pouco para dar o peso visual da imagem */
    color: var(--gold);
    font-weight: 200;
    line-height: 1;
    display: inline-block;
    width: 50px; /* LARGURA FIXA: Isso garante que o texto comece sempre na mesma reta */
    text-align: center; /* Centraliza a letra dentro do espaço de 50px */
    flex-shrink: 0; /* Impede que a letra "esprema" em telas menores */
}

.valor-item div {
    flex: 1; /* Faz o texto ocupar o resto do espaço */
}

.valor-item h4 {
    margin-top: 5px; /* Ajuste fino para alinhar a primeira linha com o topo da letra */
}

@media (min-width: 993px) {
    /* Força a inversão em qualquer grid */
    .flex-reverse-desktop {
        direction: rtl; /* Inverte a direção de leitura do grid (da direita para a esquerda) */
    }
    
    .flex-reverse-desktop > * {
        direction: ltr; /* Devolve a direção normal para o texto dentro das colunas */
    }
    
    .grid-2-large.align-center {
        align-items: center !important;
    }
}
/* ==========================================
   PÁGINA: CONTATO
   ========================================== */

.contato-details {
    margin-top: 40px;
}

.contato-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.contato-icon {
    font-size: 1.5rem;
    color: var(--gold);
}

.contato-form-box {
    background: white;
    padding: 50px;
    border: 1px solid #eee;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.form-group { margin-bottom: 20px; }
.grid-2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Estilização do Botão Principal */
.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color, #0a0a0a); /* Cor escura padrão */
    color: #ffffff;
    padding: 18px 32px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Efeito de Hover */
.btn-main{
    background-color: #0F3D2E;
}
.btn-main:hover {
    background-color: #68A948;
    transform: translateY(-2px);

}

/* Efeito de Clique */
.btn-main:active {
    transform: translateY(0);
}

/* Classe Utilitária para Largura Total (que você usou no formulário) */
.full-width {
    width: 100%;
    display: flex;
}

.wa-link-direct{
    color: #0F3D2E;
}
/* Ajuste para o formulário premium */
.premium-form .btn-main {
    margin-top: 20px;
}

input, textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    background: #fafafa;
}

/* ==========================================
   ESTATÍSTICAS / IMPACTO (Dark)
   ========================================== */

.bg-dark {
    background: #0a251c !important;
}

.grid-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-number {
    font-size: 1.8rem;
    color: var(--gold);
    font-weight: 300;
    margin-bottom: 15px;
}

/* ==========================================
   BOTÕES E CTAs
   ========================================== */

.btn-underline {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 5px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-underline:hover {
    color: var(--gold);
}

/* ==========================================
   RESPONSIVIDADE
   ========================================== */

@media (max-width: 992px) {
    .grid-sobre, .grid-2-large, .grid-stats, .grid-2-form {
        grid-template-columns: 1fr;
    }
    
    .hero-interna, .sobre-intro {
        padding: 160px 0 80px !important;
    }
}