html {
    scroll-behavior: smooth;
}
/* 1. IMPORTAÇÃO DE FONTES E VARIÁVEIS UNIFICADAS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lora:wght@400;500&family=Montserrat:wght@600&family=Inter:wght@400;600&display=swap');

:root {
    --primary: #6F8E8B;        /* Verde sálvia */
    --secondary: #4F6D6A;      /* Verde profundo */
    --bg-light: #F6F4EF;       /* Off-white quente */
    --accent: #D9CFC1;         /* Areia */
    --text-color: #2F2F2F;     /* Grafite */
    --white: #FFFFFF;
    --header-bg: rgba(255, 255, 255, 0.9);
}

/* 2. CONFIGURAÇÕES GERAIS */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Lora', serif; 
    color: var(--text-color); 
    line-height: 1.6; 
    background-color: var(--white);
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* CONFIGURAÇÃO DE CONTRASTE ENTRE SEÇÕES */
.section-split {
    background-color: #FFFFFF !important; /* Branco Puro */
}

.accent-bg {
    background-color: #D9CFC1 !important; /* Areia (Destaque) */
}

.alternate-bg {
    background-color: #F6F4EF !important; /* Off-white */
}

header { background: var(--header-bg); }
.bg-light { background-color: var(--secondary); }
.card { background-color: var(--card-bg); color: var(--text-color); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Inter', sans-serif; color: var(--dark); line-height: 1.6; }

/* Garante que títulos e parágrafos fora dos cards também mudem */
body.dark-mode h2, 
body.dark-mode p {
    color: #f4f7f6;
}

/* 3. CABEÇALHO (FIXO E TRANSPARENTE) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 80px;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(111, 142, 139, 0.1);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.03em;
}
/* Ajuste para tablets e celulares (Responsividade) */
@media (max-width: 768px) {
    header {
        height: auto !important; /* Permite que o cabeçalho cresça se precisar */
        min-height: 80px;
        flex-wrap: wrap; /* Permite que os links desçam para a linha de baixo se faltar espaço */
        padding: 15px 10px;
        justify-content: center; /* Centraliza tudo no mobile */
        gap: 15px;
    }
    
    /* Impede a logo de ser espremida pelo Safari */
    .logo {
        flex-shrink: 0; 
    }
}
nav ul {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

nav a { 
    text-decoration: none; 
    color: var(--text-color); 
    transition: 0.3s;
}

nav a:hover { color: var(--primary); }

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: var(--secondary); /* Cor de fundo suave */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
    border: 1px solid rgba(90, 140, 160, 0.2);
}

nav a { 
    text-decoration: none; 
    color: var(--dark); 
    font-weight: 400; 
    transition: 0.3s;
}

nav a:hover {
    color: var(--primary);
}

/* BOTÃO DE AGENDAMENTO NO MENU */
.btn-nav {
    background-color: var(--primary); /* Usa o Verde Sálvia #6F8E8B */
    color: var(--white) !important;
    padding: 10px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
}

.btn-nav:hover {
    background-color: var(--secondary); /* Escurece para Verde Profundo ao passar o mouse */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(111, 142, 139, 0.3); /* Sombra suave na cor do botão */
}
/* Dark Mode */
body.dark-mode .btn-nav {
    background-color: var(--secondary); /* No escuro, ele começa já no tom mais profundo */
}

body.dark-mode .btn-nav:hover {
    background-color: var(--primary); /* E clareia levemente no hover */
}


/* NOVO TOPO PROFISSIONAL */
/* 2. AJUSTE DO HERO (Para alinhar com a cor da tabela) */
.hero { 
    background-color: var(--bg-light); /* Cor #F6F4EF */
    min-height: 60vh;          
    display: flex; 
    align-items: center; 
    padding: 80px 5% 40px; /* Padding ajustado para não ficar sob o header fixo */
    color: var(--text-color);
}

.hero-content h1 { 
    font-size: 2.8rem; 
    color: var(--secondary); /* Verde Profundo para autoridade */
    font-family: 'Playfair Display', serif;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.hero-content {
    flex: 1;
    text-align: left; /* Texto à esquerda como você planejou */
}

.hero-content p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #555;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 480px;
    border-radius: 30px; /* Mantém o padrão arredondado que ficou ótimo no sobre mim */
   /* height: auto;  */         /* Mantém a proporção da foto sem achatar */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Sombra para profundidade */
}

@media (max-width: 768px) {
    .hero-container {
        flex-direction: column-reverse !important; /* Força os itens a ficarem um embaixo do outro */
        text-align: center; /* Centraliza o texto no celular */
        gap: 30px;
    }
    
    .hero-content {
        text-align: center; /* Sobrepõe o alinhamento à esquerda no mobile */
    }

    /* Corrige o bug de encolhimento do Safari */
    .hero-content, 
    .hero-image {
        width: 100% !important; 
        flex: none !important; /* Desativa o flex: 1 que confunde o Safari */
    }
}

/* 1. PADRONIZAÇÃO DE BOTÕES (Substituindo o azul antigo) */
.cta-button { 
    background-color: var(--primary); /* Verde Sálvia #6F8E8B */
    color: var(--white) !important; 
    padding: 15px 30px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 600; 
    display: inline-block; 
    transition: 0.3s;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

.cta-button:hover {
    background-color: var(--secondary); /* Verde Profundo #4F6D6A */
    transform: translateY(-2px);
}

/* 2. BOTÃO DO MENU (Igualando a identidade) */
.btn-nav {
    background: var(--primary) !important; /* Força o Verde Sálvia */
    color: var(--white) !important;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn-nav:hover {
    background: var(--secondary) !important;
    box-shadow: 0 4px 12px rgba(111, 142, 139, 0.2);
}

/* 3. CORES DE FUNDO (Conforme a tabela) */
.section-split { 
    background-color: var(--white); /* #FFFFFF */
}

.alternate-bg { 
    background-color: var(--bg-light) !important; /* #F6F4EF */
}

.accent-bg { 
    background-color: var(--accent) !important; /* #D9CFC1 */
}

/* ... código anterior (Header, Hero, etc.) ... */
/* PADRONIZAÇÃO DA FRASE DE APOIO */
.frase-apoio {
    font-family: 'Playfair Display', serif !important; /* Mesma fonte dos títulos principais */
    font-size: 1.8rem;
    color: #F6F4EF !important; /* Off-white para total visibilidade */
    text-align: center;
    font-style: italic; /* O itálico reforça o tom de acolhimento */
    margin: 20px 0;
    line-height: 1.4;
}

  /* AJUSTE DE FONTES: DÚVIDAS FREQUENTES (FAQ) */
#faq {
    padding-bottom: 20px;
    padding-top: 50px; /* Adicionado para respiro superior */
}

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
    margin-bottom: 0;
}

#faq .section-title {
    font-family: 'Playfair Display', serif !important; /* Fonte dos títulos principais */
    font-size: 2.5rem;
    color: var(--secondary); /* Verde Profundo #4F6D6A */
    margin-top: 0;
    margin-bottom: 35px; /* Aumentado levemente para elegância */
    text-align: center;
}

details {
    background: var(--card-bg);
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

summary {
    font-family: 'Lora', serif !important; /* Fonte elegante para a pergunta */
    font-size: 1.15rem;
    padding: 20px;
    font-weight: 500; /* Peso médio para não brigar com o título */
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary); /* Verde Sálvia #6F8E8B */
}

details p {
    font-family: 'Lora', serif !important; /* Fonte para a resposta */
    padding: 0 20px 20px;
    line-height: 1.8; /* Espaçamento maior para leitura confortável */
    color: var(--text-color); /* Grafite #2F2F2F */
    font-size: 1.05rem;
}

/* Efeito de destaque ao abrir */
details[open] {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Ajuste para o Dark Mode */
body.dark-mode details {
    border-color: rgba(255,255,255,0.1);
}

body.dark-mode .main-quote {
    color: #D9CFC1; /* A cor areia vira a cor do texto no escuro */
}

    .container {
        padding: 80px 10%;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }
    
    .bg-light {
        background: var(--secondary);
        padding: 80px 10%;
    }
    
/* CONTAINER PRINCIPAL DOS CARDS */
.cards {
    display: grid;
    /* Força 4 colunas de tamanhos iguais */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* Espaço entre os cards */
    margin-top: 40px;
    width: 100%;
    max-width: 1200px; /* Mantém tudo alinhado com o resto do site */
    margin-left: auto;
    margin-right: auto;
}

/* 4. RESPONSIVIDADE (FIX PARA CELULAR E TABLET) */
@media (max-width: 1024px) {
    .cards {
        /* Em tablets ou telas menores, mostra 2 cards por linha */
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .cards {
        /* Em celulares, mostra 1 card por linha */
        grid-template-columns: 1fr; 
    }
}

    /* 2. ESTRUTURA ZIGUE-ZAGUE (O MOTOR) */
    .section-split {
        padding: 80px 0;
        background-color: var(--white);
    }
    
    .alternate-bg {
        background-color: var(--bg-light) !important;
    }
    
    .split-container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 5%;
    }
    
    .split-content, .split-image {
        flex: 1;
    }
    
    .inverted {
        flex-direction: row-reverse !important;
    }
    
    .split-image img {
        width: 100%;
        max-width: 480px;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    }
    
    /* 3. TÍTULOS E TEXTOS */
    /* SEÇÃO SOBRE MIM - FUNDO BRANCO PURO */
    /* SEÇÃO SOBRE MIM - ALINHAMENTO À ESQUERDA */
    #sobre .split-content {
        text-align: left !important; /* Força o texto para a esquerda */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinha o conteúdo interno (incluindo botões) à esquerda */
    }
    
    #sobre .split-content h2 {
        text-align: left !important; /* Alinha o título "Sobre Mim" à esquerda */
        margin-bottom: 30px;
    }
    
    #sobre .split-content p {
        text-align: left !important; /* Alinha os parágrafos à esquerda */
        margin-bottom: 20px;
    }
    .split-content h2 {
        font-family: 'Playfair Display', serif;
        font-size: 2.5rem;
        color: var(--secondary);
        margin-bottom: 20px;
    }
    /*  Atualização do HTML (Para quem é a terapia?) */
    .lista-beneficios {
        list-style: none;
        padding: 0;
        margin-top: 25px;
    }
    
    .lista-beneficios li {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
        font-size: 1.1rem;
        color: var(--text-color);
    }
    
    .lista-beneficios i {
        color: var(--primary); /* Verde Sálvia nos ícones */
        font-size: 0.9rem;
    }

    /* APLICANDO A MESMA FONTE EM AMBAS AS SEÇÕES */
    #sobre .split-content h2, 
    #publico .split-content h2 {
        font-family: 'Playfair Display', serif !important; /* Fonte elegante para títulos */
        font-size: 2.5rem;
        color: var(--secondary); /* Verde profundo #4F6D6A */
        margin-bottom: 25px;
    }
    
    #sobre .split-content p, 
    #publico .split-content p,
    .lista-beneficios li {
        font-family: 'Lora', serif !important; /* Fonte sofisticada para leitura */
        font-size: 1.1rem;
        color: var(--text-color); /* Grafite #2F2F2F */
        line-height: 1.8;
    }

    /* Garante que o fundo 'alternate-bg' use a cor Areia correta */
    .alternate-bg {
        background-color: var(--bg-light) !important; /* Ou use var(--accent) se quiser o tom Areia */
    }

/* Ajuste para tablets e celulares (Responsividade) Sessões de texto*/
@media (max-width: 768px) {
    .split-container, .inverted {
        flex-direction: column !important;
        text-align: center;
        gap: 30px;
    }
    
    /* ADIÇÃO: Previne que o Safari quebre as colunas nas seções Sobre/Abordagem */
    .split-content, 
    .split-image {
        width: 100% !important;
        flex: none !important;
    }
}
.link-destaque {
    color: var(--primary);    /* Usa o Verde Sálvia */
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.link-destaque:hover {
    color: var(--secondary);  /* Escurece ao passar o mouse */
}

/* Ajuste para tablets e celulares (Responsividade) */
@media (max-width: 768px) {
    #especialidades, 
    #faq {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    header {
        padding: 0 10px; /* Reduz o preenchimento lateral no mobile */
    }

    .logo {
        gap: 8px; /* Diminui o espaço entre o ícone e o nome */
    }

    .logo span {
        font-size: 1.1rem; /* Reduz um pouco a fonte */
    }
} /* Esta chave fecha a @media e deve estar sozinha na linha */

/* Feedback visual quando o usuário passa o mouse já tem */
    .card { 
        background: white; 
        padding: 30px; 
        border-radius: 10px; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
        
        /* Novas propriedades para modernizar */
        transition: all 0.3s ease; /* Faz a animação durar 0.3 segundos */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza o conteúdo se preferir */
        text-align: center;
    }
    /* No modo escuro */
    body.dark-mode .card {
        background-color: #262626; /* Cinza bem escuro */
        color: #f4f7f6;           /* Texto claro para contraste */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Garante que os títulos das seções (Sobre Mim, Especialidades) mudem */
    body.dark-mode h2 {
        color: #f4f7f6;
    }

    /* AJUSTE DARK MODE PARA O HERO */
    body.dark-mode .hero {
        background-color: #1a1a1a !important; /* Fundo grafite muito escuro */
        color: #e0e0e0 !important;           /* Texto cinza claro */
    }
    
    body.dark-mode .hero-content h1 {
        color: #90caf9 !important;           /* Azul claro para o título se destacar */
    }
    
    body.dark-mode .hero-content p {
        color: #b0b0b0 !important;           /* Descrição com cor suave */
    }
    
    body.dark-mode .hero-image img {
        border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil para a foto não "sumir" */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra mais pesada no escuro */
    }

    /* Efeito de interação ao passar o mouse */
    .card:hover {
        transform: translateY(-8px); /* Sobe o card levemente */
        box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* Sombra mais profunda */
        border: 1px solid var(--primary); /* Opcional: bordinha na cor do tema */
    }
    
    /* Mantendo o estilo do ícone que você já tinha */
    .card i { 
        font-size: 2.5rem; /* Aumentei um pouco para destaque */
        color: var(--primary); 
        margin-bottom: 20px; 
    }

    .sobre-container {
        display: flex;
        flex-direction: row;
        align-items: center;    /* Centraliza o texto verticalmente com a foto */
        justify-content: center;
        gap: 40px;              /* Espaço entre foto e texto */
        margin-top: 30px;
    }

    .sobre-img {
        flex: 0 0 35%;          /* A foto ocupará apenas 35% da largura da linha */
        max-width: 350px;       /* Limite máximo para não ficar enorme em telas grandes */
    }

    .sobre-img img {
        width: 100%;            /* A imagem preenche os 35% definidos acima */
        height: auto;
        border-radius: 30px;    /* Bordas arredondadas como na sua foto real */
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

    .sobre-texto {
        flex: 1;                /* Garante que o texto ocupe o espaço ao lado da foto */
        display: flex;          /* Necessário para a centralização vertical */
        flex-direction: column; /* Organiza o título e os parágrafos em coluna */
        justify-content: center; /* Este é o comando que centraliza o texto na altura da foto */
        text-align: left;       /* Mantém o alinhamento à esquerda como na imagem */
    }

/* Garante que no celular a foto não fique espremida de lado */
@media (max-width: 768px) {
    .sobre-container {
        flex-direction: column;
        text-align: center;
    }
    .sobre-img {
        max-width: 80%;     /* No celular ela pode ser um pouco maior */
        margin-bottom: 20px;
    }
}
 /* Para quem é a terapia? (Identificação) */
    .publico-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }
    .publico-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.1rem;
        color: var(--text-color);
    }
    .publico-item i {
        color: var(--primary);
    }

/* ============================================================
   SEÇÃO: MINHA ABORDAGEM (ALINHAMENTO À ESQUERDA)
   ============================================================ */
/* ESPELHANDO A REGRA DO SOBRE MIM PARA A ABORDAGEM */
#abordagem.section-split {
    padding: 100px 0;
}

#abordagem .split-content {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o título e os textos à esquerda */
}

#abordagem .split-content h2 {
    text-align: left !important;
    margin-bottom: 25px;
    width: 100%;
}

#abordagem .split-content p {
    text-align: left !important;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Ajuste para celular */
@media (max-width: 768px) {
    #abordagem .split-content {
        padding: 0 20px;
        align-items: flex-start !important;
    }
}

 /* ============================================================
   SEÇÃO: MINHA PUBLICO (ALINHAMENTO À ESQUERDA)
   ============================================================ */
   /* ESPELHANDO A REGRA DO SOBRE MIM PARA A ABORDAGEM */
#publico.section-split {
    padding: 100px 0;
}

#publico .split-content {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o título e os textos à esquerda */
}

#publico .split-content h2 {
    text-align: left !important;
    margin-bottom: 25px;
    width: 100%;
}

#publico .split-content p {
    text-align: left !important;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Ajuste para celular */
@media (max-width: 768px) {
    #publico .split-content {
        padding: 0 20px;
        align-items: flex-start !important;
    }
}

/* ============================================================
   SEÇÃO: ATENDIMENTO ONLINE (CUIDADO ONDE VOCÊ ESTIVER)
   ============================================================ */

#online {
    padding: 100px 0;
}

/* Força o alinhamento à esquerda para o conteúdo desta seção */
#online .split-content {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Alinha título, texto e link à esquerda */
}

#online .split-content h2 {
    text-align: left !important;
    color: var(--secondary);
    margin-bottom: 25px;
}

#online .split-content p {
    text-align: left !important;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Garante a inversão: Imagem na esquerda, Texto na direita no Desktop */
#online .split-container.inverted {
    flex-direction: row-reverse !important;
}

/* AJUSTE PARA CELULAR: Garante que continue à esquerda no mobile */
@media (max-width: 768px) {
    /* Força a seção de atendimento online a empilhar no celular, vencendo a regra do computador */
    #online .split-container.inverted {
        flex-direction: column !important;
    }
    
    /* Garante que a imagem não vai transbordar a tela */
    #online .split-image {
        width: 100% !important;
        display: block !important;
    }
}

 /* Cronograma e Selo de Atendimento */

    .info-footer-grid {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    }
    body.dark-mode .info-footer-grid {
        border-top-color: rgba(255,255,255,0.1);
    }
    .info-footer-grid h3 {
        color: var(--primary);
        margin-bottom: 10px;
    }

    /* Ajusta o topo da seção de Especialidades */
    #especialidades {
        padding-top: 30px; /* Diminui a distância entre o título e a seção anterior */
    }

.split-content p {
    margin-bottom: 20px; /* Cria um espaço de 25px entre um parágrafo e outro */
    line-height: 1.8;    /* Melhora a leitura ao dar mais respiro entre as linhas */
}

/* Remove a margem do último parágrafo para não empurrar o link/botão para baixo demais */
.split-content p:last-of-type {
    margin-bottom: 30px; 
}

/* Horários de Atendimento */

/* Ajuste de Cores (Zigue-Zague) */
.info-pratica {
    background-color: #F6F4EF !important; /* Fundo Off-white para destaque */
    padding: 60px 0;
    text-align: center;
}

/* CONTAINER PRINCIPAL DO GRID */
.info-grid {
    display: flex;                /* Ativa o alinhamento lado a lado */
    justify-content: space-around; /* Distribui os itens com espaço entre eles */
    align-items: flex-start;
    gap: 40px;                    /* Espaço entre Horários e Atendimento */
    max-width: 1000px;
    margin: 0 auto;               /* Centraliza o grid na página */
}

/* AJUSTE DOS ITENS INDIVIDUAIS */
.info-item {
    flex: 1;                      /* Faz ambos ocuparem o mesmo espaço */
    text-align: center;           /* Centraliza ícones, títulos e textos */
}

/* ESTILO DOS TÍTULOS E ÍCONES */
.info-item h3 {
    font-family: 'Playfair Display', serif !important;
    color: #4F6D6A;
    font-size: 1.6rem;
    
    /* O truque do alinhamento perfeito: */
    display: flex;
    width: 220px;                 /* Cria uma caixa do mesmo tamanho para os dois */
    margin: 0 auto 15px auto;     /* Centraliza essa caixa na tela */
    justify-content: flex-start;  /* Joga o ícone e o texto para o começo da caixa */
    gap: 12px;                    /* Espaço entre o ícone e a palavra */
}

/* Garante que os ícones ocupem o mesmo espaço na esquerda */
.info-item h3 i {
    width: 30px;
    text-align: center;
}

/* ESTILO DO TEXTO */
.info-item p {
    font-family: 'Lora', serif !important; /* Fonte do corpo */
    color: #2F2F2F;
    line-height: 1.6;
    margin-bottom: 5px;           /* Diminui o espaço entre as linhas de texto */
}

/* RESPONSIVIDADE (Celular) */
@media (max-width: 768px) {
    .info-grid {
        flex-direction: column;   /* No celular, eles voltam a ficar um sobre o outro */
        gap: 60px;
    }
}

/* Dispositivos Móveis - Footer */
.footer {
    background-color: var(--secondary); /* Usa a cor de fundo suave que definimos */
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px !important; /* Reduz o espaço global entre todos os blocos do rodapé */
}

.footer-info h3 {
    color: var(--primary);
    margin-bottom: 5px;
    margin-top: 0 !important;   /* Remove qualquer margem superior */
}

.footer-crp-status {
    font-size: 0.85rem;
    line-height: 1.4; /* Reduzido de 1.6 para compactar as linhas internas */
    color: var(--text-color);
    max-width: 600px;
    opacity: 0.9;
    margin-top: 5px !important; /* REDUZA AQUI: de 25px para 5px */
    margin-bottom: 0 !important;
}

.status-badge {
    color: #28a745;
    font-weight: 600;
    margin-top: 2px !important; /* REDUZA AQUI: de 10px para 2px */
}

.footer-social {
    margin-top: 0 !important;
    display: flex;
    gap: 15px;
    justify-content: center;
    padding-top: 0 !important; /* ZERADO: remova o respiro superior dos ícones */
    padding-bottom: 5px;       /* Mantém apenas um toque no fundo */
}
/* Ajuste para o Dark Mode */
body.dark-mode .footer {
    background-color: #1a1a1a;
    border-top-color: rgba(255,255,255,0.1);
}

body.dark-mode .status-badge {
    color: #4cd137;
}
/* Se você estiver usando parágrafos dentro do rodapé, 
zere a margem inferior do texto de copyright */
.footer-copyright p {
    margin-bottom: 0 !important; /* Força a remoção da margem padrão */
    padding-bottom: 5px; /* Controla o espaço via padding, que é mais preciso */
}

.social-icon {
    font-size: 1.5rem; /* Tamanho do ícone */
    transition: transform 0.3s ease, color 0.3s ease;
    color: var(--primary); /* Cor padrão do seu site */
    text-decoration: none;
    display: inline-block;
    line-height: 1 !important;
}

/* Cor específica para Instagram ao passar o mouse */
.social-icon.instagram:hover {
    color: #E1306C; /* Rosa oficial do Instagram */
    transform: scale(1.1);
}

/* Cor específica para LinkedIn ao passar o mouse */
.social-icon.linkedin:hover {
    color: #0077b5; /* Azul oficial do LinkedIn */
    transform: scale(1.1);
}

/* Ajuste para o Dark Mode (opcional se quiser ícones mais claros) */
body.dark-mode .social-icon {
    color: var(--text-color);
}
/* RESET DE EMERGÊNCIA - COLOQUE NO FINAL DO ARQUIVO */
footer, .footer {
    padding-top: 5px !important;    /* Força o topo a encolher */
    padding-bottom: 5px !important; /* Força o fundo a encolher */
    height: auto !important;
    min-height: 0 !important;
}

.footer-content {
    gap: 0 !important; /* Elimina qualquer espaço automático entre os itens */
}

/* Zera as margens de TODOS os elementos dentro do rodapé */
.footer * {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* Caso exista uma div de container que você não viu, isso a "doma" */
.container.footer-content {
    padding: 0 !important;
    margin: 0 auto !important;
}

/* CONSERTO DEFINITIVO DA FRASE DE IMPACTO */
/* FORÇA O FUNDO VERDE E A COR DO TEXTO */
.quote-section {
    background-color: #4F6D6A !important; /* Verde Profundo oficial */
    padding: 90px 20px !important;
    text-align: center !important;
    border: none !important; /* Remove bordas desnecessárias */
    display: block !important;
}

.main-quote {
    color: #F6F4EF !important; /* Texto em Off-white para dar leitura */
    font-family: 'Playfair Display', serif !important; /* Fonte elegante para citações */
    font-size: 2.4rem !important;  /* Tamanho destacado */
    font-style: italic !important;
    margin: 0 auto !important;
    border: none !important;  /* Remove bordas desnecessárias */
    max-width: 850px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* Garante que o texto não suma no celular */
@media (max-width: 768px) {
    section.quote-section .main-quote {
        font-size: 1.6rem !important;
    }
}
/* ============================================================
   🌙 MODO ESCURO GERAL (DARK MODE FULL SITE)
   Coloque isso sempre no final do arquivo CSS para sobrepor as outras regras
   ============================================================ */

/* 1. FUNDO GERAL E TEXTO BASE */
body.dark-mode {
    background-color: #121212 !important; /* Grafite quase preto */
    color: #E0E0E0 !important;
}

/* 2. CABEÇALHO E NAVEGAÇÃO (HEADER) */
body.dark-mode header {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode .logo {
    color: #A3C4C1 !important; /* Verde mais claro para dar leitura */
}
body.dark-mode .logo-icon {
    background-color: #262626 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode nav a {
    color: #E0E0E0 !important;
}
body.dark-mode nav a:hover {
    color: #A3C4C1 !important;
}

/* 3. CORES DE FUNDO DAS SEÇÕES (SOBREPONDO AS TABELAS) */
body.dark-mode .section-split {
    background-color: #1A1A1A !important; /* Escuro base */
}
body.dark-mode .alternate-bg {
    background-color: #262626 !important; /* Escuro um tom mais claro para destacar */
}
body.dark-mode .accent-bg {
    background-color: #2A2A2A !important;
}
body.dark-mode .bg-light {
    background-color: #1A1A1A !important;
}

/* 4. PADRONIZAÇÃO DE TÍTULOS E TEXTOS EM TODAS AS SEÇÕES */
/* Isso cobre #sobre, #abordagem, #publico, #online, etc. */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .hero-content h1,
body.dark-mode .split-content h2,
body.dark-mode #sobre .split-content h2,
body.dark-mode #abordagem .split-content h2,
body.dark-mode #publico .split-content h2,
body.dark-mode #online .split-content h2 {
    color: #F4F7F6 !important; /* Branco/Gelo para todos os títulos */
}

body.dark-mode p,
body.dark-mode .hero-content p,
body.dark-mode .split-content p,
body.dark-mode #sobre .split-content p,
body.dark-mode #abordagem .split-content p,
body.dark-mode #publico .split-content p,
body.dark-mode #online .split-content p,
body.dark-mode .lista-beneficios li,
body.dark-mode .publico-item {
    color: #C4C4C4 !important; /* Cinza claro suave para leitura de textos longos */
}

/* 5. ÍCONES E LINKS ESPECÍFICOS */
body.dark-mode .lista-beneficios i,
body.dark-mode .publico-item i {
    color: #A3C4C1 !important; /* Ícones em verde clarinho */
}
body.dark-mode .link-destaque {
    color: #A3C4C1 !important;
}
body.dark-mode .link-destaque:hover {
    color: #FFFFFF !important;
}

/* 6. DÚVIDAS FREQUENTES (FAQ) */
body.dark-mode details {
    background-color: #262626 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}
body.dark-mode summary {
    color: #A3C4C1 !important; /* Pergunta */
}
body.dark-mode details p {
    color: #C4C4C4 !important; /* Resposta */
}

/* 7. SEÇÃO HORÁRIOS E ATENDIMENTO (INFO-PRATICA) */
body.dark-mode .info-pratica {
    background-color: #1A1A1A !important;
}
body.dark-mode .info-item h3 {
    color: #A3C4C1 !important;
}
body.dark-mode .info-item p {
    color: #C4C4C4 !important;
}

/* 8. CARDS (ESPECIALIDADES) */
body.dark-mode .card {
    background-color: #262626 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
body.dark-mode .card h3 {
    color: #F4F7F6 !important;
}
body.dark-mode .card p {
    color: #C4C4C4 !important;
}
body.dark-mode .card i {
    color: #A3C4C1 !important;
}

/* 9. RODAPÉ (FOOTER) */
body.dark-mode .footer {
    background-color: #121212 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}
body.dark-mode .footer-info h3 {
    color: #A3C4C1 !important;
}
body.dark-mode .footer-crp-status,
body.dark-mode .footer-copyright p {
    color: #888888 !important; /* Cinza mais escuro para notas de rodapé */
}
body.dark-mode .social-icon {
    color: #C4C4C4 !important;
}
/* 10. CONSERTO DA FRASE DE IMPACTO NO MODO ESCURO */
body.dark-mode .quote-section {
    background-color: #1A1A1A !important; /* Fundo grafite combinando com o resto do site */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important; /* Linha sutil para separar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .main-quote {
    color: #A3C4C1 !important; /* Verde Sálvia clarinho para a frase brilhar no escuro */
}