/* ==========================================================================
   CORE VARIABLES - TEMA PADRÃO (CLÁSSICO DOURADO & PETRÓLEO)
   ========================================================================== */

:root {
    /* Paleta oficial */
    --primary: #3E4F73; /* Azul institucional (oficial) */
    --secondary: #A8CDBB; /* Verde saúde (oficial) */
    --support-azul: #6F86A8; /* Azul claro (apoio) */
    --support-verde: #9FC7B1; /* Verde científico (apoio) */
    --neutral-white: #FFFFFF;
    /* Cores oficiais de redes sociais (mantém aparência reconhecível) */
    --social-instagram: linear-gradient(45deg, #feda75 0%, #dd2a7b 25%, #8134af 50%, #515bd4 100%);
    --social-facebook: #1877F2;
    --social-whatsapp: #25D366;

    /* Variáveis legadas mapeadas para compatibilidade */
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #5F6F82; /* cor de texto principal (parágrafos) */
    --petroleo-escuro: #4A4A4A; /* texto escuro alternativo */
    --petroleo-claro: var(--support-azul);
    --branco: var(--neutral-white);
    --cinza: #CCCCCC;
    --transition: 0.3s ease;
    --margem-secao: 80px;
    --margem-secao-mobile: 40px;
    /* Variáveis usadas por componentes/rodapé */
    --texto-Tamanho-Sub: 1rem;
    --texto-cor-padrao: rgba(255,255,255,0.92);
    /* Tipografia padrão */
    --font-body: 'Open Sans', sans-serif;
    --font-headings: 'Playfair Display', serif;
    --fs-base: 1rem; /* 16px */
    --fs-sm: 0.875rem;
    --fs-lg: 1.125rem;
    --h1: clamp(2.2rem, 4.5vw, 4.2rem);
    --h2: clamp(1.6rem, 3.2vw, 2.3rem);
    --h3: clamp(1.2rem, 2.4vw, 1.5rem);
    --line-body: 1.6;
}

/* As classes .theme-* sobrescrevem esses valores em runtime */
:root.theme-default {}

/* ==========================================================================
   GLOBAL
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--neutral-white);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--line-body);
    color: var(--petroleo);
}

h1, h2, h3 {
    margin: 0;
}

h2 {
    font-family: var(--font-headings);
    font-size: var(--h2);
    color: var(--primary);
    margin-bottom: 25px;
}

section {
    padding: var(--margem-secao) 60px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 40px;
    background-color: var(--primary);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.topo-esquerda {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo {
    width: 60px;
    height: 60px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.topo-titulo {
    display: flex;
    flex-direction: column;
}

.topo-nome {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.topo-subtitulo {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.05;
}

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

.menu a {
    margin: 0 12px;
    text-decoration: none;
    color: var(--neutral-white);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    padding-bottom: 4px;
}

.menu a:hover {
    color: var(--neutral-white);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.menu .destaque {
    color: var(--neutral-white);
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    padding: 6px 12px;
    border-radius: 8px;
}

.menu .destaque:hover {
    background: var(--secondary);
    color: var(--petroleo);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(76,95,135,0.12);
}

.topo-titulo {
    display: flex;
    flex-direction: column;
}

.topo-nome {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.topo-subtitulo {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    margin-top: 3px;
    line-height: 1.05;
}

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

.menu a {
    margin: 0 12px;
    text-decoration: none;
    color: var(--neutral-white);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    padding-bottom: 4px;
}

.menu a:hover {
    color: var(--neutral-white);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.menu .destaque {
    color: var(--neutral-white);
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    padding: 6px 12px;
    border-radius: 8px;
}

.menu .destaque:hover {
    background: var(--secondary);
    color: var(--petroleo);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(76,95,135,0.12);
}

/* Theme switcher */

.theme-switcher-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.8rem;
}

.theme-switcher-wrapper label {
    opacity: 0.7;
}

.theme-switcher {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.25);
    color: var(--branco);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.theme-switcher:hover {
    border-color: var(--primary);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;
    background-image: url("../img/foto_Capa.png");
    background-size: cover;
    background-position: center;
    padding: 140px 80px 100px 80px;
    min-height: 520px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* reforçar o overlay para melhorar contraste sobre a imagem de fundo */
    background: rgba(0, 0, 0, 0.65);
}

.hero-conteudo {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
}

.hero-texto {
    max-width: 620px;
    margin-left: 10px;
}

.hero-texto h1 {
    font-family: var(--font-headings);
    font-size: var(--h1);
    line-height: 1.02;
    color: var(--neutral-white);
    margin-bottom: 14px;
    font-weight: 700;
    /* sombra mais pronunciada para garantir leitura sobre áreas claras */
    text-shadow: 0 12px 28px rgba(0,0,0,0.65);
}

/* Garantir que TODO texto dentro da capa (hero) seja branco para máxima legibilidade */
.hero, .hero * {
    color: var(--neutral-white) !important;
}

.oab {
    display: inline-block;
    font-size: 1.05rem;
    opacity: 1;
    margin-bottom: 10px;
    /* manter a cor secundária, mas usar texto branco para contraste */
    background: var(--secondary);
    color: var(--neutral-white);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
}
    /* Ícone pequeno dentro do botão de agendamento (removido de inline styles no HTML) */
    .whatsapp-cta > img {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
    }

.especialidade {
    margin-bottom: 28px;
    font-size: 1.12rem;
    color: rgba(255,255,255,0.95);
}

/* Garantir legibilidade forte do parágrafo na capa (sobre imagem com overlay) */
.hero .hero-texto .especialidade {
    color: var(--neutral-white) !important;
    text-shadow: 0 6px 18px rgba(0,0,0,0.55);
    font-size: 1.125rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .hero {
        padding: 100px 30px 70px 30px;
        min-height: 420px;
    }

    .hero-texto h1 {
        font-size: 2.4rem;
        line-height: 1.08;
        text-shadow: 0 8px 18px rgba(0,0,0,0.6);
    }

    .hero-texto {
        max-width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.botao-gold {
    display: inline-block;
    background-color: var(--primary);
    color: var(--branco);
    padding: 14px 36px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: var(--transition);
    margin-top: 5px;
}

.botao-gold:hover {
    background-color: var(--secondary);
    color: var(--petroleo);
}

/* ==========================================================================
   REDES SOCIAIS
   ========================================================================== */

.redes-sociais {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.redes-sociais a {
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Normalização global dos ícones */
.redes-sociais img,
.contato-redes img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 🔑 mantém proporção */
    border-radius: 8px;
    transition: transform 0.25s ease, filter 0.25s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Classe específica para ícones sociais: controla tamanho do ícone sem depender do diâmetro do círculo */
.social-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    max-width: none !important;
    object-fit: contain !important;
}

.redes-sociais img:hover,
.contato-redes img:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

/* ==========================================================================
   SEÇÕES INTERNAS
   ========================================================================== */

.sobre,
.areas,
.especialidades {
    background-color: var(--petroleo-claro);
    padding: 65px 55px;
    border-radius: 12px;
    margin: 70px auto;
    width: 85%;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
}
.sobre,
.areas,
.especialidades {
    border: 1px solid var(--primary); /* borda azul seguindo paleta institucional */
}

/* Depoimentos */
.depoimentos {
    padding: var(--margem-secao) 60px; /* usa padding padrão das seções */
    margin: 70px auto; /* mesma margem que .sobre/.areas/.especialidades */
    width: 85%;
}
.depoimentos h2 {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 20px;
}
.depoimentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: stretch; /* garante que os itens preencham a mesma altura */
    grid-auto-rows: 1fr; /* faz todas as linhas terem a mesma altura */
}
.depoimento-card {
    background: var(--petroleo-claro);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    height: 100%; /* necessário para preencher a célula do grid */
}
.depoimento-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    border: 3px solid rgba(255,255,255,0.06);
}
.depoimento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.depoimento-card blockquote {
    color: rgba(255,255,255,0.95);
    margin: 0 0 8px 0;
    font-style: italic;
    line-height: 1.6;
    flex: 1; /* faz o texto ocupar o espaço disponível, alinhando os cites embaixo */
}
.depoimento-card cite {
    display: block;
    color: var(--secondary);
    font-weight: 700;
}

.areas ul,
.especialidades ul {
    list-style: none;
    padding-left: 36px; /* mantém alinhamento geral */
    margin: 0;
}

.areas ul li,
.especialidades ul li {
    position: relative;
    padding-left: 12px; /* espaço interno para o conteúdo */
    margin-bottom: 10px;
    line-height: 1.9rem;
}

.areas ul li::before,
.especialidades ul li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Títulos sobre cartões/áreas com fundo colorido: melhorar contraste */
.sobre h2,
.areas h2,
.especialidades h2 {
    color: var(--neutral-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Legibilidade para textos longos */
.sobre p,
.areas p,
.especialidades p,
.depoimento-card blockquote,
.hero-texto .especialidade {
    max-width: 66ch;
    line-height: 1.65;
    font-size: 1.03rem;
    color: rgba(255,255,255,0.95); /* pensado para fundos escuros/azuis */
}

/* Texto padrão em seções claras (mantém cor original) */
section:not(.sobre):not(.areas):not(.especialidades) p {
    color: var(--petroleo);
    line-height: 1.6;
}

/* Estilos sugeridos para seção de contato (opcionais; HTML precisa das classes) */
.contato .contato-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch; /* garante que os itens do grid estiquem igualmente */
    grid-auto-rows: 1fr; /* força todas as linhas a terem altura igual */
}
.contato .contato-card {
    background: rgba(255,255,255,0.03);
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    height: 100%; /* preenche a célula do grid */
    border: 3px solid var(--primary); /* borda azul institucional mais visível */
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    /* sutil realce em torno da borda para melhorar contraste sobre fundos claros */
    box-shadow: 0 6px 18px rgba(62,79,115,0.06);
}
.contato .contato-card .whatsapp-cta {
    margin-top: auto; /* empurra o CTA para o rodapé do card quando houver espaço */
}
.contato .whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--social-whatsapp);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(37,211,102,0.12);
    align-self: flex-start; /* evita que o botão estique em containers flex */
    flex: 0 0 auto; /* não crescer nem encolher */
    white-space: nowrap; /* evita quebra de texto e alongamento por wrap */
}

.contato a:focus,
.botao-gold:focus {
    outline: 3px solid rgba(62,79,115,0.18);
    outline-offset: 3px;
}

/* Destacar texto das seções sem alterar o background */
.sobre h2,
.areas h2,
.especialidades h2,
.contato h2 {
    /* Títulos sobre fundos azuis: usar branco para contraste */
    color: var(--neutral-white);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Textos longos: limitar largura e aumentar leitura */
.sobre p,
.areas p,
.especialidades p,
.contato p {
    color: rgba(255,255,255,0.95); /* mantém contraste sobre fundo escuro */
    line-height: 1.95;
    font-size: 1.03rem;
    max-width: 66ch; /* evita linhas muito longas */
    margin-bottom: 0.9rem;
}

.areas ul li,
.especialidades ul li {
    color: var(--neutral-white);
    font-weight: 500;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 28px; /* aumenta distância do texto para o bullet */
}

/* bullet sutil usando pseudo-elemento com cor de apoio (apenas um) */
.areas ul li::before,
.especialidades ul li::before {
    content: '';
    width: 10px; /* aumentado para melhor visibilidade */
    height: 10px;
    background: var(--secondary);
    border-radius: 50%;
    position: absolute;
    left: 10px; /* mantém margem interna e cria separação do texto */
    top: calc(50% - 5px); /* centraliza verticalmente com base na altura do bullet */
    box-shadow: 0 0 0 4px rgba(168,205,187,0.06); /* halo sutil para contraste */
}

.contato p strong {
    color: var(--secondary);
}

/* ===== Seção Contato: melhorar CTA e acessibilidade ===== */
.contato {
    /* mantém background atual */
}

/* Tornar link do WhatsApp destaque visual sem alterar estrutura */
.contato a[href*="wa.me"] {
    display: inline-block;
    background: var(--secondary);
    color: var(--petroleo-escuro);
    padding: 10px 14px;
    border-radius: 28px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(62,79,115,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.contato a[href*="wa.me"]:hover,
.contato a[href*="wa.me"]:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(62,79,115,0.12);
}

/* Corrige ilegibilidade: garante que links do WhatsApp mantenham texto legível no hover */
.contato a[href*="wa.me"],
.contato a[href*="wa.me"]:link {
    background: var(--secondary);
    color: var(--petroleo-escuro);
}
.contato a[href*="wa.me"]:hover,
.contato a[href*="wa.me"]:focus {
    color: var(--neutral-white) !important; /* força branco no hover */
    background: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(62,79,115,0.12);
}

/* Garantir legibilidade do CTA WhatsApp (prioriza cor branca no hover) */
.contato .contato-card .whatsapp-cta,
.contato .contato-card .whatsapp-cta:link {
    background: var(--social-whatsapp);
    color: #fff;
}
.contato .contato-card .whatsapp-cta:hover,
.contato .contato-card .whatsapp-cta:focus {
    color: #fff;
    background: #1fbf4a; /* leve escurecimento para hover */
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(37,211,102,0.16);
}

/* Melhora foco para navegação por teclado */
.contato a:focus,
.botao-gold:focus,
.menu a:focus {
    outline: 3px solid rgba(168,205,187,0.18);
    outline-offset: 4px;
}



/* ==========================================================================
   WHATSAPP FIXO
   ========================================================================== */

.whats-flutuante img {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.whats-flutuante img:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

/* Footer rules moved to css/06_footer.css */

/* Mobile footer rules moved to css/06_footer.css */

/* Efeito moderno para links na seção de contato */
.contato a,
.contato-info a {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    transition: color 0.25s ease, transform 0.25s ease;
    font-weight: 600;
}

.contato a::after,
.contato-info a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--support-azul));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
    border-radius: 3px;
}

.contato a:hover::after,
.contato a:focus::after,
.contato-info a:hover::after,
.contato-info a:focus::after {
    transform: scaleX(1);
}

.contato a:hover,
.contato-info a:hover {
    color: var(--secondary);
}

.contato a:focus,
.contato-info a:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(184,214,196,0.18);
    border-radius: 6px;
}

/* Contato - redes sociais com cores oficiais */
.contato-redes {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.contato-redes {
    flex-wrap: nowrap; /* manter ícones alinhados */
}

.contato-redes a {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    border: none;
    flex: 0 0 auto;
}

.contato-redes a img {
    width: 20px;
    height: 20px;
    max-width: none;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.14)) contrast(1.06);
    opacity: 1;
}

/* Brand backgrounds */
.contato-redes a[href*="instagram"] {
    background: var(--social-instagram);
}

.contato-redes a[href*="facebook"] {
    background: var(--social-facebook);
}

.contato-redes a:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}

/* .rodape-copy rules moved to css/06_footer.css */

/* ==========================================================================
   THEMES – PALETAS ORIGINAIS DO PROJETO
   ========================================================================== */

/* 1) Tema padrão já está em :root e .theme-default */

/* 2) Azul Supremo */
:root.theme-azul-supremo {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #0A2342;
    --petroleo-escuro: #071728;
    --petroleo-claro: #123A63;
    --branco: #FFFFFF;
    --cinza: #D9D9D9;
}

/* 3) Preto Vermelho Elegante */
:root.theme-preto-vermelho {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #0A0A0A;
    --petroleo-escuro: #000000;
    --petroleo-claro: #1A1A1A;
    --branco: #FFFFFF;
    --cinza: #BFBFBF;
}

/* 4) Verde Justiça */
:root.theme-verde-justica {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #0F2F2F;
    --petroleo-escuro: #0B2222;
    --petroleo-claro: #154040;
    --branco: #FFFFFF;
    --cinza: #D0D0D0;
}

/* 5) Bordô Aristocrata */
:root.theme-bordo-aristocrata {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #2C0E14;
    --petroleo-escuro: #1E090D;
    --petroleo-claro: #40141C;
    --branco: #FFFFFF;
    --cinza: #D6D6D6;
}

/* 6) Cinza Platina Royal */
:root.theme-cinza-platina {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #1B1F23;
    --petroleo-escuro: #131619;
    --petroleo-claro: #2A2F33;
    --branco: #FFFFFF;
    --cinza: #E0E0E0;
}

/* 7) Creme Ouro */
:root.theme-creme-ouro {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #F1ECE2;
    --petroleo-escuro: #E3DDD1;
    --petroleo-claro: #FFFFFF;
    --branco: #000000;
    --cinza: #4F4F4F;
}

/* 8) Branco Azul Minimalista */
:root.theme-branco-azul {
    --dourado: var(--primary);
    --dourado-hover: var(--secondary);
    --petroleo: #FFFFFF;
    --petroleo-escuro: #F5F5F5;
    --petroleo-claro: #FFFFFF;
    --branco: #000000;
    --cinza: #7A7A7A;
}

/* ==========================================================================
     AJUSTES DE LEGIBILIDADE E CONTATO (APLICADOS: 2026-01-12)
     --------------------------------------------------------------------------
     Melhora contraste de títulos, legibilidade de parágrafos, listas e CTAs
     Mantém paleta azul+verde e estrutura existente.
     ========================================================================== */

/* Títulos mais legíveis em cartões azuis */
.sobre h2,
.areas h2,
.especialidades h2,
.depoimentos h2,
.contato h2 {
    color: var(--secondary);
    font-weight: 800;
    font-size: clamp(1.5rem, 2vw + 0.8rem, 2.3rem);
    line-height: 1.05;
    text-shadow: 0 4px 18px rgba(0,0,0,0.18);
    margin-bottom: 18px;
}

/* Legibilidade para blocos longos */
.sobre p,
.areas p,
.especialidades p,
.depoimento-card blockquote {
    color: rgba(255,255,255,0.96);
    font-size: clamp(1rem, 1.6vw, 1.06rem);
    line-height: 1.75;
    max-width: 66ch;
    margin-bottom: 1rem;
}

/* Texto em seções claras */

/* Footer rules moved to css/06_footer.css */
/* See css/06_footer.css for all .rodape, .rodape-inner, .rodape-social-center, #iconesFooter and related rules. */

section:not(.sobre):not(.areas):not(.especialidades) p {
    color: var(--petroleo);
    font-size: clamp(0.98rem, 1.3vw, 1.02rem);
    line-height: 1.7;
    max-width: 70ch;
}

/* Listas de serviços refinadas */
.areas ul,
.especialidades ul {
    padding-left: 1.1rem;
    margin-top: 0.6rem;
}

.areas ul li,
.especialidades ul li {
    margin-bottom: 0.9rem;
    padding-left: 1.2rem;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
    line-height: 1.6;
    position: relative;
}

/* Bullet sutil */
.areas ul li::before,
.especialidades ul li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(159,199,177,0.06);
}

/* Contato: CTAs e cards */
.contato .contato-card {
    border: 3px solid var(--primary); /* borda azul institucional mais visível */
    background: rgba(255,255,255,0.02);
    padding: 16px;
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 6px 18px rgba(62,79,115,0.06);
}

/* Destaque: títulos dos cards em verde da paleta */
.contato .contato-card p strong,
.contato .contato-card > p > strong {
    color: var(--secondary);
    font-weight: 800;
}

/* Aplicar mesmo destaque verde em blocos de depoimentos */
.depoimento-card cite,
.depoimentos .depoimento-card cite {
    color: var(--secondary);
    font-weight: 700;
}

/* Aplicar destaque verde também em títulos/autor de serviços e legendas */
.areas ul li strong,
.especialidades ul li strong,
.service-author,
.autor-servico,
figcaption,
.figure-caption,
.caption {
    color: var(--secondary);
    font-weight: 700;
}

.contato .contato-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(62,79,115,0.12);
    border-color: color-mix(in srgb, var(--primary) 80%, black 20%);
}

.contato .whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--social-whatsapp);
    color: #fff;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37,211,102,0.12);
}

.contato .whatsapp-cta:focus {
    outline: 3px solid rgba(37,211,102,0.18);
    outline-offset: 3px;
}

/* Ícones sociais consistentes (exclui footer-specific .rodape-social; movido para 06_footer.css) */
.redes-sociais a,
.contato-redes a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.contato-redes a img,
.redes-sociais a img { width:20px;height:20px; }

/* Pequenos ajustes responsivos para o corpo do texto */
/* Mobile footer rules moved to css/06_footer.css */

.redes-sociais a,
.contato-redes a { width: 38px; height: 38px; }

/* Ajustes específicos para botões flutuantes em telas pequenas */
@media (max-width: 420px) {
    .whats-flutuante img {
        width: 48px;
        height: 48px;
        bottom: 14px;
        right: 12px;
    }
    .whatsapp-cta {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}

/* Smooth scrolling + offset to compensate sticky header
   Ensures anchor targets (ex: #areas) are visible below the sticky header */
html { scroll-behavior: smooth; }
:root { --header-offset: 96px; }
section { scroll-margin-top: var(--header-offset); }