/* =========================================================================
   MODELO — ESCRITÓRIO DE ADVOCACIA

   Sem build, sem framework, sem npm install. A ordem do arquivo é a ordem
   em que a página é lida: base, layout, cada seção, e por último as
   exceções (a11y, responsivo, impressão, .no-js).

   ------------------------------------------------------------------------
   IDENTIDADE VISUAL — e por que ela é diferente da da clínica
   ------------------------------------------------------------------------
   A paleta verde com Fraunces é da Dra. Carol. Aqui é azul-ferro com
   Source Serif, e a diferença não é decorativa.

   Um escritório e uma clínica de estética não podem parecer a mesma
   coisa. Quem contrata advogado e quem procura procedimento estético não
   são o mesmo público, e a página que trata os dois com a mesma estética
   erra os dois. O azul é o que o setor usa por hábito e por ser lido como
   institucional; a serifada de desenho sóbrio segura o tom sem cair no
   dourado de escritório antigo.

   O resto da arquitetura é a mesma da clínica de propósito: barra fixa,
   hero em duas colunas, lista editorial numerada, rodapé fechado. O que
   muda é a assinatura — e o que muda mesmo são as regras de conteúdo.
   ========================================================================= */

:root {
    --fundo: #f4f5f7;           /* cinza-azulado muito claro */
    --fundo-2: #eaecf0;
    --branco: #fdfdfd;
    --tinta: #1b2430;           /* azul-ferro quase preto */
    --tinta-2: #48525f;
    --tinta-3: #7c8794;
    --azul: #2c4a6b;            /* cor da marca */
    --azul-escuro: #1b3249;
    --azul-profundo: #12202f;   /* fundo do hero e do rodapé */
    --azul-claro: #dce5ee;
    --latão: #8a6524;           /* acento — um só, e só no título de seção */
    --latão-claro: #c9a45f;
    /*
     * O latão desta paleta é escuro de propósito. O dourado claro
     * (#c9a45f) é bonito e passa em tela grande, mas como texto miúdo
     * sobre fundo claro dá 3,9:1 — abaixo dos 4,5:1 que a WCAG exige.
     * A etiqueta de seção é justamente o texto que fica em 11px. Aqui
     * o acento é o fio e o numeral; o texto miúdo usa este.
     */
    --linha: #dcdfe4;
    --tinta-3: #6b7684;         /* cinza de apoio — 4,7:1 sobre --fundo */

    --serif: 'Source Serif 4', Georgia, serif;
    --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --raio: 3px;
    --raio-g: 8px;
    --raio-g-gg: 14px;

    /*
     * Sombras em três degraus. A de 1px é para elemento que recebe o
     * cursor (botão, cartão); a média é para bloco em repouso; a forte é
     * para a foto do hero, que é o único elemento que compete com o
     * título pela atenção.
     *
     * As duas primeiras carregam um anel de 1px translúcido na cor da
     * tinta. Sombra sozinha some em tela clara — o anel é o que dá a
     * borda sem escurecer o conteúdo.
     */
    --sombra: 0 1px 2px rgba(18, 32, 47, .05), 0 2px 10px rgba(18, 32, 47, .04);
    --sombra-media: 0 2px 4px rgba(18, 32, 47, .04), 0 12px 32px rgba(18, 32, 47, .08);
    --sombra-forte: 0 30px 70px -22px rgba(18, 32, 47, .38), 0 4px 12px rgba(18, 32, 47, .07);
    --sombra-foco: 0 0 0 3px rgba(44, 74, 107, .22);

    --largura: 1140px;
    --topo-nav: 76px;
}

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

/*
 * `[hidden]` precisa desta regra, e ela não é redundante.

 O atributo `hidden` é puro estilo do navegador (`display: none`), então
 QUALQUER `display` declarado no CSS vence o atributo. Vários blocos deste
 site usam `hidden` para sumir com o que ainda não tem dado — a OAB, o
 horário, o endereço, as áreas de atuação, o logo do rodapé — e quase todos
 têm `display` para o layout funcionar. Sem esta linha, o `hidden` vira
 decorativo e o elemento aparece vazio na tela.

 Foi o que aconteceu na primeira conferência do site da clínica: um pílula
 rosa vazia embaixo do bloco "sobre", que era a credencial esperando o CRM.
 Aqui o efeito seria pior, porque as seções que faltam são justamente as
 que mais importam: a de áreas de atuação e a de reputação.
 */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    /* Sem isso, o link do menu esconde o topo do título embaixo da barra
       fixa. A âncora cai 76px acima do alvo. */
    scroll-padding-top: var(--topo-nav);
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* Seleção de texto na cor da marca. O padrão do Windows é azul de
   sistema, que em página de fundo cinza fica lavado e some no texto
   cinza-escuro logo ao lado. */
::selection {
    background: var(--azul-claro);
    color: var(--tinta);
    text-shadow: none;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); letter-spacing: -.015em; }
h2 em { font-style: italic; color: var(--azul); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .88em;
    background: rgba(27, 36, 48, .07);
    padding: .1em .35em;
    border-radius: 3px;
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 96px 0; }
.section:nth-of-type(even) { background: var(--branco); }

/* Ritmo vertical: a primeira seção depois do hero ganha respiro maior,
   porque a pessoa acabou de passar pelo bloco mais alto da página e o
   olho precisa de folga antes do próximo título. A seção de contato
   encurta no pé, para o texto não brigar com a quebra do rodapé. */
.hero + .section { padding-top: 110px; }
.contato { padding-bottom: 78px; }

/*
 * TÍTULO DE SEÇÃO — à esquerda, com fio.
 *
 * Centralizado com etiquetinha em cima é o cabeçalho padrão de página
 * institucional. Aqui o título encosta na margem e um fio atravessa a
 * linha: o texto tem coluna para ler, não centro para liberar espaço.
 *
 * O fio tem um trecho de latão na ponta. Um risco que atravessa a linha
 * toda é decoração; um risco que começa na cor do acento e apaga para o
 * cinza aponta o título, como um traço de lápis na margem.
 */
.section-header {
    position: relative;
    max-width: 720px;
    margin: 0 0 52px;
    padding-top: 22px;
    border-top: 1px solid var(--linha);
}
.section-header::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 68px;
    height: 2px;
    background: var(--latão);
}
.section-desc { color: var(--tinta-2); margin-top: 14px; }

.section-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--latão);
    margin-bottom: 12px;
}
/* A etiqueta é o texto miúdo mais exposto da página: 11px, peso 600 e
   maiúsculas (que reduzem a altura de x e achatam a contraforma). Com o
   peso 600 ela passa dos 4,5:1 mesmo sobre o branco puro da seção
   alternada — era exatamente a diferença entre 4,19 e o corte. */
.section-tag { font-weight: 700; }

/* O itálico do título é a parte da frase que o olho deve puxar. Com o
   mesmo peso e o mesmo tamanho, o itálico não se destaca — é só uma
   palavra inclinada. A cor do azul sozinha não bastava no fundo claro. */
.section-title em,
.section-title + .section-desc em {
    font-style: italic;
    color: var(--azul);
}

/* Link "pular para o conteúdo": fica fora da tela até receber foco. */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--tinta);
    color: var(--branco);
    padding: 12px 20px;
    border-radius: 0 0 var(--raio) 0;
    text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------------------------------------------------------------
   BOTÕES — canto reto
   --------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                transform .18s ease, box-shadow .2s ease;
}

/*
 * Botão que sobe um pixel e ganha sombra.
 *
 * O `transform` é translations apenas — nada de `scale`. Escalar o texto
 * junto com a caixa deixa a bordapixelada no navegador em Android, e é
 * justamente no celular que a maior parte do tráfego deste site vai
 * entrar.
 */
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-whatsapp {
    background: var(--azul-escuro);
    color: var(--branco);
    box-shadow: 0 1px 2px rgba(18, 32, 47, .16), 0 8px 20px -8px rgba(18, 32, 47, .5);
}
.btn-primary:hover, .btn-whatsapp:hover {
    background: var(--azul);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(18, 32, 47, .18), 0 14px 28px -10px rgba(18, 32, 47, .55);
}

.btn-outline {
    border-color: var(--linha);
    color: var(--tinta);
    background: transparent;
}
.btn-outline:hover {
    border-color: var(--azul-escuro);
    color: var(--azul-escuro);
    background: var(--branco);
}

.btn-google {
    background: var(--branco);
    color: var(--tinta);
    border-color: var(--linha);
    box-shadow: var(--sombra);
}
.btn-google:hover {
    border-color: var(--azul);
    color: var(--azul-escuro);
    transform: translateY(-1px);
    box-shadow: var(--sombra-media);
}

.btn-full { width: 100%; }

/* ---------------------------------------------------------------
   HERO + BIO
   --------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: var(--topo-nav);
    background:
        /* mancha de luz no canto superior direito: dá direção à leitura e
           evita que o topo do hero seja um retângulo de cor uniforme */
        radial-gradient(120% 90% at 88% -10%, rgba(44, 74, 107, .09), transparent 60%),
        radial-gradient(90% 70% at 6% 8%, rgba(154, 116, 52, .06), transparent 55%),
        linear-gradient(180deg, var(--fundo) 0%, var(--fundo) 62%, var(--azul-claro) 130%);
    overflow: hidden;
}

/*
 * Fio de 3px no topo do hero, em duas cores: o azul da marca e um trecho
 * curto de latão. Marca a seção sem competir com o título, e dá um ponto
 * de alinhamento com a barra do logo.
 */
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--azul-escuro) 0%, var(--azul-escuro) 38%,
        var(--latão-claro) 38%, var(--latão-claro) 52%,
        var(--azul-claro) 100%);
    z-index: 2;
}

.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--topo-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px;
    transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
/* A barra só ganha fundo depois que a página rola. No topo, deixá-la
   sólida cortava a faixa do hero e o logo sumia no fundo. */
.navbar.scrolled {
    height: 64px;
    background: rgba(244, 245, 247, .88);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(27, 36, 48, .07), 0 8px 24px -14px rgba(18, 32, 47, .3);
}

.nav-logo { display: flex; align-items: center; }
.logo-img { height: 38px; width: auto; }
.logo-fallback .logo-texto {
    font-family: var(--serif);
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    position: relative;
    text-decoration: none;
    font-size: .92rem;
    color: var(--tinta-2);
    padding: 4px 0;
    transition: color .2s ease;
}
/*
 * Sublinhado que cresce a partir do centro.
 *
 * O `transform: scaleX()` parte de 0 e vai a 1 com a origem no meio: o
 * risco aparece pelos dois lados ao mesmo tempo, que é o que faz a
 * animação parecer de interface e não de lista de Word com borda.
 *
 * Fica só no teclado e no mouse de verdade — o `:hover` sem media query
 * também dispara em toque, e no celular isso gruda o risco ao passar o
 * dedo.
 */
@media (hover: hover) {
    .nav-links a:not(.nav-cta)::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: var(--azul);
        transform: scaleX(0);
        transition: transform .25s cubic-bezier(.22, .8, .3, 1);
    }
    .nav-links a:not(.nav-cta):hover::after,
    .nav-links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
}
.nav-links a:hover { color: var(--azul-escuro); }
.nav-links .nav-cta {
    background: var(--azul-escuro);
    color: var(--branco);
    padding: 10px 22px;
    border-radius: var(--raio);
}
.nav-links .nav-cta:hover { background: var(--azul); color: var(--branco); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 10px 8px;
    background: none;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero-content {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 68px 24px 96px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    background: rgba(253, 253, 253, .8);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--tinta-2);
    margin-bottom: 26px;
}
/* O ponto pulsa devagar. É o único movimento contínuo da página, e é
   ele que diz "este site está no ar" sem precisar de texto. A animação
   é desligada na preferência de movimento reduzido, lá embaixo. */
.badge-dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--azul);
    flex-shrink: 0;
}
.badge-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--azul);
    animation: pulsa 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pulsa {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/*
 * Bloco 1 da bio.
 *
 * O `text-wrap: balance` é o detalhe que mais muda o primeiro impacto: um
 * título de escritório tem palavra longa ("Advogados", "Sociedade") e
 * quebra em duas linhas desiguais — a primeira com quatro palavras e a
 * segunda com uma. O balanceamento distribui o peso em vez de deixar
 * uma palavra sozinha no canto.
 *
 * Onde `balance` não existe, o título quebra como sempre, sem erro.
 */
.bio-titulo {
    font-size: clamp(2.2rem, 5.6vw, 3.7rem);
    letter-spacing: -.02em;
    line-height: 1.08;
    margin-bottom: 10px;
    text-wrap: balance;
}

/* Bloco 2 da bio: uma linha só. */
.bio-subtitulo {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--tinta-2);
    margin-bottom: 30px;
    text-wrap: pretty;
}

/* A frase do escritório, em citação. Some se o campo `frase` estiver vazio. */
.frase-escritorio {
    position: relative;
    margin: 0 0 34px;
    padding: 22px 26px 22px 30px;
    border-left: 2px solid var(--latão);
    background: linear-gradient(90deg, rgba(220, 229, 238, .5), transparent 70%);
    border-radius: 0 var(--raio) var(--raio) 0;
}
.frase-escritorio p {
    position: relative;
    z-index: 1;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.9vw, 1.55rem);
    line-height: 1.35;
    color: var(--tinta);
    margin: 0;
    text-wrap: pretty;
}

/*
 * A aspa de abertura vira marca d'água.
 *
 * Antes era um caractere de 4rem em `top: -14px; left: 12px`, que subia
 * até encostar na linha de cima e competia com o texto que estivesse
 * ali. Agora fica atrás do texto, com opacidade baixa e deslocada para
 * dentro da barra de acento — o texto recebe `z-index: 1` e passa por
 * cima.
 */
.frasp {
    position: absolute;
    top: -6px; left: 14px;
    z-index: 0;
    font-family: var(--serif);
    font-size: 4.4rem;
    line-height: 1;
    color: var(--azul-claro);
    opacity: .55;
    pointer-events: none;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }

.hero-stats {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--linha);
}
.stat-row { display: flex; align-items: baseline; }
.stat-number {
    font-family: var(--serif);
    font-size: 1.95rem;
    line-height: 1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.stat-plus { font-family: var(--serif); font-size: 1.2rem; color: var(--azul); }
.stat-label {
    display: block;
    font-size: .78rem;
    color: var(--tinta-3);
    line-height: 1.35;
    margin-top: 7px;
    letter-spacing: .01em;
}
.stat-divider { width: 1px; height: 38px; background: var(--linha); }

/* O stat é clicável só quando é link. O alvo é grande o bastante para
   o dedo e tem foco visível, porque é o mesmo bloco que a pessoa lê. */
.stat-link {
    text-decoration: none;
    display: block;
    padding: 4px 2px;
    margin: -4px -2px;
    border-radius: var(--raio);
    transition: background .2s ease;
}
.stat-link:hover { background: rgba(220, 229, 238, .55); }
.stat-link:hover .stat-label { color: var(--azul-escuro); }
.stat-link:hover .stat-number { color: var(--azul-escuro); }

/* Imagem do hero: reta, com fio no topo. O arco arredondado é
   padronizado em site de clínica e não cabe aqui. */
.hero-image { position: relative; }
.image-frame { position: relative; }
.hero-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--raio);
    border-top: 3px solid var(--azul);
    box-shadow: var(--sombra-forte);
}
/*
 * O PLACEHOLDER DO HERO — o que aparece quando ainda não há foto.
 *
 * A primeira versão era um retângulo com borda tracejada e o texto
 * "adicione a foto em assets/...". Funciona como aviso, mas é o pior
 * pedaço da página: o hero é a única área que a pessoa vê sem rolar, e
 * ela começa em cima de um aviso de arquivo faltando.
 *
 * A borda tracejada é linguagem de ferramenta de desenvolvimento, não de
 * material de apresentação. Trocada por um cartão de papel com monograma,
 * textura e o nome do escritório em serifa — a mesma peça que viria
 * numa pasta de papelaria. O aviso sobre o arquivo continua lá, em
 * corpo pequeno e discreto, porque ele existe para quem monta o site.
 */
.image-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    aspect-ratio: 3 / 4;
    padding: 40px 34px;
    text-align: center;
    overflow: hidden;
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(44, 74, 107, .07), transparent 70%),
        linear-gradient(165deg, var(--branco) 0%, var(--fundo-2) 100%);
    border: 1px solid var(--linha);
}

/* Fio de latão no topo: o mesmo acento do título de seção, que é o que
   amarra a identidade quando não há foto para carregar a cor. */
.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--latão) 0%, var(--latão-claro) 50%, var(--latão) 100%);
}

/* Textura de papel: um retículo finíssimo. Só aparece porque a área é
   grande e lisa; em bloco pequeno vira sujeira na tela. */
.image-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(27, 36, 48, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 36, 48, .035) 1px, transparent 1px);
    background-size: 34px 34px;
}

/* O monograma do escritório, desenhado em CSS: escudo com as iniciais.
   É a única parte do cartão que não pode sumir: sem ela o retângulo fica
   vazio, e vazio parece página quebrada. */
.ph-mono {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    border-radius: 10px;
    background: linear-gradient(160deg, #35597e, var(--azul-profundo));
    box-shadow: 0 14px 30px -12px rgba(18, 32, 47, .55);
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--branco);
}
.ph-mono::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(253, 253, 253, .28);
    border-radius: 5px;
}
/* A segunda inicial em latão. Fica em `span` porque o próprio nome do
   escritório muda: um escritório de uma letra só não deve ficar com o
   espaço sobrando. */
.ph-mono span { color: var(--latão-claro); }

.placeholder-nome {
    position: relative;
    z-index: 1;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--tinta);
    max-width: 18ch;
}

.image-placeholder small {
    position: relative;
    z-index: 1;
    max-width: 30ch;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--tinta-3);
}

/* Círculos decorativos: irmãos do frame, não filhos. Dentro dele o
   overflow:hidden os cortaria. */
.image-decoration {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.dec-1 { width: 78px; height: 78px; top: -16px; right: -16px; background: var(--azul-claro); }

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(253, 253, 253, .95);
    backdrop-filter: blur(8px);
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    z-index: 2;
}
.floating-card strong { display: block; font-size: .95rem; }
.floating-card small { font-size: .76rem; color: var(--tinta-3); }
.card-1 { bottom: 28px; left: -34px; }

/* ---------------------------------------------------------------
   SOBRE (bloco 3 da bio)
   --------------------------------------------------------------- */
.sobre-content {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}
.sobre-text .section-title { margin-bottom: 26px; }

/* As três linhas do bloco "sobre". O script cria um <p> por item da lista
   em dados-site.js, e o bloco inteiro some se a lista vier vazia. */
.bio-sobre p {
    font-size: 1.03rem;
    color: var(--tinta-2);
    margin-bottom: 14px;
    max-width: 56ch;
}
.bio-sobre p:first-child { color: var(--tinta); }

.sobre-credencial {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 18px;
    background: var(--azul-claro);
    border-radius: var(--raio);
    font-size: .88rem;
    font-weight: 500;
    color: var(--tinta);
}

.sobre-img-wrapper { position: relative; }
.sobre-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-forte);
}

/*
 * Placeholder da seção "sobre". Aqui a caixa tracejada é aceitável por
 * uma razão que não vale no hero: esta seção está no meio da página, e
 * quem chega aqui já passou pelo título. O aviso não precisa competir
 * com nada — só precisa existir.
 *
 * Ainda assim, sem o tracejado fica mais próximo de um bloco de texto
 * real, e a página não denuncia o arquivo faltando em voz alta.
 */
.sobre-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 4 / 5;
    padding: 30px;
    text-align: center;
    background:
        radial-gradient(80% 55% at 50% 0%, rgba(44, 74, 107, .06), transparent 70%),
        linear-gradient(165deg, var(--fundo) 0%, var(--fundo-2) 100%);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    color: var(--tinta-3);
    font-size: .8rem;
    line-height: 1.55;
}
.sobre-img-placeholder::before {
    content: '';
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(160deg, #35597e, var(--azul-profundo));
    box-shadow: 0 8px 18px -8px rgba(18, 32, 47, .5);
}

/* ---------------------------------------------------------------
   ÁREAS DE ATUAÇÃO
   ---------------------------------------------------------------
   A seção inteira fica escondida enquanto `areas` estiver vazio. Não
   existe lista de fallback: "cível, trabalhista, previdenciário,
   família" é a lista padrão de site de advocacia, e ela está errada
   metade das vezes. Section que some é melhor que section que mente.
   --------------------------------------------------------------- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
}
.area-card {
    position: relative;
    padding: 38px 30px;
    background: var(--branco);
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

/*
 * O cartão ganha um fio de latão pela esquerda no hover.
 *
 * Sem ele o realce é só uma mudança de fundo — perceptível só por quem
 * está caçando mudança. O fio marca a mesma linha que o `.section-header`
 * marca em cima da seção, e é o que faz a lista parecer um conjunto.
 */
.area-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background: var(--latão);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s cubic-bezier(.22, .8, .3, 1);
}
.area-card:hover { background: var(--fundo); }
.area-card:hover::before { transform: scaleY(1); }

.area-card h3 {
    margin-bottom: 12px;
    font-size: 1.18rem;
    letter-spacing: -.01em;
    color: var(--tinta);
}
.area-card p { font-size: .93rem; line-height: 1.6; color: var(--tinta-2); margin: 0; }

/* ---------------------------------------------------------------
   O CRITÉRIO — lista editorial numerada, NÃO grade de cartões
   --------------------------------------------------------------- */
.criterio-grid {
    max-width: 880px;
    border-top: 1px solid var(--linha);
}

.criterio-card {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0 24px;
    padding: 36px 24px 36px 0;
    border-bottom: 1px solid var(--linha);
    align-items: start;
    transition: background .25s ease, border-color .25s ease;
}
/* Fundo que entra pela esquerda no hover, com a altura do item inteiro.
   O numeral ganha o latão e ganha peso: o olho vai para o número, e é
   ele que diz que aquilo é uma lista e não um parágrafo. */
.criterio-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -24px;
    width: calc(100% + 24px);
    background: linear-gradient(90deg, rgba(220, 229, 238, .6), transparent 62%);
    opacity: 0;
    transition: opacity .28s ease;
}
.criterio-card:hover::before { opacity: 1; }
.criterio-card:hover { border-bottom-color: var(--latão); }

.criterio-num {
    position: relative;
    display: block;
    font-family: var(--serif);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--tinta-3);
    letter-spacing: -.02em;
    transition: color .25s ease;
    /* o número não é lido como conteúdo: ele é a enumeração visual da
       lista. `aria-hidden` mantém o leitor de tela lendo o título. */
}
.criterio-card:hover .criterio-num { color: var(--latão); }

.criterio-corpo {
    position: relative;
    max-width: 58ch;
    padding-top: 4px;
}
.criterio-card h3 {
    margin-bottom: 9px;
    font-size: 1.32rem;
    letter-spacing: -.01em;
}
.criterio-card p { font-size: .99rem; line-height: 1.6; color: var(--tinta-2); margin: 0; text-wrap: pretty; }

/* ---------------------------------------------------------------
   REPUTAÇÃO
   ---------------------------------------------------------------
   Versão deste site, não a da clínica. Sem review de cliente: art. 40
   §1º do Código de Ética da Advocacia. A seção mostra que a
   reputação é verificável, e aponta para onde ela está.
   --------------------------------------------------------------- */
.reputacao .section-header { margin-bottom: 40px; }

#blocoAvaliacoes { display: grid; gap: 20px; }
.avaliacao-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.avaliacao-card {
    padding: 26px 28px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}
.avaliacao-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.avaliacao-autor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--azul-claro);
    color: var(--azul-escuro);
    border-radius: 50%;
    font-size: .86rem;
    font-weight: 600;
}
.avaliacao-estrelas { display: flex; gap: 2px; color: #c9a227; font-size: .8rem; letter-spacing: 1px; }
.avaliacao-texto { font-size: .96rem; color: var(--tinta-2); margin: 0; }

.avaliacao-vazia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 32px 36px;
    background: linear-gradient(140deg, var(--fundo), var(--branco) 70%);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
}
.avaliacao-nota { display: flex; align-items: center; gap: 18px; }

/* A nota é o dado mais forte do bloco, e é número: entra com tabular
   para não variar de largura quando o script troca o valor. */
.avaliacao-nota-num {
    font-family: var(--serif);
    font-size: 2.8rem;
    line-height: 1;
    color: var(--azul-escuro);
    font-variant-numeric: tabular-nums;
}
.avaliacao-nota small { display: block; font-size: .82rem; color: var(--tinta-3); margin-top: 4px; }

/*
 * O aviso de que review não entra. Está no CSS e não no JS porque é
 * texto fixo da seção, e porque ele tem que aparecer mesmo com
 * JavaScript desligado.
 */
.avaliacao-nota-legal {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--tinta-3);
    max-width: 40ch;
}

.google-cta { margin-top: 34px; }
.google-cta-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    background: var(--azul-claro);
    border-radius: var(--raio-g);
}
.google-cta-text h3 { margin-bottom: 6px; }
.google-cta-text p { margin: 0; font-size: .92rem; color: var(--tinta-2); }

/* ---------------------------------------------------------------
   MAPA
   --------------------------------------------------------------- */
.mapa-wrapper iframe {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
}
/* Substituto do mapa, usado enquanto mapaEmbed estiver vazio: o endereço
   em texto e um botão. Honesto, e é o que a pessoa precisa. */
.mapa-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 36px 40px;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(44, 74, 107, .07), transparent 60%),
        linear-gradient(140deg, var(--fundo), var(--branco) 75%);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
}
.mapa-card-endereco {
    font-family: var(--serif);
    font-size: 1.18rem;
    line-height: 1.5;
    margin: 0 0 8px;
    color: var(--tinta);
}
.mapa-card-nota { font-size: .86rem; color: var(--tinta-3); margin: 0; }

/* ---------------------------------------------------------------
   CONTATO
   --------------------------------------------------------------- */
.contato-wrapper {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 54px;
    align-items: start;
}
.contato-info .section-title { margin-bottom: 14px; }
.contato-info > p { color: var(--tinta-2); margin-bottom: 30px; }

/* O CTA da bio como frase, na seção de contato. É a única frase da
   página escrita para ser lida como oferta. */
.bio-cta {
    font-size: 1.06rem;
    line-height: 1.55;
    color: var(--tinta) !important;
    padding-left: 18px;
    border-left: 2px solid var(--latão);
}

.info-items { display: grid; gap: 24px; margin-bottom: 32px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
/* O ícone fica num quadrado com fundo: desenhado na linha do texto, ele
   some em fundo claro e a lista vira um bloco de texto sem referência. */
.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px; height: 42px;
    background: rgba(220, 229, 238, .6);
    border: 1px solid transparent;
    border-radius: var(--raio);
    color: var(--azul-escuro);
    transition: background .2s ease, border-color .2s ease;
}
.info-item:hover .info-icon {
    background: var(--branco);
    border-color: var(--linha);
}
.info-icon svg { width: 20px; height: 20px; }
.info-item strong { display: block; font-size: .95rem; margin-bottom: 4px; color: var(--tinta); }
.info-item span { font-size: .92rem; color: var(--tinta-2); }
.info-link {
    color: var(--azul-escuro);
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
    font-weight: 500;
    border-bottom: 1px solid rgba(44, 74, 107, .3);
    transition: border-color .2s ease, color .2s ease;
}
.info-link:hover { color: var(--azul); border-bottom-color: var(--azul); }

.social-links { display: flex; gap: 12px; }
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--linha);
    border-radius: 50%;
    color: var(--tinta-2);
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover { border-color: var(--azul); color: var(--azul-escuro); transform: translateY(-2px); }

.contato-form {
    padding: 40px 42px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-media);
}
.contato-form h3 { margin-bottom: 24px; }
.form-group { display: grid; gap: 7px; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group label { font-size: .85rem; font-weight: 500; }
.opcional { color: var(--tinta-3); font-weight: 400; }

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    font-size: .94rem;
    color: var(--tinta);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-group textarea { resize: vertical; min-height: 108px; }
/* O placeholder precisa ser legível: o cinza de apoio já passa de
   4,5:1, mas com opacidade ele caía abaixo e o campo parecia vazio. */
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--tinta-3); opacity: .85; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--azul);
    background: var(--branco);
    box-shadow: var(--sombra-foco);
}
.form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"] {
    border-color: #b04a42;
    background: #fdf1ef;
}
.form-group input[aria-invalid="true"]:focus,
.form-group select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(176, 74, 66, .2);
}
.field-error { color: #a33f37; font-size: .8rem; }
.field-error:empty { display: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: .9rem; margin: 14px 0 0; }
.form-status:empty { display: none; }
.form-status.erro { color: #b04a42; }
.form-status.ok { color: #3d6b4f; }

.form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: .8rem;
    color: var(--tinta-3);
}
.form-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------------------------------------------------------------
   WHATSAPP FLUTUANTE
   ---------------------------------------------------------------
   O botão flutuante fica mais alto quando o aviso da OAB está no ar.
   O aviso de credencial é justamente o texto que a pessoa pode
   precisar ler, e o botão cobria metade da frase.
   --------------------------------------------------------------- */
body.com-aviso-oab .whatsapp-float { bottom: 84px; }

.whatsapp-float {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .32), 0 14px 34px -10px rgba(18, 32, 47, .35);
    transition: transform .2s cubic-bezier(.22, .8, .3, 1), box-shadow .2s ease;
}
/* Anel que se abre uma vez e para. Repetir em laço seria ruído — o
   botão fica fixo na tela o tempo inteiro, e um anel pulsando para
   sempre ali no canto é o tipo de coisa que a pessoa aprende a ignorar
   ignorando também o botão. */
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    animation: anel 2.2s cubic-bezier(.4, 0, .2, 1) 3;
}
@keyframes anel {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
    70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-float svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.whatsapp-float:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(37, 211, 102, .38), 0 18px 40px -10px rgba(18, 32, 47, .4);
}
.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    padding: 9px 16px;
    background: var(--tinta);
    color: var(--branco);
    font-size: .84rem;
    border-radius: var(--raio);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.whatsapp-float:hover .whatsapp-tooltip, .whatsapp-float:focus-visible .whatsapp-tooltip { opacity: 1; }

/* ---------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------- */
.footer {
    position: relative;
    padding: 74px 0 34px;
    color: #9aa5b1;
    /* Quase preto azulado, com uma mancha de azul bem no topo. O rodapé
       de cor chapada é a coisa que mais denuncia site template: é a
       última faixa da página e ela ocupa largura inteira. */
    background:
        radial-gradient(90% 100% at 50% 0%, rgba(44, 74, 107, .5), transparent 70%),
        var(--azul-profundo);
}
/* Fio de latão separando o rodapé do conteúdo. */
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--azul) 0%, var(--latão-claro) 50%, var(--azul) 100%);
}
.footer a { color: #b6c2d0; }
.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(253, 253, 253, .1);
}
.footer-logo { display: flex; align-items: center; margin-bottom: 18px; }
.footer-logo-img { max-height: 44px; width: auto; }
.footer-logo-texto { font-family: var(--serif); font-size: 1.15rem; color: var(--branco); }
.footer-brand p { font-size: .9rem; max-width: 40ch; color: #8d98a5; }
.footer-social { display: flex; gap: 18px; margin-top: 20px; }
.footer-social a { font-size: .84rem; color: #8d98a5; text-decoration: none; transition: color .2s ease; }
.footer-social a:hover { color: var(--latão-claro); }

.footer-links h4 {
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--branco);
    margin-bottom: 18px;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-links a { font-size: .9rem; text-decoration: none; transition: color .2s ease; }
.footer-links a:hover { color: var(--latão-claro); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 28px;
}
.footer-bottom p { margin: 0; font-size: .82rem; }
.footer-oab {
    padding: 7px 15px;
    border: 1px solid rgba(253, 253, 253, .22);
    border-radius: var(--raio);
    font-size: .82rem;
    color: var(--branco);
}
.footer-oab.aviso { border-color: var(--latão); color: #d4b47a; }

/* ---------------------------------------------------------------
   ANIMAÇÃO DE ENTRADA
   --------------------------------------------------------------- */
[data-animate] { opacity: 0; }
[data-animate].visivel {
    opacity: 1;
    animation: entra .7s cubic-bezier(.22, .8, .3, 1) forwards;
    animation-delay: var(--delay, 0ms);
}
@keyframes entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
[data-animate="fade-left"].visivel { animation-name: entraEsq; }
[data-animate="fade-right"].visivel { animation-name: entraDir; }
@keyframes entraEsq { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes entraDir { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
[data-animate="float"] { opacity: 1; }
[data-animate="float"].visivel { animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Sem JavaScript, a página aparece inteira. O script remove .no-js do
   <html>; se ele não for removido, este bloco cancela o estado inicial. */
.no-js [data-animate] { opacity: 1; animation: none; }

/* ---------------------------------------------------------------
   FOCO VISÍVEL — só por teclado
   --------------------------------------------------------------- */
/*
 * Foco visível — só por teclado, e com anel em vez de contorno.
 *
 * `outline` puro desenha um retângulo colado na borda do elemento, e em
 * interface clara ele some no meio dos outros contornos. O anel
 * `--sombra-foco` é um halo com 3px de folga: aparece sobre fundo claro
 * e escuro, e não empurra o layout — que `outline` também não empurra,
 * mas `border` empurraria.
 */
:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
    border-radius: 2px;
    box-shadow: var(--sombra-foco);
}
/* O anel duplica no campo do formulário, que já tem borda própria. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    box-shadow: var(--sombra-foco);
}

/* ---------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------- */
@media (max-width: 980px) {
    .hero-content { grid-template-columns: 1fr; gap: 52px; padding-bottom: 84px; }
    .hero-image { max-width: 420px; margin: 0 auto; }
    .card-1 { left: 8px; }
    .sobre-content { grid-template-columns: 1fr; gap: 44px; }
    .sobre-image { max-width: 400px; }
    .areas-grid { grid-template-columns: 1fr 1fr; }
    .contato-wrapper { grid-template-columns: 1fr; gap: 44px; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
    :root { --topo-nav: 68px; }

    .nav-toggle { display: flex; }

    /* O menu vira painel. O `visibility` do estado fechado tira o menu
       da tabulação: um <li> invisível que ainda recebe Tab é o defeito
       de acessibilidade mais comum de menu mobile. */
    .nav-links {
        position: fixed;
        top: var(--topo-nav); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 26px;
        background: var(--fundo);
        border-bottom: 1px solid var(--linha);
        box-shadow: var(--sombra-forte);
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .nav-links li { border-bottom: 1px solid var(--linha); }
    .nav-links li:last-child { border-bottom: 0; }
    .nav-links a { display: block; padding: 15px 0; font-size: 1rem; }
    .nav-links .nav-cta { display: block; margin-top: 14px; text-align: center; }

    .section { padding: 66px 0; }
    .section-header { margin-bottom: 38px; }
    .avaliacao-grid, .form-row, .footer-content { grid-template-columns: 1fr; }

    /* A lista editorial continua lista no celular: uma coluna, numeral
       em cima do texto. */
    .criterio-card { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
    .criterio-card::before { left: -16px; width: calc(100% + 16px); }
    .criterio-num { font-size: 1.7rem; }
    .criterio-corpo { max-width: none; padding-top: 0; }

    /* O sublinhado do menu é para mouse. No celular o menu é painel e
       cada item ocupa uma faixa inteira — o risco vira ruído. */
    .nav-links a::after { display: none; }

    .hero-actions .btn { width: 100%; }
    .hero-stats { gap: 18px; }
    .stat-number { font-size: 1.55rem; }
    .contato-form, .mapa-card, .google-cta-card, .avaliacao-vazia { padding: 26px 22px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .whatsapp-float { right: 18px; bottom: 18px; width: 54px; height: 54px; }
    .hero + .section { padding-top: 74px; }
    .contato { padding-bottom: 60px; }
}

@media (max-width: 380px) {
    .hero-stats { gap: 14px; }
    .stat-label { font-size: .72rem; }
}

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

/* ---------------------------------------------------------------
   PREFERÊNCIA DE MOVIMENTO REDUZIDO
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-animate] { opacity: 1; }
    [data-animate].visivel { animation: none; }
}

/* ---------------------------------------------------------------
   IMPRESSÃO
   --------------------------------------------------------------- */
@media print {
    .navbar, .whatsapp-float, .contato-form, .hero-actions, .pular-para-conteudo { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding: 24px 0; }
    [data-animate] { opacity: 1 !important; }
}