/* vitrine-paginas.css — o CSS das PÁGINAS de vitrine (landing, planos,
 * como funciona), extraído do <style> do index.html em 2026-08-28.
 *
 * POR QUE FOI EXTRAÍDO: a TASK-049 pede que /planos e /como-funciona sejam
 * montadas COM OS MESMOS componentes visuais da landing. Com o CSS dentro do
 * <style> do index, a única forma de fazer isso seria copiar ~180 linhas em
 * cada página — três cópias que divergem no primeiro ajuste. Nada aqui foi
 * redesenhado: é o mesmo arquivo, no mesmo lugar da cascata (depois do
 * vitrine.css, que continua sendo a régua de tokens).
 *
 * A REGRA DA AMANDA (27/08): o design fica EXATAMENTE como está. Provado por
 * screenshot antes/depois da extração — 4078px de altura no desktop nos dois.
 */
/* Daqui para baixo é só o que é EXCLUSIVO da landing: a topbar fixa, o herói,
   a linha do tempo, a grade de módulos e o mapa do mercado. Nada de token —
   token que só uma página usa vira token que ninguém mantém. */

/* A barra fixa cobriria o topo de qualquer âncora (#mercado, #lista). */
html { scroll-padding-top: 57px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* 1 · TOPBAR ─────────────────────────────────────────────────────────── */
/* Fixa e translúcida: a marca e o "Entrar" acompanham a rolagem, que é o que
   a referência passou a fazer. O blur existe para o texto da página não
   atravessar a barra de forma ilegível. */
.barra-topo-fixa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: rgba(8,8,8,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 0.8px solid var(--linha);
}
.topo { display: flex; align-items: center; justify-content: space-between; height: 57px; }
.topo a.entrar { font-family: var(--c); font-size: 14px; font-weight: 400; color: var(--fraco); }
.topo a.entrar:hover { color: var(--texto); }
/* MENU SUPERIOR (TASK-049): Produto · Como funciona · Planos · Entrar. Não é
   componente novo — são os mesmos `a.entrar` que já existiam, agrupados. A
   página atual fica marcada com `.on`, para a pessoa saber onde está sem ter
   que ler a URL. */
.topo nav { display: flex; align-items: center; gap: 28px; }
.topo nav a.entrar.on { color: var(--texto); }
/* A barra é fixa, então o conteúdo precisa começar abaixo dela. */
body { padding-top: 57px; }

/* 2 · HERÓI ──────────────────────────────────────────────────────────── */
.heroi { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 80px; padding: 96px 0 120px; align-items: start; }
.heroi h1 {
  font-family: var(--t); font-weight: 700; font-size: 96px; line-height: 96px;
  letter-spacing: -0.025em; margin: 24px 0 32px; max-width: 14ch;
}
.heroi h1 span { color: var(--ouro); }
.heroi p { color: var(--medio); max-width: 46ch; margin: 0 0 40px; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Pilha de métricas: número grande em cima, rótulo mono embaixo. */
.metricas { display: flex; flex-direction: column; gap: 40px; padding-top: 12px; }
.metrica b {
  display: block; font-family: var(--t); font-weight: 700; font-size: 30px;
  line-height: 34px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.metrica .mono { margin-top: 8px; display: block; }

/* FAIXAS DE FUNDO (handoff painel14, 10/08) ──────────────────────────────
   A página alterna preto → branco → preto → branco → preto. A alternância
   não é enfeite: ela marca onde o assunto muda. As duas faixas claras são as
   que EXPLICAM (onde a Leiloar entra, o mapa do mercado); as escuras são a
   marca falando (herói, esteira, convite).

   A faixa clara não repinta cada elemento: ela REDEFINE três tokens. Como
   todo o resto da página já lê `--medio`, `--fraco` e `--linha`, títulos,
   leads, filetes e trilhas de barra viram junto — sem uma regra por
   componente, e sem risco de esquecer uma.

   Sobre contraste: rgba(8,8,8,.75) sobre branco dá 12,6:1 e rgba(8,8,8,.6)
   dá 8,3:1 — os dois passam AA folgado, ao contrário do que aconteceria se
   eu só invertesse o alfa dos tokens escuros. */
.faixa--clara {
  background: #FFFFFF; color: var(--preto);
  --medio: rgba(8,8,8,.75);
  --fraco: rgba(8,8,8,.6);
  --linha: rgba(8,8,8,.12);
}
/* A trilha da barra é mais fraca que o filete: ela é fundo de dado, não
   divisória. Vale nas duas faixas claras (funil e ranking). */
.faixa--clara .barra-t, .faixa--clara .rank-b { background: rgba(8,8,8,.1); }
/* Sem filete no topo da faixa: a própria troca de fundo já separa as seções,
   e o filete somado à troca vira duas divisórias para o mesmo corte. */
.faixa--clara .secao { border-top: none; }

/* SEÇÕES ─────────────────────────────────────────────────────────────── */
.secao { padding: 96px 0; border-top: 0.8px solid var(--linha); }
.secao h2 {
  font-family: var(--t); font-weight: 700; font-size: 36px; line-height: 45px;
  letter-spacing: -0.02em; margin: 20px 0 0; max-width: 22ch;
}
.secao p.lead { color: var(--medio); max-width: 52ch; margin: 24px 0 0; }

/* 3 · LINHA DO TEMPO ─────────────────────────────────────────────────── */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: var(--linha); }
.tl-b { background: var(--preto); padding: 28px 24px 32px; min-height: 168px; position: relative; }
.tl-b h3 { font-family: var(--t); font-weight: 700; font-size: 20px; margin: 12px 0 8px; letter-spacing: -0.01em; }
.tl-b p { font-size: 14px; line-height: 21px; color: var(--medio); margin: 0; }
/* AS QUATRO ETAPAS EM BLOCOS SÓLIDOS (handoff painel14). Antes eram quatro
   retângulos pretos com um dourado no terceiro; agora cada degrau tem a sua
   cor, e a sequência lida de uma vez conta a história: pedra (penhora) →
   ouro velho (avaliação) → dourado (nomeação, a janela) → verde (edital,
   quando já é tarde). Sobre faixa branca, o bloco preto sumiria.
   Cada cor traz o seu par de texto — é o mesmo princípio do --sobre-ouro. */
.tl-b--penhora  { background: #5C554B; color: var(--texto); }
.tl-b--aval     { background: #B8860B; color: var(--preto); }
.tl-b--aqui     { background: var(--ouro); color: var(--preto); }
.tl-b--edital   { background: #2F6B4F; color: var(--texto); }
/* ALFAS SUBIDOS EM RELAÇÃO AO PROTÓTIPO, por medição. Os valores do desenho
   (.7 no mono, .8 no texto, .6/.75 nos blocos claros) reprovam AA sobre
   fundos saturados: o mono do Edital dava 3,53:1 e o da Avaliação 3,32:1,
   com 12px. Fundo colorido come contraste muito mais rápido que preto ou
   branco, e o desenho não tinha como saber disso sem medir.
   O README do handoff lista "tokens de contraste AA" entre o que NÃO se
   mexe — subir o alfa é o que preserva a regra, não o que a contraria. */
.tl-b--penhora .mono, .tl-b--edital .mono { color: rgba(240,237,232,.92); }
.tl-b--penhora p,     .tl-b--edital p     { color: rgba(240,237,232,.95); }
.tl-b--aval .mono, .tl-b--aqui .mono { color: rgba(8,8,8,.82); }
.tl-b--aval p,     .tl-b--aqui p     { color: rgba(8,8,8,.88); }
/* Dentro da faixa clara o vão de 1px deixa passar o branco, separando os
   quatro blocos saturados sem desenhar um filete por cima deles. */
.faixa--clara .tl { background: transparent; }
.tl-etq { position: absolute; left: 24px; bottom: 20px; font-family: var(--m); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--preto); font-weight: 500; }

/* 4 · MÓDULOS ────────────────────────────────────────────────────────── */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; background: var(--linha); }
.mod { background: var(--preto); padding: 32px 28px 36px; }
.mod h3 { font-family: var(--t); font-weight: 700; font-size: 20px; margin: 14px 0 10px; letter-spacing: -0.01em; }
.mod p { font-size: 14px; line-height: 21px; color: var(--medio); margin: 0; }

/* 5 · MERCADO ────────────────────────────────────────────────────────── */
.mercado { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 96px; align-items: start; }
.barras { padding-top: 12px; }
.barra + .barra { margin-top: 32px; }
.barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.barra-n { font-family: var(--t); font-weight: 700; font-size: 30px; line-height: 34px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.barra-t { height: 2px; background: var(--linha); margin-top: 14px; }
.barra-t span { display: block; height: 100%; background: var(--ouro); }
.barra-nota { font-size: 14px; line-height: 21px; color: var(--fraco); margin-top: 10px; }

.rank { margin-top: 72px; border-top: 0.8px solid var(--linha); padding-top: 32px; }
.rank-l { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 0.8px solid var(--linha); font-variant-numeric: tabular-nums; }
.rank-uf { font-family: var(--t); font-weight: 700; font-size: 20px; width: 3ch; }
/* Bandeirinha do estado: mesmo componente do ranking da Inteligência de
   Mercado (pedido explícito da Amanda). Sem raio, como todo o resto da
   vitrine — no produto ela tem `--raio-sm`. Se o CDN não responder, o `img`
   some e a linha continua legível: bandeira é reforço, não informação. */
.rank-bandeira {
  width: 20px; height: 14px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 0.8px var(--linha);
}
.rank-b { flex: 1; height: 2px; background: var(--linha); }
.rank-b span { display: block; height: 100%; background: var(--ouro); }
.rank-n { font-size: 14px; color: var(--medio); width: 6ch; text-align: right; }
/* Nome de leiloeiro NUNCA legível na página pública (decisão da Amanda,
   04/08). O que está borrado é um PLACEHOLDER — nenhum nome real trafega. */
.rank-x { filter: blur(4px); user-select: none; font-size: 14px; color: var(--fraco); width: 14ch; }
.nota { font-family: var(--m); font-size: 12px; line-height: 20px; color: var(--fraco); margin-top: 28px; letter-spacing: 0.02em; }

/* 6 · FORMULÁRIO ─────────────────────────────────────────────────────── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; margin-top: 40px; }
.form .full { grid-column: 1 / -1; }
/* Campos, botões e avisos vêm de vitrine.css. Aqui só o que é da landing. */
.form .btn--ouro { width: 100%; justify-content: center; padding: 14px 24px; }
.aviso { display: none; padding: 16px; border: 0.8px solid var(--linha); margin-top: 32px; font-size: 14px; line-height: 21px; }
.aviso.on { display: block; }
.aviso--ok { border-color: var(--ouro); color: var(--ouro); }
.aviso--erro { border-color: rgba(220,120,90,.5); color: var(--erro); }

/* 7 · RODAPÉ ─────────────────────────────────────────────────────────── */
/* 7 · PASSOS CLICÁVEIS (TASK-049, /como-funciona) ──────────────────────────
   O único componente NOVO desta task, e só porque ela pede passos clicáveis
   explicitamente. Sem framework e sem JS: `<details>` nativo, que já vem com
   teclado, leitor de tela e o estado aberto/fechado prontos.

   Visualmente é o `.mod` da grade de módulos virado em linha: mesmo fundo,
   mesmo filete de 1px como separador, mesma escada tipográfica. Não é um
   desenho novo — é o mesmo bloco, empilhado. */
.passos { margin-top: 56px; border-top: 0.8px solid var(--linha); }
.passo { border-bottom: 0.8px solid var(--linha); }
.passo > summary {
  display: flex; align-items: baseline; gap: 20px; padding: 26px 0;
  cursor: pointer; list-style: none;
}
/* O triângulo padrão do <details> muda de forma entre navegadores; sai, e o
   sinal de estado vira o `+ / −` da direita, que é o mesmo em todo lugar. */
.passo > summary::-webkit-details-marker { display: none; }
.passo > summary::marker { content: ''; }
.passo-n { font-family: var(--m); font-size: 12px; letter-spacing: 0.12em; color: var(--ouro); flex-shrink: 0; padding-top: 4px; }
.passo-t { font-family: var(--t); font-weight: 700; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; flex: 1; }
.passo-mais { font-family: var(--m); font-size: 18px; color: var(--fraco); flex-shrink: 0; }
.passo[open] .passo-mais { color: var(--ouro); }
.passo > summary:hover .passo-mais { color: var(--texto); }
.passo-corpo { padding: 0 0 30px 52px; max-width: 62ch; }
.passo-corpo p { color: var(--medio); margin: 0 0 14px; }
.passo-corpo p:last-child { margin-bottom: 0; }
@media (max-width: 680px) {
  .passo-t { font-size: 19px; line-height: 26px; }
  .passo-corpo { padding-left: 0; }
}

.rodape { border-top: 0.8px solid var(--linha); padding: 40px 0 56px; display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.rodape a { color: var(--fraco); font-size: 14px; }
.rodape a:hover { color: var(--texto); }
.rodape .marca { color: var(--texto); }

@media (max-width: 1000px) {
  .heroi { grid-template-columns: 1fr; gap: 56px; padding: 64px 0 80px; }
  .heroi h1 { font-size: 64px; line-height: 64px; max-width: 100%; }
  .metricas { flex-direction: row; gap: 40px; flex-wrap: wrap; }
  .mercado { grid-template-columns: 1fr; gap: 56px; }
  .mods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .wrap { padding: 0 20px; }
  .heroi h1 { font-size: 44px; line-height: 46px; }
  .secao { padding: 64px 0; }
  .secao h2 { font-size: 32px; line-height: 40px; }
  .tl, .mods { grid-template-columns: 1fr; }
  .tl-b { min-height: 0; padding-bottom: 28px; }
  .tl-etq { position: static; display: block; margin-top: 12px; }
  .form { grid-template-columns: 1fr; }
  .acoes .btn { flex: 1; justify-content: center; }
  /* Em 390px os quatro itens do menu não cabem em 57px de altura ao lado da
     marca. Encolhem e apertam o vão em vez de virar hambúrguer: são quatro
     links curtos, e uma gaveta para quatro links é mais clique do que o
     problema pedia. Medido a 390px: cabe sem quebrar linha. */
  .topo nav { gap: 14px; }
  .topo nav a.entrar { font-size: 12.5px; }
}