/*
 * A página pública.
 *
 * ## Por que ela usa a paleta do produto e não uma própria
 *
 * Quem chega aqui vai ver o dashboard em seguida. Duas identidades — uma para
 * vender, outra para usar — fazem o produto parecer outro sistema no primeiro
 * login. Os tokens são os mesmos de `packages/ui/base.css`, copiados e não
 * importados porque esta página é estática e não deve arrastar o pacote de
 * interface inteiro para servir seis cores.
 *
 * Copiar cobra manutenção: os valores do modo escuro já tinham derivado (plano
 * mais claro, texto secundário mais frio, bordas mais fortes) e foram trazidos
 * de volta aos do pacote. Ao mexer aqui, conferir contra `base.css`. A exceção
 * deliberada é `--alerta` no escuro (#f0794a contra #d95926 do `--series-2`):
 * aqui ele é **texto** sobre fundo escuro e precisa da luminância; lá é
 * preenchimento de série.
 *
 * ## Por que serifa no display
 *
 * O assunto é demonstrativo de resultado. Georgia tem número old-style, largura
 * confortável e existe em toda máquina — nenhum risco de fallback silencioso,
 * que é o preço de uma fonte de CDN. O corpo fica em system-ui e os valores em
 * monoespaçado com `tabular-nums`, porque a coluna de dinheiro só se lê quando
 * as casas alinham.
 */

:root {
  color-scheme: light;

  --plane: #f9f9f7;
  --surface-1: #fcfcfb;
  --surface-2: #f2f1ed;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.1);
  --border-strong: rgba(11, 11, 11, 0.18);

  --acento: #2a78d6;
  --acento-wash: rgba(42, 120, 214, 0.09);
  --alerta: #eb6834;
  --critico: #d03b3b;

  --raio: 10px;
  --display: Georgia, "Times New Roman", serif;
  --corpo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --largura: 62rem;
  --prosa: 34rem;
}

/*
 * O padrão do navegador é "system": nada é carimbado na raiz e só a preferência
 * do sistema separa claro de escuro. Por isso o bloco escuro é uma media query
 * guardada contra a escolha explícita de claro — e repetida no atributo, para o
 * caso inverso. Uma cor definida só dentro de um dos dois blocos não existe no
 * estado sem carimbo, que é justamente o mais comum.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --acento: #3987e5;
    --acento-wash: rgba(57, 135, 229, 0.14);
    --alerta: #f0794a;
    --critico: #e05656;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --acento: #3987e5;
  --acento-wash: rgba(57, 135, 229, 0.14);
  --alerta: #f0794a;
  --critico: #e05656;
}

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

body {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ topo */

/*
 * A barra ocupa a janela inteira e é ela que gruda; o conteúdo centrado vive
 * num filho. Fosse o próprio <header> limitado a `--largura`, o fundo terminaria
 * junto com ele e o texto da página apareceria por baixo nas laterais ao rolar.
 *
 * O fundo é opaco de propósito. Um `backdrop-filter` custa composição em toda
 * rolagem, e numa página que é quase toda texto o desfoque atrás de números
 * atrapalha justamente a coisa que se veio ler.
 */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--plane);
  border-bottom: 1px solid var(--border);
}

.topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* O glifo é o mesmo desenho do favicon: três colunas de alturas diferentes, que
   é o gráfico mais simples que ainda diz "isto mede alguma coisa". Ele já foi
   um gradiente de faixas com máscara reta no topo, e o resultado eram três
   barras da MESMA altura — parecido de longe, outro desenho de perto, e a
   marca aparecia diferente no favicon e no topo da própria página. Agora as
   proporções são as do ícone: 25% de largura por barra, alturas 50/100/75. */
.marca-glifo {
  width: 18px;
  height: 18px;
  background-image:
    linear-gradient(var(--text-primary), var(--text-primary)),
    linear-gradient(var(--text-primary), var(--text-primary)),
    linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-size:
    25% 50%,
    25% 100%,
    25% 75%;
  background-position:
    0 100%,
    50% 100%,
    100% 100%;
}

.topo nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.topo nav a:not(.botao) {
  color: var(--text-secondary);
  text-decoration: none;
}

.topo nav a:not(.botao):hover {
  color: var(--text-primary);
}

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raio);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.botao:hover {
  background: var(--surface-2);
}

.botao.primario {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--plane);
}

.botao.primario:hover {
  opacity: 0.88;
  background: var(--text-primary);
}

.botao.grande {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
}

/* ------------------------------------------------------- pular para o conteúdo */

/* Sai do fluxo sem `display: none`, que o tiraria da ordem de tabulação e
   anularia o propósito. Ao receber foco, volta para o canto superior. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--text-primary);
  color: var(--plane);
  border-radius: 0 0 var(--raio) 0;
  text-decoration: none;
  font-size: 0.9375rem;
}

.pular:focus {
  left: 0;
}

/* ------------------------------------------------------------- movimento */

/*
 * O estado escondido só existe sob `.js-animacao`, carimbado por
 * `interacoes.js`. Sem script, com o script bloqueado ou com erro, nenhuma
 * destas regras casa e a página aparece inteira — animação nunca é condição
 * para o conteúdo existir.
 *
 * A distância é curta de propósito. Elementos que sobem 40px anunciam a
 * animação; 10px só tiram a rigidez de o bloco simplesmente estar lá.
 */
.js-animacao .revelar {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-animacao .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* Um pulso, uma vez. `background-color` e não `box-shadow`: a linha vive numa
   tabela, e sombra em `<tr>` renderiza diferente em cada navegador. */
@keyframes pulso-linha {
  0%,
  100% {
    background-color: var(--acento-wash);
  }
  35% {
    background-color: rgba(235, 104, 52, 0.22);
  }
}

.js-animacao .dre .destaque.pulsar {
  animation: pulso-linha 1.4s ease 0.15s 1;
}

/* Cinto e suspensório: se algum navegador aplicar as classes apesar da
   preferência do sistema, o movimento morre aqui. */
@media (prefers-reduced-motion: reduce) {
  .js-animacao .revelar,
  .js-animacao .revelar.visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-animacao .dre .destaque.pulsar {
    animation: none;
  }
}

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  /* 6rem era o respiro de uma página de cinco seções. Com oito, o vazio somado
     virava metade da rolagem — e uma página que não acaba lê como esforço. */
  gap: 4rem;
}

/* A margem tem de caber a barra grudada, senão o link de âncora para a seção
   e o topo dela fica escondido atrás do cabeçalho. */
main > section {
  scroll-margin-top: 5.5rem;
}

.titulo-secao {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------------- herói */

.heroi {
  padding: 3.5rem 0 0;
}

.sobrancelha {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.heroi h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}

/* A palavra trocada não é apagada — é riscada. Quem lê precisa ver as duas
   para entender a inversão: o assunto não é a venda, é o sistema que a
   registrou. Apagar a primeira deixaria só a segunda, e a frase viraria a
   afirmação óbvia que ela justamente contradiz. */
.tachado {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}

.realce {
  font-weight: 400;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.chamada {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 2rem;
}

.heroi-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rodape-nota {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/*
 * As quatro objeções respondidas no primeiro quadro.
 *
 * Régua em cima e nada mais: caixa, ícone ou cor aqui competiriam com o título,
 * que é o que precisa ser lido primeiro. A faixa é para ser varrida em dois
 * segundos, não estudada — daí o texto curto e o negrito só na palavra que
 * responde a objeção.
 */
.garantias {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* `display: block` separa a promessa da qualificação sempre no mesmo ponto. As
   quatro colunas só ficam alinhadas assim: deixar a quebra por conta da largura
   disponível produzia uma coluna de duas linhas ao lado de três de uma, e o
   desalinhamento lê como erro de montagem. Um `<br>` aqui somaria uma segunda
   quebra ao bloco e abriria um buraco entre as duas linhas. */
.garantias strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

/* A frase que resume a seção, entre a etiqueta do título e o parágrafo de
   contexto. Existe porque quem rola rápido lê só isto — e precisa sair com a
   ideia inteira mesmo sem ler mais nada da seção. */
.resumo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 30ch;
}

/* ---------------------------------------------------------- demonstrativo */

/* Tabela larga rola dentro do próprio contêiner: a página nunca rola de lado. */
.tabela-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.dre {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}

.dre caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.dre th,
.dre td {
  padding: 0.65rem 1.25rem;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--border);
}

.dre thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-strong);
}

/* Toda coluna de dinheiro é monoespaçada, tabular e à direita. Sem isso as
   casas decimais não alinham, e a comparação entre as duas colunas — que é o
   ponto da tabela — some. */
.dre .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dre tbody tr:last-child th,
.dre tbody tr:last-child td {
  border-bottom: none;
}

.dre .subtotal th,
.dre .subtotal td {
  border-bottom-color: var(--border-strong);
}

.dre .destaque {
  background: var(--acento-wash);
}

.dre .vazio {
  color: var(--text-muted);
}

.dre .resultado th,
.dre .resultado td {
  font-weight: 600;
}

.dre .forte {
  color: var(--acento);
}

/* A etiqueta marca a linha que explica a diferença inteira do demonstrativo.
   Usa o mesmo laranja dos selos de "atenção" do diagnóstico, e isso é
   deliberado: as duas coisas dizem a mesma frase — há um dado faltando, e o
   número ao lado está errado por causa dele. Fora estes dois lugares, a página
   não gasta cor nenhuma. */
.etiqueta {
  display: inline-block;
  font-family: var(--corpo);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alerta);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: 1px;
}

.nota {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 1.25rem 0 0;
}

/* Depois de uma grade, 1,25rem não separa nada: as colunas terminam em alturas
   diferentes, e a nota encosta na mais baixa como se fosse o quarto parágrafo
   dela. Depois da tabela, que termina reta, 1,25rem basta. */
.diagnostico + .nota,
.alertas + .nota {
  margin-top: 2.5rem;
}

/* Parágrafo entre o título da seção e o conteúdo dela. O título é uma etiqueta
   pequena e em itálico — sozinho, não sustenta a entrada numa lista de seis
   itens técnicos. Uma frase antes diz o que se está prestes a ler. */
.abertura {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 2.5rem;
}

/* ------------------------------------------------------------ diagnóstico */

/*
 * As seis verificações.
 *
 * Cada item tem quatro partes na mesma ordem em que a tela do produto as
 * mostra: o que foi verificado, o número apurado, por que ele importa e o que
 * fazer. A régua em cima de cada um vem no lugar de cartão com sombra — seis
 * caixas flutuando lêem como propaganda, e isto é um laudo.
 *
 * O mínimo de 22rem garante duas colunas e nunca três: com três, a explicação
 * de cada achado ficaria estreita demais para uma frase inteira caber sem
 * quebrar em quatro linhas.
 *
 * O `min(22rem, 100%)` não é preciosismo. Um `minmax(22rem, 1fr)` cru mantém as
 * 22rem mesmo quando a tela é menor que isso, e a coluna transborda: num
 * celular de 360px a PÁGINA INTEIRA passa a rolar de lado. O `min` deixa a
 * coluna encolher junto com o contêiner. Vale para todas as grades da folha.
 */
.diagnostico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.diagnostico li {
  border-top: 1px solid var(--border-strong);
  padding-top: 1rem;
}

/*
 * Cada achado abre e fecha.
 *
 * `<details>` nativo, e não um acordeão de JavaScript: o navegador já dá o
 * estado, o foco, o teclado e a busca na página (Ctrl+F encontra texto dentro
 * de um details fechado e o abre sozinho). Um acordeão feito à mão perde as
 * quatro coisas e não ganha nenhuma.
 *
 * O primeiro vem aberto no HTML para que a forma do item seja visível sem
 * ninguém clicar — seis linhas fechadas não ensinam que há conteúdo atrás.
 */
.diagnostico summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0 0.75rem;
}

/* O triângulo padrão do WebKit vive fora do fluxo do grid e desalinha a
   primeira linha; o marcador daqui é o sinal à direita. */
.diagnostico summary::-webkit-details-marker {
  display: none;
}

.diagnostico summary h3,
.diagnostico summary .apurado {
  grid-column: 1;
}

/* O sinal gira para virar "menos" quando aberto. `transform` e não troca de
   caractere: trocar o glifo faria a largura mudar e a linha inteira pular. */
.diagnostico summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 11px;
  height: 11px;
  margin-top: 0.55rem;
  background: currentColor;
  color: var(--text-muted);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform 0.2s ease, color 0.2s ease;
}

.diagnostico details[open] summary::after {
  transform: rotate(135deg);
}

.diagnostico summary:hover::after {
  color: var(--text-primary);
}

/* O foco marca a linha inteira, não só o texto: o alvo de clique é a linha. */
.diagnostico summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Espaçamento padrão do corpo do achado. Vem ANTES do `@supports`: as duas
   regras têm a mesma especificidade, e a última no arquivo é a que vale — se
   ficasse depois, anularia o `padding-top: 0` do estado fechado e o item
   fechado guardaria uma fresta. */
.diagnostico .detalhe {
  padding-top: 0.6rem;
}

/*
 * A abertura animada depende de `interpolate-size`, que ensina o navegador a
 * transicionar de/para `auto`. Onde não existe, o bloco simplesmente aparece —
 * nada quebra, e ninguém perde conteúdo por causa de uma animação.
 */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .diagnostico .detalhe {
    height: 0;
    padding-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.28s ease, padding-top 0.28s ease, opacity 0.2s ease;
  }

  .diagnostico details[open] .detalhe {
    height: auto;
    padding-top: 0.6rem;
    opacity: 1;
  }
}


.diagnostico h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.diagnostico p {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.diagnostico p:last-child {
  margin-bottom: 0;
}

/* O número apurado é o que separa este bloco de uma lista de promessas: ele
   veio de uma consulta, e é escrito como número — monoespaçado, com as casas
   alinhadas, na cor do texto principal. */
.diagnostico .apurado {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* A linha de correção fecha cada achado. Sem ela o diagnóstico seria uma lista
   de acusações; com ela, cada item vira uma tarefa de alguém. O rótulo vem do
   CSS porque é apresentação — o texto no HTML é a ação, e só ela. */
.corrigir::before {
  content: "Como corrigir — ";
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.corrigir {
  border-left: 2px solid var(--acento);
  padding-left: 0.75rem;
}

/*
 * O selo de status.
 *
 * Duas cores e duas só: vermelho para o que impede a conta de fechar, laranja
 * para o que a distorce. Um terceiro nível ("ok") não aparece aqui de
 * propósito — a página mostra o que foi encontrado, e um selo verde ao lado de
 * cinco vermelhos disputaria a leitura com eles.
 */
.selo {
  display: inline-block;
  font-family: var(--corpo);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: 2px;
  white-space: nowrap;
}

.selo.critico {
  color: var(--critico);
}

.selo.atencao {
  color: var(--alerta);
}

/* ------------------------------------------------------------------- tela */

/*
 * A moldura que transforma a lista de verificações na tela do produto.
 *
 * A página não tinha imagem nenhuma do que se compra, e um print de verdade
 * exigiria dado de cliente — o que não vai para página pública. A moldura
 * resolve os dois: mostra a forma da interface sem inventar um print e sem
 * expor ninguém.
 *
 * Sem sombra e sem semáforo de macOS. Três bolinhas coloridas fariam parecer
 * captura de tela, que é justamente o que isto não é.
 */
.tela {
  border: 1px solid var(--border-strong);
  border-radius: var(--raio);
  background: var(--surface-1);
  overflow: hidden;
}

.tela-barra {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Um ponto só, na cor de alerta: é o indicador de que a tela tem achado
   pendente — a mesma informação que o produto dá no menu. */
.tela-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alerta);
  flex: none;
}

.tela .diagnostico {
  padding: 1.75rem 1.25rem 1.5rem;
}

/* ---------------------------------------------------------------- alertas */

/* Cinco itens curtos, três por linha. Aqui a explicação é uma frase e não um
   parágrafo, então a coluna pode ser mais estreita que a do diagnóstico. */
.alertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.alertas li {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.alertas h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.0625rem;
  margin: 0 0 0.35rem;
}

.alertas p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------------- passos */

/* A numeração aqui carrega informação de verdade: os três passos acontecem
   nesta ordem e cada um depende do anterior. Onde não houver sequência real,
   número é decoração. */
.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2.5rem;
}

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-top: 0.2rem;
}

.passos h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.passos p {
  grid-column: 2;
  margin: 0;
  color: var(--text-secondary);
  max-width: var(--prosa);
}

/* ---------------------------------------------------------- o que precisa ter */

/* Encostado nos passos, e não uma seção nova: é a mesma pergunta ("como isso
   entra na minha loja?") vista do lado de quem vai providenciar. */
.requisitos {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
  max-width: var(--prosa);
}

.requisitos h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.requisitos ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.requisitos li + li {
  margin-top: 0.4rem;
}

/* -------------------------------------------------------------- perguntas */

/* São quatro perguntas, e o mínimo é largo o bastante para caberem duas por
   linha e nunca três. Com três colunas a quarta ficava órfã, e um bloco solto
   ao lado de dois vazios lê como se faltasse conteúdo. */
.perguntas {
  margin: 0;
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
}

.perguntas dt {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.perguntas dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------- recursos */

.grade {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

/* Uma grade de cartões com sombra viraria seis caixas flutuando. Aqui os
   quadros dividem a régua: é uma tabela, e o produto é sobre tabelas. */
.grade article {
  background: var(--plane);
  padding: 1.5rem;
  transition: background 0.18s ease;
}

/* O quadro inteiro reage ao ponteiro, e só ele: elevar ou escalar o cartão
   quebraria a régua de 1px que os separa — é ela que faz a grade parecer uma
   tabela, e a tabela é o argumento. */
.grade article:hover {
  background: var(--surface-1);
}

.grade h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 0.4rem;
}

.grade p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ------------------------------------------------------- chamada do meio */

/*
 * A única interrupção da página.
 *
 * Quem chegou aqui já viu o problema e a prova, e é o melhor momento dele —
 * mandá-lo rolar mais quatro seções até o formulário perde a pessoa por
 * cansaço. Duas ou três faixas dessas na mesma página viram anúncio e a leitura
 * passa a desviar delas; por isso existe uma só.
 *
 * Fundo de superfície e não cor cheia: um bloco colorido no meio de uma página
 * de tabelas leria como banner de terceiro, e a primeira reação a banner é
 * pular.
 */
.chamada-meio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.chamada-meio h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5rem;
  max-width: 24ch;
}

.chamada-meio p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  max-width: 46ch;
}

/* ------------------------------------------------------------ fechamento */

.fechamento {
  padding: 3rem 0 0;
  border-top: 1px solid var(--border);
}

.fechamento h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 22ch;
}

.fechamento p {
  color: var(--text-secondary);
  max-width: var(--prosa);
  margin: 0 0 1.75rem;
}

/* A garantia é o último argumento antes do formulário. Ganha a barra de acento
   porque é a única frase da página em que o risco muda de lado — e quem está
   decidindo preencher precisa vê-la sem procurar. */
.fechamento .garantia {
  border-left: 2px solid var(--acento);
  padding-left: 1rem;
  color: var(--text-primary);
  font-size: 1.0625rem;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

/*
 * Formulário e "o que acontece depois", lado a lado.
 *
 * Abaixo não serve: quem hesita em preencher hesita por não saber o que vem
 * depois, e a resposta precisa estar no mesmo quadro em que ele decide. O
 * mínimo de 20rem quebra a coluna antes de o formulário ficar apertado —
 * campo espremido é o jeito mais rápido de fazer alguém desistir de preencher.
 */
.fechamento-grade {
  display: grid;
  gap: 2.5rem 3.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}

.depois {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
}

.depois h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.125rem;
  margin: 0 0 1rem;
}

.depois ol {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.depois li + li {
  margin-top: 0.7rem;
}

.depois strong {
  color: var(--text-primary);
  font-weight: 600;
}

.depois > p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- rodapé */

.rodape {
  max-width: var(--largura);
  margin: 4rem auto 0;
  padding: 1.75rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.rodape nav {
  display: flex;
  gap: 1.5rem;
}

.rodape a {
  color: inherit;
  text-decoration: none;
}

.rodape a:hover {
  color: var(--text-primary);
}

@media (max-width: 34rem) {
  main {
    gap: 4.5rem;
  }

  .heroi {
    padding-top: 3rem;
  }

  .passos li {
    grid-template-columns: 1fr;
  }

  .passos p {
    grid-column: 1;
  }

  .passos li::before {
    padding-top: 0;
  }
}

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

  /*
   * `transition: none` não alcança `animation`, e são coisas diferentes.
   *
   * O girador do botão e a entrada da confirmação são keyframes: sem esta
   * regra, quem pediu menos movimento continuaria com um disco girando na tela
   * durante todo o envio — exatamente o tipo de movimento contínuo que a
   * preferência existe para desligar.
   *
   * O girador não some, só congela: ele também é o sinal de "estou enviando",
   * e some-lo deixaria o botão desabilitado sem explicação.
   */
  .botao[aria-busy="true"] .botao-girando,
  .formulario-recado-ok {
    animation: none !important;
  }
}

/* ==================================================================
   Documentação
   ==================================================================
   Mesmo arquivo e mesmos tokens da landing, de propósito: a
   documentação é a mesma marca, e duas folhas separadas divergem no
   primeiro ajuste de cor. As classes daqui não aparecem na landing.
   ================================================================== */

.doc-corpo {
  display: grid;
  /* Três colunas: menu, texto, índice da página. `minmax(0, 1fr)` no meio e
     não `1fr` — sem isso um bloco de código longo empurra a coluna e a página
     inteira ganha rolagem horizontal. */
  grid-template-columns: 14rem minmax(0, 1fr) 12rem;
  gap: 2.5rem;
  /* Mais larga que a landing (62rem), e por necessidade: com menu e índice nas
     laterais, 62rem deixavam 31rem para o texto — menos que o `max-width` de
     46rem do próprio conteúdo, que então transbordava POR CIMA do índice. */
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  align-items: start;
}

.doc-menu {
  position: sticky;
  top: 1.5rem;
  font-size: 0.9rem;
}

.doc-menu .grupo + .grupo { margin-top: 1.75rem; }

.doc-menu h2 {
  font-family: var(--corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.doc-menu ul { list-style: none; margin: 0; padding: 0; }
.doc-menu li { margin: 0; }

.doc-menu a {
  display: block;
  padding: 0.3rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: var(--raio);
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
}

.doc-menu a:hover { background: var(--surface-2); color: var(--text-primary); }

.doc-menu a[aria-current="page"] {
  background: var(--acento-wash);
  color: var(--acento);
  font-weight: 600;
}

/* A landing declara `main` como flex-column com `gap: 6rem` — o ritmo de
   seções de uma página de marketing. Num texto corrido isso põe 96px entre
   CADA elemento, parágrafos inclusive, e nenhuma margem local compete com
   `gap` (que não colapsa). Volta a ser fluxo normal aqui. */
.doc-conteudo {
  display: block;
  gap: 0;
  max-width: 46rem;
  padding: 0;
}
.doc-conteudo h1 { margin-top: 0; }

.doc-resumo {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: -0.5rem;
}

.doc-conteudo h2 {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc-conteudo h3 { margin-top: 2rem; }

/* Blocos de código rolam dentro de si; a página nunca rola de lado. */
.doc-conteudo pre {
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.doc-conteudo pre code { background: none; padding: 0; font-size: inherit; }

.doc-conteudo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1.5rem 0;
}

.doc-conteudo th,
.doc-conteudo td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.doc-conteudo th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

.aviso {
  border-left: 3px solid var(--acento);
  background: var(--surface-1);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
}

.aviso > b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.35rem;
}

.aviso p:last-child { margin-bottom: 0; }
.aviso-atencao { border-left-color: var(--alerta); }
.aviso-atencao > b { color: var(--alerta); }
.aviso-certo { border-left-color: #2f9e5f; }
.aviso-certo > b { color: #2f9e5f; }

/* Passos: a numeração vem do contador, não do markdown, porque cada
   passo é uma seção com conteúdo próprio e não um item de lista. */
.passos { counter-reset: passo; margin: 1.5rem 0; }

.passo {
  counter-increment: passo;
  position: relative;
  padding-left: 2.75rem;
  padding-bottom: 0.5rem;
  border-left: 1px solid var(--border);
  margin-left: 0.9rem;
}

.passo:last-child { border-left-color: transparent; }

.passo::before {
  content: counter(passo);
  position: absolute;
  left: -0.9rem;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.passo > h3 { margin-top: 0.15rem; }

.sanfona { margin: 1.5rem 0; }

.sanfona details,
.doc-conteudo > details {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 0.8rem 1.1rem;
  margin-bottom: 0.6rem;
  background: var(--surface-1);
}

.sanfona summary,
.doc-conteudo > details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.cartao {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 1.1rem;
  background: var(--surface-1);
  text-decoration: none;
  color: inherit;
}

a.cartao:hover { border-color: var(--acento); }
.cartao > b { display: block; margin-bottom: 0.4rem; color: var(--text-primary); }
.cartao p:last-child { margin-bottom: 0; }

.abas { margin: 1.5rem 0; }

.aba {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  padding: 0.4rem 1.1rem 1rem;
  margin-bottom: 0.8rem;
  background: var(--surface-1);
}

.campo {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}

.campo-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.campo-cabeca code { font-size: 0.9rem; font-weight: 600; }

.campo-tipo,
.campo-obrigatorio {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.campo-obrigatorio { color: var(--alerta); }
.campo p:last-child { margin-bottom: 0; }

/* Em tela média o índice sai primeiro: ele é o item mais dispensável dos
   três, e mantê-lo espremeria a coluna de texto abaixo do confortável. */
@media (max-width: 70rem) {
  .doc-corpo { grid-template-columns: 14rem minmax(0, 1fr); }
  .doc-indice { display: none; }
}

@media (max-width: 52rem) {
  .doc-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-top: 1.5rem;
  }

  .doc-passagem { flex-direction: column; }
  .doc-passagem a { max-width: none; }

  /* Solto do topo no celular: preso, o menu comeria metade da tela. */
  .doc-menu {
    position: static;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
  }
}

/* O ritmo da landing é de página de marketing: respiro largo entre blocos
   curtos. Num texto de leitura corrida isso vira buraco — três avisos seguidos
   ficavam com mais espaço entre eles do que altura própria. */
.doc-conteudo p { margin: 0 0 1rem; }
.doc-conteudo ul,
.doc-conteudo ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.doc-conteudo li { margin-bottom: 0.35rem; }
.doc-conteudo .aviso { margin: 1.1rem 0; }
/* Avisos em sequência (uma lista de pré-requisitos, por exemplo) colam. */
.doc-conteudo .aviso + .aviso { margin-top: -0.4rem; }
.doc-conteudo pre { margin: 0 0 1.2rem; }
.doc-conteudo h2 { margin-bottom: 0.9rem; }
.doc-conteudo h3 { margin-bottom: 0.6rem; }
.doc-resumo { margin-bottom: 2rem; }

/* ==================================================================
   Formulário de contato
   ==================================================================
   Substituiu o endereço de e-mail no fechamento. O e-mail pedia que a
   pessoa saísse da página, abrisse o cliente de e-mail e escrevesse do
   zero — três passos onde antes havia uma decisão.
   ================================================================== */

.formulario {
  margin-top: 2rem;
  /* Alinhado à esquerda, na MESMA coluna do título e do texto da seção.
     Centralizar o formulário sozinho criava duas margens esquerdas
     diferentes na mesma seção — o olho vê o desencontro antes de ler. */
  max-width: 40rem;
  display: grid;
  gap: 1rem;
}

/* O atributo `hidden` do HTML vale como `display: none` na folha do
   navegador, e QUALQUER `display` declarado numa classe ganha dele. Sem esta
   linha, esconder o formulário no envio não faz nada — ele fica na tela ao lado
   da confirmação, convidando ao reenvio. */
.formulario[hidden] { display: none; }

.formulario .linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.formulario .campo {
  display: grid;
  gap: 0.35rem;
  /*
   * As linhas empilham a partir do topo, sem esticar.
   *
   * Numa linha de dois campos, um com mensagem de erro e outro sem, a grade
   * distribuía o espaço extra entre as linhas do campo mais curto — e os dois
   * `input` da mesma linha deixavam de se alinhar por 13px. Erro num campo não
   * pode desalinhar o campo ao lado.
   */
  align-content: start;
}

.formulario .campo > span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* "opcional" precisa ser visível para reduzir o abandono, e discreto para
   não competir com o rótulo. */
.formulario .campo em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* A borda reage antes do foco. Num formulário de seis campos, saber onde o
   cursor vai cair antes de clicar reduz o clique errado — e o clique errado
   num formulário é a pessoa recomeçar a frase. */
.formulario input:hover,
.formulario select:hover,
.formulario textarea:hover {
  border-color: var(--border-strong);
}

/*
 * O preenchimento automático do Chrome pinta o campo de amarelo com uma regra
 * de user-agent que `background` não vence — só a sombra interna vence. No tema
 * escuro isso é um retângulo claro no meio do formulário, com texto quase
 * ilegível por cima.
 */
.formulario input:-webkit-autofill,
.formulario input:-webkit-autofill:hover,
.formulario input:-webkit-autofill:focus,
.formulario textarea:-webkit-autofill,
.formulario select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--surface-1) inset;
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
}

/*
 * A seta do `select` nativo não acompanha o tema em todos os navegadores, e a
 * caixa fica mais alta que os `input` ao lado. `appearance: none` e uma seta
 * desenhada resolvem as duas coisas — o SVG vai embutido para não custar uma
 * requisição.
 */
.formulario select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23898781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

/* ---------------------------------------------------- erro por campo */

/*
 * A mensagem fica colada no campo, e não num resumo no topo.
 *
 * Um resumo obriga a pessoa a ler, memorizar e procurar. Ao lado do campo, a
 * correção acontece onde o olho já está.
 */
.campo-erro {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--critico);
}

.campo-erro[hidden] { display: none; }

/* A cor não é o único sinal: o `aria-invalid` fala com o leitor de tela e a
   mensagem escrita fala com quem não distingue vermelho de cinza. */
.formulario .com-erro input,
.formulario .com-erro select,
.formulario .com-erro textarea {
  border-color: var(--critico);
}

.formulario textarea { resize: vertical; }

.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

/* A armadilha some para gente e continua existindo para robô. `display:none`
   não serve: parte dos preenchedores automáticos ignora campo oculto assim,
   e a armadilha deixaria de pegar. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------- botão de envio */

/*
 * O rótulo e o girador convivem na mesma caixa.
 *
 * Trocar o texto por "Enviando…" encolhia o botão, e o botão encolhendo puxava
 * a nota ao lado — a página saltava no instante em que a pessoa mais quer que
 * nada se mexa. Com o girador ocupando lugar próprio, a largura não muda.
 */
.formulario-rodape .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.formulario-rodape .botao[aria-busy="true"] { cursor: progress; }

/*
 * O girador ocupa o lugar dele desde sempre — `visibility`, nunca `display`.
 *
 * Com `display: none` ele entrava na hora do envio e empurrava o rótulo, e a
 * troca do texto por "Enviando…" encolhia o botão de 281px para 154px. A página
 * saltava exatamente no instante em que a pessoa mais precisa que nada se mexa:
 * o clique já foi, e um botão que muda de tamanho debaixo do cursor parece um
 * clique que não pegou.
 *
 * Agora o rótulo não muda e a largura não muda. Quem avisa que está enviando é
 * o giro, e o texto vai para a região de aviso, que já é lida em voz alta.
 */
.botao-girando {
  visibility: hidden;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
}

.botao[aria-busy="true"] .botao-girando {
  visibility: visible;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.formulario-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}

/* Ao lado do botão e não abaixo: é a frase que tira o receio de clicar
   ("sem cadastro", "sem instalar nada"), e embaixo ela chega tarde. */
.formulario-nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 22rem;
}

.formulario-recado {
  margin: 0;
  font-size: 0.95rem;
}

.formulario-recado:empty { display: none; }

.formulario-recado.formulario-recado-ok {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  background: var(--acento-wash);
  color: var(--text-primary);
  font-size: 1.05rem;
  animation: confirmar 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Ele recebe o foco quando o formulário some, e foco precisa ser visível. */
.formulario-recado:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/*
 * A confirmação aparece no lugar do formulário, que acabou de sumir.
 *
 * Sem transição, o bloco troca entre um quadro e outro e a pessoa duvida do que
 * viu — a pergunta seguinte é sempre "será que enviou?". Um movimento curto diz
 * que uma coisa virou a outra.
 */
@keyframes confirmar {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/*
 * Dupla classe de propósito: `.fechamento p` tem a mesma especificidade e vem
 * depois na folha, então a cor de erro perdia para o cinza de parágrafo e a
 * mensagem saía indistinguível de um texto de apoio.
 */
.formulario-recado.formulario-recado-erro {
  color: var(--critico);
  font-weight: 500;
  margin-bottom: 0;
}

/* ------------------------------------------------- índice da página */

.doc-indice {
  position: sticky;
  top: 1.5rem;
  font-size: 0.85rem;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

.doc-indice h2 {
  font-family: var(--corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  border: none;
  padding: 0;
}

.doc-indice ul { list-style: none; margin: 0; padding: 0; }

.doc-indice a {
  display: block;
  padding: 0.25rem 0;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.35;
}

.doc-indice a:hover { color: var(--acento); }

/* Uma âncora que para debaixo do cabeçalho fixo faz o título sumir e parece
   que o link levou ao lugar errado. */
.doc-conteudo h2 { scroll-margin-top: 1.5rem; }

/* -------------------------------------------- anterior e próxima */

.doc-passagem {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc-passagem a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  text-decoration: none;
  max-width: 48%;
}

.doc-passagem a:hover { border-color: var(--acento); }

.doc-passagem-proxima { text-align: right; margin-left: auto; }

.doc-passagem span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-passagem b {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}