/* Seções HTML dos slides — layout genérico e o vocabulário de batida.

   Cada família (declaracao, numero, escada...) soma o seu próprio bloco aqui;
   o que é comum a todas — a moldura da seção e a revelação por batida — mora
   no topo. Só os tokens de css/app.css: --fundo, --fundo-2, --linha, --tinta,
   --tinta-fraca, --acento, --regua, --texto-claro. Nenhuma outra cor. */

/* A seção mora nas mesmas camadas a/b do slide (duplo buffer — ver
   paintSection em js/stage.js), não numa camada única: cada `.layer` carrega
   um `<img>` (slide) e um `.sec-host` (seção); `data-kind` escolhe qual dos
   dois aparece. Sem isso, repintar a seção na mesma camada não teria quadro
   de saída para segurar durante a passagem entre duas seções seguidas. */
.layer .sec-host { width: 100%; height: 100%; }
.layer:not([data-kind="section"]) .sec-host { display: none; }
.layer[data-kind="section"] img { display: none; }

/* `align-content: center` numa caixa que pode rolar é o anti-padrão que já
   custou caro neste projeto (ver o comentário de `.interaction .body` em
   app.css): metade do transbordo vai para CIMA do início e não existe
   scrollTop negativo para alcançar. `escada` (6 batidas), `quadrantes` (5) e
   `ruido` vão ter mais conteúdo do que cabe numa tela de celular — por isso
   `.sec` já nasce como caixa que rola, com o mesmo `safe center` do resto do
   projeto: centraliza quando cabe, vira `start` (nada perdido) quando não. */
.sec {
  width: 100%; height: 100%; box-sizing: border-box; padding: 6vmin;
  /* `.sec-host` (o pai) é uma div comum, não um flex/grid: um `max-width` de
     família (como o 58rem de sec-declaracao) encolhe a caixa mas, sem
     margem automática, ela gruda na esquerda em vez de centralizar — foi
     assim que a Tarefa 3 viu o fundo cortado a ~930px de 1280 no celular. */
  margin-inline: auto;
  display: grid; justify-items: center; text-align: center;
  gap: clamp(1rem, 3vmin, 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  align-content: start;
  background: radial-gradient(120% 80% at 50% 0%, var(--fundo-2) 0%, var(--fundo) 62%), var(--fundo);
}
@supports (align-content: safe center) {
  .sec { align-content: safe center; }
}

/* --------------------------------------------------------- batida (comum)

   Vocabulário de revelação descrito em docs/ARQUITETURA-SECOES.md §4. Este é
   o movimento base ("surge"): sobe 12px e aparece — o caso comum, usado por
   `declaracao`. `stage.js` (updateBeats) mantém três classes por elemento
   `[data-beat]`, não só `revelado`:

     revelado   já apareceu (esta batida ou uma anterior) — o que `declaracao` usa
     atual      é A batida que acabou de virar a atual — gancho para "acende"
     passada    uma batida seguinte já superou esta — gancho para "apaga"

   e `data-batida="N"` na raiz `.sec`, para um layout com contagem numérica
   (`conta`) ou traço desenhado (`risca`) saber, via `mount(el, data)` ou um
   observer próprio, quando a SUA batida virou a atual. Nenhuma dessas três
   famílias tem regra aqui ainda — só quem as usa (Tarefa 5) declara o CSS.

   Só `transform` e `opacity` aqui — nada que force relayout. */
.sec [data-beat] {
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sec [data-beat].revelado { opacity: 1; transform: none; }

/* A batida continua existindo sob movimento reduzido — ela é conteúdo, não
   enfeite — mas perde o deslocamento e vira uma troca curta de opacidade. */
@media (prefers-reduced-motion: reduce) {
  .sec [data-beat] { transform: none; transition-duration: 220ms; }
}

/* ---------------------------------------------------------- sec-declaracao

   Uma etiqueta opcional sempre visível (data-beat="0"), as linhas do autor
   uma por batida, e uma fonte bibliográfica opcional na última batida. */

/* O `max-width` mora nos elementos de texto, não em `.sec-declaracao`: o
   fundo (a grade radial de `.sec`) segue de ponta a ponta da tela, como o
   `.card`/`.interaction` de app.css já fazem — só a coluna de leitura
   encolhe. `.sec` centraliza cada filho sozinho (`justify-items: center`),
   então o `max-width` aqui já nasce centralizado, sem precisar de margem. */
.sec-declaracao { gap: clamp(1.1rem, 3.6vmin, 2.2rem); }

.sec-declaracao .etiqueta {
  margin: 0; max-width: 40ch; font-family: var(--mono); font-size: clamp(.62rem, 1.4vw, .82rem);
  letter-spacing: .34em; text-transform: uppercase; color: var(--acento);
}

.sec-declaracao .linha {
  margin: 0; max-width: 20ch; font-family: var(--display); font-weight: 800;
  line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase;
  font-size: clamp(1.6rem, 5.2vw, 3.4rem); color: var(--tinta);
}

/* peso "leve": a linha de apoio entre duas afirmações fortes — a definição
   entre aspas, a ressalva — não compete com o título da seção. */
.sec-declaracao .linha.leve {
  font-weight: 400; text-transform: none; color: var(--tinta-fraca);
  font-size: clamp(1.05rem, 2.8vw, 1.7rem); max-width: 34ch;
}

/* `efeito-acende` — a mesma linguagem de sec-numero (§4, "acende"): a linha
   ganha o acento e um leve zoom quando vira a batida atual, sem `color` na
   `transition` (só transform/opacity animam neste projeto — o acento troca
   de uma vez, junto do zoom que é a parte de fato animada). Usa a transição
   que `.sec [data-beat]` já declara no topo deste arquivo; não precisa de
   uma nova. Caso de uso: a seção 17, cujas negações não têm número nenhum
   para caber em `numero`, mas uma delas ainda pede o pop da virada. */
.sec-declaracao .linha.efeito-acende.atual { color: var(--acento); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .sec-declaracao .linha.efeito-acende.atual { transform: none; }
}

/* peso "leitura" — a seção 26, "a tese": duas frases inteiras, em caixa
   baixa, que a plateia lê sozinha antes de o apresentador falar. "forte" é
   caixa alta e 20ch (pensado para título curto); "leve" é a linha de apoio,
   pequena e cinza. Nenhuma das duas serve para uma frase que É o ponto da
   seção — daí o terceiro peso: maior que "leve", ainda sem caixa alta, com
   a tinta cheia (não é um apoio, é o centro da tela). */
.sec-declaracao .linha.leitura {
  text-transform: none; font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.25rem, 3.4vw, 2.05rem); max-width: 34ch;
}

/* `.aceso` — um trecho DENTRO de uma linha já revelada que acende sozinho
   numa batida posterior (a seção 2: "Foi esta aqui: OU."). Ele nasce
   visível — é parte do texto da sua própria linha, não uma revelação nova —
   por isso anula a regra-base de `.sec [data-beat]` (que esconde tudo até a
   sua vez) só para si: sem opacidade/posição de entrada, só a troca de
   cor/escala quando ele mesmo vira `.atual`, na mesma linguagem de
   `efeito-acende` acima (cor à parte da `transition`, só o zoom anima). */
.sec-declaracao .linha .aceso { display: inline-block; opacity: 1; transform: none; }
.sec-declaracao .linha .aceso.atual { color: var(--acento); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .sec-declaracao .linha .aceso.atual { transform: none; }
}

.sec-declaracao .fonte {
  margin: 0; max-width: 60ch; font-family: var(--mono); font-size: clamp(.64rem, 1.4vw, .8rem);
  color: var(--tinta-fraca);
}

/* -------------------------------------------------------------- sec-numero

   Um número herói (às vezes mais de um, quando a seção empilha uma
   sequência — 16 e 22), apoios e a fonte. `heroes[].efeito` escolhe o
   movimento da PRÓPRIA batida do herói: "conta" soma no `mount()` do layout
   (js/layouts/numero.js, via `data-conta`/`data-conta-alvo`); "acende" ganha
   o acento e um leve zoom quando vira a batida atual; sem `efeito` o herói
   só usa o "surge" de base (`.sec [data-beat]`, no topo deste arquivo).

   Cor nunca entra na `transition` (só transform/opacity animam neste
   projeto) — o acento troca de uma vez, no mesmo instante em que a classe
   muda, junto do zoom que é a parte de fato animada. */
.sec-numero { gap: clamp(1.4rem, 4.4vmin, 2.6rem); max-width: 46rem; }

.sec-numero .hero { display: grid; gap: .3em; justify-items: center; }

/* Cabeçalho de bloco (seção 22: "EXPERIÊNCIA DO PACIENTE", "DESFECHO
   ASSISTENCIAL") — nomeia o bloco que o herói pertence a, um degrau acima
   de `.hero-rotulo` (que descreve o número em si, ex. "NPS"). Mesma família
   tipográfica do rótulo, mas com mais peso e a cor de texto principal: é
   título, não apoio. */
.sec-numero .hero-titulo {
  margin: 0 0 .2em; max-width: 40ch; font-family: var(--mono); font-weight: 800;
  font-size: clamp(.72rem, 1.7vw, .92rem); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta);
}

.sec-numero .hero-rotulo {
  margin: 0; max-width: 40ch; font-family: var(--mono); font-size: clamp(.66rem, 1.5vw, .86rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-fraca);
}

/* Escala numérica — o tamanho "imponente no projetor, legível em 390px" que
   a tarefa pede. `--tinta` por padrão — "UM vermelho" (docs/ARQUITETURA-
   SECOES.md §2) usado com intenção, não em todo número da seção.

   Duas regras de vermelho, de propósitos diferentes, por isso não são uma
   só (ver o comentário no topo de numero.js): `.atual` é o POP da própria
   batida — todo herói que está contando ou acendendo pisca vermelho e
   cresce 3% no instante em que vira a batida atual, e volta ao normal
   assim que uma batida seguinte o supera. `.destaque` é o que FICA vermelho
   depois — só quem a nota do autor aponta como o protagonista da seção
   (§4: "quem decide o que se destaca é a nota do autor, não o layout").
   `efeito: conta` sozinho não basta mais para isso — a seção 22 é o
   exemplo: o NPS conta mas não é `destaque`; a mortalidade é `destaque` mas
   só acende. */
.sec-numero .hero-valor {
  margin: 0; font-family: var(--display); font-weight: 800;
  line-height: 1; letter-spacing: -.02em; color: var(--tinta);
  font-size: clamp(3rem, 15vw, 7.5rem);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}

.sec-numero .hero.efeito-acende.atual .hero-valor,
.sec-numero .hero.efeito-conta.atual .hero-valor { color: var(--acento); transform: scale(1.03); }
.sec-numero .hero.destaque .hero-valor { color: var(--acento); }

.sec-numero .linha {
  margin: 0; max-width: 34ch; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem); line-height: 1.25; color: var(--tinta);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}

/* amostra (15): a legenda de n/universo, colada ao herói — tom de fonte, não
   de afirmação. contexto (22): o número que só serve de comparação, sem o
   peso do que é institucional. ressalva (22): a nota metodológica que "não
   pode passar batida" — sublinhada por um fio (--linha) e batida própria,
   nunca fundida com o número que ela relativiza. */
.sec-numero .linha.tom-amostra {
  font-family: var(--mono); font-weight: 400; text-transform: none;
  font-size: clamp(.78rem, 1.8vw, 1rem); color: var(--tinta-fraca);
}
.sec-numero .linha.tom-contexto {
  font-weight: 400; font-size: clamp(.95rem, 2.6vw, 1.3rem); color: var(--tinta-fraca);
}
.sec-numero .linha.tom-ressalva {
  font-family: var(--mono); font-weight: 400; text-transform: none;
  font-size: clamp(.72rem, 1.6vw, .88rem); color: var(--tinta-fraca);
  max-width: 40ch; border-top: 1px solid var(--linha); padding-top: .9em;
}
.sec-numero .linha.efeito-acende.atual { color: var(--acento); transform: scale(1.03); }
/* A ressalva metodológica da 22 (§4 da spec, nota do autor: "o 6% continua
   protagonista") não pode ganhar o acento mesmo tendo `efeito: acende` — ela
   só precisa do pop de leitura (o `transform: scale`, herdado da regra
   acima), nunca da cor que compete com o número que ela relativiza. Sem
   esta regra, `.tom-ressalva` (3 classes, especificidade 0-3-0) perde para
   `.efeito-acende.atual` (4 classes, 0-4-0) na ordem errada — o mesmo
   defeito já corrigido uma vez nesta seção e reaberto pelo conserto
   original, porque a correção anterior mexeu no dado (`efeito`), não na
   regra de especificidade que o reintroduz sempre que alguém marcar
   `efeito: acende` num tom que não pode acender vermelho. Esta regra (5
   classes, 0-5-0) fixa a cor sem repetir o `transform`. */
.sec-numero .linha.tom-ressalva.efeito-acende.atual { color: var(--tinta-fraca); }

.sec-numero .fonte {
  margin: 0; max-width: 60ch; font-family: var(--mono); font-size: clamp(.64rem, 1.4vw, .8rem);
  color: var(--tinta-fraca);
}

/* O zoom de "acende" também é deslocamento — cai junto com o resto sob
   movimento reduzido; a contagem em si é responsabilidade do mount() em
   numero.js (verifica prefers-reduced-motion antes de animar o número). */
@media (prefers-reduced-motion: reduce) {
  .sec-numero .hero.efeito-acende.atual .hero-valor,
  .sec-numero .hero.efeito-conta.atual .hero-valor,
  .sec-numero .linha.efeito-acende.atual { transform: none; }
}

/* -------------------------------------------------------------- sec-escada

   Progressão com destino (seções 4 e 24; js/layouts/escada.js). Uma coluna
   só, sempre — mesmo no projetor: cinco ou seis degraus mais um destino já
   são a lista mais alta do deck (a nota de `.sec` no topo deste arquivo já
   avisa que `escada` é uma das três famílias que passam da altura de uma
   tela de celular de propósito). Empilhar em vez de espalhar em colunas
   evita o segundo jeito de estourar 390px: uma escada "de verdade" (degraus
   deslocados para o lado) teria que encolher a cada passo até não caber
   texto nenhum.

   A progressão aparece pelo TAMANHO do texto (`--i`, o índice do degrau,
   cresce a cada um), nunca por cor — nenhum degrau tem mais vermelho que o
   anterior. É a mesma leitura de "chegando a algum lugar" sem inventar
   ênfase que a nota do autor não pediu (§4 da spec).

   Alvo de escala: imponente no projetor, legível em 390px (mesmo critério
   de sec-numero, repetido aqui porque `.degrau-rotulo` tem seu próprio
   `clamp()`). Isto é projetado num auditório — quem está no fundo da sala
   precisa ler o degrau, não só o número final. Por isso o container
   também alarga com a tela (Rodada 1 de revisão pegou o container preso a
   34rem enquanto a fonte tentava crescer contra ele). */
.sec-escada { gap: clamp(1.4rem, 4vmin, 2.4rem); max-width: min(92vw, 30rem); }
@media (min-width: 900px) {
  .sec-escada { max-width: min(88vw, 62rem); }
}

.degraus { display: grid; justify-items: center; gap: 0; }

.degrau { display: grid; justify-items: center; gap: .15em; }

.degrau-seta {
  color: var(--tinta-fraca); font-size: 1.1rem; line-height: 1;
  margin-block: .1em; opacity: .7;
}

.degrau-corpo { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; justify-content: center; }

.degrau-numero {
  font-family: var(--mono); font-size: clamp(.7rem, 1.6vw, .9rem);
  color: var(--tinta-fraca); border: 1px solid var(--linha); border-radius: 999px;
  width: 1.6em; height: 1.6em; display: inline-grid; place-items: center;
}

.degrau-rotulo {
  margin: 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--tinta);
  /* --i cresce um degrau por vez — é o único jeito de mostrar "subindo",
     sem cor nem `acende` que a nota do autor não pediu.

     Três rodadas nesta fórmula, e as duas primeiras se contradizem se
     tentarem morar na MESMA expressão — por isso agora são duas, uma por
     faixa de tela, em vez de uma fórmula só tentando servir as duas:

     Rodada 0 (celular): um incremento só em `vw` somava menos de 2px do
     primeiro ao último degrau em 390px — os dois primeiros ficavam no
     mesmo tamanho, presos ao piso do `clamp()`. Resolvido com um passo
     fixo em `rem` por degrau (a regra abaixo, fora do media query).

     Rodada 1 (projetor): a mesma fórmula, sem media query, tinha teto
     baixo demais para 1280px+ — em 1280px o teto já batia no 3º de 5
     degraus (REPUTAÇÃO/COMUNICAÇÃO/ALCANCE saindo do mesmo tamanho,
     exatamente onde a tese fecha). A correção óbvia — trocar por uma
     curva mais agressiva — quebrou o celular: a MESMA curva, com o
     mesmo peso de `vw`, empurrou "COMUNICAÇÃO" (11 letras) para fora dos
     390px (`verify-mobile.mjs` pegou: 34px de rolagem horizontal — a
     regressão, capturada, é a prova de que o verificador funciona). As
     duas telas pedem curvas DIFERENTES, não a mesma curva com um `vw`
     mais ou menos generoso: por isso o desktop ganhou sua própria regra
     dentro de `@media (min-width: 900px)`, movida a `vw` sem competir
     com o orçamento apertado do celular — cresce com a tela em vez de
     macular a base que o celular também usa. */
  font-size: clamp(1.25rem, calc(1.05rem + var(--i, 0) * .32rem + 1.6vw), 3rem);
}
@media (min-width: 900px) {
  .degrau-rotulo {
    font-size: clamp(2.2rem, calc(1.8vw + var(--i, 0) * 1.1vw), 7rem);
  }
}

.degrau-nota {
  font-family: var(--mono); font-size: clamp(.68rem, 1.5vw, .82rem);
  color: var(--tinta-fraca);
}

.destino { display: grid; justify-items: center; gap: .4em; margin-top: .6em; }

.destino-frase {
  max-width: 28ch; border-top: 1px solid var(--linha); padding-top: 1em;
}
.destino-frase p {
  margin: 0; font-family: var(--display); font-weight: 800; color: var(--tinta);
  font-size: clamp(1.2rem, 3.6vw, 1.9rem); line-height: 1.3;
}

.destino-valor {
  margin: 0; font-family: var(--display); font-weight: 800;
  line-height: 1; letter-spacing: -.02em; color: var(--tinta);
  font-size: clamp(2.8rem, 14vw, 6.5rem);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
/* Mesma linguagem de sec-numero, e agora o mesmo par de classes: `.atual`
   dá o pop só no instante em que a batida do destino vira a atual (cor
   nunca entra na `transition`, troca de uma vez junto do zoom); `.destaque`
   é o que CONTINUA vermelho depois — sempre um dado explícito de
   build-deck.py (`efeito`/`destaque` em js/layouts/escada.js), nunca
   inferido de `efeito-conta` sozinho. Na seção 4 os dois vêm marcados: o
   número conta E fica destaque, porque é mesmo o que sobra na tela durante
   o fim da fala — mas agora por dado, não porque a batida do destino
   calhou de ser a última da seção. */
.destino.efeito-conta.atual .destino-valor,
.destino.efeito-acende.atual .destino-valor { color: var(--acento); transform: scale(1.03); }
.destino.destaque .destino-valor { color: var(--acento); }

.destino-rotulo {
  margin: 0; max-width: 32ch; font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 2.8vw, 1.3rem); color: var(--tinta);
}
.destino-linha {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--tinta-fraca);
}

.sec-escada .fonte {
  margin: 0; max-width: 60ch; font-family: var(--mono); font-size: clamp(.64rem, 1.4vw, .8rem);
  color: var(--tinta-fraca);
}

@media (prefers-reduced-motion: reduce) {
  .destino.efeito-conta.atual .destino-valor,
  .destino.efeito-acende.atual .destino-valor { transform: none; }
}

/* ------------------------------------------------------------- sec-formula

   A + B, conclusão embaixo (seção 8, única da família). A nota do autor:
   "Eu quero esse slide extremamente limpo." — daí a composição mais rasa de
   todo o deck: dois termos, um "+", uma frase, uma fonte. Nenhuma cor além
   de --tinta: a frase de apoio diz que as DUAS finalidades pesam igual, e
   pintar A ou B de vermelho inventaria a hierarquia que o slide nega. */
.sec-formula { gap: clamp(1.6rem, 5vmin, 3rem); max-width: 30rem; }

.formula-corpo { display: grid; justify-items: center; gap: .5em; }

.formula-termo {
  margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; color: var(--tinta);
  font-size: clamp(1.7rem, 6vw, 3rem);
}

.formula-mais {
  color: var(--tinta-fraca); font-family: var(--display); font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1;
}

.formula-conclusao { display: grid; justify-items: center; gap: .6em; max-width: 34ch; }

.formula-frase {
  margin: 0; font-family: var(--display); font-weight: 400; color: var(--tinta-fraca);
  font-size: clamp(1.05rem, 2.8vw, 1.5rem); line-height: 1.35;
}

.sec-formula .fonte {
  margin: 0; max-width: 60ch; font-family: var(--mono); font-size: clamp(.64rem, 1.4vw, .8rem);
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------- sec-quadrantes

   Quatro dimensões em volta de um centro (seção 9, única da família). Sem
   nenhuma delas em destaque — a fala é explícita que o modelo existe para
   NÃO hierarquizar, e um quadrante vermelho contradiria a própria tese.

   Mobile-first de composição (abaixo de 900px, o corte que o resto do
   projeto já usa em app.css) é uma coluna só, centro no topo — a mesma
   ordem em que a batida revela as coisas; um grid 2x2 fixo em 390px é
   exatamente o "diagrama de quatro quadrantes" que estoura em tela
   pequena. Mas mobile-first é só a composição — não o tamanho. Alvo de
   escala: imponente no projetor, legível em 390px, as duas telas ao mesmo
   tempo (mesmo critério de sec-numero). A Rodada 1 de revisão pegou a
   versão anterior presa a um teto de legenda (rótulo travado em 1.3rem, a
   seção inteira sem passar de 50rem) — em 1280×720 o diagrama ocupava um
   terço da altura útil, cercado de vazio, porque nada além da composição
   tinha sido pensado para o projetor. Agora `.sec-quadrantes` é a ÚNICA
   fonte de largura (a grade usa `width: 100%` dela, sem `max-width`
   próprio) e cada `clamp()` abaixo tem teto bem acima do que a tela normal
   alcança — o teto é rede de segurança, não o tamanho de chegada. */
.sec-quadrantes { max-width: min(92vw, 30rem); }

.quadrantes-grade {
  width: 100%; display: grid; gap: .9rem;
  grid-template-columns: 1fr;
  grid-template-areas: "centro" "q1" "q2" "q3" "q4";
}
@media (min-width: 900px) {
  .sec-quadrantes { max-width: min(90vw, 68rem); }
  .quadrantes-grade {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "q1 q2" "centro centro" "q3 q4";
  }
}

.centro {
  grid-area: centro; margin: 0; align-self: center; justify-self: center;
  font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--tinta);
  font-size: clamp(.85rem, 2.6vw, 2.2rem);
  border: 1px solid var(--linha); border-radius: 999px;
  padding: .7em 1.3em; background: var(--fundo);
}

.quadrante {
  border: 1px solid var(--linha); background: var(--fundo-2); border-radius: .6rem;
  padding: 1.1em 1.2em; display: grid; gap: .3em; justify-items: center; text-align: center;
}
@media (min-width: 900px) {
  .quadrante { padding: 2em 1.8em; border-radius: 1rem; gap: .5em; }
}
.quadrante.q1 { grid-area: q1; }
.quadrante.q2 { grid-area: q2; }
.quadrante.q3 { grid-area: q3; }
.quadrante.q4 { grid-area: q4; }

.quadrante-rotulo {
  margin: 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--tinta);
  font-size: clamp(1.05rem, 3.2vw, 2.6rem);
}
.quadrante-sub {
  margin: 0; font-family: var(--mono); font-size: clamp(.78rem, 2vw, 1.4rem);
  color: var(--tinta-fraca);
}

/* ------------------------------------------------------------- sec-teste

   Três situações, uma de cada vez (seção 6, única da família;
   js/layouts/teste.js). Cada card usa o "surge" de base para entrar; o que
   é próprio daqui é `apaga` no card anterior — `.passada`, que stage.js já
   calcula, sem `efeito` nenhum no dado (§4: "apaga" cai para 40%, nunca
   some — a situação 1 continua legível quando a fala volta a ela).

   Nenhuma cor além de --tinta: a nota não elege nenhuma das três como "a
   errada" antes da votação seguinte — colorir uma decidiria pela plateia.

   Alvo de escala: imponente no projetor, legível em 390px (mesmo critério
   de numero.js/escada.js) — três frases inteiras empilhadas, a segunda
   lista mais alta do deck depois de escada/quadrantes, por isso o texto
   também cresce em duas faixas (rem+vw no celular, mais vw a partir de
   900px) em vez de um único clamp tentando servir as duas telas. */
.sec-teste { gap: clamp(1.2rem, 3.6vmin, 2rem); max-width: min(94vw, 34rem); }
@media (min-width: 900px) { .sec-teste { max-width: min(90vw, 58rem); } }

.situacoes { display: grid; gap: clamp(1rem, 3vmin, 1.6rem); width: 100%; }

.situacao {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .6em 1em;
  text-align: left; padding: 1em 1.2em; border: 1px solid var(--linha); border-radius: .8rem;
  background: var(--fundo-2);
}
@media (min-width: 900px) {
  .situacao { padding: 1.5em 2em; border-radius: 1.1rem; gap: .8em 1.4em; }
}

.situacao-icone { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1; }
@media (min-width: 900px) { .situacao-icone { font-size: clamp(2.4rem, 2.8vw, 3.4rem); } }

.situacao-texto {
  margin: 0; font-family: var(--display); font-weight: 800; color: var(--tinta);
  font-size: clamp(1.05rem, 4.4vw, 1.5rem); line-height: 1.3;
}
@media (min-width: 900px) { .situacao-texto { font-size: clamp(1.7rem, 2.6vw, 2.7rem); } }

/* Especificidade igual à de `.sec [data-beat].revelado` no topo deste
   arquivo (três classes cada) — este bloco vem depois, então vence. Um
   card revelado E passado tem as duas classes ao mesmo tempo; sem isto o
   `opacity: 1` do `.revelado` prevaleceria e o card nunca apagaria. */
.sec-teste .situacao.passada { opacity: .4; }

/* ------------------------------------------------------------ sec-riscado

   O "OU" cortado, trocado por "+" (seção 7, única da família;
   js/layouts/riscado.js). Duas frases, mesmo peso de título que
   `sec-declaracao` já cobre — usa os mesmos clamps confirmados nas
   Tarefas 5a/5b em vez de inventar uma curva nova para o mesmo problema.

   `.risco` é o movimento "risca" (§4), único desta seção: cancela o
   "surge" de base (opacity/transform herdados de `.sec [data-beat]`, por
   isso precisa da mesma especificidade — duas classes — para vencer no
   CSS) e anima só `clip-path`, de "largura zero" (`inset(0 100% 0 0)`)
   para "traço inteiro" (`inset(0 0 0 0)`), como se fosse desenhado da
   esquerda para a direita. A palavra "OU" em si não translada nem some —
   só o traço por cima dela se desenha. */
.sec-riscado { gap: clamp(1.6rem, 5vmin, 3rem); max-width: min(92vw, 40rem); }
/* A fonte cresce mais rápido que o "vw" a partir de 900px (regra abaixo, em
   `.sec-riscado .frase`) — sem alargar o container junto, "AUTOPROMOÇÃO"
   (a palavra mais larga, sem espaço pra quebrar) passa a exigir mais
   largura do que os 40rem do celular sobram, e o transbordo fica ESCONDIDO
   dentro do `.sec` (que só declara `overflow-y`, mas resolve os dois eixos
   como "auto" — o mesmo defeito que `verify-mobile.mjs` já existe para
   pegar, só que ali a barra normal do documento não cresce, então um
   `scrollWidth` medido no `document`/`body` non-detect isto). Medido antes
   da correção: 640px de container contra 873px de conteúdo em 1920px — 233px
   de transbordo invisível. Depois: 0 nas três larguras (390/1280/1920). */
@media (min-width: 900px) { .sec-riscado { max-width: min(90vw, 62rem); } }

.sec-riscado .frase {
  margin: 0; font-family: var(--display); font-weight: 800;
  line-height: 1.15; letter-spacing: -.015em; text-transform: uppercase; color: var(--tinta);
  font-size: clamp(1.7rem, 6.4vw, 3rem);
}
@media (min-width: 900px) {
  .sec-riscado .frase { font-size: clamp(2.6rem, 4.4vw, 5.2rem); }
}

.palavra-riscada { position: relative; display: inline-block; }

.sec-riscado .risco {
  position: absolute; left: -.05em; right: -.05em; top: 50%; height: .09em;
  background: var(--acento); transform: translateY(-50%);
  opacity: 1; clip-path: inset(0 100% 0 0);
  transition: clip-path .6s var(--ease);
}
.sec-riscado .risco.revelado { clip-path: inset(0 0 0 0); }

/* O "+" é quem a nota manda acender, e só ele — EDUCAÇÃO/REPUTAÇÃO ficam na
   tinta normal (mesma regra de fidelidade de formula.js: não inventar
   hierarquia onde a nota não pede). `efeito`/`destaque` seguem o contrato
   de numero.js/escada.js: aqui são explícitos porque o "+" é o resumo da
   virada da seção e continua vermelho enquanto o apresentador segue
   falando — não é acidente de ser a última batida, é dado. */
.frase-resultado .operador {
  display: inline-block; color: var(--tinta-fraca);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.frase-resultado.efeito-acende.atual .operador { color: var(--acento); transform: scale(1.25); }
.frase-resultado.destaque .operador { color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  .sec-riscado .risco {
    clip-path: inset(0 0 0 0); opacity: 0; transform: translateY(-50%);
    transition: opacity .22s var(--ease);
  }
  .sec-riscado .risco.revelado { opacity: 1; }
  .frase-resultado.efeito-acende.atual .operador { transform: none; }
}

/* -------------------------------------------------------- sec-convergencia

   Uma dúvida, vários candidatos, um veredito (seção 13, única da família;
   js/layouts/convergencia.js). A nota desenha a própria composição —
   dúvida no topo, seta, candidatos, veredito no centro — três batidas na
   mesma ordem.

   Os candidatos não recebem cor: qualquer um deles pode preencher o
   espaço, hierarquizar entre eles contradiria a premissa (mesma regra de
   quadrantes.js, motivo oposto). O veredito É destacado, de propósito —
   ele é o argumento que a seção inteira constrói, a nota manda chegar
   nele, e ele fica vermelho durante toda a fala que segue.

   Alvo de escala: imponente no projetor, legível em 390px. Seis candidatos
   pedem `flex-wrap`, não grid fixo — o container do grupo é quem declara a
   largura (mesma lição de quadrantes.js), cada item só quebra linha. */
.sec-convergencia { gap: clamp(1rem, 3.4vmin, 1.8rem); max-width: min(94vw, 34rem); }
@media (min-width: 900px) { .sec-convergencia { max-width: min(90vw, 64rem); } }

.sec-convergencia .duvida {
  margin: 0; font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .22em; color: var(--tinta-fraca);
  font-size: clamp(.9rem, 3.4vw, 1.3rem);
}
@media (min-width: 900px) { .sec-convergencia .duvida { font-size: clamp(1.3rem, 1.8vw, 1.9rem); } }

.sec-convergencia .seta {
  color: var(--tinta-fraca); font-size: clamp(1.2rem, 4vw, 1.8rem); line-height: 1; opacity: .7;
}

.candidatos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em .8em; width: 100%; }

.candidato {
  font-family: var(--display); font-weight: 800; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 999px; background: var(--fundo-2);
  padding: .5em 1.1em; font-size: clamp(.85rem, 3.4vw, 1.15rem);
}
@media (min-width: 900px) {
  .candidato { font-size: clamp(1.2rem, 2vw, 2rem); padding: .6em 1.4em; }
}

.sec-convergencia .veredito {
  margin: 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--tinta);
  font-size: clamp(1.7rem, 6.6vw, 3rem);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
@media (min-width: 900px) { .sec-convergencia .veredito { font-size: clamp(2.6rem, 4vw, 4.6rem); } }

.sec-convergencia .veredito.efeito-acende.atual { color: var(--acento); transform: scale(1.03); }
.sec-convergencia .veredito.destaque { color: var(--acento); }

@media (prefers-reduced-motion: reduce) {
  .sec-convergencia .veredito.efeito-acende.atual { transform: none; }
}

/* --------------------------------------------------------------- sec-ruido

   Jargão espalhado contra uma promessa alta (seção 14, única da família;
   js/layouts/ruido.js). O jargão é pequeno e cinza (`--tinta-fraca`, o tom
   que o projeto já reserva para "apoio, nunca o assunto"); a promessa
   entra grande e vermelha — mas a fala é explícita que isto é uma
   COMPARAÇÃO ("existe uma assimetria aqui"), e uma comparação só existe
   com as duas pontas na tela ao mesmo tempo. A Rodada 1 de revisão pegou a
   primeira versão sobrepondo `.cha-promessa` e `.ruido-nuvem` na MESMA
   célula de grid, ambas centralizadas: cobria 100% de COMPLEXIDADE (a
   própria palavra que nomeia o lado sério da comparação — sumindo ela, não
   sobra o que comparar) e cortava "TRANSPLANTE" ao meio pela borda reta do
   cartaz, exatamente o "acidente de sobrepor duas caixas centralizadas sem
   cada uma saber da borda da outra" que a revisão nomeou.

   Correção: `.ruido-nuvem` e `.cha-promessa` voltam a ser sequenciais no
   fluxo (uma abaixo da outra, sem `grid-area` compartilhada) — o jargão e
   COMPLEXIDADE ficam 100% legíveis o tempo todo, nunca cobertos. "Cai por
   cima" continua visível, mas contido: `.ruido-nuvem` reserva um respiro
   fixo depois de COMPLEXIDADE (`padding-bottom: 3rem`, em `rem` — NUNCA em
   `vw`/`vmin`, de propósito) e `.cha-promessa` sobe só até a metade desse
   respiro (`margin-top: -1.5rem`, também fixo). Como as duas medidas são
   fixas (não escalam com a fonte, que cresce por `vw` em telas largas), a
   relação 3rem > 1.5rem — 1.5rem de folga sempre sobrando antes de
   qualquer glifo — vale igual em 390/1280/1920px; a promessa entra
   avançando sobre o respiro vazio da nuvem, nunca sobre texto. Ela ainda
   domina: é a maior peça da seção, a única colorida, e a única cujo
   `z-index` a põe na frente — só que dominar deixou de ser sinônimo de
   apagar.

   `.cha-promessa` é o movimento "cai" (§4: "entra de cima, com peso"),
   único desta seção: cai de mais alto que o "surge" comum (-3.5rem contra
   os 12px de base) com uma easing que estica um pouco além do ponto final
   antes de assentar — o "peso" é a distância e o leve overshoot, não só a
   opacidade. Só `transform`/`opacity` animam (a régua do projeto); o
   `margin-top` que cria o respiro é ESTÁTICO, decidido antes de qualquer
   batida, nunca parte da transição. Cancela o "surge" de base, por isso
   precisa da mesma especificidade (duas classes) para vencer no CSS.

   Nenhuma cor no jargão nem em COMPLEXIDADE — são o lado sério da piada;
   toda a tinta vermelha do layout mora só na promessa. */
.sec-ruido { max-width: min(94vw, 36rem); }
@media (min-width: 900px) { .sec-ruido { max-width: min(90vw, 62rem); } }

.ruido-palco { display: grid; justify-items: center; width: 100%; }
.ruido-nuvem {
  display: grid; justify-items: center;
  gap: clamp(1rem, 3.4vmin, 1.8rem); width: 100%;
  /* respiro fixo (rem, não vw) — o único espaço que `.cha-promessa` pode
     invadir; ver o comentário acima. */
  padding-bottom: 3rem;
}
.cha-promessa { z-index: 2; }

.jargao { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em .9em; width: 100%; }

/* A rotação é decoração ESTÁTICA (o "espalhado" da nota) — cada
   `.jargao-item` não carrega `data-beat` próprio (só o `.jargao` que os
   envolve), então não compete com o "surge" de base: o grupo inteiro
   surge junto, cada palavra já nasce com sua inclinação. */
.jargao-item {
  font-family: var(--mono); font-weight: 400; color: var(--tinta-fraca); text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(.72rem, 3vw, 1rem);
  transform: rotate(var(--rot, 0deg));
}
@media (min-width: 900px) { .jargao-item { font-size: clamp(1rem, 1.4vw, 1.5rem); } }

.complexidade {
  margin: 0; font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 999px; padding: .6em 1.3em;
  background: var(--fundo);
  font-size: clamp(.95rem, 3.6vw, 1.4rem);
}
@media (min-width: 900px) { .complexidade { font-size: clamp(1.4rem, 2vw, 2.1rem); } }

.sec-ruido .cha-promessa {
  /* sobe só até a metade do respiro reservado em `.ruido-nuvem`
     (`padding-bottom: 3rem` ali, `-1.5rem` aqui — os dois em `rem`, nunca
     em `vw`, então a folga de 1.5rem antes de qualquer glifo vale igual
     em 390/1280/1920px, medido). */
  margin: -1.5rem 0 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--texto-claro);
  background: var(--acento); border-radius: .6rem; padding: .5em 1em;
  text-align: center; max-width: 22ch;
  font-size: clamp(1.3rem, 6vw, 2.2rem);
  opacity: 0; transform: translate3d(0, -3.5rem, 0) scale(1.04);
  transition: opacity .6s cubic-bezier(.34, 1.56, .64, 1), transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
@media (min-width: 900px) { .sec-ruido .cha-promessa { font-size: clamp(2.2rem, 4.2vw, 4.4rem); padding: .6em 1.2em; } }
.sec-ruido .cha-promessa.revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec-ruido .cha-promessa { transform: none; transition: opacity .22s var(--ease); }
}

/* ------------------------------------------------------------ sec-retrato

   Foto sangrando com texto por cima (seções 1 e 27 — abertura e fechamento).
   Ver o cabeçalho de js/layouts/retrato.js para o raciocínio completo do
   corte da foto; o resumo que importa aqui: `.retrato-foto` fixa
   `aspect-ratio` (não uma fração de grid, não `vw`) porque um número fixo
   corta a MESMA fatia da imagem em qualquer tela — 1280×720 e 1920×1080 (as
   duas larguras "de projetor" da spec) têm quase o mesmo formato 16:9 da
   foto original, então uma fração de grid cortaria pouco ou nada bem ali,
   revelando de novo o texto que já vem gravado na imagem.

   `.sec-retrato` zera o `padding`/fundo claro que `.sec` herda: a foto
   precisa tocar a borda, e o painel de texto é escuro por pedido do próprio
   autor para este slide ("fundo escuro, bastante espaço negativo") — não o
   branco do resto do deck. */
.sec-retrato { padding: 0; display: block; background: var(--tinta); }

.retrato-composicao {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  grid-template-areas: "foto" "texto";
}
@media (min-width: 900px) {
  .retrato-composicao {
    grid-template-columns: 1fr auto;
    grid-template-rows: 100%;
    grid-template-areas: "texto foto";
  }
}

.retrato-foto {
  grid-area: foto; position: relative; overflow: hidden; background: var(--tinta);
  /* empilhado (abaixo de 900px): largura 100%, a altura sai do
     aspect-ratio. Lado a lado (900px+): o oposto. O mesmo 0.85 serve aos
     dois porque nunca os dois lados — largura e altura — ficam fixos ao
     mesmo tempo que o aspect-ratio (ver js/layouts/retrato.js). */
  aspect-ratio: 0.85; width: 100%; height: auto;
}
@media (min-width: 900px) {
  .retrato-foto { width: auto; height: 100%; }
}
/* `.layer[data-kind="section"] img { display: none }` (topo deste arquivo)
   esconde o <img> de SLIDE que sobra na mesma camada quando ela passa a
   mostrar uma seção — não foi escrita pensando numa seção que desenha a
   própria foto por dentro. Quatro seletores (.layer, .sec-retrato,
   .retrato-foto, img) somam mais especificidade que dois (.layer,
   [data-kind]) e vencem sem depender de onde este bloco cai no arquivo. */
.layer .sec-retrato .retrato-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
}

.retrato-texto {
  grid-area: texto; align-self: center; justify-self: center;
  display: grid; justify-items: start; text-align: left;
  gap: clamp(.9rem, 2.6vmin, 1.6rem);
  width: 100%; max-width: 34rem; box-sizing: border-box;
  padding: clamp(1.6rem, 6vmin, 4rem) clamp(1.4rem, 6vw, 4rem);
}

.retrato-intro {
  margin: 0; max-width: 26ch; font-family: var(--ui); font-weight: 400;
  /* Tom só por peso/tamanho, não por cor: `--tinta-fraca` (o "apoio" do
     resto do deck) é escuro demais para o painel escuro daqui, e não há um
     token "claro fraco" na paleta — inventar um com color-mix() esbarra
     num limite real do próprio scripts/verify-mobile.mjs (o parser de cor
     do checker de contraste só entende `rgb()`/`rgba()`; um `color-mix()`
     que o Chromium serializa como `color(srgb ...)` vira luminância ~0 por
     engano). `--texto-claro` puro, sem mix, é verificável e correto. */
  color: var(--texto-claro);
  font-size: clamp(1.05rem, 3.4vw, 1.5rem); line-height: 1.35;
}

.retrato-enfase {
  margin: 0; max-width: 14ch; font-family: var(--display); font-weight: 800;
  color: var(--texto-claro); line-height: 1.05; letter-spacing: -.01em;
  font-size: clamp(2rem, 8vw, 4.2rem);
  padding-bottom: .3em; border-bottom: .12em solid var(--regua);
}
@media (min-width: 900px) { .retrato-enfase { font-size: clamp(2.2rem, 4.4vw, 4.6rem); } }

.retrato-alternativas {
  margin: 0; padding: 0; list-style: none; display: grid; gap: .5em;
  font-family: var(--ui); font-weight: 600; color: var(--texto-claro);
  font-size: clamp(.95rem, 2.8vw, 1.25rem);
}
.retrato-alternativas li { padding-block: .1em; }
@media (min-width: 900px) {
  .retrato-alternativas { grid-auto-flow: column; gap: 1.4em; }
  .retrato-alternativas li { padding-inline-start: 1.4em; border-left: 1px solid var(--linha); }
  .retrato-alternativas li:first-child { padding-inline-start: 0; border-left: 0; }
}

/* seção 27: substitui `.retrato-alternativas` no mesmo lugar do fluxo — a
   resposta que fecha a pergunta aberta na seção 1. Batida própria (§5: "2"),
   por isso NUNCA fica marcada `revelado` pelo `data-beat` de `.retrato-
   composicao` (que só cobre foto + pergunta, a 1ª batida). `efeito-acende`
   é a mesma linguagem de sec-numero/sec-escada: acende ao virar a batida
   atual; `destaque` (dado explícito de build-deck.py, nunca automático)
   mantém o vermelho depois — é a última palavra da palestra. */
.retrato-resposta {
  margin: 0; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--texto-claro);
  font-size: clamp(2.2rem, 9vw, 4.6rem);
}
.retrato-resposta.efeito-acende.atual { color: var(--acento); transform: scale(1.03); }
.retrato-resposta.destaque { color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  .retrato-resposta.efeito-acende.atual { transform: none; }
}

/* ---------------------------------------------------------- sec-avaliacao

   Estrelas, contagem e a afirmação (seção 23) — e a única seção do deck em
   que o dado não existe (§7 da spec). `.avaliacao-pendente` é
   deliberadamente um AVISO, não um herói: nada aqui usa a tipografia/peso
   de `.hero-valor` (sec-numero) — um "X,X" do tamanho de um número de
   verdade é fácil de confundir com dado pronto num relance de projetor, e a
   spec pede o oposto ("impossível projetar por engano sem perceber"). O
   formato final (`⭐ X,X / 5 · XXX avaliações`) some pequeno e monoespaçado,
   no mesmo registro de `.fonte` — rótulo de formato, não valor. */
.sec-avaliacao { gap: clamp(1.3rem, 4vmin, 2.4rem); max-width: min(94vw, 40rem); }
@media (min-width: 900px) { .sec-avaliacao { max-width: min(88vw, 54rem); } }

.avaliacao-topo {
  margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; color: var(--tinta);
  font-size: clamp(1.4rem, 5vw, 2.4rem);
}
@media (min-width: 900px) { .avaliacao-topo { font-size: clamp(1.7rem, 3vw, 2.7rem); } }

.avaliacao-pendente {
  width: 100%; box-sizing: border-box; display: grid; gap: .5em; justify-items: center;
  border: .16em dashed var(--acento); border-radius: 1rem;
  /* `--fundo-2` já é o token de "camada elevada: cartões, opções" — o
     mesmo papel que este aviso cumpre aqui. Nada de color-mix() para um
     tom vermelho-claro: além de fugir da paleta de propósito, o
     scripts/verify-mobile.mjs não entende o formato `color(srgb ...)` que
     o Chromium devolve para um color-mix() (lê como luminância ~0 e acusa
     contraste ruim que não existe de verdade). */
  background: var(--fundo-2);
  padding: clamp(1.1rem, 4vmin, 2rem) clamp(1rem, 5vw, 2.4rem);
}
.avaliacao-aviso {
  margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--acento);
  font-size: clamp(1.3rem, 5.4vw, 2.1rem);
}
.avaliacao-detalhe {
  margin: 0; max-width: 40ch; text-align: center; font-family: var(--ui); font-weight: 400;
  color: var(--tinta); font-size: clamp(.95rem, 2.8vw, 1.2rem);
}
.avaliacao-formato {
  margin: 0; font-family: var(--mono); color: var(--tinta-fraca);
  font-size: clamp(.72rem, 2vw, .9rem);
}

.avaliacao-afirmacao { display: grid; gap: .6em; justify-items: center; max-width: 46ch; }
.avaliacao-frase {
  margin: 0; text-align: center; font-family: var(--ui); font-weight: 600; color: var(--tinta);
  font-size: clamp(1.05rem, 3.4vw, 1.5rem); line-height: 1.35;
}
.sec-avaliacao .fonte {
  margin: 0; max-width: 60ch; text-align: center; font-family: var(--mono);
  font-size: clamp(.64rem, 1.4vw, .8rem); color: var(--tinta-fraca);
}

/* ------------------------------------------------------------ sec-capa

   Família escura do deck aHUS (js/layouts/capa.js): foto molecular sangrando
   a tela inteira, véu de contraste à esquerda, texto grande à esquerda,
   acento âmbar. A direção de arte deste deck (azul profundo + âmbar, decisão
   do autor em 27/09/2026) difere do sistema claro — por isso os tokens são
   locais à família, de propósito: nada daqui vaza para as famílias claras. */
.sec-capa {
  --capa-fundo: #030A16;
  --capa-tinta: #F2F6FF;
  --capa-tinta-2: #A9BEDD;
  --capa-ambar: #FFB054;
  --capa-ambar-2: #FF8F1F;
  --capa-autor: #CFBD93;
  padding: 0; display: block; position: relative; overflow: hidden;
  background: var(--capa-fundo); text-align: left;
}
/* `.layer[data-kind="section"] img` (topo deste arquivo) esconde todo <img>
   de seção — regra da era slide-imagem. Três classes somam mais
   especificidade que aquela dupla, mesmo truque documentado em sec-retrato. */
.layer .sec-capa .capa-fundo { display: block; }
.capa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* O véu é quem garante 4,5:1 para o texto, qualquer que seja a foto atrás —
   as imagens do deck já nascem com a esquerda vazia, mas contraste não se
   promete por convenção de prompt. */
.capa-veu { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 9, 20, .92), rgba(3, 9, 20, .68) 40%, rgba(3, 9, 20, .18) 62%, rgba(3, 9, 20, 0) 74%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(2, 5, 12, .6));
}
.capa-texto { position: absolute; left: 6vmin; right: 6vmin; top: 50%;
  transform: translateY(-50%); max-width: min(48vw, 46rem); color: var(--capa-tinta); }
/* Scrim local atrás do BLOCO de texto, além do véu geral: uma elipse escura
   de borda suave (não lê como caixa). Sem ela o contraste do texto depende
   do que a arte tem exatamente atrás de cada palavra — o feixe âmbar do
   close passa atrás de "PROTECTION." e derrubava a razão para ~1,1:1 em
   larguras específicas. Com o scrim, qualquer arte serve. */
/* O sangramento à DIREITA para exatamente na borda da seção (right: -6vmin
   devolve o próprio recuo de .capa-texto): conteúdo passando da borda direita
   engorda o scrollWidth mesmo sob overflow hidden, e o verify-mobile acusa
   rolagem fantasma — 45px, medidos. À esquerda pode sangrar à vontade. */
.capa-texto::before { content: ""; position: absolute; z-index: -1;
  top: -14%; bottom: -14%; left: -20%; right: -6vmin;
  background: radial-gradient(85% 95% at 32% 50%,
    rgba(3, 9, 20, .92), rgba(3, 9, 20, .6) 55%, rgba(3, 9, 20, 0) 78%); }
@media (max-width: 700px) {
  .capa-texto { max-width: none; }
  /* no celular o véu precisa cobrir mais, porque o texto avança sobre a foto */
  .capa-veu { background:
    linear-gradient(90deg, rgba(3, 9, 20, .92), rgba(3, 9, 20, .78) 55%, rgba(3, 9, 20, .5)),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(2, 5, 12, .6)); }
}
.capa-etiqueta { margin: 0 0 1rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; font-size: clamp(.66rem, .9vw, .9rem); color: var(--capa-ambar); }
.capa-risco { width: 5.2rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--capa-ambar-2), var(--capa-ambar));
  margin-bottom: clamp(1rem, 3vmin, 2rem); }
.capa-titulo { margin: 0; font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 5rem); line-height: 1.06; letter-spacing: -.01em;
  text-wrap: balance; }
.capa-titulo .capa-linha { display: block; }
/* Âmbar sólido, não gradiente com background-clip:text: o clip exige
   color:transparent, que o medidor de contraste (verify-mobile) lê como
   invisível — e com razão: contraste que a ferramenta não consegue provar
   não vale como contraste neste projeto. O sólido dá ~9:1 sobre o véu. */
.capa-titulo b { font-weight: 800; color: var(--capa-ambar); }
.capa-apoio { margin: clamp(.8rem, 2.5vmin, 1.5rem) 0 0; font-weight: 400;
  color: var(--capa-tinta-2); font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.45; max-width: 40ch; }
.capa-autor { margin: clamp(1.4rem, 4vmin, 2.6rem) 0 0; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(.68rem, .95vw, .95rem); color: var(--capa-autor); }

/* Vídeo de fundo em loop da capa: mesma caixa da imagem, por cima dela; a
   imagem vira poster/fallback. A regra que esconde <img> de seção não pega
   <video>, então aqui não precisa do truque de especificidade. */
.capa-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .capa-video { display: none; } }

/* Cascata da revelação: todo o conteúdo da capa chega numa batida só (um
   clique por slide — decisão do autor, 27/09), e a sequência elegante vem
   destes atrasos, não de batidas separadas. O atraso vive só no `.revelado`
   para a saída (voltar/trocar de seção) ser imediata. */
.sec-capa [data-beat] { transition-duration: .7s; }
.sec-capa .capa-risco.revelado { transition-delay: .05s; }
.sec-capa .capa-linha.revelado:nth-of-type(1) { transition-delay: .18s; }
.sec-capa .capa-linha.revelado:nth-of-type(2) { transition-delay: .55s; }
.sec-capa .capa-apoio.revelado { transition-delay: .95s; }
.sec-capa .capa-autor.revelado { transition-delay: 1.2s; }

/* Em reduced-motion a cascata não existe: revelação nos 220ms do sistema,
   sem atraso — o atraso de 1s+ é exatamente o movimento que a pessoa pediu
   para não ter (e o verify-secoes reprova, com razão). Os seletores repetem
   um a um os da cascata porque :nth-of-type conta como classe: um zerador
   mais genérico perde na especificidade e o atraso vaza. */
@media (prefers-reduced-motion: reduce) {
  .sec-capa [data-beat],
  .sec-capa .capa-risco.revelado,
  .sec-capa .capa-linha.revelado:nth-of-type(1),
  .sec-capa .capa-linha.revelado:nth-of-type(2),
  .sec-capa .capa-apoio.revelado,
  .sec-capa .capa-autor.revelado { transition-delay: 0s; transition-duration: 220ms; }
}