/* ============================================================
   KIT UNIVERSAL · componentes.css · v1.17.0 — 22/09/2026
   Os 13 componentes editoriais (artigo · herói · citação · figura+legenda
   · metadados · divisor · galeria · índice · rodapé · pilha de manchetes
   · fundo editorial · véu · rodapé editorial) + 3 peças de interface que
   eles consomem (ação · selo · parede de logos) + a revelação por rolagem.
   REGRAS DESTE ARQUIVO (a bateria mede cada uma):
     · toda cor por var() do CONTRATO ou dos DERIVADOS — zero hex, zero rgb;
     · estados repouso / hover / foco / ativo / desabilitado desenhados;
     · alvo de toque ≥ 24px em todo interativo (44px nos botões e itens);
     · toda duração e curva por token (--dur-*, --curva-*, --mov-*) — zero valor cru;
     · MOVIMENTO por MOLA: efeitos (cor/opacidade) em --mov-efeitos-*,
       espacial (tamanho/posição) em --mov-espacial-* — nomes NEUTROS de
       esquema: a raiz decide expressivo/padrao (data-movimento), o
       componente nunca sabe qual está vestido;
     · @container só com número DERIVADO e registrado (tokens.json > container);
     · reduced-motion por REMOÇÃO, bloco real no fim do arquivo;
     · nenhuma família, tamanho ou entrelinha fora dos papéis (--papel-*);
     · RESPIRO (22/09/2026, R-77/R-78): o rótulo de uma peça com fundo ou fio fica a ≥ e2 (8px)
       da borda em todos os lados; o texto corrido dentro de caixa com fundo ou fio no topo
       recua ≥ o gutter nas laterais — a régua de tela mede pelos retângulos do texto.
   Um pacote troca a pele inteira sem tocar aqui.
   ============================================================ */

/* ---------- utilitários de papel: um papel de texto = família + tamanho + entrelinha + peso + tracking ---------- */
.papel-display-xl, .papel-display-l, .papel-h1, .papel-h2, .papel-h3, .papel-lede, .papel-corpo-longo, .papel-corpo, .papel-meta, .papel-rotulo, .papel-navegacao, .papel-dado { margin: 0; }
.papel-display-xl { font-family: var(--papel-display-xl-familia); font-size: var(--papel-display-xl-tamanho); line-height: var(--papel-display-xl-entrelinha); font-weight: var(--papel-display-xl-peso); letter-spacing: var(--papel-display-xl-tracking); font-optical-sizing: auto; text-wrap: balance; }
.papel-display-l  { font-family: var(--papel-display-l-familia);  font-size: var(--papel-display-l-tamanho);  line-height: var(--papel-display-l-entrelinha);  font-weight: var(--papel-display-l-peso);  letter-spacing: var(--papel-display-l-tracking);  font-optical-sizing: auto; text-wrap: balance; }
.papel-h1  { font-family: var(--papel-h1-familia); font-size: var(--papel-h1-tamanho); line-height: var(--papel-h1-entrelinha); font-weight: var(--papel-h1-peso); letter-spacing: var(--papel-h1-tracking); font-optical-sizing: auto; text-wrap: balance; }
.papel-h2  { font-family: var(--papel-h2-familia); font-size: var(--papel-h2-tamanho); line-height: var(--papel-h2-entrelinha); font-weight: var(--papel-h2-peso); letter-spacing: var(--papel-h2-tracking); font-optical-sizing: auto; text-wrap: balance; }
.papel-h3  { font-family: var(--papel-h3-familia); font-size: var(--papel-h3-tamanho); line-height: var(--papel-h3-entrelinha); font-weight: var(--papel-h3-peso); letter-spacing: var(--papel-h3-tracking); font-optical-sizing: auto; text-wrap: balance; }
.papel-lede { font-family: var(--papel-lede-familia); font-size: var(--papel-lede-tamanho); line-height: var(--papel-lede-entrelinha); font-weight: var(--papel-lede-peso); letter-spacing: var(--papel-lede-tracking); }
.papel-corpo-longo { font-family: var(--papel-corpo-longo-familia); font-size: var(--papel-corpo-longo-tamanho); line-height: var(--papel-corpo-longo-entrelinha); font-weight: var(--papel-corpo-longo-peso); letter-spacing: var(--papel-corpo-longo-tracking); }
.papel-corpo { font-family: var(--papel-corpo-familia); font-size: var(--papel-corpo-tamanho); line-height: var(--papel-corpo-entrelinha); font-weight: var(--papel-corpo-peso); letter-spacing: var(--papel-corpo-tracking); }
.papel-meta  { font-family: var(--papel-meta-familia); font-size: var(--papel-meta-tamanho); line-height: var(--papel-meta-entrelinha); font-weight: var(--papel-meta-peso); letter-spacing: var(--papel-meta-tracking); }
.papel-rotulo { font-family: var(--papel-rotulo-familia); font-size: var(--papel-rotulo-tamanho); line-height: var(--papel-rotulo-entrelinha); font-weight: var(--papel-rotulo-peso); letter-spacing: var(--papel-rotulo-tracking); text-transform: uppercase; }
.papel-navegacao { font-family: var(--papel-navegacao-familia); font-size: var(--papel-navegacao-tamanho); line-height: var(--papel-navegacao-entrelinha); font-weight: var(--papel-navegacao-peso); letter-spacing: var(--papel-navegacao-tracking); }
.papel-dado { font-family: var(--papel-dado-familia); font-size: var(--papel-dado-tamanho); line-height: var(--papel-dado-entrelinha); font-weight: var(--papel-dado-peso); letter-spacing: var(--papel-dado-tracking); font-variant-numeric: tabular-nums; }

/* ---------- peça · AÇÃO (botão) — o texto sobe a --acao-texto-min quando sobre-acao reprova (derivado); e sobe ao peso 700 (--acao-texto-peso), porque 19px/600 não é "texto grande" pela WCAG ---------- */
.c-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--alvo-conforto); padding: var(--e3) var(--e5);   /* e3 em cima e embaixo: o rótulo respira mesmo em duas linhas (R-77). Sem flex-shrink: 0 — com ele a ação de rótulo longo passava da tela a 320px (R-56 na vitrine, 22/09/2026); o rótulo quebra em duas linhas e o e3 cuida do respiro */
  border: var(--fio-forte) solid var(--acao); border-radius: var(--raio-controle);
  background: var(--acao); color: var(--sobre-acao);
  font-family: var(--instrumento); font-size: max(var(--papel-navegacao-tamanho), var(--acao-texto-min)); font-weight: var(--acao-texto-peso, var(--peso-forte)); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva), border-color var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva), color var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva), transform var(--mov-espacial-rapida-duracao) var(--mov-espacial-rapida-curva);
}
.c-acao:hover { background: var(--acao-hover); border-color: var(--acao-hover); color: var(--sobre-acao); }
.c-acao:active { transform: scale(var(--escala-aperto)); }
.c-acao:disabled, .c-acao[aria-disabled="true"] { opacity: var(--opacidade-desabilitado); cursor: not-allowed; pointer-events: none; }
.c-acao.contorno { background: transparent; color: var(--acao-texto); }
.c-acao.contorno:hover { background: var(--superficie); color: var(--acao-texto); }
.c-acao.perigo { background: var(--erro); border-color: var(--erro); color: var(--sobre-erro); }
.c-acao.perigo:hover { background: var(--erro); border-color: var(--texto); }

/* ---------- peça · SELO (estado) — nunca só cor: ponto + texto; o cheio usa o "sobre" derivado ---------- */
.c-selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--alvo-toque); padding: var(--e2) var(--e3);   /* e2 em cima e embaixo: o rótulo respira o degrau (R-77) */
  border: var(--fio) solid var(--borda-campo); border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--texto);
  font-family: var(--instrumento); font-size: var(--papel-rotulo-tamanho); font-weight: var(--peso-forte); letter-spacing: var(--track-rotulo); text-transform: uppercase; line-height: var(--papel-rotulo-entrelinha);
}
.c-selo::before { content: ""; width: var(--e2); height: var(--e2); border-radius: var(--raio-pilula); background: var(--texto-2-pequeno); flex: none; }
.c-selo.ok::before { background: var(--ok-fio); }
.c-selo.aviso::before { background: var(--aviso-fio); }
.c-selo.erro::before { background: var(--erro-fio); }
.c-selo.cheio.ok { background: var(--ok); border-color: var(--ok); color: var(--sobre-ok); }
.c-selo.cheio.aviso { background: var(--aviso); border-color: var(--aviso); color: var(--sobre-aviso-seguro); }
.c-selo.cheio.erro { background: var(--erro); border-color: var(--erro); color: var(--sobre-erro); }
.c-selo.cheio::before { background: currentColor; }

/* ---------- 1 · ARTIGO ---------- */
.c-artigo { container-type: inline-size; container-name: artigo; max-width: var(--medida-corpo-longo); }
.c-artigo .mobilia { display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; padding-bottom: var(--e2); margin-bottom: var(--ritmo-bloco); border-bottom: var(--fio) solid var(--borda); color: var(--texto-2-pequeno); }
.c-artigo .manchete { margin: 0 0 var(--e3); color: var(--texto); }
.c-artigo .linha-fina { font-family: var(--voz); font-style: italic; color: var(--texto-2-pequeno); margin: 0 0 var(--e5); }
.c-artigo .assina { color: var(--texto-2-pequeno); margin: 0 0 var(--ritmo-bloco); }
.c-artigo .assina em { font-family: var(--voz); font-style: italic; }
.c-artigo .texto { color: var(--texto); }
.c-artigo .texto p { margin: 0 0 var(--ritmo-texto); text-wrap: pretty; }
.c-artigo .texto p:last-child { margin-bottom: 0; }
@container artigo (max-width: 384px) { /* piso de leitura: 45 car. na fonte mais larga a 16px + 2 × gutter — tokens.json > container.colapso-texto */
  .c-artigo .mobilia { flex-direction: column; gap: var(--e1); }
}

/* ---------- 2 · HERÓI ---------- */
.c-heroi { padding: var(--respiro-secao) 0 var(--ritmo-bloco); }
.c-heroi .rot { color: var(--acao-texto); margin: 0 0 var(--e5); }
.c-heroi .frase { margin: 0 0 var(--e6); max-width: var(--medida-citacao); color: var(--texto); }
.c-heroi .convite { color: var(--texto-2-pequeno); max-width: var(--medida-lede); margin: 0 0 var(--ritmo-bloco); }
.c-heroi .acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- 3 · CITAÇÃO DESTACADA (pull quote) ---------- */
.c-citacao { margin: var(--ritmo-bloco) 0; padding: var(--e5) var(--gutter); border-top: var(--fio) solid var(--borda); border-bottom: var(--fio) solid var(--borda); }
.c-citacao p { font-family: var(--voz); font-style: italic; font-size: var(--papel-h3-tamanho); line-height: var(--papel-h3-entrelinha); font-weight: var(--peso-normal); letter-spacing: 0; color: var(--texto); max-width: var(--medida-citacao); margin: 0; text-wrap: balance; }
.c-citacao cite { display: block; font-style: normal; color: var(--texto-2-pequeno); margin-top: var(--e3); }
.c-citacao.lateral { border: 0; border-left: var(--fio-forte) solid var(--acao); padding: var(--e2) 0 var(--e2) var(--e5); }

/* ---------- 4 · FIGURA + LEGENDA (exatamente 2 campos fora da foto; crédito é o 3º quando existe) ---------- */
.c-figura { margin: 0; }
.c-figura .moldura { aspect-ratio: var(--prop-retrato); background: var(--componente); border-radius: var(--raio-cartao); overflow: hidden; display: grid; place-items: center; }
.c-figura .moldura.tres-quatro { aspect-ratio: var(--prop-tres-quatro); }
.c-figura .moldura.quadrado { aspect-ratio: var(--prop-quadrado); }
.c-figura .moldura.paisagem { aspect-ratio: var(--prop-paisagem); }
.c-figura .moldura.tela { aspect-ratio: var(--prop-tela); }
.c-figura .moldura img { width: 100%; height: 100%; object-fit: cover; }
.c-figura .marcador { color: var(--texto-2-pequeno); }
.c-figura figcaption { display: flex; justify-content: space-between; gap: var(--e3); margin-top: var(--e2); color: var(--texto-2-pequeno); }
.c-figura figcaption .credito { flex-basis: 100%; }
.c-figura.apoio { max-width: 35%; }       /* foto de apoio: 25–35% do conteúdo (tokens.json > imagem) */
.c-figura.ancora { width: 100%; }         /* foto-âncora: 60–100% */

/* ---------- 5 · METADADOS ---------- */
.c-metadados { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); margin: 0; }
.c-metadados div { min-width: 0; }
.c-metadados dt { color: var(--texto-2-pequeno); margin: 0 0 var(--e1); }
.c-metadados dd { margin: 0; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- 6 · DIVISOR ---------- */
.c-divisor { border: 0; border-top: var(--fio) solid var(--borda); margin: var(--ritmo-bloco) 0; }
.c-divisor.forte { border-top-width: var(--fio-forte); border-color: var(--texto); }
.c-divisor.com-rotulo { display: flex; align-items: center; gap: var(--e3); border: 0; color: var(--texto-2-pequeno); }
.c-divisor.com-rotulo::before, .c-divisor.com-rotulo::after { content: ""; flex: 1; border-top: var(--fio) solid var(--borda); }

/* ---------- 7 · GALERIA (as legendas alinham por SUBGRID: estrutura, não coincidência) ---------- */
.c-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--e4) var(--e3); container-type: inline-size; container-name: galeria; }
.c-galeria .c-figura { grid-row: span 2; display: grid; grid-template-rows: subgrid; gap: var(--e2); }
.c-galeria .c-figura figcaption { margin-top: 0; align-self: start; }
.c-galeria .c-figura .moldura { transition: transform var(--mov-espacial-rapida-duracao) var(--mov-espacial-rapida-curva); }
.c-galeria .c-figura figcaption { opacity: var(--opacidade-legenda-repouso); transition: opacity var(--mov-efeitos-base-duracao) var(--mov-efeitos-base-curva); }
.c-galeria .c-figura:is(:hover, :focus-within) .moldura { transform: scale(var(--escala-hover-cartao)); }
.c-galeria .c-figura:is(:hover, :focus-within) figcaption { opacity: 1; }
@container galeria (max-width: 500px) { /* 180 de foto + 12 de vão + 45 car. de meta na fonte mais larga — tokens.json > container.cartao-2col */
  /* o colapso é das FIGURAS, não da grade: um elemento nunca responde à própria container query (só os
     descendentes do contêiner respondem) — a regra antiga em .c-galeria nunca casou, e a galeria ficava em
     três colunas a 320px (medido no retrato em 22/09/2026, R-78 nos marcadores). Cada figura ocupa as três
     trilhas (uma por linha) e larga o subgrid, que numa coluna só não tem o que alinhar. */
  .c-galeria .c-figura { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; }
}

/* ---------- 8 · ÍNDICE ---------- */
.c-indice { list-style: none; margin: 0; padding: 0; border-top: var(--fio) solid var(--borda); container-type: inline-size; container-name: indice; }
.c-indice li { border-bottom: var(--fio) solid var(--borda); }
.c-indice a { display: grid; grid-template-columns: var(--e9) 1fr auto; gap: var(--e3); align-items: baseline; padding: var(--e3) var(--gutter); min-height: var(--alvo-conforto); color: var(--texto); text-decoration: none; }
.c-indice .n { color: var(--texto-2-pequeno); }
.c-indice .nome { transition: color var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva); }
.c-indice .quem { color: var(--texto-2-pequeno); text-align: right; }
.c-indice a:hover .nome { color: var(--link-texto); text-decoration: underline; text-underline-offset: .15em; }
.c-indice a:active .nome { color: var(--acao-hover); }
@container indice (max-width: 384px) { .c-indice a { grid-template-columns: var(--e9) 1fr; } .c-indice .quem { grid-column: 2; text-align: left; } }

/* ---------- 9 · RODAPÉ INVERTIDO (o volume mais alto — um por peça) ---------- */
.c-rodape { background: var(--texto); color: var(--fundo); padding: var(--respiro-secao) var(--gutter); }
.c-rodape .remate { margin: 0 0 var(--e3); color: inherit; }
.c-rodape p { margin: 0; max-width: var(--medida-corpo); }
.c-rodape a { color: inherit; text-underline-offset: .15em; min-height: var(--alvo-toque); display: inline-flex; align-items: center; }
.c-rodape a:hover { color: inherit; text-decoration-thickness: var(--fio-forte); }
.c-rodape ::selection { background: var(--fundo); color: var(--texto); }

/* ---------- revelação por rolagem (scroll-driven nativo; guarda DUPLA — o MUST do modern-web-guidance) ---------- */
@supports (animation-timeline: view()) and (animation-range: entry) {
  @media (prefers-reduced-motion: no-preference) {
    .revela { animation: kit-surgir var(--curva-entrada) both; animation-timeline: view(); animation-range: entry 0% entry 48%; }
    @keyframes kit-surgir { from { opacity: 0.001; transform: translateY(var(--dist-revela)); } to { opacity: 1; transform: none; } }
  }
}
/* stagger geométrico: o n-ésimo irmão entra um passo depois (teto: 6 passos) — para transições disparadas por classe .entra */
.entra > * { transition: opacity var(--mov-efeitos-base-duracao) var(--mov-efeitos-base-curva), transform var(--mov-espacial-base-duracao) var(--mov-espacial-base-curva); }
.entra > :nth-child(2) { transition-delay: var(--stagger-passo); }
.entra > :nth-child(3) { transition-delay: calc(2 * var(--stagger-passo)); }
.entra > :nth-child(4) { transition-delay: calc(3 * var(--stagger-passo)); }
.entra > :nth-child(5) { transition-delay: calc(4 * var(--stagger-passo)); }
.entra > :nth-child(6) { transition-delay: calc(5 * var(--stagger-passo)); }
.entra > :nth-child(n + 7) { transition-delay: var(--stagger-maximo); }
/* elemento colado ganha a sombra nível 1 (sinal de camada) */
.c-colado { position: sticky; top: 0; z-index: var(--z-mobiliario); background: var(--fundo); box-shadow: var(--sombra-1); }

/* ---------- mobília das páginas de demonstração ---------- */
.demo-comp { padding: var(--e5) var(--gutter) var(--e6); max-width: var(--grade-largura-max); margin-inline: auto; }
.demo-comp > main { padding-top: var(--respiro-mobiliario); }   /* o vão da barra fixa ao primeiro conteúdo — R-59 (o olho do dono: gap 0 na barra do seletor) */
.c-doc { margin-top: var(--ritmo-bloco); border-top: var(--fio) solid var(--borda); padding: var(--e3) var(--gutter) 0; color: var(--texto-2-pequeno); max-width: var(--medida-corpo-longo); overflow-wrap: anywhere; }   /* o fio no topo faz caixa: o texto recua o gutter (R-78) */
.c-doc > h2 { margin: 0 0 var(--e3); color: var(--texto); }
.c-doc b { color: var(--texto); }
.c-doc p { margin: 0 0 var(--ritmo-texto); }
.c-doc ul { padding-left: var(--e5); margin: var(--e2) 0 var(--ritmo-texto); }
.c-doc li { margin-bottom: var(--e1); }
.c-doc .sim::marker { content: "✓ "; color: var(--ok-fio); }
.c-doc .nao::marker { content: "✕ "; color: var(--erro-fio); }

/* ---------- a página de componente ao nível do kit (22/09/2026, ordem do dono) — a mobília da
   documentação de peça: só papéis e degraus do contrato; toda caixa com fio no topo ou fundo
   recua o texto pelo gutter (R-77/R-78); tabela e código rolam em tela estreita (a exceção
   mecânica da rolagem), nunca estouram (R-56). ---------- */
.demo-comp > main > h1 { margin: 0 0 var(--e3); }
.demo-comp > main > h1 code { font-weight: var(--peso-normal); color: var(--texto-2-pequeno); }
.demo-comp > main > .papel-lede { color: var(--texto-2-pequeno); max-width: var(--medida-lede); margin: 0 0 var(--e5); }
.demo-comp code { font-family: var(--dado); }
.c-doc-secao { padding-top: var(--respiro-secao); }
.c-doc-secao > h2 { margin: 0 0 var(--e4); padding-bottom: var(--e2); border-bottom: var(--fio-forte) solid var(--texto); }
.c-doc-secao > h3 { margin: var(--ritmo-bloco) 0 var(--e3); }
.c-doc-secao > h4 { margin: var(--e5) 0 var(--e2); }
.c-doc-secao > p, .c-doc-secao > ul, .c-doc-secao > ol { max-width: var(--medida-corpo-longo); margin: 0 0 var(--ritmo-texto); }
.c-doc-secao > p { text-wrap: pretty; }
.c-doc-secao > ul, .c-doc-secao > ol { padding-left: var(--e5); }
.c-doc-secao li { margin-bottom: var(--e1); }
.c-doc-secao p code, .c-doc-secao li code, .c-doc-secao td code, .c-doc-secao th code, .c-doc-secao dd code, .c-doc code { font-size: var(--papel-dado-tamanho); }
.c-doc-secao .nota { color: var(--texto-2-pequeno); }
.c-doc-demo { margin: 0 0 var(--ritmo-bloco); }
.c-doc-demo > .papel-rotulo { color: var(--texto-2-pequeno); margin: 0 0 var(--e3); }
.c-doc-rolagem { overflow-x: auto; margin: 0 0 var(--ritmo-texto); }
.c-doc-tab { border-collapse: collapse; width: 100%; font-family: var(--instrumento); font-size: var(--papel-meta-tamanho); line-height: var(--papel-meta-entrelinha); color: var(--texto); }
.c-doc-tab th, .c-doc-tab td { text-align: left; vertical-align: top; padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: var(--fio) solid var(--borda); }
.c-doc-tab th { font-family: var(--papel-rotulo-familia); font-size: var(--papel-rotulo-tamanho); line-height: var(--papel-rotulo-entrelinha); font-weight: var(--papel-rotulo-peso); letter-spacing: var(--papel-rotulo-tracking); text-transform: uppercase; color: var(--texto-2-pequeno); }
.c-doc-codigo { font-family: var(--dado); font-size: var(--papel-dado-tamanho); line-height: var(--papel-dado-entrelinha); color: var(--texto); background: var(--superficie); border: var(--fio) solid var(--borda); border-radius: var(--raio-cartao); padding: var(--e3) var(--gutter); margin: 0 0 var(--ritmo-texto); white-space: pre-wrap; overflow-wrap: anywhere; max-width: none; }   /* quebra de linha, não rolagem: a linha longa que entra no padding sem sair da caixa mede menos que o degrau (R-77) */
.c-doc-estados { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; padding: var(--e3) var(--gutter); background: var(--superficie); border: var(--fio) solid var(--borda); border-radius: var(--raio-controle); margin: 0 0 var(--ritmo-texto); }
.c-doc-estados > .papel-meta { color: var(--texto-2-pequeno); }

/* ---------- 10 · PILHA DE MANCHETES (o tamanho calculado para a linha caber exata;
   as linhas se tocam; vozes diferentes na mesma pilha — a caixa de cada linha é decidida
   pela fórmula do acento em português, com o piso do pacote: teto-acento-em ---------- */
.c-pilha { margin: 0; }

/* o guarda da voz (primeira defesa — dossiê §6.22): a pilha NÃO degrada com a família
   substituta, ela quebra (transborda até 21,3%); então ela espera escondida enquanto
   houver quem a mostre depois. O com-js entra antes do corpo, na página. */
html.com-js .c-pilha { visibility: hidden; }
html.voz-pronta .c-pilha { visibility: visible; }

.c-pilha-linha {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;            /* as ascendentes saem da caixa — é o que cola a pilha */
}
.c-pilha .c-pilha-dupla { display: flex; align-items: flex-start; }
.c-pilha .c-pilha-dupla > * { min-inline-size: 0; }
.c-pilha .c-pilha-dupla svg,
.c-pilha a.c-pilha-linha > svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

.c-pilha-linha text {
  font-family: var(--papel-h1-familia);      /* a voz — a mesma família do h1 */
  font-weight: var(--papel-h1-peso);
  letter-spacing: var(--papel-h1-tracking);  /* SEMPRE em em (dossiê §6.7) */
  font-optical-sizing: none;                 /* trava o eixo óptico (dossiê §6.8) */
  font-variation-settings: 'opsz' var(--pilha-opsz, 14); /* no teto da família; 14 é no-op sem eixo */
}
/* as vozes — UM SELETOR A MAIS de propósito: regra irmã vence por ordem (dossiê §6.15) */
.c-pilha .v-marca { font-style: normal; fill: var(--texto); }
.c-pilha .v-frase { font-style: italic; fill: var(--link-texto); }

/* o clique NÃO vem do desenho: o <tspan> é testado pelo retângulo (dossiê §6.14) */
.c-pilha, .c-pilha * { pointer-events: none; }
.c-pilha a { pointer-events: auto; cursor: pointer; display: block; min-height: var(--alvo-toque); }

/* estados: hover e ativo trocam a COR da voz clicável (nunca opacidade — R-33); o foco
   é o anel do kit. Desabilitado não se aplica: a pilha é título, não controle. */
.c-pilha a .v-frase { transition: fill var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva); }
.c-pilha a:hover .v-frase { fill: var(--acao-hover); }
.c-pilha a:active .v-frase { fill: var(--acao-hover); }
.c-pilha a:focus-visible { outline: var(--foco-espessura) solid var(--foco); outline-offset: var(--foco-offset); }

/* ---------- 11 · FUNDO EDITORIAL (papel de página: o chão degradê; não é interativo) ----------
   As paradas moram nos tokens (degrade.editorial/palco, por referência ao contrato) e a porta
   é composta pelo gerador — a peça nunca digita o gradiente (R-69) nem cor nenhuma. */
.c-fundo {
  min-height: var(--degrade-altura-minima);        /* a pegadinha da rolagem: cobre o documento, nunca preso à tela */
  padding-inline: var(--gutter);                   /* o texto direto sobre o chão respira o gutter (R-78) */
  background-image: var(--degrade-editorial);      /* as paradas são os degraus do contrato; troca de tema sozinha */
  background-repeat: no-repeat;
  background-attachment: scroll;                   /* declarado por escrito: fixed não existe no kit (repinta a cada frame) */
}
.c-fundo.palco { background-image: var(--degrade-palco); }   /* o pano do grito: texto direto só na faixa do fundo */
.c-fundo .cartao { background: var(--superficie); border-radius: var(--raio-cartao); padding: var(--e5); max-width: var(--medida-corpo-longo); }   /* o conteúdo do palco senta em superfície aprovada */

/* ---------- 12 · VÉU (a cortina translúcida e a cartela em série) ----------
   O alfa vem dos derivados --veu-fundo/--cartela-fundo (compostos no tokens.css
   gerado: color-mix da tinta/superficie com --alfa-veu/--alfa-superficie-cartela;
   reserva declarada para navegador sem color-mix — o padrão da sombra).
   O véu usa a TINTA do pacote: no tema escuro é claro (o rodapé invertido
   diluído). Texto de leitura mora na CARTELA, em série com o véu — o fundo
   hostil entra com (1-0,64)×(1-0,80) = 7,2% do peso e o pior caso medido é
   6,96:1. Texto direto no véu: só na tinta invertida (var(--fundo)), porque o
   alfa 64% passa do piso medido (4,85:1 no pior caso, hostil por medição).
   Sem blur: a escola do vidro (backdrop-filter) não entrou nesta versão. */
.c-veu {
  position: fixed; inset: 0; z-index: var(--z-veu);
  display: grid; place-items: center; padding: var(--e5);
  background: var(--veu-fundo);
  opacity: 0.001; visibility: hidden; pointer-events: none;
  transform: scale(0);                             /* fechado, o véu não ocupa a tela: mobília que não se vê não é mobília (a R-59 o cobrava como barra fixa, 22/09/2026); o colapso espera o fim da saída */
  transition: opacity var(--mov-efeitos-base-duracao) var(--mov-efeitos-base-curva),
              visibility 0s var(--mov-efeitos-base-duracao),
              transform 0s var(--mov-efeitos-base-duracao);
}
.c-veu:target, .c-veu.aberto {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--mov-efeitos-base-duracao) var(--mov-efeitos-base-curva),
              visibility 0s 0s, transform 0s 0s;
}
.c-veu.local { position: absolute; z-index: var(--z-instrumento); }   /* a cartela de seção: sobre conteúdo dentro de um contêiner position:relative */
.c-veu.cortina { pointer-events: none; }                              /* o scrim puro: decorativo, sem cartela (aria-hidden na página) */
.c-veu .cartela {
  max-width: var(--medida-lede);
  padding: var(--e6);
  border: var(--fio) solid var(--borda); border-radius: var(--raio-cartao);
  background: var(--cartela-fundo);
  box-shadow: var(--sombra-2);
  color: var(--texto);
}
.c-veu .cartela > :last-child { margin-bottom: 0; }

/* ---------- 13 · RODAPÉ EDITORIAL (o colofão: o fim da PÁGINA — .c-rodape é o fim da PEÇA) ----------
   Peça irmã do rodapé invertido, NÃO variante dele: o invertido fecha a peça com o volume
   mais alto (um por peça); este fecha a PÁGINA na superfície — navegação de fim (a segunda
   chance de quem rolou até o fim), colofão (quem fez, com o quê, quando) e a parede de logos.
   O colofão NÃO nasce peça: é a dl.c-metadados existente com papéis de texto novos. */
.c-rodape-editorial { background: var(--superficie); border-top: var(--fio) solid var(--borda); padding: var(--e10) var(--gutter) var(--respiro-secao); display: grid; gap: var(--ritmo-bloco); }
.c-rodape-editorial .fim-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--grade-largura-max) / 6)), 1fr)); gap: var(--e6) var(--e5); }   /* coluna de grupo = coluna estreita do kit (1:6 da largura máxima), derivada, sem número novo */
.c-rodape-editorial .fim-nav ul { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e1); }
.c-rodape-editorial .fim-nav a { display: inline-flex; align-items: center; min-height: var(--alvo-conforto); color: var(--texto-2-pequeno); text-decoration: none; transition: color var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva); }
.c-rodape-editorial .fim-nav a:hover { color: var(--link-texto); text-decoration: underline; text-underline-offset: .15em; }   /* hover TROCA A COR (R-33), nunca a opacidade */
.c-rodape-editorial .fim-nav a:active { color: var(--acao-hover); }
.c-rodape-editorial .colofao { border-top: var(--fio) solid var(--borda); padding: var(--e5) var(--gutter) 0; display: grid; gap: var(--e3); max-width: var(--medida-corpo); }
.c-rodape-editorial.minimo { padding-top: var(--e8); }   /* a variante mínima (só colofão) respira menos: não é mapa, é assinatura */

/* ---------- peça · PAREDE DE LOGOS (o crédito emprestado: peso visual por família de forma, nunca largura única) ---------- */
.c-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e6) var(--e8); list-style: none; margin: 0; padding: 0; }
.c-logos li { display: flex; align-items: center; min-height: var(--alvo-conforto); min-width: 0; max-width: 100%; }
.c-logos a { display: inline-flex; align-items: center; min-height: var(--alvo-conforto); max-width: 100%; }
.c-logos img { height: auto; max-height: var(--logo-altura-horizontal); width: auto; max-width: 100%; }   /* o eixo da família manda; a coluna limita (a 320px o logo horizontal mais largo passava de 296px — R-56) */
.c-logos .quadrado img { max-height: var(--logo-lado-quadrado); }
.c-logos .vertical img { max-height: none; width: var(--logo-largura-vertical); }
.c-logos img, .c-logos .nome-marca { opacity: var(--opacidade-logo-repouso); transition: opacity var(--mov-efeitos-rapida-duracao) var(--mov-efeitos-rapida-curva); }
.c-logos :is(li, a):hover img, .c-logos :is(li, a):focus-visible img, .c-logos :is(li, a):hover .nome-marca, .c-logos :is(li, a):focus-visible .nome-marca { opacity: 1; }   /* restaura o repouso declarado — o mesmo papel da legenda da galeria (bloco 7); nunca filter: a marca do outro não se altera */
.c-logos .nome-marca { display: none; }   /* o nome em texto espera enquanto o logo mostra */
.c-logos.mencoes .nome-marca { display: inline-flex; align-items: center; min-height: var(--alvo-conforto); }   /* a menção é o piso: nome em texto, SEM link (menção não sugere endosso) */

/* tema escuro, SEM versão alternativa do logo: o NOME em texto — nunca o filtro que alteraria
   a marca do outro. O par de gatilhos ESPELHA o gerador (pacotes.css): media do sistema com
   :not([data-theme="light"]) + data-theme="dark" manual — o mesmo autor de tema que veste o
   pacote veste a parede. Zero cor aqui: o texto veste --texto-2-pequeno por construção. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-logos li.sem-versao-escura img { display: none; }
  :root:not([data-theme="light"]) .c-logos li.sem-versao-escura .nome-marca { display: inline-flex; align-items: center; min-height: var(--alvo-conforto); }
}
[data-theme="dark"] .c-logos li.sem-versao-escura img { display: none; }
[data-theme="dark"] .c-logos li.sem-versao-escura .nome-marca { display: inline-flex; align-items: center; min-height: var(--alvo-conforto); }

/* ---------- reduced-motion: REMOÇÃO, componente a componente (bloco real, não comentário) ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-acao, .c-acao:active { transition: none; transform: none; }
  .c-galeria .c-figura .moldura, .c-galeria .c-figura figcaption { transition: none; transform: none; opacity: 1; }
  .c-indice .nome { transition: none; }
  .revela { animation: none; opacity: 1; transform: none; }
  .entra > * { transition: none; transition-delay: 0s; }
  .c-pilha a .v-frase { transition: none; }
  .c-veu, .c-veu:target, .c-veu.aberto { transition: none; }
  .c-rodape-editorial .fim-nav a, .c-logos img, .c-logos .nome-marca { transition: none; }
}

/* ---------- peça · SELETOR DE VESTE — a documentação e as páginas de prova trocam o pacote ao vivo.
   Altura reservada (min-height) para o seletor montado por JavaScript não deslocar a página (CLS);
   no kit.html o formulário é gerado estático pelo gerador e não desloca nada. ---------- */
.seletor { position: sticky; top: 0; z-index: var(--z-mobiliario); background: var(--superficie); border-block: var(--fio) solid var(--borda); padding: var(--e3) var(--gutter); box-shadow: var(--sombra-1); min-height: calc(var(--papel-rotulo-entrelinha) + var(--e1) + var(--alvo-conforto) + var(--e3) + var(--papel-meta-entrelinha) + var(--e3) * 2); }
.seletor-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e3) var(--e4); align-items: end; max-width: var(--grade-largura-max); margin-inline: auto; }   /* grade, não flex: a quebra de linha depende da largura da janela, nunca da largura do texto das opções (deslocamento medido em 19/09) */
.seletor-campo { display: grid; gap: var(--e1); }
.seletor-campo > span { font-family: var(--papel-rotulo-familia); font-size: var(--papel-rotulo-tamanho); line-height: var(--papel-rotulo-entrelinha); font-weight: var(--papel-rotulo-peso); letter-spacing: var(--papel-rotulo-tracking); text-transform: uppercase; color: var(--texto-2-pequeno); }
.seletor-form select { width: 100%; min-height: var(--alvo-conforto); padding: 0 var(--e3); border: var(--fio) solid var(--borda-campo); border-radius: var(--raio-controle); background: var(--fundo); color: var(--texto); font-family: var(--instrumento); font-size: var(--papel-navegacao-tamanho); }
.seletor-estado { grid-column: 1 / -1; margin: 0; color: var(--texto-2-pequeno); }

/* A DOBRA DO SELETOR (v1.5.1, visto no teste de tela a 375px: aberto e sticky, o formulário tomava
   ~3/4 da tela do celular ao rolar). Em tela estreita o seletor nasce DOBRADO numa linha — o botão
   .seletor-dobrar (feito pelo kit.js) abre e fecha com a classe .aberto; em tela larga nada muda.
   O corte é o estreito do kit (tokens.json > breakpoints.estreito-max: 767 — media query não
   aceita var(), transcreve-se). */
.seletor-dobrar { display: none; }
@media (max-width: 767px) {
  .seletor { padding-block: 0; }
  .seletor:not(.aberto) { min-height: 0; }
  .seletor.aberto { padding-block: var(--e3); }
  .seletor:not(.aberto) .seletor-form { display: none; }
  .seletor-dobrar { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); width: 100%; min-height: var(--alvo-conforto); background: none; border: 0; padding: 0; font-family: var(--papel-rotulo-familia); font-size: var(--papel-rotulo-tamanho); line-height: var(--papel-rotulo-entrelinha); font-weight: var(--papel-rotulo-peso); letter-spacing: var(--papel-rotulo-tracking); text-transform: uppercase; color: var(--texto-2-pequeno); cursor: pointer; }
  .seletor-dobrar::after { content: "▾"; font-family: var(--instrumento); }
  .seletor.aberto .seletor-dobrar::after { content: "▴"; }
}