:root { --fundo: #fbfbf9; --tinta: #1c2433; --suave: #5b6476; --acento: #1a5fb4; --linha: #d9dde5; --barra: #1c2433; }
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; background: #2a2f3a; }
body { margin: 0; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--tinta); }
.barra { position: fixed; top: 0; right: 0; z-index: 2; display: flex; gap: .8rem; align-items: center;
  padding: .35rem .8rem; background: rgba(28, 36, 51, .88); color: #fff; font-size: .8rem; border-bottom-left-radius: .5rem; }
.barra a { color: #fff; font-weight: 600; }
.slide { height: 100vh; height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
.quadro { container-type: inline-size; position: relative; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9;
  background: var(--fundo); display: flex; flex-direction: column; padding: 4.5cqw 5cqw 4cqw; overflow: hidden; }
h1 { margin: 0 0 2.2cqw; font-size: 3.6cqw; line-height: 1.15; color: var(--tinta); border-bottom: .3cqw solid var(--acento);
  padding-bottom: 1cqw; }
.capa h1 { border: 0; font-size: 3cqw; color: var(--acento); margin-bottom: 1.5cqw; }
.capa h2 { margin: 0 0 2cqw; font-size: 5.6cqw; line-height: 1.1; }
.capa .tema { font-size: 3cqw; color: var(--suave); }
.capa .quadro, .pergunta .quadro { justify-content: center; }
.capa .corpo, .pergunta .corpo { flex: 0 0 auto; justify-content: center; }
.pergunta .corpo p { font-size: 4.8cqw; line-height: 1.25; font-weight: 600; text-align: center; }
.corpo { flex: 1; display: flex; gap: 3cqw; min-height: 0; flex-direction: column; }
.corpo.com-figura { flex-direction: row; align-items: center; }
.figuras { flex: 1.4; display: flex; flex-direction: column; gap: 1.5cqw; min-height: 0; height: 100%; justify-content: center; }
.figuras figure { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.figuras img { max-width: 100%; max-height: 100%; object-fit: contain; min-height: 0; }
.figuras figcaption { font-size: 1.1cqw; color: var(--suave); margin-top: .4cqw; }
.texto { flex: 1; font-size: 2.75cqw; line-height: 1.35; }
.corpo:not(.com-figura) .texto { font-size: 3.2cqw; }
.texto ul, .texto ol { margin: 0; padding-left: 1.3em; }
.texto li { margin: 0 0 .55em; }
.texto p { margin: 0 0 .7em; }
.texto strong { color: var(--acento); }
.texto a { color: var(--acento); word-break: break-all; }
svg.eq { fill: currentColor; overflow: visible; }
.eqlinha { margin: 0 0 .5em; padding-left: 1.3em; font-size: 1.1em; }
.eqlinha svg.eq { vertical-align: middle; }
.tempos { font-size: 1.15em; display: grid; grid-template-columns: repeat(3, auto); gap: .5em 2.2em; justify-content: start;
  align-items: center; margin: .4em 0 .8em; }
.tempos .rotulo { font-weight: 700; color: var(--suave); font-size: .8em; border-bottom: .08em solid var(--linha); }
.tempos .celula svg.eq { vertical-align: middle; }
.com-figura .tempos { font-size: 1em; gap: .35em 1.2em; }
.corpo.com-tempos { flex-direction: column; align-items: stretch; gap: 1.2cqw; }
.com-tempos .topo { flex: 1 1 0; min-height: 0; display: flex; gap: 3cqw; align-items: center; }
.com-tempos .topo .figuras { flex: 0 1 auto; max-width: 50%; }
.com-tempos .topo .texto { flex: 1 1 0; }
.com-tempos > .texto { flex: 0 0 auto; }
.com-figura .eqlinha { font-size: 1em; margin-bottom: .35em; }
.qr { display: flex; gap: 3cqw; align-items: center; }
.qr img { width: 24cqw; height: 24cqw; image-rendering: pixelated; }
.combo { flex: 1; display: flex; gap: 3cqw; align-items: flex-start; justify-content: center; min-height: 0; }
.combo .item { flex: 1 1 0; max-width: 30cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.combo p { margin: 0 0 .8cqw; font-size: 2.1cqw; line-height: 1.3; }
.combo .nome { margin-bottom: 1.2cqw; font-size: 2.6cqw; line-height: 1.15; font-weight: 700; color: var(--acento); }
.combo img { width: 15cqw; height: 15cqw; image-rendering: pixelated; margin-bottom: 1.2cqw; }
.combo .endereco { font-size: 1.3cqw; }
.combo a { color: var(--acento); word-break: break-all; }
/* o combo tem de caber com folga: conteúdo rente à altura do corpo o Chrome empurra para OUTRA página do PDF (medido em 10/10/2026) */
/* ARENA (22/10/2026): botão discreto no slide final; criada a arena, o script põe aqui o código e o QR grandes */
.quadro .arena-acao { position: absolute; right: 5cqw; top: 4.2cqw; margin: 0; font-size: 1.6cqw; }
.quadro .arena-acao a.abrir-arena { display: inline-block; padding: .6cqw 1.6cqw; border-radius: .8cqw; background: var(--acento); color: #fff;
  font-weight: 700; font-size: 1.6cqw; text-decoration: none; }
.quadro .arena-painel { position: absolute; inset: 9cqw 5cqw 5cqw; z-index: 3; background: var(--fundo); display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: 1cqw 4cqw; align-items: center; padding: 2cqw;
  border: .3cqw solid var(--acento); border-radius: 1.2cqw; }
.quadro .arena-painel svg { grid-row: 1 / 4; width: 30cqw; height: 30cqw; }
.quadro .arena-painel p.arena-codigo { margin: 0; font-size: 12cqw; line-height: 1; font-weight: 800; letter-spacing: .12em; color: var(--acento); }
.quadro .arena-painel p.arena-dica { margin: 0; font-size: 2.4cqw; color: var(--suave); }
.quadro .arena-painel a.arena-telao { align-self: start; justify-self: start; font-size: 2cqw; color: var(--acento); font-weight: 700; }
/* revelação em etapas (22/10/2026): o ainda não revelado ocupa o espaço, invisível — nada pula entre as telas */
[data-oculto] { visibility: hidden; }
/* apresentação em sala (22/10/2026): com o script único o <html> ganha a classe "js" e a página vira UMA tela por vez,
   trocada no lugar (sem rolar) com esmaecimento de 200 ms; sem script nada disto vale e a rolagem que encaixa segue */
.so-js, .contador { display: none; }
html.js .sem-js { display: none; }
html.js .so-js { display: inline; }
html.js .barra button { font: inherit; font-size: .8rem; padding: .15rem .55rem; border: 1px solid rgba(255, 255, 255, .6);
  border-radius: .35rem; background: transparent; color: #fff; cursor: pointer; }
html.js { scroll-snap-type: none; overflow: hidden; height: 100%; }
html.js body { height: 100%; overflow: hidden; }
html.js .slide { display: none; }
html.js .slide.atual { display: flex; }
html.js .contador { display: block; position: fixed; left: .8rem; bottom: .6rem; z-index: 2; font-size: .8rem;
  color: rgba(255, 255, 255, .75); }
html.js:fullscreen .barra, html.js:fullscreen .contador { display: none; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
html.js .slide.entra .quadro { animation: aparece .2s ease-out; }
html.js .revelado { animation: aparece .2s ease-out; }
@media (prefers-reduced-motion: reduce) { html.js .slide.entra .quadro, html.js .revelado { animation: none; } }
.rodape { position: absolute; left: 5cqw; right: 5cqw; bottom: 1.6cqw; display: flex; justify-content: space-between;
  font-size: 1.15cqw; color: var(--suave); }
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  html { background: none; scroll-snap-type: none; }
  .barra, .contador, .arena-painel { display: none; }
  html.js, html.js body { overflow: visible; height: auto; }
  html.js .slide { display: flex; }
  .slide.passo, html.js .slide.passo { display: none; }
  .slide { height: 7.5in; width: 13.333in; break-after: page; page-break-after: always; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .quadro { width: 13.333in; height: 7.5in; }
}
#q1, svg[id^="q1-t"] { vertical-align: -0.204em; }
#q2, svg[id^="q2-t"] { vertical-align: -0.249em; }
#q3, svg[id^="q3-t"] { vertical-align: -0.249em; }
#q4, svg[id^="q4-t"] { vertical-align: -0.249em; }
#q10, svg[id^="q10-t"] { vertical-align: -0.249em; }
#q27, svg[id^="q27-t"] { vertical-align: -0.022em; }
#q38, svg[id^="q38-t"] { vertical-align: -0.011em; }
#q42, svg[id^="q42-t"] { vertical-align: -0.022em; }
#q44, svg[id^="q44-t"] { vertical-align: -0.163em; }
#q45, svg[id^="q45-t"] { vertical-align: -0.344em; }
#q49, svg[id^="q49-t"] { vertical-align: -0.204em; }
#q50, svg[id^="q50-t"] { vertical-align: -0.011em; }
#q51, svg[id^="q51-t"] { vertical-align: -0.163em; }
#q52, svg[id^="q52-t"] { vertical-align: -0.204em; }
#q53, svg[id^="q53-t"] { vertical-align: -0.344em; }
#q54, svg[id^="q54-t"] { vertical-align: -0.204em; }
#q55, svg[id^="q55-t"] { vertical-align: -0.022em; }
#q56, svg[id^="q56-t"] { vertical-align: -0.204em; }
#q57, svg[id^="q57-t"] { vertical-align: -0.486em; }