/* =============================================================
   SCREENER — homologação do gestor. Estilo.

   Consome SÓ os tokens semânticos de tokens.css. Nenhum hex solto (exceto o
   creme do grafismo da marca, que é constante de marca). Claro/escuro vêm de
   tokens.css. A estética é a da casa: quieta, monocromática, com respiro. A cor
   entra só onde diz algo — preto na ação principal, verde no momento de
   confirmar/concluir. Nada compete com o conteúdo (enunciados e devolutiva).
   Impacto visual vem de tamanho, espaço e composição, não de cor chapada.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); }

/* Fonte definitiva: INTER. A PP Mori (fonte da marca) é licenciada e não é
   webfont pública; o produto Boomit no ar usa Inter, e a decisão aqui é a mesma
   (largura aparente próxima, pesos 400/500/600 — sem bold). Sobrescreve o
   --font-sans do design system na camada do projeto, sem tocar o tokens.css
   auditado. Os arquivos da Inter são carregados no <head> (Google Fonts). */
:root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sc-shell { max-width: 46rem; margin: 0 auto; padding: 0 var(--space-4) var(--space-24); }
.sc-muted { color: var(--text-tertiary); }
.sc-center { text-align: center; }

/* --- Tarja de homologação (sempre no topo) -------------------------------- */
.sc-homolog { background: var(--status-warning-bg); color: var(--status-warning-fg); border-bottom: 1px solid var(--status-warning-border); }
.sc-homolog__in { max-width: 46rem; margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); line-height: var(--leading-sm); }
.sc-homolog__ic { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.sc-homolog b { font-weight: var(--weight-medium); }

/* --- Cabeçalho ------------------------------------------------------------ */
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0 var(--space-4); }
.sc-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sc-brand__mark { width: 2rem; height: 2rem; flex: none; }
/* Wordmark institucional real (logo-boomit.png é a versão CLARA/creme, para fundo
   escuro). No claro, brightness(0) a torna preta; no escuro, fica creme. */
.sc-logo { height: 1.375rem; width: auto; display: block; flex: none; filter: brightness(0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-logo { filter: none; } }

/* Marca própria (white-label): logo com cor, trocada por tema SEM filtro — o
   filtro brightness(0) da .sc-logo mataria o ponto de cor da marca. Duas
   imagens; o tema decide qual aparece. */
.sc-logo--claro, .sc-logo--escuro { filter: none; }
.sc-logo--escuro { display: none; }
:root[data-theme="dark"] .sc-logo--claro { display: none; }
:root[data-theme="dark"] .sc-logo--escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-logo--claro { display: none; }
  :root:not([data-theme="light"]) .sc-logo--escuro { display: block; }
}
/* Grafismo próprio do estado vazio: não inverte (a inversão é da textura clara
   da Boomit; uma textura própria já vem na cor certa). */
.sc-erro__grafismo--proprio { filter: none !important; }
:root[data-theme="dark"] .sc-logo { filter: none; }
.sc-brand__divisor { width: 1px; height: 1.1rem; background: var(--border-default); flex: none; }
.sc-brand__sub { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-theme { border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); border-radius: var(--radius-full); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.sc-theme:hover { background: var(--action-ghost-hover); }
.sc-theme svg { width: 1.125rem; height: 1.125rem; }

/* --- Tipos base ----------------------------------------------------------- */
.sc-eyebrow { font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.sc-title { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); text-wrap: balance; margin: 0; }
.sc-title--lg { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.sc-title--xl { font-size: var(--text-4xl); line-height: var(--leading-4xl); }
.sc-lead { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-lg); }
.sc-lead b, .sc-item__prompt b { font-weight: var(--weight-medium); }
.sc-prosa { margin: 0; font-size: var(--text-base); line-height: var(--leading-lg); color: var(--text-secondary); }
.sc-help { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-tertiary); }

/* --- Cartão --------------------------------------------------------------- */
.sc-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); }
.sc-card--quiet { background: var(--bg-muted); }
@media (max-width: 30rem) { .sc-card { padding: var(--space-5); } }

/* --- Abertura institucional ----------------------------------------------- */
.sc-hero { text-align: center; padding: var(--space-12) var(--space-2) var(--space-16); }
.sc-hero__logo { display: flex; justify-content: center; margin: 0 auto var(--space-8); }
.sc-hero__logo .sc-logo { height: 2.5rem; max-width: 70vw; }
@media (max-width: 30rem) { .sc-hero__logo .sc-logo { height: 2rem; } }
.sc-hero__title { font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: var(--weight-semibold); text-wrap: balance; margin: var(--space-2) 0 0; }
.sc-hero__lead { max-width: 34rem; margin: var(--space-4) auto 0; color: var(--text-secondary); font-size: var(--text-lg); line-height: var(--leading-lg); }
.sc-hero .sc-actions { justify-content: center; margin-top: var(--space-8); }
.sc-hero__foot { max-width: 32rem; margin: var(--space-8) auto 0; font-size: var(--text-sm); color: var(--text-tertiary); }

/* --- Campos --------------------------------------------------------------- */
.sc-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sc-label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-input { height: 2.75rem; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); border-radius: var(--radius-md); padding: 0 var(--space-3); font-family: var(--font-sans); font-size: var(--text-base); letter-spacing: 0.02em; }
.sc-input::placeholder { color: var(--text-tertiary); letter-spacing: 0; }
.sc-input[aria-invalid="true"] { border-color: var(--status-danger-border); }

/* --- Botões --------------------------------------------------------------- */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.sc-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sc-btn:disabled { cursor: not-allowed; background: var(--action-disabled-bg); color: var(--action-disabled-fg); }
.sc-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.sc-btn--primary:not(:disabled):hover { background: var(--action-primary-bg-hover); }
.sc-btn--brand { background: var(--action-brand-bg); color: var(--action-brand-fg); }
.sc-btn--brand:not(:disabled):hover { background: var(--action-brand-bg-hover); }
.sc-btn--ghost { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.sc-btn--ghost:not(:disabled):hover { background: var(--action-ghost-hover); }
.sc-btn--block { width: 100%; }
.sc-btn--sm { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.sc-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.sc-actions--split { justify-content: space-between; }
.sc-center-actions { justify-content: center; margin-top: var(--space-10); }

/* --- Consentimento -------------------------------------------------------- */
.sc-consent { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.sc-usebox { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-muted); padding: var(--space-4) var(--space-5); }
.sc-usebox h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.sc-usebox p, .sc-usebox li { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }
.sc-usebox ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.sc-usebox b { font-weight: var(--weight-medium); }
.sc-ack { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.sc-ack input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--text-brand); flex: none; }
.sc-ack span { font-size: var(--text-sm); line-height: var(--leading-sm); }

/* --- Transição de bloco --------------------------------------------------- */
.sc-transicao { padding: var(--space-16) 0 var(--space-8); }
.sc-transicao__periodo { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-medium); }

/* --- Progresso ------------------------------------------------------------ */
.sc-progress { position: sticky; top: 0; z-index: 5; background: var(--bg-canvas); padding: var(--space-4) 0 var(--space-3); }
.sc-progress__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.sc-progress__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-progress__count { font-size: var(--text-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-track { height: 0.375rem; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.sc-track__fill { height: 100%; background: var(--text-brand); border-radius: inherit; transition: width var(--duration-base) var(--ease-out); }

/* --- Item (uma questão por tela) ------------------------------------------ */
.sc-item { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); margin-top: var(--space-5); }
@media (max-width: 30rem) { .sc-item { padding: var(--space-5); } }
/* Contêiner da questão recebe foco por programa (leitor de tela/teclado); não é
   controle, então não mostra anel — as alternativas mantêm o seu. */
#sc-questao:focus { outline: none; }
.sc-item__prompt { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-medium); margin: 0 0 var(--space-6); text-wrap: balance; }
.sc-opts { display: grid; gap: var(--space-3); }
.sc-opt { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.sc-opt:hover { background: var(--action-ghost-hover); }
.sc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-opt__dot { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); display: grid; place-items: center; transition: border-color var(--duration-fast) var(--ease-out); }
.sc-opt__dot::after { content: ""; width: 0.62rem; height: 0.62rem; border-radius: var(--radius-full); background: var(--text-brand); transform: scale(0); transition: transform var(--duration-fast) var(--ease-out); }
.sc-opt__txt { font-size: var(--text-base); line-height: var(--leading-lg); color: var(--text-secondary); }
.sc-opt.is-checked, .sc-opt:has(input:checked) { border-color: var(--text-brand); background: var(--bg-brand-subtle); }
.sc-opt.is-checked .sc-opt__dot, .sc-opt:has(input:checked) .sc-opt__dot { border-color: var(--text-brand); }
.sc-opt.is-checked .sc-opt__dot::after, .sc-opt:has(input:checked) .sc-opt__dot::after { transform: scale(1); }
.sc-opt.is-checked .sc-opt__txt, .sc-opt:has(input:checked) .sc-opt__txt { color: var(--text-primary); }
.sc-opt:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* "Não se aplica": neutra, sem alarme. Levemente recuada. */
.sc-opt--na .sc-opt__txt { color: var(--text-tertiary); }

/* Navegação voltar / autosave / avançar */
.sc-nav { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg-canvas) 62%, transparent); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) 0 var(--space-6); margin-top: var(--space-6); }
.sc-save { font-size: var(--text-xs); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--space-1); text-align: center; }
.sc-save svg { width: 0.95rem; height: 0.95rem; }
.sc-save--ativo { color: var(--text-secondary); }
.sc-save--ok { color: var(--text-brand); }
@media (max-width: 26rem) { .sc-save { display: none; } }

/* --- Revisão -------------------------------------------------------------- */
.sc-rev { padding-top: var(--space-2); }
.sc-rev__bloco { margin-top: var(--space-6); }
.sc-rev__bnome { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); }
.sc-rev__linha { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.sc-rev__q { grid-column: 1 / -1; display: flex; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-rev__n { flex: none; color: var(--text-tertiary); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.sc-rev__a { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); }
.sc-rev__vazio { color: var(--status-danger-fg); }
.sc-rev__linha.is-vazio { background: var(--status-danger-bg); border-radius: var(--radius-md); padding-left: var(--space-3); padding-right: var(--space-3); }
.sc-rev__linha .sc-btn { align-self: center; }

/* Barra fixa de rodapé (revisão) */
.sc-footbar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg-canvas) 60%, transparent); padding: var(--space-5) 0 var(--space-6); margin-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* --- Notas inline --------------------------------------------------------- */
.sc-note { display: flex; gap: var(--space-3); align-items: flex-start; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm); margin-top: var(--space-4); }
.sc-note svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 1px; }
.sc-note--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border: 1px solid var(--status-danger-border); }
.sc-note--ok { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid var(--status-success-border); }

/* --- Captura de lead (degustação pública) --------------------------------- */
.sc-leadform { display: grid; gap: var(--space-4); }
.sc-leadform__sub { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); }
.sc-card--lead { background: var(--bg-brand-subtle); border-color: var(--border-default); }

/* =========================================================================
   DEVOLUTIVA
   ========================================================================= */
.sc-result__head { text-align: center; padding: var(--space-10) 0 var(--space-6); }

/* Seção numerada */
.sc-sec { margin-top: var(--space-12); }
.sc-sec__head { display: flex; gap: var(--space-4); align-items: baseline; margin-bottom: var(--space-5); }
.sc-sec__num { flex: none; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); border: 1px solid var(--border-default); display: grid; place-items: center; }
.sc-sec__title { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); margin: 0; text-wrap: balance; }
.sc-sec__sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-tertiary); }

/* Anel de índice (número grande em círculo) */
.sc-idx { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 34rem) { .sc-idx { grid-template-columns: 1fr; } }
.sc-anel { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.sc-anel__circ { width: 6.5rem; height: 6.5rem; border-radius: var(--radius-full); border: 2px solid var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-surface); }
.sc-anel__num { font-size: var(--text-4xl); line-height: 1; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.sc-anel__den { font-size: var(--text-xs); color: var(--text-tertiary); }
.sc-anel__band { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); text-align: center; max-width: 8rem; }

/* Dimensões (barra + leitura por faixa) */
.sc-dims { display: grid; gap: var(--space-5); }
.sc-idx__dims { min-width: 0; }
.sc-dim { display: grid; gap: var(--space-2); }
.sc-dim__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sc-dim__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-dim__score { font-size: var(--text-lg); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-dim__den { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-regular); }
.sc-dim__bar { height: 0.5rem; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.sc-dim__fill { height: 100%; background: var(--text-secondary); border-radius: inherit; }
.sc-dim__read { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-tertiary); }
.sc-dim__read b { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* Gate de governança (à parte) */
.sc-gate { margin-top: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-muted); padding: var(--space-4) var(--space-5); }
.sc-gate__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); font-weight: var(--weight-medium); }
.sc-gate__v { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-top: var(--space-1); }
.sc-gate__n { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); }

/* Matriz Empresa × IA */
.sc-matriz { display: grid; grid-template-columns: 16rem 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 34rem) { .sc-matriz { grid-template-columns: 1fr; } }
.sc-matriz__plot { width: 100%; }
.sc-matriz__plot svg { width: 100%; height: auto; }
.sc-mq { fill: var(--bg-muted); }
.sc-mq--alt { fill: var(--bg-surface); }
.sc-mx { stroke: var(--border-default); stroke-width: 0.6; stroke-dasharray: 2 2; }
.sc-maxis { stroke: var(--border-strong); stroke-width: 0.8; }
.sc-mdot { fill: var(--text-brand); stroke: var(--bg-surface); stroke-width: 1.5; }
.sc-mlabel { fill: var(--text-tertiary); font-size: 6px; font-family: var(--font-sans); font-weight: 500; }
.sc-matriz__quad { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
.sc-matriz__msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); }

/* Alinhamento Pessoa × Empresa (divergente, neutro) */
.sc-als { display: grid; gap: var(--space-4); }
.sc-al { display: grid; gap: var(--space-2); }
.sc-al__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sc-al__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-al__dir { font-size: var(--text-xs); color: var(--text-tertiary); }
.sc-al__track { position: relative; height: 0.5rem; background: var(--bg-muted); border-radius: var(--radius-full); }
.sc-al__center { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border-strong); }
.sc-al__mark { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); background: var(--text-secondary); }
.sc-al__mark--c { width: 6px !important; border-radius: var(--radius-full); }
.sc-al__leg { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }

/* Prioridades */
.sc-prio { display: grid; gap: var(--space-3); }
.sc-prio__item { display: flex; gap: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); }
.sc-prio__rank { flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--bg-inverse); color: var(--text-inverse); display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-prio__body { display: grid; gap: var(--space-2); }
.sc-prio__scope { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); font-weight: var(--weight-medium); }
.sc-prio__mv { font-size: var(--text-sm); line-height: var(--leading-lg); color: var(--text-secondary); }
.sc-prio__mv b { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Plano de 30 dias */
.sc-plano { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 40rem) { .sc-plano { grid-template-columns: 1fr; } }
.sc-plano__item { border: 1px solid var(--border-subtle); border-top: 2px solid var(--text-brand); border-radius: var(--radius-md); background: var(--bg-surface); padding: var(--space-5); }
.sc-plano__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); font-weight: var(--weight-medium); }
.sc-plano__a { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-lg); color: var(--text-secondary); }

/* Nota metodológica */
.sc-meta { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.sc-meta li { font-size: var(--text-sm); line-height: var(--leading-lg); color: var(--text-secondary); }
.sc-meta b { font-weight: var(--weight-medium); color: var(--text-primary); }

/* --- Tela de erro (estados terminais) ------------------------------------- */
/* Estado vazio: a marca aparece como textura (grafismo em baixa opacidade) sobre
   superfície quente — orientação do design system para estes momentos. */
.sc-erro { max-width: 34rem; margin: 0 auto; padding: var(--space-12) var(--space-2); }
.sc-erro__card { position: relative; overflow: hidden; background: var(--bg-surface-warm); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-8); text-align: center; box-shadow: var(--shadow-md); }
@media (max-width: 30rem) { .sc-erro__card { padding: var(--space-12) var(--space-5); } }
.sc-erro__grafismo { position: absolute; width: 24rem; height: auto; right: -6rem; top: -5rem; opacity: 0.06; pointer-events: none; user-select: none; }
:root[data-theme="dark"] .sc-erro__grafismo { filter: invert(1); opacity: 0.08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-erro__grafismo { filter: invert(1); opacity: 0.08; } }
.sc-erro__corpo { position: relative; }
.sc-erro__ic { width: 3.75rem; height: 3.75rem; margin: 0 auto var(--space-6); border-radius: var(--radius-full); display: grid; place-items: center; }
.sc-erro__ic svg { width: 1.85rem; height: 1.85rem; }
.sc-erro__ic--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid var(--status-warning-border); }
.sc-erro__ic--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); border: 1px solid var(--status-neutral-border); }
.sc-erro__ic--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border: 1px solid var(--status-danger-border); }
.sc-erro .sc-lead { margin-top: var(--space-3); }
.sc-erro .sc-actions { justify-content: center; margin-top: var(--space-8); }

/* --- Carregamento --------------------------------------------------------- */
.sc-loading { display: flex; gap: var(--space-3); align-items: center; justify-content: center; padding: var(--space-16) 0; color: var(--text-tertiary); font-size: var(--text-sm); }
.sc-spin { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-default); border-top-color: var(--text-brand); border-radius: var(--radius-full); animation: sc-rot 0.7s linear infinite; }
@keyframes sc-rot { to { transform: rotate(360deg); } }
/* Transição suave ao trocar de questão / bloco. */
@keyframes sc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sc-item, .sc-transicao, .sc-hero { animation: sc-fade var(--duration-base) var(--ease-out); }
/* Atalho de teclado da alternativa (1–5) — dica discreta no canto da opção. */
.sc-opt__num { flex: none; margin-left: auto; align-self: center; font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); min-width: 1.25rem; height: 1.25rem; display: grid; place-items: center; }
@media (max-width: 26rem) { .sc-opt__num { display: none; } }
.sc-opt:has(input:checked) .sc-opt__num { border-color: var(--text-brand); color: var(--text-brand); }
.sc-kbd { text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); }
.sc-kbd kbd { font-family: var(--font-mono); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 0.3rem; font-size: 0.7rem; }
@media (max-width: 30rem) { .sc-kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sc-spin { animation: none; }
  .sc-item, .sc-transicao, .sc-hero { animation: none; }
  .sc-track__fill, .sc-opt, .sc-btn, .sc-theme { transition: none; }
}