/* Livro Verde · guia de cultura DZ
   Identidade herdada do Guia de CuidaDZ (cores, fontes, regra do Gyst, a
   alternância verde / creme / preto por seção). Diagramação suíça aprovada na
   prancha 1 (-pranchas/grid-v1.html): grid de 12 colunas, ritmo de 8px,
   CINCO tamanhos de texto e nada fora deles, metadados nos cantos, legendas
   de figura e numeração de livro. */

/* ── FONTES ─────────────────────────────────────────────────────
   Helvetica Now Text e Gyst: licenças comerciais, uso interno DZ. */
@font-face { font-family:'HNText'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/helvetica-now-text/HelveticaNowText-Regular.woff2') format('woff2'),
      url('fonts/helvetica-now-text/HelveticaNowText-Regular.woff') format('woff'); }
@font-face { font-family:'HNText'; font-weight:500; font-style:normal; font-display:swap;
  src:url('fonts/helvetica-now-text/HelveticaNowText-Medium.woff2') format('woff2'),
      url('fonts/helvetica-now-text/HelveticaNowText-Medium.woff') format('woff'); }
@font-face { font-family:'HNText'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/helvetica-now-text/HelveticaNowText-Bold.woff2') format('woff2'),
      url('fonts/helvetica-now-text/HelveticaNowText-Bold.woff') format('woff'); }
@font-face { font-family:'Gyst'; font-weight:500; font-style:italic; font-display:swap;
  src:url('fonts/gyst/Gyst-MediumItalic.otf') format('opentype'); }

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --green:#0A3D26; --green-mid:#1B7434; --cream:#EDE8D5; --black:#111111;
  --lime:#7FD49B;           /* acento sobre verde: mais claro que o corpo, nunca menos */
  --leaf:#3FA35C;           /* acento sobre preto */
  --hd:70px;                /* barra do topo: 20 + 30 (logo) + 20 */
  --chrome:20px;            /* recuo dos elementos de borda (barra) */
  /* grid: 12 colunas, calha 24, margem 5vw; ritmo de 8px */
  --m:max(20px,5vw); --g:24px; --u:8px;
  /* ESCALA · cinco tamanhos, contraste extremo. T1 também limitado pela
     altura: em 1366x768 só a largura estourava a tela. */
  --t1:clamp(40px,min(12vw,19vh),220px);  /* piso baixo: no celular manda os 12vw, e "consistência" cabe */
  --t2:clamp(30px,4.8vw,80px);
  --t3:clamp(19px,1.75vw,28px);
  --t4:clamp(16px,1.2vw,18px);
  --t5:11px;
  --fn:'HNText','Helvetica Neue',Helvetica,Arial,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--green-mid) var(--black);-webkit-text-size-adjust:100%}
body{font-family:var(--fn);font-weight:400;background:var(--green);color:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;accent-color:var(--green-mid)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--green-mid);color:var(--cream)}
.cv-cream ::selection{background:var(--green);color:var(--cream)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── OS CINCO TAMANHOS ───────────────────────────────────────── */
.t1{font-size:var(--t1);font-weight:500;line-height:.86;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.t2{font-size:var(--t2);font-weight:500;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.t3{font-size:var(--t3);font-weight:500;line-height:1.2;letter-spacing:-.012em;text-wrap:pretty}
.t4{font-size:var(--t4);font-weight:400;line-height:1.55;text-wrap:pretty}
.t5{font-size:var(--t5);font-weight:700;line-height:1.35;letter-spacing:.12em;text-transform:uppercase}
.up{text-transform:uppercase;letter-spacing:-.01em;line-height:1.08}
.t4.up{letter-spacing:0;line-height:1.3;font-weight:500}
b,strong{font-weight:700}
/* Gyst: uma letra minúscula por título. */
.g{font-family:'Gyst',serif;font-style:italic;font-weight:500;font-size:1.375em;line-height:0;text-transform:none}
.dim{opacity:.62}
/* palavra com letra em Gyst nunca quebra no meio (a divisão em linhas da animação cortava "N / orteadores") */
.nw{white-space:nowrap}
.accent{color:var(--green-mid)}
.cv-green .accent{color:var(--lime)}
.cv-black .accent{color:var(--leaf)}
.fio{height:1px;background:currentColor;opacity:.3}
a.lk{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;font-weight:500;transition:opacity .18s}

/* ── SEÇÃO + GRID ───────────────────────────────────────────────
   Cada filho do .g12 escolhe as colunas por --c (e --cm no celular). */
.sec{position:relative;padding:calc(var(--hd) + var(--u) * 12) var(--m) calc(var(--u) * 16)}
.tela{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.cv-green{background:var(--green);color:var(--cream)}
.cv-cream{background:var(--cream);color:var(--green)}
.cv-black{background:var(--black);color:var(--cream)}
.g12{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  align-items:start;width:100%}
.g12 > *{grid-column:var(--c,1 / -1)}
/* respiro vertical, sempre múltiplo de 8 */
.v1{margin-top:calc(var(--u) * 1)}
.v2{margin-top:calc(var(--u) * 3)}
.v3{margin-top:calc(var(--u) * 6)}
.v4{margin-top:calc(var(--u) * 12)}
.v5{margin-top:calc(var(--u) * 16)}
.dir{text-align:right}
/* metadados nos cantos: capítulo à esquerda, seção à direita */
.meta{position:absolute;top:calc(var(--hd) + var(--u) * 4);left:var(--m);right:var(--m);z-index:2;
  display:flex;justify-content:space-between;gap:var(--g);pointer-events:none}
.meta > *{pointer-events:auto}

/* ── TOPO · índice fixo ─────────────────────────────────────────
   A barra assume a cor da seção que está embaixo dela. */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:var(--g);
  padding:0 var(--chrome);border-bottom:1px solid currentColor;
  background:var(--green);color:var(--cream);transition:background .45s ease,color .45s ease}
.topbar.t-cream{background:var(--cream);color:var(--green)}
.topbar.t-black{background:var(--black);color:var(--cream)}
.topbar.t-green{background:var(--green);color:var(--cream)}
/* na capa a barra é vazada: o filme passa por baixo */
.topbar.t-capa{background:transparent;color:var(--green)}
.topo-titulo{white-space:nowrap}
.indice{display:flex;gap:clamp(14px,2.4vw,32px);overflow-x:auto;scrollbar-width:none;margin-inline:auto 0}
.indice::-webkit-scrollbar{display:none}
.indice a{white-space:nowrap;opacity:.55;padding:4px 0;border-bottom:1.5px solid transparent;
  transition:opacity .2s,border-color .2s}
.indice .curto{display:none}
.indice a[aria-current="true"]{opacity:1;border-bottom-color:currentColor}
/* Logo oficial, nunca desenhado: o SVG já traz o DZ vazado. */
.marca{width:30px;height:30px;flex:none;background:url('logo/dz-quadrado-offwhite.svg') center/contain no-repeat}
:is(.t-cream,.t-capa) .marca{background-image:url('logo/dz-quadrado-verde.svg')}
/* Progresso de leitura: fio que cresce com a rolagem, nativo, no compositor. */
@supports (animation-timeline: scroll()){
  .topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:currentColor;transform-origin:left;transform:scaleX(0);
    animation:progresso linear both;animation-timeline:scroll(root)}
  @keyframes progresso{to{transform:scaleX(1)}}
}

/* ── CAPA · o filme do livro ────────────────────────────────────
   Sem movimento: o último quadro parado, perguntas à esquerda, parágrafo à
   direita. Com movimento (html.mo): o filme cobre a tela, as perguntas
   aparecem divididas em volta do livro e o parágrafo entra no fim. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* O fundo é a cor das bordas do filme: no celular ele é uma faixa no meio
   (de ~27% a ~65% da altura) e o JS troca --capa-topo/--capa-pe ao longo da
   rolagem, para a faixa se fundir. Os padrões são o último quadro. */
.capa{padding:0;min-height:100svh;overflow:clip;color:var(--green);
  background:linear-gradient(180deg,var(--capa-topo,#F0E3D0) 27%,var(--capa-pe,#E9D9C6) 65%)}
.capa-foto,.capa-filme{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.capa-filme,.capa-q{display:none}
.capa-texto{position:relative;z-index:1;min-height:100svh;align-items:center;
  padding:calc(var(--hd) + var(--u) * 6) var(--m) calc(var(--u) * 6)}
.capa-perguntas{--c:1 / 5;--cm:1 / -1;display:flex;flex-direction:column;gap:calc(var(--u) * 1.5)}
.capa-par{--c:10 / 13;--cm:1 / -1}
.capa-par p + p{margin-top:1.1em}
/* As perguntas do filme: tamanho das pranchas do Marcelo (30/09), entre T2 e
   T1. É o único tamanho fora da escala de cinco, e só existe aqui. */
/* O tamanho sai do espaço livre ao lado do livro, não da largura da tela:
   o filme cobre a tela, então em 16:10 corta as laterais e o livro cresce.
   max(100vw, 177.78svh) é a largura do filme na tela; o livro ocupa ~31%
   dela; a palavra mais longa ("ACONTECER?") mede ~6,6em. Nas pranchas a
   primeira pergunta é ~1,3× maior que as outras duas (105 e 83px em 1920). */
.hq{position:absolute;font-weight:500;line-height:.92;
  --hq:clamp(24px,calc(((100vw - .31 * max(100vw, 177.78svh)) / 2 - var(--m) - 40px) / 6.6),96px);
  font-size:var(--hq);
  letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.hq.q1{font-size:calc(var(--hq) * 1.3)}
.hq.e{left:var(--m)}
.hq.d{right:var(--m);text-align:right}
.hq.qm{top:50%;transform:translateY(-50%)}
.hq.qa{top:42%;transform:translateY(-50%)}
.hq.qb{top:60%;transform:translateY(-50%)}

/* ── FOTOS ──────────────────────────────────────────────────── */
.foto{position:relative}
.foto > img{width:100%}
.foto figcaption{margin-top:calc(var(--u) * 1.5)}
.desce{margin-top:calc(var(--u) * 28)} /* foto deslocada para baixo na diagonal do grid */
/* Foto sangrada: a seção inteira; o texto fica à esquerda, protegido por um
   gradiente da cor da própria seção. */
.sangria{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.sangria img{width:100%;height:100%;object-fit:cover}
.sangria::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(92deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.66) 42%,rgba(17,17,17,.22) 100%)}
.cv-green .sangria::after{
  background:linear-gradient(92deg,rgba(10,61,38,.94) 0%,rgba(10,61,38,.72) 42%,rgba(10,61,38,.28) 100%)}
.sangria figcaption{position:absolute;z-index:1;right:var(--m);bottom:calc(var(--u) * 4)}
.sobre-foto{position:relative;z-index:1}

/* ── LISTAS EM ÍNDICE · número | título (4 col) | vazio | texto ──
   O mesmo desenho em Como trabalhamos, O que fazemos e Crenças. */
.indice-l{border-top:1px solid rgba(237,232,213,.28)}
.cv-cream .indice-l{border-top-color:rgba(10,61,38,.25)}
.indice-l > li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  padding:calc(var(--u) * 3) 0 calc(var(--u) * 4);border-bottom:1px solid rgba(237,232,213,.28)}
.cv-cream .indice-l > li{border-bottom-color:rgba(10,61,38,.25)}
.indice-l .n{grid-column:1 / 2;padding-top:.5em}
.indice-l .tt{grid-column:2 / 6}
.indice-l .tx{grid-column:7 / 12}

/* ── A FRASE ────────────────────────────────────────────────── */
.frase{max-width:24ch}

/* ── DZ É / NÃO É ───────────────────────────────────────────────
   Duas tabelas lado a lado, cabeçalho verde (é) e preto (não é), nove linhas
   cada. Sem JS já são o conteúdo; com o jogo, as linhas esperam as palavras. */
.e-nao{row-gap:calc(var(--u) * 4)}
.tabela-cab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u);
  padding:calc(var(--u) * 1.5) calc(var(--u) * 2);color:var(--cream)}
.tabela.e .tabela-cab{background:var(--green)}
.tabela.nao .tabela-cab{background:var(--black)}
.palavras li{display:flex;align-items:center;min-height:calc(var(--u) * 5);
  padding:calc(var(--u) * .75) calc(var(--u) * 2);border-bottom:1px solid rgba(10,61,38,.22)}
.palavras.nao li{color:rgba(10,61,38,.6);text-decoration:line-through;
  text-decoration-thickness:1px;text-decoration-color:rgba(10,61,38,.55)}
.contagem{font-size:var(--t5);font-weight:700;letter-spacing:.12em;opacity:.7}
.palavras li > span{display:inline-block} /* o voo do jogo anima o texto */

/* ── DQRNF · o cartaz (dqrnf.svg) ───────────────────────────────
   Frase centrada em T1 (Medium, como no arquivo), assinatura oficial e o
   primeiro parágrafo em T5 embaixo, deslocados como no arquivo. */
.cartaz{min-height:calc(100svh - var(--hd) - var(--u) * 28);display:flex;flex-direction:column;justify-content:center}
.cartaz-frase{text-align:center;line-height:1.02}
.cartaz-frase > span{display:block}
.cartaz-pe{margin-top:calc(var(--u) * 8);align-items:center;row-gap:calc(var(--u) * 3)}
.cartaz-frase .ini,.cartaz-frase .resto{display:inline-block}
/* DQRNF gigante de onde as iniciais partem; medido, nunca visto */
.dq-alvo{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;font-weight:500;line-height:1.02;
  letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.dq-alvo span{display:inline-block}
.dqrnf-cont{padding-top:calc(var(--u) * 4)}
.cartaz-logo{height:auto;width:100%;max-width:420px}

/* ── AI SIM / AI NÃO ────────────────────────────────────────── */
.linhas{border-top:1px solid rgba(237,232,213,.25);margin-top:calc(var(--u) * 3)}
.linhas > li{padding:calc(var(--u) * 1.75) 0;border-bottom:1px solid rgba(237,232,213,.25)}
.cv-cream .linhas,.cv-cream .linhas > li{border-color:rgba(10,61,38,.22)}
.ai-nao .linhas li{color:rgba(237,232,213,.7)}
/* Robôs do Slides: máscara, então assumem a cor do texto da seção. */
.robo{display:block;width:clamp(64px,7vw,108px);aspect-ratio:560/600;margin-bottom:calc(var(--u) * 2);
  background:currentColor;-webkit-mask:url('img/robo-sim.webp') center/contain no-repeat;
  mask:url('img/robo-sim.webp') center/contain no-repeat}
.robo-nao{aspect-ratio:560/620;-webkit-mask-image:url('img/robo-nao.webp');mask-image:url('img/robo-nao.webp');
  color:rgba(237,232,213,.7)}

/* índice do capítulo III */
.cap-lista a{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--g);align-items:baseline}
.cap-lista .n{grid-column:1 / 2}
.cap-lista .tt{grid-column:2 / -1}

/* ── PESSOAS DZ · valores em três colunas ───────────────────── */
/* grade aninhada de 12: alinha com a da seção e mantém caixa para o gatilho */
.valores > li .fio{margin-bottom:calc(var(--u) * 2)}
.valores > li .t3{margin:calc(var(--u) * 1) 0 calc(var(--u) * 1.5)}

/* ── PILARES ────────────────────────────────────────────────── */
.pilar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  padding:calc(var(--u) * 4) 0;border-top:1px solid rgba(10,61,38,.22)}
.pilar > *{grid-column:1 / -1}
.pilar{container-type:inline-size}
.pilar h3{font-size:min(var(--t1),13cqi)}
.pilar .t3{grid-column:7 / 12;margin-top:calc(var(--u) * 2)}
/* foto de fundo só no cartão (com movimento); na versão em linhas ela não aparece */
.pilar-foto{display:none}

/* ── NORTEADORES ────────────────────────────────────────────── */
.norte{border-top:1px solid rgba(237,232,213,.25)}
.norte > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  padding:calc(var(--u) * 3) 0 calc(var(--u) * 4);border-bottom:1px solid rgba(237,232,213,.25);align-items:baseline}
.norte dt{grid-column:1 / 4}
.norte dd{grid-column:5 / 12}

/* ── CRENÇAS · abre e fecha, nativo ─────────────────────────── */
.crencas{border-top:1px solid rgba(10,61,38,.25)}
.crenca{border-bottom:1px solid rgba(10,61,38,.25)}
.crenca summary{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  align-items:center;padding:calc(var(--u) * 3) 0;cursor:pointer;list-style:none}
.crenca summary::-webkit-details-marker{display:none}
.crenca-n{grid-column:1 / 2}
.crenca-t{grid-column:2 / 11}
/* o "+" é geometria (dois fios), não um glifo */
.mais{grid-column:12 / 13;position:relative;width:20px;height:20px;justify-self:end}
.mais::before,.mais::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;
  background:currentColor;transition:transform .35s var(--e-out)}
.mais::after{transform:rotate(90deg)}
.crenca[open] .mais::after{transform:rotate(0deg)}
.crenca-corpo{overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);
  padding:0 0 calc(var(--u) * 5)}
.crenca-corpo > .t3{grid-column:2 / 6}
.crenca-corpo > div{grid-column:7 / 12}
.comport{counter-reset:c;margin-top:calc(var(--u) * 1.5);border-top:1px solid rgba(10,61,38,.2)}
.comport li{counter-increment:c;display:grid;grid-template-columns:3ch 1fr;gap:10px;
  padding:calc(var(--u) * 1.5) 0;border-bottom:1px solid rgba(10,61,38,.2)}
.comport li::before{content:counter(c);font-size:var(--t5);font-weight:700;letter-spacing:.12em;opacity:.55;padding-top:.35em}

/* ── COMO NOS ORGANIZAMOS · diagrama em grade ───────────────── */
.org{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(10,61,38,.3);
  border:1px solid rgba(10,61,38,.3)}
.org > *{background:var(--cream);padding:calc(var(--u) * 2.5) calc(var(--u) * 2);
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:calc(var(--u) * 11)}
.org .ceo{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;
  background:rgba(10,61,38,.3);min-height:0}
.org .ceo span{background:var(--cream);padding:calc(var(--u) * 1.5);display:flex;align-items:center;justify-content:center}
.org .pm{background:var(--green);color:var(--cream)}

/* ── COMBINADO · assinatura ─────────────────────────────────── */
.assina{border:1px solid currentColor;padding:calc(var(--u) * 4);display:flex;flex-direction:column;gap:calc(var(--u) * 2.5)}
.assina label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer}
.assina input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--green)}
.btn{align-self:flex-start;border:1.5px solid currentColor;padding:14px 26px;
  font-size:var(--t5);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s,color .2s,opacity .2s}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── FECHO ──────────────────────────────────────────────────── */
.fecho{min-height:80svh;justify-content:space-between}
.fecho-pe{border-top:1px solid rgba(237,232,213,.35);padding-top:calc(var(--u) * 2)}

/* ── JOGO · DZ é / não é ────────────────────────────────────────
   Montado pelo jogo.js embaixo das tabelas. A caixa é um objeto só: pergunta
   e contagem em cima, a palavra no meio, os dois lados colados embaixo, com
   as cores das tabelas (verde = é, preto = não é). */
.jogo{--c:4 / 10;--cm:1 / -1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2)}
.jogo-carta{width:100%;border:1px solid rgba(10,61,38,.35);background:var(--cream);
  touch-action:pan-y;cursor:grab;user-select:none;transition:border-color .2s}
.jogo-carta:active{cursor:grabbing}
.jogo-carta.errou{border-color:#C0392B}
.jogo-cab{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u) * 2);
  padding:calc(var(--u) * 1.5) calc(var(--u) * 2);border-bottom:1px solid rgba(10,61,38,.22)}
.jogo-cab .t4{font-weight:500}
.jogo-conta{white-space:nowrap;opacity:.72}
.jogo-meio{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 1.5);text-align:center;
  padding:calc(var(--u) * 5) calc(var(--u) * 2) calc(var(--u) * 4)}
.jogo-aviso{min-height:1.35em;opacity:.62}
.jogo-botoes{display:grid;grid-template-columns:1fr 1fr}
.jogo-btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:calc(var(--u) * 1.5);
  padding:calc(var(--u) * 2.5) calc(var(--u) * 2);color:var(--cream);
  font-size:var(--t5);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.jogo-btn.e{background:var(--green)}
.jogo-btn.nao{background:var(--black);justify-content:flex-end}
/* no hover a cor mais clara varre o botão no sentido da seta */
.jogo-btn::before{content:'';position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transition:transform .45s var(--e-out)}
.jogo-btn.e::before{background:var(--green-mid);transform-origin:right}
.jogo-btn.nao::before{background:#2B2A27;transform-origin:left}
.jogo-btn .seta{font-size:var(--t4);line-height:1;transition:transform .45s var(--e-out)}
.jogo-btn:active{transform:scale(.985)}
.jogo-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;z-index:1}
.jogo-atalhos{display:flex;gap:24px;font-size:var(--t4)}
.jogo-atalhos button,.jogo-atalhos a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;font-weight:500}

/* ── MOVIMENTO · tudo gated em html.mo (posto pelo movimento.js) ──
   Sem JS, ou com movimento reduzido, a classe não existe e nada disto vale. */
html.mo{scroll-behavior:auto}
/* Momentos fixos: ocupam a tela inteira e cortam o que sai deles — as
   palavras soltas da frase alargavam o layout no celular. */
html.mo :is(#capa,#frase,#dqrnf,#pilares){min-height:100svh;overflow:clip}
/* cartaz: as iniciais chegam só no contorno e se preenchem ao pousar */
html.mo #dqrnf .ini{-webkit-text-stroke:var(--sw,0px) var(--green)}

/* capa · o filme */
html.mo .capa-foto{display:none}
html.mo .capa-filme{display:block}
html.mo .capa-q{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
/* Aviso de rolagem: entra depois da 1ª pergunta e some no primeiro gesto.
   A entrada (CSS) é no span; o sumiço (GSAP, na rolagem) é no p. */
.capa-aviso{position:absolute;left:var(--m);bottom:calc(var(--u) * 5)}
.capa-aviso span{display:block;animation:aviso-entra .8s 1.6s cubic-bezier(.2,.7,.2,1) both}
.capa-aviso span::after{content:'';display:block;width:1px;height:calc(var(--u) * 5);margin-top:var(--u);
  background:currentColor;animation:aviso-fio 2s 2.4s cubic-bezier(.6,0,.2,1) infinite both}
@keyframes aviso-entra{from{opacity:0;transform:translateY(8px)}}
@keyframes aviso-fio{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
html.mo .capa-perguntas{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* pilares · trilho horizontal de cartões */
html.mo #pilares{display:flex;flex-direction:column;justify-content:center}
html.mo .pilares{display:flex;gap:var(--g);width:max-content;will-change:transform}
html.mo .pilar{flex:none;width:min(78vw,1180px);height:min(66svh,640px);padding:calc(var(--u) * 5);border:0;
  align-content:space-between;color:var(--cream)}
html.mo .pilar-1{background:var(--green)}
html.mo .pilar-2{background:var(--black)}
html.mo .pilar-3{background:var(--green-mid)}
/* Foto de fundo do cartão: as fotos já vêm em duotone verde; a opacidade
   deixa a cor do cartão tingir a foto e segura o contraste do texto creme.
   grid-area:auto faz o bloco de contenção ser o cartão inteiro (com o
   padding), não a área de colunas. */
html.mo .pilar{position:relative;overflow:hidden;isolation:isolate}
html.mo .pilar-foto{display:block;position:absolute;inset:0;grid-area:auto;width:100%;height:100%;
  object-fit:cover;opacity:.5;z-index:-1}
html.mo .pilar::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%)}
html.mo .pilar-3 .pilar-foto{opacity:.4}
html.mo .pilar > .dim{opacity:.85}

/* capítulo III · cartão que cobre: a seção para ao terminar (sticky com topo
   negativo = gruda quando o PÉ chega ao pé da tela) e a seguinte a cobre.
   overflow-x:clip no trilho corta a entrada pela direita sem criar contêiner
   de rolagem (hidden mataria o sticky). */
/* a "mesa" sob os cartões: preto, na direção do escurecimento (o verde do body aparecia nas bordas) */
html.mo .trilho-c{overflow-x:clip;background:var(--black)}
html.mo .cartao-c{position:sticky;top:var(--topo,0px)}
/* pausa antes do cartão seguinte: o de baixo fica grudado e legível enquanto
   ela passa (a margem é transparente), e só então o próximo começa a cobrir */
html.mo .cartao-c + .cartao-c{margin-top:30svh}
html.mo .cartao-c::after{content:'';position:absolute;inset:0;z-index:3;background:#000;
  opacity:var(--escuro,0);pointer-events:none}

/* ── HOVER · só onde existe ponteiro ────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .indice a:hover{opacity:1}
  a.lk[href]:hover{opacity:.6}
  .crenca summary:hover .crenca-n{opacity:1}
  .btn:not(:disabled):hover{background:var(--green);color:var(--cream)}
  .jogo-btn:hover::before{transform:scaleX(1)}
  .jogo-btn.e:hover .seta{transform:translateX(-6px)}
  .jogo-btn.nao:hover .seta{transform:translateX(6px)}
  .jogo-atalhos :is(button,a):hover{opacity:.6}
}

/* ── CELULAR · 4 colunas ────────────────────────────────────── */
@media (max-width:720px){
  :root{--g:16px}
  .g12,.indice-l > li,.pilar,.norte > div,.crenca summary,.crenca-corpo{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.mo .pilar{width:86vw;height:min(62svh,560px);padding:calc(var(--u) * 3)}
  /* no celular é uma coluna só, na ordem do HTML: as linhas fixas do grid
     de 12 (grid-row no style) empilhavam foto sobre texto */
  .g12 > *{grid-column:var(--cm,1 / -1);grid-row:auto!important}
  .desce{margin-top:calc(var(--u) * 4)}
  .v4{margin-top:calc(var(--u) * 8)}
  .v5{margin-top:calc(var(--u) * 10)}
  .sec{padding-bottom:calc(var(--u) * 12)}
  .topo-titulo{display:none}
  .indice{margin-inline:0 auto;gap:10px}
  .indice a{letter-spacing:.04em}
  .indice .longo{display:none}
  .indice .curto{display:inline}
  .tela{min-height:85svh}
  .capa{min-height:100svh;padding:0}
  .capa-texto{align-items:end;padding-bottom:calc(var(--u) * 5)}
  html.mo .capa-filme{inset:auto 0;top:46%;height:auto;aspect-ratio:16 / 9;width:150%;left:-25%;
    transform:translateY(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
  .hq.qm,.hq.qa,.hq.qb{transform:none}
  .hq,.hq.q1{font-size:clamp(30px,9.5vw,46px)}
  .hq.e{top:calc(var(--hd) + var(--u) * 5)}
  .hq.d{top:auto;bottom:calc(var(--u) * 5)}
  html.mo .capa-texto{align-items:end}
  .indice-l .n,.crenca-n{grid-column:1 / 2}
  .indice-l .tt,.indice-l .tx{grid-column:2 / -1}
  .indice-l .tx{margin-top:calc(var(--u) * 1.5)}
  .pilar .t3,.norte dt,.norte dd{grid-column:1 / -1}
  .norte dd{margin-top:calc(var(--u) * 1)}
  .crenca-t{grid-column:2 / 4}
  .mais{grid-column:4 / 5}
  .crenca-corpo > .t3,.crenca-corpo > div{grid-column:2 / -1}
  .crenca-corpo > div{margin-top:calc(var(--u) * 3)}
  .cap-lista a{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dir{text-align:left}
  /* no celular o texto ocupa a largura toda: véu uniforme */
  .sangria::after{background:rgba(17,17,17,.74)}
  .cv-green .sangria::after{background:rgba(10,61,38,.8)}
}
@media (max-width:400px){.topbar{padding:0 12px;gap:12px}.indice{gap:8px}.indice a{letter-spacing:.02em}}
@media (max-width:370px){.indice a{letter-spacing:0}}
@media print{.topbar{display:none}}