/* ============================================================
   custom.css - apenas o que utilities do Tailwind não expressam.
   Cor, tipo, raio e motion sempre via var(--...) de tokens.css.
   Coordenadas de composição (posições absolutas de uma seção)
   ficam escopadas na própria seção, nomeadas, nunca soltas.
   ============================================================ */

/* ---------- Base ---------- */

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

/* o botão de voltar ao topo do rodapé é uma âncora; sem isto ele teleporta
   o visitante. Desligado em prefers-reduced-motion, mais abaixo. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Texto secundário por superfície ----------
   O `neutral-600` foi calibrado contra branco e paper, onde dá 5,7:1 e
   5,1:1. Sobre o `neutral-100`, a terceira superfície clara, ele cai
   para 4,62:1 e passa raspando em AA - justamente nas peças menores
   (sobrelinha de 14px, resposta de FAQ, corpo de bloco editorial).
   As seções pintadas de neutral-100 declaram `--texto-secundario` e
   quem consome esse token desce um degrau. Sem a declaração, o
   fallback mantém o valor aprovado, então nenhuma superfície clara
   muda de aparência por tabela. */
.faq,
.conflitos,
.institucional,
.editorial--neutro,
.aviso { --texto-secundario: var(--color-neutral-700); }

/* ---------- Ícones ----------
   Phosphor Icons, peso regular, de um sprite embutido no topo do body.
   Paths preenchidos, então herdam currentColor sem fill explícito. */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* a caixa de conteúdo mede --container-wide; a goteira fica por fora dela,
   para o header bater exatamente com os 1296px do Figma em 1920 */
.container {
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
.btn:active { transform: translateY(1px); }
.btn--whatsapp .icon { width: 20px; height: 20px; }
.link-arrow .icon { width: 18px; height: 18px; }

/* dourado sólido: exclusivo do WhatsApp (Von Restorff).
   usa o mesmo dourado da palavra-chave do H1, o que amarra promessa e ação.
   o rótulo é escuro por necessidade: texto claro sobre #E4AC41 dá 2:1
   de contraste e reprova em AA; sobre navy-deep dá 8,1:1 */
.btn--whatsapp {
  padding: 16px 28px;
  background: var(--color-gold-bright);
  color: var(--color-navy-deep);
}
.btn--whatsapp:hover { background: var(--color-gold-bright-deep); }

/* o rótulo curto entra só no mobile, como no Figma */
.btn__label-short { display: none; }

.btn--paper {
  padding: 8px 24px;
  gap: 10px;
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: var(--leading-body);
}
.btn--paper:hover { background: var(--color-white); }

/* link de texto com seta: a seta avança 4px no hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--color-paper);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base), gap var(--duration-base) var(--ease-out-cubic);
}
.link-arrow:hover { color: var(--color-gold-bright); gap: 14px; }
.link-arrow svg { flex: none; }

/* O `nowrap` acima existe para o hero, onde o link divide a linha com o
   botão de WhatsApp e o rótulo é curto. Em bloco editorial o rótulo é
   uma frase inteira: na LP de leilão ele mede 402px de min-content, e
   num grid de coluna única esse mínimo subia pela cadeia e empurrava o
   container da seção para fora da viewport - 51px de rolagem lateral em
   375px, na página toda, não só na seção.
   A seta alinha pelo topo e desce 3px: em `center` ela ficaria no meio
   vertical de um rótulo de duas linhas, longe de onde a frase começa. */
.editorial__cta .link-arrow {
  white-space: normal;
  align-items: flex-start;
}
.editorial__cta .link-arrow svg { margin-top: 3px; }

/* ============================================================
   CONFLITOS EM DETALHE - superfície clara
   As quatro subáreas do silo imobiliário tinham LP prevista na onda 3 e
   os cards levavam a 404. Em vez de segurar quatro páginas inteiras, o
   cliente pediu uma seção objetiva por conflito na própria página-pilar,
   e o card passa a rolar até ela.

   Cada bloco é curto de propósito: o que é, o que a lei prevê e o que o
   escritório faz. Quando a LP existir, o bloco vira o resumo dela e o
   card volta a apontar para a página - o `id` de cada um já é o slug
   que a LP vai usar.

   A grade é 5/7 igual à do editorial: título e sobrelinha à esquerda,
   conteúdo à direita, medida de leitura preservada.
   ============================================================ */

.detalhes { background: var(--color-paper); padding-block: var(--space-section); }

.detalhe { scroll-margin-top: 96px; }   /* o dock flutuante não pode cobrir o título */
.detalhe + .detalhe {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--filete-claro);
}
.detalhe__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.detalhe__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
.detalhe__lead {
  margin: 0 0 20px;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--texto-secundario, var(--color-neutral-600));
}
.detalhe__cta { margin-top: 20px; }

@media (max-width: 899px) {
  .detalhe__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   DEPOIMENTOS - superfície neutral-100
   Entra entre o vídeo de apresentação (escuro) e o conteúdo recente
   (paper), então o neutral-100 é o que evita duas superfícies iguais
   coladas.

   COMPLIANCE, e isto vale mais que qualquer decisão visual daqui:
   o `01-debriefing.md` registra que depoimento de cliente está pendente
   de revisão jurídica, e o Provimento 205/2021 veda promessa de
   resultado. Nenhum depoimento pode citar valor recebido, causa ganha
   ou prazo obtido - o que o bloco mostra é atendimento e método. Os
   textos que estão aqui são placeholder escritos sob essa régua, e a
   régua continua valendo para os reais.
   Não existe nota agregada ("4,9 de 5") de propósito: nota média é a
   peça mais próxima de comparação entre escritórios, que também é
   vedada. As estrelas por avaliação ficam porque são o vocabulário do
   Google, e é de lá que a avaliação vem.
   ============================================================ */

.depoimentos {
  background: var(--color-neutral-100);
  padding-block: var(--space-section);
  --texto-secundario: var(--color-neutral-700);
}

.depoimentos__head { margin-bottom: var(--space-block); max-width: 46ch; }
.depoimentos__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}
.depoimentos__title em { font-style: normal; color: var(--color-navy); }

/* separa o bloco de vídeo do bloco do Google: são duas provas de
   naturezas diferentes e a costura precisa aparecer */
.depoimentos__bloco + .depoimentos__bloco {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--filete-claro);
}
.depoimentos__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
}

/* ---------- Carrossel ----------
   Rolagem nativa com `scroll-snap`, e não um slider de JS: sem script a
   trilha continua arrastável no toque e no trackpad, e navegável por
   teclado porque ela é um contêiner focável. Os botões só chamam
   `scrollBy`. Sem estado de "desabilitado" nas pontas de propósito: isso
   pediria um listener de scroll, que é o que o main.js evita no site
   inteiro, e o navegador já para sozinho no fim da trilha. */
.carrossel { position: relative; }
.carrossel__trilho {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Folga só embaixo, para a barra de rolagem não colar no card. Nada
     de padding LATERAL: ele desloca o ponto de encaixe de cada card e,
     com `mandatory`, basta o segundo card cair 4px além do fim da
     rolagem para que o único encaixe alcançável vire o zero - a trilha
     trava e o botão parece morto. */
  padding-bottom: 20px;
  margin-bottom: -20px;
  scrollbar-width: thin;
}
/* Três visíveis e o quarto fora da borda. A medida é calculada e não um
   `clamp`: com largura solta, os quatro cards quase cabiam na trilha,
   sobrava um resto menor que um card e o `scroll-snap` devolvia tudo
   para o início - o botão parecia morto. Assim o passo do botão é
   exatamente um ponto de encaixe, e o card cortado na borda é o que
   avisa que há mais coisa para o lado. */
.carrossel__trilho > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 48px) / 3);
}
.carrossel__trilho:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 4px; }

.carrossel__nav { display: flex; gap: 8px; }
.carrossel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.carrossel__btn:hover { background: var(--color-navy); color: var(--color-white); }
/* o inline-flex acima vence o display:none do atributo `hidden` (regra de
   user-agent) - sem esta linha a seta "escondida" pelo JS continua na tela */
.carrossel__btn[hidden] { display: none; }
.carrossel__btn--anterior .icon { transform: rotate(180deg); }

/* ---------- Card de depoimento em vídeo ---------- */

.depo-video {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  overflow: hidden;
}
/* 3:4 e não 16:9: depoimento é retrato de pessoa falando, e o formato
   vertical é o que os vídeos vão ter quando forem gravados no celular */
.depo-video__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  gap: 12px;
  background: var(--color-navy-deep);
  color: var(--color-neutral-200);
  text-align: center;
  padding: 24px;
}
.depo-video__disco {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-gold-line);
}
.depo-video__disco .icon { width: 26px; height: 26px; margin-left: 6%; color: var(--color-white); }
.depo-video__nota { margin: 0; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.depo-video__pe { padding: 20px 24px 24px; }
.depo-video__quem { margin: 0; font-weight: 600; font-size: 1rem; color: var(--color-ink); }
.depo-video__caso { margin: 4px 0 0; font-size: var(--text-small); color: var(--texto-secundario); }

/* Frame COM vídeo vira <button> (abre o lightbox); o reset devolve o
   que o user-agent tira e o disco ganha o convite do hover */
button.depo-video__frame {
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
}
button.depo-video__frame .depo-video__disco { transition: transform var(--transition-base); }
button.depo-video__frame:hover .depo-video__disco,
button.depo-video__frame:focus-visible .depo-video__disco { transform: scale(1.08); }

/* Capa do card: thumbnail do YouTube (<img>) ou primeiro frame do mp4
   (<video preload="metadata">), injetada pelo main.js só nos cards COM
   vídeo. Escurecida para o disco e a legenda continuarem legíveis; por
   ser posicionada, pintaria por cima deles - daí o z-index no par. */
.depo-video__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.55);
}
button.depo-video__frame .depo-video__disco,
button.depo-video__frame .depo-video__nota { position: relative; z-index: 1; }

/* ---------- Lightbox dos depoimentos em vídeo ----------
   Overlay modal de página: navega por TODOS os cards que têm vídeo
   (setas, teclado e contador vêm do main.js). A caixa ADAPTA a
   proporção ao vídeo aberto - o main.js escreve `--lb-aspect` (para o
   aspect-ratio) e `--lb-prop` (o mesmo valor, numérico, para o calc) -
   e o tamanho é limitado pela ALTURA da viewport, pela largura MENOS o
   espaço das setas, e por um teto absoluto. Padrão sem variável: 3:4,
   o retrato dos depoimentos gravados no celular. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;   /* acima do menu mobile (100): vídeo aberto é modal de verdade */
  display: grid;
  place-items: center;
  padding: 24px;
}
/* o display da classe vence o display:none do atributo `hidden` (regra de
   user-agent); sem esta linha o overlay "fechado" cobre a página inteira */
.lightbox[hidden] { display: none; }
.lightbox__pano {
  position: absolute;
  inset: 0;
  background: rgba(7, 16, 32, .9);   /* navy-deep quase fechado */
}
.lightbox__caixa {
  position: relative;
  z-index: 1;
  width: min(calc(100vw - 176px), calc((100dvh - 200px) * var(--lb-prop, .75)), 960px);
}
.lightbox__palco {
  aspect-ratio: var(--lb-aspect, 3 / 4);
  background: var(--color-black, #000);
  border-radius: var(--radius);
  overflow: hidden;
}
.lightbox__palco video,
.lightbox__palco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* vídeo horizontal em moldura vertical: letterbox, nunca corte */
.lightbox__palco video { object-fit: contain; }

.lightbox__fechar {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .14);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.lightbox__fechar:hover { background: rgba(255, 255, 255, .28); }
.lightbox__fechar .icon { width: 18px; height: 18px; }

.lightbox__pe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 0;
}
.lightbox__quem { margin: 0; font-weight: 600; color: var(--color-white); }
.lightbox__caso { margin: 2px 0 0; font-size: var(--text-small); color: var(--color-neutral-200); }
.lightbox__contador { margin: 0; font-size: var(--text-small); color: var(--color-neutral-200); white-space: nowrap; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .08);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
/* ponta da fila sem volta circular (cabe tudo na tela): a seta apaga */
.lightbox__nav:disabled { opacity: .35; cursor: default; }
.lightbox__nav:disabled:hover { background: rgba(255, 255, 255, .08); }
.lightbox__nav .icon { width: 20px; height: 20px; }
.lightbox__nav--anterior { left: -68px; }
.lightbox__nav--anterior .icon { transform: rotate(180deg); }
.lightbox__nav--proximo { right: -68px; }

@media (max-width: 767px) {
  /* sem margem lateral para as setas: elas sobem para a borda do vídeo,
     e a caixa recupera a largura que era delas */
  .lightbox__caixa { width: min(94vw, calc((100dvh - 200px) * var(--lb-prop, .75))); }
  .lightbox__nav--anterior { left: 8px; }
  .lightbox__nav--proximo { right: 8px; }
}

/* ---------- Card de avaliação do Google ---------- */

.avaliacoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.avaliacao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
}
.avaliacao__estrelas { display: flex; gap: 3px; color: var(--color-gold-bright); }
.avaliacao__estrelas .icon { width: 16px; height: 16px; }
.avaliacao blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--color-ink); }
.avaliacao figcaption { margin-top: auto; font-size: var(--text-small); color: var(--texto-secundario); }
.avaliacao__quem { display: block; font-weight: 600; color: var(--color-ink); }

@media (max-width: 1023px) {
  .avaliacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carrossel__trilho > * { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .avaliacoes { grid-template-columns: 1fr; }
  /* 82% e não um card inteiro: a borda do próximo aparecendo é o que
     conta que a trilha rola, já que no toque não há botão à vista */
  .carrossel__trilho > * { flex-basis: 82%; }
  .depoimentos__sub { flex-direction: column; align-items: flex-start; }
}

/* ---------- Convite ao vídeo da hero ----------
   Presente na hero das quatro páginas que carregam retrato: capa, as
   duas áreas de atuação e o Sobre. Na capa ele ocupa o lugar que era
   do selo - mesma âncora visual, agora com função.

   O disco é dourado chapado no `gold-line` (#B99B62), medido no node
   68:44 do Figma. Não é o `gold-bright` do botão de WhatsApp: aquele
   dourado, mais saturado, segue exclusivo do CTA (Von Restorff). São
   dois dourados do sistema fazendo trabalhos diferentes - o do filete
   convida, o do CTA converte.

   Estado atual: display. Ainda não foi definido se o vídeo entra como
   arquivo ou como embed, então o botão nasce `disabled` - sem hover,
   fora da ordem de tabulação, sem prometer clique. Para ativar: tirar
   o `disabled`, preencher `data-video` e ligar o handler no main.js.
   O hover já está escrito e só passa a valer quando o atributo sair. */
.hero-video {
  --disco: 128px;

  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font: inherit;
  text-align: left;
}
.hero-video[disabled] { cursor: default; }

.hero-video__disco {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--disco);
  height: var(--disco);
  border-radius: var(--radius-full);
  background: var(--color-gold-line);
  transition: background-color var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
/* 40px de seta em 128px de disco, como no Figma */
.hero-video__disco .icon {
  width: 31.25%;
  height: 31.25%;
  /* o triângulo do play é oticamente pesado à esquerda; 6% do disco
     para a direita recentra ele dentro do círculo */
  margin-left: 6%;
}

.hero-video__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  /* 16ch = 206px no corpo de 20px, que é a medida do rótulo no Figma:
     curta o bastante para fechar em duas linhas sem `<br>` no HTML */
  max-width: 16ch;
  text-wrap: balance;
}

.hero-video:not([disabled]):hover .hero-video__disco {
  background: var(--color-gold-bright-deep);
  transform: scale(1.04);
}

/* ============================================================
   HERO
   Composição espelhada do Figma (frame 1920x994, node 3:33).
   As coordenadas abaixo são as do Figma, nomeadas e escopadas.
   ============================================================ */

.hero {
  --hero-h: 994px;
  --ticker-h: 144px;

  /* bloco de mídia da direita: subject + bg1 andam juntos */
  --media-w: 468px;
  --media-h: 763px;
  /* borda direita do subject fica 142px dentro da borda do container */
  --media-right: calc(50% - (var(--container-wide) / 2) + 142px);

  --bg1-w: 475px;
  --bg1-h: 850px;
  /* bg1 e o subject nascem da mesma referência (o centro), então andam
     juntos em qualquer largura. o deslocamento é medido a partir da
     borda esquerda do retrato */
  --bg1-offset: -178px;   /* mais 10% da largura da imagem para a esquerda */
  --bg1-left: calc(50% + 38px + var(--bg1-offset));

  /* bg2 nasce num ponto fixo do centro e sangra até a borda direita */
  --bg2-left: calc(50% + 208px);
  --bg2-h: 850px;

  /* o convite ao vídeo herda a âncora do selo que ele substituiu: o
     centro do selo era (113, 598) dentro do bloco de mídia, e a mídia é
     medida pela BASE, como todo o resto da hero */
  --video-left: 49px;
  --video-bottom: 101px;

  --content-top: 196px;
  --content-w: 563px;    /* Main Container */
  --copy-w: 501px;       /* coluna de texto, mais estreita que a de ações */
  /* deslocamento do texto em relação à borda do container (vindo do Figma) */
  --content-offset: 45px;

  position: relative;
  /* min-height, não height: o frame do Figma (994px) é o PISO. Se o texto
     crescer (zoom, fonte do sistema, janela baixa), a hero cresce junto em
     vez de afundar o CTA sob o ticker (bug visto em 2026-08-07). */
  min-height: var(--hero-h);
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--color-white);
}

/* ---------- Camada de fundo ---------- */

.hero__bg {
  position: absolute;
  inset: 0;
  isolation: isolate;   /* contém os mix-blend-mode dentro da hero */
}

.hero__texture,
.hero__bg2 img,
.hero__bg1 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg2,
.hero__bg1 {
  position: absolute;
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* fundo e retrato são ancorados pelo RODAPÉ, não pelo topo: é isso que
   mantém o ticker sempre colado na base da foto em qualquer largura */
.hero__bg2 {
  bottom: var(--ticker-h);
  left: var(--bg2-left);
  right: 0;
  height: var(--bg2-h);
}
.hero__bg2 img { opacity: 0.48; }

/* véu escuro que suaviza a entrada do bg2 pela esquerda */
.hero__bg2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 43.867%);
}

.hero__media {
  position: absolute;
  z-index: 1;
  bottom: var(--ticker-h);
  right: var(--media-right);
  width: var(--media-w);
  height: var(--media-h);
}

.hero__bg1 {
  bottom: var(--ticker-h);
  left: var(--bg1-left);
  width: var(--bg1-w);
  height: var(--bg1-h);
  transform: scaleX(-1);   /* espelhado, como no Figma */
}
.hero__bg1 img { opacity: 0.48; }

/* ---------- Retrato ---------- */

.hero__subject {
  position: absolute;
  inset: 0;
}

.hero__subject-shadow,
.hero__subject-main {
  position: absolute;
  width: 435px;
  height: 763px;
  overflow: hidden;
}
.hero__subject-shadow { left: 0; top: 16px; filter: blur(15.2px); opacity: 0.24; }
.hero__subject-main   { left: 33px; top: 0; }

/* mesmo enquadramento do Figma para as duas camadas */
.hero__subject-shadow img,
.hero__subject-main img {
  position: absolute;
  left: -8.97%;
  top: -8.05%;
  width: 135.86%;
  height: 116.09%;
  max-width: none;
}

/* o convite ao vídeo flutua sobre o retrato, no lugar do selo. Fica
   fora de `.hero__subject` porque aquele bloco é só imagem empilhada. */
.hero .hero-video {
  position: absolute;
  z-index: 1;
  left: var(--video-left);
  bottom: var(--video-bottom);
}

/* o anel gira; o núcleo com a marca fica parado, senão o frontão vira de cabeça para baixo
   (as duas classes de imagem seguem em uso pelo selo da seção "Como") */
.hero__selo-ring { animation: selo-spin 48s linear infinite; }

@keyframes selo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Header ---------- */

/* z-index 3 e não 2: o conteúdo da hero também está em 2 e vem depois
   no HTML, então empatava e ganhava. Enquanto o header era só uma barra
   isso não aparecia, porque os dois não se sobrepõem - mas o painel do
   dropdown desce por cima do conteúdo, e o `z-index: 20` dele não
   resolve nada: ele vive DENTRO do contexto de empilhamento criado
   aqui, e o que decide é este número, não o dele. */
.hero__header {
  position: relative;
  z-index: 3;
}
.hero__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 95px;
  border-bottom: 1px solid var(--color-neutral-600);
}
/* Sem `filter: brightness(0) invert(1)`: o arquivo agora é o
   `logo-type-ouro.svg`, já no dourado da marca. Filtro aqui pintaria
   tudo de branco de novo. A versão preta original segue no repositório
   para uso sobre fundo claro. */
.hero__logo {
  display: block;   /* evita o espaço de descendente do img inline */
  width: 301px;
  height: 42px;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.hero__nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__nav-list a {
  font-size: 1rem;
  line-height: var(--leading-body);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quad);
}
.hero__nav-list a:hover { color: var(--color-gold-bright); }

/* ---------- Menu de áreas (dropdown) ----------
   O menu expunha duas das cinco áreas e escondia três. Agrupar em
   "Áreas de Atuação" derruba a navegação de cinco itens para quatro e,
   ao mesmo tempo, passa a representar as cinco - a lista é a mesma do
   rodapé, para os dois falarem igual.

   Abre no CLIQUE e não só no hover: hover-only quebra em notebook com
   tela sensível ao toque e é intransitável por teclado. O hover abre
   como conveniência no desktop, mas quem manda no estado é o botão.
   O painel vive em HTML, nunca injetado por JS, pela mesma regra de
   indexabilidade que vale para o FAQ. */
.nav-areas { position: relative; }

.nav-areas__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: var(--leading-body);
  color: var(--color-white);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quad);
}
.nav-areas__btn:hover,
.nav-areas__btn[aria-expanded="true"] { color: var(--color-gold-bright); }

/* a seta gira 90 graus ao abrir: é o mesmo `caret-right` do FAQ, e
   reaproveitar o ícone evita mais um símbolo no sprite de cada página */
.nav-areas__btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out-quad);
}
.nav-areas__btn[aria-expanded="true"] .icon { transform: rotate(90deg); }

.nav-areas__painel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 18px);
  left: -20px;
  min-width: 248px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--color-navy-deep);
  border-top: 2px solid var(--color-gold-line);
  box-shadow: var(--shadow-lift);
}
/* `hidden` fecha de verdade: sem foco e sem leitor de tela, e sem
   depender do CSS ter carregado */
.nav-areas__painel[hidden] { display: none; }

/* Ponte invisível sobre o vão entre o botão e o painel.
   O painel é posicionado em absoluto, então a caixa de `.nav-areas` tem
   só a altura do botão: os 18px de respiro no meio não pertencem nem ao
   botão nem ao painel. Sem esta ponte o ponteiro sai da subárvore do
   grupo ao descer, o `mouseleave` dispara e o painel fecha antes de
   alguém alcançar os itens. Ela cobre o vão sem aparecer. */
.nav-areas__painel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.dock .nav-areas__painel::before { top: -14px; height: 14px; }

/* `li a` e não só `a`: dentro do dock, `.dock__nav a` tem a mesma
   especificidade e vem depois no arquivo, então venceria o item do
   painel e devolveria a cor e o corpo da barra. */
.nav-areas__painel li a {
  display: block;
  padding: 10px 24px;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-neutral-100);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out-quad),
              color var(--duration-fast) var(--ease-out-quad);
}
.nav-areas__painel li a:hover { background: var(--color-navy); color: var(--color-white); }
.nav-areas__painel li [aria-current] { color: var(--color-gold-bright); }

/* No dock o painel abre para BAIXO também, mas o dock é uma barra fina
   colada no topo: sem o recuo o painel encosta na borda dela. */
.dock .nav-areas__painel { top: calc(100% + 14px); }

/* ---------- Dock claro ----------
   A barra flutuante é branca, então tudo que vive nela inverte: o botão
   das áreas, a seta, o painel e a hamburguer. O painel do header segue
   navy, porque lá o fundo é a hero escura. */
.dock .nav-areas__btn { color: var(--color-ink); }
.dock .nav-areas__btn:hover,
.dock .nav-areas__btn[aria-expanded="true"] { color: var(--color-navy); }

.dock .nav-areas__painel {
  background: var(--color-white);
  border-top-color: var(--color-gold-line);
  box-shadow: var(--shadow-lift);
}
.dock .nav-areas__painel li a { color: var(--color-neutral-700); }
.dock .nav-areas__painel li a:hover { background: var(--color-neutral-100); color: var(--color-ink); }
.dock .nav-areas__painel li [aria-current] { color: var(--color-navy); }

.hero__burger {
  display: none;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

/* ---------- Entrada da hero ----------
   Sequência: imagem, textos, marcador. Em CSS puro e não por JS de
   propósito: o main.js tem `defer` e só roda depois do parse, então uma
   entrada controlada por classe começaria tarde e piscaria.

   O H1 é o elemento de LCP desta página (medido: 8.800px de área, o maior).
   Cada milissegundo de `animation-delay` nele entra direto no LCP, porque o
   navegador só considera pintado o que tem opacidade acima de zero. Por isso
   o bloco do título abre com apenas 100ms: o suficiente para a imagem sair
   na frente e ler como sequência, sem cobrar caro na métrica.
   Os 15% do gesto de scroll viram px aqui: são elementos de uma linha só, e
   a porcentagem daria deslocamentos desiguais entre eles. */

@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* a imagem sobe menos e mais devagar: peça grande anda pouco */
@keyframes heroInMedia {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__bg,
.hero__media {
  animation: heroInMedia var(--duration-slow) var(--ease-out-cubic) both;
}

.hero__title-wrap  { animation: heroIn 600ms var(--ease-out-cubic) 100ms both; }
.hero__subheader   { animation: heroIn var(--duration-reveal) var(--ease-out-cubic) 260ms both; }
.hero__description { animation: heroIn var(--duration-reveal) var(--ease-out-cubic) 360ms both; }
.hero__actions     { animation: heroIn var(--duration-reveal) var(--ease-out-cubic) 460ms both; }

/* ---------- Dock flutuante ----------
   Aparece quando o header original sai de vista. Descolado do topo e das
   laterais, com raio e sombra: é uma peça sobre a página, não uma barra
   colada nela. O fundo é o navy com alpha e desfoque atrás, para o
   conteúdo continuar legível passando por baixo. */

.dock {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 90;   /* abaixo do menu mobile, que é 100 */
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  /* Barra clara, e não navy: sobre a hero escura o dourado da marca
     rendia pouco contraste.
     A marca segue dourada aqui, por decisão do Caio depois de ver as
     duas no ar. Sobre branco ela dá 2,5:1, abaixo do que se pediria de
     um texto - mas logotipo é dispensado do critério de contraste pela
     própria WCAG (1.4.3), e a leitura da marca não depende de ler cada
     letra. O `logo-type.svg` preto continua no repositório para quando
     alguma peça precisar de contraste cheio sobre claro. */
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 10px 30px rgb(15 32 51 / 0.18);
  /* sai por cima e volta: some na direção de onde veio */
  transform: translate3d(0, calc(-100% - 24px), 0);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-out-cubic),
              opacity var(--duration-fast) var(--ease-out-quad),
              visibility 0s linear var(--duration-base);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .dock {
    background: rgb(255 255 255 / 0.78);
    -webkit-backdrop-filter: blur(14px); /* Safari/iOS exige o prefixo */
    backdrop-filter: blur(14px);
  }
}

.dock.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--duration-base) var(--ease-out-cubic),
              opacity var(--duration-base) var(--ease-out-quad),
              visibility 0s;
}

.dock__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 10px 12px 10px 24px;
}

.dock__logo { display: block; flex: none; margin-right: auto; }
.dock__logo img {
  display: block;
  width: 196px;
  height: auto;
}

/* `> ul` e não `ul`: com o dropdown de áreas existe uma segunda lista
   aninhada aqui dentro, e o seletor descendente deitava o painel na
   horizontal junto com a barra. */
.dock__nav > ul {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dock__nav a {
  font-size: 0.9375rem;
  line-height: var(--leading-body);
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quad);
}
.dock__nav a:hover { color: var(--color-navy); }

/* O CTA da barra virou `btn--whatsapp`: sobre branco, o `btn--paper` de
   antes desaparecia. É o dourado sólido, e ele continua exclusivo do
   WhatsApp - este botão É o do WhatsApp. Padding menor que o do corpo
   da página, porque a barra tem 59px de altura. */
.dock__cta { flex: none; padding: 10px 20px; font-size: 0.9375rem; }
.dock__cta .icon { width: 18px; height: 18px; }

/* contorno em vez de preenchimento: `paper` sobre a barra branca dá
   1,06:1 e o botão sumia depois que o dock inverteu */
.dock__burger {
  display: none;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radius);
  color: var(--color-ink);
  cursor: pointer;
}

@media (max-width: 899px) {
  .dock__nav { display: none; }
  .dock__cta { display: none; }
  .dock__burger { display: inline-flex; }
  .dock__inner { gap: 16px; padding: 10px 10px 10px 18px; }
  .dock__logo img { width: 168px; }
}

@media (max-width: 479px) {
  .dock { top: 8px; }
  .dock__logo img { width: 148px; }
}

/* ---------- Menu mobile ---------- */

/* fixed e não absolute: o painel cobre a viewport, não a hero. Fica preso
   ao stacking context do header, que já está acima do resto da página. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(15 32 51 / 0.6);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-cubic);
}
.menu.is-open { opacity: 1; }

.menu__painel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 88px var(--gutter) 48px;
  background: var(--color-navy-deep);
  transform: translateY(-12px);
  transition: transform var(--duration-base) var(--ease-out-cubic);
}
.menu.is-open .menu__painel { transform: none; }

.menu__fechar {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}
.menu__fechar .icon { width: 22px; height: 22px; }

.menu__nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__nav a {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quad);
}
.menu__nav a:hover { color: var(--color-gold-bright); }

/* No mobile as áreas entram como grupo aninhado e JÁ ABERTO. Acordeão
   dentro de um painel que o visitante acabou de abrir é um clique a
   mais para ver o que ele veio ver. O rótulo do grupo é texto, não
   botão: aqui ele não abre nada, só nomeia a lista. */
.menu__grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.menu__grupo-titulo {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-line);
}
.menu__grupo ul { gap: 18px; }
/* um passo abaixo do item de primeiro nível: a hierarquia precisa
   aparecer sem recuo, que em lista centralizada não funciona */
.menu__grupo a { font-size: 1.25rem; }

.menu__cta { width: min(320px, 100%); }

/* ---------- Conteúdo ---------- */

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--content-top) - 95px);
  /* o conteúdo nunca entra na área do ticker (que é absoluto no rodapé) */
  padding-bottom: calc(var(--ticker-h) + 56px);
}
.hero__content-inner {
  max-width: var(--content-w);
  margin-left: var(--content-offset);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--copy-w);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-white);
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-gold-line);
}

/* o bloco do título carrega a highlight-line, ancorada ao seu rodapé.
   os 12px de padding reproduzem a folga que o Figma deixa entre o
   fim do título e o traço do marcador */
.hero__title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 12px;
}

.hero__title {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-display);
  font-weight: 500;
  /* Pedido do dono (2026-08-07): o clamp original ia a 64px com entrelinha 1
     numa coluna de 481px — 6 linhas amontoadas. Menor, mais largo e com
     respiro entre linhas. */
  font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); /* 36 -> 52 */
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}
.hero__title span { display: block; }
.hero__title em {
  font-style: normal;
  color: var(--color-gold-bright);
}

.hero__highlight {
  position: absolute;
  left: 36px;
  bottom: -4px;
  width: 465px;
  max-width: calc(100% - 36px);
  height: 8px;
  background: url("../assets/icons/highlight-line.svg") no-repeat center / 100% 100%;
  /* microanimação: o marcador é riscado da esquerda para a direita */
  clip-path: inset(0 100% 0 0);
}
.hero.is-marked .hero__highlight {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--duration-slow) var(--ease-out-cubic);
}

.hero__subheader {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.hero__description {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-white);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ---------- Ticker ---------- */

.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-navy-soft);
}
.ticker__track {
  display: flex;
  align-items: center;
  flex: none;
  animation: ticker-scroll 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* dois grupos idênticos: o clone é o que fecha o loop sem emenda */
.ticker__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 40px;
  flex: none;
}

.ticker__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-ticker);
  line-height: 1.6;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-100);
  white-space: nowrap;
}
.ticker__dot {
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-gold-line);
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   ÁREAS DE ATUAÇÃO - superfície clara
   ============================================================ */

.areas {
  background: var(--color-paper);
  padding-block: var(--space-section);
}

/* medida calibrada para o H2 fechar em duas linhas equilibradas */
.areas__head {
  max-width: 830px;
  margin-bottom: var(--space-block);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--texto-secundario, var(--color-neutral-600));
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--color-gold-line);
}

.areas__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
.areas__title em {
  font-style: normal;
  color: var(--color-navy);
}

/* grade assimétrica: o carro-chefe é um bloco alto, o resto vira lista */
.areas__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: stretch;
}

/* ---- Carro-chefe ---- */

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 40px;
  border: 1px solid var(--color-neutral-200);
  border-top: 2px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
.area-card:hover {
  border-color: var(--color-neutral-400);
  border-top-color: var(--color-gold-bright);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.area-card__icon { color: var(--color-navy); }
.area-card__icon .icon,
.area-row__icon .icon { width: 32px; height: 32px; }

.area-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.area-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

.area-card__desc {
  margin: 0;
  max-width: 28ch;
  color: var(--color-neutral-600);
}

.link-arrow--ink { color: var(--color-navy); margin-top: 12px; }
.area-card:hover .link-arrow--ink { color: var(--color-ink); gap: 14px; }

/* ---- Silos secundários ---- */

.areas__list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 24px;
}

.area-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
.area-row:hover {
  border-color: var(--color-neutral-400);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.area-row__icon { flex: none; color: var(--color-navy); }

.area-row__body { flex: 1; }

.area-row__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}
.area-row__desc {
  margin: 0;
  font-size: 1rem;
  color: var(--color-neutral-600);
}

/* ---- Seta de afordância ----
   Aparece no hover, saindo na diagonal. Em aparelho sem hover ela
   fica sempre visível: esconder a afordância no touch seria tirar
   a única pista de que o bloco é clicável. */
.hint-arrow {
  width: 20px;
  height: 20px;
  color: var(--color-navy);
  transition: opacity var(--duration-base) var(--ease-out-quad),
              transform var(--duration-base) var(--ease-out-cubic);
}

.area-row__arrow { margin-left: auto; }

@media (hover: hover) {
  .hint-arrow { opacity: 0; transform: translate3d(-6px, 6px, 0); }
  .area-row:hover .hint-arrow,
  .area-row:focus-visible .hint-arrow,
  .situacao:hover .hint-arrow,
  .situacao:focus-visible .hint-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   SITUAÇÕES - superfície escura
   Índice editorial: filete separando linhas, sem card. São falas do
   visitante, então o peso está no texto, não em caixa.
   ============================================================ */

.situacoes {
  background: var(--color-navy-deep);
  color: var(--color-white);
  padding-block: var(--space-section);
}

.situacoes__head {
  max-width: 640px;
  margin-bottom: var(--space-block);
}

.eyebrow--on-dark { color: var(--color-gold-line); }

.situacoes__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  text-wrap: balance;
}

/* fluxo por coluna, não por linha: assim a coluna da esquerda fica com as
   três dores de imobiliário e a da direita com sucessões e família,
   em vez de embaralhar os silos linha a linha */
.situacoes__list {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.situacoes__list > li { border-bottom: 1px solid rgb(255 255 255 / 0.14); }

.situacao {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding-block: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-base);
}
.situacao:hover { color: var(--color-gold-bright); }

.situacao__text { flex: 1; }
.situacao .hint-arrow { color: currentColor; }

/* ============================================================
   COMO O ESCRITÓRIO TRABALHA - fundo fotográfico
   Figma 23:15 (1920x882) e 23:115 (375x1246).
   A foto cobre a seção; selo, conteúdo e credenciais flutuam.
   ============================================================ */

/* A foto entra em tamanho INTRÍNSECO (2283x882 = a altura exata da seção,
   sem reescala) e é ancorada pela COLUNA DE TEXTO, não pela borda da tela.
   O que o Figma fixa não é a distância dele até a esquerda da viewport, é a
   distância dele até o texto: a cabeça fica 323px à esquerda da primeira
   letra. Ancorar na esquerda o afastava do texto conforme a tela crescia -
   era isso que deixava ele "muito à esquerda".
   1128px = 323 (respiro até a primeira letra) + 805 (cabeça dentro da foto).
   O min(0px) impede que acima de 2283px sobre preto à ESQUERDA da foto,
   onde a borda não é preta; à direita ela é #000, então a emenda com o
   fundo da seção não aparece. */
.como {
  --img-w: 2283px;
  --img-h: 882px;
  --img-left: min(0px, calc(100% - var(--content-right) - var(--content-w) - 1128px));
  --img-top: 0px;

  --como-h: 882px;
  --selo-size: 160px;
  /* o selo acompanha a foto: centro em (978, 413) dentro dela, apoiado na
     linha do ombro esquerdo dele. Fora do calc ele descolaria do ombro. */
  --selo-left: calc(var(--img-left) + 898px);
  --selo-top: 333px;
  --cred-top: 666px;
  --content-top: 98px;
  --cred-w: 1310px;

  /* conteúdo: 563px de largura, borda direita a 73px da do container.
     não escala com a viewport, porque o corpo do texto também não escala */
  --content-w: 563px;
  --content-right: max(var(--gutter), calc(50% - var(--container-wide) / 2 + 73px));

  position: relative;
  height: var(--como-h);
  overflow: hidden;
  /* preto amostrado da borda direita da própria foto, para o sangramento
     à direita em telas acima de 1920px */
  background: #000;
  color: var(--color-white);
}

/* sem recorte próprio: a foto tem 2283x882, exatamente a altura da seção.
   O que sobra de largura abaixo de 2283px é cortado pelo overflow da .como,
   e o corte é assimétrico de propósito - o --img-left tira mais da borda
   esquerda (poltrona) do que da direita (fundo preto). */
.como__bg {
  position: absolute;
  z-index: 0;   /* sem isto o fundo absoluto pinta por cima do conteúdo em fluxo */
  /* block, não inline: em fluxo (tablet e mobile) a linha de base do <img>
     deixava 7px de fundo aparecendo abaixo da foto */
  display: block;
  left: var(--img-left);
  top: var(--img-top);
  width: var(--img-w);
  height: var(--img-h);
  max-width: none;
  object-fit: cover;
}

.como__selo {
  position: absolute;
  z-index: 1;
  left: var(--selo-left);
  top: var(--selo-top);
  width: var(--selo-size);
  height: var(--selo-size);
}
.como__selo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Conteúdo ---------- */

.como__content {
  position: absolute;
  z-index: 1;
  top: var(--content-top);
  right: var(--content-right);
  width: var(--content-w);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.como__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 496px;
}
.como__head .eyebrow { margin: 0; }

/* o marcador ancora no rodapé do bloco do título, como na hero */
.como__title-wrap { position: relative; padding-bottom: 13px; }

.como__title {
  margin: 0;
  max-width: 440px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}
.como__title span { display: block; }
.como__title em { font-style: normal; color: var(--color-gold-bright); }

.como__highlight {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 220px;
  max-width: 100%;
  height: 8px;
  background: url("../assets/icons/highlight-line-sm.svg") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
}
.como.is-marked .como__highlight {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--duration-slow) var(--ease-out-cubic);
}

/* ---------- Método ---------- */

.metodo {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 0;
}
.metodo__item { display: flex; flex-direction: column; gap: 7px; }

.metodo__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}
.metodo__desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-white);
}

/* ---------- Credenciais ----------
   Fato verificável no lugar de autoelogio. Sem número de casos,
   sem taxa de êxito, sem valor: Provimento 205/2021. */
/* centralizada por margem automática, não por transform: o transform
   pertence ao [data-reveal] e um sobrescreveria o outro */
.credenciais {
  position: absolute;
  z-index: 1;
  top: var(--cred-top);
  left: 0;
  right: 0;
  width: min(var(--cred-w), 100% - var(--gutter) * 2);
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0 auto;
  /* 22 e não 26 no topo: o filete de 4px do Figma é desenhado por dentro,
     e aqui ele soma por fora. 44 + 22 + 23 + 4 = 93px */
  padding: 22px 85px 23px 84px;
  list-style: none;
  background: var(--color-paper);
  border-top: 4px solid var(--color-gold-bright);
}
/* 44px é a altura do filete, e é ela que define a altura da faixa
   (44 + 26 + 23 = 93px, como no Figma) */
.credenciais__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
}
/* o filete tem 44px de altura, não a altura da linha inteira. por isso
   é pseudo-elemento e não border-left: assim a entrelinha do texto
   continua sendo a tipográfica */
.credenciais__item + .credenciais__item {
  position: relative;
  padding-left: 38px;
}
.credenciais__item + .credenciais__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -22px;
  width: 1px;
  height: 44px;
  background: var(--color-neutral-200);
}

/* Entre 1400 e 1600 a coluna de texto encosta no selo: encolhe a coluna
   e joga a goteira para o mínimo, em vez de deixar sobrepor. */
@media (max-width: 1599px) {
  .como {
    --content-w: 500px;
    --content-right: var(--gutter);
  }
}

/* ---- Tablet (768-1399): recorte próprio, texto DENTRO da foto ----
   Lado a lado deixa de caber por aritmética, não por gosto: a foto desktop
   é 2,59:1 e, para o texto entrar ao lado dele sobre o fundo escuro, a
   janela precisa mostrar ~1700px da arte. Abaixo de ~1150px de viewport ela
   mostra menos que isso - ou o texto cobre o rosto, ou ele sai do
   enquadramento. Por isso o tablet tem arte própria (1600x2000), com ele
   na base e fundo liso em cima, e o texto mora nesse fundo liso.
   Mesma lógica da arte mobile. */
@media (min-width: 601px) and (max-width: 1399px) {
  /* a arte é 1600x2000 com ele ocupando a base. Ancorada na BASE: o recorte
     come sempre do fundo liso, nunca dele. A janela livre vai do topo até o
     alto da cabeça dele, que fica 717/1600 = 44,81% da largura acima da
     base - não até onde a foto original começa. */
  .como {
    /* o piso é 750 e não menos: abaixo de 1,25x a largura (=750px em 601) a
       arte passaria a ser cortada na lateral, e aí a conta da janela livre,
       que é toda em vw, deixaria de bater */
    --art-h: clamp(750px, 95vw, 1180px);
    --art-clear: calc(var(--art-h) - 44.81vw);

    height: auto;
    /* a seção termina na base da foto: nada de faixa navy sobrando embaixo.
       É o padding zerado que faz o `bottom` do card medir a partir dela. */
    padding-bottom: 0;
  }

  .como__bg {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--art-h);
    object-fit: cover;
    object-position: center bottom;
  }

  /* o selo é medido a partir da BASE da arte, que é a borda que nunca é
     cortada: centro a 56,1% da largura e a 29,31% dela acima da base */
  .como__selo {
    --selo-size: 124px;
    left: calc(56.1% - var(--selo-size) / 2);
    top: calc(var(--art-h) - 29.31vw - var(--selo-size) / 2);
  }

  .como__content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: var(--art-clear);
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-inline: var(--gutter);
    gap: 28px;
    text-align: center;
  }
  .como__head { max-width: none; align-items: center; gap: 16px; }
  .como__head .eyebrow { justify-content: center; }

  .como__title-wrap { padding-bottom: 16px; }
  .como__title {
    max-width: 20ch;
    font-size: clamp(1.875rem, 3.4vw, 2.5rem);
    line-height: 1.18;
  }
  .como__highlight { left: 50%; transform: translateX(-50%); bottom: 0; }

  /* os três blocos lado a lado: em coluna eles empurrariam o último para
     cima da cabeça dele nas telas mais estreitas da faixa */
  .metodo {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(20px, 2.8vw, 32px);
    max-width: 900px;
    text-align: center;
  }
  .metodo__item { flex: 1 1 0; }
  .metodo__title { font-size: clamp(1rem, 1.7vw, 1.25rem); }

  /* o card flutua sobre a base da foto, como no desktop. 6,5vw = os mesmos
     73px de folga que o Caio marcou em 1121px de viewport.
     Compacto: sobre a foto ele disputa altura com o selo, e cada linha a
     mais que os rótulos quebram empurra o card por cima do ombro dele. */
  .credenciais {
    top: auto;
    bottom: 6.5vw;
    margin-inline: auto;
    gap: 18px;
    row-gap: 8px;
    padding: 14px 28px 13px;
  }
  .credenciais__item { min-height: 34px; font-size: 0.75rem; }
  .credenciais__item + .credenciais__item { padding-left: 18px; }
  .credenciais__item + .credenciais__item::before { height: 34px; margin-top: -17px; }
}

/* Abaixo de 1100 os quatro rótulos não cabem em uma linha. Em vez de deixar
   o `flex-wrap` escalonar - com o filete sobrando à esquerda de quem começa
   linha nova - vira grade 2x2, com o filete só entre as colunas. */
@media (min-width: 601px) and (max-width: 1099px) {
  .credenciais {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 0;
    row-gap: 10px;
    padding: 16px 24px 15px;
  }
  .credenciais__item { position: relative; justify-content: center; text-align: center; }
  .credenciais__item + .credenciais__item { padding-left: 0; }
  .credenciais__item + .credenciais__item::before { content: none; }
  .credenciais__item:nth-child(even) { padding-left: 20px; }
  .credenciais__item:nth-child(even)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    width: 1px;
    height: 34px;
    background: var(--color-neutral-200);
  }
}

/* Abaixo de 900 o card sobe demais - os rótulos ocupam duas linhas altas - e
   passa por cima do ombro. O selo sai: a informação dele (OAB/PR 38.740)
   está no próprio card, então some o ornamento, não o dado. */
@media (min-width: 601px) and (max-width: 899px) {
  .como__selo { display: none; }
}

/* A faixa de credenciais é a primeira a apertar: são quatro rótulos que
   não quebram. Comprime tipo, gap e padding e, se ainda não couber,
   quebra em duas linhas em vez de estourar para fora da tela. */
@media (max-width: 1559px) {
  .credenciais {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    column-gap: 24px;
    padding: 22px 40px 20px;
  }
  .credenciais__item { font-size: 0.78125rem; }
  .credenciais__item + .credenciais__item { padding-left: 24px; }
}

/* ---- Entrada por scroll (gesto único do sistema) ---- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 15%, 0);
  transition: opacity var(--duration-reveal) var(--ease-out-quad),
              transform var(--duration-reveal) var(--ease-out-cubic);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsivo
   ============================================================ */

/* Tablet: mesma arquitetura, bloco de mídia reduzido */
@media (max-width: 1199px) {
  .hero {
    --hero-h: 900px;
    --media-w: 360px;
    --media-h: 587px;
    --media-right: var(--gutter);
    --bg1-left: 58%;
    --bg1-w: 366px;
    --bg1-h: 654px;
    --bg2-left: 62%;
    --bg2-h: 654px;
    --video-left: 43px;
    --video-bottom: 73px;
    --content-w: 480px;
    --copy-w: 440px;
    --content-offset: 0px;
    --content-top: 168px;
  }
  .hero__subject-shadow,
  .hero__subject-main { width: 335px; height: 587px; }
  .hero__subject-main { left: 25px; }
  .hero__logo { width: 240px; height: 34px; }

  /* o bloco de mídia encolhe para 360px e o disco de 128 deixava o
     rótulo a 10px da borda direita dele: um passo menor devolve a folga */
  .hero .hero-video { --disco: 104px; }

  .hero__nav-list { display: none; }
  .hero__burger { display: inline-flex; margin-left: 16px; }

  .areas__grid { grid-template-columns: 1fr; }
  .areas__list { grid-template-rows: none; }
  .area-card { padding: 32px; }
  .area-card__icon { margin-top: 8px; }

  .situacoes__list { column-gap: 40px; }

  .credenciais { padding: 20px 28px 18px; }
}

/* Mobile: layout centralizado, retrato abaixo do conteúdo (node 16:278) */
@media (max-width: 767px) {
  .hero {
    --hero-h: auto;
    --ticker-h: auto;
    --video-left: 4px;
    --video-bottom: 64px;
    height: auto;
    padding-bottom: 0;
  }

  .hero__bg { inset: 0; }
  .hero__texture { height: 100%; }

  .hero__bg2 { display: none; }

  /* bg1 encosta no topo, espelhado, com véu subindo */
  .hero__bg1 {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 417px;
  }
  .hero__bg1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.32) 25.659%, rgb(0 0 0 / 0) 86.691%);
  }

  .hero__header-inner { height: 87px; border-bottom: 0; }
  .hero__logo { width: 207px; height: 29px; }
  .hero__nav { display: none; }
  .hero__burger { display: inline-flex; }

  /* 122 = topo do Hero_Content no Figma (209) menos a altura do header (87) */
  .hero__content { padding-top: 122px; padding-bottom: 32px; }
  .hero__content-inner {
    max-width: none;
    margin-left: 0;
    gap: 32px;
    text-align: center;
    align-items: center;
  }
  .hero__copy { gap: 16px; align-items: center; max-width: none; width: 100%; }

  .hero__eyebrow {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .hero__title { max-width: none; letter-spacing: -0.03em; }
  .hero__highlight { left: 0; max-width: 100%; width: 100%; bottom: -14px; }

  .hero__subheader { font-size: 1.125rem; line-height: 1.333; }
  .hero__description {
    font-size: var(--text-small);
    line-height: 1.467;
    color: var(--color-neutral-100);
    opacity: 0.9;
  }

  .hero__actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .hero__actions .btn--whatsapp { width: 100%; font-size: var(--text-small); }
  .btn__label { display: none; }
  .btn__label-short { display: inline; }
  .link-arrow { font-size: var(--text-small); }

  /* retrato entra no fluxo, depois do conteúdo, ancorado à esquerda.
     a margem negativa reproduz a sobreposição de 47px do Figma, em que
     a foto sobe por trás da área dos botões */
  .hero__media {
    position: relative;
    z-index: 0;
    bottom: auto;
    right: auto;
    width: 271px;
    height: 451px;
    margin: -47px 0 0 34px;
  }
  .hero__subject-shadow,
  .hero__subject-main { width: 252px; height: 442px; }
  .hero__subject-shadow { top: 9px; filter: blur(8.8px); }
  .hero__subject-main { left: 19px; }

  /* o selo saía no mobile, mas o convite ao vídeo fica: ele é conteúdo,
     não ornamento. O rótulo passa por fora da caixa de 271px do bloco de
     mídia, para a área vazia à direita do retrato. */
  .hero .hero-video { --disco: 64px; gap: 14px; }
  .hero .hero-video__label { font-size: 1.0625rem; max-width: 12ch; }

  /* faixa de categorias quebra em linhas, sem rolagem */
  .ticker {
    position: relative;
    height: auto;
    margin-top: -19px;   /* a foto entra por baixo da faixa, como no Figma */
    padding: 24px 16px 32px;
  }
  .ticker__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding-left: 0;
    width: 100%;
    animation: none;
  }
  .ticker__group {
    display: contents;   /* os itens passam a quebrar dentro do track */
  }
  .ticker__group--clone { display: none; }
  .ticker__item { font-size: 1rem; line-height: 1.25; }
  .ticker__dot { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); }
  /* sem marcador depois do último item, senão ele cai sozinho numa linha */
  .ticker__group > .ticker__dot:last-child { display: none; }

  .areas__head { margin-bottom: 32px; }
  .situacoes__head { margin-bottom: 32px; }
  .situacoes__list { grid-template-rows: none; grid-auto-flow: row; }
  .situacao { min-height: 0; gap: 16px; padding-block: 20px; font-size: 1.25rem; }

  .area-card { padding: 28px 24px; gap: 10px; }
  .area-row { flex-wrap: wrap; padding: 24px; gap: 16px; }
  .area-row__body { flex-basis: 100%; order: 2; }
  .area-row__arrow { margin-left: auto; }
}

/* ---- Mobile (ate 600): arte vertical, texto DENTRO dela ----
   A fronteira é 600 e não 767 porque a arte mobile tem 563px de largura:
   acima disso ela vira upscale e, pior, a altura dispara (em 767 a seção
   passava de 3000px). Dali para cima quem atende é a arte tablet. */
@media (max-width: 600px) {
  .como {
    height: auto;
    padding: 0 0 30px;
    /* o que sobra abaixo da foto é superfície do site, não continuação da
       imagem - o preto da .como só existe para o sangramento do desktop */
    background: var(--color-navy-deep);
  }
  /* a arte mobile entra inteira, na proporção dela (563x1869): é isso que
     deixa a área lisa do topo medir sempre os mesmos 59,9% da foto,
     independente da largura, e as âncoras do texto virarem vw exatos */
  .como__bg {
    position: relative;   /* em fluxo: é ela que dá altura ao topo da seção */
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
    object-position: center;
  }

  /* 331,97vw = altura da foto (100vw x 1869/563).
     198,9vw = 59,9% dela, onde a cabeça dele começa. O texto fica centrado
     nessa janela: sobra igual em cima e embaixo em qualquer largura. */
  .como__content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 198.9vw;
    justify-content: center;
    align-items: stretch;
    padding-inline: var(--gutter);
    margin: 0;
    gap: 24px;
    text-align: center;
  }
  .como__head { max-width: none; align-items: center; gap: 16px; }
  .como__head .eyebrow { flex-direction: column; gap: 8px; }

  .como__title-wrap { width: 100%; padding-bottom: 16px; }
  /* menor que os 40px do Figma de propósito: aqui o título divide a janela
     com o método, e os 40px empurravam o último bloco para cima da cabeça
     dele. Encolhe junto abaixo de 375px, onde a janela também encolhe. */
  .como__title { max-width: none; font-size: min(2.25rem, 9.6vw); line-height: 1.2; }
  .como__highlight { left: 50%; transform: translateX(-50%); bottom: 0; }

  .metodo { flex-direction: column; gap: 20px; text-align: center; }
  .metodo__item { flex: 0 1 auto; }

  /* o selo mora DENTRO da foto, no fundo à direita da cabeça dele.
     228,17vw = 331,97 (altura da foto) - 103,8 (o centro do selo medido a
     partir da base, a borda que a arte nunca corta) */
  .como__selo {
    position: absolute;
    z-index: 1;
    left: auto;
    right: var(--gutter);
    top: calc(228.17vw - 80px);
    display: block;
    width: 160px;
    height: 160px;
    margin: 0;
  }

  /* o card monta na base da foto: 180px dele por dentro, o resto sangrando
     para o navy. A sobreposição é em px e não em vw de propósito - a altura
     do card é fixa, então em vw ele deixava de sangrar nas telas maiores.
     Fica em FLUXO com margem negativa, não absoluto: assim continua dando
     altura à seção e o padding de baixo segue valendo. */
  .credenciais {
    position: relative;
    top: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: min(286px, 100% - var(--gutter) * 2);
    margin: -180px auto 0;
    padding: 26px 24px 23px;
  }
  .credenciais__item { white-space: normal; min-height: 0; }
  .credenciais__item + .credenciais__item { padding-left: 0; }
  .credenciais__item + .credenciais__item::before { content: none; }
}

/* ============================================================
   MÉTODO EM 4 ETAPAS - superfície clara
   Volta ao paper depois de duas seções escuras seguidas (situações e
   a foto). A régua horizontal é a seção: sem ela, quatro colunas
   numeradas viram quatro cards e a ordem deixa de ser lida - e a ordem
   é justamente a informação, por isso é <ol>.
   ============================================================ */

.processo {
  background: var(--color-paper);
  padding-block: var(--space-section);
}

/* mesma medida do cabeçalho de "áreas": o H2 fecha em duas linhas */
.processo__head {
  max-width: 830px;
  margin-bottom: var(--space-block);
}

.processo__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
.processo__title em { font-style: normal; color: var(--color-navy); }

/* três trilhas (número, título, descrição) e cada etapa herda elas por
   subgrid: os títulos têm 1 ou 2 linhas e sem isso as descrições começavam
   em alturas diferentes, quebrando a leitura horizontal da régua */
.etapas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 40px;
  row-gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* o filete claro atravessa a goteira e emenda com a etapa seguinte: é uma
   régua contínua, não quatro traços soltos */
.etapa {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: 26px;
}
.etapa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -40px;
  height: 1px;
  background: var(--color-neutral-200);
}
.etapa:last-child::before { right: 0; }

/* o trecho dourado marca onde cada etapa começa. É `accent/line`, o
   dourado estrutural - o sólido continua exclusivo do WhatsApp */
.etapa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;   /* 2px e não 1: em 1px o dourado sumia contra o filete claro */
  background: var(--color-gold-line);
}

/* tabular-nums para os quatro números ficarem na mesma métrica: sem isso
   o 1 do 01 abre uma sangria diferente da dos outros três */
.etapa__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}

.etapa__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

.etapa__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-neutral-600);
  text-wrap: pretty;   /* as quatro descrições fechavam com órfã de uma palavra */
}

/* Um CTA só na seção (Hick). O apoio ao lado é informação prática, não
   argumento de venda: nada de prazo, índice ou promessa de desfecho. */
.processo__cta {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--filete-claro);
}
.processo__note {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-neutral-600);
}

/* duas colunas antes que a medida de cada etapa caia abaixo de ~34 caracteres */
@media (max-width: 1099px) {
  .etapas { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .etapa:nth-child(2n)::before { right: 0; }
}

/* Abaixo de 640 a régua vira vertical: é a mesma leitura de sequência,
   girada. Empilhar quatro blocos sem a régua perderia a ordem. */
@media (max-width: 639px) {
  /* em coluna única não há leitura horizontal para alinhar: o subgrid sai
     e cada etapa volta a ser um bloco em fluxo */
  .etapas { display: block; }

  .etapa {
    display: block;
    padding: 0 0 34px 28px;
  }
  .etapa:last-child { padding-bottom: 0; }

  .etapa::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
  }
  /* a régua para no último texto em vez de sobrar para baixo */
  .etapa:last-child::before { bottom: auto; height: 100%; }

  .etapa::after {
    width: 1px;
    height: 36px;
  }

  .etapa__num { margin-bottom: 8px; font-size: 1.25rem; }
  .etapa__title { font-size: 1.25rem; }

  .processo__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .processo__cta .btn { width: 100%; }
}

/* ============================================================
   VÍDEO DE APRESENTAÇÃO - superfície escura, bloco opcional
   Escura de propósito: separa duas seções claras (método e conteúdo)
   e é a superfície certa para um player. Duas colunas porque um frame
   16:9 na largura do container passaria de 700px de altura.
   ============================================================ */

.video {
  background: var(--color-navy-deep);
  padding-block: var(--space-section);
  color: var(--color-white);
}

.video__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: 64px;
}

.video__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  text-wrap: balance;
}

.video__lead {
  margin: 20px 0 0;
  max-width: 38ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-neutral-200);
  text-wrap: pretty;
}

.video__frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-navy-soft);
  border-radius: var(--radius);
  background: var(--color-navy);
  overflow: hidden;
}

/* Sem cursor de mão e sem hover: não é um player desligado, é um bloco
   que ainda não tem arquivo. Fingir interação aqui seria mentir. */
.video__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 100%;
}

.video__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-full);
  color: var(--color-gold-line);
}
.video__play .icon { width: 26px; height: 26px; margin-left: 4px; }

.video__note {
  margin: 0;
  /* centro e goteira própria: em telas estreitas o rótulo quebra em duas
     linhas e, sem isto, encostava na borda esquerda do frame */
  text-align: center;
  padding-inline: 20px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  /* neutral-200 e não 400: sobre o navy do frame, o 400 dava 4,3:1 e
     reprovava em AA para este corpo */
  color: var(--color-neutral-200);
}

@media (max-width: 899px) {
  .video__inner { grid-template-columns: 1fr; gap: 36px; }
  .video__lead { max-width: none; }
}

/* abaixo de 600 o frame 16:9 tem ~190px de altura: o círculo de 72 mais o
   rótulo em duas linhas passavam a disputar o espaço */
@media (max-width: 599px) {
  .video__placeholder { gap: 14px; }
  .video__play { width: 56px; height: 56px; }
  .video__play .icon { width: 20px; height: 20px; }
}

/* ============================================================
   CONTEÚDO RECENTE - superfície clara
   ============================================================ */

.conteudo {
  background: var(--color-paper);
  padding-block: var(--space-section);
}

/* o "ver todos" sobe para o cabeçalho: no rodapé da grade ele competiria
   com os três "ler artigo" logo acima. Ancorado na BASE, na linha da última
   linha do H2 - decisão do Caio */
.conteudo__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--space-block);
}

.conteudo__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}

/* 6px para a base ótica bater: o H2 tem entrelinha 1,1 e quase não sobra
   descida, o link tem 1,5 e sobra */
.conteudo__all { flex: none; margin-bottom: 6px; }

.artigos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.artigos > li { display: flex; }

/* mesma anatomia da area-card: filete dourado no topo, borda fria em
   volta, e o dourado só esquenta no hover */
.artigo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--color-neutral-200);
  border-top: 2px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
.artigo:hover {
  border-color: var(--color-neutral-400);
  border-top-color: var(--color-gold-bright);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.artigo:hover .link-arrow--ink { color: var(--color-ink); gap: 14px; }

/* categoria e título andam juntos; o `space-between` do card separa este
   bloco do "ler artigo", não a categoria do seu próprio título */
.artigo__body { display: block; }

.artigo__cat {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* resumo do artigo: existe só no índice do blog. Nos cards da home e
   do pilar o card é uma vitrine e o título basta; aqui a pessoa está
   escolhendo o que ler, e duas linhas de resumo é o que faz a escolha
   deixar de ser no chute */
.artigo__resumo {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto-secundario, var(--color-neutral-600));
  text-wrap: pretty;
}

/* o índice do blog é a única grade onde o card some por filtro */
.artigo[data-oculto] { display: none; }
.artigos > li[data-oculto] { display: none; }

.artigo__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: pretty;
}

@media (max-width: 1023px) {
  .artigos { grid-template-columns: 1fr 1fr; }
  /* o card órfão na última linha ficaria com metade da largura e o dobro
     do ar: ocupa a linha inteira. O `nth-child(odd)` é o que faz a regra
     valer só quando a lista tem contagem ímpar - a home tem 3 cards, o
     pilar tem 6, e com 6 em duas colunas não sobra órfão nenhum. */
  .artigos > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .artigos > li:last-child:nth-child(odd) .artigo { flex-direction: row; align-items: flex-end; gap: 32px; }
  .artigos > li:last-child:nth-child(odd) .artigo__title { max-width: 32ch; }
}

@media (max-width: 719px) {
  .conteudo__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .conteudo__all { margin-bottom: 0; }
  .conteudo__title { max-width: none; }

  .artigos { grid-template-columns: 1fr; gap: 20px; }
  .artigo { gap: 28px; padding: 28px 24px; }
  .artigos > li:last-child:nth-child(odd) .artigo { flex-direction: column; align-items: stretch; gap: 28px; }
  .artigo__title { font-size: 1.25rem; }
}

/* ============================================================
   PERGUNTAS FREQUENTES - superfície neutral-100
   Um passo mais escura que o paper: separa da seção de conteúdo, que
   também é clara, sem precisar de mais uma faixa escura.
   Duas colunas porque resposta corrida na largura do container passaria
   de 100 caracteres por linha. À direita a medida fica em ~72.
   ============================================================ */

.faq {
  background: var(--color-neutral-100);
  padding-block: var(--space-section);
}

.faq__inner {
  display: grid;
  /* 5fr e não 4fr: em 4 a coluna dá 411px e o H2 quebra em duas linhas */
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 64px;
}

.faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}

.faq__all { margin-top: 28px; }

.faq__list { border-top: 1px solid var(--filete-claro); }

.qa { border-bottom: 1px solid var(--filete-claro); }

/* list-style none nos dois: o Safari desenha o triângulo por
   ::-webkit-details-marker e o resto por `display: list-item` */
.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  transition: color var(--transition-base);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--color-navy); }
.qa__q:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

.qa__ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--color-gold-line);
  transition: transform var(--duration-base) var(--ease-out-cubic);
}
.qa[open] .qa__ico { transform: rotate(90deg); }

/* a goteira à direita mantém a medida da resposta menor que a da
   pergunta, que ainda tem o ícone ocupando a ponta */
.qa__a { padding: 0 44px 26px 0; }
.qa__a p {
  margin: 0;
  /* px e não ch: o "0" da Instrument Sans é largo, e 66ch computava 703px,
     o equivalente a 92 caracteres. 570px fecha em ~75, que é a medida */
  max-width: 570px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto-secundario, var(--color-neutral-600));
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
  .faq__all { margin-top: 20px; }
}

@media (max-width: 599px) {
  .qa__q { font-size: 1.125rem; gap: 16px; padding: 20px 0; }
  /* a goteira existe por causa do ícone, que só a pergunta tem: na
     resposta ela só encurtava a medida, que aqui já é estreita */
  .qa__a { padding-right: 0; }
}

/* ============================================================
   CONVERSÃO FINAL - superfície escura, Peak-End
   Os dois canais lado a lado. O card claro do formulário sobre o navy
   é o que dá o pico: ele é a única superfície clara da seção.
   ============================================================ */

.conversao {
  background: var(--color-navy-deep);
  padding-block: var(--space-section);
  color: var(--color-white);
}

.conversao__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 72px;
}

.conversao__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  text-wrap: balance;
}

.conversao__lead {
  margin: 20px 0 0;
  max-width: 42ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-neutral-200);
  text-wrap: pretty;
}

.conversao__wpp { margin-top: 32px; }

/* ---------- NAP ---------- */

.nap {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--filete-escuro);
  font-style: normal;   /* <address> vem em itálico por padrão */
}
.nap__linha {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-neutral-200);
}
.nap__linha a {
  color: var(--color-neutral-200);
  text-decoration: none;
  transition: color var(--transition-base);
}
.nap__linha a:hover { color: var(--color-gold-bright); }
.nap__mapa { display: inline-flex; margin-top: 16px; }

/* variante para superfície clara: o NAP nasceu na conversão, que é
   escura, e na página de contato ele aparece sobre o neutral-100.
   O corpo aqui é `ink` e não o secundário: na conversão o endereço é
   apoio ao lado do formulário, mas nesta página ele é o conteúdo da
   seção. Medido sobre o neutral-100, o secundário dava 4,6:1 (passa
   raspando em AA) e o ink dá 12,4:1. Endereço e telefone são o tipo
   de informação que alguém copia à mão. */
/* O filete não acompanha a lógica do corpo: no escuro ele é `navy-soft`,
   um passo acima da superfície, e traduzir isso para o claro daria
   `neutral-200` - que sobre o `neutral-100` rende 1,23:1 e some. O que
   funciona no navy não funciona aqui porque a distância entre os dois
   neutros claros é curta demais. `neutral-600` dá 4,62:1 e é o token que
   o sistema já usa como borda. */
.nap--claro {
  border-top-color: var(--color-neutral-600);
}
.nap--claro .nap__linha { color: var(--color-ink); }
.nap--claro .nap__linha strong { font-weight: 600; }
.nap--claro .nap__linha a { color: var(--color-navy); }
.nap--claro .nap__linha a:hover { color: var(--color-ink); }

/* O mapa é a segunda superfície clara da seção, junto com o card do
   formulário: os dois se equilibram sobre o navy. Moldura em navy-soft
   para não flutuar solto, e proporção fixa para a altura não depender
   do que o Google devolve. */
.mapa {
  aspect-ratio: 16 / 7;
  margin-top: 24px;
  border: 1px solid var(--color-navy-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-navy);
}
.mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Formulário ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
}

.campo { display: flex; flex-direction: column; gap: 8px; }

/* dois campos curtos dividem a linha; o wrapper é um .campo só para
   herdar o gap da coluna */
.campo--par {
  flex-direction: row;
  gap: 16px;
}
.campo--par > .campo { flex: 1 1 0; min-width: 0; }

.campo__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-ink);
}
.campo__opcional {
  margin-left: 6px;
  font-weight: 400;
  color: var(--color-neutral-600);
}

.campo__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.campo__input:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgb(31 59 92 / 0.15);
}
.campo__textarea { resize: vertical; min-height: 120px; }

/* o caret é desenhado por nós porque a seta nativa do select não aceita
   cor; o `appearance: none` some com ela */
.campo__select { position: relative; }
.campo__select .campo__input { -webkit-appearance: none; appearance: none; padding-right: 44px; }
.campo__caret {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  transform: rotate(90deg);
  color: var(--color-neutral-600);
  pointer-events: none;
}

.campo__file {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--color-neutral-600);
}
.campo__file::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.campo__file::file-selector-button:hover { border-color: var(--color-neutral-400); }

.campo__ajuda {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

/* navy e não dourado: o sólido dourado é do WhatsApp e de mais nada.
   Aqui os dois CTAs dividem a tela, então este tem de ser outro tom */
.btn--navy {
  padding: 16px 28px;
  background: var(--color-navy-deep);
  color: var(--color-paper);
}
.btn--navy:hover { background: var(--color-navy); }

.form__submit { margin-top: 4px; width: 100%; }

.form__lgpd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-neutral-600);
  text-wrap: pretty;
}
.form__lgpd a { color: var(--color-navy); }

@media (max-width: 899px) {
  .conversao__inner { grid-template-columns: 1fr; gap: 40px; }
  .conversao__title { max-width: none; }
  .form { padding: 28px 24px; }
}

@media (max-width: 599px) {
  /* 16/7 na largura do celular dava 143px de altura: mapa que não mostra
     quarteirão nenhum não serve para se localizar */
  .mapa { aspect-ratio: 3 / 2; }
}

@media (max-width: 479px) {
  .campo--par { flex-direction: column; gap: 20px; }
  .conversao__wpp { width: 100%; }
}

/* ============================================================
   RODAPÉ - bloco de compliance, não decoração
   ============================================================ */

/* Figma: footer-desktop (43:304). O frame mede 1256 de conteúdo, 40px a
   menos que o --container-wide do site. Fica no container do projeto: 20px
   de cada lado é desvio invisível isolado, mas o rodapé desalinhado das
   seções de cima aparece na rolagem. */
.rodape {
  background: var(--color-navy);
  padding-block: 110px;
  color: var(--color-neutral-200);
}

.rodape__topo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 83px;
  padding-bottom: 64px;
}

/* ---- Bloco da marca ---- */

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 447px;
  text-align: center;
}

/* o SVG da marca é preto e some no navy; mesmo tratamento do header */
.rodape__logo {
  display: block;
  width: 435px;
  height: auto;
}

.rodape__id { display: flex; flex-direction: column; gap: 8px; }
.rodape__id p {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading-body);
  color: var(--color-neutral-200);
}

.rodape__divisor {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--color-navy-soft);
}

/* ---- Navegação ---- */

.rodape__nav { display: flex; align-items: flex-start; gap: 38px; }

.rodape__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 197px;
}
.rodape__nav .rodape__col + .rodape__col { margin-left: 48px; }

.rodape__titulo {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

.rodape__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rodape__lista a,
.rodape__endereco {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-neutral-200);
  text-decoration: none;
  transition: color var(--transition-base);
}
.rodape__lista a:hover,
.rodape__endereco:hover { color: var(--color-gold-bright); }

.rodape__endereco { font-size: 1rem; text-decoration: underline; }

/* alvo de 40px como no Figma; o ícone é 18 e o resto é área de clique */
.rodape__topo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--color-navy-soft);
  color: var(--color-neutral-200);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.rodape__topo-btn .icon { width: 18px; height: 18px; }
.rodape__topo-btn:hover {
  background: var(--color-gold-bright);
  color: var(--color-navy-deep);
}

/* ---- Base ---- */

.rodape__base {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--filete-escuro);
}
.rodape__copy {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading-body);
  color: var(--color-neutral-200);
}
.rodape__copy a {
  color: var(--color-neutral-200);
  transition: color var(--transition-base);
}
.rodape__copy a:hover { color: var(--color-gold-bright); }

.rodape__agencia { display: block; flex: none; }
.rodape__agencia img { display: block; width: 100px; height: auto; }

/* A linha do Figma soma 1172px fixos (447 da marca + 83 + 1 do filete + 83
   + 558 da navegação) e nada ali encolhe. Com as goteiras, ela só cabe a
   partir de 1220px de viewport - abaixo disso empurrava a página para o
   lado. Empilha e centraliza. */
@media (max-width: 1259px) {
  .rodape { padding-block: 72px 56px; }

  .rodape__topo {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding-bottom: 48px;
  }
  .rodape__marca { width: auto; max-width: 447px; }
  .rodape__divisor { display: none; }

  /* grid e não flex: o botão de topo precisa cair para uma linha própria.
     Em flex ele ficava boiando na vertical ao lado das colunas, que têm
     alturas diferentes. */
  .rodape__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    gap: 48px;
    width: 100%;
  }
  .rodape__col { width: 100%; align-items: center; text-align: center; }
  .rodape__nav .rodape__col + .rodape__col { margin-left: 0; }
  .rodape__lista { align-items: center; }
  .rodape__topo-btn { grid-column: 1 / -1; }
}

/* Mobile: tudo centralizado, uma coluna só */
@media (max-width: 767px) {
  .rodape__logo { width: min(300px, 78vw); }

  .rodape__nav { grid-template-columns: 1fr; gap: 40px; }

  /* 48 e não os 40 do Figma: no toque, 40px fica abaixo do alvo mínimo */
  .rodape__topo-btn { width: 48px; height: 48px; }

  .rodape__base {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
}

/* ============================================================
   HERO INTERNO - componente do template Pilar (e depois LP)
   A home tem a hero de composição, medida contra o Figma. Páginas
   internas não repetem aquilo: quem chega aqui veio de busca com o
   problema já formado, então o hero só precisa confirmar o assunto,
   dar o caminho de volta (breadcrumb) e oferecer o canal.
   Mesma gramática visual da home - textura navy, cena em `lighten`,
   palavra-chave em dourado - sem retrato e sem selo, que são a
   assinatura da capa.
   ============================================================ */

.hero-int {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.hero-int__bg {
  position: absolute;
  inset: 0;
  isolation: isolate;   /* contém a mescla dentro do hero */
}
.hero-int__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a cena entra pela direita e sangra até a borda, como o bg2 da home.
   Nasce de um ponto fixo do centro e não de uma porcentagem da viewport:
   em tela larga a porcentagem trazia a imagem para debaixo da coluna de
   texto, que é fixa em px.

   O ponto mudou de centro+208 para centro-29 (x=691 no frame de 1440 do
   node 60:15): nas páginas de área a cena deixou de ser textura de canto
   e passou a ser metade da composição, com a figura por cima dela. */
.hero-int__cena {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 29px);
  right: 0;
  mix-blend-mode: lighten;
  pointer-events: none;
}
/* 16% e não 34%: a foto de drone tem média de luminância 128 contra 48
   da cena antiga, então clareia quase três vezes mais por unidade de
   opacidade. O que aparece mais é a imagem, não a opacidade. */
.hero-int__cena img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
/* véu que dissolve a borda esquerda da cena: participa da mescla, igual
   ao da home - em `lighten` o preto reduz o clareamento.
   No Figma o véu é um retângulo de 979px que começa 230px À ESQUERDA da
   cena e é cortado por ela, ou seja: a rampa chega na borda da cena já
   com um quarto do caminho andado. Reconstruído aqui como 0,42 na borda
   esquerda dissolvendo até a direita, que é o mesmo trecho de rampa. */
.hero-int__cena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 100%);
}

/* Cena mais aberta - hoje só o Blog.
   Os 16% das páginas de área existem porque lá a cena divide espaço com
   um recorte de corpo inteiro: subir dali empataria os dois. O Blog não
   tem figura no hero, então a cena pode ser a imagem da página.
   A foto de biblioteca é escura de propósito e isso faz o trabalho
   sozinho: em `lighten` o preto não clareia nada, então só a estante
   iluminada à direita aparece, e o véu da esquerda quase não precisa
   trabalhar. */
.hero-int--cena-forte .hero-int__cena img { opacity: 0.42; }
.hero-int--cena-forte .hero-int__cena::after {
  background: linear-gradient(to right, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0) 70%);
}

/* mesmo motivo do header da capa: acima do `hero-int__content`, que
   também está em 2, para o painel do dropdown poder ser clicado */
.hero-int .hero__header { position: relative; z-index: 3; }

.hero-int__content {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: var(--space-section);
}

.hero-int__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
}
/* a sobrelinha genérica carrega margem própria; aqui quem espaça é o
   gap da coluna, senão o vão até o H1 vira 40px */
.hero-int__copy .eyebrow { margin: 0; }

/* 48px é o `Heading/H1` do sistema (o de 64 é exclusivo do hero da home).
   Fluido para não estourar a medida no tablet. */
.hero-int__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  text-wrap: balance;
}
.hero-int__title em { font-style: normal; color: var(--color-gold-bright); }

.hero-int__lead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.hero-int__actions {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 8px;
}


/* ---------- Breadcrumb ----------
   Visível em toda página interna, por decisão de arquitetura, e
   espelhado em JSON-LD BreadcrumbList no fim do documento. */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-neutral-200);
}
.breadcrumb li { display: flex; align-items: center; gap: 12px; }
/* mesmo marcador quadrado da sobrelinha e do ticker, um passo menor */
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--color-gold-line);
}
.breadcrumb a {
  color: var(--color-neutral-200);
  text-decoration: none;
  transition: color var(--transition-base);
}
.breadcrumb a:hover { color: var(--color-gold-bright); }
.breadcrumb [aria-current] { color: var(--color-white); }

@media (max-width: 767px) {
  .hero-int__cena { left: 0; }
  .hero-int__cena::after {
    background: linear-gradient(to top, rgb(0 0 0 / 0.72) 30%, rgb(0 0 0 / 0.2) 100%);
  }
  .hero-int__content { padding-top: 32px; }
  .breadcrumb { margin-bottom: 28px; }
  .hero-int__title { max-width: none; }
  .hero-int__actions { flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
  .hero-int__actions .btn--whatsapp { width: 100%; }
  .hero-int__actions .link-arrow { justify-content: center; }
}

/* ============================================================
   ABERTURA - dois parágrafos antes de apresentar o serviço
   Contextualiza a dor. A grade 5/7 é a mesma do FAQ e do vídeo:
   título à esquerda, corpo à direita, medida de leitura preservada.
   ============================================================ */

.abertura {
  background: var(--color-paper);
  padding-block: var(--space-section);
}
.abertura__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 64px;
}

.abertura__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
.abertura__title em { font-style: normal; color: var(--color-navy); }

.abertura__texto p {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-600);
  text-wrap: pretty;
}
.abertura__texto p:last-of-type { margin-bottom: 0; }
/* o CTA da seção é link, não botão: o botão da seção é o do hero logo
   acima, e dois de mesmo peso quebrariam Hick */
.abertura__texto .link-arrow { margin-top: 24px; }

@media (max-width: 899px) {
  .abertura__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   CONFLITOS DO SILO - superfície neutral-100
   Mesma anatomia da seção de áreas da home (card do carro-chefe +
   linhas), de propósito: é o mesmo tipo de informação um nível
   abaixo, e repetir a forma é o que faz o silo ler como silo.
   ============================================================ */

.conflitos {
  background: var(--color-neutral-100);
  padding-block: var(--space-section);
}
.conflitos__head {
  max-width: 830px;
  margin-bottom: var(--space-block);
}

/* quatro linhas em vez das três da home */
.areas__list--4 { grid-template-rows: repeat(4, 1fr); }

/* os três momentos do leilão dentro do card do carro-chefe. Marcador em
   `accent/line`, nunca no sólido, e filete só entre itens: é lista de
   leitura, não menu. Existe porque a coluna de quatro linhas ao lado
   deixa o card alto demais para título e apoio sozinhos. */
.area-card__pontos {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  border-top: 1px solid var(--filete-claro);
}
.area-card__pontos > span {
  position: relative;
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid var(--filete-claro);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-neutral-600);
}
.area-card__pontos > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 6px;
  height: 6px;
  background: var(--color-gold-line);
}

@media (max-width: 1199px) {
  .areas__list--4 { grid-template-rows: none; }
}

/* ============================================================
   BLOCO EDITORIAL - título à esquerda, argumento à direita
   Nasceu como a seção da matrícula no pilar (a prova de
   profundidade técnica que substitui a prova de resultado, vedada
   pelo Provimento 205/2021) e virou componente quando a LP de
   leilão pediu a mesma forma três vezes: ocupação, dívidas e
   nulidades. Grade 5/7, a mesma do FAQ e do vídeo.
   Duas superfícies. A escura é para a seção que carrega o
   argumento central; a clara para as de leitura corrida.
   ============================================================ */

.editorial { padding-block: var(--space-section); }

.editorial--claro {
  background: var(--color-paper);
  color: var(--color-ink);
}
.editorial--neutro {
  background: var(--color-neutral-100);
  color: var(--color-ink);
}
.editorial--escuro {
  background: var(--color-navy-deep);
  color: var(--color-white);
  padding-block: var(--space-section);
}
.editorial__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 64px;
}

/* A cor de texto vem da superfície, não da regra: cada bloco declara
   três tokens e todo o miolo herda deles. Sem isso, cada variante nova
   obrigaria a repetir seis regras de cor. */
.editorial {
  --ed-titulo: var(--color-ink);
  --ed-corpo: var(--texto-secundario, var(--color-neutral-600));
  --ed-filete: var(--filete-claro);
}
.editorial--escuro {
  --ed-titulo: var(--color-white);
  --ed-corpo: var(--color-neutral-200);
  --ed-filete: var(--filete-escuro);
}

.editorial__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--ed-titulo);
  text-wrap: balance;
}
.editorial__title em { font-style: normal; color: var(--color-navy); }
.editorial--escuro .editorial__title em { color: var(--color-gold-bright); }

/* a citação é o argumento da seção em uma linha. Filete em accent/line,
   nunca no dourado sólido, que é do WhatsApp */
.editorial__quote {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--color-gold-line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--ed-titulo);
  text-wrap: pretty;
}

.editorial__texto {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--ed-corpo);
  text-wrap: pretty;
}
/* o último parágrafo antes de um índice ou de um CTA respira mais */
.editorial__texto:last-child { margin-bottom: 0; }
/* o desconto dos 24px do parágrafo mantém o vão total igual ao
   --space-block que a página do pilar já tinha aprovado */
.editorial__texto + .indice,
.editorial__texto + .compara { margin-top: calc(var(--space-block) - 24px); }

.editorial__cta { margin-top: var(--space-block); }

/* linha de apoio depois do CTA: a segunda opção, deliberadamente mais
   fraca que o botão. Serve ao índice do blog, onde a pessoa ainda
   está pesquisando e a oferta principal precisa ser de baixo atrito. */
.editorial__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ed-corpo);
}

/* índice de itens: mesma forma das situações da home - filete separando
   linhas, sem caixa. Aqui não são links: é leitura. */
.indice {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ed-filete);
}
.indice li {
  padding: 20px 0;
  border-bottom: 1px solid var(--ed-filete);
}
/* o numeral é opcional: entra quando a lista tem contagem anunciada no
   título ("cinco pontos"), some quando é só enumeração */
/* navy e não `accent/line`: o dourado estrutural tem 2,2:1 sobre o
   neutral-100 e reprova como texto. Numeral de sequência já é navy na
   régua de etapas da home, então isto alinha com o sistema em vez de
   abrir exceção. O dourado continua marcando o filete do bloco. */
.indice__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}
.editorial--escuro .indice__num { color: var(--color-gold-bright); }
.indice h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--ed-titulo);
}
.indice p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ed-corpo);
  text-wrap: pretty;
}
/* link opcional dentro do item, quando aquela linha tem página própria */
.indice__link { margin-top: 10px; font-size: var(--text-small); }

/* ---------- Comparação em duas colunas ----------
   Serve à seção de dívidas do arrematante. Duas listas lado a lado, sem
   caixa colorida e sem ícone de certo e errado: a distinção é semântica
   e depende do edital, então marcá-la com verde e vermelho passaria uma
   certeza que a resposta não tem. */
.compara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.compara__col { border-top: 2px solid var(--color-gold-line); padding-top: 20px; }
.compara__titulo {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-eyebrow);
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ed-titulo);
}
.compara ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compara li {
  position: relative;
  padding-left: 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ed-corpo);
}
.compara li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--color-gold-line);
}

@media (max-width: 899px) {
  .editorial__inner { grid-template-columns: 1fr; gap: 32px; }
  .editorial__quote { margin-top: 24px; }
  .compara { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   HERO COM PAINEL DE FOTO - variante do hero interno, exclusiva do Sobre
   A regra geral é que retrato é assinatura da capa e não se repete nas
   internas. O Sobre é a exceção declarada no `02-estrutura.md` §8: é a
   página onde o ensaio fotográfico vira vantagem sobre os dois
   concorrentes, que usam foto fraca ou nenhuma.

   Aqui a foto não é recorte flutuando como nas páginas de área, nem
   moldura dentro da grade como era antes: é um painel opaco sangrando
   da metade da tela até a borda, com o header passando por cima.
   Medido no node 70:144 (frame 1440x689).

   O breadcrumb e a coluna de texto entram 66px mais para dentro que nas
   outras internas. Não é capricho: sem esse recuo o texto encosta na
   borda dura do painel, e a borda dura é justamente o gesto da página.
   ============================================================ */

.hero-int--foto {
  /* 775 de 1440. Ancorado no centro e não em `width`, para o painel
     crescer junto com a viewport - ele sangra, então travar a largura
     faria dele uma faixa cada vez mais estreita em tela larga. */
  --painel-left: calc(50% + 55px);
  --copy-indent: 66px;   /* 138 - 72 (borda do container) */
}

.hero-int--foto .hero-int__content {
  position: relative;
  z-index: 2;
  min-height: 594px;      /* 689 da seção menos 95 do header */
  padding-top: 81px;      /* breadcrumb em y=176 no Figma */
  padding-bottom: var(--space-section);
  padding-left: calc(var(--gutter) + var(--copy-indent));
}
.hero-int--foto .hero-int__copy { max-width: 560px; }
.hero-int--foto .hero-int__title { max-width: 560px; }

/* o breadcrumb atravessa as duas colunas, acima de tudo. Fora de um
   hero em grade a declaração não faz efeito nenhum, então continua
   servindo à variante de formulário sem precisar repetir. */
.hero-int__nav { grid-column: 1 / -1; }

.hero-int__painel {
  position: absolute;
  z-index: 0;             /* atrás do header e do conteúdo */
  top: 0;
  bottom: 0;
  left: var(--painel-left);
  right: 0;
}
/* sem `overflow: hidden` no painel: o disco do vídeo avança 68px para
   fora dele e seria decepado. Quem recorta a foto é o `object-fit`. */
.hero-int__painel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* o convite atravessa a borda do painel, metade sobre a foto e metade
   sobre a textura - 707 e 583 de 1440x689 */
.hero-int__painel .hero-video {
  position: absolute;
  left: -68px;
  bottom: 106px;
  width: max-content;
}

/* Abaixo de 1024 a coluna de texto e o painel brigam pela largura: o
   painel recua para 62% e o recuo extra do texto sai. */
@media (max-width: 1023px) {
  .hero-int--foto {
    --painel-left: 62%;
    --copy-indent: 0px;
  }
  .hero-int--foto .hero-int__copy,
  .hero-int--foto .hero-int__title { max-width: none; }
  .hero-int__painel .hero-video { --disco: 96px; left: -48px; bottom: 72px; }
}

/* Abaixo de 768 o painel sai do absoluto e entra no fluxo, embaixo do
   texto - é por isso que ele vem depois do conteúdo no HTML. */
@media (max-width: 767px) {
  .hero-int--foto .hero-int__content {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hero-int__painel {
    position: relative;
    left: auto;
    height: 380px;
  }
  .hero-int__painel .hero-video {
    --disco: 64px;

    left: var(--gutter);
    bottom: 16px;
  }
}

/* ============================================================
   HERO COM FIGURA - variante das páginas de área
   Retrato recortado, ancorado na base da seção, no mesmo idioma da
   capa. A diferença com o Sobre é proposital: lá a foto é emoldurada,
   porque a página é sobre a pessoa; aqui ela é figura sangrando, que
   é a gramática da home.
   Três decisões que valem registro:
   1. A altura manda, não a largura. `height` na figura e `width: auto`
      garantem que ela nunca estoure a hero em nenhuma viewport; se
      fosse pela largura, cada breakpoint pediria um cálculo.
   2. A sombra é `drop-shadow` no CSS, não arquivo. A home usa camada
      separada porque veio exportada do Figma; aqui é uma requisição
      menos pelo mesmo resultado.
   3. Sem `[data-reveal]` na figura. O reveal usa `transform`, e a
      figura já é posicionada em absoluto - a lição da faixa de
      credenciais da home (seção 14) vale igual aqui.
   ============================================================ */

.hero-int--figura {
  /* Coordenadas do node 60:15, medidas no frame de 1440x689 e nomeadas.
     A figura não encosta mais na borda do container: ela fica 227px para
     dentro, o que deixa um trecho de cidade aparecendo à direita dela.
     É isso que faz a foto da área virar argumento e não papel de parede. */
  /* Fluidos, e não um valor por breakpoint: as duas medidas são a mesma
     proporção do frame de 1440 (227/1440 e 594/1440). O `min` trava no
     valor do Figma para cima, então de 1440 em diante a composição é
     exatamente a desenhada e o que cresce é a goteira; para baixo ela
     encolhe junto, sem o salto de 180px que uma media query dava na
     fronteira. É a altura que define a largura da figura, e é a largura
     que colide com a coluna de texto - por isso as duas escalam juntas. */
  --figura-inset: min(227px, 15.76vw);
  --figura-h: min(594px, 41.25vw);
  /* 754 e 630 de 1440x689: o disco encosta 28px à esquerda da figura e
     para 59px acima da base da seção */
  --video-left: calc(50% + 34px);
  --video-bottom: 59px;
}

/* Recorte largo: o de responsabilidade civil tem 405px contra 320 e 333
   dos outros, porque é a pose frontal e os braços abrem mais. Com o
   recuo padrão a borda esquerda da figura avança sobre o vão e o convite
   ao vídeo chega a 16px da coluna de texto em 1440 - lê como se
   encostasse. O recuo menor empurra a figura para a direita e devolve a
   folga sem mexer na altura, que é o que define a composição. */
.hero-int--figura-larga { --figura-inset: min(180px, 12.5vw); }

.hero-int--figura .hero-int__content {
  position: relative;
  /* altura da área de conteúdo no Figma (689 da seção menos 95 do
     header). É piso, não teto: se o H1 quebrar em quatro linhas a seção
     cresce, e a figura cresce com ela até o limite de --figura-h. */
  min-height: var(--figura-h);
}

/* a coluna de texto encurta para não correr por baixo da figura */
.hero-int--figura .hero-int__copy { max-width: min(620px, 60%); }

/* 560px é a medida do H1 no node 60:15. Em px e não em `ch` porque aqui
   ela é coordenada de composição, medida contra a figura ao lado - os
   15ch do hero interno genérico existem para páginas onde o título ocupa
   a largura toda e não tem nada disputando a linha. */
.hero-int--figura .hero-int__title { max-width: 560px; }

.hero-int__figura {
  position: absolute;
  bottom: 0;
  right: max(var(--gutter), calc(50% - var(--container-wide) / 2 + var(--figura-inset)));
  height: min(var(--figura-h), 100%);
  pointer-events: none;
}
.hero-int__figura img {
  display: block;
  height: 100%;
  width: auto;
  /* sombra na tinta do navy, não em preto: o mesmo tratamento das
     sombras do sistema. Vive na imagem e não no bloco porque o bloco é
     a âncora do convite ao vídeo, e `filter` no pai jogaria sombra no
     disco dourado também. */
  filter: drop-shadow(0 18px 40px rgb(6 14 24 / 0.55));
}

/* Espaço reservado do retrato, enquanto o recorte não existe.
   Não é um estado de erro nem um placeholder de produção: é a caixa da
   figura desenhada em vazio, para a composição já ficar de pé e o
   convite ao vídeo ter onde se ancorar. A largura vem da altura pela
   proporção média dos recortes do ensaio (0,56), que é o que mantém o
   vão igual ao das páginas que já têm foto.
   PARA IMPLEMENTAR: soltar o <img> dentro da div e tirar o modificador. */
.hero-int__figura--vazia {
  width: calc(var(--figura-h) * 0.56);
  border: 1px dashed rgb(185 155 98 / 0.45);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* O convite ao vídeo é ancorado na FIGURA, não na seção: 28px à esquerda
   da borda da foto e 59px acima da base, como no Figma. Ancorado assim
   ele acompanha a figura em qualquer altura, sem precisar recalcular
   coordenada por breakpoint - e a largura da figura muda por página,
   porque os dois recortes do ensaio têm proporções diferentes. */
.hero-int__figura .hero-video {
  /* o disco e o afastamento da base acompanham a figura na mesma
     proporção do Figma (128/1440 e 59/1440): num recorte de 255px de
     largura, um disco de 128 cobriria metade da foto */
  --disco: min(128px, 8.9vw);

  position: absolute;
  left: -28px;
  bottom: min(59px, 4.1vw);
  /* sem isto o bloco é comprimido pela largura da figura, e os dois
     recortes do ensaio têm larguras diferentes: no de terno cinza, mais
     estreito, o rótulo perdia 20px de medida e corria o risco de abrir
     uma terceira linha. Ele pode passar da borda da foto - do lado de
     fora ainda é a cena da área. */
  width: max-content;
  pointer-events: auto;   /* devolve o que a figura desliga */
}

/* Abaixo de ~1200 o rótulo não tem mais largura ao lado do disco: a
   figura encolheu e o bloco passava da borda direita dela, indo parar na
   goteira. Empilha - disco em cima, rótulo embaixo, os dois alinhados na
   esquerda. Encolher a fonte em vez de empilhar levaria o rótulo a 14px
   em 1024, que é abaixo do mínimo de leitura do sistema. */
@media (max-width: 1199px) {
  .hero-int__figura .hero-video {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Abaixo de 768 sai do absoluto e entra no fluxo, depois do texto, como
   a home faz no mobile. Não some: é o retrato que dá cara à página.
   O `margin-bottom` negativo cancela o padding da seção, para ela
   continuar encostando na base. */
@media (max-width: 767px) {
  .hero-int--figura .hero-int__content { min-height: 0; }
  .hero-int--figura .hero-int__copy { max-width: none; }

  .hero-int__figura {
    /* `relative` e não `static`: o bloco continua sendo a âncora do
       convite ao vídeo, agora dentro do fluxo */
    position: relative;
    height: 320px;
    /* largura cheia com a imagem empurrada para a direita: em
       `fit-content` a caixa encolhia até a foto e o rótulo do vídeo não
       tinha para onde ir */
    width: 100%;
    margin: 32px 0 calc(-1 * var(--space-section));
  }
  .hero-int__figura img {
    margin-left: auto;
    filter: drop-shadow(0 10px 24px rgb(6 14 24 / 0.5));
  }

  .hero-int__figura .hero-video {
    --disco: 64px;

    left: 0;
    bottom: 8px;
  }
}

/* ============================================================
   HERO COM FORMULÁRIO - variante exclusiva do Contato
   O `02-estrutura.md` §8 exige o formulário acima da dobra no mobile,
   e o Roteiro 3.10 repete. Isso elimina a seção de conversão do fim:
   ter o mesmo formulário duas vezes na mesma página é o tipo de
   repetição que faz o visitante desconfiar de qual é o de verdade.
   A grade é 5/7 e não 7/5 como no Sobre: aqui quem manda é o
   formulário, e o texto só precisa dizer o que acontece depois.
   ============================================================ */

.hero-int--form .hero-int__content {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 64px;
  padding-bottom: var(--space-section);
}
.hero-int--form .hero-int__copy { max-width: none; }

/* Abaixo de 900 empilha. O formulário fica logo abaixo de um bloco de
   texto curto de propósito: com H1 e apoio enxutos, o primeiro campo
   entra na primeira tela do celular. */
@media (max-width: 899px) {
  .hero-int--form .hero-int__content { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Selo de sigilo ----------
   Pedido no Roteiro 3.10 como "selo discreto". Discreto aqui quer
   dizer sem preenchimento e sem dourado: é uma garantia de dever
   profissional, não um argumento de venda, e vestir de dourado a
   colocaria no mesmo peso do CTA. */
/* O filete é `gold-line`, o mesmo dourado da sobrelinha logo acima.
   Estava em `navy-soft`, que sobre o navy da hero rende 1,9:1 e some -
   o mesmo erro que o NAP da página de contato tinha na superfície
   clara: traduzir "um passo acima do fundo" para uma paleta onde esse
   passo é curto demais. Em dourado dá 5,9:1 e o filete cumpre o papel
   de separar o selo de sigilo do bloco de texto. */
.selo-sigilo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-gold-line);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-neutral-200);
}
.selo-sigilo .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-gold-line);
}

/* ---------- Canal direto ----------
   Reusa o card das portas da LP, trocando o numeral por um ícone:
   são três destinos de mesmo peso, que é exatamente o que aquele
   componente resolve. */
.porta__icone {
  display: flex;
  color: var(--color-navy);
}
.porta__icone .icon { width: 28px; height: 28px; }

/* o valor do canal (número, e-mail) em Lora, para ler como dado e não
   como frase */
.porta__valor {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* ---------- Mapa da página de contato ----------
   Mais alto que o da conversão das outras páginas: aqui ele é
   conteúdo, não apoio, e a pessoa vai usá-lo para se localizar. */
.mapa--alto { aspect-ratio: 16 / 9; margin-top: 0; }

@media (max-width: 599px) {
  .mapa--alto { aspect-ratio: 4 / 3; }
}

/* ============================================================
   HUB DE PERGUNTAS - template Hub
   A página mais importante do site para GEO: é a que concentra o
   formato que featured snippet e IA generativa citam. Tudo aqui
   nasce dessa restrição, inclusive a busca, que filtra e NUNCA
   remove conteúdo do HTML.
   ============================================================ */

/* ---------- Busca interna ----------
   Mora no hero, em superfície escura. Não é formulário: não tem
   submit, não recarrega, não vai a lugar nenhum. Filtra o que já
   está na página, por isso `type="search"` e `form` ausente. */
.busca {
  position: relative;
  width: min(520px, 100%);
  margin-top: 8px;
}
.busca__campo {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--filete-escuro);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.busca__campo::placeholder { color: var(--color-neutral-400); }
.busca__campo:focus {
  outline: none;
  border-color: var(--color-gold-line);
  background: rgb(255 255 255 / 0.1);
}
.busca__icone {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--color-neutral-400);
  pointer-events: none;
}

/* ---------- Índice de temas ----------
   Seis âncoras. Não é menu de navegação entre páginas, é sumário
   da própria página, então some da leitura por teclado como lista e
   fica como grupo de links simples. */
.hub {
  background: var(--color-paper);
  padding-block: var(--space-section);
}

.hub__temas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 var(--space-section);
  padding: 0;
  list-style: none;
}
.tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  text-decoration: none;
  transition: border-color var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base);
}
.tema:hover {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-paper);
}
.tema__n {
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-600);
}
.tema:hover .tema__n { color: var(--color-neutral-200); }

/* ---------- Bloco de tema ---------- */

.hub__bloco + .hub__bloco { margin-top: var(--space-section); }

/* o `scroll-margin` compensa o dock flutuante: sem ele a âncora
   deixa o título do bloco embaixo da barra fixa */
.hub__bloco { scroll-margin-top: 96px; }
/* idem para a âncora #artigos do blog: o filtro navega para cá e a barra
   de temas precisa nascer visível abaixo do dock */
main.hub { scroll-margin-top: 96px; }

.hub__bloco-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.hub__bloco-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

/* link para o silo, no cabeçalho do bloco e não em cada resposta:
   repetir "ver a página da área" em oito respostas seguidas vira
   ruído e dilui o próprio link */
.hub__bloco-link { flex: none; }

/* ---------- Estado vazio da busca ----------
   Nasce escondido no HTML e só aparece quando o filtro não acha
   nada. Carrega o CTA, porque é exatamente ali que a pessoa
   descobriu que a dúvida dela não está na página. */
.hub__vazio {
  padding: 40px 0;
  border-top: 1px solid var(--filete-claro);
}
.hub__vazio p {
  margin: 0 0 20px;
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-600);
}

/* o bloco inteiro some quando nenhuma pergunta dele sobrevive ao
   filtro, senão fica um título de tema com nada embaixo */
[data-hub-oculto] { display: none; }

/* ---------- Chip como botão ----------
   O filtro do blog usa botão e não link: não navega, não muda a URL e
   não deve entrar no histórico. O estado ativo é `aria-pressed`, que
   é o atributo que leitor de tela anuncia, e o CSS lê o mesmo
   atributo em vez de uma classe paralela. */
.tema--btn {
  font-family: var(--font-ui);
  cursor: pointer;
}
.tema[aria-pressed="true"] {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: var(--color-paper);
}
.tema[aria-pressed="true"] .tema__n { color: var(--color-neutral-200); }

/* ---------- Link dentro da resposta ----------
   Cada resposta pode apontar para a página do silo. Fica no fim do
   parágrafo, em corpo menor, para não competir com a resposta. */
.qa__link {
  display: inline-flex;
  margin-top: 14px;
  font-size: var(--text-small);
}

@media (max-width: 599px) {
  .hub__temas { gap: 8px; margin-bottom: var(--space-block); }
  .tema { padding: 8px 14px; }
  .hub__bloco + .hub__bloco { margin-top: var(--space-block); }
}

/* ============================================================
   ARTIGO - o sexto e último template
   Uma coluna centrada, medida de leitura acima de tudo. O
   `--container-text` de 1120px é o container da página; a coluna do
   corpo é bem mais estreita, porque texto corrido em 1120px dá quase
   150 caracteres por linha e ninguém lê isso até o fim.
   ============================================================ */

.post {
  background: var(--color-paper);
  padding-block: var(--space-section);
}

/* O corpo ocupa o container inteiro, mas o TEXTO não: uma linha de
   1296px daria mais de 130 caracteres, que ninguém lê. O que preenche a
   largura é a GRADE - coluna de leitura à esquerda, lateral fixa à
   direita com o sumário e o compartilhar. A página fica cheia de ponta a
   ponta e a medida do texto continua em 77 caracteres.
   A lateral vem ANTES no HTML: no mobile a grade colapsa e o sumário
   precisa aparecer antes do texto, que é o lugar de um índice. */
.post__corpo {
  display: grid;
  grid-template-columns: minmax(0, 48rem) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.post__lateral { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
.post__principal { grid-column: 1; grid-row: 1; min-width: 0; }

/* na lateral o sumário perde a moldura: ali a posição já o destaca, e
   caixa dentro de caixa pesava */
.post__lateral .post__sumario {
  padding: 0 0 0 20px;
  border: 0;
  border-left: 2px solid var(--color-gold-line);
  border-radius: 0;
  background: none;
}

/* ---------- Compartilhar ---------- */

.compartilhar { margin-top: var(--space-block); }
.compartilhar__titulo {
  margin: 0 0 12px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--texto-secundario, var(--color-neutral-600));
}
.compartilhar__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.compartilhar__btn:hover { background: var(--color-navy); color: var(--color-white); }
.compartilhar__btn .icon { width: 20px; height: 20px; }

/* o aviso de "link copiado" nasce em `hidden` e quem o mostra é o JS:
   sem script o botão de copiar não faz nada e o aviso nunca aparece, em
   vez de mentir para quem clicou */
.compartilhar__aviso {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-eyebrow);
  line-height: 1;
  white-space: nowrap;
}
.compartilhar__aviso[hidden] { display: none; }

/* Abaixo de 1200 a lateral não cabe ao lado: vira bloco de largura
   cheia no topo, antes do texto. */
@media (max-width: 1199px) {
  .post__corpo { grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
  .post__lateral { grid-column: 1; grid-row: 1; position: static; }
  .post__principal { grid-column: 1; grid-row: 2; }
  .post__lateral .post__sumario {
    padding: 24px 28px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius);
    background: var(--color-white);
  }
}

/* ---------- Resposta direta ----------
   O primeiro parágrafo é autossuficiente e responde à pergunta do
   H1 em 40 a 60 palavras. É o bloco que featured snippet e IA
   generativa citam, e por isso ele vem antes de qualquer
   desenvolvimento, com peso visual próprio. */
.post__resposta {
  margin: 0 0 var(--space-block);
  padding-left: 24px;
  border-left: 2px solid var(--color-gold-line);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* ---------- Sumário ----------
   Âncoras para os H2. Em artigo longo é navegação real, e o Google
   usa para os links de trecho no resultado de busca. */
.post__sumario {
  margin: 0 0 var(--space-block);
  padding: 24px 28px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius);
  background: var(--color-white);
}
.post__sumario-titulo {
  margin: 0 0 14px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.post__sumario ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sumario;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post__sumario li { counter-increment: sumario; }
.post__sumario a {
  display: inline-flex;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-base);
}
.post__sumario a::before {
  content: counter(sumario, decimal-leading-zero);
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-line);
}
.post__sumario a:hover { color: var(--color-ink); }

/* ---------- Corpo ---------- */

.post__corpo h2 {
  margin: var(--space-block) 0 16px;
  scroll-margin-top: 96px;   /* compensa o dock flutuante na âncora */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
.post__corpo h3 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}
/* 20px e não os 18 do corpo padrão. É o que devolve a medida de leitura
   depois que a coluna esticou: em 768px de largura, 18px davam 85
   caracteres por linha, contra os 68 a 72 que o template perseguia.
   Subir o tipo em vez de estreitar o bloco atende o pedido de esticar e
   traz a contagem para 76 - alto, mas dentro do aceitável. Artigo longo
   também se lê melhor em 20px. */
.post__corpo p {
  margin: 0 0 22px;
  font-size: 1.25rem;
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  text-wrap: pretty;
}
.post__corpo a:not(.btn):not(.link-arrow) {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post__corpo ul,
.post__corpo ol.post__lista {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post__corpo ul li,
.post__corpo ol.post__lista li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}
.post__corpo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--color-gold-line);
}
/* a lista numerada usa contador próprio: o marcador nativo não aceita
   a cor do acento nem a métrica tabular */
.post__corpo ol.post__lista { counter-reset: passo; }
.post__corpo ol.post__lista li {
  counter-increment: passo;
  padding-left: 34px;
}
.post__corpo ol.post__lista li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-line);
}
.post__corpo strong { font-weight: 600; }

/* ---------- Box de aviso editorial ----------
   Obrigatório em todo artigo. Não é rodapé jurídico decorativo: é o
   que separa conteúdo informativo de consulta, e é o que o Provimento
   205/2021 espera de material de divulgação. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: var(--space-block) 0;
  padding: 24px 28px;
  border: 1px solid var(--color-neutral-200);
  border-left: 2px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-neutral-100);
}
.aviso .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-navy);
}
.aviso p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto-secundario, var(--color-neutral-600));
}

/* ---------- Assinatura ----------
   Nome, inscrição e link para o Sobre. É requisito de E-E-A-T e é
   também o que a norma espera: material assinado por quem responde. */
.autor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--space-block);
  padding-top: 24px;
  border-top: 1px solid var(--filete-claro);
}
.autor__nome {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.autor__oab {
  font-size: var(--text-small);
  color: var(--texto-secundario, var(--color-neutral-600));
}
.autor .link-arrow { margin-left: auto; }

/* ---------- Meta do hero do artigo ---------- */

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 8px;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-neutral-200);
}
.post__meta time { font-variant-numeric: tabular-nums; }

@media (max-width: 599px) {
  .post__sumario { padding: 20px; }
  .aviso { padding: 20px; gap: 12px; }
  .autor .link-arrow { margin-left: 0; }
}

/* ============================================================
   FAIXA DE FOTO - imagem de largura total entre duas seções
   Respiro visual sem conteúdo novo. Proporção fixa para a altura
   não depender do arquivo e o CLS ficar em zero.
   ============================================================ */

.faixa-foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Parallax por `background-attachment` e não por JavaScript: o main.js
   evita listener de scroll por frame em todo o site (o dock flutuante
   usa IntersectionObserver justamente por isso), e abrir exceção aqui
   por uma faixa decorativa não se paga. O fundo fica preso à viewport,
   então a faixa revela um trecho diferente da foto conforme a página
   rola - suave porque a faixa é baixa.
   PLACEHOLDER: foto de escritório genérico, trocar pela do escritório
   real quando houver ensaio. */
.faixa-foto--escritorio {
  background-image: url("../assets/images/faixa-escritorio.webp");
  background-attachment: fixed;
}

@media (max-width: 899px) {
  .faixa-foto { aspect-ratio: 3 / 2; }
  /* `fixed` no iOS trava e depois salta em vez de deslizar. Abaixo de
     900 o efeito sai e a faixa vira foto estática, que é o mesmo que
     acontece em `prefers-reduced-motion`. */
  .faixa-foto--escritorio { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-foto--escritorio { background-attachment: scroll; }
}

/* ============================================================
   BLOCO INSTITUCIONAL - exigência do Provimento 205/2021
   Os mesmos dados do rodapé, aqui em tamanho de leitura. Não é
   redundância: no rodapé eles cumprem a norma, e nesta página são
   argumento de confiança (transparência = E-E-A-T).
   ============================================================ */

.institucional {
  background: var(--color-neutral-100);
  padding-block: var(--space-section);
}
.institucional__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 64px;
}
.institucional__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}

/* <dl> em grade de duas colunas: rótulo e valor na mesma linha,
   como uma ficha. O filete separa registros, não pares soltos. */
.ficha {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  margin: 0;
  border-top: 1px solid var(--filete-claro);
}
.ficha dt,
.ficha dd {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete-claro);
}
.ficha dt {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--texto-secundario, var(--color-neutral-600));
}
.ficha dd {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.ficha dd a { color: var(--color-navy); }

@media (max-width: 899px) {
  .institucional__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* abaixo de 520 o rótulo em caixa alta não cabe ao lado do valor sem
   quebrar em três linhas: vira ficha empilhada */
@media (max-width: 519px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { padding-bottom: 4px; border-bottom: 0; }
  .ficha dd { padding-top: 0; }
}

/* ============================================================
   TRÊS PORTAS DE ENTRADA - topo da LP de leilão
   Três intenções muito diferentes caem na mesma URL. Segmentar no
   topo evita que o visitante conclua que a página não é para ele.
   São âncoras internas, não links de saída: por isso a seta aponta
   para baixo e não para a diagonal de "sai daqui".
   ============================================================ */

.portas {
  background: var(--color-paper);
  padding-block: var(--space-section);
}
.portas__head {
  max-width: 830px;
  margin-bottom: var(--space-block);
}
.portas__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}
.portas__title em { font-style: normal; color: var(--color-navy); }

.portas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.porta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--color-neutral-200);
  border-top: 2px solid var(--color-gold-line);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--duration-base) var(--ease-out-cubic);
}
.porta:hover {
  border-color: var(--color-neutral-400);
  border-top-color: var(--color-gold-bright);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* mesma correção do `.indice__num`: numeral é texto, e o dourado
   estrutural não passa em contraste como texto */
.porta__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}
.porta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  text-wrap: pretty;
}
.porta__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-neutral-600);
}
.porta .link-arrow--ink { margin-top: auto; padding-top: 16px; }
.porta:hover .link-arrow--ink { color: var(--color-ink); gap: 14px; }

@media (max-width: 899px) {
  .portas__grid { grid-template-columns: 1fr; gap: 16px; }
  .porta { padding: 24px; }
}

/* ---------- Acessibilidade de movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__bg,
  .hero__media,
  .hero__title-wrap,
  .hero__subheader,
  .hero__description,
  .hero__actions { animation: none; }

  .hero__highlight,
  .como__highlight { clip-path: inset(0 0 0 0); transition: none; }
  .ticker__track { animation: none; }
  .hero__selo-ring { animation: none; }
  .link-arrow, .btn { transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .area-card, .area-row { transition: none; }
  .hint-arrow { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   WHATSAPP FLUTUANTE — padrão do site atual do cliente (WP).
   Verde oficial do WhatsApp de propósito: reconhecimento imediato
   vale mais que a paleta aqui (o ouro fica para os CTAs do fluxo).
   Acréscimo do port .NET (não existe na maquete estática).
   ============================================================ */
.wpp-flutuante {
  position: fixed;
  /* env(): respeita o home indicator do iPhone (0 nos demais aparelhos) */
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;                        /* abaixo do menu mobile (dialog), acima do conteúdo */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.wpp-flutuante__balao {
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body, inherit);
  font-size: 0.875rem;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.18);
  white-space: nowrap;
}
.wpp-flutuante__disco {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
  transition: transform var(--t-fast, 150ms) ease;
}
.wpp-flutuante__disco .icon {
  width: 30px;
  height: 30px;
  fill: var(--color-white);
}
.wpp-flutuante:hover .wpp-flutuante__disco { transform: scale(1.06); }
@media (max-width: 600px) {
  .wpp-flutuante__balao { display: none; }   /* no celular só o disco */
  .wpp-flutuante {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   UPLOAD DE DOCUMENTOS — form "análise do caso".
   Zona de clique/arrastar + lista de arquivos, no vocabulário do
   design system (paper/navy/gold). Acréscimo do port .NET; sem JS
   o input nativo (.campo__file) continua no lugar.
   ============================================================ */
.campo__file.is--oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.upload-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 22px 16px;
  background: var(--color-paper);
  border: 1.5px dashed var(--color-gold-line);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast, 150ms) ease, background var(--t-fast, 150ms) ease;
}
.upload-zona:hover,
.upload-zona.is--arrastando {
  border-color: var(--color-gold-bright);
  background: var(--color-white);
}
.upload-zona:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}
.upload-zona__icone {
  width: 28px;
  height: 28px;
  fill: var(--color-gold-line);
}
.upload-zona__texto {
  font-size: 0.9375rem;
  color: var(--color-ink);
}
.upload-zona__texto strong { color: var(--color-navy); }
.upload-zona__limites {
  font-size: 0.8125rem;
  color: var(--color-neutral-600);
}
.upload-zona.is--cheio { opacity: 0.55; pointer-events: none; }
.upload-zona__erro {
  font-size: 0.8125rem;
  color: var(--color-error);
}
.upload-zona.is--erro { border-color: var(--color-error); }
.upload-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;
}
.upload-item__nome {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-item__tamanho {
  font-size: 0.8125rem;
  color: var(--color-neutral-600);
  flex-shrink: 0;
}
.upload-item__remover {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast, 150ms) ease;
}
.upload-item__remover:hover { background: var(--color-neutral-100); }
.upload-item__remover .icon {
  width: 14px;
  height: 14px;
  fill: var(--color-neutral-600);
}

/* ============================================================
   FORM — erro e confirmação de envio (padrão LDNASA)
   O sucesso toma o LUGAR do formulário no mesmo card; o erro
   aparece dentro do card, acima dos campos.
   ============================================================ */
.form__erro {
  padding: 12px 16px;
  /* fallback rgba primeiro: iOS < 16.2 não entende color-mix e descartaria
     a declaração inteira (erro sem borda nem fundo) */
  border: 1px solid rgb(140 59 49 / 0.35);
  border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
  border-radius: 8px;
  background: rgb(140 59 49 / 0.08);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  color: var(--color-error);
  font-size: 15px;
  line-height: 1.5;
}

.form--sucesso {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 420px;
}

.form-sucesso__icone {
  width: 56px;
  height: 56px;
  color: var(--color-success);
}

.form-sucesso__titulo {
  font-family: var(--font-display, inherit);
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-ink);
}

.form-sucesso__texto {
  max-width: 42ch;
  color: var(--color-neutral-600);
}

.form--sucesso .form__submit { min-width: 260px; }

.form-sucesso__contagem {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CONTATO — apoio da coluna esquerda + card compacto
   O card do form era muito alto para o pouco texto ao lado; o
   equilíbrio vem dos dois lados: conteúdo útil à esquerda
   (passos + canais) e form com respiro menor.
   ============================================================ */
.apoio-form__canais {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.14); /* fallback iOS < 16.2 */
  border-top: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apoio-form__rotulo {
  color: var(--color-neutral-400);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.apoio-form__canal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-size: 16px;
  text-decoration: none;
  width: fit-content;
}

.apoio-form__canal .icon { color: var(--color-gold-bright); }
.apoio-form__canal:hover { color: var(--color-gold-bright); }

/* Card mais enxuto só nesta página: menos respiro vertical sem
   apertar a área de clique dos campos. */
.hero-int--form .form { padding: 28px 32px; gap: 16px; }
.hero-int--form .form .campo { gap: 6px; }

@media (max-width: 899px) {
  .apoio-form__canais { margin-top: 24px; padding-top: 18px; }
}