/* ==========================================================================
   PRISMA · components/atelie.css — PEÇAS NASCIDAS NO ATELIÊ  (20/09/2026)
   --------------------------------------------------------------------------
   Ateliê de Produtos Educacionais, produto irmão do PRISMA no mesmo sistema.
   Tudo aqui é GENÉRICO: lê só o contrato semântico (tokens.css), nunca um
   primitivo nem uma cor solta. A cor vem do tema (tokens/tema-atelie.css); com
   outro tema estas peças continuam de pé — é a prova de que são do sistema.

   ANTES DE CADA PEÇA, O QUE O SISTEMA JÁ TINHA E FOI USADO NO LUGAR DE INVENTAR:
     barra em pílula ..... components/nav.css (.barra-flutuante)     folha clara ... material.css (.folha)
     cena, lâminas ....... foundations/cena.css                        chip .......... identity.css (.chip)
     composer ............ ai/composer.css                             diálogo ....... dialogo.css
     espera, revelação ... patterns/assincrono.css (.revelar, .espera-linha)
     título editorial .... typography.css (.editorial)                 rótulo caps ... .label--secao / .cartao-etiqueta
     botão de cristal .... button.css (.btn--cristal)

   PEÇAS DESTE ARQUIVO
     .marca-tipo / .marca-rotulo   marca SÓ tipográfica: nome + rótulo pequeno (sem símbolo)
     .editorial--quente            a segunda frase do título, sobre escuro, em OURO
     .composer--acento             o enviar do composer na cor de ação (laranja), mesmo sobre a cena
     .composer-pergunta / -nota    a pergunta visível dentro da caixa e a nota da barra
     .rotulo-ponto                 texto pequeno precedido de um ponto de cor
     .indice                       índice numerado em linha: fio em cima, 01, nome, uma linha
     .aneis                        figura de linha fina só em CSS (elipses), giro lento
     .mostra                       placa de vidro que MOSTRA a escolha atual (rótulo, nome grande, ação)
     .produto / .caminho           cartão do produto em andamento e o caminho com progresso
     .convite                      cartão tracejado "novo produto"
     .lista-abas                   abas verticais em lista (número, nome, papel)
     .bloco-playbook               bloco de conteúdo do playbook (rótulo + texto ou lista)
     .ligacao                      link discreto de "ver mais", com seta; --cena sobre escuro
     .pilula-andamento             pílula de vidro que mostra o andamento e leva ao portfólio
     .dialogo-aviso                o aviso do sistema dentro de um diálogo

   SUBIRAM DA PÁGINA EM 20/09/2026 (parecer da banca, D-014): .ligacao, .ligacao--cena,
   .abertura-andamento (agora .pilula-andamento) e .dialogo-aviso moravam em
   docs/exemplos/atelie.css com cor, sombra, raio e estado. Peça mora no sistema; a
   página só posiciona. O endereço natural de .dialogo-aviso é components/dialogo.css —
   fica aqui porque aquele arquivo estava fora do alcance deste conserto (ver LEIA-ME).
   ========================================================================== */

/* --------------------------------------------------------------------------
   MARCA TIPOGRÁFICA — "Ateliê" + "Produtos educacionais". Nenhum símbolo.
     <a class="marca marca-tipo"><span class="marca-nome">Ateliê</span><span class="marca-rotulo">Produtos educacionais</span></a>
   -------------------------------------------------------------------------- */
.marca-tipo { gap: var(--espaco-3); align-items: baseline; }
.marca-tipo .marca-nome { font-size: 1.125rem; font-weight: 560; letter-spacing: -0.03em; line-height: 1; }
.marca-rotulo {
  font-size: 0.625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--text-secondary); white-space: nowrap;
  padding-inline-start: var(--espaco-3); border-inline-start: 1px solid var(--border-strong);
}
.marca-tipo--empilhada { flex-direction: column; align-items: flex-start; gap: var(--espaco-1); }
.marca-tipo--empilhada .marca-rotulo { padding: 0; border: 0; }
.marca-tipo--grande .marca-nome { font-size: 1.75rem; letter-spacing: -0.04em; }

/* --------------------------------------------------------------------------
   TÍTULO SOBRE ESCURO COM A SEGUNDA FRASE EM OURO
   O sistema já muda o TOM da segunda frase (<em> mais claro). Sobre grafite o
   Ateliê usa o destaque raro: ouro. Ouro em texto só aqui e no progresso.
   -------------------------------------------------------------------------- */
.cena .editorial--quente em { color: var(--accent-warm); }

/* --------------------------------------------------------------------------
   COMPOSER COM A COR DE AÇÃO
   Dentro da cena o sistema pinta o enviar de placa clara (azul sobre azul sumia).
   Laranja sobre grafite não some: é a única ação da dobra, e leva a cor de ação.
   -------------------------------------------------------------------------- */
.cena .composer--acento:not([data-estado="processando"]) .composer-enviar:not(:disabled) {
  background-color: var(--accent-primary);
  background-image: none;
  color: var(--text-on-accent);
}
@media (hover: hover) and (pointer: fine) {
  .cena .composer--acento:not([data-estado="processando"]) .composer-enviar:not(:disabled):hover { background-color: var(--accent-hover); }
}
/* processando: o "interromper" é placa de vidro (o sólido do sistema não é religado dentro da cena) */
.cena .composer--acento[data-estado="processando"] .composer-enviar {
  background: var(--glass-on-destaque-hover);
  color: var(--text-on-destaque);
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--glow-processing);
}
.composer-pergunta { display: block; font-size: var(--body-sm-size); font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); }
.composer-nota { flex: 1 1 auto; min-width: 0; font-size: var(--caption-size); line-height: 1.4; color: var(--text-secondary); }   /* secundário, não muted: sobre o vidro do composer o muted cai de 4,5:1 */

/* --------------------------------------------------------------------------
   RÓTULO COM PONTO — "● Hipótese inicial"
   -------------------------------------------------------------------------- */
/* align-items: start + o recuo do ponto deixam a peça QUEBRAR em duas linhas sem o ponto
   escorregar para o meio do parágrafo — a 320px o rótulo do playbook não cabia numa linha
   e empurrava a página 33px para fora. */
.rotulo-ponto { display: inline-flex; align-items: start; gap: var(--espaco-2); min-width: 0; font-size: var(--caption-size); line-height: 1.5; color: var(--text-secondary); }
.rotulo-ponto::before { content: ""; width: 6px; height: 6px; margin-top: .42em; border-radius: 50%; background: var(--accent-warm); flex: none; }
.rotulo-ponto--acao::before { background: var(--accent-text); }

/* --------------------------------------------------------------------------
   ÍNDICE NUMERADO EM LINHA
   Fio em cima, número pequeno, nome, uma linha. Não é cartão: separa com linha
   e espaço (brief §37). Colunas por --indice-colunas; abaixo de 900px vira lista.
     <ol class="indice" style="--indice-colunas: 5">
       <li><a class="indice-item"><span class="indice-num">01</span><span class="indice-texto"><b>Produto</b><span>…</span></span><svg…/></a></li>
   -------------------------------------------------------------------------- */
.indice { --indice-colunas: 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--indice-colunas), minmax(0, 1fr)); gap: var(--espaco-6); }
.indice-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--espaco-3); align-items: start;
  width: 100%; padding-top: var(--espaco-4); border-top: 1px solid var(--border-default);
  color: inherit; text-decoration: none; text-align: left;
  transition: border-color var(--motion-fast) var(--easing-standard);
}
.indice-num { font-family: var(--fonte-mono); font-size: 0.6875rem; letter-spacing: .04em; line-height: 1.6; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.indice-texto { display: grid; gap: 4px; min-width: 0; }
.indice-texto b { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--text-primary); }
.indice-texto span { font-size: var(--label-size); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.indice-item > svg { width: 15px; height: 15px; margin-top: 2px; color: var(--text-muted); transition: transform var(--motion-default) var(--easing-standard), color var(--motion-fast) var(--easing-standard); }
@media (hover: hover) and (pointer: fine) {
  .indice-item:hover { border-top-color: var(--border-strong); }
  .indice-item:hover > svg { transform: translate(2px, -2px); color: var(--text-primary); }
}
/* compacto: só número e nome, para a faixa de passos de uma hipótese */
.indice--compacto .indice-item { padding-top: var(--espaco-3); }
.indice--compacto .indice-texto b { font-size: var(--body-sm-size); }
.indice--compacto .indice-texto span { font-size: var(--caption-size); }
@media (max-width: 900px) {
  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-6); }
}
@media (max-width: 600px) {
  .indice { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .indice-item { padding-block: var(--espaco-4); }
}

/* --------------------------------------------------------------------------
   ANÉIS — figura de linha fina, só CSS
   Elipses de borda de 1px com o mesmo centro, giradas em passos iguais: um
   conteúdo, vários formatos. Cor: o destaque raro (ouro sobre escuro). Movimento:
   UM giro lento do conjunto, só transform, ~150 s por volta (≈0,007 Hz — muito
   abaixo do que incomoda). O anel [data-ativo] acende: é a escolha atual.
     <div class="aneis" style="--aneis-n: 9" aria-hidden="true"><i></i>×n</div>
   -------------------------------------------------------------------------- */
.aneis {
  --aneis-n: 9; --aneis-tempo: 150s;
  position: relative; width: var(--aneis-tamanho, 440px); max-width: 100%; aspect-ratio: 1;
  color: var(--accent-warm);
  pointer-events: none;
}
.aneis > i {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: var(--aneis-altura, 42%);
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: var(--aneis-opacidade, .34);
  transform: rotate(calc(var(--k, 0) * 180deg / var(--aneis-n)));
  transition: opacity var(--motion-slow) var(--easing-standard);
}
.aneis > i:nth-child(1)  { --k: 0; }  .aneis > i:nth-child(2)  { --k: 1; }  .aneis > i:nth-child(3)  { --k: 2; }
.aneis > i:nth-child(4)  { --k: 3; }  .aneis > i:nth-child(5)  { --k: 4; }  .aneis > i:nth-child(6)  { --k: 5; }
.aneis > i:nth-child(7)  { --k: 6; }  .aneis > i:nth-child(8)  { --k: 7; }  .aneis > i:nth-child(9)  { --k: 8; }
.aneis > i:nth-child(10) { --k: 9; }  .aneis > i:nth-child(11) { --k: 10; } .aneis > i:nth-child(12) { --k: 11; }
.aneis > i[data-ativo] { opacity: 1; border-width: 1.5px; }
/* o reflexo de luz: um brilho macio no centro, para a figura ter volume */
.aneis::after {
  content: ""; position: absolute; inset: 30%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, currentColor 22%, transparent), transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .aneis { animation: aneis-girar var(--aneis-tempo) linear infinite; will-change: transform; }
  [data-reduzir-movimento] .aneis { animation: none; will-change: auto; }
}
@keyframes aneis-girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   MOSTRA — a placa de vidro que mostra a escolha atual
   Use dentro de uma .cena (vidro pede campo). Rótulo pequeno, nome grande em
   peso 400, uma linha, e a ação redonda à direita.
     <div class="vidro mostra"><p class="cartao-etiqueta">…</p><p class="mostra-nome">…</p><p class="mostra-linha">…</p><button class="btn-icone btn-icone--vidro mostra-acao">…</button></div>
   -------------------------------------------------------------------------- */
.mostra {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
  column-gap: var(--espaco-5); row-gap: var(--espaco-1); align-items: center;
  padding: var(--espaco-5) var(--espaco-5) var(--espaco-5) var(--espaco-6);
  border-radius: var(--radius-xl);
}
.mostra > .cartao-etiqueta { grid-column: 1; margin-bottom: var(--espaco-2); }
.mostra-nome { grid-column: 1; margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; color: var(--text-primary); text-wrap: balance; }
.mostra-linha { grid-column: 1; margin: 0; font-size: var(--body-sm-size); color: var(--text-secondary); }
.mostra-acao { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.mostra-acao svg { width: 18px; height: 18px; transition: transform var(--motion-default) var(--easing-standard); }
@media (hover: hover) and (pointer: fine) { .mostra-acao:hover svg { transform: translate(2px, -2px); } }

/* --------------------------------------------------------------------------
   PRODUTO — cartão do produto em andamento
   A capa é uma cena em miniatura (grafite, três anéis); à direita, nome, meta,
   texto, o caminho e a próxima decisão. Placa clara com aresta interna, sem borda dura.
   -------------------------------------------------------------------------- */
.produto {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--espaco-7);
  padding: 10px; border-radius: var(--radius-2xl);
  background-color: var(--surface-1); background-image: var(--surface-veu);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-raised);
  color: var(--text-primary);
}
.produto-capa {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: end; gap: var(--espaco-1);
  min-height: 280px; padding: var(--espaco-5);
  border-radius: calc(var(--radius-2xl) - 10px);
  background-color: var(--surface-destaque-base); background-image: var(--surface-destaque);
  color: var(--text-on-destaque);
}
.produto-capa .aneis { position: absolute; right: -22%; top: -18%; z-index: -1; --aneis-tamanho: 118%; --aneis-altura: 46%; --aneis-opacidade: .42; color: var(--accent-cyan); }
.produto-capa .cartao-etiqueta { color: var(--text-on-destaque-3); }
.produto-capa-linha { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.produto-capa-sub { font-size: var(--caption-size); color: var(--text-on-destaque-2); }
.produto-corpo { display: grid; gap: var(--espaco-5); align-content: start; padding: var(--espaco-4) var(--espaco-4) var(--espaco-3) 0; min-width: 0; }
.produto-cabeca { display: grid; gap: var(--espaco-2); }
.produto-meta { font-size: var(--caption-size); color: var(--text-muted); }
.produto-nome { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.produto-texto { margin: 0; font-size: var(--body-sm-size); line-height: 1.6; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }
.produto-decisao { display: grid; gap: var(--espaco-1); padding-top: var(--espaco-4); border-top: 1px solid var(--border-subtle); }
.produto-decisao p { margin: 0; font-size: var(--body-sm-size); line-height: 1.55; color: var(--text-primary); max-width: 52ch; }
.produto-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
@media (max-width: 900px) {
  .produto { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
  .produto-capa { min-height: 200px; }
  .produto-corpo { padding: var(--espaco-2) var(--espaco-3) var(--espaco-3); }
}

/* --- CAMINHO — cinco passos e o quanto já foi ---------------------------------------------
   Barra fina (ouro: o progresso é destaque raro) e os passos alinhados às suas colunas,
   cada um com 20% — o preenchimento em 40% termina exatamente no fim de "Estrutura".
   O preenchimento é transform (scaleX), nunca width.
     <div class="caminho" style="--caminho-valor: .4"> cabeça · trilho[role=progressbar] · ol.caminho-passos </div>
   Estados dos passos: feita · atual (aria-current="step") · espera. */
.caminho { --caminho-valor: 0; display: grid; gap: var(--espaco-3); }
.caminho-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-4); }
.caminho-valor { font-size: var(--label-size); font-weight: 600; color: var(--accent-warm); }
.caminho-trilho { position: relative; height: 4px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.caminho-barra {
  position: absolute; inset: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--brand-cyan) 50%, var(--accent-warm));   /* brand-cyan é o ouro do tema; a mistura escurece o bastante para ler a 3:1 sobre a placa */
  transform-origin: left center; transform: scaleX(var(--caminho-valor));
  transition: transform var(--motion-slow) var(--easing-standard);
}
.caminho-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-2); }
.caminho-passos li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; font-size: var(--caption-size); line-height: 1.3; color: var(--text-muted); min-width: 0; }
.caminho-passos li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.caminho-passos li[data-estado="feita"] { color: var(--text-secondary); }
.caminho-passos li[data-estado="feita"]::before { background: var(--text-secondary); box-shadow: none; }
.caminho-passos li[data-estado="atual"] { color: var(--text-primary); font-weight: 500; }
.caminho-passos li[data-estado="atual"]::before { background: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-muted); }
@media (max-width: 480px) {
  .caminho-passos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .caminho-passos li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; font-size: 0.6875rem; }
}

/* --------------------------------------------------------------------------
   CONVITE — o cartão tracejado "novo produto"
   O único tracejado da página: é o lugar vazio à espera. Um botão inteiro.
   -------------------------------------------------------------------------- */
.convite {
  display: grid; place-content: center; justify-items: center; gap: var(--espaco-2);
  width: 100%; min-height: 240px; padding: var(--espaco-7) var(--espaco-6);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-2xl);
  color: var(--text-secondary); text-align: center; cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), transform var(--motion-default) var(--easing-standard);
}
.convite-mais {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--espaco-3);
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-primary);
  transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.convite-mais svg { width: 18px; height: 18px; }
.convite-titulo { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); }
.convite-texto { font-size: var(--label-size); line-height: 1.5; color: var(--text-secondary); max-width: 30ch; text-wrap: pretty; }
.convite .cartao-etiqueta { margin-top: var(--espaco-3); }
@media (hover: hover) and (pointer: fine) {
  .convite:hover { border-color: var(--text-secondary); background-color: var(--surface-1); }
  .convite:hover .convite-mais { background-color: var(--accent-primary); color: var(--text-on-accent); }
}
.convite:active { transform: scale(.99); }

/* --------------------------------------------------------------------------
   LISTA DE ABAS — vertical, como a lista de talentos da referência
   Número pequeno, nome grande em peso 400, papel em uma linha. A selecionada é
   placa clara com sombra (a única caixa da coluna); as outras, só texto.
   Estado no ARIA (aria-selected); teclado em components/atelie.js.
     <div class="lista-abas" role="tablist" aria-orientation="vertical">
       <button class="lista-aba" role="tab" aria-selected="true"><span class="indice-num">01</span><svg…/><span class="lista-aba-texto"><b>Produto</b><span>…</span></span><svg…/></button>
   -------------------------------------------------------------------------- */
.lista-abas { display: grid; gap: var(--espaco-1); align-content: start; }
.lista-aba {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--espaco-4);
  width: 100%; padding: var(--espaco-4) var(--espaco-5); border-radius: var(--radius-xl);
  color: var(--text-muted); text-align: left; cursor: pointer;
  transition: background-color var(--motion-default) var(--easing-standard), color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-default) var(--easing-standard);
}
.lista-aba > .indice-num { color: inherit; }
.lista-aba-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-secondary); }
.lista-aba-icone svg { width: 20px; height: 20px; }
.lista-aba-texto { display: grid; gap: 2px; min-width: 0; }
.lista-aba-texto b { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; color: var(--text-secondary); }
.lista-aba-texto span { font-size: var(--caption-size); color: var(--text-muted); }
.lista-aba > svg:last-child { width: 15px; height: 15px; opacity: 0; transform: translateX(-4px); transition: opacity var(--motion-fast) var(--easing-standard), transform var(--motion-default) var(--easing-standard); }
@media (hover: hover) and (pointer: fine) {
  .lista-aba:hover { color: var(--text-secondary); }
  .lista-aba:hover .lista-aba-texto b { color: var(--text-primary); }
}
.lista-aba[aria-selected="true"] {
  background-color: var(--surface-1); background-image: var(--surface-veu);
  box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-floating);
  color: var(--text-secondary);
}
.lista-aba[aria-selected="true"] .lista-aba-texto b { color: var(--text-primary); }
/* na aba escolhida o papel é a placa clara com véu: ali o muted desce a 4,46:1 (medido) */
.lista-aba[aria-selected="true"] .lista-aba-texto span { color: var(--text-secondary); }
.lista-aba[aria-selected="true"] .lista-aba-icone { background: var(--accent-primary); color: var(--text-on-accent); }
.lista-aba[aria-selected="true"] > svg:last-child { opacity: 1; transform: none; color: var(--text-primary); }
/* Tela estreita: a lista deita e sobra número e nome.
   Até 20/09/2026 ela ROLAVA de lado, sem nenhum sinal de que continuava: a 390px três
   das cinco faces ficavam fora da tela ("03 Oferta" saía 66px, "05 Proteção" 379px).
   Lista de abas não é carrossel — agora ela QUEBRA em linhas e as cinco ficam à vista. */
@media (max-width: 900px) {
  .lista-abas { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
  .lista-aba { width: auto; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--espaco-2); padding: var(--espaco-2) var(--espaco-4); border-radius: var(--radius-full); min-height: var(--alvo-toque); }
  .lista-aba-icone, .lista-aba > svg:last-child, .lista-aba-texto span { display: none; }
  .lista-aba-texto b { font-size: var(--body-sm-size); font-weight: 500; letter-spacing: -0.01em; }
  .lista-aba[aria-selected="true"] { background-color: var(--text-primary); background-image: none; box-shadow: none; }
  .lista-aba[aria-selected="true"] .lista-aba-texto b, .lista-aba[aria-selected="true"] > .indice-num { color: var(--background-canvas); }
}

/* --------------------------------------------------------------------------
   BLOCO DO PLAYBOOK — rótulo pequeno + texto, ou + lista de linhas
   Vive no painel escuro (dentro de .cena) ou numa folha clara; lê só o contrato.
     <div class="bloco-playbook"><p class="label--secao">Compradora</p><p>…</p></div>
     <div class="bloco-playbook"><p class="label--secao">Evidências</p><ul>…</ul></div>
   -------------------------------------------------------------------------- */
.blocos-playbook { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--espaco-6) var(--espaco-7); }
.bloco-playbook { display: grid; gap: var(--espaco-2); align-content: start; min-width: 0; }
.bloco-playbook > p { margin: 0; font-size: var(--body-sm-size); line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.bloco-playbook > .label--secao { color: var(--text-muted); margin-bottom: 2px; }
.bloco-playbook ul { list-style: none; margin: 0; padding: 0; display: grid; }
.bloco-playbook li { padding: 7px 0; border-top: 1px solid var(--border-subtle); font-size: var(--body-sm-size); line-height: 1.5; color: var(--text-primary); }
.bloco-playbook li:first-child { border-top: 0; padding-top: 0; }
.bloco-playbook em { font-style: normal; color: var(--text-secondary); }
/* linha de destaque: o que pesa mais no bloco (ex.: a oferta principal) */
.bloco-playbook--principal > .label--secao { color: var(--accent-warm); }

/* --------------------------------------------------------------------------
   A BARRA DO CELULAR SOBRE PAPEL
   .nav-flutuante nasce com o vidro LIQUID (tinta 0,64). A barra do TOPO já tinha sido
   endurecida para frosted porque passa a maior parte do tempo sobre papel; a barra de
   BAIXO não — e com a dobra de abertura encurtada ela passou a repousar sobre a folha
   clara: "Produtos" media 2,44:1 a 390px. A classe .vidro--frosted no HTML só não valia
   porque nav.css é carregado depois de glass.css e ganhava por ordem; aqui ela vale.
   O endereço natural desta regra é components/nav.css (ver LEIA-ME, pendências).
   -------------------------------------------------------------------------- */
.nav-flutuante--rodape.vidro--frosted {
  background-color: var(--glass-tint-frosted);
  -webkit-backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
          backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  /* a sombra de sobreposição (blur de 48px, preto a 55%) suja a folha clara muito além da
     pílula: o rótulo da seção seguinte media 4,05:1 dentro dela. Barra sobre papel pede a
     sombra flutuante, não a de modal. */
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-floating);
}

/* --------------------------------------------------------------------------
   ROLA-LADO — a fita que rola de lado e AVISA que continua
   Uma fita de chips no celular rola de lado; até 20/09/2026 nada dizia isso, e a 390px
   "Ver as nove linhas" saía 212px da tela. A borda do lado onde ainda há conteúdo se
   apaga (máscara, não cor: funciona sobre papel, sobre folha e sobre cena). Quem liga e
   desliga cada lado é components/atelie.js, lendo a rolagem — nada pisca, nada se move.
   O rolador reserva 32px para o foco: uma parada de teclado nunca cai no apagado.
     <div class="composer-modos rola-lado"> … </div>   + PRISMA.rolaLado(el)
   -------------------------------------------------------------------------- */
.rola-lado { --rola-inicio: 0; --rola-fim: 0; scroll-padding-inline: 32px; }
/* A máscara só existe quando a fita REALMENTE rola (o JS põe data-rola). Sem isso, numa
   tela larga a máscara recortaria o anel de foco dos chips, que mora fora da caixa. */
.rola-lado[data-rola] {
  /* `black`/`transparent` aqui são ALFA de máscara, não cor — é a mesma escrita que
     foundations/cena.css já usa na máscara cônica do reflexo. Nenhuma tinta sai daqui. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, black calc(var(--rola-inicio) * 28px),
    black calc(100% - var(--rola-fim) * 28px), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, black calc(var(--rola-inicio) * 28px),
    black calc(100% - var(--rola-fim) * 28px), transparent 100%);
}

/* --------------------------------------------------------------------------
   LIGAÇÃO — o link discreto de "ver mais", com seta
   Sobre papel lê em --text-secondary; sobre a cena acesa (.ligacao--cena) lê no tom
   CHEIO de "sobre destaque" — translúcido não segura 4,5:1 ali (tema-atelie.css).
   A área de toque é de 44px por pseudo-elemento: o desenho continua com 22px.
     <a class="ligacao" href="#…">Ver as nove linhas<svg…/></a>
   -------------------------------------------------------------------------- */
.ligacao {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--espaco-2); flex: none;
  font-size: var(--label-size); color: var(--text-secondary); text-decoration: none;
  transition: color var(--motion-fast) var(--easing-standard);
}
.ligacao svg { width: 15px; height: 15px; }
.ligacao::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--alvo-toque); transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .ligacao:hover { color: var(--text-primary); }
}
.ligacao--cena { color: var(--text-on-destaque); }

/* --------------------------------------------------------------------------
   PÍLULA DE ANDAMENTO — "● 1 produto em estrutura · 40%", e leva ao portfólio
   Vidro em pílula (use com .vidro .vidro--pilula) e 44px de altura. O texto de dentro
   é uma região viva: quando a espera termina, o resultado é anunciado ali.
     <a class="pilula-andamento vidro vidro--pilula" href="#produtos">
       <span class="rotulo-ponto revelar" aria-live="polite">…</span><svg…/></a>
   -------------------------------------------------------------------------- */
.pilula-andamento {
  display: inline-flex; align-items: center; gap: var(--espaco-3);
  min-height: var(--alvo-toque); padding: 0 var(--espaco-4) 0 var(--espaco-5);
  font-size: var(--body-sm-size); color: var(--text-on-destaque); text-decoration: none;
  transition: background-color var(--motion-fast) var(--easing-standard);
}
.pilula-andamento .rotulo-ponto { font-size: inherit; color: inherit; }
.pilula-andamento > svg { width: 16px; height: 16px; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .pilula-andamento:hover { background-color: var(--glass-on-destaque-hover); }
}

/* --------------------------------------------------------------------------
   AVISO DO DIÁLOGO — o que o sistema promete e o que ele não faz
   Placa discreta dentro do corpo de um <dialog>: ícone de acento, uma frase em negrito
   e a ressalva. Estava escrita no CSS da página (D-014) até 20/09/2026. O endereço
   natural é components/dialogo.css; mora aqui enquanto aquele arquivo não for aberto.
     <div class="dialogo-aviso"><svg…/><p><b>…</b><span>…</span></p></div>
   -------------------------------------------------------------------------- */
.dialogo-aviso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-3); align-items: start;
  padding: var(--espaco-4) var(--espaco-5);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.dialogo-aviso svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.dialogo-aviso p { margin: 0; display: grid; gap: 2px; font-size: var(--body-sm-size); line-height: 1.5; color: var(--text-secondary); }
.dialogo-aviso b { font-weight: 500; color: var(--text-primary); }