/* ============================================================================
   CENAS — aula "Comunicação eficiente, SBAR e IA generativa" (HUOL-UFRN).
   ESQUELETO (14/11/2026): este arquivo segura o que as cenas-placeholder
   precisam para existir no palco — capa, palestrante, divisor de módulo,
   placeholder rotulado, cartão de QR — e a faixa de provas (componente do
   motor, js/provas.js). O conteúdo de cada cena chega depois, módulo a
   módulo, e cada cena nova ganha aqui o seu bloco, na ordem do deck.

   Convenções herdadas da sepse (CONTRATO §3):
   · seletor de cena por id (#S01…#S40); dentro dele, classes semânticas;
   · estado de batida por [data-beat="n"], sem JS sempre que der;
   · nada de px: o palco define 1rem = 16px a 1080p (stage.css).

   Outros CSS de componente:
     css/cartao-artigo.css   o cartão de artigo (S10–S14, S27–S29)
     css/sepse-m2.css        o CSS das cenas reaproveitadas da sepse (S20–S25)
   ========================================================================== */

/* ═══ PLACEHOLDER ROTULADO ════════════════════════════════════════════════
   Toda cena ainda sem conteúdo mostra: o rótulo PLACEHOLDER com o componente
   previsto, o título da cena e uma linha do que ela vai dizer. A moldura
   tracejada é deliberada: no ensaio, ninguém confunde esqueleto com cena
   pronta. O objetivo completo mora nas notas (<details class="notes">). */
.ph {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 9rem; bottom: var(--ref-band);
  display: grid; align-content: center; justify-items: start; gap: var(--sp-4);
  padding: var(--sp-6);
  border: 2px dashed var(--stroke-hi); border-radius: var(--r-xl);
}
.ph__rotulo {
  font: 600 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--warn);
}
.ph__titulo { max-width: 90rem }
.ph__previsto { max-width: 90rem; color: var(--txt-mid) }

/* ═══ DIVISOR DE MÓDULO (S05, S19, S26) ═══════════════════════════════════ */
.divisor {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: start; gap: var(--sp-4);
  padding: 0 var(--margin-h);
}
.divisor__n {
  font: 700 var(--fs-h2)/1 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ai-glow);
}
.divisor__frase { color: var(--txt-mid); max-width: 80rem }

/* ═══ S01 · CAPA ══════════════════════════════════════════════════════════ */
#S01 .capa {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: var(--sp-5);
  padding: 0 var(--margin-h);
}
#S01 .capa__titulo { max-width: 100rem; text-wrap: balance }
#S01 .capa__quem { display: grid; gap: var(--sp-2) }
#S01 .capa__onde { color: var(--txt-mid) }
/* Logo HUOL (14/11/2026): placa branca porque o logo é navy sobre branco. 15rem =
   240px = altura nativa do recorte (assets/img/logo-huol.png, 378×240) — sem ampliar. */
#S01 .capa__marca, #S40 .fim__marca {
  justify-self: start; line-height: 0;
  background: #fff; border-radius: var(--r-xl); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--stroke);
}
#S01 .capa__marca img { display: block; height: 15rem; width: auto }
#S40 .fim__marca img { display: block; height: 10rem; width: auto }

/* ═══ S02 · PALESTRANTE ═══════════════════════════════════════════════════ */
#S02 .palestrante {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 9rem; bottom: var(--ref-band);
  display: grid; grid-template-columns: 28rem 1fr; gap: var(--sp-6); align-items: center;
}
#S02 .palestrante__foto {
  width: 28rem; height: 28rem; object-fit: cover;
  border-radius: var(--r-xl); border: 1px solid var(--stroke-hi);
}
#S02 .palestrante__texto { display: grid; gap: var(--sp-3) }

/* ═══ S40 · QR E OBRIGADO ═════════════════════════════════════════════════
   O QR é GERADO por 07-scripts/gerar-qr.mjs (marcador qr:inicio/qr:fim) e
   verificado de volta antes de gravar. Branco puro aqui e só aqui: QR nunca
   sobre fundo escuro. 24rem = 384px: é a CAIXA_S40 do gerador — mudou aqui,
   muda lá, senão o relatório de px por módulo mente. */
#S40 .fim {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 9rem; bottom: var(--ref-band);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center;
}
#S40 .fim__texto { display: grid; gap: var(--sp-3) }
.card-qr {
  display: grid; gap: var(--sp-2); justify-items: center;
  padding: var(--sp-3); border-radius: var(--r-xl);
  background: #fff; color: var(--bg-900);
}
.card-qr__code { display: block; width: 24rem; height: 24rem }
.card-qr__rotulo {
  font: 700 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: #8A4B00;
}

/* ═══ MODO DE LEITURA (celular, < 900px) ══════════════════════════════════
   O palco vira rolagem (stage.css §mobile). Os blocos absolutos acima entram
   no fluxo, senão empilham uns sobre os outros. */
@media (max-width: 900px) {
  .ph, .divisor, #S01 .capa, #S02 .palestrante, #S40 .fim {
    position: static; display: grid; padding: var(--sp-3) 0;
  }
  .ph { padding: var(--sp-3); }
  #S02 .palestrante, #S40 .fim { grid-template-columns: 1fr }
  #S02 .palestrante__foto { width: 12rem; height: 12rem }
  .card-qr__code { width: 16rem; height: 16rem }
}

/* ═══ FAIXA DE PROVAS — componente do motor (js/provas.js), copiado da sepse
   (scenes.css 393–493 e 509–510; as regras próprias da S18 ficaram lá). ══ */
/* ═══ A FAIXA DE PROVAS ═══════════════════════════════════════════════════
   A citação de rodapé virada em card clicável (12/08/2026). Ver js/provas.js
   para o contrato de declaração e o porquê do fallback.

   Por que não reaproveita .card-art: aquele é `position: absolute` e vive de
   --mx/--my/--gx/--gy, que são as coordenadas da mesa da S05B. Aqui os cards
   estão em FLUXO, dividindo a largura em partes iguais. A tipografia é a
   mesma, a geometria não podia ser.

   A hierarquia é invertida em relação à mesa, e de propósito: no telão, a
   sete metros, o que se lê é "Wong et al., JAMA Intern Med 2021" — o título
   do artigo é para quem está com o deck na mão. Por isso a autoria vem em
   cima, em 600, e o título embaixo, em --txt-low. */
/* 9rem, e não as 7rem do primeiro desenho: com SEIS cards a coluna cai para
   250px e "Krizhevsky et al., NIPS 2012" não cabe numa linha só. Ver o
   comentário de .prova__a — cortar a autoria com reticências seria cortar
   exatamente a parte que se lê de longe. */
/* A altura da faixa é uma variável da CENA, não da faixa: a nota metodológica
   é IRMÃ da faixa (não filha — ela precisa ficar por cima, e a faixa é um
   flex de cards), então ela precisa saber onde a faixa termina para se
   ancorar. Uma cena que aperta a faixa (ver #S18) muda os dois de uma vez. */
.scene { --faixa-h: 9rem; --faixa-b: var(--sp-3) }

.provas {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  bottom: var(--faixa-b); height: var(--faixa-h);
  /* gap de 8px e não 16: com seis cards, os 40px que sobram são a diferença
     entre "Weizenbaum, Commun ACM 1966" inteiro e "Commun ACM…". */
  display: flex; gap: var(--sp-1); align-items: stretch; z-index: 6;
  /* Centralizado por causa das cenas de UMA referência só (S13, S19, S28,
     S26): com `flex: 1` puro, um card sozinho esticaria por 1728px e a
     citação viraria um cartaz. O max-width do .prova segura, e o center
     resolve o que sobra. Com cinco ou seis cards nada disso tem efeito. */
  justify-content: center;
}
/* Enquanto os cards não existirem, o que está em tela é a citação escrita —
   e ela é o mesmo texto que sempre esteve ali. */
.provas[data-pronto="1"] > .scene__ref { display: none }
.provas > .scene__ref { position: static; left: auto; right: auto; bottom: auto }

.prova {
  flex: 1 1 0; min-width: 0; max-width: 26rem;
  display: flex; flex-direction: column; gap: .125rem;
  padding: var(--sp-1) .75rem;
  border: 1px solid var(--stroke);
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  background: var(--bg-700);
  text-decoration: none; overflow: hidden;
  transition: border-color var(--dur-fast), background var(--dur-fast),
              transform var(--dur-fast) var(--ease-out-expo);
}
/* Mesmo código de cor da mesa: filete azul = PDF nosso, hospedado. */
.prova[data-destino="pdf"] { border-left-color: var(--primary-soft) }
.prova:not([href]) { opacity: .62 }
/* A autoria QUEBRA, não corta. Com `nowrap` + ellipsis a faixa da S11 virava
   "Wong et al., JAM…", "Shashikumar et a…", "Bhargava et al., N…" — e a
   autoria é justamente o que a plateia lê a sete metros; o título é para
   quem está com o deck na mão. Duas linhas para cada um. */
.prova__a {
  font: 600 var(--fs-ref)/1.15 var(--font-body); color: var(--txt-high);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.prova__t {
  font: 400 var(--fs-ref)/1.15 var(--font-body); color: var(--txt-low);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
a.prova:hover {
  border-color: var(--primary-soft); background: var(--bg-600);
  transform: translateY(-.25rem);
}

/* Faixa presa a uma batida: a S11 tem duas, e elas trocam com a ênfase da
   cena. Só opacidade e pointer-events — trocar o conteúdo por JS faria o
   navegador remontar seis cards no meio de uma transição.

   O estado BASE é oculto, e a regra condicional é a que acende. Escrito ao
   contrário — base visível, condicional apagando — a faixa da batida errada
   nascia em opacity 1 e levava os 600 ms da transição para sumir: meio
   segundo, na entrada da cena, com duas faixas de citação empilhadas no
   mesmo lugar. Foi o `verifica-rodape.mjs` que viu, e ele estava certo. */
.provas[data-em-beat] { opacity: 0; pointer-events: none; transition: opacity var(--dur-base) }
.scene[data-beat="0"] .provas[data-em-beat="0"],
.scene[data-beat="1"] .provas[data-em-beat="1"] { opacity: 1; pointer-events: auto }

/* A NOTA METODOLÓGICA, logo acima da faixa. Existe porque em cinco cenas
   (S18, S19, S19B, S28, S29) o rodapé nunca foi só citação: ele carrega a ressalva
   que sustenta o número contra a pergunta difícil — "dados ilustrativos",
   "a soma dos tempos de disfunção e ATB", as simulações de Monte Carlo, os
   aOR de dano do SCREEN. Isso não é fonte, é defesa: não pode virar tooltip
   dentro de um card nem migrar para as notas do palestrante. Fica em tela,
   por cima da faixa, e a cena reserva --provas-band-nota em vez de
   --provas-band. */
.provas__nota {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  bottom: calc(var(--faixa-h) + var(--faixa-b) + var(--sp-1));
  color: var(--txt-low); z-index: 6;
}

:root[data-motion="reduced"] .prova,
:root[data-motion="reduced"] .provas { transition: none }