/* inicio.css — a vitrine.
 *
 * A página tem UM sistema de cor, e ele não é decorativo: são os cinco níveis
 * de autoridade. Não há acento próprio, não há cor que só enfeite. Se algo
 * está colorido nesta página, aquilo significa um nível — e quem ler a página
 * inteira aprende a ler a saída do produto, que usa as mesmas cinco cores.
 *
 * O drama é gasto num lugar só: a PLACA do herói, grafite, sangrada, onde a
 * mesma recomendação aparece duas vezes. Depois dela a página vira papel e
 * fica quieta. Um argumento não precisa de sete seções gritando.
 */

.lp {
  /* Tipografia própria da vitrine. O produto usa Source Serif + Plex Sans; a
     vitrine tem voz de laudo, e o mono é o que ela tem em comum com ele —
     todo número desta página está em mono, como na saída de verdade. */
  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* A placa é CONSTANTE nos dois temas. É uma chapa sobre a página, como uma
     fotografia impressa: não muda de cor porque o papel em volta mudou. */
  /* As superfícies escuras do okovia, tal e qual: `panel` para a chapa,
     `panel-muted` para os painéis sobre ela, `border` para a régua. */
  --placa: #141917;
  --placa-2: #191F1C;
  --placa-regua: #262E2A;
  --placa-tinta: #EDF3EF;
  --placa-tinta-2: #B7C3BC;
  /* O `muted` deles. Dá 5,8:1 sobre o painel, e é o mínimo aceitável aqui —
     `th` da tabela ("custo por requisição") e a coluna do tier são conteúdo,
     não decoração. Um valor mais fraco recuaria mais e reprovaria em AA. */
  --placa-tinta-3: #8B9C93;

  /* O botão sai da rampa de propósito.
     Sobre a placa a rampa está presa nos valores escuros, e `#fff` sobre o
     `authoritative` escuro (#ADCDBD) dá 1,72:1 — ilegível. Um botão não é um
     nível de autoridade: é interação, e a cor dele é o `accent` do okovia, que
     é exatamente para isso. 6,03:1 com branco. */
  --cta-fundo: #486A59;
  --cta-fundo-hover: #567D69;
  --cta-tinta: #FFFFFF;

  --papel: #F3F5F4;
  --carta: #FFFFFF;
  --regua: #DDE3E0;
  --regua-forte: #A6B0AB;

  background: var(--papel);
  font-family: var(--sans);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp {
    --papel: #0A0C0B;
    --carta: #141917;
    --regua: #262E2A;
    --regua-forte: #536059;
  }
}
:root[data-theme="dark"] .lp {
  --papel: #0A0C0B;
  --carta: #141917;
  --regua: #262E2A;
  --regua-forte: #536059;
}

/* `--surface` e não `#fff`: no tema escuro a seleção fica clara, e texto
   branco sobre ela seria invisível. O par inverte junto com o tema. */
.lp ::selection { background: var(--focus); color: var(--surface); }

/* ── cabeçalho ─────────────────────────────────────────────────────────── */

.lp-topo {
  border-bottom: 1px solid var(--regua);
  background: var(--papel);
  position: sticky; top: 0; z-index: 10;
}
.lp-topo-inner {
  max-width: 1140px; margin: 0 auto; padding: 11px 32px;
  display: flex; align-items: center; gap: 20px;
}
.lp .marca {
  font-family: var(--display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 13px;
  /* Virou link para a raiz. A cor já está declarada acima e vence a de `a` por
     especificidade; o sublinhado, não — ele viria de `a` e passaria por baixo
     do monograma. */
  text-decoration: none;
}
/* O monograma tem painel escuro próprio, constante como a placa — por isso o
   raio combina com o do desenho, e não há versão clara dele.

   O `translateY` é alinhamento ÓPTICO, não matemático: os centros das caixas
   já coincidem, mas a caixa da serifa carrega o espaço do ascendente, e as
   letras visíveis ficam abaixo do centro dela. Sem o ajuste, o logo parece
   flutuar acima do nome — parecia, e a medição dizia "está centrado". */
.lp .logo { width: 42px; height: 42px; border-radius: 9px; display: block;
  transform: translateY(1px); }
.lp-acoes { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lp .botao-entrar {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: 8px 16px; border: 1px solid var(--regua-forte); border-radius: 2px;
  color: var(--ink);
}
.lp .botao-entrar:hover { border-color: var(--auth-authoritative); color: var(--auth-authoritative); }

/* ── a placa ───────────────────────────────────────────────────────────── */

/* Sangra a largura inteira. É a única coisa da página que faz isso, e é o que
   a separa do resto: o que está sobre a placa é a tese; o que está no papel é
   o argumento. */
.placa, .fecho, .amostra {
  /* Os valores de tema escuro, presos. Ver o comentário de `--placa`. */
  --auth-authoritative: #ADCDBD; --auth-measured: #6F9B86;
  --auth-derived: #B5A55A; --auth-estimated: #E0A030; --auth-inferred: #F2685C;
}

.placa {
  background: var(--placa);
  color: var(--placa-tinta);
  border-bottom: 1px solid var(--placa-regua);
  padding: 64px 32px 72px;
}
.placa-inner { max-width: 1140px; margin: 0 auto; }

.placa .eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--auth-measured);
  margin: 0 0 22px;
}
.placa h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 58px); font-weight: 400;
  line-height: 1.06; letter-spacing: -0.022em;
  color: var(--placa-tinta);
  margin: 0 0 14px; max-width: 20ch; text-wrap: balance;
}
/* O itálico aparece UMA vez na página. Gasto aqui porque é a palavra em que a
   frase vira. */
.placa h1 em { font-style: italic; color: #FFFFFF; }

.placa .lead {
  font-size: 16.5px; line-height: 1.6; color: var(--placa-tinta-2);
  max-width: 54ch; margin: 0 0 40px;
}

/* Os dois lados em largura IGUAL. Desigual sugeriria que um deles é o
   principal, e o argumento é a comparação, não um dos lados. */
.comparacao {
  margin: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.lado {
  background: var(--placa-2); border: 1px solid var(--placa-regua);
  border-radius: 2px; padding: 22px 24px 24px;
  display: flex; flex-direction: column;
}
/* O que sobra de altura vai para o FIM do lado magro. O espaço vazio embaixo
   da frase solta é o ponto: os dois lados dizem a mesma coisa, e um deles
   ocupa metade do papel. */
.lado-antes .lado-nota { margin-top: auto; padding-top: 22px; }
.lado-rotulo {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--placa-tinta-3); margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--placa-regua);
}
.lado-antes { background: var(--placa); }
.frase-solta {
  font-family: var(--display); font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.36; color: var(--placa-tinta); margin: 0 0 22px;
}
.lado-nota {
  display: block; font-size: 13.5px; line-height: 1.55;
  color: var(--placa-tinta-2); max-width: 44ch;
}

/* A tabela é o produto. Corpo de leitura, não de rodapé. */
table.numeros { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table.numeros th {
  text-align: left; font-weight: 400; font-size: 13.5px;
  color: var(--placa-tinta-3); padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--placa-regua); white-space: nowrap;
}
table.numeros td {
  padding: 9px 0; border-bottom: 1px solid var(--placa-regua);
  font-family: var(--mono); font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--placa-tinta);
}
table.numeros td.tier {
  text-align: right; font-size: 9.5px; letter-spacing: .12em;
  color: var(--placa-tinta-3); white-space: nowrap;
}
table.numeros tr:last-child th, table.numeros tr:last-child td { border-bottom: 0; }

/* O selo. Grande o bastante para a cor ser lida como cor, e não como sujeira
   na tela — era 6px, e ninguém via que havia cinco delas. */
.lp .auth {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-left: 9px; vertical-align: 1px;
}
.lp .auth[data-a="authoritative"] { background: var(--auth-authoritative); }
.lp .auth[data-a="measured"]      { background: var(--auth-measured); }
.lp .auth[data-a="derived"]       { background: var(--auth-derived); }
.lp .auth[data-a="estimated"]     { background: var(--auth-estimated); }
.lp .auth[data-a="inferred"]      { background: var(--auth-inferred); }

.veredito-caixa {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 13px; line-height: 1.55; color: var(--placa-tinta-2);
  margin: 0; padding-top: 18px; border-top: 1px solid var(--placa-regua);
}
.placa .verd {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--auth-estimated); white-space: nowrap; flex-shrink: 0;
}
.comparacao figcaption {
  grid-column: 1 / -1; font-size: 12.5px; line-height: 1.55;
  color: var(--placa-tinta-2); max-width: 62ch;
  margin-top: 2px; padding-top: 18px; position: relative;
}
/* Régua curta e fixa, como a de nota de rodapé — que é o que esta legenda é.
   Uma régua do tamanho do texto sai com largura acidental e lê como erro. */
.comparacao figcaption::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 96px; height: 1px; background: var(--placa-regua);
}

.placa-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.lp .cta, .lp .cta-secundario {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding: 13px 24px; border-radius: 2px; border: 1px solid transparent;
}
.placa .cta { background: var(--cta-fundo); color: var(--cta-tinta); }
.placa .cta:hover { background: var(--cta-fundo-hover); }
.placa .cta-secundario { border-color: var(--placa-regua); color: var(--placa-tinta-2); }
.placa .cta-secundario:hover { border-color: var(--placa-tinta-3); color: var(--placa-tinta); }

/* ── o papel ───────────────────────────────────────────────────────────── */

/* Cada seção é uma ENTRADA de laudo: um rótulo em mono na calha da esquerda,
   e o conteúdo numa medida de leitura. A calha é o que dá ritmo sem precisar
   de sete tamanhos de título diferentes. */
.entrada { border-bottom: 1px solid var(--regua); }
.entrada-inner {
  max-width: 1140px; margin: 0 auto; padding: 60px 32px;
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 40px;
}
.calha {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-top: 7px;
}
.lp .entrada h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 2.9vw, 33px); line-height: 1.16;
  letter-spacing: -0.015em; margin: 0 0 12px; max-width: 24ch;
  text-wrap: balance; color: var(--ink);
}
.lp .explica {
  font-size: 15.5px; line-height: 1.62; color: var(--ink-soft);
  max-width: 60ch; margin: 0 0 28px;
}

/* ── honestidade, logo depois da tese ──────────────────────────────────── */

/* Sobe para a segunda posição de propósito. Um produto que fala de
   verificabilidade e esconde o próprio estado até a sexta seção está pedindo
   exatamente a confiança que diz não pedir. */
.lista-estado { list-style: none; margin: 0; padding: 0; }
.lista-estado li {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--regua);
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.lista-estado li:last-child { border-bottom: 1px solid var(--regua); }
.lista-estado em {
  font-style: normal; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; padding-top: 4px;
}
.lista-estado li[data-e="pronto"]  em { color: var(--auth-measured); }
.lista-estado li[data-e="parcial"] em { color: var(--auth-estimated); }
.lista-estado li[data-e="falta"]   em { color: var(--auth-inferred); }

/* ── a rampa ───────────────────────────────────────────────────────────── */

/* A barra ENCURTA do topo à base. É informação, não enfeite: diz que os cinco
   estão ordenados, e que a ordem é o que importa. A versão anterior tinha
   cinco linhas idênticas e um ponto de 6px — a palavra "rampa" no título e
   uma lista na tela. */
.rampa-lista { list-style: none; margin: 0 0 26px; padding: 0; }
.rampa-lista li {
  display: grid; grid-template-columns: 120px 128px minmax(0, 1fr);
  align-items: baseline; gap: 18px;
  padding: 12px 0; border-top: 1px solid var(--regua);
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.rampa-lista li:last-child { border-bottom: 1px solid var(--regua); }
.rampa-lista i {
  display: block; height: 5px; border-radius: 1px; align-self: center;
}
.rampa-lista li:nth-child(1) i { width: 100%; }
.rampa-lista li:nth-child(2) i { width: 80%; }
.rampa-lista li:nth-child(3) i { width: 60%; }
.rampa-lista li:nth-child(4) i { width: 40%; }
.rampa-lista li:nth-child(5) i { width: 22%; }
.rampa-lista b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  font-weight: 500; color: var(--ink);
}
.lp .regra {
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
  max-width: 58ch; margin: 0;
  border-left: 2px solid var(--auth-authoritative); padding-left: 16px;
}

/* ── o que ele recusa ──────────────────────────────────────────────────── */

.cartoes { display: grid; gap: 1px; background: var(--regua); }
@media (min-width: 860px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }
.cartao-recusa { background: var(--carta); padding: 22px 22px 24px; }
.lp .cartao-recusa .verd {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  display: block; margin-bottom: 12px;
}
.lp .cartao-recusa .verd[data-v="PROVISIONAL"] { color: var(--auth-estimated); }
.lp .cartao-recusa .verd[data-v="NO_ELIGIBLE_CANDIDATE"] { color: var(--auth-inferred); }
.lp .cartao-recusa .verd[data-v="RECOMMENDED"] { color: var(--auth-derived); }
.cartao-recusa h3 {
  font-family: var(--display); font-weight: 400; font-size: 19px;
  line-height: 1.25; margin: 0 0 9px; color: var(--ink);
}
.cartao-recusa p { font-size: 14px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

/* ── trace e explicação ────────────────────────────────────────────────── */

.duas-colunas { display: grid; gap: 44px; }
@media (min-width: 860px) { .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duas-colunas h2 { font-size: clamp(21px, 2.3vw, 26px); }
.amostra {
  background: var(--placa); border: 1px solid var(--placa-regua); border-radius: 2px;
  padding: 16px 18px; margin: 0; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: var(--placa-tinta-2);
}
.amostra .ok { color: var(--auth-measured); font-weight: 500; }

/* ── pipeline ──────────────────────────────────────────────────────────── */

/* Aqui a numeração é honesta: cinco passos que acontecem NESSA ordem, e a
   ordem é o conteúdo. É a única lista numerada da página. */
.fluxo { list-style: none; counter-reset: p; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--regua); }
@media (min-width: 760px) { .fluxo { grid-template-columns: repeat(5, 1fr); } }
.fluxo li { counter-increment: p; background: var(--carta); padding: 20px 18px 22px; }
.fluxo li::before {
  content: counter(p, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--auth-authoritative); margin-bottom: 12px;
}
.fluxo b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.fluxo span { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

/* ── fecho ─────────────────────────────────────────────────────────────── */

.fecho { background: var(--placa); color: var(--placa-tinta); padding: 68px 32px 74px; }
.fecho-inner { max-width: 1140px; margin: 0 auto; }
.lp .fecho h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14;
  letter-spacing: -0.018em; margin: 0 0 26px; max-width: 20ch;
  text-wrap: balance; color: var(--placa-tinta);
}
.fecho .cta { background: var(--cta-fundo); color: var(--cta-tinta); }
.fecho .cta:hover { background: var(--cta-fundo-hover); }
.fecho .cta-secundario { border-color: var(--placa-regua); color: var(--placa-tinta-2); }
.fecho .cta-secundario:hover { border-color: var(--placa-tinta-3); color: var(--placa-tinta); }
.fecho-botoes { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-rodape { border-top: 1px solid var(--regua); background: var(--papel); }
.lp-rodape .entrada-inner {
  display: block; padding: 26px 32px;
  font-size: 12.5px; color: var(--ink-faint);
}

/* ── telas estreitas ───────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .placa, .fecho { padding-left: 22px; padding-right: 22px; }
  .comparacao { grid-template-columns: minmax(0, 1fr); }
  .entrada-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 44px 22px; }
  .calha { padding-top: 0; }
  .rampa-lista li { grid-template-columns: 84px minmax(0, 1fr); }
  .rampa-lista i { grid-column: 1 / -1; margin-bottom: 6px; }
  .lista-estado li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Em 390px as três colunas da tabela não cabem, e o selo caía numa linha
   sozinho, separado do número que ele qualifica — que é justamente o que a
   página inteira diz para não fazer. A linha vira duas: rótulo em cima, e o
   número com o selo e o tier embaixo, juntos. */
@media (max-width: 580px) {
  table.numeros tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px; padding: 10px 0;
    border-bottom: 1px solid var(--placa-regua);
  }
  table.numeros th, table.numeros td { border: 0; padding: 0; }
  table.numeros th { grid-column: 1 / -1; white-space: normal; }
  table.numeros td.tier { align-self: center; }
  table.numeros tr:last-child { border-bottom: 0; }

  /* Em coluna única não há altura sobrando para empurrar: o `auto` viraria um
     vão fixo, e o vazio deixaria de significar alguma coisa. */
  .lado-antes .lado-nota { margin-top: 0; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp * { transition: none !important; animation: none !important; }
}