@import url('lib/fonts/fonts.css');

:root {
  --grafite: #373536;
  --grafite-2: #595657;
  --grafite-3: #7d7a7b;
  --areia: #f7f7f7;
  --areia-2: #efeeed;
  --branco: #ffffff;
  --tinta: #1c1b1b;
  --bronze: #8a6f45;
  --bronze-claro: #b09468;
  --linha: #e3e1df;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;

  --medida: 68ch;
  --raio: 4px;
  --largura: 1900px;
  --secao: clamp(4.5rem, 9vw, 8rem);
  --escala: 1;
}

[data-contraste='alto'] {
  --grafite: #000000;
  --grafite-2: #1a1a1a;
  --grafite-3: #333333;
  --tinta: #000000;
  --linha: #767676;
  --bronze: #6b5228;
  --areia: #ffffff;
  --areia-2: #f2f2f2;
}

/* ============================================================
   A ESCALA DA PÁGINA EM TELA GRANDE

   Em monitor grande a página nasce a 90% do tamanho, que é a
   proporção que o Adryan escolheu vendo o site em 12/08/2026
   (ele conseguia isso pondo o zoom do navegador em 90%; agora
   sai assim por padrão, sem depender da configuração dele).

   Cabe mais na primeira tela e a faixa de notícias fica
   folgada abaixo da abertura, sem encolher elemento nenhum:
   a proporção entre título, marca e cartões é a mesma do
   protótipo aprovado.

   Só entra a partir de 1200px de largura. No celular e no
   tablet nada muda, porque ali o texto precisa continuar no
   tamanho de leitura.

   ⚠️ Duas coisas a saber ao mexer nisto:
   1. As regras por largura de tela continuam medindo a janela
      REAL, sem o 0.9. A 1200px reais o conteúdo se comporta
      como se tivesse 1333px, e é por isso que o corte fica
      longe do limite de 860px do layout de celular.
   2. Quem já tiver zoom salvo no navegador para este endereço
      vai multiplicar um pelo outro. Ctrl+0 resolve.
   ============================================================ */
@media (min-width: 1200px) {
  :root { zoom: .9; }
}

* { box-sizing: border-box; }

/* `hidden` precisa vencer regras de display (ex.: .carimbo { display: flex }) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Zerar a duração não basta: sem zerar também o ATRASO, quem pede movimento reduzido
     continua esperando a cascata e vê os blocos piscando um a um. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: calc(1.0625rem * var(--escala));
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  color: var(--grafite);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; font-family: var(--sans); letter-spacing: -0.005em; }
p { margin: 0 0 1.1em; max-width: var(--medida); }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 clamp(1.5rem, 2.5vw, 3rem); }
/* O conteúdo ocupa a tela toda, mas frase corrida tem limite de leitura:
   linha de 1800px é fisicamente cansativa de acompanhar. */
.secao > .wrap > p { max-width: 68ch; }
/* Caixas destacadas são bloco, não frase solta: acompanham a largura da seção,
   senão ficam encolhidas e desalinhadas da grade logo acima. */
.secao > .wrap > p.aviso-conformidade { max-width: none; }
.secao { padding: var(--secao) 0; }
.secao--areia { background: var(--areia); }
.secao--escura { background: var(--grafite); color: #eceaea; }
.secao--escura h2, .secao--escura h3 { color: #ffffff; }

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronze);
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem;
}
.eyebrow::after { content: ''; height: 1px; width: 3rem; background: currentColor; opacity: .5; }
.secao--escura .eyebrow { color: var(--bronze-claro); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  padding: .95rem 1.6rem; border-radius: var(--raio); border: 1px solid transparent;
  /* O fundo transparente PRECISA estar aqui. Sem ele, `<a class="btn">` fica
   * transparente e `<button class="btn">` herda o cinza padrao do navegador
   * (buttonface, #f0f0f0). Na pagina clara os dois pareciam iguais, e no aviso
   * de cookies, que tem fundo escuro, o cinza aparecia e engolia o texto claro:
   * o botao "So os essenciais" ficou com contraste de 1:1, invisivel. */
  background: transparent;
  text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 3px;
}
.btn--solido { background: var(--grafite); color: #fff; }
.btn--solido:hover { background: #201f1f; transform: translateY(-1px); }
.btn--linha { border-color: var(--grafite); color: var(--grafite); }
.btn--linha:hover { background: var(--grafite); color: #fff; }
.btn--clara { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--clara:hover { background: #fff; color: var(--grafite); }
.btn--bloco { width: 100%; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.topo[data-rolado='true'] { border-bottom-color: var(--linha); box-shadow: 0 1px 20px rgba(0,0,0,.04); }
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 82px; }
.topo__logo img { height: 38px; width: auto; display: block; }
@media (max-width: 520px) { .topo__logo img { height: 30px; } }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--grafite-2);
  padding: .3rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current='true'] { color: var(--grafite); border-bottom-color: var(--bronze); }
.topo__acoes { display: flex; align-items: center; gap: .8rem; }
.topo__acoes .btn { padding: .7rem 1.2rem; font-size: .875rem; }
.btn--cliente { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn--cliente:hover { background: #745c38; border-color: #745c38; color: #fff; transform: translateY(-1px); }
.btn--cliente svg { width: 15px; height: 15px; fill: currentColor; }
/* 44px de lado é o alvo mínimo de toque do projeto (doc 04, acima do mínimo do
   WCAG 2.2 AA). O desenho continua o mesmo: quem cresceu foi a área clicável. */
.hamburguer { display: none; background: none; border: 0; flex: none; width: 44px; height: 44px; padding: .5rem; cursor: pointer; }
.hamburguer span { display: block; width: 22px; height: 2px; background: var(--grafite); margin: 4px 0; transition: transform .3s, opacity .3s; }

/* ---------- Hero ---------- */
/* Compacto de propósito: a faixa de notícias tem de caber na primeira tela. */
.hero { padding: clamp(1.6rem, 2.6vw, 2.6rem) 0 clamp(1.6rem, 2.6vw, 2.6rem); background: var(--branco); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 78% at 78% 12%, rgba(138,111,69,.09), transparent 70%);
  pointer-events: none;
}
.hero__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; }
.hero h1 { margin-bottom: .35em; font-size: clamp(2.1rem, 3.5vw, 3.1rem); }
.hero__linha { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--grafite-2); max-width: 46ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.7rem; }
.hero__selo { margin-top: 1.9rem; display: flex; gap: 2.2rem; flex-wrap: wrap; border-top: 1px solid var(--linha); padding-top: 1.15rem; }
.hero__selo div { font-size: .875rem; color: var(--grafite-2); }
.hero__selo strong { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--grafite); line-height: 1; margin-bottom: .25rem; }
.hero__marca { position: relative; display: flex; justify-content: center; }
.hero__marca img { width: min(100%, 300px); filter: grayscale(1) contrast(1.05); }

/* ---------- Faixa de notícias (carrossel horizontal) ----------
   Conteúdo de TERCEIRO. O fundo areia, as bordas e o crédito no cabeçalho
   existem para que ninguém confunda com o que o escritório escreve. */
.faixa-noticias {
  background: var(--areia-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 1.25rem 0 1.05rem;
}
.faixa-noticias__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.faixa-noticias__titulo {
  margin: 0; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grafite-2);
}
.faixa-noticias__lado { display: flex; align-items: center; gap: 1rem; }
.faixa-noticias__fonte {
  font-size: .74rem; font-weight: 600; color: var(--bronze); text-decoration: none;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.faixa-noticias__fonte:hover { border-bottom-color: var(--bronze); }
.faixa-noticias__nota { margin: .65rem 0 0; font-size: .71rem; color: var(--grafite-3); }

.carrossel__setas { display: flex; gap: .4rem; }
.carrossel__seta {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco);
  color: var(--grafite-2); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .2s, color .2s, opacity .2s;
}
.carrossel__seta:hover:not(:disabled) { border-color: var(--bronze); color: var(--bronze); }
.carrossel__seta:disabled { opacity: .35; cursor: default; }

/* O trilho mostra um número INTEIRO de cartões: a largura de cada um sai da
   divisão da linha, então o último termina rente à borda do conteúdo, sem
   cartão cortado pela metade. O texto e a capa continuam do mesmo tamanho, o
   que muda é só a caixa que os acomoda. */
/* O espaço em cima e embaixo existe para o cartão CABER quando cresce no hover.
   `overflow-x: auto` faz o eixo vertical virar recorte também (regra do CSS:
   com um eixo em auto, o outro deixa de ser visible), então o cartão que sobe
   2px tinha a borda de cima cortada e a sombra aparecia pela metade. As margens
   negativas devolvem o espaço tomado, para a faixa não mudar de altura e
   continuar cabendo na primeira tela. */
.carrossel {
  --cartoes-na-linha: 3;
  --vao-do-carrossel: .9rem;
  display: flex; gap: var(--vao-do-carrossel); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-top: 10px; margin-top: -10px;
  padding-bottom: 14px; margin-bottom: -9px;
  scrollbar-width: none; -ms-overflow-style: none;
}
@media (min-width: 1500px) { .carrossel { --cartoes-na-linha: 4; } }
@media (max-width: 1100px) { .carrossel { --cartoes-na-linha: 2; } }
.carrossel::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carrossel { scroll-behavior: auto; } }
.carrossel:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

.not {
  flex: 0 0 auto; scroll-snap-align: start;
  width: calc(
    (100% - (var(--cartoes-na-linha) - 1) * var(--vao-do-carrossel)) / var(--cartoes-na-linha)
  );
  display: grid; grid-template-columns: 126px 1fr; gap: 1.05rem; align-items: center;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 5px; padding: .85rem;
  text-decoration: none; color: inherit;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.not:hover { border-color: var(--bronze); box-shadow: 0 12px 26px -20px rgba(0,0,0,.45); transform: translateY(-2px); }
/* É <img>: o gradiente do background só aparece se a foto do Migalhas não carregar. */
.not__capa {
  display: block; width: 126px; aspect-ratio: 1; border-radius: 3px; object-fit: cover;
  background: var(--grad-not, linear-gradient(135deg, #595657, #8a6f45)); filter: grayscale(.15);
}
.not__texto { display: grid; gap: .3rem; min-width: 0; }
.not__titulo {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600; line-height: 1.32; color: var(--grafite);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.not:hover .not__titulo { color: var(--bronze); }
.not__resumo {
  font-size: .82rem; line-height: 1.35; color: var(--grafite-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.not__data {
  justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--bronze); border-radius: 3px; padding: .12rem .4rem;
}

/* A abertura tem as medidas do protótipo aprovado, e NÃO encolhe por altura de
   janela. Não precisa: o protótipo carrega no topo uma tarja de aviso ("versão
   de validação") que o site real não tem, e só a ausência dela já sobe a faixa
   de notícias uns 30px. Medido em 1366x768: o primeiro cartão aparece pela
   metade e um pouco mais, que é o convite a rolar sem esconder a faixa.
   Ao mexer na altura do topo, do hero ou dos cartões, conferir isto de novo. */

/* ---------- Áreas ---------- */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.1rem; }
.area {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 6px;
  padding: 1.7rem 1.5rem 1.3rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .65rem;
  transition: border-color .28s, box-shadow .28s, transform .28s;
}
.area:hover { border-color: var(--bronze); box-shadow: 0 16px 34px -22px rgba(0,0,0,.4); transform: translateY(-3px); }
.area__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.area__icone {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(138,111,69,.10); color: var(--bronze); transition: background .28s, color .28s;
}
.area__icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area:hover .area__icone { background: var(--bronze); color: #fff; }
.area__num { font-size: .68rem; letter-spacing: .18em; color: var(--grafite-3); font-weight: 600; }
.area h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.area p { font-size: .9rem; color: var(--grafite-2); margin: 0; flex: 1; }
.area__mais {
  margin-top: .5rem; padding-top: .85rem; border-top: 1px solid var(--linha);
  font-size: .82rem; font-weight: 600; color: var(--bronze); display: flex; align-items: center; gap: .4rem;
}
.area__mais span { transition: transform .28s; }
.area:hover .area__mais span { transform: translateX(4px); }

/* ---------- Quem somos ---------- */
.valores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; margin-top: 3rem; }
.valor h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.valor p { color: #c9c6c5; font-size: .95rem; margin: 0; }

/* ---------- Advogado ---------- */
.advogado { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.advogado__foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; filter: grayscale(.25); }
.advogado__oab { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; }

/* ---------- Portal (teaser) ---------- */
.portal-teaser { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.janela {
  background: #fff; border-radius: 6px; overflow: hidden; color: var(--tinta);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
}
.janela__barra { background: var(--areia-2); padding: .6rem .9rem; display: flex; gap: .35rem; border-bottom: 1px solid var(--linha); }
.janela__barra i { width: 9px; height: 9px; border-radius: 50%; background: #cfcccb; display: block; }
.janela__corpo { padding: 1.4rem; }
.janela__titulo { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; margin-bottom: 1rem; }

/* ---------- Linha do tempo ---------- */
.linha { list-style: none; margin: 0; padding: 0; position: relative; }
.linha::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1px; background: var(--linha); }
.evento { position: relative; padding: 0 0 1.5rem 2.6rem; }
.evento::before {
  content: ''; position: absolute; left: 5px; top: 5px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid var(--grafite-3);
}
.evento--atual::before { border-color: var(--bronze); background: var(--bronze); box-shadow: 0 0 0 4px rgba(138,111,69,.16); }
.evento__data { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; }
.evento__texto { font-size: .98rem; margin: .2rem 0 .35rem; font-weight: 500; }
.evento details { font-size: .85rem; color: var(--grafite-2); }
.evento summary { cursor: pointer; color: var(--bronze); font-weight: 500; }
.evento details p { background: var(--areia); border-left: 2px solid var(--linha); padding: .7rem .9rem; margin: .6rem 0 0; font-size: .82rem; font-family: var(--sans); }

/* ---------- Artigos / notícias ---------- */
.artigos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2.5rem; }
.artigo {
  background: #fff; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: border-color .28s, box-shadow .28s, transform .28s;
}
.artigo:hover { border-color: var(--bronze); box-shadow: 0 16px 34px -22px rgba(0,0,0,.4); transform: translateY(-3px); }
.artigo__capa { height: 8px; background: var(--grad-artigo, linear-gradient(90deg, var(--bronze), var(--grafite))); }
.artigo__corpo { padding: 1.5rem 1.5rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.artigo__meta { display: flex; align-items: center; gap: .7rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; }
.artigo__tag { color: var(--bronze); }
.artigo h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.artigo p { margin: 0; font-size: .9rem; color: var(--grafite-2); flex: 1; }
.artigo__ler { font-size: .82rem; font-weight: 600; color: var(--bronze); display: flex; align-items: center; gap: .4rem; padding-top: .9rem; border-top: 1px solid var(--linha); }
.artigo__ler span { transition: transform .28s; }
.artigo:hover .artigo__ler span { transform: translateX(4px); }

/* ---------- Painel administrativo ---------- */
.painel { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 82px); background: var(--areia); }
.painel__menu { background: #fff; border-right: 1px solid var(--linha); padding: 1.6rem 0; }
.painel__grupo { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; padding: 0 1.5rem; margin: 1.4rem 0 .5rem; }
.painel__grupo:first-child { margin-top: 0; }
.painel__menu a {
  display: flex; align-items: center; gap: .7rem; padding: .62rem 1.5rem; font-size: .92rem;
  color: var(--grafite-2); text-decoration: none; border-left: 3px solid transparent;
}
.painel__menu a:hover { background: var(--areia); color: var(--grafite); }
.painel__menu a[aria-current='true'] { color: var(--grafite); font-weight: 600; border-left-color: var(--bronze); background: var(--areia); }
.painel__menu .pill { margin-left: auto; background: var(--bronze); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 100px; padding: .1rem .45rem; }
.painel__corpo { padding: clamp(1.5rem, 3vw, 2.6rem); min-width: 0; }
.painel__titulo { font-family: var(--serif); font-size: 2rem; margin: 0 0 .2em; }
.painel__sub { color: var(--grafite-2); font-size: .95rem; margin-bottom: 2rem; }

.avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.aviso { background: #fff; border: 1px solid var(--linha); border-left: 3px solid var(--grafite-3); border-radius: 6px; padding: 1.1rem 1.2rem; }
.aviso--alerta { border-left-color: #c0392b; }
.aviso--atencao { border-left-color: #d8b45e; }
.aviso--ok { border-left-color: #4f7d5a; }
.aviso strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--grafite); margin-bottom: .3rem; }
.aviso span { font-size: .86rem; color: var(--grafite-2); }

.bloco { background: #fff; border: 1px solid var(--linha); border-radius: 6px; margin-bottom: 1.8rem; overflow: hidden; }
.bloco__topo { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bloco__topo h3 { margin: 0; font-size: 1.05rem; }
.bloco__nota { font-size: .8rem; color: var(--grafite-3); }
.bloco__scroll { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.tabela th { text-align: left; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; padding: .8rem 1.3rem; border-bottom: 1px solid var(--linha); }
.tabela td { padding: .9rem 1.3rem; border-bottom: 1px solid var(--areia-2); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela__acao { color: var(--bronze); font-weight: 600; text-decoration: none; font-size: .84rem; }
.selo { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 100px; white-space: nowrap; }
.selo--vencido { background: #fbeae8; color: #a5301f; }
.selo--perto { background: #fdf4e0; color: #8a6a1f; }
.selo--ok { background: #eaf2ec; color: #3d6247; }

.conteudo-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linha); }
.conteudo-item { background: #fff; padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.conteudo-item div { min-width: 0; }
.conteudo-item strong { display: block; font-size: .94rem; font-weight: 600; }
.conteudo-item span { font-size: .8rem; color: var(--grafite-3); }

@media (max-width: 860px) {
  .painel { grid-template-columns: 1fr; }
  .painel__menu { border-right: 0; border-bottom: 1px solid var(--linha); padding: 1rem 0; }
  .tabela th:nth-child(3), .tabela td:nth-child(3) { display: none; }
}

/* ---------- Clientes ----------
   Clientes autorizados: marcas coloridas, do jeito que o cliente as usa.
   O destaque no passar do mouse é o próprio logo crescer.

   Duas faixas que andam sozinhas, a de cima para a esquerda e a de baixo
   para a direita, em laço contínuo.

   O laço não tem emenda porque a lista é repetida N vezes dentro da pista
   e a pista anda exatamente a largura de UMA cópia (--passo = -100/N %):
   quando a volta termina, a cópia seguinte está no lugar exato de onde a
   primeira saiu, e o salto de volta ao começo não aparece.

   N é calculado na tela, não fixado aqui. Uma cópia sozinha pode ser mais
   estreita que o monitor, e aí sobraria um vão branco no fim de cada
   volta; a conta que evita isso é (N-1) x largura da cópia >= largura da
   tela, e por isso faixa com poucos logos precisa de mais cópias.

   A velocidade é por LOGO, não por faixa: a duração cresce junto com o
   número de logos, senão a faixa mais cheia andaria mais depressa e as
   duas nunca ficariam no mesmo ritmo. */
.clientes { margin-top: 2.5rem; display: grid; gap: .5rem; }

.clientes__faixa {
  overflow: hidden;
  padding-block: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.clientes__pista {
  --seg-por-logo: 3.6s;
  display: flex; width: max-content; will-change: transform;
  animation: clientes-anda calc(var(--logos-na-faixa) * var(--seg-por-logo)) linear infinite;
}
.clientes__faixa--volta .clientes__pista { animation-direction: reverse; }

@keyframes clientes-anda {
  from { transform: translateX(0); }
  to { transform: translateX(var(--passo)); }
}

/* Parar no passar do mouse é o que deixa o logo ser olhado: sem isso o
   crescimento briga com a faixa andando embaixo do cursor. As duas param
   juntas, porque quem escuta o mouse é o container das duas. */
.clientes:hover .clientes__pista,
.clientes:focus-within .clientes__pista { animation-play-state: paused; }

/* O vão vai no espaço ENTRE os itens e também depois do último: sem essa
   sobra à direita, o último logo de uma cópia encostaria no primeiro da
   cópia seguinte e o ritmo quebraria uma vez por volta. */
.clientes__grupo {
  display: flex; gap: clamp(2rem, 3.5vw, 3.2rem); padding-right: clamp(2rem, 3.5vw, 3.2rem);
}
.clientes__item { flex: 0 0 auto; width: clamp(132px, 13vw, 190px); display: grid; place-items: center; }
.clientes__item img { width: 100%; height: 104px; object-fit: contain; transition: transform .3s ease; }
.clientes__item img:hover { transform: scale(1.35); }

/* Quem pediu menos movimento no sistema recebe o desenho de antes, parado.
   As três camadas do carrossel viram `display: contents`, então elas somem
   da conta do layout e os 15 logos voltam a ser filhos diretos de .clientes,
   numa grade que quebra a linha sozinha. É por isso que aqui não precisa de
   regra por largura de tela: sem faixa e sem pista, sobra só a grade.
   As cópias saem de cena, senão o mesmo logo apareceria três vezes parado. */
@media (prefers-reduced-motion: reduce) {
  .clientes {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 3rem 2.5rem;
  }
  .clientes__faixa, .clientes__pista, .clientes__grupo { display: contents; }
  .clientes__grupo[aria-hidden='true'] { display: none; }
  .clientes__item img { transition: none; }
}
.aviso-conformidade {
  margin-top: 2.5rem; font-size: .82rem; color: var(--grafite-2); background: #fff8e8;
  border-left: 3px solid #d8b45e; padding: .9rem 1.1rem; max-width: 100%;
}

/* ---------- Contato ---------- */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.dados { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.dados li { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; font-size: .95rem; align-items: start; }
.dados span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; padding-top: .25rem; }
.campo { display: block; margin-bottom: 1.1rem; }
.campo span { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .4rem; color: var(--grafite-2); }
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: var(--sans); font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; color: var(--tinta);
}
.campo textarea { min-height: 130px; resize: vertical; }
.nota-form { font-size: .8rem; color: var(--grafite-3); }

/* ---------- Rodapé ---------- */
.rodape { background: #201f1f; color: #b9b6b5; padding: 4.5rem 0 2rem; font-size: .92rem; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 3rem; }
.rodape h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; }
.rodape a { color: #b9b6b5; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape__logo { height: 46px; width: auto; margin-bottom: 1.2rem; }
.rodape__links { display: grid; gap: .5rem; }
.rodape__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* ---------- Widget de acessibilidade ---------- */
.a11y { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.a11y__painel { display: none; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: .5rem; gap: .35rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.3); }
.a11y[data-aberto='true'] .a11y__painel { display: flex; }
.a11y button { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); width: 44px; height: 44px; cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--grafite); }
.a11y__abrir { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.zap { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.zap svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Revelação ----------
   ⚠️ O esconderijo mora atrás de `html.js`, e a classe `js` é escrita por um <script>
   no <head> de cada tela. Sem essa trava, quem entra com JavaScript desligado nunca vê
   áreas, escritório, advogado, clientes nem contato: a página não degrada, ela apaga. */
.rev { transition: opacity .7s ease, transform .7s ease; }
html.js .rev { opacity: 0; transform: translateY(18px); }
html.js .rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rev { opacity: 1; transform: none; } }

/* ---------- Tarja de protótipo ---------- */
.tarja { background: var(--bronze); color: #fff; text-align: center; font-size: .8rem; padding: .5rem 1rem; letter-spacing: .02em; }

/* ---------- Login e portal ---------- */
.login { min-height: calc(100vh - 82px); display: grid; place-items: center; padding: 3rem 1.5rem; background: var(--areia); }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 6px; padding: clamp(2rem, 4vw, 3rem); width: min(100%, 430px); box-shadow: 0 24px 60px -34px rgba(0,0,0,.35); }
.cartao h1 { font-size: 2rem; margin-bottom: .3em; }
.cartao__sub { color: var(--grafite-2); font-size: .95rem; margin-bottom: 2rem; }
.processos { display: grid; gap: 1rem; margin-top: 2rem; }
.processo-card {
  border: 1px solid var(--linha); border-radius: 6px; padding: 1.4rem 1.6rem; background: #fff;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; text-decoration: none; color: inherit;
  transition: border-color .25s, transform .25s;
}
.processo-card:hover { border-color: var(--grafite-3); transform: translateY(-2px); }
.processo-card__num { font-size: .8rem; color: var(--grafite-3); letter-spacing: .04em; }
.etiqueta { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 100px; background: var(--areia-2); color: var(--grafite-2); }
.etiqueta--ativo { background: rgba(138,111,69,.14); color: #6d5735; }
/* ---------- Janela da notícia (resumo sem sair do site) ---------- */
.jn {
  position: relative; border: 0; border-radius: var(--raio); padding: 0;
  max-width: 720px; width: calc(100% - 2.5rem); max-height: 88vh; overflow: hidden;
  background: var(--branco); color: var(--grafite); box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
}
.jn::backdrop { background: rgba(28,26,27,.62); }
/* A caixa rola; o botão de fechar fica parado sobre ela. */
.jn__caixa { padding: 1.8rem; max-height: 88vh; overflow-y: auto; }
.jn__fechar {
  position: absolute; top: .7rem; right: .8rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--branco); color: var(--grafite-2);
  font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.jn__fechar:hover { border-color: var(--bronze); color: var(--bronze); }
.jn__capa { display: block; width: 100%; max-height: 250px; object-fit: cover; border-radius: 4px; margin-bottom: 1.2rem; }
.jn__data {
  display: inline-block; margin: 0 0 .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--bronze); border-radius: 3px; padding: .15rem .45rem;
}
.jn__titulo { margin: 0 0 .8rem; font-family: var(--sans); font-size: 1.35rem; line-height: 1.28; }
.jn__resumo { margin: 0 0 1.2rem; color: var(--grafite-2); font-weight: 500; }
.jn__corpo { margin-bottom: 1.4rem; }
.jn__corpo p { margin: 0 0 .9rem; line-height: 1.65; }
.jn__corpo p:last-child { margin-bottom: 0; }
.jn__fonte { margin: 0 0 1.2rem; font-size: .78rem; color: var(--grafite-3); border-top: 1px solid var(--linha); padding-top: .9rem; }
.jn__ir { width: 100%; justify-content: center; }
@media (max-width: 520px) { .jn__caixa { padding: 1.3rem; } .jn__titulo { font-size: 1.15rem; } }

/* ---------- Mapa (RF-07) ---------- */
.mapa {
  margin-top: 2rem; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; background: var(--areia-2);
}
.mapa iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(.35); }
.mapa__rota {
  display: inline-block; margin-top: .9rem; font-size: .85rem; font-weight: 600;
  color: var(--bronze); text-decoration: none; border-bottom: 1px solid transparent;
}
.mapa__rota:hover { border-bottom-color: var(--bronze); }

.carimbo { font-size: .82rem; color: var(--grafite-2); background: var(--areia); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; display: flex; gap: .6rem; align-items: flex-start; }
.carimbo strong { color: var(--grafite); }
.carimbo__icone { flex: none; display: grid; place-items: center; color: var(--bronze); margin-top: .05rem; }
.carimbo__icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsivo ---------- */
@media (min-width: 1500px) {
  /* Em tela larga o auto-fit abre colunas demais: as 8 áreas viravam 6+2 e os
     3 artigos ficavam espremidos com duas colunas vazias ao lado. */
  .areas { grid-template-columns: repeat(4, 1fr); }
  .artigos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .hero__grade, .advogado, .portal-teaser, .contato, .rodape__grade { grid-template-columns: 1fr; }
  .hero__marca { display: none; }
  .advogado__foto { max-width: 220px; }
}
@media (max-width: 960px) {
  .nav {
    position: absolute; top: 82px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--linha);
    flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem 1.5rem 1.2rem; display: none;
  }
  .nav[data-aberto='true'] { display: flex; }
  .nav a { width: 100%; padding: .8rem 0; border-bottom: 1px solid var(--linha); }
  .hamburguer { display: block; }
}
@media (max-width: 720px) {
  /* O WhatsApp já tem botão flutuante permanente. No celular o topo guarda o acesso do cliente. */
  .topo__zap { display: none; }
  .topo__acoes .btn { padding: .65rem 1rem; font-size: .82rem; }
  .areas { grid-template-columns: repeat(2, 1fr); }
  /* No celular duas faixas de 104px comeriam meia tela: o logo encolhe e a
     seção volta a ter a altura de sempre. */
  .clientes__item img { height: 72px; }
  .clientes__faixa { padding-block: 16px; }
  .valores { grid-template-columns: 1fr; }
  .dados li { grid-template-columns: 1fr; gap: .2rem; }
}
@media (max-width: 480px) {
  /* Item de grade nasce com min-width: auto, então o cartão nunca encolhe
     abaixo do próprio min-content, que aqui é de 184px. Com duas colunas isso
     empurrava a página inteira a partir de ~434px de tela (a 375px a página
     rolava 35px na horizontal). Uma coluna resolve com folga e é o que o resto
     do site já faz no celular: .valores, .contato, .advogado e o rodapé.
     De 481px para cima as duas colunas cabem (cartão de 207px) e ficam. */
  .areas { grid-template-columns: 1fr; }
  /* No celular o cartão acompanha a largura da tela; o dedo arrasta a faixa.
     A miniatura encolhe junto, senão sobra pouco espaço e a manchete corta. */
  .carrossel { --cartoes-na-linha: 1; }
  .not { grid-template-columns: 82px 1fr; gap: .75rem; }
  .not__capa { width: 82px; align-self: start; }
  /* Coluna estreita: manchete longa precisa de uma linha a mais para não cortar no meio. */
  .not__titulo { -webkit-line-clamp: 4; font-size: .89rem; }
  .carrossel__setas { display: none; }
}

/* ============================================================
   Aviso de cookies (RF-12) e espera do mapa (RN-31)
   ============================================================ */
.cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:120;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-radius:12px;
  background:var(--grafite,#373536);color:#f2f1f0;box-shadow:0 12px 34px rgba(0,0,0,.28);
  font-size:.92rem;line-height:1.5}
.cookies[hidden]{display:none!important}
.cookies__texto{flex:1 1 26rem;max-width:62ch}
.cookies__texto a{color:var(--bronze,#b09468);text-decoration:underline}
.cookies__acoes{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies__acoes .btn{white-space:nowrap}
.cookies .btn--linha{border-color:rgba(255,255,255,.5);color:#f2f1f0}

.mapa__espera{margin:0;padding:1.6rem;font-size:.9rem;line-height:1.55;color:#595657;
  background:#efedec;border:1px dashed #c9c5c2;border-radius:8px}

.campo--aceite{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0}
.campo--aceite input{margin-top:.25rem;flex:0 0 auto;width:1.05rem;height:1.05rem}
.campo--aceite span{font-size:.85rem;line-height:1.5;color:#595657}

@media (max-width:640px){
  .cookies{flex-direction:column;align-items:stretch}
  .cookies__acoes .btn{flex:1}
}

/* ---------- Área do Cliente ----------
 * O portal usava a folha do PAINEL até 14/08/2026: barra lateral escura, blocos
 * e listas de definição, ou seja, a cara de uma ferramenta de administrador. O
 * cliente que entra ali não é operador do sistema, é cliente do escritório, e
 * precisa reconhecer o mesmo lugar de onde veio. Daqui para baixo é o que o
 * protótipo já previa, mais o que ele não previu: volume. */

.portal-quem { font-size: .85rem; color: var(--grafite-2); }
.portal-sair { margin: 0; }
.portal-voltar { font-size: .85rem; margin-bottom: 1rem; }
.portal-voltar a { color: var(--grafite-2); text-decoration: none; }
.portal-voltar a:hover { color: var(--bronze); }

.secao__intro { color: var(--grafite-2); max-width: 60ch; }

.portal-cabecalho { padding-bottom: 2rem; }
.portal-coluna { max-width: 820px; }
.portal-titulo-secao { font-size: 1.35rem; margin: 3rem 0 1.2rem; }
.portal-contagem { font-size: .85rem; color: var(--grafite-2); margin: 0 0 1.4rem; }

/* A ficha é grade, e não lista de definição empilhada: o cliente varre com o
 * olho em vez de ler linha a linha. */
.portal-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem 2rem;
  margin: 0 0 1rem; padding: 1.4rem 1.6rem; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.portal-ficha dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-3); font-weight: 600; }
.portal-ficha dd { margin: .3rem 0 0; font-size: .95rem; }

/* ---------- O mês dobrável ----------
 * Um processo real do escritório passa de 800 andamentos. Dobrar por mês é o
 * que faz a página caber num olhar: o mês mais recente abre sozinho e os
 * outros ficam a um clique, dizendo antes quantos andamentos guardam.
 * ⚠️ Dobra por TEMPO, nunca por relevância: escolher o que o cliente precisa
 * ver seria opinar sobre o caso dele, e a RN-10 proíbe. */
.portal-mes { border-bottom: 1px solid var(--linha); }
.portal-mes:first-of-type { border-top: 1px solid var(--linha); }
.portal-mes > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem .2rem; cursor: pointer; list-style: none;
}
.portal-mes > summary::-webkit-details-marker { display: none; }
.portal-mes > summary::after {
  content: '+'; font-size: 1.1rem; color: var(--bronze); flex: none; line-height: 1;
}
.portal-mes[open] > summary::after { content: '−'; }
.portal-mes > summary:hover .portal-mes__nome { color: var(--bronze); }
.portal-mes__nome { font-weight: 600; font-size: 1rem; transition: color .2s; }
.portal-mes__quantos { font-size: .78rem; color: var(--grafite-3); margin-left: auto; }
.portal-mes .linha { padding: .4rem 0 1rem; }

.portal-conversa { align-items: center; background: #fff; border-color: var(--bronze); margin-top: 2.5rem; gap: 1.2rem; }
.portal-conversa > div { flex: 1; }
.portal-conversa span { font-size: .85rem; }
.portal-conversa .btn { flex: none; }
.portal-ressalva { margin-top: 2.5rem; }

@media (max-width: 640px) {
  .portal-quem { display: none; }
  .portal-conversa { flex-direction: column; align-items: stretch; }
  .portal-conversa .btn { width: 100%; }
  .portal-ficha { padding: 1.1rem 1.2rem; }
}

.portal-formulario { max-width: 420px; margin-top: 1.8rem; }
.portal-erro { border-color: #b3261e; }
.portal-erro > div { color: #7f1d1a; }

/* O cabeçalho e o conteúdo precisam ser a MESMA coluna. Na primeira versão o
 * cabeçalho ocupava a largura inteira e o conteúdo era uma coluna estreita
 * centralizada: o título começava numa margem e a ficha em outra, e a página
 * parecia montada por duas pessoas diferentes. */
.portal-cabecalho .wrap { max-width: 820px; }

/* O título aqui não é chamada de vitrine, é o nome de um caso que a pessoa vai
 * ler todo dia. O tamanho da home ocupava duas linhas e empurrava o conteúdo
 * para fora da tela. */
.portal h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.2; }
.portal .secao { padding-block: clamp(2rem, 4vw, 3rem); }

/* No celular, "Como o tribunal registrou" é um `summary` inline de ~20px de
 * altura, e a linha do tempo de um processo real tem centenas deles. Medido em
 * 14/08/2026: 287 alvos abaixo de 32px numa página só. Dedo não acerta isso.
 * Aqui ele ganha área de toque sem virar botão, mantendo o peso visual baixo. */
/* 900px e não 640px: o tablet também é dedo, e ficava de fora do conserto. */
@media (max-width: 900px) {
  .evento summary { display: inline-block; padding: .5rem 0; min-height: 44px; box-sizing: border-box; }
  .evento { padding-bottom: 1.1rem; }
}