/* ══════════════════════════════════════════════════════════════════════════════════════════════
   A CENTRAL DE AJUDA — o pouco de CSS que `/site/estilo.css` não tinha.

   ESTE ARQUIVO É A FONTE, e mora em `site-institucional/ajuda-estatico/`. Ele é COPIADO para
   `public/site/ajuda/` a cada rodada de `gerar-ajuda.mjs` — que apaga a pasta inteira antes de
   refazê-la. Editar a cópia em `public/` é trabalho perdido: a próxima rodada a apaga.

   Tudo aqui herda os tokens de `/site/estilo.css` (--acento, --creme, --tinta…). Nenhuma cor
   nova foi inventada: a central tem que parecer a mesma empresa que a página de venda.

   A LEITURA É O PRODUTO AQUI. Um artigo é uma coluna estreita de texto com números grandes à
   esquerda — quem está com o celular na mão, no meio do turno, precisa achar o passo 7 sem ler
   os seis anteriores.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Capa da central ──────────────────────────────────────────────────────────────────────── */
.ajuda-capa{background:var(--creme);padding:clamp(2rem,6vw,3.6rem) 0 clamp(1.6rem,4vw,2.4rem);border-bottom:1px solid var(--borda)}
.ajuda-capa h1{font-family:var(--display);font-size:clamp(1.7rem,4.6vw,2.6rem);letter-spacing:-.02em;margin:.2rem 0 .7rem;max-width:20ch}
.ajuda-capa__texto{color:var(--tinta-suave);max-width:62ch;margin:0 0 1.6rem}

.ajuda-busca{margin:0 0 1rem;max-width:34rem}
.ajuda-busca__rotulo{display:block;font-size:.86rem;font-weight:700;color:var(--tinta-suave);margin-bottom:.35rem}
.ajuda-busca input{
  width:100%;font:inherit;font-size:1.05rem;padding:.85rem 1rem;min-height:52px;
  border:1.5px solid var(--borda-forte);border-radius:.85rem;background:var(--papel);color:var(--tinta);
}
.ajuda-busca input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px var(--acento-suave)}
.ajuda-busca__estado{font-size:.88rem;color:var(--tinta-suave);margin:.5rem 0 0;min-height:1.3em}

.ajuda-ramos{display:flex;flex-wrap:wrap;gap:.5rem}
.ajuda-ramo{
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:.5rem 1rem;min-height:44px;border-radius:999px;
  border:1.5px solid var(--borda-forte);background:var(--papel);color:var(--tinta-suave);
}
.ajuda-ramo:hover{border-color:var(--acento);color:var(--acento-forte)}
.ajuda-ramo[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#fff}

/* ── Índice por assunto ───────────────────────────────────────────────────────────────────── */
.ajuda-assuntos{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2.4rem,6vw,4rem);display:grid;gap:clamp(1.6rem,4vw,2.4rem)}
@media (min-width:780px){.ajuda-assuntos{grid-template-columns:repeat(2,1fr)}}

.assunto{
  background:var(--papel);border:1px solid var(--borda);border-radius:1.1rem;
  padding:1.3rem 1.3rem 1.1rem;box-shadow:0 6px 16px rgba(24,22,19,.05);
}
/* Assunto sem nenhum artigo do ramo escolhido some inteiro — a seção vazia com o título
   ainda em pé diria "aqui não tem nada para você" com mais barulho do que o necessário. */
.assunto[hidden]{display:none}
.assunto h2{font-family:var(--display);font-size:1.18rem;letter-spacing:-.01em;margin:0 0 .25rem}
.assunto__resumo{font-size:.9rem;color:var(--tinta-suave);margin:0 0 .9rem}

.ajuda-lista{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.ajuda-lista li{display:flex;align-items:baseline;gap:.6rem;padding:.5rem 0;border-bottom:1px dashed var(--borda)}
.ajuda-lista li:last-child{border-bottom:0}
.ajuda-lista li[hidden]{display:none}
.ajuda-lista a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.98rem;line-height:1.35;flex:1}
.ajuda-lista a:hover{color:var(--acento-forte);text-decoration:underline}
.ajuda-lista__n{font-size:.78rem;color:var(--tinta-suave);white-space:nowrap;flex:none}

.ajuda-resultados{padding:1.6rem 0 0}
.ajuda-resultados h2{font-family:var(--display);font-size:1.15rem;margin:0 0 .6rem}
.ajuda-resultados .ajuda-lista{background:var(--papel);border:1px solid var(--borda);border-radius:1.1rem;padding:.4rem 1.2rem}

/* ── Artigo ───────────────────────────────────────────────────────────────────────────────── */
.ajuda-artigo{padding:clamp(1.4rem,4vw,2.6rem) 0 clamp(2rem,5vw,3rem)}
.ajuda-artigo .limite{max-width:46rem}
.ajuda-trilha{font-size:.86rem;color:var(--tinta-suave);display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.ajuda-trilha a{color:var(--tinta-suave);text-decoration:none}
.ajuda-trilha a:hover{color:var(--acento-forte);text-decoration:underline}

.ajuda-artigo h1{font-family:var(--display);font-size:clamp(1.55rem,4.2vw,2.25rem);letter-spacing:-.02em;line-height:1.2;margin:0 0 .6rem}
.ajuda-chamada{font-size:1.06rem;color:var(--tinta-suave);margin:0 0 .7rem}
.ajuda-meta{font-size:.84rem;color:var(--tinta-suave);margin:0 0 1.2rem;font-weight:600}
.ajuda-aviso{
  font-size:.9rem;color:var(--tinta-suave);background:var(--acento-suave);
  border-radius:.8rem;padding:.75rem .95rem;margin:0 0 1.6rem;
}

.passos{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem;counter-reset:passo}
.passo{display:flex;gap:.9rem;align-items:flex-start;scroll-margin-top:90px}
.passo__n{
  flex:none;width:2rem;height:2rem;border-radius:.65rem;
  display:grid;place-items:center;font-weight:700;font-size:.92rem;
  background:var(--acento-suave);color:var(--acento-forte);
}
.passo__corpo{flex:1;min-width:0}
.passo__corpo p{margin:.15rem 0 0;line-height:1.62}
/* O player fica DISCRETO e pequeno: ele é um reforço do texto, não o conteúdo. Quem lê não
   precisa desviar dele; quem quer ouvir acha na hora, logo abaixo da frase de que ele fala. */
.passo__audio{display:block;width:100%;max-width:22rem;height:36px;margin-top:.55rem;opacity:.85}
.passo__audio:hover,.passo__audio:focus-within{opacity:1}

.ajuda-cta{
  margin-top:2.2rem;padding:1.3rem;border-radius:1.1rem;
  background:var(--creme);border:1px solid var(--borda);
}
.ajuda-cta p{margin:0 0 .9rem;color:var(--tinta-suave);font-size:.95rem}

.ajuda-relacionados{padding:0 0 clamp(2rem,5vw,3rem)}
.ajuda-relacionados .limite{max-width:46rem}
.ajuda-relacionados h2{font-family:var(--display);font-size:1.15rem;margin:0 0 .7rem}
.ajuda-relacionados .ajuda-lista{background:var(--papel);border:1px solid var(--borda);border-radius:1.1rem;padding:.4rem 1.2rem}

/* ── Rodapé ───────────────────────────────────────────────────────────────────────────────── */
.ajuda-rodape{background:var(--marinho-fundo);color:rgba(238,240,247,.78);padding:2rem 0;font-size:.92rem}
.ajuda-rodape p{margin:0 0 .7rem}
.ajuda-rodape strong{color:#fff}
.ajuda-rodape__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.ajuda-rodape__links a{color:#fff;text-decoration:none;font-weight:600}
.ajuda-rodape__links a:hover{text-decoration:underline}
.ajuda-rodape__nota{font-size:.82rem;color:rgba(238,240,247,.55);margin:0}

/* ── O botão "Me ajude" das páginas de ramo ───────────────────────────────────────────────────
   Ele vive no cabeçalho, ao lado de "Entrar no aplicativo", e some em tela estreita — lá o
   espaço do topo é do botão que fecha negócio. Quem está no celular acha a central pela faixa
   `.ajuda-chamariz`, que fica no corpo da página e não disputa lugar com nada. */
.topo__ajuda{display:none}
@media (min-width:620px){.topo__ajuda{display:inline-flex}}

.ajuda-chamariz{background:var(--creme);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);padding:clamp(1.6rem,4vw,2.4rem) 0}
.ajuda-chamariz__caixa{display:grid;gap:1rem;align-items:center}
@media (min-width:760px){.ajuda-chamariz__caixa{grid-template-columns:1fr auto;gap:2rem}}
.ajuda-chamariz h2{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.6rem);letter-spacing:-.02em;margin:0 0 .4rem}
.ajuda-chamariz p{margin:0;color:var(--tinta-suave);max-width:58ch}
.ajuda-chamariz .btn{white-space:nowrap}
@media (max-width:759px){.ajuda-chamariz .btn{width:100%;justify-content:center}}

/* ── A tela dentro do item de menu (regra 2) ──────────────────────────────────────────────────
   O índice tem três níveis, e eles precisam se distinguir sem virar uma árvore de pastas: o
   item de menu é o cartão, a TELA é um subtítulo em caixa alta pequena, e os artigos são a
   lista. É a mesma hierarquia que a barra lateral do aplicativo tem. */
.tela + .tela{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--borda)}
.tela__nome{
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento-forte);margin:0 0 .3rem;
}
/* Tela cujos artigos sumiram todos no filtro de ramo some junto — sobraria um rótulo sem lista. */
.tela[hidden]{display:none}

/* ── A captura de tela do artigo (regra 3) ────────────────────────────────────────────────────
   Ela vem ANTES dos passos e ganha borda e fundo: é uma janela para dentro do sistema, e sem
   moldura uma captura de tela clara se dissolve no fundo claro da página.

   `width`/`height` no <img> vêm do arquivo real, e o CSS só reescala — é o que reserva o espaço
   antes do download e impede a página de pular na cara de quem já começou a ler. Capturas de
   celular são altas e estreitas; o `max-height` impede que uma delas ocupe três rolagens. */
.ajuda-print{
  margin:0 0 1.6rem;border:1px solid var(--borda);border-radius:1rem;
  background:var(--creme);padding:.6rem;box-shadow:0 8px 20px rgba(24,22,19,.06);
}
.ajuda-print img{
  width:100%;height:auto;max-height:78vh;object-fit:contain;object-position:top;
  border-radius:.65rem;background:var(--papel);
}
.ajuda-print figcaption{
  font-size:.88rem;color:var(--tinta-suave);line-height:1.45;
  padding:.6rem .35rem .15rem;margin:0;
}

/* ── O print de um PASSO (26/09) ───────────────────────────────────────────────────────────────
   Ele é menor e mais discreto que a captura do alto do artigo, e isso é a hierarquia da página:
   a de cima responde "é esta tela mesmo?", e esta responde "é ESTE o botão". Uma do tamanho da
   outra faria o artigo virar um álbum, e o texto — que é o principal, e o que quem ouve o áudio
   acompanha — sumiria entre imagens.

   `width`/`height` vêm do arquivo real e o CSS só reescala: é o que reserva a altura antes do
   download e impede a página de pular enquanto a pessoa lê. Com `loading="lazy"` no <img>, um
   artigo de vinte e quatro passos baixa a imagem do passo 20 quando a pessoa chega perto dele,
   e não na abertura. */
.passo__print{margin:.6rem 0 0;max-width:34rem}
.passo__print img{
  width:100%;height:auto;display:block;
  border:1px solid var(--borda);border-radius:.6rem;
  background:var(--papel);box-shadow:0 4px 12px rgba(24,22,19,.07);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FUNDO BRANCO NA CENTRAL (26/09/2026 — pedido do dono)

   As páginas de venda continuam no creme (`--creme-fundo`, de `/site/estilo.css`); a central
   passa a ser branca. É outra leitura: lá a pessoa passeia, aqui ela lê um passo a passo com o
   sistema aberto do lado, e o branco é o fundo que não disputa com a captura de tela — que é
   quase toda clara e, sobre creme, ficava com uma moldura de cor que não é dela.

   ═══ O QUE PRECISOU MUDAR JUNTO, E POR QUÊ ═══

   Tirar a cor do fundo quebra tudo o que se distinguia POR SER mais claro que ele. Os cartões
   usavam `--papel` (#fbfcfc), que sobre creme lia como "papel sobre mesa" e sobre branco vira
   branco sobre branco: some. Então eles passam ao creme — a mesma hierarquia, invertida.

   O texto não mudou de cor: `--tinta` (#17191f) e `--tinta-suave` (#5d5852) sobre #fff dão 16,8:1
   e 7,0:1, os dois muito acima do 4,5:1 exigido. A pastilha do número do passo era
   `rgba(43,58,128,.12)` sobre creme; sobre branco ela clareia, e por isso ganhou opacidade maior
   e o marinho cheio no texto, que leva o contraste de volta para perto de 9:1.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
body{background:#fff}

/* A capa deixa de se distinguir por cor de fundo e passa a se distinguir pela linha de baixo. */
.ajuda-capa{background:#fff;border-bottom:1px solid var(--borda)}

/* Cartão claro sobre fundo branco é cartão invisível: eles trocam para o creme. */
.assunto,
.ajuda-resultados .ajuda-lista,
.ajuda-relacionados .ajuda-lista{background:var(--creme)}
.ajuda-cta{background:var(--creme)}
.ajuda-print{background:var(--creme)}

/* O campo de busca continua branco, mas agora precisa da borda para existir. */
.ajuda-busca input{background:#fff;border-color:var(--borda-forte)}
.ajuda-ramo{background:#fff}

/* A pastilha do número, reforçada para o fundo branco (ver a nota acima). */
.passo__n{background:rgba(43,58,128,.14);color:#22307a}

/* O rodapé escuro fica como está — ele é a âncora da página e o contraste dele não mudou. */

/* A tela cheia do passo de narração é mais larga que o recorte de um destaque: ela fala da tela
   inteira, e reduzi-la ao tamanho de um recorte deixaria tudo ilegível. */
.passo__print--tela{max-width:100%}