/* site.css — Página institucional do Passos Advocacia e Assessoria Jurídica.
 *
 * Sistema de design tirado da identidade oficial (identidade/IDENTIDADE-VISUAL.md):
 * dourado #DDBF8A, grafite #363535, branco. O dourado é SEMPRE detalhe — filete,
 * ícone, borda —, nunca fundo de área grande: é o que separa "elegante" de "dourado
 * demais".
 *
 * Tipografia: serifada do sistema nos títulos, sem-serifa na leitura. As fontes da
 * marca (Andalus / Roman SD) ficam só na logomarca em imagem — são fontes de licença
 * restrita para web, e a própria identidade manda usar equivalente livre no texto.
 * De quebra, fonte do sistema = zero download, zero salto de layout (CLS) e nota de
 * performance mais alta.
 *
 * Dois temas (regra permanente do projeto): claro por padrão, escuro por preferência
 * do aparelho ou pelo botão. Tudo por variável — nenhuma cor fixa fora daqui.
 */

/* ============================================================ 1. FUNDAÇÕES */
:root {
  /* Marca */
  --ouro: #DDBF8A;
  --ouro-claro: #E9D99F;
  --ouro-escuro: #AD7A3C;
  /* Dourado só para TEXTO sobre fundo claro: o --ouro-escuro mede 3,5:1 contra branco
   * e reprova em contraste. Este mede ~5,9:1 — mesma família, legível de verdade. */
  --ouro-texto: #8A5A22;
  --grafite: #363535;
  --grafite-fundo: #201F1F;

  /* Papéis de cor — tema claro */
  --fundo: #FFFFFF;
  --fundo-alt: #F7F7F5;      /* seções alternadas, quebra o branco puro */
  --fundo-forte: #201F1F;    /* blocos escuros de contraste */
  --texto: #2A2929;
  --texto-suave: #6B6867;
  --texto-sobre-forte: #EDEDED;
  --linha: #E6E3DE;
  --linha-forte: #D6D1C9;

  /* Tipografia */
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ritmo vertical: o respiro é o que faz a página parecer caprichada */
  --secao: clamp(4.5rem, 10vw, 9rem);
  --limite: 1200px;
  --limite-texto: 62ch;
  --cabecalho: 4.75rem;      /* altura do cabeçalho fixo, usada pelo hero */

  /* Movimento */
  --transicao: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-tema="escuro"] {
  --ouro-texto: var(--ouro-claro);   /* no escuro o dourado claro passa com folga */
  --fundo: #141313;
  --fundo-alt: #1B1A1A;
  --fundo-forte: #0E0D0D;
  --texto: #EDEDED;
  --texto-suave: #A6A2A0;
  --texto-sobre-forte: #EDEDED;
  --linha: #2E2C2C;
  --linha-forte: #3D3A3A;
}

/* Respeita a preferência do aparelho quando ninguém escolheu à mão. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ouro-texto: var(--ouro-claro);
    --fundo: #141313;
    --fundo-alt: #1B1A1A;
    --fundo-forte: #0E0D0D;
    --texto: #EDEDED;
    --texto-suave: #A6A2A0;
    --linha: #2E2C2C;
    --linha-forte: #3D3A3A;
  }
}

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

html {
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo quando se pula para uma seção pela âncora. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* O <picture> é só um envelope para oferecer WebP: não deve criar caixa própria,
 * senão o height:100% das fotos passaria a medir contra ele e não contra o contêiner. */
picture { display: contents; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;              /* peso normal na serifada = mais sóbrio */
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;            /* evita a última linha com uma palavra só */
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.875rem); }
h3 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); }

p { margin: 0 0 1.15em; max-width: var(--limite-texto); }
p:last-child { margin-bottom: 0; }

/* Foco visível de verdade — navegação por teclado é requisito, não enfeite. */
:focus-visible {
  outline: 2px solid var(--ouro-escuro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Quem pediu menos movimento no sistema não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================ 2. PEÇAS BASE */
.envoltorio {
  width: 100%;
  max-width: var(--limite);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.secao { padding-block: var(--secao); }
.secao--alt { background: var(--fundo-alt); }
.secao--forte { background: var(--fundo-forte); color: var(--texto-sobre-forte); }
.secao--forte .rotulo { color: var(--ouro); }
.secao--forte .texto-suave { color: #B8B4B1; }

/* Rótulo em caixa-alta com filete dourado: assina cada seção sem pesar. */
.rotulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}
.rotulo::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.texto-suave { color: var(--texto-suave); }

.chamada {                       /* parágrafo de abertura, um pouco maior */
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--texto-suave);
}

/* Botões: o primário é o único elemento dourado cheio da página. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao),
              border-color var(--transicao), color var(--transicao);
}
.botao:hover { transform: translateY(-2px); }

.botao--ouro {
  background: linear-gradient(135deg, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro));
  color: #1D1509;   /* margem de contraste na ponta escura do degradê */
}
.botao--contorno {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.botao--contorno:hover { background: rgba(221, 191, 138, 0.12); }

.botoes { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* ============================================================ 3. CABEÇALHO */
/* Cabeçalho OPACO, não translúcido.
 * Tentei o efeito "vidro" sobre a foto do hero e a navegação ficou ilegível justamente
 * nos itens que caem sobre a imagem. Num site cujo público é em boa parte idoso, menu
 * legível vale mais que efeito bonito. Como o cabeçalho é fixo, o hero começa abaixo
 * dele (ver --cabecalho) em vez de passar por baixo. */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding-block: 1rem;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  transition: padding var(--transicao), box-shadow var(--transicao);
}
/* Ao rolar, encolhe um pouco e ganha uma sombra discreta que o descola do conteúdo. */
.cabecalho.rolado {
  padding-block: 0.625rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
:root[data-tema="escuro"] .cabecalho.rolado { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.marca img {
  height: clamp(30px, 4.4vw, 40px);
  width: auto;
  transition: height var(--transicao);
}
.cabecalho.rolado .marca img { height: clamp(26px, 3.6vw, 34px); }
/* Cada tema mostra a sua versão da logo. */
.logo-escuro { display: none; }
:root[data-tema="escuro"] .logo-claro { display: none; }
:root[data-tema="escuro"] .logo-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-escuro { display: block; }
}

.navegacao { display: flex; align-items: center; gap: 2rem; }
.navegacao a {
  position: relative;
  /* Amplia a área de clique para ~45px sem mudar o layout: mexer no padding
   * aumentaria a altura do cabeçalho, que o hero usa de referência. */
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--texto-suave);
  transition: color var(--transicao);
}
.navegacao a::before {
  content: "";
  position: absolute;
  inset: -0.6rem -0.4rem;
}
.navegacao a::after {          /* filete dourado que cresce do centro */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--ouro-escuro);
  transform: translateX(-50%);
  transition: width var(--transicao);
}
.navegacao a:hover { color: var(--texto); }
.navegacao a:hover::after { width: 100%; }

.acoes-cabecalho { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* Botão discreto de acesso ao sistema — é ferramenta da equipe, não chamada
 * para o visitante; fica contido no canto, como pedido. */
.botao-sistema {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--texto-suave);
  white-space: nowrap;
  transition: border-color var(--transicao), color var(--transicao),
              background var(--transicao);
}
.botao-sistema:hover {
  border-color: var(--ouro);
  color: var(--texto);
  background: rgba(221, 191, 138, 0.1);
}
.botao-sistema svg { width: 14px; height: 14px; flex: none; }

.troca-tema {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
.troca-tema:hover { border-color: var(--ouro); color: var(--texto); }
.troca-tema svg { width: 16px; height: 16px; }
.troca-tema .icone-lua { display: none; }
:root[data-tema="escuro"] .troca-tema .icone-sol { display: none; }
:root[data-tema="escuro"] .troca-tema .icone-lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .troca-tema .icone-sol { display: none; }
  :root:not([data-tema="claro"]) .troca-tema .icone-lua { display: block; }
}

/* Menu do celular */
.abre-menu {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}
.abre-menu svg { width: 18px; height: 18px; margin: auto; }

@media (max-width: 900px) {
  .navegacao {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--fundo);
    transform: translateX(100%);
    /* `visibility: hidden` além do transform: só deslocar para fora da tela deixaria
     * os links do menu fechado ainda focáveis pelo Tab, fora do campo de visão. */
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 320ms;
    z-index: 70;
  }
  .navegacao.aberta { transform: translateX(0); visibility: visible; }
  .navegacao a { font-family: var(--serif); font-size: 1.5rem; color: var(--texto); }
  .abre-menu { display: grid; }
  .fecha-menu { position: absolute; top: 1.25rem; right: 1.25rem; }
  .botao-sistema span { display: none; }   /* no celular fica só o ícone + "Sistema" */
  .botao-sistema::after { content: "Sistema"; }
}

/* ============================================================ 4. HERO
 * HERO DIVIDIDO — e não texto sobre a foto.
 * Motivo: a fotografia dos sócios é CLARA (camisas brancas, parede iluminada). Para
 * texto branco ficar legível em cima dela seria preciso um véu escuro tão forte que
 * apagaria a foto — e o briefing manda preservar a imagem como ela é. Além disso o
 * texto cairia justamente sobre os rostos e sobre a marca na parede.
 * Dividindo, a foto aparece inteira e o texto ganha fundo limpo — o que também é o
 * melhor para o nosso público, que é em boa parte idoso e lê melhor em alto contraste.
 */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--cabecalho);   /* começa abaixo do cabeçalho opaco */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, var(--ouro-escuro), var(--ouro-claro), var(--ouro-escuro)) 1;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__texto .rotulo { color: var(--ouro-texto); }   /* contraste: ver --ouro-texto */

.hero__sub {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--texto-suave);
  max-width: 38ch;
}
.hero .botoes { margin-top: 2.25rem; }

.hero__foto { position: relative; overflow: hidden; }
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 22%;   /* centra no PAR de rostos (ela ~20%, ele ~37%), não no meio da foto */
}

@media (min-width: 1280px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hero__texto {
    /* Alinha o texto pela mesma coluna do resto da página, mas só do lado esquerdo:
     * a foto sangra até a borda da tela. */
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    padding-left: max(clamp(1.25rem, 5vw, 2.5rem), calc((100vw - var(--limite)) / 2 + clamp(1.25rem, 5vw, 2.5rem)));
    padding-right: clamp(2rem, 4vw, 3.5rem);
  }
  .hero__foto { min-height: min(78vh, 780px); }
}
@media (max-width: 1279px) {
  /* Até 1279px a foto vem em cima e INTEIRA: na coluna estreita do hero dividido,
   * o recorte necessário tirava a Dra. Allyne do quadro. */
  .hero__foto { aspect-ratio: 4 / 3; order: 1; }
  .hero__texto { order: 2; padding-top: clamp(2rem, 7vw, 3rem); }
}

/* Selos de credencial abaixo do hero */
.credenciais {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--linha);
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.credenciais span { display: flex; align-items: center; gap: 0.5rem; }
.credenciais b { color: var(--texto); font-weight: 600; }

/* ============================================================ 5. GRADES */
.duas-colunas {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: 1fr 1fr; align-items: center; }
  .duas-colunas--texto-maior { grid-template-columns: 1.15fr 0.85fr; }
}

/* Moldura de foto com o filete dourado deslocado — detalhe de acabamento. */
.moldura { position: relative; }
.moldura::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--ouro);
  opacity: 0.5;
  z-index: -1;
}
.moldura img { position: relative; }

/* Cards de área de atuação */
.areas {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  background: var(--linha);
  border: 1px solid var(--linha);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .areas { grid-template-columns: 1fr 1fr; } }
/* São 10 cards. Em 2 colunas eles fecham 5 linhas exatas, sem sobra. Em 3 colunas
 * sobraria um, então o último ("Outras áreas") ocupa a linha inteira — o que cai bem,
 * porque é o card de texto mais longo e serve de fechamento da seção. */
@media (min-width: 1000px) {
  .areas { grid-template-columns: repeat(3, 1fr); }
  .area:last-child { grid-column: 1 / -1; }
}

.area {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--fundo);
  transition: background var(--transicao);
}
.area::after {                 /* filete dourado que aparece no topo ao passar o mouse */
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 2px;
  background: var(--ouro);
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.area:hover { background: var(--fundo-alt); }
.area:hover::after { width: 100%; }
.area h3 { margin-bottom: 0.625rem; }
.area p { font-size: 0.9375rem; color: var(--texto-suave); margin: 0; }
.area__icone {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: 1.125rem;
  color: var(--ouro-escuro);
}

/* Sócios
 * As duas fotos vêm da MESMA sessão profissional, mas o original tem 1536x1024 e cada
 * recorte fica com 514–600px de largura. Por isso os cards são limitados a 440px: acima
 * disso a foto começaria a ser ampliada além do que ela tem, e apareceria mole em tela
 * de celular ou notebook retina. Card menor com mais respiro também lê melhor. */
.socios {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: 3.5rem;
}
@media (min-width: 800px) {
  .socios {
    grid-template-columns: repeat(2, minmax(0, 440px));
    justify-content: start;
  }
}

.socio__foto {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--fundo-alt);
}
.socio__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Enquadramento fino de cada retrato: puxa o rosto para o terço superior e tira peso
 * da marca na parede, que senão disputa a atenção com a pessoa. */
.socio--sergio .socio__foto img { object-position: 38% 12%; }
.socio--allyne .socio__foto img { object-position: 46% 14%; }
.socio:hover .socio__foto img { transform: scale(1.03); }
.socio h3 { margin-top: 1.5rem; }
.socio__oab {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}
.socio__bio { margin-top: 1rem; font-size: 0.9375rem; color: var(--texto-suave); }
.socio__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.socio__tags li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/* Três pilares do atendimento (seção sem foto, resolvida em tipografia) */
.pilares { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: 3.5rem; }
@media (min-width: 760px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar { padding-top: 1.75rem; border-top: 1px solid rgba(221, 191, 138, 0.45); }
.pilar__numero {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--ouro);
  margin-bottom: 1rem;
}
.pilar h3 { margin-bottom: 0.625rem; }
.pilar p { font-size: 0.9375rem; margin: 0; }

/* Galeria da estrutura */
.galeria { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.galeria figure { margin: 0; }
.galeria__moldura {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--fundo-alt);
}
.galeria img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.galeria figure:hover img { transform: scale(1.04); }
.galeria figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Diferenciais */
.diferenciais {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .diferenciais { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .diferenciais { grid-template-columns: repeat(3, 1fr); } }
.diferenciais li { display: flex; gap: 0.875rem; align-items: flex-start; }
.diferenciais svg { width: 20px; height: 20px; flex: none; margin-top: 0.2rem; color: var(--ouro); }
.diferenciais b { display: block; font-weight: 600; }
.diferenciais span { font-size: 0.9375rem; color: var(--texto-suave); }
.secao--forte .diferenciais span { color: #B8B4B1; }

/* FAQ em acordeão, com <details> nativo: acessível de graça. */
.faq { margin-top: 3rem; border-top: 1px solid var(--linha); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  cursor: pointer;
  list-style: none;
  transition: color var(--transicao);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ouro-escuro); }
.faq summary::after {          /* cruz que virá menos ao abrir */
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--ouro-escuro), var(--ouro-escuro)) center/100% 1px no-repeat,
    linear-gradient(var(--ouro-escuro), var(--ouro-escuro)) center/1px 100% no-repeat;
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(45deg); background-size: 100% 1px, 0 0; }
.faq details p { padding-bottom: 1.5rem; font-size: 0.9375rem; color: var(--texto-suave); }

/* ============================================================ 6. CONTATO */
.contato { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 950px) { .contato { grid-template-columns: 0.9fr 1.1fr; } }

.dados { display: grid; gap: 1.75rem; padding: 0; margin: 0; list-style: none; }
.dados > li { display: flex; gap: 1rem; }
.dados svg { width: 20px; height: 20px; flex: none; margin-top: 0.25rem; color: var(--ouro-escuro); }
.dados dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.3rem;
}
.dados dd { margin: 0; }
.dados a { text-decoration: none; border-bottom: 1px solid var(--linha-forte); transition: border-color var(--transicao); }
.dados a:hover { border-bottom-color: var(--ouro); }

/* Mapa que só carrega quando a pessoa pede: nada de iframe do Google pesando
 * (e rastreando) em toda visita. Vale performance e privacidade. */
.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Sobrou do tempo em que o mapa abria por clique (o Danilo pediu sempre aberto).
 * Mantido porque a página 404 e a de privacidade podem reusar o mesmo bloco. */
.mapa__convite {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1rem;
  justify-items: center;
  padding: 2rem;
  text-align: center;
  border: 0;
  background: var(--fundo-alt);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.mapa__convite svg { width: 32px; height: 32px; color: var(--ouro-escuro); }
.mapa__convite strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }

/* ============================================================ 7. RODAPÉ */
.rodape {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--fundo-forte);
  color: var(--texto-sobre-forte);
}
.rodape__topo {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(237, 237, 237, 0.12);
}
@media (min-width: 850px) { .rodape__topo { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape img { height: 38px; width: auto; margin-bottom: 1.25rem; }
.rodape h3 {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro);
}
.rodape ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 0.7rem; }
.rodape a { text-decoration: none; color: #C9C5C2; transition: color var(--transicao); }
.rodape a:hover { color: var(--ouro); }
.rodape p { color: #A6A2A0; font-size: 0.9375rem; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: #8E8A88;
}

/* ============================================================ 8. WHATSAPP */
.zap {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  /* Verde escurecido (auditoria 2026-07-28): o tom antigo dava só 4,36:1 de
     contraste com o texto branco, abaixo do mínimo AA (4,5:1) para 15px/600. */
  background: #1A7A49;
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 380ms ease, background var(--transicao);
}
.zap.visivel { transform: translateY(0); opacity: 1; }
.zap:hover { background: #176E43; }
.zap svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 560px) {
  .zap { padding: 0.9rem; }
  .zap span { display: none; }   /* no celular fica só o ícone, para não tapar o texto */
}

/* ============================================================ 9. REVELAÇÃO */
/* Entrada suave ao rolar. Sem biblioteca: uma classe e um IntersectionObserver. */
.revela {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.revela.dentro { opacity: 1; transform: none; }
.revela--atraso1 { transition-delay: 90ms; }
.revela--atraso2 { transition-delay: 180ms; }
.revela--atraso3 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; }
}

/* Só para leitor de tela */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Atalho para quem navega por teclado */
.pula-para {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--ouro);
  text-decoration: none;
  transition: top var(--transicao);
}
.pula-para:focus { top: 1rem; }