/* ===================================================================
   SMNS · Leilões Judiciais — sistema visual
   Epic 396, story 396.3. Cliente: SMNS Advocacia, São José dos Campos.

   A TESE, em uma linha: um leilão judicial é um DOSSIÊ, e a página
   deveria parecer um. Papel branco, margem regrada, número carimbado,
   foto com legenda de prova. Não um blog escuro "premium".

   O que estava errado antes (PR #425) e por quê:
   - escuro de ponta a ponta, sendo que o site do cliente é CLARO. Um
     escritório de advocacia vende confiança, e confiança aqui é branco.
   - zero textura, divisor chapado, um único ritmo de bloco repetido.
     É exatamente o que dá cara de render.
   - o ouro #D6A558 usado em TEXTO sobre branco: 2.1:1, reprova AA.

   As regras que este arquivo aplica:
   1. Branco é o fundo. Escuro é PONTUAÇÃO — hero, bloco de dado, rodapé.
   2. Ouro decora. Quem carrega significado em texto é o --ouro-fundo.
   3. Toda régua é gradiente, nunca linha chapada.
   4. Todo bloco escuro leva grão. É o que tira a cara de render do preto.
   =================================================================== */

/* --- As três vozes -------------------------------------------------
   Newsreader  título    serifa editorial, herda o DNA do logotipo SMNS
   Cabin       corpo     a fonte REAL do site do cliente
   Plex Mono   número    o registro de documento oficial
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&family=Cabin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* tinta e papel */
  --papel:        #FFFFFF;
  --papel-2:      #F7F7F9;
  --papel-3:      #E3E4E8;   /* a faixa cinza do site oficial */
  --tinta:        #141416;
  --tinta-2:      #55555C;
  /* #8A8A93 dava 3,42:1 sobre branco e 2,69:1 sobre a faixa cinza, reprovando
     AA. E ele carrega justamente a LINHA DE FONTE de cada bloco, que é o texto
     mais importante deste site: é o que deixa o leitor conferir a afirmação. */
  --tinta-3:      #65656C;
  --breu:         #111114;   /* o escuro, usado como pontuação */
  --breu-2:       #1B1B20;

  /* ouro */
  --ouro:         #D6A558;   /* oficial. DECORA: régua, filete, ícone   */
  --ouro-fundo:   #8A6A2F;   /* SIGNIFICA: texto e link sobre branco    */
  --ouro-claro:   #E8C88E;   /* sobre breu                              */
  --ouro-veu:     rgba(214,165,88,.14);

  --linha:        #DCDCE2;
  --linha-forte:  #B9B9C2;

  --fonte-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Cabin', Arial, Helvetica, sans-serif;
  --fonte-dado:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --coluna:       690px;
  --coluna-larga: 1080px;
  --respiro:      clamp(1.25rem, 5vw, 2.5rem);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- O grão --------------------------------------------------------
   Só sobre bloco escuro, sempre baixo. Sobre o branco ele suja em vez
   de dar textura, então o papel recebe outra coisa (ver .papel-textura).
   ------------------------------------------------------------------ */
.grao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .05; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- A régua -------------------------------------------------------
   Gradiente, não linha. Abre no ouro no meio e fecha nas pontas. É o
   detalhe de 1px que separa "documento feito" de "div com border-top".
   ------------------------------------------------------------------ */
.regua {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--linha) 90%, transparent) 14%,
    var(--ouro) 46%, var(--ouro) 54%,
    color-mix(in srgb, var(--linha) 90%, transparent) 86%,
    transparent 100%);
}
.regua--curta { max-width: 4.5rem; margin: 0 0 1.4rem; background: var(--ouro); height: 2px; }
.regua--breu { background: linear-gradient(to right,
    transparent, rgba(255,255,255,.10) 16%, var(--ouro) 48%, rgba(255,255,255,.10) 84%, transparent); }

/* ===================================================================
   1. 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 var(--linha);
}
.topo__interno {
  max-width: var(--coluna-larga); margin: 0 auto;
  padding: .85rem var(--respiro);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topo__marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.topo__marca img { height: 34px; width: auto; display: block; }
.topo__logo {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ouro);
  padding: 5px 12px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--tinta);
}
.topo__marca span {
  font-family: var(--fonte-dado); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-3);
  padding-left: .8rem; border-left: 1px solid var(--linha);
}
.topo__nav { display: flex; align-items: center; gap: 1.4rem; }
.topo__nav a {
  font-size: .875rem; font-weight: 600; color: var(--tinta-2);
  text-decoration: none; transition: color .18s ease;
}
.topo__nav a:hover { color: var(--ouro-fundo); }
@media (max-width: 640px) {
  .topo__marca span { display: none; }
  .topo__nav a:not(.botao) { display: none; }
}

/* ===================================================================
   2. O KICKER — rótulo processual, não categoria de blog
   =================================================================== */
.kicker {
  font-family: var(--fonte-dado);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro-fundo);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--ouro-veu); }
.kicker--breu { color: var(--ouro-claro); }
.kicker--breu::after { background: rgba(214,165,88,.28); }

/* ===================================================================
   3. HERO — o único lugar onde o escuro toma a tela inteira
   =================================================================== */
.hero {
  position: relative; isolation: isolate;
  background: var(--breu); color: #F2F2F4;
  padding: clamp(4rem, 11vw, 7.5rem) var(--respiro) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}
.hero__fundo {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: .46; filter: grayscale(.28) contrast(1.06) saturate(.9);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(72% 62% at 22% 8%, rgba(214,165,88,.16), transparent 68%),
    linear-gradient(to bottom, rgba(17,17,20,.50) 0%, rgba(17,17,20,.84) 58%, var(--breu) 100%);
}
.hero__interno { position: relative; z-index: 2; max-width: var(--coluna-larga); margin: 0 auto; }
.hero h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 1.3rem; max-width: 20ch; color: #FFF;
}
.hero__lead {
  font-size: clamp(1.05rem, 1.9vw, 1.25rem); line-height: 1.65;
  color: rgba(255,255,255,.76); max-width: 56ch; margin: 0 0 2rem;
}
.hero--post { padding-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.hero--post h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); max-width: 24ch; }

/* ===================================================================
   4. ARTIGO — a coluna de leitura, com a margem regrada do dossiê
   =================================================================== */
.artigo {
  max-width: var(--coluna); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--respiro) 0;
  position: relative;
}
/* o filete da margem esquerda: é o que dá cara de documento encadernado.
   some abaixo de 900px, onde não há margem para ele viver. */
@media (min-width: 900px) {
  .artigo::before {
    content: ""; position: absolute; left: -1.75rem; top: clamp(2.5rem, 6vw, 4rem); bottom: 3rem;
    width: 1px; background: linear-gradient(to bottom, var(--ouro-veu), var(--linha) 12%, var(--linha) 88%, transparent);
  }
}
/* O ritmo vertical. Precisa de .artigo na frente do .secao porque
   `.artigo p { margin: 0 }` tem especificidade maior que `.secao > * + *`,
   e sem isso os parágrafos dentro de uma seção colam uns nos outros. */
.artigo > * + *, .artigo .secao > * + * { margin-top: 1.35rem; }
.secao { margin-top: 2.6rem; }

.artigo p { margin: 0; color: var(--tinta); }
.artigo p.lead {
  font-size: 1.2rem; line-height: 1.6; color: var(--tinta-2);
  border-left: 2px solid var(--ouro); padding-left: 1.1rem;
}
.artigo strong { font-weight: 700; color: var(--tinta); }

.artigo h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 3vw, 2.05rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -.015em;
  margin: 3.2rem 0 .35rem;
}
.artigo h2 + .sub { margin-top: 0; color: var(--tinta-3); font-size: .98rem; }
.artigo h3 {
  font-family: var(--fonte-corpo); font-size: 1.15rem; font-weight: 700;
  margin: 2.2rem 0 .5rem; letter-spacing: -.005em;
}

/* a espinha numerada: 01, 02, 03 na margem. estrutura que se sente. */
.secao { position: relative; counter-increment: secao; }
.secao > h2::before {
  content: counter(secao, decimal-leading-zero);
  font-family: var(--fonte-dado); font-size: .7rem; font-weight: 500;
  color: var(--ouro-fundo); letter-spacing: .1em;
  display: block; margin-bottom: .55rem;
}
.artigo { counter-reset: secao; }

.artigo a { color: var(--ouro-fundo); text-decoration: none; border-bottom: 1px solid var(--ouro-veu); transition: border-color .18s ease; }
.artigo a:hover { border-bottom-color: var(--ouro); }

.artigo ul, .artigo ol { margin: 0; padding-left: 1.3rem; }
.artigo li + li { margin-top: .6rem; }
.artigo li::marker { color: var(--ouro); }

/* ===================================================================
   5. O BLOCO DE DADO — escuro, carimbado, o oposto de um card
   =================================================================== */
.dados {
  position: relative; isolation: isolate;
  background: var(--breu); color: #EFEFF2;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  margin: 2.6rem 0;
}
.dados__grade { display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); position: relative; z-index: 2; }
.dado__valor {
  font-family: var(--fonte-dado); font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem); line-height: 1.25; letter-spacing: -.02em;
  overflow-wrap: anywhere;
  color: var(--ouro-claro); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: .5rem;
}
.dado__rotulo {
  font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.62);
  display: block; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.12);
}
.dados__fonte {
  position: relative; z-index: 2;
  margin: 1.6rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--fonte-dado); font-size: .72rem; line-height: 1.6;
  color: rgba(255,255,255,.48);
}
.dados__fonte a { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.2); }

/* ===================================================================
   6. SUMÁRIO EXECUTIVO e DESTAQUE — no papel, não no breu
   =================================================================== */
.sumario {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro);
  padding: 1.5rem 1.6rem; margin: 2.4rem 0;
}
.sumario h2, .sumario h3 { margin: 0 0 .9rem; font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.sumario ul { margin: 0; padding-left: 1.15rem; }
.sumario li { font-size: .98rem; }

.destaque {
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 1.5rem 0; margin: 2.6rem 0;
  font-family: var(--fonte-titulo); font-size: 1.3rem; line-height: 1.45;
  font-style: italic; color: var(--tinta);
}
.destaque cite {
  display: block; margin-top: .9rem;
  font-family: var(--fonte-dado); font-style: normal;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}

/* ===================================================================
   7. TABELA — com rolagem PRÓPRIA. o bug do PR #425 era isto.
   =================================================================== */
.tabela-rolo { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--linha); }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.tabela caption {
  text-align: left; padding-bottom: .8rem;
  font-family: var(--fonte-dado); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tabela th {
  text-align: left; padding: .7rem .9rem .7rem 0;
  font-family: var(--fonte-dado); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 2px solid var(--tinta); white-space: nowrap;
}
.tabela td { padding: .85rem .9rem .85rem 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }
.tabela .cifra {
  font-family: var(--fonte-dado); font-variant-numeric: tabular-nums;
  color: var(--ouro-fundo); font-weight: 500; white-space: nowrap;
}
@media (max-width: 560px) { .tabela { font-size: .88rem; } }

/* ===================================================================
   8. PROVA VISUAL — foto do edital é DOCUMENTO, e a moldura diz isso
   =================================================================== */
.prova { margin: 2.6rem 0; }
.prova img { width: 100%; height: auto; display: block; background: var(--papel-3); }
.prova figcaption {
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
  padding: .75rem 0 0; margin-top: .75rem;
  border-top: 1px solid var(--linha);
  font-size: .85rem; line-height: 1.5; color: var(--tinta-2);
}
.prova__credito {
  font-family: var(--fonte-dado); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3); white-space: nowrap;
}
.prova--larga { max-width: var(--coluna-larga); margin-left: 50%; transform: translateX(-50%); width: 92vw; }
@media (max-width: 760px) { .prova--larga { width: 100%; margin-left: 0; transform: none; } }

/* Galeria de prova: grade que não vira mosaico de banco de imagem.
   Sai da coluna de leitura porque oito fotos em duas colunas viram uma
   rolagem de dois metros; em quatro, viram uma prancha de contato. */
.provas {
  display: grid; gap: .7rem; margin: 2.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  max-width: var(--coluna-larga); width: 92vw;
  margin-left: 50%; transform: translateX(-50%);
}
.provas figure { margin: 0; }
/* height:auto é obrigatório: o atributo height="507" do <img> vira dica de
   apresentação e ANULA o aspect-ratio, e a foto sai retrato numa grade 3:2. */
.provas img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
@media (max-width: 1140px) { .provas { width: 100%; max-width: none; margin-left: 0; transform: none; } }
.provas figcaption {
  padding-top: .55rem; font-family: var(--fonte-dado);
  font-size: .66rem; letter-spacing: .06em; line-height: 1.5; color: var(--tinta-3);
}

/* ===================================================================
   9. CTA
   =================================================================== */
.botao {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem; border: 0; cursor: pointer;
  background: var(--ouro); color: #14100A;
  font-family: var(--fonte-corpo); font-size: .95rem; font-weight: 700;
  text-decoration: none; transition: background .18s ease, transform .18s ease;
}
.botao:hover { background: #E4B76E; transform: translateY(-1px); }
.botao--vazado {
  background: transparent; color: var(--ouro-claro);
  box-shadow: inset 0 0 0 1px rgba(214,165,88,.5);
}
.botao--vazado:hover { background: rgba(214,165,88,.12); }
.botao--claro { box-shadow: inset 0 0 0 1px var(--linha-forte); background: transparent; color: var(--tinta); }
.botao--claro:hover { background: var(--papel-2); }

.convite {
  position: relative; isolation: isolate;
  background: var(--breu); color: #EFEFF2;
  padding: clamp(2.2rem, 5vw, 3.2rem); margin: 3.5rem 0 0;
}
/* alinha com a coluna de leitura, e não com a borda da página */
.convite__interno { position: relative; z-index: 2; max-width: var(--coluna-larga); margin: 0 auto; }
.convite__interno > * { max-width: 52ch; }
.convite h2 { font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 600; line-height: 1.22; margin: 0 0 .8rem; color: #FFF; }
.convite p { color: rgba(255,255,255,.72); margin: 0 0 1.6rem; font-size: 1rem; }
.convite__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ===================================================================
   10. RODAPÉ e o aviso da OAB
   =================================================================== */
.rodape { background: var(--papel-2); border-top: 1px solid var(--linha); margin-top: 4rem; }
.rodape__interno { max-width: var(--coluna-larga); margin: 0 auto; padding: 2.6rem var(--respiro); }
.rodape__grade { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.rodape img { height: 40px; width: auto; display: block; margin-bottom: 1rem; }
.rodape h2 { font-family: var(--fonte-dado); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .8rem; font-weight: 600; }
.rodape p, .rodape li { font-size: .9rem; line-height: 1.65; color: var(--tinta-2); margin: 0; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li + li { margin-top: .45rem; }
.rodape a { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid var(--linha); }
.rodape a:hover { color: var(--ouro-fundo); }

.aviso {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linha);
  font-size: .8rem; line-height: 1.65; color: var(--tinta-3); max-width: 78ch;
}
.aviso strong { color: var(--tinta-2); }

/* ===================================================================
   11. FOCO, MOVIMENTO E IMPRESSÃO
   =================================================================== */
:focus-visible { outline: 2px solid var(--ouro-fundo); outline-offset: 3px; }
.pula-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--breu); color: #FFF; padding: .75rem 1.25rem; z-index: 100;
}
.pula-para-conteudo:focus { left: var(--respiro); top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================================
   12. O ÍNDICE DE ARTIGOS
   Cartão que não parece cartão: sem sombra, sem raio, sem imagem de
   capa. O que separa um do outro é uma régua e um número, do mesmo
   jeito que um sumário de peça processual separa os tópicos.
   =================================================================== */
.lista-artigos { list-style: none; margin: 0; padding: 0; }
.cartao { border-top: 1px solid var(--linha); }
.cartao:last-child { border-bottom: 1px solid var(--linha); }
.cartao > a {
  display: block; padding: 1.6rem 0 1.7rem;
  text-decoration: none; color: inherit; border: 0;
  position: relative; transition: padding-left .25s ease;
}
.cartao > a::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--ouro); transition: width .3s ease;
}
.cartao > a:hover::before { width: 3.5rem; }
@media (min-width: 720px) { .cartao > a:hover { padding-left: .7rem; } }

.cartao__kicker {
  display: block; margin-bottom: .55rem;
  font-family: var(--fonte-dado); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-fundo);
}
.cartao h3 {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.28;
  letter-spacing: -.012em; margin: 0 0 .5rem; color: var(--tinta);
  max-width: 32ch;
}
.cartao p { margin: 0; font-size: .97rem; color: var(--tinta-2); max-width: 62ch; }
.cartao > a::after {
  content: "Ler →"; display: inline-block; margin-top: .85rem;
  font-family: var(--fonte-dado); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ouro-fundo);
}

/* --- volta ao índice, no topo do post ----------------------------- */
.voltar {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fonte-dado); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,.62); margin-bottom: 1.6rem;
}
.voltar:hover { color: var(--ouro-claro); }

/* --- continue lendo, no pé do post -------------------------------- */
.adiante { margin: 3.5rem 0 0; }
.adiante > h2 {
  font-family: var(--fonte-dado); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
  margin: 0 0 .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linha);
}

/* ===================================================================
   13. O CASO — onde o texto aterrissa no lote real
   Papel levemente cinza, filete de ouro à esquerda e um rótulo mono.
   Não é "caixa de destaque": é a nota de rodapé virada bloco, e por
   isso carrega SEMPRE a fonte junto.
   =================================================================== */
.caso {
  background: var(--papel-2);
  border: 1px solid var(--linha); border-left: 3px solid var(--ouro);
  padding: 1.5rem 1.6rem; margin: 2.6rem 0;
}
.caso__rotulo {
  display: block; margin-bottom: .8rem;
  font-family: var(--fonte-dado); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-fundo);
}
.artigo .caso > p { margin: 0; font-size: 1rem; }
.artigo .caso > p + p { margin-top: .9rem; }
.caso__fonte {
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--linha);
  font-family: var(--fonte-dado); font-size: .7rem; line-height: 1.65; color: var(--tinta-3);
}
.artigo .caso__fonte { font-size: .7rem; }

/* ===================================================================
   14. LINHA DO TEMPO — três momentos, e o vício mora no primeiro
   =================================================================== */
.linha-tempo { margin: 2.4rem 0; border-left: 1px solid var(--linha); padding-left: 1.6rem; }
.linha-tempo > div { position: relative; }
.linha-tempo > div + div { margin-top: 1.8rem; }
.linha-tempo > div::before {
  content: ""; position: absolute; left: calc(-1.6rem - 5px); top: .45rem;
  width: 9px; height: 9px; background: var(--ouro); border: 2px solid var(--papel);
}
.linha-tempo__momento {
  display: block; margin-bottom: .45rem;
  font-family: var(--fonte-dado); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
}
.artigo .linha-tempo p { margin: 0; font-size: 1rem; color: var(--tinta-2); }

/* ===================================================================
   15. CTA no meio do texto — uma linha, não um banner
   =================================================================== */
.cta-linha {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 1.1rem 0; margin: 2.4rem 0;
}
.artigo .cta-linha p { margin: 0; flex: 1 1 22ch; font-size: .98rem; color: var(--tinta-2); }
.cta-linha a {
  font-family: var(--fonte-dado); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ouro-fundo); text-decoration: none; border-bottom: 1px solid var(--ouro); white-space: nowrap;
}

/* ===================================================================
   16. O NÚMERO SOLTO — um dado que precisa parar a leitura
   =================================================================== */
.cifra-solta {
  display: grid; gap: .2rem 1.4rem; align-items: baseline;
  grid-template-columns: auto 1fr; margin: 2.2rem 0;
  padding: 1.2rem 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linha);
}
.cifra-solta b {
  font-family: var(--fonte-dado); font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1;
  color: var(--ouro-fundo); font-variant-numeric: tabular-nums;
}
.cifra-solta span { font-size: .95rem; line-height: 1.55; color: var(--tinta-2); }
.cifra-solta small { grid-column: 1 / -1; margin-top: .6rem; font-family: var(--fonte-dado); font-size: .68rem; color: var(--tinta-3); line-height: 1.6; }
@media (max-width: 560px) { .cifra-solta { grid-template-columns: 1fr; } }

/* ===================================================================
   17. SIMULAÇÃO — e por que ela não pode parecer .prova
   A página de possibilidades mostra imagem GERADA sobre a foto do
   edital. Se ela usar a mesma moldura da prova documental, o leitor
   sai achando que viu o imóvel. Num site de advogado isso não é
   deslize de design, é afirmação falsa sobre um bem em leilão.
   Por isso a moldura muda em quatro coisas ao mesmo tempo: borda
   tracejada, tarja de aviso ANTES da imagem, rótulo que não é ouro
   (ouro aqui significa documento oficial) e a palavra SIMULAÇÃO
   carimbada sobre a própria imagem, que sobrevive a print e a
   republicação fora daqui.
   =================================================================== */
.simulacao { margin: 2.6rem 0; }
.simulacao__aviso {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--papel-3); border: 1px dashed var(--linha-forte); border-bottom: 0;
  padding: .7rem .9rem;
  font-family: var(--fonte-dado); font-size: .68rem; line-height: 1.55;
  letter-spacing: .04em; color: var(--tinta-2);
}
.simulacao__aviso b {
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); border-bottom: 2px solid var(--tinta-3); padding-bottom: 1px;
}
.simulacao__quadro { position: relative; border: 1px dashed var(--linha-forte); border-top: 0; padding: .55rem; background: var(--papel-2); }
.simulacao__quadro img { width: 100%; height: auto; display: block; filter: saturate(.92); }
.simulacao__quadro::after {
  content: "SIMULAÇÃO"; position: absolute; right: 1.1rem; bottom: 1.1rem;
  font-family: var(--fonte-dado); font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; color: #FFF;
  background: rgba(17,17,20,.78); padding: .4rem .7rem;
}
.simulacao figcaption {
  padding-top: .75rem; margin-top: .2rem;
  font-size: .88rem; line-height: 1.6; color: var(--tinta-2);
}
.simulacao figcaption b { color: var(--tinta); font-weight: 600; }
.simulacao--larga { max-width: var(--coluna-larga); width: 92vw; margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 1140px) { .simulacao--larga { width: 100%; margin-left: 0; transform: none; } }

/* ===================================================================
   18. O QUE PODE E O QUE NÃO PODE — duas colunas que se opõem
   =================================================================== */
.pode-nao { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); background: var(--linha); border: 1px solid var(--linha); margin: 2.4rem 0; }
.pode-nao > div { background: var(--papel); padding: 1.3rem 1.4rem; }
.pode-nao h3 {
  margin: 0 0 .9rem; font-family: var(--fonte-dado); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.pode-nao > .pode h3 { color: var(--ouro-fundo); }
.pode-nao > .nao h3 { color: var(--tinta); }
.pode-nao > .nao { background: var(--papel-2); }
.artigo .pode-nao ul { margin: 0; padding-left: 1.1rem; }
.artigo .pode-nao li { font-size: .95rem; line-height: 1.6; }
.artigo .pode-nao li + li { margin-top: .7rem; }