/* ============================================================================
   PLATAFORMA DE MARCA · plataforma.css — linguagem de conteúdo das páginas
   (Frente 2). Requer tokens.css + base.css + layouts.css do DS.
   Guia de uso: frontend/assets/CONTRATO-PAGINA.md (kit v2, K1–K17).
   Regras: só cor por token (var(--…)); nada de hex/rgb/#fff/white aqui. Texto
   branco sobre Ardósia vem do base.css (.bloco.escuro / .cartao.destaque):
   dentro deles use color: inherit + opacity, nunca uma cor própria.
   Este arquivo é só da plataforma: não vira padrão do DS sem pedido.
   Ordem: casca · KIT v2. (O bloco LEGADO foi apagado em 23/10/2026: todas as páginas estão no kit.)
   ========================================================================== */
/* ------------------------------------------------------------ casca */
.marca .logo-link { display: block; color: inherit; }
.nav a[hidden] { display: none; }
[id] { scroll-margin-top: 132px; }

/* revela ao rolar: o único movimento de entrada aceito (opacidade + 12px, 420ms) */
.revela { opacity: 0; transform: translateY(12px); transition: opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; transition: none; } }

/* ============================================================================
   KIT DE CONTEÚDO v2 (23/10/2026) — "navegar, não rolar"
   Página-referência: personalidade-de-marca/valores.html (itens conceituais,
   explorador lateral) e identidade-verbal/voz-e-tons.html (conceito duplo,
   destaque, explorador em cima). Guia: assets/CONTRATO-PAGINA.md.
   Ideia: cada página mostra primeiro a essência (nome, frase, pergunta,
   número) e o detalhe só quando a pessoa pede (aba, alternador, "mais").
   Interação 100% nativa: radio + label + :has(); <details>. Sem JS.
   ========================================================================== */

/* utilitário: some da tela, fica no DOM (leitor de tela e IA leem) */
.so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a.link { color: var(--ardosia-media); text-decoration: underline; text-decoration-color: var(--bruma-profunda); text-underline-offset: 3px; }
a.link:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ K1 · CABEÇA
   Uma linha: frase de abertura (Sora) à esquerda, apoio curto à direita. */
.cabeca { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px 40px; align-items: end; }
.cabeca .lede { font: 450 var(--t-titulo-2)/1.15 var(--font-display); letter-spacing: -.04em; color: var(--tinta); max-width: 28ch; text-wrap: balance; }
.cabeca .apoio { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-56); text-wrap: pretty; }

/* ------------------------------------------------------- K2 · CIFRA
   Quantidade que vale ver: número grande + rótulo. */
.cifra { display: inline-flex; align-items: baseline; gap: 8px; }
.cifra b { font: 450 var(--t-display-2)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.cartao.destaque .cifra b, .bloco.escuro .cifra b { color: inherit; }
.cifra span { font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-56); }

/* ------------------------------------------------------- K3 · DUPLA
   Dois conceitos lado a lado (voz × tom, usar × evitar), em vidro sobre a luz
   do topo do painel: cifra à esquerda, frase curta, explicação em "mais". */
.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dupla > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 18px 22px; border-radius: var(--r-cartao); background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.dupla .cifra { grid-row: span 3; flex-direction: column; gap: 6px; min-width: 64px; }
.dupla .frase-curta { font: var(--peso-subtitulo) var(--t-titulo-4)/1.3 var(--font-display); letter-spacing: -.03em; color: var(--tinta); max-width: 40ch; }

/* ------------------------------------------------------- K4 · FAIXA DE SEÇÃO
   Título de seção compacto: h2 + contagem + apoio de uma linha. */
.faixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 8px; }
.faixa h2 { font-size: var(--t-titulo-3); }
.faixa .contagem { align-self: center; }
.faixa p { flex-basis: 100%; font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-56); }

/* ------------------------------------------------------- K5 · TROCA
   O mecanismo de "uma coisa por vez" (abas, alternador), sem JS:
   <div class="troca"> <div class="troca-botoes"> <label><input type="radio"
   name="…" checked>…</label>… </div> <section>…</section>… </div>
   O N-ésimo label mostra a N-ésima <section> filha direta. Até 12. */
.troca-botoes label { position: relative; }
.troca-botoes input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.troca > section { min-width: 0; transition: opacity .24s var(--ease-out), translate .24s var(--ease-out); }
@starting-style { .troca > section { opacity: 0; translate: 0 6px; } }
.troca:has(> .troca-botoes > label:nth-of-type(1) > input:not(:checked)) > section:nth-of-type(1),
.troca:has(> .troca-botoes > label:nth-of-type(2) > input:not(:checked)) > section:nth-of-type(2),
.troca:has(> .troca-botoes > label:nth-of-type(3) > input:not(:checked)) > section:nth-of-type(3),
.troca:has(> .troca-botoes > label:nth-of-type(4) > input:not(:checked)) > section:nth-of-type(4),
.troca:has(> .troca-botoes > label:nth-of-type(5) > input:not(:checked)) > section:nth-of-type(5),
.troca:has(> .troca-botoes > label:nth-of-type(6) > input:not(:checked)) > section:nth-of-type(6),
.troca:has(> .troca-botoes > label:nth-of-type(7) > input:not(:checked)) > section:nth-of-type(7),
.troca:has(> .troca-botoes > label:nth-of-type(8) > input:not(:checked)) > section:nth-of-type(8),
.troca:has(> .troca-botoes > label:nth-of-type(9) > input:not(:checked)) > section:nth-of-type(9),
.troca:has(> .troca-botoes > label:nth-of-type(10) > input:not(:checked)) > section:nth-of-type(10),
.troca:has(> .troca-botoes > label:nth-of-type(11) > input:not(:checked)) > section:nth-of-type(11),
.troca:has(> .troca-botoes > label:nth-of-type(12) > input:not(:checked)) > section:nth-of-type(12) { display: none; }

/* alternador segmentado do DS (.alternar) com radio em vez de button */
.alternar label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pilula); font: 500 12.5px var(--font-body); color: var(--tinta-66); white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.alternar label:hover { color: var(--tinta); }
.alternar label:has(input:checked) { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-ativo); }
.alternar label:has(input:focus-visible) { box-shadow: var(--sombra-foco); }
.alternar label svg.i { width: 14px; height: 14px; }

/* ------------------------------------------------------- K6 · EXPLORADOR
   N itens do mesmo tipo: lista de abas + painel do item escolhido. Uma tela,
   sem rolar. .explorador (abas à esquerda, 5+ itens) ou
   .explorador.em-cima (abas numa linha, 2 a 5 itens). */
.explorador { display: grid; grid-template-columns: minmax(200px, 248px) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.explorador > .troca-botoes { position: sticky; top: 120px; display: grid; gap: 2px; }
.explorador > .troca-botoes > .t-rotulo { padding: 0 12px 8px; color: var(--tinta-46); }
.explorador > section { grid-column: 2; grid-row: 1; }
.explorador.em-cima { grid-template-columns: minmax(0, 1fr); }
.explorador.em-cima > .troca-botoes { position: static; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.explorador.em-cima > section { grid-column: 1; grid-row: 2; }

/* a aba: disco com número + nome (+ sub opcional de 1 linha) */
.aba { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-interno); color: var(--tinta-66); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.aba:hover { background: var(--hover); color: var(--tinta); }
.aba-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bruma-clara); font: 450 11.5px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--tinta-66); transition: background-color .15s var(--ease), color .15s var(--ease); }
.aba-texto { display: grid; gap: 2px; min-width: 0; }
.aba-nome { font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
.aba-sub { font-size: 11.5px; line-height: 1.35; color: var(--tinta-46); }
.aba > svg.i { margin-left: auto; width: 15px; height: 15px; color: var(--tinta-32); opacity: 0; transition: opacity .15s var(--ease); }
.aba:has(input:checked) { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-cartao); }
.aba:has(input:checked) .aba-n { background: var(--marcado); color: var(--sobre-marcado); }
.aba:has(input:checked) > svg.i { opacity: 1; }
.aba:has(input:focus-visible) { box-shadow: var(--sombra-foco); }
.em-cima .aba { box-shadow: inset 0 0 0 1px var(--linha); }
.em-cima .aba:has(input:checked) { box-shadow: var(--sombra-cartao); }

/* ------------------------------------------------------- K7 · ITEM
   O painel de um item (.cartao). Herói em duas colunas: identidade à
   esquerda (rótulo, nome, manchete, nuvem) e a ESSÊNCIA Ardósia à direita —
   o único escuro do item. Abaixo, as vistas (K8). */
.item { container-type: inline-size; display: grid; gap: 20px; align-content: start; }
.item-heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 48%); gap: 16px 28px; align-items: start; }
.item-id { display: grid; gap: 10px; align-content: start; justify-items: start; min-width: 0; }
.item-id > .t-rotulo { color: var(--tinta-46); }
.item-id h2, .item-id h3 { font-size: var(--t-titulo-1); }
.manchete { font: var(--peso-subtitulo) var(--t-titulo-3)/1.28 var(--font-display); letter-spacing: -.035em; color: var(--tinta-82); max-width: 34ch; text-wrap: balance; }
.essencia { display: grid; gap: 10px; align-content: start; padding: 18px 20px; }
.essencia .t-rotulo { display: flex; align-items: center; gap: 8px; }
/* variação (valores, 27/10/2026): a manchete ocupa a coluna da direita do herói,
   alinhada à direita, e a essência vira uma barra no pé do item, largura toda:
   rótulo com a estrela à esquerda, frase à direita. */
.item-heroi:has(> .manchete):not(.arq-heroi) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.item-heroi:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } /* sem manchete: o herói usa a largura toda */
.item-heroi > .manchete { justify-self: end; text-align: right; }
.essencia.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; padding: 16px 22px; }
.essencia.barra .t-rotulo { flex: none; }
.bloco.escuro.essencia.barra p { flex: 1 1 320px; text-align: right; }
@container (max-width: 600px) {
  .item-heroi:has(> .manchete):not(.arq-heroi) { grid-template-columns: minmax(0, 1fr); }
  .item-heroi > .manchete, .bloco.escuro.essencia.barra p { justify-self: start; text-align: left; }
}
.bloco.escuro.essencia p { font: 450 var(--t-titulo-4)/1.38 var(--font-display); letter-spacing: -.03em; color: inherit; }
.cartao.destaque .essencia { background: var(--hover); } /* essência dentro de cartão já escuro: translúcida */

/* texto de leitura dentro de item/vista (definição, descrição) */
.texto { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); text-wrap: pretty; }
.texto + .texto { margin-top: 10px; }
.texto-g { font-size: var(--t-texto-m); } /* 27/10/2026: texto de conteúdo tem um tamanho só (--t-texto-m); a classe ficou por compatibilidade */
.rotulo-fonte { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; color: var(--tinta-46); }
.rotulo-fonte svg.i { width: 13px; height: 13px; }

/* ------------------------------------------------------- K8 · VISTAS
   Detalhe sob demanda dentro do item: .alternar + uma <section> por vista
   (é o mesmo mecanismo K5). A primeira vista é a mais visual. */
.vistas { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--linha); }
.vistas > .alternar { justify-self: start; max-width: 100%; flex-wrap: wrap; }

/* ------------------------------------------------------- K9 · COMPARA
   "É / não é", "faça / evite", "garante / nunca faz": duas colunas curtas
   com ✓ e ✕. O lado "sim" em Tela; o lado "não" só com contorno. */
.compara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* cor semântica do DS (27/10/2026): lado "sim" verde, lado "não" vermelho */
.compara > div { display: grid; gap: 10px; align-content: start; padding: 14px 16px 16px; border-radius: var(--r-interno); background: color-mix(in srgb, var(--st-ok) 45%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--positivo) 18%, transparent); }
.compara > .nao { background: color-mix(in srgb, var(--st-alerta) 45%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--negativo) 18%, transparent); }
.compara .t-rotulo { display: flex; align-items: center; gap: 8px; color: var(--positivo); }
.compara > .nao .t-rotulo { color: var(--negativo); }
.compara .t-rotulo svg.i { width: 14px; height: 14px; color: inherit; }
.compara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* itens em bloco (não grid): um <strong> no meio da frase não vira célula própria */
.compara li { position: relative; padding-left: 26px; font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
.compara li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--positivo); -webkit-mask: var(--k-sim) center / contain no-repeat; mask: var(--k-sim) center / contain no-repeat; }
.compara > .nao li::before { background: var(--negativo); -webkit-mask-image: var(--k-nao); mask-image: var(--k-nao); }
.compara p { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
:root {
  --k-sim: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  --k-nao: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
  --k-olho: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/><circle cx='12' cy='12' r='3'/></svg>");
  --k-seta: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* .compara.cartoes: cada lado vira um cartão (quando a comparação fica solta
   no painel, numa grade bento) */
.compara.cartoes { gap: 12px; }
.compara.cartoes > div { gap: 12px; padding: 20px 22px; border-radius: var(--r-cartao); }

/* pilha: blocos em coluna com respiro curto (dentro de uma vista) */
.pilha { display: grid; gap: 10px; align-content: start; }

/* ------------------------------------------------------- K18 · BENTO
   Grade de 12 colunas para cartões de tamanhos diferentes na mesma linha.
   Filhos: .s3 .s4 .s5 .s6 .s7 .s8 .s9 .s12 (quantas colunas ocupam). */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.bento > .s3 { grid-column: span 3; } .bento > .s4 { grid-column: span 4; } .bento > .s5 { grid-column: span 5; }
.bento > .s6 { grid-column: span 6; } .bento > .s7 { grid-column: span 7; } .bento > .s8 { grid-column: span 8; }
.bento > .s9 { grid-column: span 9; } .bento > .s12 { grid-column: span 12; }
.bento > .cartao { display: grid; gap: 14px; align-content: space-between; }
.bento > .compara { align-self: start; } /* a comparação não estica quando o vizinho abre um "mais" */

/* ------------------------------------------------------- K10 · MOSAICO
   Lista de ações/comportamentos/sinais sem ordem: mini-cartões em grade,
   ícone de olho (observável). Para lista COM ordem use K11. */
.mosaico { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mosaico li { flex: 1 1 220px; padding: 14px 16px; border-radius: var(--r-interno); background: var(--tela); font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
.mosaico li::before { content: ""; display: block; margin-bottom: 10px; width: 16px; height: 16px; background: var(--acento); -webkit-mask: var(--k-olho) center / contain no-repeat; mask: var(--k-olho) center / contain no-repeat; }

/* ------------------------------------------------------- K11 · PASSOS
   Sequência ou regras numeradas: cartões lado a lado com número grande. */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.passos li { counter-increment: passo; padding: 14px 16px 16px; border-radius: var(--r-interno); box-shadow: inset 0 0 0 1px var(--linha-forte); font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
.passos li::before { content: counter(passo, decimal-leading-zero); display: block; margin-bottom: 10px; font: 450 var(--t-numero-3)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--acento); }

/* K12 · Cuidado: o bloco virou padrão do DS (.cuidado em base.css, âmbar de atenção, 27/10/2026) */
/* ------------------------------------------------------- K12 · CUIDADO
   Risco, armadilha, ressalva: bloco claro com disco de aviso. Um por item. */

/* ------------------------------------------------------- K13 · CITAÇÃO
   Texto-exemplo longo (exemplo de card, depoimento): destaque tipográfico. */
.aspas { position: relative; margin: 0; padding: 16px 20px 16px 48px; border-radius: var(--r-interno); background: var(--tela); font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-66); }
.aspas::before { content: "“"; position: absolute; left: 16px; top: 10px; font: 450 40px/1 var(--font-display); color: var(--aco); }
.aspas footer { margin-top: 8px; font-size: 11.5px; color: var(--tinta-46); }

/* ------------------------------------------------------- K14 · NUVEM
   Lista de palavras: chips de leitura (não são filtro). .forte = peso maior
   (mais repetida, principal); .n = quantas vezes. */
.nuvem { display: flex; flex-wrap: wrap; gap: 6px; }
.nuvem > span { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 11px; border-radius: var(--r-pilula); background: var(--tela); font-size: 12px; color: var(--tinta-66); }
.nuvem > .forte { background: var(--bruma-clara); font-weight: 500; color: var(--tinta); } /* destaque só por peso e cor: chip tem um tamanho só (27/10/2026) */
/* caixa semântica (regra do DS, base.css): os lados do .compara declaram --sem; chip da .nuvem e
   cartão interno (.interno) seguem a cor da caixa, nunca cinza nem branco (28/10/2026) */
.compara > div { --sem: var(--positivo); } .compara > .nao { --sem: var(--negativo); }
:is(.compara > div, .sem-ok, .sem-alerta, .sem-espera, .cuidado) .nuvem > span { background: color-mix(in srgb, var(--sem) 12%, var(--branco)); color: var(--sem); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 22%, transparent); }
/* cartões internos da plataforma (.mosaico, .aspas) contam como .interno dentro de caixa semântica */
:is(.compara > div, .sem-ok, .sem-alerta, .sem-espera, .cuidado) :is(.interno, .mosaico > li, .aspas) { background: color-mix(in srgb, var(--sem) 7%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 16%, transparent); }
:is(.compara > div, .sem-ok, .sem-alerta, .sem-espera, .cuidado) :is(.interno, .mosaico > li, .aspas) .t-rotulo, :is(.compara > div, .sem-ok, .sem-alerta, .sem-espera, .cuidado) .aspas::before { color: var(--sem); }
.nuvem .n { font-size: 10.5px; font-weight: 600; opacity: .5; }
.cartao.destaque .nuvem > span { background: var(--hover); color: inherit; }

/* ------------------------------------------------------- K15 · MAIS
   "Ler mais" discreto para uma explicação (details). */
details.mais > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.4 var(--font-body); color: var(--ardosia-media); cursor: pointer; }
details.mais > summary::-webkit-details-marker { display: none; }
details.mais > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--k-seta) center / contain no-repeat; mask: var(--k-seta) center / contain no-repeat; transition: transform .15s var(--ease); }
details.mais[open] > summary::after { transform: rotate(180deg); }
details.mais > summary:hover { color: var(--tinta); }
details.mais > summary:focus-visible { border-radius: 6px; box-shadow: var(--sombra-foco); outline: 0; }
details.mais > div { margin-top: 8px; display: grid; gap: 12px; font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-66); }
.cartao.destaque details.mais > summary, .bloco.escuro details.mais > summary { color: inherit; opacity: .72; }
.cartao.destaque details.mais > div, .bloco.escuro details.mais > div { color: inherit; opacity: .86; }

/* ------------------------------------------------------- K16 · MATRIZ
   Contexto × campo (canal, situação, porte): tabela de leitura do DS sem o
   comportamento de lista clicável. <div class="cartao matriz"><table>…
   Primeira coluna = <th scope="row"> (o contexto). Rola por dentro no celular. */
.matriz { overflow-x: auto; padding: 10px 8px; }
.matriz table { min-width: 0; }
.matriz tbody tr { cursor: default; }
.matriz tbody tr:hover { background: none; }
.matriz th, .matriz td { text-align: left; vertical-align: top; }
.matriz td { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
.matriz tbody th { padding: 14px 16px 14px 16px; font: 450 var(--t-titulo-4)/1.25 var(--font-display); letter-spacing: -.03em; text-transform: none; color: var(--tinta); white-space: nowrap; }

/* ------------------------------------------------------- K17 · PÉ DE MÉTODO
   Método, data e status numa linha discreta; o texto do método abre ali. */
.pe-metodo { border-top: 1px solid var(--linha); padding-top: 4px; }
.pe-metodo > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 4px; font-size: 12px; color: var(--tinta-46); cursor: pointer; }
.pe-metodo > summary::-webkit-details-marker { display: none; }
.pe-metodo > summary > svg.i { width: 15px; height: 15px; }
.pe-metodo > summary strong { font-weight: 600; color: var(--tinta-66); }
.pe-metodo > summary .ver { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ardosia-media); }
.pe-metodo > summary .ver::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--k-seta) center / contain no-repeat; mask: var(--k-seta) center / contain no-repeat; transition: transform .15s var(--ease); }
.pe-metodo[open] > summary .ver::after { transform: rotate(180deg); }
.pe-metodo > summary:focus-visible { border-radius: var(--r); box-shadow: var(--sombra-foco); outline: 0; }
.pe-metodo > div { display: grid; gap: 12px; padding: 4px 4px 8px 31px; font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-66); }

/* ------------------------------------------------------------ responsivo */
@container (max-width: 600px) {
  .item-heroi { grid-template-columns: minmax(0, 1fr); }
  .item-id h2, .item-id h3 { font-size: var(--t-titulo-2); }
}
@container (max-width: 520px) {
  .compara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  .bento > .s3 { grid-column: span 6; }
}
@media (max-width: 1024px) {
  .cabeca { grid-template-columns: minmax(0, 1fr); }
  .bento > :is(.s4, .s5, .s6, .s7, .s8, .s9) { grid-column: span 12; }
}
@media (max-width: 860px) {
  .explorador { grid-template-columns: minmax(0, 1fr); }
  .explorador > .troca-botoes { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .explorador > .troca-botoes > .t-rotulo { grid-column: 1 / -1; padding-bottom: 2px; }
  .explorador > section { grid-column: 1; grid-row: 2; }
  .explorador:not(.em-cima) .aba { box-shadow: inset 0 0 0 1px var(--linha); }
  .explorador:not(.em-cima) .aba:has(input:checked) { box-shadow: var(--sombra-cartao); }
  .dupla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cabeca .lede { font-size: var(--t-titulo-3); }
  .aba { gap: 10px; padding: 8px 10px; }
  .aba > svg.i, .aba-sub { display: none; }
  .aba-nome { font-size: 15px; }
  .explorador > .troca-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dupla > div { padding: 16px 18px; gap: 6px 14px; }
  .dupla .cifra { min-width: 44px; }
  .manchete { font-size: 19px; }
  .pe-metodo > div { padding-left: 4px; }
  .compara, .compara.cartoes { grid-template-columns: minmax(0, 1fr); }
  .bento > .s3 { grid-column: span 12; }
  /* alternador: vira grade (2×2 com 4 opções; uma linha com 2–3) em vez de quebrar a pílula */
  .vistas > .alternar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; border-radius: var(--r-interno); }
  .vistas > .alternar:has(> label:nth-of-type(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vistas > .alternar label { justify-content: center; height: 32px; border-radius: var(--r); }
}
@media (prefers-reduced-motion: reduce) {
  .troca > section { transition: none; }
}

/* ------------------------------------------------------- SOBRE A PÁGINA
   Botão "?" no canto direito do .topo (criado pelo plataforma.js): abre a
   .janela do DS com a abertura da página (.lede como título + .apoio). */
.topo > .sobre { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--translucido); box-shadow: var(--borda-interna); color: var(--tinta-56); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.topo > .sobre:hover { background: var(--branco); color: var(--tinta); }
.topo > .sobre:focus-visible { box-shadow: var(--sombra-foco); outline: 0; }
.janela.sobre-pagina:focus { outline: 0; }
.janela.sobre-pagina { width: min(560px, calc(100vw - 24px)); padding: 26px 28px 28px; }
.janela.sobre-pagina[open] { display: grid; gap: 10px; }
.sobre-pagina > .fechar { position: absolute; top: 14px; right: 14px; }
.sobre-pagina > .t-rotulo { color: var(--tinta-46); }
.janela.sobre-pagina .lede { margin: 0; padding-right: 36px; font: 450 var(--t-titulo-3)/1.25 var(--font-display); letter-spacing: -.035em; color: var(--tinta); text-wrap: balance; }
.janela.sobre-pagina .apoio { margin: 0; font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-66); }
.cabeca:not(:has(.lede, .apoio)) { grid-template-columns: minmax(0, 1fr); justify-items: start; } /* só as cifras ficaram no corpo */
.cabeca:not(:has(.lede, .apoio)) .cifras { justify-self: start; }

/* ------------------------------------------------------- CONTEÚDO .MD
   Botão "Conteúdo da Página" da barra superior (.botao.claro do DS, plataforma.js)
   e o menu Copiar / Baixar. */
.md-caixa { position: relative; }
.md-botao .seta { width: 14px; height: 14px; margin-left: 2px; transition: transform .2s var(--ease); }
.md-botao[aria-expanded="true"] .seta { transform: rotate(180deg); }
.md-menu { width: 290px; padding: 6px; }
.md-menu :is(a, button) { align-items: flex-start; }
.md-menu svg.i { margin-top: 1px; }
.md-menu span { display: grid; gap: 2px; }
.md-menu small { font-size: var(--t-legenda); font-weight: 400; color: var(--tinta-46); }
@media (max-width: 860px) { .md-caixa { display: none; } }
/* bloco [data-sobre] dentro da janela: largura maior, explicação aberta sem o "ver mais" */
.janela.sobre-pagina:has(.dupla) { width: min(820px, calc(100vw - 24px)); }
.janela.sobre-pagina .dupla > div { align-content: start; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); -webkit-backdrop-filter: none; backdrop-filter: none; }
.janela.sobre-pagina details.mais > summary { display: none; }
.janela.sobre-pagina details.mais > div { margin-top: 0; }
@media (max-width: 640px) { .janela.sobre-pagina .dupla { grid-template-columns: minmax(0, 1fr); } }

/* "Painel" no topo da lateral (plataforma.js): mesmo botão dos grupos, mas é link direto para o Início */
.lateral > .nav-direto { text-decoration: none; }
.lateral > .nav-direto.ativo { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-cartao); }

/* ------------------------------------------------------- DESIGN SYSTEM (documentação)
   Usado pelas páginas de frontend/design-system/. Componente ao vivo num palco,
   código gerado embaixo pelo plataforma.js, tokens copiáveis. */
.ds-exemplo { display: grid; gap: 0; border-radius: var(--r-cartao); background: var(--branco); box-shadow: var(--sombra-cartao); overflow: hidden; }
.ds-exemplo > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 20px 0; }
.ds-exemplo > header h3 { font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
.ds-exemplo > header p { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-66); }
.ds-exemplo > header code, .ds-classe { font: 500 var(--t-codigo) var(--font-mono); color: var(--ardosia-media); }
.ds-palco { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 20px; padding: 28px; border-radius: var(--r-interno); background: var(--tela); background-image: radial-gradient(circle, var(--linha) 1px, transparent 1px); background-size: 16px 16px; min-height: 96px; }
.ds-palco.coluna { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ds-palco.nevoa { background-color: var(--nevoa); }
.ds-palco.escuro { background-color: var(--tinta-fixa, #101820); background-image: none; }
.ds-codigo { border-top: 1px solid var(--linha); }
.ds-codigo > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font: 500 var(--t-interface) var(--font-body); color: var(--ardosia-media); cursor: pointer; }
.ds-codigo > summary::-webkit-details-marker { display: none; }
.ds-codigo > summary svg.i { width: 15px; height: 15px; }
.ds-codigo > div { position: relative; padding: 0 20px 18px; }
.ds-codigo pre { margin: 0; max-height: 420px; overflow: auto; padding: 16px 18px; border-radius: var(--r-interno); background: var(--tinta-fixa, #101820); color: #E1EAF1; font: 400 var(--t-codigo)/1.6 var(--font-mono); tab-size: 2; white-space: pre; }
.ds-copiar { position: absolute; top: 8px; right: 28px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pilula); background: rgba(255,255,255,.12); color: #fff; font: 500 12px var(--font-body); cursor: pointer; }
.ds-copiar:hover { background: rgba(255,255,255,.22); }
.ds-copiar svg.i { width: 14px; height: 14px; }
[data-copiar] { cursor: copy; }
/* tabela de especificação: token / valor / uso */
.ds-spec { width: 100%; border-collapse: collapse; font-size: var(--t-texto-m); }
.ds-spec th { padding: 8px 12px; text-align: left; font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-46); border-bottom: 1px solid var(--linha-forte); }
.ds-spec td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; color: var(--tinta-82); line-height: 1.5; }
.ds-spec td code { font: 500 var(--t-codigo) var(--font-mono); color: var(--tinta); }
.ds-amostra-cor { width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--linha); }
/* índice do DS em abas fixas (plataforma.js): uma seção por vez */
.painel .ds-indice { position: sticky; top: 84px; z-index: 25; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 6px; border-radius: var(--r-pilula); background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda), var(--sombra-cartao); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); scrollbar-width: none; }
.ds-indice::-webkit-scrollbar { display: none; }
.ds-indice > a { flex: none; white-space: nowrap; }
.ds-oculta { display: none !important; }
.ds-secao-pe { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linha); }
.ds-secao-pe a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-interno); color: var(--tinta); text-decoration: none; transition: background-color .15s var(--ease); }
.ds-secao-pe a:hover { background: var(--hover); }
.ds-secao-pe a span { display: grid; gap: 2px; font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
.ds-secao-pe .prox span { text-align: right; }
.ds-secao-pe small { font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-46); }
.ds-secao-pe svg.i { width: 18px; height: 18px; color: var(--tinta-46); }
@media (max-width: 860px) { .painel .ds-indice { top: 64px; } }

/* .ds-spec é tabela de leitura: não herda o clique/hover/alinhamento das tabelas de dados do DS */
.ds-spec tbody tr { cursor: default; }
.ds-spec tbody tr:hover { background: none; }
.ds-spec td:last-child, .ds-spec th:last-child { text-align: left; }
.ds-secao { scroll-margin-top: 150px; } /* âncora #seção não fica embaixo das abas fixas */
/* biblioteca Lucide completa ([data-lucide-biblioteca], plataforma.js) */
.lucide-biblioteca { display: grid; gap: 14px; }
.lb-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lb-busca .busca { flex: 1 1 320px; max-width: 460px; }
.lb-busca .busca input { width: 100%; }
.lb-total { font-size: var(--t-legenda); color: var(--tinta-46); }
.lb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.lb-item { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 100px; padding: 16px 8px 12px; border: 0; border-radius: var(--r-interno); background: var(--tela); color: var(--tinta-82); cursor: copy; transition: background-color .15s var(--ease), color .15s var(--ease); }
.lb-item:hover, .lb-item:focus-visible { background: var(--bruma-clara); color: var(--tinta); }
.lb-item svg.i { width: 24px; height: 24px; }
.lb-item span { font: 500 11px/1.25 var(--font-mono); text-align: center; word-break: break-word; color: var(--tinta-66); }
.lb-item[hidden] { display: none; }
/* abas na linha do título, à esquerda do "?" (.ds-indice.no-topo) */
.topo > .sobre { anchor-name: --sobre-pagina; }
@supports (anchor-name: --a) {
  @media (min-width: 861px) {
    .painel .ds-indice.no-topo { position: fixed; z-index: 31; position-anchor: --sobre-pagina; top: anchor(center); right: calc(anchor(left) + 12px); translate: 0 -50%; max-width: calc(100vw - 760px); }
  }
}