/* =========================================================================
   ADVOCACIA LASSEN — folha de estilo institucional
   Sistema visual: tinta profunda, marfim, papel e dourado institucional.
   Tipografia editorial serifada nos títulos, sans-serif no corpo e na UI.

   O site alterna faixas escuras e claras. Para que os componentes sirvam nas
   duas situações sem duplicar regras, as cores passam por uma camada
   semântica (--bg, --fg, --accent, --hairline...). O padrão em :root é a
   faixa escura; .band-light, .band-paper e .band-gold redefinem os mesmos
   nomes e todo o conteúdo interno se adapta sozinho.
   ========================================================================= */

:root {
  /* Paleta base — valores fixos da identidade */
  --ink:        #0b0b0b;
  --ink-2:      #0f0f0f;
  --ink-3:      #151515;
  --ink-4:      #1c1c1c;
  --ivory:      #f0eee8;
  --paper:      #e7e3db;
  --gold:       #cda851;
  --gold-light: #e6ca82;
  --gold-dim:   rgba(205, 168, 81, .28);
  /* Dourado escurecido para texto sobre marfim e papel. O dourado da marca
     rende apenas 1.94:1 sobre o marfim; este rende 5.03:1 e passa em AA. */
  --gold-deep:  #7d6119;
  --gold-deeper:#5f4a15;

  --line:       rgba(255, 255, 255, .14);
  --line-soft:  rgba(255, 255, 255, .08);
  --muted:      rgba(240, 238, 232, .70);
  --muted-2:    rgba(240, 238, 232, .55);

  /* Camada semântica — o padrão é a faixa escura */
  --bg:            var(--ink);
  --fg:            var(--ivory);
  --fg-muted:      rgba(240, 238, 232, .70);
  --fg-dim:        rgba(240, 238, 232, .55);
  --surface:       var(--ink-2);
  --surface-2:     var(--ink-3);
  --hairline:      rgba(255, 255, 255, .14);
  --hairline-soft: rgba(255, 255, 255, .08);
  --accent:        var(--gold);
  --accent-strong: var(--gold-light);
  --accent-dim:    var(--gold-dim);
  --accent-wash:   rgba(205, 168, 81, .08);
  /* Preenchimento e traço da terceira linha do <h1>. Não é enfeite: os dois
     tokens formam texto e precisam passar em AA. O preenchimento de .58 rende
     6.0:1 sobre a tinta e o traço de .78 rende 11.6:1 — a linha fica legível
     em brilho baixo sem passar à frente das duas primeiras. */
  --ghost-fill:    rgba(240, 238, 232, .58);
  --stroke-ghost:  rgba(240, 238, 232, .78);

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

  --nav-h: 76px;
  --bar-h: 62px;
  /* Medido na captura da referência, em janela de 1568px: o conteúdo começa
     em x=188 e a caixa útil tem 1192px. Com 1300 de teto e o respiro de
     3.5rem, o conteúdo aqui começa em 190 e mede 1188 — é a mesma caixa. Era
     o que ainda deixava a composição da capa mais apertada que a da demo. */
  --wrap: 1300px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 2px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

img { max-width: 100%; height: auto; display: block; }
/* O <picture> só existe para oferecer AVIF e WebP antes do JPG. Ele não
   participa do layout: ocupa exatamente o lugar que o <img> ocuparia. */
picture { display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0 0 1.1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: .5rem; }

/* --- Acessibilidade ---------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: .85rem 1.4rem; font-weight: 700; font-size: .9rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    /* Sem zerar o atraso, a entrada escalonada da capa deixaria os elementos
       invisíveis (fill-mode both) até quase um segundo depois da abertura. */
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; }
}

/* --- Estruturas base ---------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

section { padding: clamp(3.75rem, 8vw, 7.5rem) 0; }
section.tight { padding: clamp(3rem, 6vw, 5rem) 0; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- Faixas de cor -------------------------------------------------------
   Cada faixa redefine a camada semântica inteira. Nenhum componente precisa
   saber em qual fundo está: ele consome --fg, --accent, --hairline e segue.
   ------------------------------------------------------------------------- */

.band-dark {
  --bg: var(--ink);
  background: var(--bg); color: var(--fg);
}

.band-light,
.band-paper {
  --fg:            var(--ink);
  --fg-muted:      rgba(11, 11, 11, .72);
  /* .55 rende só 4.2:1 sobre marfim e reprova em AA nos textos pequenos que
     usam este token (meta das notas, tags, horários). .62 sobe para 5.3:1. */
  --fg-dim:        rgba(11, 11, 11, .62);
  --hairline:      rgba(11, 11, 11, .18);
  --hairline-soft: rgba(11, 11, 11, .11);
  --accent:        var(--gold-deep);
  --accent-strong: var(--gold-deeper);
  --accent-dim:    rgba(125, 97, 25, .38);
  --accent-wash:   rgba(125, 97, 25, .07);
  --ghost-fill:    rgba(11, 11, 11, .62);
  --stroke-ghost:  rgba(11, 11, 11, .80);
  background: var(--bg); color: var(--fg);
}

.band-light {
  --bg:        var(--ivory);
  --surface:   #f7f6f2;
  --surface-2: var(--paper);
}

.band-paper {
  --bg:        var(--paper);
  --surface:   var(--ivory);
  --surface-2: #dedad1;
}

.band-gold {
  --bg:            var(--gold);
  --fg:            var(--ink);
  --fg-muted:      rgba(11, 11, 11, .80);
  --fg-dim:        rgba(11, 11, 11, .62);
  --surface:       rgba(11, 11, 11, .05);
  --surface-2:     rgba(11, 11, 11, .09);
  --hairline:      rgba(11, 11, 11, .30);
  --hairline-soft: rgba(11, 11, 11, .18);
  --accent:        var(--ink);
  --accent-strong: var(--ink);
  --accent-dim:    rgba(11, 11, 11, .38);
  --accent-wash:   rgba(11, 11, 11, .07);
  --ghost-fill:    rgba(11, 11, 11, .62);
  --stroke-ghost:  rgba(11, 11, 11, .80);
  background: var(--bg); color: var(--fg);
}

/* --- Cabeçalhos de seção -------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; flex: none;
}
.eyebrow.no-dash::before { display: none; }

.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section-head h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
.section-head p { color: var(--fg-muted); margin-top: 1.1rem; font-size: 1.02rem; }
.section-head em { font-style: italic; color: var(--accent-strong); }

.head-split {
  display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.head-split .section-head { margin-bottom: 0; }
.head-split p.aside { max-width: 340px; color: var(--fg-muted); font-size: .95rem; }

/* Cabeçalho editorial em três colunas: índice numerado à esquerda, título
   grande ao centro e nota curta à direita. É o ritmo que dá a leitura de
   revista às seções da home. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, .28fr) minmax(0, 1.05fr) minmax(0, .42fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
.sec-index { display: flex; flex-direction: column; gap: 1.6rem; }
.sec-num {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--accent); line-height: 1;
}
.sec-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
.sec-title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -.022em; line-height: 1.06;
}
.sec-title em { font-style: italic; color: var(--accent-strong); }
.sec-aside { color: var(--fg-muted); font-size: .9rem; line-height: 1.75; margin: 0; }

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 1.1rem; }
  .sec-index { flex-direction: row; align-items: baseline; gap: 1rem; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem;
  font-family: var(--sans); font-size: .86rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
  text-align: center;
}
.btn svg { flex: none; }

.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn--line { background: transparent; color: var(--fg); border-color: var(--hairline); }
.btn--line:hover { border-color: var(--accent); color: var(--accent); }

.btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent-dim); }
.btn--ghost:hover { background: var(--accent-wash); border-color: var(--accent); }

.btn--dark { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-3); }

.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .76rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--accent); text-decoration: none;
  font-size: .84rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-dim); padding-bottom: .2rem;
  transition: border-color .25s, color .25s;
}
.link-arrow:hover { color: var(--accent-strong); border-color: var(--accent); }

/* --- Cabeçalho ----------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
}
/* O fundo e o desfoque ficam no pseudo-elemento de propósito: aplicado no
   próprio .site-header, o backdrop-filter o tornaria bloco de contenção dos
   descendentes position: fixed, e o painel do menu mobile ficaria preso à
   altura da barra em vez de ocupar a tela inteira. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 11, 11, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.site-header.is-scrolled::before {
  background: rgba(11, 11, 11, .96);
  border-bottom-color: var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* O conjunto marca + nome sai um pouco do eixo do cabeçalho, para a esquerda e
   para cima, em vez de ficar centrado na barra. É deslocamento visual, por
   transform: o espaço que o lockup ocupa na linha continua o mesmo, então nem o
   menu nem o botão saem do lugar. O clamp segura o recuo entre 6px e 24px, de
   modo que no celular ele nunca invade a margem da página. */
.brand {
  display: inline-flex; align-items: center; gap: .85rem; text-decoration: none;
  transform: translateX(clamp(-1.5rem, -1.2vw, -.4rem));
  transform-origin: left center;
}
/* O nome não quebra. Quebrado, ele empilhava linhas e empurrava a assinatura
   para fora da faixa de 76px do cabeçalho. */
.brand-name { white-space: nowrap; }
/* A subida só vale onde a assinatura cabe em uma linha; nas telas estreitas
   ela ocupa duas e subir encostaria no topo da barra. */
@media (min-width: 481px) {
  .brand { transform: translate(clamp(-1.5rem, -1.2vw, -.4rem), -.35rem); }
}
.brand img { width: 42px; height: 42px; }
.brand-name {
  font-family: var(--sans); font-size: .88rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.1; color: var(--ivory);
}
/* A assinatura é subordinada ao nome e os dois precisam ler como um bloco só.
   Sem line-height próprio ela herda o 1.7 do corpo do texto, o que abre quase
   8px de folga dentro do lockup e solta uma linha da outra. */
.brand-sub {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
  line-height: 1.2; margin-top: .22rem;
}

/* Onde o menu vira painel sobra largura no cabeçalho, e o lockup pode assumir a
   proporção certa: nome maior, assinatura menor. Antes acontecia o inverso — a
   assinatura caía no piso de 12px dos rótulos em caixa alta e ficava 65px mais
   larga que o nome, de modo que o olho lia primeiro "escritório e assessoria
   jurídica" e só depois o nome do escritório. Acima de 1199px o cabeçalho volta
   a disputar espaço com os seis itens de menu e o nome fica no tamanho base. */
@media (max-width: 1199px) {
  .brand-name { font-size: 1rem; letter-spacing: .13em; }
  .brand-sub { font-size: .66rem; letter-spacing: .12em; }
}
/* Abaixo de 360px o nome em uma linha só não cabe ao lado do botão do menu.
   Em vez de deixá-lo quebrar de novo, a marca e o nome encolhem. A assinatura
   fica como está: ela pode quebrar em duas linhas sem estourar a faixa. */
@media (max-width: 359px) {
  .brand img { width: 36px; height: 36px; }
  .brand-name { font-size: .86rem; letter-spacing: .1em; }
}

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  color: var(--muted); text-decoration: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  transition: color .25s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-light); }

.nav-actions { display: flex; align-items: center; gap: .75rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--ivory);
  cursor: pointer; border-radius: var(--radius);
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; background: currentColor;
  position: relative; transition: background-color .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px;
  background: currentColor; transition: transform .25s, top .25s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* O cabeçalho completo — marca, seis itens de menu e botão — precisa de 1053px
   de conteúdo. Com o wrap em 1220px e o respiro lateral, isso só cabe a partir
   de ~1145px. Abaixo disso o menu vira painel: antes deste corte o flexbox
   resolvia o aperto quebrando o nome do escritório em várias linhas, que
   transbordavam a faixa do cabeçalho. */
@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.25rem var(--pad) 5rem;
    background: var(--ink); overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a {
    font-family: var(--serif); font-size: 1.25rem; color: var(--ivory);
    letter-spacing: .02em; text-transform: none;
    padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
  }
  .nav-actions .btn { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding: calc(var(--nav-h) + clamp(2.25rem, 5vw, 4rem)) 0 clamp(2.5rem, 5vw, 4.5rem);
  position: relative; overflow: hidden;
  background: var(--ink);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-soft);
}
/* Arcos concêntricos de fundo, puramente decorativos.

   O contêiner só posiciona (e recebe o deslocamento de rolagem em --py, vindo
   do site.js). Quem gira são os três anéis internos: assim o transform do
   parallax e o das animações nunca disputam a mesma propriedade. */
.hero-decor {
  position: absolute; top: 50%; right: -14%;
  transform: translateY(calc(-50% + var(--py, 0px)));
  width: min(880px, 96vw); aspect-ratio: 1; pointer-events: none;
}
.hero-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(205, 168, 81, .13);
  /* Um trecho mais claro do aro: é ele que torna a rotação perceptível, já que
     um círculo de cor uniforme giraria sem parecer que gira. */
  border-top-color: rgba(205, 168, 81, .34);
  animation: ring-spin 140s linear infinite;
}
/* Cada anel carrega um ponto dourado na própria borda; a rotação do anel é que
   leva o ponto pela órbita. */
.hero-ring::after {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--gold); opacity: .8;
}
.hero-ring--b {
  inset: 14%; border-color: rgba(205, 168, 81, .09);
  border-left-color: rgba(205, 168, 81, .26);
  animation-duration: 96s; animation-direction: reverse;
}
.hero-ring--b::after { width: 5px; height: 5px; margin-left: -2.5px; top: -3px; opacity: .55; }
.hero-ring--c {
  inset: 31%; border-color: rgba(205, 168, 81, .07);
  border-right-color: rgba(205, 168, 81, .2);
  animation-duration: 188s;
}
.hero-ring--c::after { width: 4px; height: 4px; margin-left: -2px; top: -2.5px; opacity: .45; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(1.75rem, 3.2vw, 3.25rem); align-items: center;
  position: relative; z-index: 1;
}
/* As três linhas do título têm o mesmo corpo, como na composição de capa da
   referência: só mudam o estilo (romano, itálico dourado, itálico vazado).

   Entrelinha medida na captura da referência (janela de 1568px): as linhas se
   repetem a cada 81,5px sobre um corpo de 88px, ou seja .93.

   O corpo passa do 5.5rem da referência para 5.9rem a pedido: com a caixa de
   conteúdo agora em 1188px, a coluna do texto tem 651px e a linha mais longa
   ("Advocacia em") ocupa 541px — sobram 110px, folga suficiente para o título
   continuar quebrando nas mesmas quatro linhas mesmo onde o Georgia não
   existir e a substituta for mais larga. Passar disso volta a quebrar. */
.hero h1 {
  font-size: clamp(2.5rem, 6.6vw, 5.9rem);
  line-height: .93; letter-spacing: -.03em;
  margin-bottom: .35rem;
}
.hero .hero-line { display: block; }
.hero .hero-complement {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: inherit; line-height: inherit;
  color: var(--gold-light);
}
/* Terceira linha: preenchimento marfim discreto com o contorno por cima, como
   uma letra gravada. O vazado puro que havia antes rendia só o traço e ficava
   parcialmente ilegível em monitor de brilho baixo e no celular.

   Contraste sobre a tinta #0b0b0b: o preenchimento de .58 rende 6.0:1 e o
   traço de .78 rende 11.6:1 — passam em AA com folga, e ainda assim a linha
   fica abaixo de "Advocacia em" (17.0:1) e de "Araucária." (12.3:1), que
   continuam sendo o que se lê primeiro. Onde -webkit-text-stroke não existir,
   sobra o preenchimento sozinho, que já é legível. */
.hero .hero-ghost {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: inherit; line-height: inherit;
  color: var(--ghost-fill); margin-bottom: 1.5rem;
}
@supports ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .hero .hero-ghost {
    -webkit-text-stroke: 1px var(--stroke-ghost);
    text-stroke: 1px var(--stroke-ghost);
  }
}
/* No celular o corpo do título cai para perto de 2.5rem e o traço de 1px passa
   a pesar demais sobre a letra. Aqui o preenchimento sobe (8.9:1) e o contorno
   afina, porque nessa largura o que importa é ler, não o efeito. */
@media (max-width: 700px) {
  .hero .hero-ghost { color: rgba(240, 238, 232, .72); }
  @supports ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
    .hero .hero-ghost {
      -webkit-text-stroke-width: .6px;
      text-stroke-width: .6px;
    }
  }
}
/* Entrelinha medida na referência: 24,5px para um corpo de 16,5px. A daqui
   estava em 1.85, e era o que mais abria o bloco de texto da capa em relação
   à composição da demo. */
.hero p.lead {
  color: var(--muted); font-size: 1.03rem; line-height: 1.55;
  max-width: 52ch; margin-bottom: 1.9rem;
}
.hero-since {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}

/* --- Entrada da capa ------------------------------------------------------
   A capa monta sozinha na abertura: cada elemento sobe e ganha foco em
   sequência, de cima para baixo, e os retratos entram depois do título.

   O bloco inteiro fica dentro de prefers-reduced-motion: no-preference, e não
   do @media de "reduce". A diferença importa: como a animação parte de
   opacity 0, qualquer ambiente onde ela não rodasse deixaria a capa em
   branco. Escrito assim, só recebe a animação quem declara aceitar
   movimento — quem pede menos movimento, e também qualquer navegador que não
   conheça a consulta, cai direto no estado final, visível.
   -------------------------------------------------------------------------- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-title {
  from { opacity: 0; transform: translateY(34px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hero-side {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-photo {
  from { opacity: 0; transform: translateY(40px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-seal {
  from { opacity: 0; transform: scale(.55) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1 > span,
  .hero p.lead,
  .hero .btn-row,
  .hero-since,
  .hero .portrait,
  .hero .years-badge {
    animation: hero-rise .85s cubic-bezier(.22, .68, .3, 1) both;
    animation-delay: var(--in, 0s);
  }
  .hero .eyebrow      { animation-name: hero-side;  --in: .06s; }
  .hero .hero-line    { animation-name: hero-title; --in: .16s; }
  .hero .hero-complement { animation-name: hero-title; --in: .28s; }
  .hero .hero-ghost   { animation-name: hero-title; --in: .40s; }
  .hero p.lead        { --in: .54s; }
  .hero .btn-row      { --in: .64s; }
  .hero-since         { --in: .74s; }
  /* O retrato da direita entra primeiro: é o que está mais alto na composição. */
  .hero .portrait:nth-child(2) { animation-name: hero-photo; --in: .34s; }
  .hero .portrait:nth-child(1) { animation-name: hero-photo; --in: .46s; }
  .hero .years-badge  { animation-name: hero-seal; --in: .88s; animation-duration: .7s; }
  .hero-decor         { animation: hero-fade 2.2s ease .2s both; }
}

.portraits-wrap {
  position: relative;
  /* O recuo do retrato da esquerda abre um vazio no alto da composição, e é
     nesse vazio que o selo dos anos de atuação se encaixa. As duas medidas
     andam juntas: mexer em uma sem a outra joga o selo por cima da foto. */
  --recuo: clamp(2.5rem, 7vw, 6rem);
  --selo: clamp(96px, 11vw, 124px);
}

/* Os retratos ficam escalonados, como na composição de capa: o da direita
   sobe, o da esquerda desce. */
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.6vw, 1.25rem); align-items: start; }
.portrait {
  background: var(--ink-3); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
.portrait figure { margin: 0; overflow: hidden; background: var(--ink-4); }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  /* Retratos em cor. O ajuste fino serve só para casar com o fundo escuro da
     capa, sem lavar o tom de pele. */
  filter: contrast(1.03) saturate(1.02);
  transition: filter .45s ease;
}
.portrait:hover img { filter: contrast(1.05) saturate(1.08) brightness(1.03); }
.portrait figcaption { padding: .95rem 1rem 1.05rem; }
.portrait .p-name {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; color: var(--ivory);
}
.portrait .p-oab {
  display: block; margin-top: .3rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold);
}

@media (min-width: 901px) {
  .portrait:first-child { margin-top: var(--recuo); }
}

/* Selo circular com o tempo de atuação. O número vem de "atuação desde 2014"
   e é atualizado pelo site.js, não fixado no HTML.

   Fica no vazio do alto, encostando na quina do retrato da esquerda: ali o
   único que ele encobre é o topo da foto, acima da cabeça. No rodapé da
   composição, que é onde ele ficava antes, o selo caía em cima da legenda com
   o nome e a OAB. */
.years-badge {
  position: absolute; left: -1.5rem; top: calc(var(--recuo) - var(--selo) + .5rem); z-index: 2;
  width: var(--selo); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05;
}
.years-badge .yb-label {
  font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  opacity: .78;
}
/* Quatro dígitos, não dois: a escala fica um pouco abaixo da do número de
   anos que ficava aqui antes, para "2014" não encostar na borda do círculo. */
.years-badge .yb-num {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  letter-spacing: .01em;
}
.years-badge .yb-unit {
  font-size: .52rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .78;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: calc(var(--nav-h) + 2rem); }
  .portraits { max-width: 520px; }
  /* Sem o escalonamento não sobra vazio nenhum, e qualquer canto que o selo
     ocupasse cairia sobre uma legenda ou sobre um rosto. Ele desce para o
     fluxo, centrado abaixo dos dois retratos. */
  .years-badge { position: static; margin: 1.1rem auto 0; }
  .hero-decor { right: -40%; opacity: .7; }
}

/* --- Faixa de credenciais ------------------------------------------------ */

.credbar { border-block: 1px solid var(--hairline-soft); padding: 1.6rem 0; background: var(--ink); }
.credbar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .7rem 2rem;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.credbar li { margin: 0; display: inline-flex; align-items: center; gap: .6rem; }
.credbar li::before { content: ""; width: 5px; height: 5px; background: var(--gold); flex: none; }

/* --- Marquise dourada ----------------------------------------------------- */

.marquee {
  background: var(--gold); color: var(--ink);
  border-block: 1px solid rgba(11, 11, 11, .16);
  overflow: hidden; padding: .95rem 0;
}
.marquee__track { display: flex; width: max-content; animation: marquee-slide 46s linear infinite; }
.marquee__group {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.6rem);
  padding-right: clamp(1.5rem, 3vw, 2.6rem);
}
.marquee__group span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem); white-space: nowrap;
}
.marquee__group i { font-style: normal; color: rgba(11, 11, 11, .42); flex: none; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --- Áreas: lista editorial ----------------------------------------------- */

.area-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft);
}
.area-card {
  background: var(--bg); padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none; color: inherit;
  transition: background-color .3s;
}
.area-card:hover { background: var(--surface); }
.area-card .a-num {
  font-family: var(--serif); font-style: italic; font-size: .86rem;
  letter-spacing: .06em; color: var(--accent);
}
.area-card h3 { font-size: 1.4rem; transition: color .25s; }
.area-card p { color: var(--fg-muted); font-size: .93rem; margin: 0; }
.area-card .a-go {
  margin-top: auto; padding-top: .9rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

/* A partir de 900px a grade vira uma lista de linhas com filetes finos, que é
   a forma como a referência apresenta as quatro frentes principais. */
@media (min-width: 900px) {
  .area-grid {
    grid-template-columns: 1fr; gap: 0;
    background: none; border: 0; border-top: 1px solid var(--hairline-soft);
  }
  .area-card {
    display: grid; align-items: center;
    grid-template-columns: 76px minmax(0, .85fr) minmax(0, 1.25fr) 32px;
    gap: 1.75rem; padding: 1.75rem .25rem;
    background: transparent; border-bottom: 1px solid var(--hairline-soft);
  }
  .area-card:hover { background: transparent; }
  .area-card:hover h3 { color: var(--accent); }
  .area-card h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
  .area-card p { font-size: .9rem; }
  .area-card .a-go {
    margin: 0; padding: 0; text-align: right;
    font-size: 0; color: var(--accent);
  }
  .area-card .a-go::after { content: "\2192"; font-size: 1.1rem; letter-spacing: 0; }
}

/* --- Páginas de tema ------------------------------------------------------
   As áreas são cinco linhas largas; os temas são recortes dentro delas e
   precisam de peso visual menor, senão a home passa a ter duas listas
   competindo pela mesma atenção. Daí a grade compacta, que continua em
   colunas mesmo no desktop em vez de virar lista de linhas. */

.temas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft);
}
.tema-card {
  background: var(--bg); padding: clamp(1.35rem, 2.2vw, 1.85rem);
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  transition: background-color .3s;
}
.tema-card:hover { background: var(--surface); }
.tema-card:hover h3 { color: var(--accent); }
.tema-card .t-cat {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.tema-card h3 { font-size: 1.14rem; transition: color .25s; }
.tema-card p { color: var(--fg-muted); font-size: .88rem; margin: 0; line-height: 1.7; }
.tema-card .a-go {
  margin-top: auto; padding-top: .9rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

/* Linha de expectativa logo abaixo dos botões do topo das páginas internas:
   horário real do escritório e o que a primeira conversa é. Fica junto do
   botão de propósito — é ali que a dúvida aparece. */
.cta-note {
  margin-top: 1rem; max-width: 62ch;
  color: var(--fg-dim); font-size: .87rem; line-height: 1.7;
}
.cta-note strong { color: var(--fg-muted); font-weight: 600; }

/* --- Explorador (accordion) ---------------------------------------------- */

/* Título fixo à esquerda e a lista abrindo à direita, como no mapa de atuação
   da referência. */
.explorer-split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.explorer-split .section-head { margin-bottom: 0; }
@media (max-width: 900px) {
  .explorer-split { grid-template-columns: 1fr; gap: 2rem; }
}
@media (min-width: 901px) {
  .explorer-split .section-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .explorer-split .section-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
}

.explorer { border-top: 1px solid var(--hairline-soft); }
.explorer details { border-bottom: 1px solid var(--hairline-soft); }
.explorer summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px;
  align-items: center; gap: 1rem;
  padding: 1.25rem .25rem; min-height: 48px;
  font-family: var(--serif); font-size: 1.16rem; color: var(--fg);
  transition: color .25s;
}
.explorer summary::-webkit-details-marker { display: none; }
.explorer summary::before {
  content: attr(data-num);
  font-style: italic; font-size: .82rem; color: var(--accent);
}
.explorer summary::after {
  content: "+"; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-dim);
  font-family: var(--sans); font-size: 1rem; line-height: 1; color: var(--accent);
}
.explorer details[open] summary::after { content: "\2013"; }
.explorer summary:hover { color: var(--accent); }
.explorer .panel { padding: 0 .25rem 1.5rem 3.9rem; color: var(--fg-muted); font-size: .95rem; }
.explorer .panel ul {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: .45rem 1.5rem;
}
.explorer .panel li { position: relative; padding-left: 1rem; font-size: .9rem; }
.explorer .panel li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--accent);
}
@media (max-width: 560px) {
  .explorer summary { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: .6rem; }
  .explorer .panel { padding-left: .25rem; }
}

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

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 0; border-top: 1px solid var(--hairline-soft);
}
.step {
  background: transparent; padding: clamp(1.75rem, 2.8vw, 2.6rem) clamp(1.25rem, 2.2vw, 2rem);
  border-left: 1px solid var(--hairline-soft);
}
.step:first-child { border-left: 0; padding-left: .25rem; }
.step .s-num {
  font-family: var(--serif); font-style: italic; font-size: .86rem; color: var(--accent);
  line-height: 1; display: block; margin-bottom: 2.5rem;
}
.step h3 { font-size: 1.32rem; margin-bottom: .6rem; }
.step p { color: var(--fg-muted); font-size: .95rem; margin: 0; }
@media (max-width: 780px) {
  .step { border-left: 0; border-top: 1px solid var(--hairline-soft); padding-inline: .25rem; }
  .step:first-child { border-top: 0; }
  .step .s-num { margin-bottom: 1rem; }
}

/* --- Advogados (perfil completo) ----------------------------------------- */

.lawyers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.lawyer {
  border: 1px solid var(--hairline-soft); background: var(--surface);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
/* A imagem é a primeira célula do grid e precisa esticar até o fim do card;
   com o <picture> no meio, a altura tem que atravessar os dois. */
.lawyer picture { height: 100%; }
.lawyer img {
  width: 100%; height: 100%; min-height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  filter: contrast(1.03) saturate(1.02);
}
.lawyer .l-body { padding: clamp(1.4rem, 2.4vw, 2.1rem); }
.lawyer h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; }
.lawyer .l-role {
  margin: 0 0 .9rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  order: -1;
}
.lawyer .l-body { display: flex; flex-direction: column; }
.lawyer .l-oab {
  display: block; margin-top: .55rem;
  color: var(--fg-muted);
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.lawyer .l-bio {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline-soft);
  color: var(--fg-muted); font-size: .93rem;
}
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: 1.2rem; }
.tag {
  font-size: .72rem; letter-spacing: .06em; padding: .35rem .7rem;
  border: 1px solid var(--hairline); color: var(--fg-dim);
}
@media (max-width: 720px) {
  .lawyer { grid-template-columns: 1fr; }
  .lawyer img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
}

/* --- Linha do tempo ------------------------------------------------------ */

.timeline { display: grid; gap: 0; border-top: 1px solid var(--hairline-soft); }
.tl-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 1.25rem clamp(1rem, 3vw, 2.5rem);
  padding: 1.7rem 0; border-bottom: 1px solid var(--hairline-soft);
}
.tl-year { font-family: var(--serif); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.tl-title { font-family: var(--serif); font-size: 1.22rem; margin-bottom: .5rem; }
.tl-desc { color: var(--fg-muted); font-size: .95rem; margin: 0; }
@media (max-width: 560px) { .tl-item { grid-template-columns: 1fr; gap: .5rem; } }

/* Acima de 900px a mesma marcação vira uma régua horizontal com marcadores
   dourados sobre a linha superior. */
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tl-item {
    display: block; position: relative;
    padding: 2.4rem clamp(1rem, 1.8vw, 1.6rem) .5rem;
    border-bottom: 0; border-left: 1px solid var(--hairline-soft);
  }
  .tl-item:first-child { border-left: 0; padding-left: 0; }
  .tl-item::before {
    content: ""; position: absolute; top: -5px; left: clamp(1rem, 1.8vw, 1.6rem);
    width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  }
  .tl-item:first-child::before { left: 0; }
  .tl-year {
    font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  .tl-title { font-size: 1.28rem; margin-bottom: .6rem; }
  .tl-desc { font-size: .88rem; }
}

/* --- Notas jurídicas ----------------------------------------------------- */

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.note-card {
  background: var(--surface); border: 1px solid var(--hairline-soft);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: border-color .3s;
  overflow: hidden;
}
.note-card:hover { border-color: var(--accent-dim); }

/* Capa numerada. As três variações de cor reproduzem o ritmo tinta/dourado/
   pedra da referência. */
.note-cover {
  position: relative; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: rgba(240, 238, 232, .58);
  font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 4vw, 3rem);
}
.note-cover::before, .note-cover::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid currentColor; opacity: .32;
}
.note-cover::before { width: 46%; aspect-ratio: 1; }
.note-cover::after { width: 74%; aspect-ratio: 1; }
/* As três capas são aria-hidden e o numeral é decorativo, mas mantê-las acima
   de 3:1 custa pouco e evita que uma auditoria automática marque a seção. A
   variante dourada subiu de .45 para .58 (mesmo alfa das outras) e a de pedra
   precisou de fundo mais escuro: sobre o cinza médio anterior nem o marfim
   puro chegava a 3:1. */
.note-cover--gold { background: var(--gold); color: rgba(11, 11, 11, .58); }
.note-cover--stone { background: #585650; color: rgba(240, 238, 232, .58); }

.note-body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.note-cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.note-card h3 { font-size: 1.24rem; }
.note-card p { color: var(--fg-muted); font-size: .92rem; margin: 0; }
.note-meta { color: var(--fg-dim); font-size: .78rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.note-card .a-go {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hairline-soft);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

.pending-flag {
  display: inline-block; margin-top: .4rem; padding: .25rem .6rem;
  border: 1px dashed var(--accent-dim); color: var(--accent);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}

/* --- Avaliações no Google ------------------------------------------------ */

/* Âncora só de compatibilidade: #avaliacoes era uma seção própria e pode
   existir em links antigos. Não ocupa espaço nem entra na leitura. */
.anchor-alias { display: block; height: 0; overflow: hidden; }

/* Faixa única embaixo das duas unidades, em contraste com os cartões claros.
   Deitada no desktop (texto à esquerda, botão à direita) e empilhada no
   celular, onde o botão passa a ocupar a largura toda. */
.review-cta {
  margin-top: 1.25rem; padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--ink); border: 1px solid var(--ink);
  --fg: var(--ivory); --fg-muted: rgba(240, 238, 232, .70);
  --accent: var(--gold); --accent-strong: var(--gold-light);
  --accent-dim: var(--gold-dim); --hairline: rgba(255, 255, 255, .14);
  color: var(--fg);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.75rem;
}
.review-cta .rc-texto { flex: 1 1 22rem; }
.review-cta h3 { font-size: 1.16rem; margin-bottom: .35rem; }
.review-cta p { color: var(--fg-muted); font-size: .9rem; margin: 0; max-width: 48ch; }
.review-cta .btn-row { margin: 0; }

@media (max-width: 560px) {
  .review-cta .btn-row { width: 100%; }
  .review-cta .btn-row .btn { width: 100%; justify-content: center; }
}

/* --- Unidades ------------------------------------------------------------ */

.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.25rem; }
.unit {
  border: 1px solid var(--hairline-soft); background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: .55rem;
}
.unit .u-index {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.5rem;
}
.unit .u-index em { font-family: var(--serif); font-style: italic; letter-spacing: .04em; }
.unit h3 { font-size: 1.32rem; margin-bottom: .3rem; }
.unit address { font-style: normal; color: var(--fg-muted); font-size: .95rem; }
.unit .u-hours { color: var(--fg-dim); font-size: .86rem; }
.unit .btn-row { margin-top: 1.1rem; }

/* Hierarquia entre a sede e a segunda unidade. A sede fica na coluna maior,
   com o cartão claro e o filete dourado; a segunda perde o fundo e recua para
   o papel da faixa — continua acessível, só não disputa a atenção. Abaixo de
   900px a grade volta a uma coluna e a ordem do HTML, que já traz a sede
   primeiro, resolve sozinha. */
@media (min-width: 900px) {
  .units--sede { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
.unit--sede {
  border-color: var(--accent-dim);
  padding: clamp(1.7rem, 3vw, 2.6rem);
}
.unit--sede h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.unit--sede address { font-size: 1.02rem; }
.unit--apoio { background: transparent; border-color: var(--hairline-soft); }
.unit--apoio h3 { font-size: 1.12rem; }
.unit--apoio address, .unit--apoio .u-hours { font-size: .9rem; }

/* --- Faixa de destaque (prazo e provas) ---------------------------------- */

.highlight {
  background: var(--gold); color: var(--ink);
  --fg: var(--ink);
  --fg-muted: rgba(11, 11, 11, .80);
  --fg-dim: rgba(11, 11, 11, .62);
  --hairline: rgba(11, 11, 11, .30);
  --hairline-soft: rgba(11, 11, 11, .18);
  --accent: var(--ink);
  --accent-strong: var(--ink);
  --accent-dim: rgba(11, 11, 11, .38);
}
.highlight h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 22ch; }
.highlight p { color: rgba(11, 11, 11, .82); max-width: 60ch; margin-top: 1.1rem; font-size: 1rem; }
.highlight .btn-row { margin-top: 1.9rem; }
.highlight .eyebrow { color: rgba(11, 11, 11, .72); }

/* Selo circular de alerta usado na faixa dourada. */
.badge-alert {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 1px solid rgba(11, 11, 11, .45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem;
}
.alert-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.alert-head .eyebrow { margin: 0; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--hairline-soft); }
.faq details { border-bottom: 1px solid var(--hairline-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.3rem .25rem; min-height: 48px;
  font-family: var(--sans); font-size: 1rem; color: var(--fg);
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--accent-dim);
  font-size: 1rem; line-height: 1; color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--accent); }
.faq .panel { padding: 0 .25rem 1.6rem; color: var(--fg-muted); font-size: .97rem; max-width: 72ch; }
.faq .panel p:last-child { margin-bottom: 0; }

/* --- Triagem -------------------------------------------------------------- */

.triage-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .triage-grid { grid-template-columns: 1fr; } }

.triage { border: 1px solid var(--hairline); background: transparent; }
.triage-head { padding: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--hairline); }
.triage-head .eyebrow { margin-bottom: .75rem; }
.triage-head p { margin: 0; color: var(--fg-muted); font-size: .9rem; }

.triage fieldset {
  border: 0; margin: 0;
  padding: clamp(1.3rem, 2.6vw, 1.75rem) clamp(1.5rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--hairline);
}
.triage legend {
  padding: 0; margin-bottom: .9rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .55rem; }
.opt { position: relative; display: flex; }
.opt input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.opt span {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; min-height: 46px;
  padding: .6rem 1rem; border: 1px solid var(--hairline);
  font-size: .87rem; color: var(--fg-muted); transition: all .2s;
}
.opt span::after { content: "+"; color: var(--accent); flex: none; }
.opt input:checked + span { border-color: var(--accent); color: var(--fg); background: var(--accent-wash); }
.opt input:checked + span::after { content: "\2713"; }
.opt input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.triage-foot { padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.2rem); }
.triage-note {
  border-left: 2px solid var(--accent); padding: .2rem 0 .2rem 1rem;
  color: var(--fg-dim); font-size: .85rem; margin-bottom: 1.4rem;
}
.triage-foot .cl-label {
  display: block; margin-bottom: .5rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
}
.triage-preview {
  border: 1px dashed var(--hairline); padding: 1rem; margin: 0 0 1.4rem;
  color: var(--fg-muted); font-size: .87rem; white-space: pre-wrap; word-break: break-word;
}

.contact-list { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.contact-list li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: .9rem; align-items: start;
  padding: 1.1rem 0; border-top: 1px solid var(--hairline-soft);
}
.contact-list li:first-child { border-top: 0; }
.contact-list .ci { display: flex; padding-top: .2rem; color: var(--accent); }
.contact-list .cl-label {
  display: block; margin-bottom: .2rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
}
.contact-list .cl-value { display: block; color: var(--fg); font-size: 1rem; text-decoration: none; }
.contact-list a.cl-value { color: var(--accent); }
.contact-list a.cl-value:hover { color: var(--accent-strong); }

/* --- Aviso de segurança --------------------------------------------------- */

.security {
  border-top: 1px solid var(--hairline-soft);
  padding: 1.75rem 0 0; margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
.security > svg { color: var(--accent); }
.security h2 {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0;
}
.security p { color: var(--fg-muted); margin: 0; font-size: .88rem; max-width: 76ch; }
@media (max-width: 700px) { .security { grid-template-columns: 1fr; } }

/* --- Conteúdo editorial (notas e políticas) ------------------------------ */

.page-head { padding: calc(var(--nav-h) + clamp(2.25rem, 5vw, 3.75rem)) 0 clamp(1.75rem, 4vw, 2.75rem); }
.page-head h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); max-width: 20ch; }
.page-head .lead { color: var(--fg-muted); font-size: 1.05rem; max-width: 62ch; margin-top: 1.25rem; }

.breadcrumbs { font-size: .76rem; color: var(--fg-dim); margin-bottom: 1.5rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--hairline); }
.breadcrumbs a { color: var(--fg-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 950px) { .article-grid { grid-template-columns: 1fr; } }

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 2.6rem 0 1rem; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; color: var(--accent-strong); }
.prose p, .prose li { color: var(--fg-muted); font-size: 1rem; line-height: 1.85; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent); }
.prose ul li::marker { color: var(--accent); }
.prose > :first-child { margin-top: 0; }

.callout {
  border-left: 2px solid var(--accent); background: var(--surface);
  padding: 1.25rem 1.5rem; margin: 1.75rem 0;
}
.callout p { margin: 0; color: var(--fg-muted); font-size: .95rem; }
.callout .c-label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}

.disclaimer {
  border: 1px dashed var(--hairline); padding: 1.25rem 1.5rem; margin: 2.5rem 0 0;
  color: var(--fg-dim); font-size: .87rem;
}
.disclaimer p { margin: 0; color: inherit; font-size: inherit; }

.aside-box { border: 1px solid var(--hairline-soft); background: var(--surface); padding: 1.5rem; margin-bottom: 1.25rem; }
.aside-box h2, .aside-box h3 { font-size: 1rem; letter-spacing: .04em; margin-bottom: .85rem; }
.aside-box p, .aside-box li { color: var(--fg-muted); font-size: .88rem; }
.aside-box ul { list-style: none; padding: 0; margin: 0; }
.aside-box li { margin-bottom: .6rem; }
.aside-box a { color: var(--accent); text-decoration: none; }
.aside-box a:hover { text-decoration: underline; }

.byline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--fg-dim); font-size: .82rem; margin-top: 1.5rem; }
.byline span { display: inline-flex; align-items: center; gap: .45rem; }

.share { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }

/* --- Marca d'água --------------------------------------------------------- */

/* Palavra gigante em contorno atrás das faixas escuras. Decorativa: fica fora
   da árvore de acessibilidade e não recebe eventos. */
.has-watermark { position: relative; overflow: hidden; }
.has-watermark > .wrap { position: relative; z-index: 1; }
.watermark {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(5rem, 21vw, 19rem);
  letter-spacing: .1em; line-height: 1; white-space: nowrap;
  color: transparent; pointer-events: none; user-select: none;
  opacity: .55;
}
@supports ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .watermark {
    -webkit-text-stroke: 1px rgba(240, 238, 232, .055);
    text-stroke: 1px rgba(240, 238, 232, .055);
  }
}

/* --- Rodapé --------------------------------------------------------------- */

.site-footer { background: var(--ink); border-top: 1px solid var(--line-soft); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 2.5rem; }
.footer-logo { width: 132px; margin-bottom: 1.25rem; }
.footer-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.3; color: var(--muted);
}
.site-footer p { color: var(--muted-2); font-size: .88rem; }
.footer-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .6rem; }
.footer-list a, .footer-list span { color: var(--muted-2); text-decoration: none; font-size: .88rem; }
.footer-list a:hover { color: var(--gold-light); }
.footer-list address { font-style: normal; color: var(--muted-2); font-size: .88rem; }

.footer-socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer-socials a {
  width: 42px; height: 42px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  transition: color .25s, border-color .25s;
}
.footer-socials a:hover { color: var(--gold); border-color: var(--gold-dim); }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
}
.footer-bottom p { margin: 0; font-size: .8rem; color: var(--muted-2); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.footer-legal a,
.footer-legal .link-btn { color: var(--muted-2); font-size: .8rem; text-decoration: none; }
.footer-legal a:hover,
.footer-legal .link-btn:hover { color: var(--gold-light); }

/* Botão com aparência de link: o controle de preferências de cookies precisa
   ser botão de verdade (ele não navega), mas pertence visualmente à linha de
   links legais do rodapé. */
.link-btn {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; line-height: inherit; cursor: pointer;
}

/* --- Barra de ação mobile + botão flutuante ------------------------------ */

.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; height: var(--bar-h);
  background: rgba(11, 11, 11, .97); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.action-bar a {
  flex: 1 1 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  color: var(--ivory); text-decoration: none;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.action-bar a + a { border-left: 1px solid var(--line-soft); }
.action-bar a:active { background: var(--ink-3); }
.action-bar svg { color: var(--gold); }

/* Pílula verde do WhatsApp, com rótulo, como na referência. */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80;
  min-height: 52px; padding: 0 1.15rem; border-radius: 999px;
  background: #25d366; color: #06301a;
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .25s, background-color .25s;
}
.wa-float:hover { transform: translateY(-3px); background: #1fbb5a; }
.wa-float svg { flex: none; }

/* A barra aparece na mesma largura em que o botão do cabeçalho é recolhido
   pelo menu, para que sempre exista um caminho visível de contato. */
@media (max-width: 1199px) {
  .action-bar { display: flex; }
  .wa-float { display: none; }
  body { padding-bottom: var(--bar-h); }
  .site-footer { padding-bottom: 1.5rem; }
}

/* --- Cookies --------------------------------------------------------------
   Faixa discreta, não modal: não escurece a página, não prende o foco e não
   impede a leitura. No desktop fica encostada à direita, porque o conteúdo da
   capa (título, texto e botões) é alinhado à esquerda — ali o aviso não cobre
   nenhuma chamada. No mobile ocupa a largura útil e sobe acima da barra de
   ação. Aceitar e recusar usam a mesma classe de botão: nenhum dos dois recebe
   destaque maior que o outro.
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed; z-index: 95;
  left: clamp(.75rem, 3vw, 2rem); right: clamp(.75rem, 3vw, 2rem);
  bottom: calc(clamp(.75rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin-left: auto;
  display: none; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem;
  background: rgba(15, 15, 15, .97); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  color: var(--ivory);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cookie-banner.is-open { display: flex; }

/* Enquanto o aviso está aberto, a pílula do WhatsApp sai de cena: as duas
   coisas ocupam o mesmo canto e o aviso é passageiro. Assim que a escolha é
   feita, a pílula volta. */
body.consent-aberto .wa-float { display: none; }
.cookie-banner p {
  flex: 1 1 15rem; margin: 0;
  color: var(--muted); font-size: .8rem; line-height: 1.5;
}
.cookie-banner strong { color: var(--ivory); font-weight: 600; }
.cookie-banner a { color: var(--gold-light); }
.cookie-acoes { display: flex; flex: 0 0 auto; gap: .5rem; }

/* Acima da barra de ação mobile, com a margem de segurança do aparelho. */
@media (max-width: 1199px) {
  .cookie-banner {
    bottom: calc(var(--bar-h) + .75rem + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 560px) {
  .cookie-banner { left: .5rem; right: .5rem; padding: .8rem .9rem; }
  .cookie-acoes { width: 100%; }
  .cookie-acoes .btn { flex: 1 1 0; justify-content: center; }
}

/* --- Revelação suave ------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Ajustes finos por largura ------------------------------------------- */

/* No toque, os rótulos em caixa alta ficam com piso de 12px e os alvos
   clicáveis com 44px de altura mínima, conforme o briefing de mobile. */
@media (max-width: 1023px) {
  /* .brand-sub ficava aqui, no piso de 12px. Saiu: ela não é rótulo de
     conteúdo nem alvo de toque — é a segunda linha do lockup, e o nome
     acessível do link já vem do aria-label. Tamanho dela: bloco acima. */
  .eyebrow,
  .sec-label,
  .note-cat,
  .contact-list .cl-label,
  .portrait .p-oab,
  .lawyer .l-role,
  .lawyer .l-oab,
  .unit .u-index,
  .security h2 { font-size: .75rem; letter-spacing: .13em; }
  .tag,
  .area-card .a-go,
  .note-card .a-go,
  .footer-list,
  .footer-legal a,
  .footer-bottom p { font-size: .8rem; }
  .action-bar a { font-size: .76rem; }
  .triage legend { font-size: .78rem; }
  .triage-foot .tf-num,
  .steps-list .sl-num,
  .step .s-num,
  .area-card .a-num,
  .sec-num { font-size: .9rem; }
  .callout .c-label { font-size: .76rem; letter-spacing: .13em; }
  .pending-flag { font-size: .75rem; letter-spacing: .08em; }
  .years-badge .yb-label,
  .years-badge .yb-unit { font-size: .58rem; }
  .wa-float { font-size: .76rem; }

  .link-arrow { min-height: 44px; }
  .footer-socials a { min-height: 44px; min-width: 44px; }
  .contact-list a,
  .aside-box a,
  .footer-list a,
  .footer-legal a { display: inline-block; padding-block: .7rem; }

  /* Alvos escritos no meio de uma frase — o telefone dentro do texto e o
     botão de preferências do rodapé. Aqui o preenchimento vertical afastaria
     as linhas do parágrafo, então a área de toque cresce por uma camada
     invisível, sem mexer no texto. */
  p a[href^="tel:"],
  .panel a[href^="tel:"],
  .footer-legal .link-btn { position: relative; }
  p a[href^="tel:"]::after,
  .panel a[href^="tel:"]::after,
  .footer-legal .link-btn::after {
    content: ""; position: absolute; inset: -13px 0;
  }
}

@media (max-width: 430px) {
  body { font-size: 16px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn { width: 100%; }
  .credbar ul { gap: .55rem 1.25rem; font-size: .78rem; }
  .portraits { gap: .6rem; }
  .portrait figcaption { padding: .75rem .8rem .85rem; }
  .portrait .p-name { font-size: .92rem; }
  .years-badge { width: 88px; }
  .opt-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1366px) {
  .hero { padding-top: calc(var(--nav-h) + 3rem); }
}

@media print {
  .site-header, .action-bar, .wa-float, .cookie-banner, .share, .watermark, .hero-decor, .marquee { display: none !important; }
  body { background: #fff; color: #111; }
  .band-dark, .band-light, .band-paper, .band-gold, .hero, .site-footer { background: #fff !important; color: #111 !important; }
}