/* ===========================================================================
   DESIGN SYSTEM: a única fonte de cor, espaço, raio, sombra, movimento e camada
   ---------------------------------------------------------------------------
   Bloco B3. Até 13/08/2026 o design system existia só como documento: as três
   páginas principais somavam 208 cores em hexadecimal escritas à mão, enquanto
   `design-system.md` e `brand-guidelines.md` diziam "todo componente consome
   tokens, nunca cores hardcoded". Documento que o código contradiz é o defeito
   mais comum desta casa, e este arquivo é a correção.

   COMO USAR: `<link rel="stylesheet" href="/assets/design-system.css">` antes
   de qualquer <style> da página. Daí em diante, cor nova no CSS entra como
   `var(--primaria)`, e há teste que reprova hexadecimal cru dentro de <style>
   (`testes/design-system.teste.js`).

   LIMITE CONHECIDO, registrado em vez de escondido: os SVGs das páginas usam
   `fill="#7C5CFF"` como ATRIBUTO de apresentação, e `var()` não funciona em
   atributo de SVG, só em CSS. As ~90 ocorrências desse tipo continuam cruas e
   têm cartão próprio (DS3). Trocá-las exige mover o preenchimento para classe
   CSS, o que muda a marcação de cada ilustração.

   Fonte dos valores: brand-guidelines.md (cor e tipografia) e
   design-system.md §2 (espaço, raio, sombra, movimento, camada). Mudou aqui?
   Muda lá no mesmo commit, e vice-versa.
   =========================================================================== */

:root {
  /* --- Cor: marca ------------------------------------------------------- */
  --primaria: #7C5CFF;          /* violeta elétrico: ação, foco, marca */
  --primaria-clara: #8D70FF;    /* estado :hover da primária */
  --primaria-escura: #6A4CF0;   /* estado :active */
  --primaria-funda: #5B3DF0;    /* fundo de bloco primário */
  /* Violeta que pode ser TEXTO. Medido em 19/08/2026 sobre as três superfícies
     do tema (fundo, cartão, flutuante), porque um violeta que passa sobre o
     fundo escuro pode reprovar sobre o cartão: --primaria dá 4,06 e
     --primaria-clara 4,33 sobre --fundo-3. Este dá 6,41 / 5,73 / 5,17. Sem ele
     o parecer de 18/08 deixou rótulos violeta virarem cinza para não reprovar. */
  --primaria-texto: #9B82FF;
  --secundaria: #22D3EE;        /* ciano: apoio, link, destaque frio */
  --acento: #FF6B4A;            /* coral: jogo, celebração, urgência */
  --acento-claro: #FF8A6E;
  --acento-suave: #FFB199;

  /* --- Cor: estado ------------------------------------------------------ */
  --sucesso: #34D399;
  --alerta: #FBBF24;
  --alerta-claro: #FDE68A;
  --alerta-suave: #FEEDBA;

  /* --- Cor: superfície e texto ------------------------------------------ */
  --fundo: #0B0F1A;             /* quase-preto azulado */
  --fundo-2: #141B2E;           /* cartão, bloco elevado */
  --fundo-3: #1B2340;           /* superfície sobre cartão (parecer 18/08) */
  --texto: #F8FAFC;
  --texto-2: #B9C4D6;
  --texto-3: #94A3B8;           /* apoio, legenda */
  --texto-4: #64748B;           /* SÓ desabilitado, nunca texto de leitura */

  /* --- Borda: duas opacidades, nenhuma outra -----------------------------
     A promessa de "≥3:1" precisou de conta, não de intenção. Medido em
     19/08/2026, compondo o alfa sobre --fundo: a .32 a borda forte dava
     1,78:1; abaixo do mínimo que a WCAG 1.4.11 pede para o contorno de um
     controle, e o comentário anterior afirmava o contrário. A .55 dá 3,01:1.
     No tema claro a conta é outra e mora no bloco do tema: .22 dava 1,60:1 e
     .48 dá 3,18:1. Mexeu no alfa? Mede de novo: o número é o que vale. */
  --borda: rgb(148 163 184 / .16);        /* cartão, divisor: decorativa */
  --borda-forte: rgb(148 163 184 / .55);  /* campo, botão fantasma: 3,01:1 */

  /* --- Gradiente-assinatura: existe como token, não reescrito ------------ */
  --espectro: linear-gradient(90deg, #FF6B4A, #22D3EE, #7C5CFF);
  --espectro-grafico: var(--espectro);    /* no claro os dois divergem */

  /* --- Botão primário: tokens SEMÂNTICOS, e não é preciosismo -----------
     `--primaria-funda` é o preenchimento no escuro, mas INVERTE de papel no
     claro (vira superfície tingida #ECE4FF). Página que escreve
     `background:var(--primaria-funda);color:#fff` fica com 1,23:1 no claro:
     medido em 19/08. Quem pinta botão usa estes dois nomes e atravessa os
     dois temas sem saber de nenhum deles. */
  --btn-fundo: var(--primaria-funda);       /* branco sobre ele: 6,23:1 */
  --btn-fundo-hover: var(--primaria);
  --btn-texto: #FFFFFF;

  /* --- Espaço: escala de 4, sem valor fora dela ------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;  --e-9: 96px;

  /* --- Raio -------------------------------------------------------------- */
  --r-p: 8px;                   /* selo, marcador */
  --r-m: 16px;                  /* botão, campo */
  --r-g: 24px;                  /* cartão, bloco de etapa */
  --r-total: 999px;

  /* --- Elevação: sombra sempre azulada, nunca preta pura ----------------- */
  --sombra-1: 0 1px 2px rgb(11 15 26 / .24);
  --sombra-2: 0 4px 16px rgb(11 15 26 / .28);
  --sombra-3: 0 12px 40px rgb(11 15 26 / .36);

  /* --- Movimento --------------------------------------------------------- */
  --t-rapido: 120ms;            /* retorno de toque */
  --t-medio: 240ms;             /* troca de estado */
  --t-lento: 420ms;             /* entrada de bloco, refração */
  --mola: cubic-bezier(.22, 1, .36, 1);

  /* --- Camadas: nunca escrever z-index fora desta lista ------------------ */
  --z-base: 0;
  --z-flutuante: 10;
  --z-cabecalho: 100;
  --z-sobreposicao: 1000;
  --z-aviso: 2000;

  /* --- §24 ESCALA TIPOGRÁFICA: um degrau por nível ------------------------
     O DEFEITO, medido em `/ferramentas/` nos três portes: o h2 de seção e o
     h3 de cartão tinham 20px os dois, mesma fonte, mesmo peso 700. Três níveis
     de título, dois tamanhos. E abaixo de 909px de tela o h1 da página também
     cai para 20 (o `clamp` de `.fj-nome`), então de 375 a 909 os TRÊS níveis
     medem 20px iguais.

     A ESCALA, e de onde ela vem: 12 · 14 · 16 · 20 · 24 · 28. É a faixa
     superior da escala do Atlassian (heading.xlarge 28, large 24, medium 20,
     small 16) e o mesmo desenho do Carbon (28 · 20 · 16) e do Primer (32 · 20
     · 16): nenhum design system de produto repete o mesmo valor em dois níveis
     consecutivos de título, e o menor degrau que qualquer um deles pratica na
     faixa de 16 a 28 é de 4px. Por isso o 24: separa da página (28) e do
     cartão (20) pelo degrau mínimo praticado, dos dois lados, sem tocar no h1.

     POR QUE OS DOIS DE CIMA SÃO FLUIDOS E O DO CARTÃO É FIXO: o de seção sobe
     sempre mais devagar que o da página (3,4vw contra 4vw, com o mesmo piso),
     então em largura nenhuma o título de seção ultrapassa o da página; o do
     cartão é fixo porque o §18.1 CALCULA a reserva de duas linhas a partir
     dele, e reserva que muda com a tela deixaria de ser uma régua.

     POR QUE 4vw E NÃO OS 2,2vw DE ANTES: com 2,2vw o título de página só
     chegava aos 28 a partir de 1273px de tela, e a 768 valia 20, o mesmo do
     cartão. O piso de 20 é real e medido, mas só abaixo de 600 (ver o comentário
     em `nucleo/rodape.css`, no @media de 600); entre 600 e 1273 ele não estava
     defendendo nada. Com 4vw os 28 chegam a partir de 700px, e o degrau completo
     28 · 24 · 20 vale a 768, a 1280 e acima. */
  --tipo-titulo-pagina: clamp(20px, 4vw, 28px);
  --tipo-titulo-secao:  clamp(20px, 3.4vw, 24px);
  --tipo-titulo-cartao: 20px;
  --tipo-corpo:  16px;
  --tipo-apoio:  14px;
  --tipo-micro:  12px;

  /* --- Tipografia do telão: o produto é usado em projetor ---------------- */
  --telao-titulo: clamp(2.5rem, 5vw, 4.5rem);
  --telao-numero: clamp(3rem, 8vw, 7rem);
  --telao-apoio: clamp(1.1rem, 1.6vw, 1.5rem);

  /* --- Alvo de toque (RNF-051) ------------------------------------------- */
  --toque-min: 44px;            /* mínimo absoluto */
  --toque-jogo: 54px;           /* botão dentro de jogo */
  --toque-acao: 58px;           /* ação principal, largura do bloco */
}

/* Quem pediu menos movimento recebe menos movimento, sem exceção. A regra
   mora aqui, e não em cada página, para não depender de alguém lembrar. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-rapido: 0ms; --t-medio: 0ms; --t-lento: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* O fundo mora no `html`, não só no `body`.
   ---------------------------------------------------------------------------
   Quando só o `body` pinta, o navegador propaga a cor para a canvas e o `body`
   passa a computar como transparente. A tela fica igual, mas ferramenta que
   mede contraste lendo o computado perde a referência de fundo. Declarar aqui
   custa uma linha, não muda um pixel, e tira a ambiguidade da leitura. */
html { background: var(--fundo); }

/* Foco visível: UMA regra para o produto inteiro (parecer 18/08, ajuste #01).
   `outline` e não `box-shadow`: não ocupa espaço e não mexe no layout. As
   páginas não desenham anel próprio: apagaram os locais quando esta regra
   nasceu.
   O ANEL NÃO SOBREVIVE A OVERFLOW (BV26, 10/09/2026). A frase antiga dizia o
   contrário, e a medição nos dois motores a desmentiu: o `outline` é pintura
   do próprio elemento, e a caixa ancestral com `overflow` diferente de
   `visible` o recorta como recorta qualquer pintura dele. O anel sai 5px da
   caixa (3 de largura e 2 de afastamento); o focável que encosta na borda de
   uma caixa que recorta perde esses 5px. Duas saídas, e só elas:
   - a caixa que ROLA dá 8px de folga por dentro, devolvidos pela margem (a
     fileira que rola, no `rodape.css`; a lista do índice, §26 abaixo);
   - a caixa que só RECORTA (cantos redondos, faixa de abas) põe o anel para
     dentro do focável que encosta nela: afastamento de -3px e o raio da
     caixa, para o canto redondo não comer a ponta do anel.
   Quem vigia é `testes/e2e/anel-de-foco.spec.js`, em toda página. */
:focus-visible {
  outline: 3px solid var(--secundaria);
  outline-offset: 2px;
}
/* O anel para dentro, nas caixas da base que recortam e têm focável na borda:
   o resumo do guia "Como funciona" (`.guia`, raio grande), as abas do passo a
   passo encenado (`.palco-fases`, raio grande) e os botões de menos e mais do
   `.stepper` (`formulario.css`, raio médio). Sem estas linhas o anel perdia
   5px de três lados em 13 páginas, nos dois motores (medido em 10/09). O raio
   só vale com o foco: sem ele o fundo dessas peças é transparente ou já é
   recortado pelo canto da caixa. */
:where(.guia > summary, .palco-fases .pf-aba):focus-visible {
  outline-offset: -3px;
  border-radius: calc(var(--r-g) - 1px);
}
:where(.stepper button):focus-visible {
  outline-offset: -3px;
  border-radius: calc(var(--r-m) - 1px);
}
/* O "Fechar" do Entrar (`entrar.css`): no telefone ele é a barra de topo,
   grudada e encostada nas bordas da caixa que rola, e o anel perdia 5px à
   esquerda, à direita e em cima, nos dois motores. Para dentro sempre, e não
   só no telefone: assim esta folha não copia o ponto de quebra do componente.
   No modal de mesa o X continua com o anel inteiro, só que por dentro. */
:where(.en-fechar):focus-visible {
  outline-offset: -3px;
}

/* ===========================================================================
   TEMA CLARO: mapa do parecer de 18/08/2026, contrastes verificados lá.
   O escuro continua em :root e é o tema explícito; o claro é o MESMO conjunto
   de nomes com outros valores: página nenhuma conhece cor literal, então
   página nenhuma muda uma linha. Espaço, raio, movimento, camada, toque e
   telão não mudam: o tema é só cor.
   Papéis que INVERTEM no claro, de propósito:
   - --primaria-funda vira a superfície tingida de bloco primário (#ECE4FF);
     preenchimento de botão primário no claro é --primaria (branco a 5,3:1).
   - --primaria-clara vira borda/gráfico, não é cor de texto no claro.
   - #0891B2 e #E14F2A (os valores do guia) passam a *-grafico: passam como
     gráfico (≥3:1), reprovam como texto; o texto usa #0E7490 e #C2410C. */
:root, [data-tema="escuro"] { color-scheme: dark; }
[data-tema="claro"] {
  --fundo: #F8FAFC;  --fundo-2: #FFFFFF;  --fundo-3: #EEF2F7;
  --texto: #0B0F1A;  --texto-2: #334155;  --texto-3: #475569;  --texto-4: #94A3B8;
  --primaria: #6D45FF;        --primaria-clara: #8566FF;
  --primaria-escura: #5A32E6; --primaria-funda: #ECE4FF;
  --primaria-texto: #6D45FF;      /* 5,09 / 5,32 / 4,73 */
  --secundaria: #0E7490;
  --acento: #C2410C;          --acento-claro: #E14F2A;  --acento-suave: #FFE9E2;
  --sucesso: #047857;         --alerta: #A16207;        --alerta-suave: #FEF3C7;
  --alerta-claro: #78350F;    /* texto sobre --alerta-suave no claro (13,2:1) */
  --borda: rgb(15 23 42 / .10);  --borda-forte: rgb(15 23 42 / .48);
  --sombra-1: 0 1px 2px rgb(15 23 42 / .06);
  --sombra-2: 0 4px 16px rgb(15 23 42 / .10);
  --sombra-3: 0 12px 40px rgb(15 23 42 / .16);
  --espectro: linear-gradient(90deg, #C2410C, #0E7490, #6D45FF);
  --espectro-grafico: linear-gradient(90deg, #E14F2A, #0891B2, #6D45FF);
  --btn-fundo: var(--primaria);        /* branco sobre #6D45FF: 5,3:1 */
  --btn-fundo-hover: var(--primaria-escura);
  --btn-texto: #FFFFFF;
  color-scheme: light;
}
/* Sem `data-tema`, a página é escura em qualquer sistema, decisão do dono em
   04/09/2026: "pode ser de acordo com a preferência da pessoa, mas o padrão
   deveria ser o escuro". O claro só entra por escolha explícita (botão do
   cabeçalho, que marca `data-tema="claro"` via nucleo/tema.js); não há bloco
   `prefers-color-scheme` de propósito. O telão (<html class="telao">) já era
   escuro por exceção e agora é escuro pelo padrão: a escolha explícita segue
   valendo nele também. */


/* ===========================================================================
   V2: GRADE, RITMO E LINHA-GUIA (parecer do Designer, 05/09/2026)
   ---------------------------------------------------------------------------
   Medido em 21 páginas × 2 larguras (interno/docs/melhorias/parecer-designer-
   2026-09-05.md): oito larguras de container (686 a 1280), o cabeçalho num
   nono (1400), o rodapé num décimo (1240); a 1280 o logo, o conteúdo e o
   rodapé começavam em três x diferentes em 20 de 21 páginas. Aqui nasce o
   container único e a escala de ritmo. As regras de anatomia que consomem
   estes tokens moram em `nucleo/rodape.css` (Arquiteto); as de campo em
   `componentes/formulario.css`. Página nenhuma escreve margin/padding em
   elemento do sistema: ela usa o componente. */
:root {
  /* --- Grade ------------------------------------------------------------ */
  --container: 1240px;          /* cabeçalho, conteúdo e rodapé: UM só */
  --gutter: var(--e-5);         /* 24: a margem do container ≥ 720px */
  --coluna-estreita: 760px;     /* tarefa única centrada na institucional (§25); não estreita ferramenta */
  --largura-lado: 360px;        /* o painel lateral da ferramenta a partir de 1100 (§25) */
  /* A largura do campo pelo que cabe nele (§13.1, 10/09/2026). O teto é o do
     maior campo medido nos SaaS pesquisados (Linear, 607px): nenhum estica
     campo até a coluna inteira. Quem compõe a fileira é `formulario.css`. */
  --campo-numero: 160px;        /* número, stepper: 3 ou 4 dígitos */
  --campo-curto: 240px;         /* select de opções curtas, data, hora, apelido */
  --campo-medio: 360px;         /* nome, e-mail, título */
  --campo-largo: 600px;         /* pergunta, frase, mensagem, lista */
  --campo-texto-min: 240px;     /* o piso da coluna de rótulo e ajuda ao lado do campo */
  --coluna-leitura: 68ch;       /* documento longo (privacidade, termos) */
  /* os moldes de nucleo/ leem estes dois; página não os redeclara */
  --largura-ferramenta: var(--container);
  --largura-pagina: var(--container);

  /* --- Ritmo vertical: quem está mais perto pertence ao mesmo grupo ------ */
  --ritmo-faixa: var(--e-5);    /* 24: faixa (com lead) → guia */
  --ritmo-guia: var(--e-6);     /* 32: guia → primeiro bloco */
  --ritmo-bloco: var(--e-6);    /* 32: bloco → bloco (entre grupos) */
  --ritmo-secao: var(--e-7);    /* 48: seção → seção na institucional */
  --ritmo-titulo: var(--e-3);   /* 12: título de bloco ↔ filete ↔ corpo (12+12) */
  --ritmo-paragrafo: var(--e-4);/* 16: parágrafo → campo, campo → campo */
  --ritmo-rotulo: var(--e-2);   /* 8: rótulo → campo, campo → ajuda/erro */
  /* O degrau que faltava, medido em 06/09/2026 (parecer-ritmo): o vão entre o
     fim do conteúdo e o rodapé era o ÚNICO acima de 96px em 15 das 18 páginas
     desta varredura, e era o maior nas 18. Ninguém o tinha declarado: ele
     nascia de dois valores em viewport empilhados, `.ferramenta/.pagina`
     padding-bottom 64 mais `.rhc-rodape` margin-top clamp(40px,8vh,90px). Por
     ser 8vh ele CRESCIA com a altura do monitor (129px numa janela curta,
     154px num monitor grande), que é exatamente onde o dono via o site frouxo.
     Agora é um degrau só da escala, em pixel, e o topo dela: nada entre blocos
     passa de 48. */
  --ritmo-rodape: var(--e-7);   /* 48: fim do conteúdo → filete do rodapé */

  /* --- Símbolo e ícone: uma régua ---------------------------------------- */
  --simbolo-faixa: 28px;        /* na faixa: 42 ÷ 28 = 1,5 de traço */
  --simbolo-catalogo: 24px;     /* no catálogo e no bloco de etapa */
  --icone-botao: 20px;          /* no botão de ação; 16 no auxiliar */
}
@media (max-width: 719px) { :root { --gutter: var(--e-4); } }   /* 16 */

/* Controle de formulário herda a fonte da página. Medido em 05/09: em 9
   páginas o campo saía em Arial porque `<input>` não herda `font`; a única
   Arial do produto. A regra é do sistema, não de cada campo. */
input, select, textarea, button { font: inherit; }
/* Rádio, caixa e progresso nativos que sobrarem seguem a marca (DV-07). */
:root { accent-color: var(--primaria); }

/* ---------------------------------------------------------------------------
   V2: ANATOMIA que consome os tokens acima. Só classes NOVAS ou propriedades
   que `nucleo/rodape.css` não declara (esta folha carrega antes dela): nada
   aqui disputa com a base; o Arquiteto absorve em rodape.css quando quiser.
   --------------------------------------------------------------------------- */

/* Faixa com LEAD: uma linha de descrição sob o nome, centrada, 16/1.6,
   --texto-2, 64ch. A faixa passa a quebrar em duas linhas: fios + símbolo +
   nome em cima, o lead embaixo. `identidade().lead` na base (especificado). */
.faixa-jogo { flex-wrap: wrap; row-gap: var(--e-2); margin-bottom: var(--ritmo-faixa); }
.fj-lead { flex: 1 0 100%; margin: 0; text-align: center; font-size: 16px; line-height: 1.6;
  color: var(--texto-2); max-width: 64ch; margin-inline: auto; }

/* Título de bloco na LINHA-GUIA: peso 700 (media 400 em 12 páginas, só o
   tamanho o distinguia do corpo) e o texto começando no MESMO x do corpo. O
   ícone do assunto vai para a ponta direita da linha, ao lado do selo, antes
   ele empurrava o título 36px (24 de ícone + 12 de vão) para dentro. */
/* O nome da faixa é um h1 e o navegador lhe dá 0,67em de margem (18,76px a
   28px): medido em 06/09, o lead ficava a 27px do nome em 11 ferramentas, só o
   Bingo zerava o h1 localmente. A anatomia diz 8 (a row-gap da faixa). */
.fj-nome { margin: 0; }

.be-tit { font-weight: 700; order: 1; }
.be-extra { order: 2; }
.bloco-etapa .be-ic { order: 3; margin-left: auto; }
.be-extra + .be-ic, .bloco-etapa .be-extra ~ .be-ic { margin-left: 0; }
.bloco-etapa:has(.be-extra) .be-extra { margin-left: auto; }
.bloco-etapa { margin-bottom: var(--ritmo-titulo); padding-bottom: var(--ritmo-titulo); }
/* O SELO DESCE NO CELULAR (10/09/2026, Revisor). A 375, título, selo e ícone
   dividiam 309px: o selo ficava com 104 a 126 e o título com 135 a 157 dos
   192 a 255 que ele mede, e partia em duas linhas com uma palavra sozinha
   ("Reuniões / anteriores", "O modelo da / retrospectiva"). Abaixo de 600px o
   título fica com a primeira linha junto do ícone e o selo desce para a linha
   de baixo, alinhado ao texto. Acima disso a ordem título, selo, ícone não muda. */
@media (max-width: 599px) {
  .bloco-etapa:has(.be-extra) { flex-wrap: wrap; row-gap: var(--e-2); }
  .bloco-etapa:has(.be-extra) .be-tit { flex: 1 1 max-content; }
  .bloco-etapa:has(.be-extra) .be-extra { order: 4; margin-left: 0; }
  .bloco-etapa:has(.be-extra) .be-ic { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   A PILHA DA FERRAMENTA (revisto em 10/09/2026, §25 do design-system.md).

   Até 09/09 esta seção encolhia o guia para a coluna de 760 em que o conteúdo
   de sete ferramentas morava. As duas medidas juntas eram o defeito que o dono
   nomeou três vezes: 760px ancorados à esquerda de um container de 1192, com
   432px vazios à direita (portão de espaço, 1440). A coluna estreita saiu da
   ferramenta. Quem divide a largura agora é o layout de app de
   `nucleo/rodape.css` (§25): o conteúdo numa coluna, o painel lateral na
   outra, e o guia na largura do painel quando fechado e na largura inteira
   quando aberto. Nenhuma peça fica numa coluna que ninguém ocupa ao lado.
   --------------------------------------------------------------------------- */

/* O rótulo de privacidade tinha TRÊS larguras nas doze (1192, 760 e 495) sem
   ninguém ter decidido nenhuma. As 495 eram acidente de marcação: a página que
   o escreve como `<p>` cai no piso de medida do §21 e encolhe para 56ch; a que
   o escreve como `<div>`, não. O rótulo é uma FAIXA de estado, com ícone e uma
   ou duas linhas, e a medida de leitura é do texto corrido, não da faixa. Ele
   passa a ter uma largura só: a da coluna em que está. */
.privacidade { max-width: none; }
/* E um degrau só: o rótulo separa-se do que vem depois pelo mesmo
   `--ritmo-bloco` que separa bloco de bloco. Antes eram 32 em cima (herdados
   de `--ritmo-guia`) e 16 embaixo, e o desnível aparecia justamente entre o
   rótulo e o primeiro passo. Só como filho direto do conteúdo: dentro do
   cartão o rótulo continua com a margem do componente. */
.ferramenta-conteudo > .privacidade { margin-block: var(--ritmo-bloco); }

/* Guia → primeiro bloco e bloco → bloco: os dois vêm da escala de ritmo. */
.guia { margin-top: var(--ritmo-faixa); }
.cartao-etapa { margin-top: var(--ritmo-bloco); }
.cartao-etapa + .cartao-etapa { margin-top: var(--ritmo-bloco); }
@media (max-width: 719px) { .cartao-etapa { padding: var(--e-4); } }

/* ---------------------------------------------------------------------------
   GRADE DE BLOCOS: decisão 9.1 do design-system.md (revisão de 06/09/2026).
   A montagem que tem blocos INDEPENDENTES (o Bingo: rodada e pessoas; o Amigo
   Oculto: grupo e quem participa) pode pô-los lado a lado a partir de 900px,
   e só assim: duas colunas IGUAIS (proporção 1/1,3 lê como hierarquia que não
   existe), vão horizontal e vertical = --ritmo-bloco, blocos sem margem própria
   (a margem não colapsa em grid: era o que dava 48 entre o rótulo de
   privacidade e o primeiro bloco). O que é sequência (um bloco depende do
   anterior), o rótulo de privacidade, a ação e o gate ocupam a linha inteira
   com `.bloco-largo`. Abaixo de 900 é a coluna única da referência. */
.ferramenta-conteudo.montagem-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ritmo-bloco); align-items: start; }
.ferramenta-conteudo.montagem-grade > * { margin-top: 0; margin-bottom: 0; }
.guia + .ferramenta-conteudo.montagem-grade { margin-top: var(--ritmo-guia); }
.guia + .ferramenta-conteudo.montagem-grade > :first-child { margin-top: 0; }
.montagem-grade > .bloco-largo, .montagem-grade > .privacidade, .montagem-grade > .ferramenta-portao,
.montagem-grade > .ferramenta-acao { grid-column: 1 / -1; }
@media (min-width: 900px) and (max-width: 1099px), (min-width: 1240px) { .ferramenta-conteudo.montagem-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A quebra ganhou uma faixa sem grade em 10/09/2026: de 1100 a 1239 o conteúdo
   divide a largura com o painel lateral (§25) e mede de 660 a 800px, pouco
   para dois blocos de formulário lado a lado. Abaixo de 1100 não há painel e o
   conteúdo tem a tela inteira; de 1240 em diante ele tem 840 ou mais. */
html.telao .ferramenta-conteudo.montagem-grade { display: block; }

/* O dado do resumo que é frase (`resumo().itens[i][2] === 'largo'`,
   10/09/2026): rótulo em cima, valor embaixo e à esquerda, quebrando como
   texto. As outras peças do resumo moram em `nucleo/rodape.css` (§25); esta é
   classe nova e só acrescenta, sem disputar com a base. */
.fr-dado.fr-dado-largo { display: grid; gap: var(--e-1); justify-content: stretch; }
.fr-dado.fr-dado-largo dd { text-align: left; font-weight: 600; overflow-wrap: anywhere; }

/* Grade visível (a página /design/ liga; o QA pode ligar em qualquer página
   com `document.body.classList.add('mostrar-grade')`): as duas bordas do
   container e a linha-guia do conteúdo, a --gutter para dentro. */
body.mostrar-grade::before, body.mostrar-grade::after { content: ""; position: fixed; top: 0; bottom: 0;
  width: var(--gutter); pointer-events: none; z-index: var(--z-aviso);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  border-inline: 1px dashed color-mix(in srgb, var(--acento) 70%, transparent); }
body.mostrar-grade::before { left: max(0px, calc((100vw - var(--container)) / 2)); }
body.mostrar-grade::after  { right: max(0px, calc((100vw - var(--container)) / 2)); }


/* ===========================================================================
   V3: MONITOR GRANDE (parecer do Designer, 06/09/2026)
   ---------------------------------------------------------------------------
   O defeito de PROCESSO que abriu esta seção: toda a medição do v2 rodou em
   1280, 768 e 375. Acima de 1280 ninguém tinha olhado, e é onde o dono olha.
   A régua nova é `interno/scripts/medir-monitor-grande.mjs` (1920/1680/1440/
   1280/375, dois temas) e mede o que a antiga não media: o INTERIOR do cartão
   e o TEXTO. As três medidas que decidem o que vem abaixo:

   1. De 1280 a 1920, NENHUMA das filas de cartões do produto muda: mesmas
      colunas, mesma largura de cartão, nas quatro larguras. A 1920 sobram 340px
      de margem morta de cada lado, 35% da tela, e o produto não usa nada.
   2. `64ch` NÃO é 64 caracteres. Medido numa coorte controlada de 17 leads
      (16px, caixa de 646px): a mediana é de 80 caracteres renderizados, a razão
      é exatamente 1,250. O v2 escreveu "64ch para o lead" achando que dizia 64;
      dizia 80. O §21 (B1, 06/09) fecha a faixa em 60 a 75 e o valor cai para
      56ch = 70 caracteres; a razão de 1,250 é o que faz a conta. O valor foi
      escolhido MEDINDO os dois candidatos, não estimando: 60ch entrega p90 de
      79 caracteres (fora da faixa) e 56ch entrega p90 de 74 (dentro).
   3. `text-wrap: pretty/balance` zera a órfã onde a caixa tem folga: medido em
      06/09, planos 7→0, rotina 4→0, sobre 1→0, catálogo 29→18 (o resto são
      títulos em caixa estreita, onde nenhum algoritmo salva).
   =========================================================================== */
:root {
  /* --- §16 A MEDIDA DE LEITURA, em caracteres MEDIDOS --------------------
     O número à direita é o que se conta na tela, não a unidade CSS. */
  --medida-leitura: 56ch;   /* 70 caracteres: lead, parágrafo, item de lista */
  --medida-corpo: 58ch;     /* 72 caracteres: corpo de documento longo */
  --medida-celula: 36ch;    /* 45 caracteres (célula): tabela se varre, não se lê */

  /* --- §17 A GRADE DE CARTÕES -------------------------------------------
     `auto-fill`, e não `auto-fit`: `auto-fit` só estica quando todos os
     cartões cabem numa fileira, e não fecha fileira nenhuma. A regra desde
     10/09 é a do §17.2, a última fileira ocupa a largura inteira; quem a
     cumpre é a `.grade-equilibrada` (grade) ou o "A FILEIRA FECHA" (flex). */
  --piso-cartao: 280px;     /* piso do cartão de catálogo: 4 colunas a 1240 */
  --colunas-cartao: repeat(auto-fill, minmax(var(--piso-cartao), 1fr));

  /* --- §16 O PASSO DO CONTAINER, LIGADO (10/09/2026) ---------------------
     1440 é o container que a pesquisa de 10/09 sustenta. A 1440 de tela, o
     Vercel usa 1392 de largura útil (este 1440 menos dois gutters de 24), o
     Linear 1344 e o Notion 1268; a 1920, o Vercel para em 1400 e o Stripe em
     1200. O 1544 de 06/09 era a conta de uma quinta coluna do catálogo e não
     tinha par em nenhum dos cinco produtos medidos. */
  --container-largo: 1440px;

  /* --- §17.3 A FILEIRA QUE ROLA (10/09/2026) ----------------------------
     As duas bordas esmaecidas da fileira de pílulas que rola. Quem as move é
     a rolagem (`nucleo/rodape.css`, "A FILEIRA QUE ROLA", registradas com
     `@property` sem herança): o valor daqui é o repouso, sem máscara. */
  --rola-ini: 0px;
  --rola-fim: 0px;
}

/* O passo LIGADO, por pedido explícito do dono em 10/09/2026 ("use todo o
   espaço"). Estava atrás de `html.container-largo` desde 06/09, esperando as
   medidas de leitura chegarem às páginas; a condição caiu com o §21 antigo.
   A partir de 1280 de tela o container vai a 1440: entre 1280 e 1440 ele é a
   própria tela menos o gutter (de 1240 para 1280 são 20px de cada lado, sem
   salto visível), e acima de 1440 ele para e centra. Valor em px e não
   `clamp()`, de propósito: `getPropertyValue('--container')` devolve a
   declaração, e a régua que lê o token (o portão de espaço) precisa de um
   número. */
@media (min-width: 1280px) { :root { --container: var(--container-largo); } }

/* --- §16 A medida como componente. Página nenhuma escreve `max-width` em
   texto: põe a classe. `.medida` é o padrão de leitura; as duas variantes
   existem para os dois casos que medem diferente. --------------------------- */
.medida-leitura { max-width: var(--medida-leitura); }
.medida-corpo   { max-width: var(--medida-corpo); }
.medida-celula  { max-width: var(--medida-celula); }
/* O lead e o cabeçalho institucional já nasciam com a medida certa; agora ela
   tem nome, e quem a muda muda em um lugar só. */
.fj-lead, .pagina-cabeca p { max-width: var(--medida-leitura); }

/* ===========================================================================
   §21. O ESPAÇO É PARA SER USADO (10/09/2026; revoga o §21 de 06/09)
   ---------------------------------------------------------------------------
   O §21 de 06/09 punha `max-width: 56ch` em TODO parágrafo, item de lista,
   `dd`, legenda e citação de `main.ferramenta` e `main.pagina`. A regra estava
   certa para uma coluna de prosa sozinha e errada em todo o resto: o parágrafo
   parava a 565px com a largura inteira vazia ao lado, a dica e o passo do guia
   paravam no meio da caixa, e o dono viu "texto todo colado na esquerda" três
   vezes. O portão `testes/e2e/espaco.spec.js` achou a regra por trás da maior
   parte dos defeitos de texto estreito das doze ferramentas.

   O QUE OS PRODUTOS PESQUISADOS FAZEM (10/09, 1440 de tela, medido): nenhum
   limita parágrafo pela base. A coluna de texto corrido tem 650px no Linear,
   768 no Vercel, 797 no Intercom, 810 no Stripe, e quem a limita é o LAYOUT
   (um índice ou um painel ao lado, ou o título numa coluna e o texto na
   outra), nunca um teto no parágrafo com o vazio do lado.

   A REGRA, e por isso não há declaração nenhuma aqui:
   1. Texto dentro de componente (cartão, caixa, aviso, guia, painel) preenche
      o componente. Nenhum `max-width` em texto dentro de caixa.
   2. Prosa longa corrida é limitada pelo layout: título numa coluna e texto na
      outra (`.secao-lado`, `nucleo/rodape.css`), ou painel ao lado (§25).
      Nunca uma coluna estreita encostada numa borda.
   3. Texto CENTRADO de propósito (o lead da faixa e do cabeçalho da página)
      mantém a medida com a caixa no meio. É o único teto que sobra, e ele é
      simétrico: sobra o mesmo dos dois lados.
   As classes `.medida-*` continuam existindo para o caso 3 e para texto que já
   mora ao lado de outro bloco. Página nova não as põe em texto solto. */

/* --- §19 ÓRFÃ E QUEBRA (revisto em 10/09/2026) -----------------------------
   `text-wrap: pretty` saiu do parágrafo. Em texto de duas ou três linhas o
   Chromium reequilibra as últimas linhas, e dentro de cartão isso é a quebra
   que o dono apontou ("Cole a lista, gire no telão / e ninguém sai duas
   vezes"). Medido pelo portão de espaço em `planos/` a 1440: "Para quem conduz
   de vez em quando" quebrava com 172px de linha num cartão que oferece 236.
   A quebra comum enche a linha, que é a regra 1 do §21. `balance` fica no
   TÍTULO, onde repartir as linhas é o desenho e ninguém mede preenchimento.
   `hyphens: none` e `overflow-wrap: break-word` seguem iguais: nunca partir a
   palavra por estética, e partir só a que de fato não cabe (URL, código). */
:where(p, li, dd, figcaption, .campo-ajuda, .col-para, .c-desc) { text-wrap: wrap; }
:where(h1, h2, h3, h4, .be-tit, .c-tit, .fj-nome, .fj-lead) { text-wrap: balance; }
:where(body) { hyphens: none; overflow-wrap: break-word; }
/* A PALAVRA QUE NÃO PARTE (10/09/2026). `.sem-quebra` segura inteiro o que é
   IDENTIFICADOR ou CÓDIGO: "NR-1", e os códigos de referência que a conta e o
   modal de entrar mostram ("entrada-6", "conta-10"), que partidos no hífen
   deixam "entrada-" numa linha e "6" na outra. Palavra composta comum
   ("e-mail", "bem-estar") pode quebrar no hífen, como qualquer texto, e não
   leva a classe. Nunca o hífen inseparável (U+2011) no lugar dela: parece
   hífen e não é, e atrapalha copiar, buscar na página e o leitor de tela.
   A política inteira mora no §19 do design-system.md. */
.sem-quebra { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   §17 GRADE DE CARTÕES, o componente de contagem fixa. Vão igual nos DOIS
   eixos, altura igual por fila (`stretch`). Contagem variável, que precisa
   fechar a última fileira, é da `.grade-equilibrada` (§17.1 e §17.2, abaixo).
   --------------------------------------------------------------------------- */
.grade-cartoes {
  display: grid;
  grid-template-columns: var(--colunas-cartao);
  gap: var(--ritmo-bloco);          /* 32 nos dois eixos: um degrau só */
  align-items: stretch;             /* altura igual por fila, sempre */
}
.grade-cartoes > * { margin: 0; }   /* em grid a margem não colapsa (§9.1) */
/* Fila de contagem fixa, quando o número de cartões é da natureza do conteúdo
   (os 4 planos) e não do espaço disponível. Continua sem `auto-fit`. */
.grade-cartoes.colunas-fixas { grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); }
@media (max-width: 999px) { .grade-cartoes.colunas-fixas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grade-cartoes.colunas-fixas { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   §17.1 GRADE EQUILIBRADA: A CONTAGEM DE COLUNAS (10/09/2026)
   §17.2 A FILEIRA FECHA, EM GRADE (revisto em 10/09/2026, BV2)

   O DEFEITO DE ORIGEM, medido pelo portão de espaço a 1440: com `auto-fill` a
   quatro colunas, os cinco jogos do catálogo davam 4 + 1, e a Roleta ficava
   sozinha numa fileira de quatro, com 906px vazios ao lado.

   O QUE OS PESQUISADOS FAZEM (10/09, 1440 de tela): o Notion escolhe a
   contagem de colunas pelo número de cartões (8 cartões em 4 colunas, 6 em 3)
   e, quando a contagem não enche, dá à última fileira as trilhas que sobram
   (`grid-column: 1 / -1` no terceiro de uma grade de duas); o Intercom fecha
   três trilhas com um cartão de uma e outro de duas; Vercel e Stripe só
   publicam fileiras cheias.

   §17.1, A CONTA: colunas = teto(n / teto(n / 4)), escrita por `:has()`. Até
   4 cartões, uma fileira; 5, 6 e 9 dão três colunas; o resto, quatro. De 600
   a 1099 de tela, duas; abaixo, uma.

   O DEFEITO QUE SOBROU (BV2, medido no WebKit e no Chromium): a conta escolhia
   bem, mas a fileira incompleta deixava a vaga. 5 cartões em 3 + 2 deixavam
   469px vazios a 1440 e 416 a 1280; 7 cartões em 4 + 3, 352 e 312.

   §17.2, O MECANISMO EM GRADE, e por que não o flex do "A FILEIRA FECHA" de
   `nucleo/rodape.css`: os cartões do catálogo usam subgrid (§18.1), e subgrid
   só existe com o pai em grade. Em flex cada cartão teria as próprias
   fileiras, e título, descrição e selo deixariam de alinhar entre irmãos.
   1. A partir de 1100, DOZE trilhas. Doze divide por 1, 2, 3 e 4, então toda
      fileira de até quatro cartões fecha em trilhas inteiras.
   2. O cartão ocupa 12 / colunas trilhas: `span 3` em quatro colunas, `span 4`
      em três.
   3. A última fileira divide a largura pela própria contagem, que é o resto
      da divisão: o primeiro cartão dela é o que está numa posição 4k + 1 e é
      o r-ésimo a contar do fim (`:nth-child(4n+1):nth-last-child(r)`), e ele
      e os seguintes (`~ *`) ocupam 12 / r. Sem `:has()`: funciona onde o
      `:has()` não existe, e aí 5, 6 e 9 caem em 4 + 1, 4 + 2 e 4 + 4 + 1, que
      também fecham.
   4. Resto 1 depois de três fileiras cheias ou mais (13, 17, 21) não deixa um
      cartão sozinho na largura inteira: as duas últimas fileiras viram 3 + 2.
      É o fechamento do Intercom, por contagem.
   5. De 600 a 1099, duas trilhas, e o último de uma contagem ímpar atravessa.
      Abaixo de 600, uma trilha: uma coluna não tem vaga.
   6. O vão entre colunas nunca passa de um doze avos da grade. Doze trilhas
      pedem onze vãos, e uma grade estreita a partir de 1100 (a seção de
      poucos cartões, que divide a fileira com o cabeçalho) transbordaria. Nas
      larguras do catálogo o teto não age: o vão é o de sempre.
   O item não declara margem nem largura (`min-width: 0`); a altura é o
   `stretch` da fileira, ou as quatro fileiras do subgrid.

   O vão é `--grade-vao` (32 por padrão), e o mesmo token é lido pela seção que
   divide a fileira com o cabeçalho (`nucleo/rodape.css`, "poucos cartões"):
   um cartão ao lado do cabeçalho tem a largura exata de um cartão da grade.
   Aquela seção lê a contagem de filhos, não as trilhas, e não muda. */
.grade-equilibrada { display: grid; gap: var(--grade-vao, var(--ritmo-bloco)); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.grade-equilibrada > * { margin: 0; min-width: 0; }
@media (min-width: 600px) and (max-width: 1099px) {
  .grade-equilibrada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-equilibrada > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .grade-equilibrada {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: min(var(--grade-vao, var(--ritmo-bloco)), 100% / 12);
  }
  /* quatro por fileira */
  .grade-equilibrada > * { grid-column: span 3; }
  /* a última fileira divide a largura: sobra de 3, de 2 e de 1 */
  .grade-equilibrada > :nth-child(4n+1):nth-last-child(3),
  .grade-equilibrada > :nth-child(4n+1):nth-last-child(3) ~ * { grid-column: span 4; }
  .grade-equilibrada > :nth-child(4n+1):nth-last-child(2),
  .grade-equilibrada > :nth-child(4n+1):nth-last-child(2) ~ * { grid-column: span 6; }
  .grade-equilibrada > :nth-child(4n+1):last-child { grid-column: span 12; }
  /* sobra de 1 depois de três fileiras cheias: as duas últimas viram 3 + 2 */
  .grade-equilibrada > :nth-child(4n+9):nth-last-child(5),
  .grade-equilibrada > :nth-child(4n+9):nth-last-child(5) ~ * { grid-column: span 4; }
  .grade-equilibrada > :nth-child(4n+9):nth-last-child(5) ~ :nth-last-child(-n+2) { grid-column: span 6; }
  /* três por fileira pela contagem (§17.1): 5 em 3 + 2, 6 em 3 + 3, 9 em 3 + 3 + 3.
     Vem depois das regras de quatro, com a mesma especificidade, e vence. */
  .grade-equilibrada:has(> :last-child:nth-child(5)) > *,
  .grade-equilibrada:has(> :last-child:nth-child(6)) > *,
  .grade-equilibrada:has(> :last-child:nth-child(9)) > * { grid-column: span 4; }
  .grade-equilibrada:has(> :last-child:nth-child(5)) > :nth-child(n+4) { grid-column: span 6; }
}

/* ---------------------------------------------------------------------------
   §18 ANATOMIA INTERNA DO CARTÃO: uma linha-guia por cartão.
   O defeito medido: no catálogo e em `planos/` o título nasce 53px à direita
   do corpo, porque o ícone de 40 + o vão de 12/16 empurram a linha de título
   inteira. É o mesmo defeito que o §11 corrigiu no `.bloco-etapa` e que nunca
   chegou a estes dois. A correção é a do §11: o ícone vai para a PONTA DIREITA
   da linha e o título começa no padding do cartão, junto com o corpo.
   --------------------------------------------------------------------------- */
.cartao-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); justify-items: start; min-width: 0; }
.cartao-topo > :where(h2, h3, h4, .c-tit, .col-topo h2) { order: 2; margin: 0; min-width: 0; width: 100%; }
.cartao-topo > :where(.c-ic, .col-ic, .cartao-ic) { order: 1; margin-left: 0; flex: none; }
.cartao-topo > :where(.selo, .c-selos, .be-extra) { order: 3; }

/* ---------------------------------------------------------------------------
   §18.2 O TÍTULO DO CARTÃO NUNCA É MAIS ESTREITO QUE O CORPO DO CARTÃO
   (Arquiteto, 06/09/2026)

   O DEFEITO, medido em `/ferramentas/` a 1280, nos 30 cartões do catálogo: o
   `h3` tinha 184px e o `p` logo abaixo, na MESMA caixa, tinha 236. Os 52px de
   diferença são exatamente o ícone (40) mais o vão (12), porque o §18 pôs o
   ícone na PONTA DIREITA da mesma linha do título e o título ficou com o que
   sobrou. Título mais estreito que o próprio corpo é uma caixa dentro da caixa
   que ninguém desenhou, e ela cobra em quebra de linha.

   A CONTA, medindo a largura natural de cada um dos 30 títulos:
     em 184px, 14 dos 30 cabem em uma linha;
     em 236px, 25 dos 30 cabem.
   A correção poupa 11 quebras de linha desnecessárias. As cinco que restam são
   nome longo de verdade ("Duas Verdades e Uma Mentira" mede 286px naturais,
   e o cartão inteiro tem 286): essas o Revisor encurta na fonte, e é o que a
   reserva de duas linhas do §18.1 já previa.

   POR QUE NÃO FOI FLUTUANDO O ÍCONE: o título do §18.1 é `-webkit-box` por
   causa do `line-clamp`, e caixa que estabelece contexto próprio DESVIA do
   float em vez de correr em volta dele. A largura continuaria 184. Medido
   antes de escolher, não deduzido.

   A REGRA: o topo do cartão é uma GRADE de uma coluna. O ícone é a primeira
   linha, o título a segunda, o selo a terceira. O título mantém o x do §18
   (começa no padding do cartão, junto com o corpo) e passa a ter também a
   LARGURA do corpo. Custa 40 + 12 de altura por cartão, igual em todos, e a
   reserva do §18.1 continua valendo porque nada ali dependia de o ícone estar
   na mesma linha.

   Quem precisar do ícone ao lado do título (uma linha só, caixa larga, título
   curto por natureza) pede `.cartao-topo-linha`. É variante, não o padrão: o
   padrão é o que atravessa cartão estreito sem cobrar quebra. */
.cartao-topo-linha { display: flex; align-items: center; }
.cartao-topo-linha > :where(h2, h3, h4, .c-tit, .col-topo h2) { order: 1; width: auto; }
.cartao-topo-linha > :where(.c-ic, .col-ic, .cartao-ic) { order: 3; margin-left: auto; }
.cartao-topo-linha > :where(.selo, .c-selos, .be-extra) { order: 2; }

/* O botão no PÉ, alinhado entre irmãos: o cartão é uma coluna flex e o rodapé
   é empurrado para baixo. Sem isto, dois cartões de mesma altura com corpos de
   tamanhos diferentes põem o botão em duas alturas, o que o olho lê como
   "sem padrão" antes de ler qualquer palavra. */
.grade-cartoes > * { display: flex; flex-direction: column; }
:where(.cartao-pe, .c-pe, .col-pe) { margin-top: auto; }

/* §11: padding do cartão é 24 (16 abaixo de 720), e é o MESMO entre irmãos da
   mesma fila. O `.destaque` do guia carregava 24 ao lado de irmãos de 16 em 12
   páginas: o destaque é a borda e a cor, nunca o respiro. */
.grade-cartoes > * { padding: var(--e-5); }
@media (max-width: 719px) { .grade-cartoes > * { padding: var(--e-4); } }

/* ---------------------------------------------------------------------------
   §12 SÍMBOLO DE FERRAMENTA, a cor mora aqui, não na marcação.
   O pictograma colorido do Bingo voltou (06/09/2026) e virou o estilo dos
   treze. O motivo de a pintura ficar nesta folha e não no SVG: `var()` não
   funciona em ATRIBUTO de SVG, e era exatamente por isso que o desenho antigo
   carregava seis hexadecimais crus na marcação do Bingo. Como CLASSE, tudo
   volta a ser token: `stroke`, `fill` e até `stop-color` do gradiente são
   propriedades de CSS legítimas dentro de um `<svg>` embutido.

   Consequência de graça: o tema claro troca sozinho. `--secundaria` sai de
   #22D3EE e vira #0E7490, `--acento` vira #C2410C, os mesmos valores já
   medidos para texto, e portanto já aprovados sobre as três superfícies.

   A leitura a três metros continua sendo da FORMA, não da cor: `.s-espectro` é
   a silhueta inteira do símbolo, no peso cheio da régua. Projetor que desbota
   matiz apaga a camada 2 e 3 e deixa a 1, que é a que diz o que é. Quem
   projeta e quiser mais contraste ainda pede a variante `.simbolo-chapado`,
   abaixo: um só tom, sem gradiente, sem depender de matiz nenhum.
   --------------------------------------------------------------------------- */
.simbolo .s-espectro { stroke: url(#rhc-espectro-simbolo); }
.simbolo .s-fria     { stroke: var(--secundaria); }
.simbolo .s-marca    { stroke: var(--primaria-texto); }
.simbolo .s-quente   { stroke: var(--acento); }

.simbolo :where(.c-fria, .c-marca, .c-marca-fraca, .c-quente) { stroke: none; }
.simbolo .c-fria        { fill: var(--secundaria); }
.simbolo .c-marca       { fill: var(--primaria-texto); }
.simbolo .c-marca-fraca { fill: color-mix(in srgb, var(--primaria-texto) 55%, transparent); }
.simbolo .c-quente      { fill: var(--acento); }
/* O miolo translúcido do prisma: o mesmo `rgba(255,107,74,.25)` do desenho de
   origem, agora escrito como proporção do token. */
.simbolo .c-quente-suave { fill: color-mix(in srgb, var(--acento) 25%, transparent); }

/* As paradas do gradiente: as três cores da marca, na ordem que o pictograma
   de origem usava. O coral fica na parada final porque é o canto onde o prisma
   coral do Bingo se apoia; invertido, a moldura briga com o miolo. */
.simbolo .e-1 { stop-color: var(--secundaria); }
.simbolo .e-2 { stop-color: var(--primaria); }
.simbolo .e-3 { stop-color: var(--acento); }

/* A VARIANTE, e não um segundo estilo: um tom só, herdado de `color`, para
   telão apagado, impressão em uma tinta e favicon monocromático. Nada de
   geometria muda; só a pintura. */
.simbolo.simbolo-chapado :where(.s-espectro, .s-fria, .s-marca, .s-quente) { stroke: currentColor; }
.simbolo.simbolo-chapado :where(.c-fria, .c-marca, .c-marca-fraca, .c-quente) { fill: currentColor; }
.simbolo.simbolo-chapado .c-marca-fraca { fill: color-mix(in srgb, currentColor 55%, transparent); }
.simbolo.simbolo-chapado .c-quente-suave { fill: color-mix(in srgb, currentColor 25%, transparent); }

/* ---------------------------------------------------------------------------
   §18.1 IRMÃOS ALINHADOS PELA FILEIRA, NÃO POR RESERVA (decisão do dono de
   06/09/2026; o mecanismo mudou em 10/09/2026)

   A DECISÃO QUE FICA: cartões irmãos têm a mesma altura, e ícone, título,
   descrição e selo nascem no mesmo y entre eles. Em 06/09 os trinta cartões do
   catálogo tinham nove alturas, o selo nascia em nove y diferentes, e o olho
   lia "sem padrão" antes de ler uma palavra. É o §18 um degrau acima: lá era o
   x, aqui é o y.

   O MECANISMO QUE SAIU: a altura RESERVADA em linhas (título em duas,
   descrição em cinco), calculada para o cartão estreito de 06/09. Com o
   container de 1440 o cartão ficou largo, a descrição passou a usar duas ou
   três linhas, e a reserva virou folga. Medido em 10/09 (BV3), no WebKit e no
   Chromium, do fim da última linha da descrição até o selo: mediana de 67px e
   máximo de 93px a 1440, onde o vão desenhado é de 16px, com os 30 cartões
   presos em 387px de altura; a 375, 67px em todos.

   O MECANISMO QUE ENTROU: CSS subgrid. Cada cartão ocupa quatro fileiras da
   grade (ícone, título, descrição, pé) e usa as trilhas dela
   (`grid-template-rows: subgrid`). A altura de cada fileira é a do maior
   conteúdo daquela fileira de cartões: o cartão de descrição mais longa fica
   com folga zero, e os irmãos alinham com ele, em qualquer largura, sem número
   de linhas digitado. O vão de dentro do cartão é o do cartão (12); o da grade
   fica entre os cartões. Suporte: Safari 16 e Chrome 117 em diante. Navegador
   sem subgrid cai na reserva antiga (`@supports not`), que alinha do jeito
   caro, mas alinha.

   POR QUE NÃO AS OUTRAS SAÍDAS: flex com `margin-top: auto` alinha o pé, mas
   não o início da descrição quando um título tem uma linha e o vizinho duas.
   JavaScript medindo alturas roda depois da pintura, pisca e refaz a cada
   redimensionamento; a grade resolve no layout. `grid-auto-rows: 1fr` iguala
   o cartão inteiro, não os blocos de dentro.

   O TETO CONTINUA, e não é mais reserva: título em até duas linhas, descrição
   em até cinco, com reticências. Texto que bate no teto é texto longo demais,
   e o Dev o REPORTA para encurtar na fonte; cortar em silêncio seria esconder
   o defeito. O texto inteiro segue no DOM para quem usa leitor de tela.

   É OPT-IN na grade (`.cartao-alturas-fixas`, nome mantido por compatibilidade),
   e de propósito: `planos/` tem quatro cartões de altura parecida e um em
   destaque, e não pede isto. A disposição do cartão (coluna ou subgrid) é
   desta folha; a página só pinta o cartão.
   --------------------------------------------------------------------------- */
.cartao-alturas-fixas {
  --tit-linhas: 2;   --tit-tam: var(--tipo-titulo-cartao);  --tit-lh: 1.3;   /* §20: 20 → 1,30 */
  --desc-linhas: 5;  --desc-tam: var(--tipo-corpo);         --desc-lh: 1.6;  /* §20: 16 → 1,60 */
  /* O RODAPÉ DO CARTÃO (§18.3, abaixo): o tamanho e a altura de linha dos
     metadados moram aqui junto dos outros dois blocos, porque a reserva do
     rodapé é calculada deles pela mesma conta. */
  --meta-linhas: 2;  --meta-tam: var(--tipo-micro);         --meta-lh: 1.5;  /* §20: 12 → 1,50 */
}
/* A base, para quem não tem subgrid: o cartão é uma coluna e o pé desce. */
.cartao-alturas-fixas > * { display: flex; flex-direction: column; gap: var(--e-3); }
.cartao-alturas-fixas :where(.cartao-topo) > :where(h2, h3, h4, .c-tit) {
  font-size: var(--tit-tam);
  line-height: var(--tit-lh);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tit-linhas);
  overflow: hidden;
}
.cartao-alturas-fixas > * > :where(p, .cartao-desc) {
  font-size: var(--desc-tam);
  line-height: var(--desc-lh);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--desc-linhas);
  overflow: hidden;
}
@supports (grid-template-rows: subgrid) {
  .cartao-alturas-fixas > * {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--e-3);
  }
  /* O topo se desfaz para o ícone e o título ocuparem fileiras próprias. A
     posição é explícita porque o §18 dá `order` ao ícone e ao título, e em
     grade o `order` mexeria na colocação automática. */
  .cartao-alturas-fixas > * > :where(.cartao-topo) { display: contents; }
  .cartao-alturas-fixas :where(.cartao-topo) > :where(.c-ic, .col-ic, .cartao-ic) { grid-row: 1; align-self: start; justify-self: start; }
  .cartao-alturas-fixas :where(.cartao-topo) > :where(h2, h3, h4, .c-tit) { grid-row: 2; align-self: start; }
  .cartao-alturas-fixas > * > :where(p, .cartao-desc) { grid-row: 3; align-self: start; }
  .cartao-alturas-fixas > * > :where(.c-pe, .cartao-pe) { grid-row: 4; align-self: start; margin-top: 0; }
}
@supports not (grid-template-rows: subgrid) {
  .cartao-alturas-fixas :where(.cartao-topo) > :where(h2, h3, h4, .c-tit) { height: calc(var(--tit-tam) * var(--tit-lh) * var(--tit-linhas)); }
  .cartao-alturas-fixas > * > :where(p, .cartao-desc) { height: calc(var(--desc-tam) * var(--desc-lh) * var(--desc-linhas)); }
}
/* ---------------------------------------------------------------------------
   §18.3 O RODAPÉ DO CARTÃO TAMBÉM TEM UMA LINHA-GUIA (Designer, 06/09/2026)

   O DEFEITO, medido em `/ferramentas/` a 1280 nos 30 cartões: os dois
   metadados (tempo e tamanho do grupo) eram duas caixas `inline-flex` numa
   linha que quebrava, então o SEGUNDO começava onde o primeiro terminava. Como
   "1 min" e "10 a 15 min por pessoa" não medem o mesmo, o segundo metadado
   nascia em VINTE x diferentes ao longo da página, nenhum deles escolhido por
   ninguém. É o §18 uma camada abaixo: lá o título não começava no x do corpo,
   aqui o metadado não começa em x nenhum.

   E a reserva não pagava o que custava: a linha só quebrava em 1 dos 30
   cartões a 1280 e em 0 de 30 a 768 e a 375 (o par mais largo pede 252px e o
   cartão dá 236 a 1280, 344 nos outros dois portes). Duas linhas reservadas
   para um caso.

   A REGRA: o rodapé é uma GRADE de uma coluna, como o topo. Cada metadado é
   uma linha, e todas começam no padding do cartão, junto do título e do corpo.
   A reserva continua sendo de duas linhas, calculada e não digitada, mas agora
   ela é ESTRUTURAL: são dois metadados, sempre dois, não "o que couber".
   Altura idêntica à de antes, e vinte eixos horizontais a menos.
   --------------------------------------------------------------------------- */
.cartao-alturas-fixas :where(.c-pe, .cartao-pe) { --meta-tam: var(--tipo-micro); --meta-lh: 1.5; }
.cartao-alturas-fixas :where(.c-info, .cartao-info) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-1);
  justify-items: start;
  height: calc(var(--meta-tam) * var(--meta-lh) * var(--meta-linhas) + var(--e-1));
}
.cartao-alturas-fixas :where(.c-meta, .cartao-meta) {
  font-size: var(--meta-tam);
  line-height: var(--meta-lh);
  min-width: 0;
}

/* UM teto, em toda largura (10/09/2026): com o subgrid do §18.1 a altura vem do
   texto, e o teto de cinco linhas só age sobre descrição longa demais. Medido
   em 10/09 nos dois motores: nenhuma das 30 descrições bate no teto a 1280,
   1440, 1920 ou 375. */

/* ===========================================================================
   §22. A CASCA DA PÁGINA (Arquiteto, 06/09/2026)
   ---------------------------------------------------------------------------
   Medido nas doze ferramentas: 12 de 12 abriam o `<style>` local com o MESMO
   reinício de `body` (margem zero, fundo, cor, Inter, suavização) e 12 de 12
   redeclaravam a fonte de título. Sessenta linhas escritas doze vezes, e doze
   lugares onde ela pode divergir sem que ninguém veja. O Bingo já tinha
   divergido: `line-height: 1.55` ali, ausente em `checkin`, e `min-height`
   em `dvh` só nele.

   Isto não é componente, é a casca. Componente se escolhe; casca se herda.
   Quem carrega `design-system.css` recebe estas cinco linhas e apaga as suas.

   `:where()` na fonte de título de propósito: especificidade zero. A faixa da
   ferramenta, o telão e o cartão continuam podendo pedir outro corpo sem
   disputar com esta regra, e sem `!important`. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4) { font-family: 'Space Grotesk', Inter, system-ui, sans-serif; letter-spacing: -.02em; }

/* ===========================================================================
   §26. O DOCUMENTO LONGO: ÍNDICE FIXO AO LADO DO TEXTO (10/09/2026, BV8)
   ---------------------------------------------------------------------------
   O DEFEITO: `.secao-lado` (título da seção numa coluna, texto na outra)
   funciona em seção curta. Nas páginas jurídicas, com seção longa, a coluna da
   esquerda ficava só com o título. Medido no WebKit e no Chromium, a 1280,
   1440 e 1920: a maior faixa vazia na coluna da esquerda era de 837px numa
   janela de 900 em `/privacidade/` (em todas as posições de rolagem, mais de
   um quarto da janela vazio) e de 317 a 344px em `/termos/`.

   O QUE OS PESQUISADOS FAZEM: Stripe e Intercom põem nas páginas jurídicas um
   índice fixo à esquerda, de 270 a 280px, com o texto ao lado (medição da
   primeira pesquisa de 10/09; na rodada do BV8 o navegador da sessão recusou
   os três domínios e a geometria não foi refeita).

   A REGRA (`RHCPagina.indice(conteudo)`, `nucleo/pagina.js`):
   1. A partir de 1100px o documento usa a grade da página, 5 : 7 com vão de
      48, a mesma do `.doc-abertura` e do §25.1: o índice na coluna da
      esquerda, e na da direita o texto, com o título da seção em cima do
      corpo. A coluna do índice é mais larga que os 280 dos pesquisados, e de
      propósito: o container da casa é de 1440. Medido nos dois motores, com
      índice de 280 o texto vai a 1064px a 1440 e a linha a 128 a 132
      caracteres (mediana por parágrafo); com 360, a 120 a 132. Na grade 5 : 7
      o índice tem 493px a 1280 e 560 a 1440, o texto 691 e 784, e a linha
      fica entre 82 e 97, a mesma de antes do índice.
   2. O índice é um PAINEL na altura inteira do documento, com o miolo
      `sticky`: a coluna é dele de cima a baixo. É o desenho do painel da
      ferramenta (§25), e cada linha do índice é a do resumo vivo (`.fr-ir`):
      disco com o número e o nome; o item ativo ganha fundo, borda, peso e o
      disco cheio, nunca só a cor.
   3. Abaixo de 1100px, uma coluna: o índice é um bloco recolhível no topo do
      documento, nascido fechado, com a contagem de seções no botão.
   4. O item ativo segue a leitura; o clique leva à seção e põe o foco no
      título dela; com movimento reduzido, a rolagem não anima.
   5. No papel, o índice sai (`impressao.css`) e o texto volta a uma coluna.
   6. O PÉ DO PAINEL (10/09/2026): abaixo da lista sobravam 387px de painel em
      branco na privacidade e 337 nos termos, numa janela de 900, nos dois
      motores. A partir de 1100 o miolo tem a altura da janela e o pé desce
      para a base dele, com o que tem função ao lado de um documento
      jurídico: os outros documentos legais, a data da versão lida da própria
      página, imprimir e a página de contato. Cada peça tem par nos
      pesquisados, lido no HTML em 10/09 (sem geometria): o Stripe lista os
      documentos legais na navegação à esquerda e fecha com "Fale conosco"; o
      Vercel abre com "Last Updated" e tem "Contact Us"; o Intercom lista os
      documentos no topo, data a vigência e oferece "Print this page". Numa
      janela baixa a lista encolhe e rola por dentro, e o título e o pé ficam
      na tela (medida no bloco de 1100, abaixo). Abaixo de 1100 o pé abre e
      fecha junto com a lista.
   =========================================================================== */
.documento { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-6); }
.doc-texto { min-width: 0; }
.doc-texto > .pagina-secao { scroll-margin-top: var(--e-6); }
.doc-texto > .pagina-secao:first-child { margin-top: 0; }

.doc-indice {
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  background: color-mix(in srgb, var(--fundo-2) 55%, transparent);
}
.doc-indice [hidden] { display: none; }
.di-miolo { display: grid; gap: var(--e-3); padding: var(--e-2); min-width: 0; }
.di-titulo { margin: 0; font: inherit; letter-spacing: normal; }
.di-rotulo, .di-subrotulo {
  display: block; padding: var(--e-1) var(--e-3) 0;
  font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.di-subrotulo { margin: 0; padding-top: 0; }
.di-abrir {
  appearance: none; width: 100%; min-height: var(--toque-min);
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--texto);
  font: inherit; font-size: 16px; line-height: 1.4; font-weight: 600; text-align: left; cursor: pointer;
}
.di-abrir:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.di-conta { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 500; color: var(--texto-3); white-space: nowrap; }
.di-seta {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-medio);
}
.di-abrir[aria-expanded="true"] .di-seta { transform: rotate(180deg); }
.di-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.di-item { margin: 0; }
.di-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-3);
  min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--texto-2); font-size: 14px; line-height: 1.4; text-decoration: none;
  transition: background var(--t-medio), border-color var(--t-medio), color var(--t-medio);
}
.di-link:hover { color: var(--texto); border-color: var(--borda-forte); }
.di-n {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; line-height: 1;
  border: 1px solid var(--borda-forte); color: var(--texto-2);
}
.di-nome { min-width: 0; }
.di-link[aria-current="true"] {
  color: var(--texto); font-weight: 600;
  border-color: color-mix(in srgb, var(--primaria) 45%, transparent);
  background: color-mix(in srgb, var(--primaria) 12%, transparent);
}
.di-link[aria-current="true"] .di-n { background: var(--btn-fundo); color: var(--btn-texto); border-color: transparent; }

/* O pé do painel (regra 6): documentos, data, imprimir e contato. Cada linha
   tem o alvo de 44px do índice; as duas ações dividem a fileira. */
.di-pe { display: grid; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--borda); min-width: 0; }
.di-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.di-doc {
  display: flex; align-items: center; min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  border: 1px solid transparent; border-radius: var(--r-m);
  color: var(--texto-2); font-size: 14px; line-height: 1.4; text-decoration: none;
  transition: background var(--t-medio), border-color var(--t-medio), color var(--t-medio);
}
.di-doc:hover { color: var(--texto); border-color: var(--borda-forte); }
.di-doc[aria-current="page"] { color: var(--texto); font-weight: 600; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.di-fim { display: grid; gap: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--borda); }
.di-fim:first-child { padding-top: 0; border-top: 0; }
.di-data { margin: 0; padding: 0 var(--e-3); font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.5; color: var(--texto-3); }
.di-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.di-acao {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque-min); padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borda-forte); border-radius: var(--r-m);
  background: transparent; color: var(--texto);
  font: inherit; font-size: 14px; line-height: 1.4; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--t-medio), border-color var(--t-medio);
}
.di-acao:hover { border-color: var(--secundaria); background: color-mix(in srgb, var(--texto) 6%, transparent); }
.di-ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1100px) {
  .documento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-7); align-items: stretch; }
  .doc-indice { grid-column: 1; }
  .doc-texto { grid-column: 2; }
  /* O miolo tem a altura da janela (e nunca a mais que o painel), e o pé vai
     para a base dele: a lista em cima, os documentos e as ações embaixo. */
  .di-miolo {
    position: sticky; top: var(--e-6);
    display: flex; flex-direction: column;
    min-height: min(100%, calc(100vh - 2 * var(--e-6)));
    max-height: calc(100vh - 2 * var(--e-6)); overflow-y: auto;
    padding: var(--e-4);
  }
  .di-pe { flex: none; margin-top: auto; }
  /* JANELA BAIXA: a lista encolhe e rola por dentro, e o título e o pé ficam
     na tela. Antes desta regra, a 1440 de largura, o pé ficava cortado em
     todas as seções: 6px na privacidade e 56 nos termos numa janela de 800,
     38 e 88 numa de 768, 106 e 156 numa de 700 (WebKit e Chromium). A folga
     em volta da lista, devolvida pela margem, é para a rolagem não cortar o
     anel de foco. Era de 4px, e o anel sai 5: cortava 1px dos dois lados em
     todo item, a 1440, nos dois motores (BV26, 10/09/2026). Com 8px de folga
     e 8 de margem negativa a lista ocupa o mesmo lugar de antes. */
  .di-lista { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2); margin: calc(-1 * var(--e-2)); }
}
/* JANELA BAIXA, NO FIM DO DOCUMENTO (10/09/2026, BV13). O painel acaba junto
   com o texto, o miolo sobe com ele, e da lista só fica à vista a faixa entre
   a borda de cima da janela e o pé. Numa janela de 700 essa faixa era de 26 a
   27px a 1440 e de 16 a 17 a 1280, nos dois motores, menor que um item (46):
   nenhuma rolagem da lista punha o item ativo inteiro à vista. Até 800 de
   altura os documentos do pé dividem uma fileira, e a lista ganha os 48px de
   um item. `overscroll-behavior` acima: a roda que chega ao fim da lista não
   passa a rolar a página, e a página não devolve a lista ao item ativo no
   meio do gesto. */
@media (min-width: 1100px) and (max-height: 800px) {
  .di-docs { display: flex; flex-wrap: wrap; gap: var(--e-1); }
  .di-docs > .di-item { flex: 1 1 auto; }
}
@media print {
  .documento { display: block; }
}