/*
  O CENTRO DE AJUDA — www.hugi.com.br/ajuda.

  ------------------------------------------------------------------------------------------------
  A TINTA VEM DE FORA, E É DE PROPÓSITO

  `tinta.css` é a mesma fonte do `site.css`. A ajuda e a landing são a mesma superfície pública, e o
  §8.3 do `docs/mercado/zpro.md` é o argumento: o concorrente tem uma landing escura e cara e um
  produto claro e denso, e quem compra pela primeira e entra no segundo sente a queda. Duas folhas de
  valores derivariam pelo mesmo caminho.

  Nenhuma cor crua entra aqui. Se um tom faltar, ele nasce em `tinta.css`.

  ------------------------------------------------------------------------------------------------
  A MEDIDA DE LEITURA, E A ARMADILHA QUE ELA JÁ CAUSOU

  A sessão de 12/08 passou o dia consertando `max-width` de leitura aplicado a texto CURTO dentro de
  faixa larga — a frase quebrava uma linha antes do necessário e a última ficava com um quarto da
  largura. A lição não é "medida de leitura é ruim": é que ela serve **prosa corrida**, e este
  arquivo é o primeiro lugar do repositório em que prosa corrida é o conteúdo principal.

  Então a medida vale para `p` e `li` do artigo, e **não** vale para título, tabela, bloco de código
  nem cartão — que ocupam a coluna inteira. E `text-wrap: balance` está apenas em título, dentro de
  media query de tela estreita, pelo motivo escrito no `site.css`: em texto que caberia inteiro, ele
  INVENTA quebra.
  ------------------------------------------------------------------------------------------------
*/

/*
  A TINTA do que é público — www.hugi.com.br e o centro de ajuda em /ajuda.

  Este arquivo nasceu dentro do `site.css`, e saiu de lá em 2026-08-14 por um motivo concreto: o
  centro de ajuda é a MESMA superfície pública, lida pelo mesmo visitante, muitas vezes na mesma
  sessão. Dois conjuntos de valores derivariam, e a primeira pessoa a descobrir seria alguém que
  clicou em "Ajuda" e sentiu a queda de um site para outro — que é exatamente o defeito que o §8.3
  do `docs/mercado/zpro.md` aponta no concorrente.

  ------------------------------------------------------------------------------------------------
  POR QUE ELE CONTINUA SEM IMPORTAR O `vidro.css` DO PRODUTO

  A justificativa é a do `site.css`, e não mudou: o `vidro.css` define classes que pressupõem
  Tailwind ao lado, e nenhuma página pública carrega Tailwind. E a página pública não deve mudar de
  aparência porque o produto mudou — um ajuste de contraste no inbox não pode repintar a landing sem
  ninguém olhar.

  A tinta é a mesma da palheta do produto (Meta 20% mais clara), e o método está no `vidro.css`:

      clara = oficial × 0.80 + branco × 0.20

  Quando a palheta mudar, os valores abaixo mudam à mão — de propósito, com alguém olhando a página.
  ------------------------------------------------------------------------------------------------
*/

:root {
  --azul: #3383e6;
  /*
    Os dois azuis de LEGIBILIDADE, acrescentados em 2026-08-14 porque a página no ar reprovava AA
    em 19 pontos com `--azul` como texto e em 3 com branco sobre ele. Medido na página, não suposto.

    A causa é a decisão dos 20% mais claros — e ela continua valendo. O que estava errado era usar
    UM azul para três funções. Nenhuma cor nova entra: as duas saem do método da palheta.

      --azul         superfície de MARCA (borda, filete, gráfico)
      --azul-forte   fundo que carrega TEXTO BRANCO — é o oficial da Meta, e dá 5,39:1
      --azul-texto   o azul LIDO como texto; muda com o tema, porque um azul só não serve nos dois

    `--azul-forte` não muda no escuro: branco sobre ele passa nos dois. Já `--azul-texto` precisa
    inverter — no escuro é o método aplicado DUAS vezes (#3383e6 x 0,8 + branco x 0,2), que dá o
    tom claro o bastante para ser lido sobre o quase-preto.
  */
  --azul-forte: #0064e0;
  --azul-texto: #0064e0;
  --azul-face: #4692f5;
  --verde: #51dc85;
  --roxo: #cd5d9d;
  --atencao: #b8862a;
  --atencao-clara: #fdf4e0;

  --fundo: #e9edf2;
  --papel: #ffffff;
  --tinta: #49555c;
  /* Era #7c888e, e reprovava AA em 41 pontos desta página (pior caso 3,10:1). É a cor de todo
     texto secundário do site e da ajuda. Mesma correção que o produto recebeu no `vidro.css`. */
  --tinta-fraca: #5f6a71;
  --tinta-forte: #2f383d;

  /* O painel escuro é a tinta-forte usada como superfície. Os tons "sobre-navy" são véus de
     branco sobre ela — mesmo método dos véus do vidro, nenhuma cor nova. */
  --navy: #2f383d;
  --navy-tinta: rgba(255, 255, 255, 0.92);
  /* 0.72 e nao 0.62: medido no painel do heroi, o veu de 0.62 compoe para um cinza que da
     **4,09:1** contra a superficie — abaixo de AA, e vale para a chamada e as ressalvas, que sao a
     primeira coisa que o comprador le. Com 0.72 passa de 4,5. Nenhuma cor nova: e' o mesmo branco,
     com o veu mais fechado. */
  --navy-tinta-fraca: rgba(255, 255, 255, 0.72);
  /*
    O TOM MAIS APAGADO QUE AINDA SE LE sobre o navy — hoje, o comentario do terminal da API.

    ⚠️ Ele existe para que ninguem precise escrever `opacity` sobre um texto que ja' tem alfa, que
    e' exatamente como o defeito nasceu: `.t-comentario` tinha `opacity: 0.55` POR CIMA do
    `--navy-tinta-fraca` (0.72), e os dois se MULTIPLICAM — alfa efetivo 0,396, **3,66:1**.

    **Opacidade nao e' um tom: e' um multiplicador do tom que ja' esta la'.** Quem escreve 0.55
    supoe estar pedindo "um pouco mais claro" e esta' pedindo 55% do que sobrou.

    Medido sobre o fundo real do terminal (preto a 35% sobre o navy): 0.55 da' **5,70:1**, contra
    8,73 do texto normal do `<pre>` — continua visivelmente mais apagado, e se le.
  */
  --navy-tinta-apagada: rgba(255, 255, 255, 0.55);
  --navy-veu: rgba(255, 255, 255, 0.08);
  --navy-veu-borda: rgba(255, 255, 255, 0.14);

  --vidro: rgba(255, 255, 255, 0.62);
  --vidro-borda: rgba(255, 255, 255, 0.8);

  /*
    ⚠️ LINHA — a borda que SEPARA sobre fundo claro, e ela existe porque `--vidro-borda` não separa.

    `--vidro-borda` é branca a 80%: ela desenha o brilho de vidro sobre o painel NAVY, e é certa lá.
    Sobre a página clara ela some — medido em 01/09 na tela de contratação, onde cartão e campo
    ficavam a **1,18:1** do fundo e a página inteira lia como um borrão.

    Derivada da tinta com alfa, para acompanhar o tema em vez de ser um cinza escolhido a olho:
      --linha       = tinta a 14%  — separa cartão do fundo
      --linha-forte = tinta a 22%  — desenha CAMPO, que precisa ler como campo
  */
  /*
    ⚠️ AZUL PROFUNDO — o painel da contratação, escolhido pelo owner em 2026-09-01.

    É o MESMO `--azul-forte` (#0064e0) multiplicado por 0,42, com um toque de luz nos canais para
    não fechar em preto. Nenhuma cor nova entra na paleta: é a cor da marca, mais escura.

    Ele carrega TEXTO BRANCO por definição, e por isso vem medido: branco dá **12,12:1** e o texto a
    72% dá **7,01:1** — os dois passam AA com folga. Como `--acao-forte`, ele é superfície e nunca
    cor de texto: sobre a página clara daria 12:1 de leitura desconfortável, e sobre o tema escuro
    desapareceria.
  */
  --azul-profundo: #063470;

  --linha: rgba(28, 43, 51, 0.14);
  --linha-forte: rgba(28, 43, 51, 0.22);
  --vidro-borda-baixo: rgba(28, 43, 51, 0.08);
  /*
    ⚠️ O PAPEL DO QR É BRANCO NOS DOIS TEMAS, e isso é técnico, não estético.

    Leitor de Pix procura módulos ESCUROS sobre fundo CLARO. O PNG que o Asaas devolve é preto sobre
    transparente — pousado no cartão do tema escuro, ele vira preto sobre quase-preto e **a câmera
    do banco não lê**. Um QR que não lê não é um defeito de contraste: é uma venda que não acontece.

    Por isso ele não usa `--papel` (que vira `#262728` no escuro) e sim um branco declarado, que é o
    único lugar do site onde a cor NÃO acompanha o tema de propósito.
  */
  --qr-papel: #ffffff;
  --raio: 17px;
  --raio-painel: 28px;

  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(28, 43, 51, 0.07),
    0 12px 28px rgba(28, 43, 51, 0.1), 0 32px 64px rgba(28, 43, 51, 0.08);
  --sombra-baixa: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(28, 43, 51, 0.06),
    0 4px 10px rgba(28, 43, 51, 0.05);
  --sombra-navy: 0 2px 6px rgba(28, 43, 51, 0.12), 0 16px 40px rgba(28, 43, 51, 0.18),
    0 40px 80px rgba(28, 43, 51, 0.12);

  --largura: 68rem;

  /*
    ---- A TINTA DAS VINHETAS ----

    As ilustrações do produto (`.retrato-*`, `.vin-*`) são FIGURAS — `role="img"` no HTML — e
    mostram o Hugi no tema claro. Elas **não viram com o tema do site**, do mesmo jeito que uma
    captura de tela não viraria: o cartão continua branco, então a tinta precisa continuar escura.

    Por isso estes tokens NÃO entram no bloco `prefers-color-scheme: dark`. A ausência é decisão.
    Sem isso o texto da vinheta clareia no tema escuro e some no cartão branco — foi exatamente o
    que aconteceu ao trocar os hex crus por tokens em 14/08, e o pior caso deu 1,01:1.

    Os valores são os da palheta corrigida, fixos.
  */
  --vin-papel: #ffffff;
  --vin-tinta: #49555c;
  --vin-tinta-fraca: #5f6a71;
  --vin-tinta-forte: #2f383d;
  --vin-ambar: #b8862a;
  --vin-ambar-clara: #fdf4e0;
}

:root[data-theme="escuro"] {
  --fundo: #131415;
  --papel: #262728;
  --tinta: #e4e6eb;
  --tinta-fraca: #a8b1b7;
  /* No escuro o azul de texto INVERTE: método da palheta aplicado duas vezes. */
  --azul-texto: #6aa4ee;
  --tinta-forte: #f5f6f7;
  /* O navy continua navy: o painel é marca, não superfície de app. Só a sombra pesa mais. */
  --vidro: rgba(60, 62, 64, 0.55);
  --vidro-borda: rgba(255, 255, 255, 0.09);

  /* No escuro a separação vem da LUZ, não da sombra: o mesmo papel, invertido. */
  /* No escuro o painel precisa SUBIR do fundo (#131415), não afundar nele. */
  --azul-profundo: #0a3f83;

  --linha: rgba(255, 255, 255, 0.14);
  --linha-forte: rgba(255, 255, 255, 0.24);
  --vidro-borda-baixo: rgba(0, 0, 0, 0.35);
  --atencao: #f9c753;
  --atencao-clara: rgba(249, 199, 83, 0.15);
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.4), 0 32px 64px rgba(0, 0, 0, 0.3);
  --sombra-baixa: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.25);
  --sombra-navy: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45),
    0 40px 80px rgba(0, 0, 0, 0.35);
}

/*
  ---- O SELETOR DE TEMA (2026-09-07) ----

  Mora aqui, e não no `site.css`, porque tem DOIS consumidores: o site e o centro de ajuda (que
  importa esta folha). Uma regra, dois lugares — o mesmo motivo que trouxe os tokens para cá.

  Ele é desenhado com o vocabulário que já existe: `--linha` na moldura, `--tinta-fraca` no que não
  está escolhido, e `--azul-texto` no que está. **Nenhum token novo, e nenhum valor de cor cru** — o
  fundo do escolhido é o próprio `--azul-texto` a 12%, que acompanha a virada do azul no escuro.
*/
.tema-seletor {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
}

.tema-opcao {
  border: 0;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--tinta-fraca);
  background: transparent;
  cursor: pointer;
}

.tema-opcao:hover {
  color: var(--tinta);
}

/* O escolhido carrega TEXTO, então usa `--azul-texto` e não `--azul`: o segundo é a cor da marca,
   e como texto ele reprova AA — a mesma distinção que o painel fez em 02/09. */
.tema-opcao[aria-checked="true"] {
  color: var(--azul-texto);
  background: color-mix(in srgb, var(--azul-texto) 12%, transparent);
  font-weight: 600;
}

.tema-opcao:focus-visible {
  outline: 2px solid var(--azul-texto);
  outline-offset: 2px;
}

/* O rótulo ao lado do controle, e a linha própria das páginas de fluxo, que não têm rodapé. */
.tema-rotulo {
  margin-right: 0.5rem;
  color: var(--tinta-fraca);
}

.tema-avulso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.82rem;
}


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

:root {
  --sumario: 15.5rem;
  --indice: 13rem;
  --coluna: 42rem;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    sans-serif;
  color: var(--tinta);
  background-color: var(--fundo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--papel);
  color: var(--tinta-forte);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--raio) 0;
}
.pular:focus {
  left: 0;
}

a {
  color: var(--azul-texto);
}

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

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--vidro-borda-baixo);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta-forte);
  text-decoration: none;
  font-size: 1.02rem;
  white-space: nowrap;
}
.marca strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.marca span {
  font-weight: 400;
  color: var(--tinta-fraca);
}
.marca strong + span,
.marca span strong {
  color: inherit;
}

.topo-links {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  white-space: nowrap;
}
.topo-links a {
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.92rem;
}
.topo-links a:hover {
  color: var(--azul-texto);
}

/* ---------------------------------------------------------------------------------------------
   A busca
   --------------------------------------------------------------------------------------------- */

.busca {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
}

.busca input {
  width: 100%;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--tinta-forte);
  background: var(--fundo);
  border: 1px solid var(--vidro-borda-baixo);
  border-radius: 10px;
}
.busca input:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.busca-resultados {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--vidro-borda-baixo);
  border-radius: var(--raio);
  box-shadow: var(--sombra-baixa);
  padding: 0.35rem;
}

.busca-resultados a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--tinta);
}
.busca-resultados a:hover,
.busca-resultados a.marcado {
  background: var(--fundo);
}
.busca-resultados strong {
  display: block;
  color: var(--tinta-forte);
  font-size: 0.94rem;
}
.busca-resultados span {
  display: block;
  font-size: 0.82rem;
  color: var(--tinta-fraca);
}
/* A seção aparece no resultado porque duas páginas podem ter títulos parecidos em áreas diferentes
   ("Etiquetas" em Atender e em Cadastros seria o caso). */
.busca-resultados em {
  font-style: normal;
  color: var(--azul-texto);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.busca-vazio {
  padding: 0.7rem 0.6rem;
  font-size: 0.88rem;
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------------------------------------
   A grade
   --------------------------------------------------------------------------------------------- */

.pagina {
  display: grid;
  grid-template-columns: var(--sumario) minmax(0, 1fr) var(--indice);
  gap: 2.5rem;
  max-width: 86rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  align-items: start;
}

/* Página sem "nesta página" — o índice geral e as páginas curtas. Sem isto a terceira coluna
   continua reservada e a página abre com 13rem de vazio à direita do conteúdo. */
.pagina-sem-indice {
  grid-template-columns: var(--sumario) minmax(0, 1fr);
}

.abrir-sumario {
  display: none;
}

/* ---------------------------------------------------------------------------------------------
   O sumário
   --------------------------------------------------------------------------------------------- */

.sumario {
  position: sticky;
  top: 4.2rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.sumario-secao + .sumario-secao {
  margin-top: 1.4rem;
}

.sumario-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-fraca);
}

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

.sumario a {
  display: block;
  padding: 0.28rem 0.6rem;
  margin-left: -0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--tinta);
  text-decoration: none;
}
.sumario a:hover {
  background: var(--papel);
  color: var(--tinta-forte);
}
.sumario a[aria-current="page"] {
  background: var(--papel);
  color: var(--tinta-forte);
  font-weight: 600;
  box-shadow: var(--sombra-baixa);
}

/* ---------------------------------------------------------------------------------------------
   O artigo
   --------------------------------------------------------------------------------------------- */

.artigo {
  min-width: 0;
}

.artigo h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--tinta-forte);
}

.artigo h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
  font-weight: 650;
  color: var(--tinta-forte);
}

.artigo h3 {
  margin: 1.9rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--tinta-forte);
}

/* A âncora só aparece quando o ponteiro está no título — e fica sempre visível para o teclado, senão
   quem navega por foco não tem como saber que ela existe. */
.ancora {
  color: var(--tinta-fraca);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}
h2:hover .ancora,
h3:hover .ancora,
.ancora:focus {
  opacity: 1;
}

/*
  `pretty`, e NÃO `balance` — e a diferença é a lição de 12/08 aplicada ao caso oposto.

  Medido com `Range.getClientRects()` nas três larguras: sem isto, dezenas de parágrafos de duas
  linhas terminavam com uma cauda de 5% a 20% da largura. Uma palavra sozinha embaixo de uma linha
  cheia, e em prosa corrida isso acontece o tempo todo.

  `balance` estaria errado aqui: ele iguala TODAS as linhas, e num parágrafo de oito linhas isso
  encurta as oito para arrumar a última — além de o Chrome o ignorar acima de seis linhas, o que
  faria a regra valer só em parágrafo curto e não valer no resto. `pretty` mexe apenas no fim do
  bloco, que é exatamente onde está o defeito.
*/
.artigo p,
.artigo li {
  max-width: var(--coluna);
  text-wrap: pretty;
}

.artigo p {
  margin: 0 0 1rem;
}

.artigo .entrada {
  font-size: 1.1rem;
  color: var(--tinta);
  max-width: 46rem;
}

.artigo ul,
.artigo ol {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
}
.artigo li {
  margin-bottom: 0.4rem;
}
.artigo li > ul,
.artigo li > ol {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}

.artigo strong {
  color: var(--tinta-forte);
  font-weight: 650;
}

.artigo code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--papel);
  border: 1px solid var(--vidro-borda-baixo);
  border-radius: 6px;
  padding: 0.08em 0.34em;
}

/* Bloco de código rola sozinho. Sem isto, uma linha longa de exemplo de `curl` estica a grade e a
   página inteira ganha rolagem horizontal — no celular, sempre. */
.artigo pre {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  background: var(--navy);
  border-radius: var(--raio);
  box-shadow: var(--sombra-baixa);
}
.artigo pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--navy-tinta);
  font-size: 0.85rem;
  line-height: 1.6;
}

.artigo blockquote {
  margin: 0 0 1.2rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--vidro-borda-baixo);
  color: var(--tinta-fraca);
}

.artigo hr {
  margin: 2.4rem 0;
  border: 0;
  border-top: 1px solid var(--vidro-borda-baixo);
}

/* A tabela ocupa a coluna inteira e rola dentro do próprio contêiner. */
.artigo table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
}
.artigo th,
.artigo td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--vidro-borda-baixo);
}
.artigo th {
  color: var(--tinta-forte);
  font-weight: 650;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   Os blocos de destaque
   --------------------------------------------------------------------------------------------- */

.bloco {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.15rem 0.3rem;
  max-width: var(--coluna);
  border-radius: var(--raio);
  border: 1px solid var(--vidro-borda-baixo);
  background: var(--papel);
}
.bloco p:last-child,
.bloco ul:last-child,
.bloco ol:last-child {
  margin-bottom: 0.75rem;
}

.bloco-rotulo {
  margin: 0 0 0.35rem !important;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.bloco-nota .bloco-rotulo {
  color: var(--azul-texto);
}

.bloco-cuidado {
  background: var(--atencao-clara);
  border-color: var(--tinta-forte);
}
.bloco-cuidado .bloco-rotulo {
  color: var(--tinta-forte);
}

/*
  "O Hugi ainda não faz isto" tem caixa PRÓPRIA, e essa é a decisão de produto deste arquivo.

  Todo centro de ajuda que olhamos escreve o que o produto faz e cala o que ele não faz, e o cliente
  descobre no meio de um atendimento. Aqui a ausência tem a mesma dignidade tipográfica que o
  recurso: rótulo, caixa e lugar na página. É a mesma regra dos dez estados obrigatórios do produto,
  aplicada ao texto.
*/
.bloco-naoexiste {
  background: none;
  border-style: dashed;
}
.bloco-naoexiste .bloco-rotulo {
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------------------------------------
   O índice do índice
   --------------------------------------------------------------------------------------------- */

.nesta-pagina {
  position: sticky;
  top: 4.2rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  font-size: 0.85rem;
}
.nesta-pagina-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tinta-fraca);
}
.nesta-pagina ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--vidro-borda-baixo);
}
.nesta-pagina a {
  display: block;
  padding: 0.22rem 0 0.22rem 0.8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--tinta-fraca);
  text-decoration: none;
  line-height: 1.4;
}
.nesta-pagina a:hover {
  color: var(--tinta-forte);
}
.nesta-pagina a.ativo {
  color: var(--tinta-forte);
  border-left-color: var(--azul-texto);
}

/* ---------------------------------------------------------------------------------------------
   O índice geral (a home da ajuda)
   --------------------------------------------------------------------------------------------- */

.grupo {
  margin-top: 2.8rem;
}
.grupo h2 {
  margin-bottom: 0.3rem;
}
.grupo-descricao {
  color: var(--tinta-fraca);
  margin-bottom: 1rem;
}

.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.7rem;
}
.cartoes li {
  max-width: none;
  margin: 0;
}
.cartoes a {
  display: block;
  height: 100%;
  padding: 0.85rem 1rem;
  background: var(--papel);
  border: 1px solid var(--vidro-borda-baixo);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta-fraca);
  box-shadow: var(--sombra-baixa);
}
.cartoes a:hover {
  border-color: var(--azul-texto);
}
.cartoes strong {
  display: block;
  color: var(--tinta-forte);
  font-weight: 650;
  margin-bottom: 0.15rem;
}
.cartoes span {
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------------------------
   O pé do artigo
   --------------------------------------------------------------------------------------------- */

.atualizado {
  margin: 3rem 0 1.2rem;
  font-size: 0.84rem;
  color: var(--tinta-fraca);
}

.vizinhas {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--vidro-borda-baixo);
  padding-top: 1.2rem;
}
.vizinha {
  display: block;
  max-width: 20rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--vidro-borda-baixo);
  border-radius: var(--raio);
  background: var(--papel);
  text-decoration: none;
}
.vizinha-direita {
  text-align: right;
}
.vizinha span {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.vizinha strong {
  color: var(--tinta-forte);
  font-weight: 600;
}

.rodape {
  border-top: 1px solid var(--vidro-borda-baixo);
  padding: 2rem 1.5rem 3rem;
  background: var(--papel);
}
/*
  O rodapé é a faixa larga com texto curto — a forma exata do defeito que a sessão de 12/08 caçou no
  site público. Medido: sem `balance`, a nota fechava com uma cauda de 13% da largura em TODAS as
  páginas, porque ela é a mesma frase repetida trinta vezes.

  Aqui `balance` é o conserto e não o defeito: são duas ou três linhas, a quebra é inevitável nessa
  medida, e igualá-las é o que se quer.
*/
.rodape p {
  max-width: 52rem;
  margin: 0 auto 0.5rem;
  text-wrap: balance;
}
.rodape-nota {
  font-size: 0.86rem;
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------------------------------------
   As telas estreitas
   --------------------------------------------------------------------------------------------- */

@media (max-width: 74rem) {
  .pagina {
    grid-template-columns: var(--sumario) minmax(0, 1fr);
    gap: 2rem;
  }
  .nesta-pagina {
    display: none;
  }
}

@media (max-width: 52rem) {
  .topo {
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    padding: 0.6rem 1rem;
  }
  .busca {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .topo-links {
    gap: 1rem;
  }

  .pagina {
    display: block;
    padding: 1.2rem 1rem 3rem;
  }

  /*
    O sumário vira gaveta. Ele é `hidden` por atributo e não por classe: assim, se o JavaScript não
    carregar, o atributo continua lá e o botão simplesmente não abre — em vez de a página abrir com
    trinta links empilhados antes do primeiro parágrafo, que é a versão sem CSS deste componente e é
    pior que não ter.
  */
  .abrir-sumario {
    display: block;
    width: 100%;
    margin: 1rem 1rem 0;
    width: calc(100% - 2rem);
    padding: 0.6rem 1rem;
    text-align: left;
    font: inherit;
    font-size: 0.92rem;
    color: var(--tinta-forte);
    background: var(--papel);
    border: 1px solid var(--vidro-borda-baixo);
    border-radius: var(--raio);
  }
  .abrir-sumario::after {
    content: " ▾";
    color: var(--tinta-fraca);
  }
  .abrir-sumario[aria-expanded="true"]::after {
    content: " ▴";
  }

  .sumario {
    position: static;
    max-height: none;
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--papel);
    border: 1px solid var(--vidro-borda-baixo);
    border-radius: var(--raio);
  }
  .sumario[hidden] {
    display: none;
  }

  /* Título de duas linhas numa tela de 375px é inevitável — aqui `balance` iguala as linhas em vez
     de deixar uma palavra sozinha. É o único lugar em que ele é o conserto e não o defeito. */
  .artigo h1,
  .artigo h2 {
    text-wrap: balance;
  }

  .vizinhas {
    flex-direction: column;
  }
  .vizinha {
    max-width: none;
  }
  .vizinha-direita {
    text-align: left;
  }
}