/*
 * Quarto da Verdade — estilo da página.
 *
 * O bloco a seguir veio inteiro do wireframe (assets/src/wireframe-v4.html),
 * sem alteração: é o layout aprovado. O que foi acrescentado depois está
 * separado no fim do arquivo, em "Acréscimos do tema".
 */

:root{
  --bg:#0a0a0a;
  --bg-2:#101010;
  --bg-3:#181818;
  --paper:#f1eee7;
  --text:#f6f3ed;
  --muted:#aba79e;
  --line:#323232;
  --accent:#c2a56b;
  --soft:#ddd7ca;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  z-index:9999;
}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 40px), var(--max));margin:auto}
.nav{
  position:fixed;left:0;right:0;top:0;z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(8,8,8,.7);backdrop-filter:blur(16px);
}
/* A barra é só os capítulos, e no desktop eles ficam centrados: o nome do
   site já está escrito em letra de forma na capa, logo abaixo, e repeti-lo
   aqui era dizer a mesma coisa duas vezes. A marca continua no HTML, mas
   escondida em qualquer largura. */
.nav-inner{
  height:70px;display:flex;align-items:center;justify-content:center;gap:30px
}
.brand{
  display:none;
  font-weight:800;letter-spacing:.08em;font-size:14px;text-transform:uppercase
}
.links{display:flex;gap:24px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#c9c5bc}
.links a:hover{color:white}
.progress{
  position:fixed;left:0;top:70px;height:2px;width:0;background:var(--accent);z-index:1001
}
.hero{
  min-height:100vh;display:grid;align-items:end;padding:140px 0 72px;
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.75)),#111;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:#aaa59a;margin-bottom:28px
}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,7vw,100px);line-height:.92;letter-spacing:-.05em;margin-bottom:34px;max-width:900px}
h2{font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.04em;margin-bottom:26px}
h3{font-size:clamp(25px,3vw,42px);line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.lead{font-size:clamp(18px,2vw,24px);max-width:650px;color:#d2cec5}
.short-copy{font-size:18px;max-width:630px;color:#cbc7be}
.cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:14px 0;
  border-bottom:1px solid var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:bold
}
.visual{
  min-height:500px;background:#000;border:1px solid #262626;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden
}
.visual span{
  color:#747474;text-transform:uppercase;letter-spacing:.15em;font-size:11px;text-align:center;padding:20px
}
.visual::after{content:"IMAGEM";position:absolute;right:14px;bottom:12px;color:#444;font-size:9px;letter-spacing:.2em}
section{padding:110px 0;border-top:1px solid #1d1d1d}
.section-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:start}
.section-number{font-size:11px;letter-spacing:.2em;color:#7c776c;text-transform:uppercase;position:sticky;top:110px}
.copy{max-width:750px}
.copy p{font-size:18px;color:#c3bfb7;margin-bottom:12px}
.copy strong{color:white}
.stats{display:grid;grid-template-columns:1fr 1fr;margin:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:30px 22px 30px 0}
.stat+.stat{border-left:1px solid var(--line);padding-left:30px}
.stat b{font-size:44px;display:block;letter-spacing:-.04em}
.stat span{color:#918c82;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:55px}
.media-row .visual{min-height:330px}
.quote{
  margin:90px 0;padding:70px 0;border-top:1px solid #393939;border-bottom:1px solid #393939;
  font-size:clamp(40px,6vw,84px);line-height:.94;letter-spacing:-.05em;font-weight:800;max-width:1050px
}
.quote small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8d887d;margin-bottom:26px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.card{border:1px solid #2e2e2e;padding:34px;background:#0d0d0d}
.card h4{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:#8f8a80;margin:0 0 20px}
.card ul{padding-left:20px;color:#d0ccc3}
.decision{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:50px}
.decision div{padding:34px;border:1px solid #333;font-size:clamp(20px,3vw,34px);font-weight:700;line-height:1.05}
.decision .active{border-color:var(--accent);background:#15130f}
.decision span{color:#666;font-size:12px;text-transform:uppercase;letter-spacing:.15em}
.dark-band{background:#050505}
.light-band{background:var(--paper);color:#151515}
.light-band .section-number,.light-band .copy p{color:#676158}
.light-band .visual{border-color:#bbb;background:#111}
.light-band .quote{border-color:#c9c3b7}
.accent-quote{
  background:#111;padding:100px 0;text-align:center;border-top:1px solid #292929;border-bottom:1px solid #292929
}
.accent-quote .big{font-size:clamp(50px,8vw,118px);line-height:.82;letter-spacing:-.06em;font-weight:900;text-transform:uppercase}
.accent-quote .big em{display:block;color:var(--accent);font-style:normal}
.video{
  aspect-ratio:16/9;background:#000;border:1px solid #333;display:grid;place-items:center;margin-top:55px;position:relative
}
.play{width:78px;height:78px;border-radius:50%;border:1px solid #777;display:grid;place-items:center;font-size:24px}
.video-label{position:absolute;bottom:20px;left:22px;color:#777;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.footer-hero{min-height:85vh;display:grid;align-items:center;background:#e9e5dd;color:#111}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.footer-hero .visual{min-height:590px}
.footer-hero p{color:#5d5850}
.footer-hero .cta{border-color:#111}
.micro-nav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:9px
}
.micro-nav a{width:5px;height:5px;border-radius:50%;background:#555}
.micro-nav a:hover{background:var(--accent)}
@media(max-width:900px){
  .links{display:none}
  .hero-grid,.section-grid,.footer-grid{grid-template-columns:1fr;gap:44px}
  .hero{align-items:center;padding-top:120px}
  .visual{min-height:380px}
  .section-number{position:static}
  section{padding:80px 0}
  .media-row,.split{grid-template-columns:1fr}
  .decision{grid-template-columns:1fr}
  .decision span{text-align:center}
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .micro-nav{display:none}
}

/* ==========================================================================
   Tipografia
   Montserrat em arquivo variável (100–900 em um único peso de download),
   servido pelo próprio tema em assets/fonts. É a única regra daqui que
   sobrepõe o wireframe: lá o corpo estava em Arial.
   ========================================================================== */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-variavel.ttf") format("truetype-variations"),
      url("../fonts/montserrat-variavel.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
body,input,button,select,textarea{
  font-family:"Montserrat", "Helvetica Neue", Arial, sans-serif
}

/* ==========================================================================
   Acréscimos do tema
   Nada aqui redefine regra do wireframe — são peças que a página em HTML
   solto não tinha: imagem real dentro do bloco reservado, acessibilidade,
   rodapé legal e os modelos internos do WordPress.
   ========================================================================== */

/* Imagem real ocupando um bloco .visual. Enquanto não há arquivo em
   assets/img, o bloco continua exibindo a descrição do wireframe. */
.visual img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.visual:has(img)::after{content:none}

/* Link de salto e texto só para leitor de tela. */
.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:1100;
  padding:12px 18px;background:var(--accent);color:#111;
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:bold
}
.pular-para-conteudo:focus{left:12px;top:12px}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* Nome de capítulo não quebra no meio: cada um é uma peça só na barra. A
   marca, idem — "Quarto da Verdade" em duas linhas empurrava a barra para
   62px de altura. */
.brand,.links a{white-space:nowrap}

/* Item do menu correspondente à seção em que a leitura está. */
.links a.ativo{color:white}
.micro-nav a.ativo{background:var(--accent)}

/* --------------------------------------------------------------------------
   Barra do topo e menu do celular

   No desktop a barra continua a do wireframe. No celular ela deixa de ser
   fixa — rola com a página, para a arte da capa aparecer inteira — ganha as
   cores da marca e troca os capítulos por um botão, que acende a lâmina do
   menu. O botão só aparece com JavaScript (o main.js põe a classe), porque
   sem ele a lâmina nunca abriria.
   -------------------------------------------------------------------------- */
.menu-botao{display:none}

.menu-movel{
  position:fixed;inset:0;z-index:1200;
  display:flex;flex-direction:column;gap:34px;
  padding:26px 24px 40px;
  background:#14120e;color:#efece6;
  transform:translateX(100%);
  transition:transform .3s ease;
  visibility:hidden;overflow-y:auto
}
.menu-movel.aberto{transform:translateX(0);visibility:visible}
@media(prefers-reduced-motion:reduce){
  .menu-movel{transition:none}
}
.menu-movel__topo{display:flex;align-items:center;justify-content:space-between;gap:20px}
.menu-movel__marca{display:block;line-height:0;width:min(180px,52%)}
.menu-movel__marca-img{display:block;width:100%;height:auto}
.menu-movel__fechar{
  flex:0 0 auto;width:46px;height:46px;
  display:grid;place-items:center;
  border:0;border-radius:0;
  background:transparent;color:#efece6;
  box-shadow:inset 0 0 0 1px rgba(239,236,230,.4);
  font-size:30px;line-height:1;cursor:pointer;
  transition:background-color .18s ease,color .18s ease
}
.menu-movel__fechar:hover{background:#d9ab55;color:#14120e;box-shadow:none}
.menu-botao:focus-visible,
.menu-movel__fechar:focus-visible{outline:3px solid #d9ab55;outline-offset:3px}
.menu-movel__links{display:flex;flex-direction:column;gap:22px}
/* Os links saem do wp_nav_menu dentro de um <ul>: o display:contents tira a
   lista do layout e deixa as âncoras caírem direto no flex, como na barra. */
.menu-movel__links .links__lista,
.menu-movel__links .links__lista li{display:contents;list-style:none;margin:0;padding:0}
.menu-movel__links a{
  font-size:clamp(26px,7.5vw,38px);line-height:1;letter-spacing:-.01em;
  font-weight:800;text-transform:uppercase;color:#efece6
}
.menu-movel__links a:hover,
.menu-movel__links a.ativo{color:#d9ab55}
.redes--menu{margin-top:auto}
.redes--menu .redes__link{width:44px;height:44px;border-color:rgba(239,236,230,.4);color:#efece6}
.redes--menu .redes__link:hover{background:#d9ab55;border-color:#d9ab55;color:#14120e}
/* Enquanto a lâmina está aberta o fundo não rola. */
body.menu-aberto{overflow:hidden}

@media(max-width:900px){
  /* A barra acompanha o tom do depoimento: quarto escuro e papel, não o
     azul-e-amarelo que veio do wireframe. */
  .nav{
    position:static;
    background:#14120e;backdrop-filter:none;
    border-bottom:1px solid rgba(239,236,230,.16)
  }
  /* A marca também sai da barra no celular. Sobra o botão de menu, encostado
     na direita — por isso o flex-end: com um filho visível só, o
     space-between o jogaria para a esquerda.

     Ela continua no HTML, e escondida com display:none sai também da ordem de
     tabulação: ninguém tropeça num link invisível. Quem volta para a home a
     partir de uma página interna usa a marca de dentro do menu, que é link. */
  .nav-inner{height:62px;justify-content:flex-end}
  .progress{display:none}
  .menu-botao.menu-botao--pronto{
    display:grid;align-content:center;justify-items:stretch;gap:5px;
    flex:0 0 auto;width:44px;height:44px;padding:0 9px;
    border:0;border-radius:2px;background:transparent;
    box-shadow:inset 0 0 0 1px rgba(239,236,230,.4);
    cursor:pointer
  }
  .menu-botao i{display:block;height:2px;background:#efece6}
}

/* Redes sociais do topo e do rodapé. */
.redes{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.redes__link{display:grid;place-items:center;width:34px;height:34px;border:1px solid #333;color:#9b968c}
.redes__link:hover{color:white;border-color:var(--accent)}
.icone-rede{width:17px;height:17px;fill:currentColor}

/* Rodapé legal, abaixo do encerramento. */
.rodape{background:#050505;border-top:1px solid #1d1d1d;padding:46px 0}
.rodape__interno{
  width:min(calc(100% - 40px), var(--max));margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap
}
.rodape__credito{margin:0;color:#7c776c;font-size:12px;letter-spacing:.06em}
.rodape__links{display:flex;gap:22px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8d887d}
.rodape__links a:hover{color:white}

/* Modelos internos: posts, páginas, busca e 404 herdam o mesmo tom da home. */
.pagina-interna{
  width:min(calc(100% - 40px), 760px);margin:auto;padding:170px 0 110px
}
.pagina-interna h1{font-size:clamp(36px,5vw,62px);margin-bottom:26px}
.pagina-interna p,.pagina-interna li{font-size:17px;color:#c3bfb7}
.pagina-interna a{border-bottom:1px solid var(--accent)}
.pagina-interna .entry-meta{
  color:#7c776c;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  display:flex;gap:18px;margin-bottom:36px
}
.pagina-interna img{max-width:100%;height:auto}

/* Menu vindo de Aparência → Menus: o <ul>/<li> sai do layout para os links
   caírem direto no flex da barra, como no wireframe. */
.links__lista,.links__lista li{display:contents;list-style:none;margin:0;padding:0}

/* ==========================================================================
   A caixa do vídeo

   Um <dialog> que ocupa a tela inteira e centraliza o quadro: assim, clicar em
   qualquer canto que não seja o vídeo fecha. O escurecido é o ::backdrop, do
   próprio navegador — junto com o Esc e o foco preso dentro dela.
   ========================================================================== */
.caixa{
  width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden
}
.caixa::backdrop{background:rgba(6,7,9,.88);backdrop-filter:blur(7px)}
.caixa[open]{display:grid;place-items:center}

/* A caixa toma a forma do vídeo, e não o contrário.

   Os vídeos do mural são verticais (1080×1920) e o do relato é deitado; num
   quadro fixo de 16/9 o vertical virava uma tira no meio de duas tarjas
   pretas enormes. Então a proporção é uma variável: o main.js a escreve aqui
   assim que o <video> diz quanto mede, e os iframes do YouTube e do Vimeo
   ficam com o 16/9 do padrão, que é o deles.

   A largura é o menor de três limites — a janela, o teto de 1120px e o que a
   altura disponível permite para essa proporção. É esse terceiro que faz o
   vídeo em pé caber inteiro na tela sem cortar, em vez de estourar para baixo.
   Os 132px descontados são a faixa do título mais a folga de respiro. */
.caixa__interno{
  --larg:16; --alt:9;
  position:relative;
  width:min(92vw, 1120px, (100svh - 132px) * var(--larg) / var(--alt));
  animation:caixa-entra .28s cubic-bezier(.2,.7,.3,1);
  transition:width .32s cubic-bezier(.2,.7,.3,1)
}
@media(prefers-reduced-motion:reduce){.caixa__interno{transition:none}}
@keyframes caixa-entra{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  /* Sem o salto de escala: a caixa só aparece. */
  .caixa__interno{animation-name:caixa-aparece}
}
@keyframes caixa-aparece{from{opacity:0}to{opacity:1}}

/* Título e botão de fechar na mesma linha, na largura exata do quadro: os
   dois passam a pertencer à caixa em vez de flutuarem por perto dela. */
.caixa__topo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 12px;min-height:40px
}
.caixa__titulo{
  margin:0;color:#e9e5dd;
  font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:700
}

.caixa__fechar{
  flex:0 0 auto;
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  transition:background-color .18s ease,color .18s ease
}
.caixa__fechar:hover{background:#fff;border-color:#fff;color:#000}
.caixa__fechar:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .caixa__fechar{transition:none}
}

/* O quadro. O anel e a sombra soltam o vídeo do fundo escurecido — sem eles
   um vídeo de cena escura se dissolve no ::backdrop e não se sabe onde
   termina a imagem e começa a página. */
.caixa__quadro{
  position:relative;aspect-ratio:var(--larg) / var(--alt);
  background:#000;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 32px 80px rgba(0,0,0,.6);
  transition:aspect-ratio .32s cubic-bezier(.2,.7,.3,1)
}
@media(prefers-reduced-motion:reduce){.caixa__quadro{transition:none}}
.caixa__quadro iframe,
.caixa__quadro video,
.caixa__quadro img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Print e documento entram inteiros: o quadro já veio com a proporção do
   arquivo, então "contain" aqui é só a garantia de não cortar nada. */
.caixa__quadro img{object-fit:contain}

/* Enquanto a caixa está aberta o fundo não rola. */
body.caixa-aberta{overflow:hidden}

@media(max-width:900px){
  /* No telefone a folga vertical é menor: a barra do topo não é fixa e a
     caixa pode chegar mais perto das bordas. */
  .caixa__interno{width:min(calc(100% - 32px), (100svh - 104px) * var(--larg) / var(--alt))}
  .caixa__titulo{font-size:11px}
  .caixa__topo{gap:12px;margin-bottom:10px}
}

/* ==========================================================================
   As lâminas do depoimento

   A prancha de arte (assets/img/Site Stefano V05 (1).png) tem 1620px de
   largura e uma lâmina por capítulo. Cada seção abaixo é uma dessas lâminas:
   a caixa nasce com a proporção da arte, recebe "container-type:inline-size"
   e tudo dentro dela é medido em porcentagem da largura ou em "cqi" (1% da
   largura da lâmina). Assim a diagramação da arte é a mesma em 1280, em 1920
   ou em 2560 — o desenho inteiro cresce junto, sem nada sair do lugar.

   Abaixo de 900px a lâmina se desfaz: a arte vira uma faixa no topo do
   capítulo e o texto empilha embaixo, em pixels, para continuar legível.

   Régua usada nas medidas (em px da arte, sobre 1620):
     margem esquerda do texto ........ 210   (12,96%)
     fio do capítulo ................. 91    (5,62%)  com 106 de largura
     tema, à direita ................. até 1412 (right: 12,84%)
   ========================================================================== */

/* Peças comuns a todos os capítulos ---------------------------------------- */
.capa,.relato,.mural,.trajetoria,.parede,.decisao,.permanece{
  position:relative;display:block;padding:0;border-top:0;overflow:hidden
}
.capa__lamina,.relato__lamina,.mural__lamina,.trajetoria__lamina,
.parede__lamina,.decisao__lamina,.permanece__lamina{
  position:relative;container-type:inline-size;width:100%
}

/* A faixa do capítulo: fio, número, nome e, à direita, o tema. */
.mural__topo,.trajetoria__topo,.antecedente__topo,
.datas__topo,.decisao__topo,.permanece__topo{
  position:absolute;left:5.62%;right:12.84%;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:2cqi;
  font-size:1.17cqi;line-height:1;letter-spacing:.05em;text-transform:uppercase
}
.mural__marcador,.trajetoria__marcador,.antecedente__marcador,
.datas__marcador,.decisao__marcador,.permanece__marcador{
  display:flex;align-items:center;gap:.8cqi;white-space:nowrap;font-weight:500
}
.mural__marcador i,.trajetoria__marcador i,.antecedente__marcador i,
.datas__marcador i,.decisao__marcador i,.permanece__marcador i{
  display:block;width:6.54cqi;height:1px;background:currentColor
}
.mural__marcador b,.trajetoria__marcador b,.antecedente__marcador b,
.datas__marcador b,.decisao__marcador b,.permanece__marcador b{font-weight:800}
.mural__tema,.trajetoria__tema,.antecedente__tema,
.decisao__tema,.permanece__tema{font-weight:800;white-space:nowrap}

/* Faixa sobre parede clara (mural e capítulo 02) e sobre arte escura. */
.mural__topo,.antecedente__topo{color:#18202c}
.trajetoria__topo,.datas__topo,.decisao__topo,.permanece__topo{color:#fff}
.mural__marcador,.antecedente__marcador{color:#5d6068}
.mural__marcador b,.antecedente__marcador b{color:#18202c}
.mural__marcador i,.antecedente__marcador i{background:#18202c}

/* ==========================================================================
   00. Capa

   A foto é a lâmina inteira. A arte original trazia o letreiro queimado
   dentro do JPG e o PNG da marca ia encaixado exatamente em cima dele, só
   para o <h1> existir — o tamanho do título, então, era o da foto e não se
   mexia. Aqui a foto usada é capa-quarto-sem-letreiro.jpg, a mesma cena com
   o letreiro retirado no retoque: agora quem manda no título é o CSS abaixo.
   O arquivo com o letreiro dentro continua em assets/img/capa-quarto.jpg.

   A arte tem 962 de altura para 1620 de largura; a lâmina entra mais baixa
   (820) para a capa caber na primeira tela. Como a foto é object-fit:cover,
   o corte sai todo de baixo (object-position 50% 0) — chão e gaveta, que não
   têm leitura nenhuma.
   ========================================================================== */
.capa{background:#2e2f2a}
.capa__lamina{aspect-ratio:1620/820}
.capa__foto{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

.capa__marca{
  position:absolute;left:2.6%;top:5.6cqi;width:56%;max-width:none;margin:0;
  line-height:0;z-index:2
}
.capa__marca-img{display:block;width:100%;height:auto}

/* O clarão que atravessa o quarto na abertura: a luz da janela passando, uma
   vez só. É um gradiente quente e largo, em "screen", que corre por cima da
   foto e por baixo do texto (z-index 1, contra o 2 do letreiro) — quem lê
   nunca fica embaixo dele.

   Ele fica de pé nos dois modos de animação, inclusive no sóbrio: é luz, não
   movimento, e não é disso que reclama quem pede menos animação. Quem move as
   duas variáveis é o anima-depoimento.js; sem JavaScript --brilho-luz
   continua em zero e o clarão nunca acende.

   Não usa máscara nem imagem: gradiente é desenho do próprio navegador, então
   não há recurso externo que possa faltar, quebrar por CORS ou vir de outro
   domínio e aparecer como um retângulo branco no meio da capa. */
.capa__lamina{--brilho:-95%; --brilho-luz:0}
.capa__lamina::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--brilho-luz);
  mix-blend-mode:screen;
  background:linear-gradient(104deg,
      rgba(255,240,208,0) 36%,
      rgba(255,240,208,.34) 50%,
      rgba(255,240,208,0) 64%) no-repeat;
  background-size:190% 100%;
  background-position:var(--brilho) center
}

.capa__chamada{
  position:absolute;left:6.05%;top:31.5cqi;width:60%;margin:0;z-index:2;
  color:#fff;font-weight:400;text-transform:uppercase;
  font-size:2.3cqi;line-height:1.15;letter-spacing:.005em
}
.capa__chamada b{font-weight:800}

.capa__botao{
  position:absolute;left:5.99%;top:40.5cqi;z-index:2;
  display:grid;place-items:center;
  width:15.5%;height:2.6cqi;
  border:1px solid rgba(255,255,255,.85);
  color:#fff;font-size:1.25cqi;line-height:1;letter-spacing:.055em;
  text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease
}
.capa__botao:hover{background:#fff;color:#18202c}
.capa__botao:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.capa__botao{transition:none}}

/* --------------------------------------------------------------------------
   O estado antes da entrada da capa

   Quem anima a capa é o anima-depoimento.js, com GSAP. Os scripts são
   "defer": sem esta classe a capa apareceria inteira e parada por um quadro,
   e só depois começaria a animar. A classe é posta pelo <html> antes de o
   corpo pintar (qdv_marcador_anima, no functions.php) e o script a devolve.

   Se o GSAP não carregar, o mesmo script de uma linha tira a classe sozinho
   depois de 2,5s — a capa aparece parada, mas aparece. A foto fica de fora:
   ela é o primeiro pixel da página e não pode piscar.
   -------------------------------------------------------------------------- */
html.capa-anima .capa__marca,
html.capa-anima .capa__chamada,
html.capa-anima .capa__botao{opacity:0}

/* ==========================================================================
   01. O relato
   A foto de família já vem escurecida na arte; por cima vão o play e as
   duas linhas do convite.
   ========================================================================== */
.relato{background:#2c2c2a}
.relato__lamina{aspect-ratio:1620/952}
.relato__foto{display:block;width:100%;height:100%;object-fit:cover}

/* O play é desenhado aqui: círculo vazado e o triângulo no meio. */
.relato__play{
  position:absolute;left:44.94%;top:20.62cqi;z-index:2;
  display:grid;place-items:center;
  width:8.83%;aspect-ratio:1;
  border:.37cqi solid #fff;border-radius:50%;
  transition:transform .25s ease
}
.relato__play::after{
  content:"";display:block;
  width:0;height:0;margin-left:14%;
  border-left:2.1cqi solid #fff;
  border-top:1.35cqi solid transparent;
  border-bottom:1.35cqi solid transparent
}
/* O anel que pulsa em volta do play: é o que diz, sem escrever, que ali se
   clica. Ele é um pseudo-elemento fora do fluxo, então não mexe no desenho.

   Com "movimento reduzido" o anel não cresce mais — pisca no lugar. O aviso
   continua de pé para quem precisa dele, sem nada se mover pela tela. */
.relato__play::before{
  content:"";position:absolute;inset:-8%;
  border:.28cqi solid rgba(255,255,255,.6);border-radius:50%;
  animation:relato-pulso 2.6s cubic-bezier(.25,.6,.35,1) infinite
}
@keyframes relato-pulso{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .relato__play::before{animation-name:relato-pisca}
}
@keyframes relato-pisca{
  0%,100%{opacity:.15}
  50%{opacity:.75}
}
a.relato__play{cursor:pointer}
a.relato__play:hover{transform:scale(1.07)}
/* No hover o anel sai: quem já achou o botão não precisa mais do aviso. */
a.relato__play:hover::before{animation-play-state:paused;opacity:0}
a.relato__play:focus-visible{outline:2px solid #fff;outline-offset:.6cqi}
@media(prefers-reduced-motion:reduce){.relato__play{transition:none}}

.relato__titulo{
  position:absolute;left:0;right:0;top:35cqi;z-index:2;margin:0;
  text-align:center;color:#fff;text-transform:uppercase;
  font-size:2.6cqi;line-height:1.12;letter-spacing:.02em;font-weight:400
}
.relato__titulo span,.relato__titulo b{display:block}
.relato__titulo b{font-weight:800}

/* ==========================================================================
   02. Mural da verdade  (06 na arte)
   A parede de papel ao fundo e seis polaroides pregados nela. Cada arte de
   polaroide (mural-1…6.png) foi recortada da prancha com a legenda escrita
   à mão junto — por isso ela entra inteira, e não montada em HTML.
   ========================================================================== */
.mural{background:#c9c7c2}
.mural__lamina{
  aspect-ratio:1620/1089;
  background:url("../img/Parede%20Mural%20da%20verdade.png") center top/100% 100% no-repeat
}
.mural__topo{top:5.24cqi}

.mural__abertura{
  position:absolute;left:12.96%;width:67.5%;top:11.38cqi;margin:0;z-index:2;
  color:#3e4148;font-size:1.15cqi;line-height:1.12;letter-spacing:.005em
}
.mural__abertura b{color:#18202c;font-weight:800}

.mural__seta{position:absolute;left:80.74%;top:5.93cqi;width:7.65%;height:auto;z-index:2}

.mural__quadro{position:absolute;inset:0;margin:0;padding:0;list-style:none;z-index:2}
.mural__item{position:absolute}
.mural__versao{display:block;line-height:0;transition:transform .25s ease,filter .25s ease}
.mural__arte{display:block;width:100%;height:auto}
a.mural__versao:hover{transform:scale(1.045);filter:brightness(1.06)}
a.mural__versao:focus-visible{outline:2px solid #18202c;outline-offset:.4cqi}
@media(prefers-reduced-motion:reduce){.mural__versao{transition:none}}

.mural__item--1{left:20.68%;top:19.94cqi;width:18.83%}
.mural__item--2{left:41.48%;top:19.44cqi;width:18.52%}
.mural__item--3{left:62.04%;top:19.44cqi;width:17.47%}
.mural__item--4{left:20.80%;top:42.84cqi;width:18.70%}
.mural__item--5{left:44.75%;top:43.09cqi;width:16.36%}
.mural__item--6{left:64.38%;top:42.10cqi;width:17.59%}

/* O papel que sustenta a versão, para quem quiser conferir por conta própria.

   Ele não está na prancha, e a primeira tentativa denunciou isso: um retângulo
   creme (#f3efe6) de borda reta, mais claro que os próprios polaroides e mais
   quente que tudo o que está na parede. Saltava da foto como um botão colado
   por cima dela.

   O que assenta um acréscimo numa arte fotografada é medir a arte. O papel do
   polaroide tem média #d8d7d5 — cinza claro neutro, com o claro em #eae9e7 e a
   sombra em #aba9a5. O bilhete agora vive nessa faixa, ganhou grão como o da
   foto, borda rasgada em vez de reta, e a sombra caiu para baixo, que é para
   onde a luz desta parede empurra todas as outras.

   E ele encosta no polaroide: sobe .35cqi por trás dele. Como a base do papel
   do polaroide é cortada em -11,5°, o bilhete some atrás da esquerda e aparece
   inteiro à direita — a assimetria é de graça, e é ela que faz parecer um papel
   enfiado ali, e não uma peça posicionada.

   A folga continua curta. O polaroide da primeira fileira acaba em 40,74cqi e o
   papel da segunda começa em 44,01cqi: 3,27cqi. O bilhete ocupa 1,9cqi abaixo
   do polaroide, a inclinação incluída, e deixa 0,87cqi. Mexeu na posição dos
   polaroides, ou engordou a letra, é essa conta que se refaz. */
.mural__prova{
  position:relative;z-index:-1;display:block;width:fit-content;
  margin:-.35cqi auto 0;
  transform:rotate(var(--giro,0deg));
  filter:drop-shadow(.06cqi .3cqi .55cqi rgba(44,38,30,.3));
  transition:transform .3s cubic-bezier(.2,.7,.3,1),filter .3s ease
}
.mural__item--1 .mural__prova{--giro:-2.4deg}
.mural__item--5 .mural__prova{--giro:1.9deg}

/* O z-index negativo do bilhete precisa de um teto, senão ele cai atrás da
   própria parede: no celular o .mural__quadro deixa de ser posicionado e para
   de segurar contexto, e o -1 sobe até a lâmina, que é onde a arte da parede
   está pintada. O isolate no item resolve nas duas larguras de uma vez. */
.mural__item{isolation:isolate}

.mural__prova-papel{
  position:relative;display:block;overflow:hidden;
  padding:.5cqi 1.1cqi .52cqi 2.55cqi;
  background:linear-gradient(161deg,#eceae6 0%,#dfddd8 52%,#cbc9c3 100%);
  clip-path:polygon(
    .5% 6%, 14% 1%, 33% 4%, 57% 0, 78% 3%, 99.5% 1%,
    100% 95%, 81% 100%, 58% 95%, 34% 99%, 13% 94%, 0 99%
  );
  color:#383d45;font-size:.8cqi;line-height:1.16;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;white-space:nowrap
}

/* O grão. É o mesmo truque do véu do body, só que mais fechado e mais forte:
   o de lá é .025 sobre a página inteira, e a esta distância o bilhete precisa
   do grão que a foto tem, senão fica liso do lado de peças fotografadas. */
.mural__prova-papel::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.085;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")
}

/* O percevejo, espetado na ponta esquerda do bilhete.

   Aqui esteve um clipe desenhado em SVG, no --accent, e ele não podia dar
   certo: o dourado da identidade tem 1,4:1 contra a parede e 1,8:1 contra este
   papel, e um traço de 1,5px nessa faixa não é um clipe — é uma mancha. O que
   salva um dourado claro não é contraste, é forma e massa, e disso a arte já
   tem: o percevejo recortado do mural-1.png traz o ouro certo, a luz certa e o
   metal modelado, com 39x40 e 3KB. Ele é o mesmo objeto que segura os seis
   polaroides — que é, afinal, como as coisas ficam nesta parede.

   Fica dentro do papel, e não pela metade para fora: percevejo espetado numa
   folha se apoia nela, e a agulha foi cortada no recorte pelo mesmo motivo. */
.mural__percevejo{
  position:absolute;left:.5cqi;top:50%;width:1.45cqi;height:auto;
  transform:translateY(-52%) rotate(-6deg);
  filter:drop-shadow(.1cqi .16cqi .18cqi rgba(44,38,30,.42));
  pointer-events:none
}

/* No hover o bilhete sai de trás do polaroide e quase se endireita — o gesto de
   quem puxa um papel para ler. A sombra cresce junto, senão ele desliza em vez
   de levantar. */
.mural__prova:hover{
  transform:translateY(.3cqi) rotate(calc(var(--giro,0deg) * .3));
  filter:drop-shadow(.08cqi .5cqi .8cqi rgba(44,38,30,.34))
}
.mural__prova:focus-visible{outline:2px solid #18202c;outline-offset:.35cqi}
@media(prefers-reduced-motion:reduce){.mural__prova{transition:none}}

/* ==========================================================================
   03. Antes do conflito  (01 na arte)
   A parede com as quatro placas de acrílico já vem montada no fundo: os
   números 50, 22, 14 e 04 são parte da arte, e por isso existem aqui só
   para o leitor de tela.
   ========================================================================== */
.trajetoria{background:#2b1f10}
.trajetoria__lamina{
  aspect-ratio:1620/960;
  background:url("../img/BG%20Completo%20trajetoria.png") center top/100% 100% no-repeat
}
/* A poeira na luz. O vídeo traz só os pontos, sobre preto, e entra em
   "screen": preto somado a qualquer coisa não muda nada, então o que aparece
   são as partículas e a arte por baixo continua exatamente como está — medido:
   o brilho médio da lâmina não se mexe.

   É por isso também que ele não precisa de poster nem de aparecer aos poucos:
   antes de tocar não há o que ver. Fica atrás do texto (z-index 1). */
.trajetoria__poeira{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;pointer-events:none
}

.trajetoria__topo{top:6.67cqi}

.trajetoria__titulo{
  position:absolute;left:12.96%;top:12.09cqi;width:75%;margin:0;z-index:2;
  color:#fff;font-size:3.9cqi;line-height:.98;letter-spacing:-.005em;font-weight:300
}
.trajetoria__titulo span,.trajetoria__titulo b{display:block}
.trajetoria__titulo b{font-weight:800}

.trajetoria__texto{position:absolute;left:13.02%;top:21.33cqi;width:69.5%;z-index:2}
.trajetoria__texto p{
  margin:0 0 1.15em;color:#fff;font-size:1.136cqi;line-height:1.196;letter-spacing:.005em
}
.trajetoria__texto p:last-child{margin-bottom:0}

/* ==========================================================================
   04 e 05. A parede
   Os dois capítulos dividem uma parede só (Parede Maior.jpg, 1620×1928): é
   assim na arte, e por isso a proporção da lâmina é a do arquivo inteiro.
   ========================================================================== */
.parede{background:#8c8d85}
.parede__lamina{
  aspect-ratio:1620/1928;
  background:url("../img/Parede%20Maior.jpg") center top/100% 100% no-repeat
}
.antecedente,.datas{position:absolute;left:0;right:0;top:0;bottom:0}

/* -- 04. Onde tudo começou ------------------------------------------------- */
.antecedente__topo{top:4.63cqi}

.antecedente__doc{position:absolute;z-index:2;display:block;line-height:0;transition:transform .25s ease}
.antecedente__doc img{display:block;width:100%;height:auto}
.antecedente__doc--1{left:6.91%;top:19.57cqi;width:18.46%}
.antecedente__doc--2{left:24.75%;top:23.09cqi;width:18.27%}
a.antecedente__doc:hover{transform:translateY(-.5cqi) scale(1.03)}
a.antecedente__doc:focus-visible{outline:2px solid #18202c;outline-offset:.4cqi}
@media(prefers-reduced-motion:reduce){.antecedente__doc{transition:none}}

.antecedente__clique{
  position:absolute;left:10.62%;top:47.5cqi;width:27%;margin:0;z-index:2;
  color:#e9e7e2;font-size:1.72cqi;line-height:.96;letter-spacing:.01em;
  text-transform:uppercase;font-weight:300
}
.antecedente__clique::after{
  content:"";display:block;width:18.27cqi;height:1px;margin-top:.71cqi;
  background:rgba(255,255,255,.85)
}

.antecedente__texto{position:absolute;left:48.02%;top:15.32cqi;width:40.5%;z-index:2}
.antecedente__texto h2{
  width:106%;margin:0 0 1.03em;
  color:#18202c;font-size:2.9cqi;line-height:1.2;letter-spacing:-.005em;
  font-weight:800;text-transform:uppercase
}
.antecedente__texto p{
  margin:0 0 1.17em;
  color:#e7e5e0;font-size:1.109cqi;line-height:1.17;text-align:justify
}
.antecedente__texto p:last-child{margin-bottom:0}

/* -- 05. Os acontecimentos em ordem ---------------------------------------- */
.datas__topo{top:64.4cqi}

/* Um relato por data. A coluna é a mesma para todas, menos a de 06 de agosto:
   ali o comunicado pregado ocupa a direita da parede e a coluna encolhe. */
.datas__relatos{position:absolute;left:13.02%;top:67.6cqi;width:61.1%;z-index:2}
.datas__relatos--estreito{width:43.5%}
.datas__relatos h2{
  margin:0 0 .74em;
  color:#18202c;font-size:2.65cqi;line-height:1;letter-spacing:.01em;
  font-weight:800;text-transform:uppercase
}
.datas__relatos p{
  margin:0 0 1.23em;color:#efeeea;font-size:.979cqi;line-height:1.23;text-align:justify
}
.datas__relatos p:last-child{margin-bottom:0}
.datas__relatos b{font-weight:700}
.datas__oculto{display:none}

/* O calendário e as quatro datas por cima dele: uma peça só. As medidas de
   dentro são porcentagem da mesa — quer dizer, do próprio calendário — e não
   da lâmina, e é isso que mantém cada botão em cima da sua data quando a arte
   encolhe no celular. */
.datas__mesa{position:absolute;left:0;top:89.63cqi;width:100%;z-index:2}
.datas__calendario{display:block;width:100%;height:auto}

/* O cenário da data aberta. Mora dentro da mesa e cobre exatamente a arte do
   calendário: as medidas de cada peça são porcentagem dela, e não da lâmina.

   Foi por isso que ele passou para dentro da mesa. Ancorado na lâmina, como
   estava, o cenário só existia no desktop — no celular a lâmina deixa de ser
   lâmina, vira bloco empilhado, e não havia onde pendurar nada. A arte do
   calendário é a mesma nos dois tamanhos, então a mesma porcentagem serve
   para os dois: o que muda é só a escala.

   As alturas vieram convertidas das antigas: a mesa começa a 89,63cqi da
   lâmina e tem 29,3827cqi de altura (476/1620 do arquivo), então
   topo_novo = (topo_antigo − 89,63) / 29,3827. As larguras e os "left" não
   mudaram: a mesa tem a largura inteira da lâmina, e porcentagem dela é a
   mesma coisa. */
.datas__cena{position:absolute;inset:0;z-index:3;pointer-events:none}
.datas__peca{position:absolute;height:auto}
/* O celular fica em pé sobre a pilha de livros que já vem desenhada na arte
   do calendário. As três medidas foram tiradas da arte de referência de 06 de
   agosto por correlação: o celular casa nela a 215,7px de largura, em (209,8;
   11,8) contados da arte do calendário. Antes ele estava a 15% e afundava na
   pilha. */
.datas__peca--celular{left:12.95%;top:2.48%;width:13.31%}
/* O PNG do comunicado tem folga transparente em volta: a largura aqui é a do
   arquivo, não a do papel. O topo é negativo porque ele está pregado na
   parede, acima do calendário — que é onde ele está na arte. */
.datas__peca--comunicado{left:60.7%;top:-88.59%;width:26.6%;--giro:-8deg;transform:rotate(-8deg)}
/* O recado à mão do capítulo 03. As medidas saem da prancha: a caligrafia
   ocupa (186, 5510)–(403, 5652) nela, e o PNG leva 6px de folga em volta.
   Diferente das outras peças, este é letra recortada com alfa — o retângulo
   opaco que estava aqui antes deixava emenda, porque a parede da página
   (Parede Maior.jpg) não é o mesmo arquivo que a prancha. */
.datas__peca--conflito{left:11.11%;top:17.02%;width:14.14%}
.datas__peca--whatsapp{left:2.02%;top:35.6%;width:12.65%}
.datas__peca--apoio{left:72.11%;top:6.06%;width:18.76%}

/* Peça de cenário que abre um documento: o celular com o print, o comunicado
   pregado. A camada do cenário deixa o clique passar (pointer-events:none,
   acima) para não tapar as datas do calendário, que ficam por baixo — quem
   abre documento devolve o clique só para si.

   O --giro guarda a inclinação que a peça já tinha: sem ele o transform do
   hover apagaria a rotação do comunicado e o papel saltaria para a horizontal
   ao passar o mouse. */
a.datas__peca{
  --giro:0deg;
  display:block;line-height:0;pointer-events:auto;cursor:pointer;
  transition:transform .25s ease
}
a.datas__peca img{display:block;width:100%;height:auto}
a.datas__peca:hover{transform:rotate(var(--giro)) translateY(-.5cqi) scale(1.03)}
a.datas__peca:focus-visible{outline:2px solid #efeeea;outline-offset:.4cqi}
@media(prefers-reduced-motion:reduce){a.datas__peca{transition:none}}

.datas__chamada{
  position:absolute;left:32.35%;width:37.65%;top:19.54%;margin:0;z-index:2;
  text-align:center;color:#2c3444;
  font-size:.86cqi;line-height:1;letter-spacing:.06em;text-transform:uppercase;font-weight:600
}

/* As quatro datas do calendário são botões vazados por cima da arte. */
.datas__botoes{position:absolute;inset:0;z-index:3}
.datas__botao{
  position:absolute;top:24.16%;height:47.9%;width:9.41%;
  appearance:none;-webkit-appearance:none;
  border:0;border-radius:1.4cqi;padding:0;
  background:transparent;cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease
}
.datas__botao:hover{background:rgba(29,47,69,.07)}
.datas__botao.ativo{background:rgba(234,184,23,.10);box-shadow:inset 0 0 0 .1cqi rgba(29,47,69,.28)}
.datas__botao:focus-visible{outline:2px solid #18202c;outline-offset:.2cqi}
.datas__botao--1{left:32.35%}
.datas__botao--2{left:41.73%}
.datas__botao--3{left:51.17%}
.datas__botao--4{left:60.56%}
/* As bolinhas do slide das placas: só existem no celular, e só quando o
   main.js as liga (ver .trajetoria__pontos--vivo, lá embaixo). */
.trajetoria__pontos{display:none}

/* No desktop a data já está escrita no calendário: o rótulo do botão existe
   para leitor de tela, e some da tela. */
.datas__rotulo{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
@media(prefers-reduced-motion:reduce){.datas__botao{transition:none}}

/* ==========================================================================
   06. A decisão  (04 na arte)
   A luminária acesa sobre o criado-mudo. O fundo é a lâmina da prancha com
   o texto retirado — o texto real vai por cima, em HTML.
   ========================================================================== */
.decisao{background:#2a2a1f}
.decisao__lamina{
  aspect-ratio:1620/954;
  background:url("../img/decisao-fundo.jpg") center top/100% 100% no-repeat
}
/* O abajur acendendo, por cima do fundo fixo e por baixo do texto. O
   enquadramento é o mesmo da arte: o vídeo é mais largo, e object-position
   devolve o abajur ao lugar dele.

   O vídeo só entra na frente quando já tem quadro para mostrar, e o primeiro
   quadro dele é o quarto apagado: é assim que o capítulo chega escuro à tela
   e acende depois. Enquanto ele não estiver pronto — ou se não houver
   JavaScript — quem está à vista é o fundo fixo, aceso, como na prancha. */
.decisao__luz{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;object-position:45.3% center;
  opacity:0;transition:opacity .2s ease;pointer-events:none
}
.decisao__luz.acesa{opacity:1}
/* Sem guarda de "prefers-reduced-motion" aqui, de propósito: nesta animação
   nada se move. A câmera é fixa, o abajur não sai do lugar, nenhum elemento
   desliza — o que muda é a luz. A preferência existe para movimento, que é o
   que embrulha o estômago de quem tem distúrbio vestibular; desligá-la aqui
   tirava o capítulo inteiro de quem só desligou as animações do sistema. */

/* A faixa do abajur, do alto da cúpula ao pé do criado-mudo. Não aparece:
   é o que o main.js observa para saber que o abajur está na tela. */
.decisao__gatilho{
  position:absolute;left:0;right:0;top:40cqi;height:36cqi;z-index:0;
  pointer-events:none
}
.decisao__topo{top:5.8cqi}

.decisao__titulo{
  position:absolute;left:0;right:0;top:9.05cqi;margin:0;z-index:2;
  text-align:center;color:#fff;text-transform:uppercase;
  font-size:2.876cqi;line-height:1.18;letter-spacing:.005em;font-weight:300
}
.decisao__titulo span,.decisao__titulo b{display:block}
.decisao__titulo b{font-weight:800}

.decisao__texto{position:absolute;left:14.5%;width:71%;top:16.47cqi;z-index:2;text-align:center}
.decisao__texto p{
  margin:0 0 1.245em;color:#efece6;font-size:1.09cqi;line-height:1.246
}
.decisao__remate{font-weight:700;margin-bottom:0}

/* ==========================================================================
   07. O que permanece  (05 na arte)
   O caderno fechado sobre a mesa. Os dois recados escritos à mão foram
   recortados da prancha: são arte, não texto.
   ========================================================================== */
.permanece{background:#3b2a1a}
.permanece__lamina{
  aspect-ratio:1620/958;
  background:url("../img/Imagem%20livro.png") center top/106.17% auto no-repeat
}
.permanece__topo{top:5.87cqi;color:#fff}

.permanece__titulo{
  position:absolute;left:0;right:0;top:16.03cqi;margin:0;z-index:2;
  text-align:center;color:#fff;text-transform:uppercase;
  font-size:3.40cqi;line-height:1.145;letter-spacing:.005em;font-weight:300
}
.permanece__titulo span{display:block}
.permanece__titulo b{font-weight:800}

.permanece__texto{position:absolute;left:22.4%;width:55.6%;top:26.85cqi;z-index:2;text-align:center}
.permanece__texto p{margin:0 0 1.22em;color:#e9e5dd;font-size:1.10cqi;line-height:1.17}
.permanece__remate{font-weight:700;margin-bottom:0}

.permanece__nota{position:absolute;height:auto;z-index:2}
.permanece__nota--esquerda{left:13.27%;top:37.22cqi;width:17.59%}
.permanece__nota--direita{left:71.30%;top:35.06cqi;width:16.36%}

/* ==========================================================================
   O celular

   A lâmina não cabe num telefone: a 390px de largura, um corpo de 1,1cqi
   viraria 4px. Abaixo de 900px cada capítulo se desfaz.

   A regra que vale para todos: **a arte nunca fica atrás do texto**. Cada
   capítulo vira uma pilha — a arte numa faixa, o texto em bloco escuro logo
   abaixo (ou acima). Fundo com véu só onde a arte é parede, sem nada de
   importante para ver: o mural e a parede dos capítulos 02 e 03.

   O que é diagramação pura (a seta do mural, os recados escritos à mão, o
   cenário do calendário) sai de cena. O que é conteúdo volta em outra forma:
   as quatro placas viram imagens numa grade, as quatro datas viram botões de
   verdade.
   ========================================================================== */
@media(max-width:900px){
  /* A coluna única de todos os capítulos. */
  .capa__chamada,.capa__botao,.relato__titulo,
  .mural__topo,.mural__abertura,
  .trajetoria__topo,.trajetoria__titulo,.trajetoria__texto,
  .antecedente__topo,.antecedente__clique,.antecedente__texto,
  .datas__topo,.datas__relatos,.datas__relatos--estreito,
  .decisao__topo,.decisao__titulo,.decisao__texto,
  .permanece__topo,.permanece__titulo,.permanece__texto{
    position:static;left:auto;right:auto;top:auto;width:auto;max-width:none;
    transform:none;text-align:left
  }

  /* Faixa do capítulo. */
  .mural__topo,.trajetoria__topo,.antecedente__topo,
  .datas__topo,.decisao__topo,.permanece__topo{
    display:flex;flex-direction:column;align-items:flex-start;gap:9px;
    margin:0 0 26px;font-size:11px
  }
  .mural__marcador i,.trajetoria__marcador i,.antecedente__marcador i,
  .datas__marcador i,.decisao__marcador i,.permanece__marcador i{width:52px;height:2px}

  /* Títulos e corpo em pixels. */
  .trajetoria__titulo,.decisao__titulo,.permanece__titulo{
    font-size:clamp(26px,6.6vw,40px);line-height:1.16;margin:0 0 20px
  }
  .antecedente__texto h2,.datas__relatos h2{
    font-size:clamp(21px,5.4vw,32px);line-height:1.2;margin:0 0 18px
  }
  .relato__titulo{font-size:clamp(15px,4.2vw,20px);line-height:1.5;margin:0}
  .mural__abertura,
  .trajetoria__texto p,.antecedente__texto p,.datas__relatos p,
  .decisao__texto p,.permanece__texto p{
    font-size:15px;line-height:1.6;text-align:left;margin:0 0 1.1em
  }

  /* ---- Capa e relato ----
     A arte entra inteira, na proporção dela, e a chamada e o botão ficam por
     cima dela, como no desktop — nada desce para bloco escuro nenhum.

     A conta que faz isso caber: a foto tem 962 de altura para 1620 de
     largura, ou seja 59,38cqi; o letreiro termina em 32,43cqi (5,6 do topo
     mais 56% × 491/1025 da altura dele). Sobram 26,95cqi embaixo dele —
     116px num telefone de 430, 99px num de 360 —, e a chamada mais o botão
     pedem menos que isso.

     A chamada é presa pelo topo, em cqi, para nascer logo abaixo do
     letreiro; o botão é preso pelo pé da foto. Assim os dois acompanham a
     arte encolhendo e a folga que sobra fica entre eles, que é onde ela não
     atrapalha ninguém. */
  .capa{background:#14120e}
  .capa__lamina{aspect-ratio:auto;padding:0}
  .capa__foto{height:auto}
  .capa__chamada{
    position:absolute;left:6%;right:6%;top:34.5cqi;width:auto;margin:0;
    font-size:clamp(12px,3.5vw,17px);line-height:1.25
  }
  .capa__botao{
    position:absolute;left:6%;right:auto;top:auto;bottom:3.2cqi;
    display:inline-grid;width:auto;height:auto;margin:0;
    padding:10px 16px;font-size:11px;letter-spacing:.1em
  }

  .relato{background:#141310}
  /* Como na capa: o convite fica dentro da arte, e não num bloco escuro
     embaixo dela. O play ocupa de 22,1cqi a 37,1cqi da lâmina (centro em
     29,6, largura 15%) e a foto vai até 58,8cqi — sobram 21,7cqi de foto
     abaixo dele, que é onde o título cabe.

     O título é preso pelo pé da foto: se ele quebrar numa linha a mais numa
     tela estreita, cresce para cima, na direção da folga, e não para baixo,
     onde não há para onde ir. */
  .relato__lamina{aspect-ratio:auto;padding:0}
  .relato__foto{height:auto}
  /* A foto tem 958 de altura para 1620 de largura: o meio dela fica a 29,6%
     da largura da lâmina. O play cresce um pouco em relação ao desktop — a
     8,83% da arte ele daria 34px num telefone, abaixo do alvo de dedo. */
  .relato__play{left:50%;top:29.6cqi;width:15%;transform:translate(-50%,-50%)}
  a.relato__play:hover{transform:translate(-50%,-50%) scale(1.07)}
  .relato__titulo{
    position:absolute;left:6%;right:6%;top:auto;bottom:3.4cqi;
    width:auto;margin:0;text-align:center;
    font-size:clamp(13px,3.6vw,18px);line-height:1.32
  }

  /* ---- Onde a arte é parede ---- */
  .mural__lamina,.parede__lamina{
    aspect-ratio:auto;background-size:cover;background-position:center;
    padding:70px 20px 66px
  }

  /* O mural entra sem véu nenhum: aqui o celular é o desktop estreitado, e a
     parede tem de ter o mesmo tom nos dois. O papel do mural já é claro e
     uniforme (brilho 176–205, média 190) e as bordas fecham entre si, então
     ele ladrilha na vertical em vez de ser esticado por cover — assim a
     textura mantém a escala do desktop por mais alta que a coluna fique.

     O véu de branco que estava aqui levava a parede a 232 de brilho: sumia. O
     texto continua legível sem ele — o azul-marinho da faixa e o cinza do
     corpo dão 5,3:1 contra o papel, acima do mínimo. */
  .mural__lamina{
    background-image:url("../img/Parede%20Mural%20da%20verdade.png");
    background-size:100% auto;
    background-position:center top;
    background-repeat:repeat-y
  }

  /* A parede dos capítulos 02 e 03 é a mesma do desktop: mesmo arquivo, mesma
     escala e sem véu nenhum. O véu que estava aqui levava a parede de 126 de
     brilho para 54 — some a luz que entra pela janela, somem as sombras, some
     o lugar.

     Ela ladrilha na vertical em vez de entrar por "cover" porque no celular a
     lâmina fica muito alta (2136px num telefone de 390): o "cover" ampliava a
     arte em 111% e mostrava só 22% da largura dela, uma tira sem desenho
     nenhum. Com "100% auto" a parede fica na escala do desktop, e as bordas de
     cima e de baixo fecham entre si (108 e 115 de brilho), então a emenda não
     aparece.

     Sem folga embaixo: a mesa do calendário é a última coisa da lâmina e
     precisa encostar no pé dela, como encosta no desktop — lá a mesa começa
     em 89,63cqi, tem 29,38cqi de altura e a lâmina tem 119,01cqi, ou seja,
     fecha exatamente na borda. */
  .parede__lamina{
    padding-bottom:0;
    background-image:url("../img/Parede%20Maior.jpg");
    background-size:100% auto;
    background-position:center top;
    background-repeat:repeat-y
  }
  /* Com a parede à mostra as cores voltam a ser as da arte — o branco que
     estava aqui existia por causa do véu, e sobre a parede clara ele desaparece.

     O corpo do texto também escurece, e nisto o celular se afasta do desktop
     de propósito: lá ele é claro (#e7e5e0) sobre a mesma parede, o que dá
     2:1 de contraste. Passa em telona com letra de 18px e muito ar em volta;
     não passa num telefone com 15px e a coluna cheia. Escuro sobre a parede
     dá 5,7:1. */
  .antecedente__texto p,.datas__relatos p,
  .antecedente__clique,.datas__chamada{color:#1a2028}
  .datas__relatos h2{color:#18202c}

  /* ---- Mural: os polaroides viram uma grade de dois. ---- */
  .mural__topo{color:#18202c}
  .mural__abertura{margin:0 0 26px;color:#3e4148}
  .mural__seta{display:none}
  .mural__quadro{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
  .mural__item{position:static;left:auto;top:auto;width:auto}

  /* Fora da lâmina medida, o bilhete volta a ser pixel: a coluna do celular é
     estreita e o cqi daqui daria letra de 3px. Aqui ele também respira melhor
     — a grade cresce com o que tem dentro, então não há folga a economizar. */
  .mural__prova{
    margin-top:-5px;
    filter:drop-shadow(1px 3px 5px rgba(44,38,30,.3))
  }
  .mural__prova-papel{padding:7px 12px 7px 29px;font-size:11px;letter-spacing:.11em}
  .mural__percevejo{left:6px;width:17px;
    filter:drop-shadow(1px 2px 2px rgba(44,38,30,.42))}
  .mural__prova:hover{
    transform:translateY(3px) rotate(calc(var(--giro,0deg) * .3));
    filter:drop-shadow(1px 5px 8px rgba(44,38,30,.34))
  }

  /* ---- 01. Antes do conflito ----
     A parede continua sendo o fundo, como no desktop — só ganha véu para o
     texto se ler por cima dela. O que muda é a arte das placas: a parede sem
     elas, porque no celular elas viram um slide, logo abaixo. */
  .trajetoria{background:#14100a}
  /* O véu deixou de ser chapado. Ele escurecia a parede inteira até 52 de
     brilho e o capítulo virava um retângulo preto — some a luz, somem os
     papéis pregados, some o que faz esta lâmina ser um lugar.

     Agora ele é um degradê que pesa em cima, onde o texto cai, e se abre até
     zero antes da metade: a parede volta a aparecer quente embaixo, como no
     desktop, e as placas do slide chegam sobre ela.

     Por que ainda precisa de véu: no celular a arte entra por "cover", e com
     a lâmina em pé isso mostra só a faixa central da parede — justamente a
     mais iluminada. Medido com o texto escondido, o branco sobre ela sem véu
     nenhum dá 1,17:1. Com este degradê dá 6,95:1 na parte mais clara sob o
     texto, acima do mínimo de 4,5:1, e a parede continua à vista. */
  .trajetoria__lamina{
    aspect-ratio:auto;padding:70px 20px 60px;
    background-image:linear-gradient(rgba(16,11,4,.88) 0%,
                                     rgba(16,11,4,.80) 30%,
                                     rgba(16,11,4,.22) 58%,
                                     rgba(16,11,4,0) 74%),
                     url("../img/BG%20trajetoria%20sem%20placas.png");
    background-size:cover;background-position:center
  }
  .trajetoria__poeira{display:block}

  /* As placas viram um slide: quatro numa grade de dois ficavam pequenas e
     bagunçadas. Uma de cada vez, encostando pelo meio (scroll-snap), e o
     main.js vai passando sozinho. Arrastar com o dedo funciona igual e
     interrompe a passagem automática. */
  .trajetoria__numeros{
    position:static;width:auto;height:auto;padding:0 0 6px;
    overflow-x:auto;overflow-y:hidden;clip:auto;clip-path:none;white-space:normal;
    display:flex;gap:14px;margin:36px -20px 0;
    /* "proximity", e não "mandatory". Com o encaixe obrigatório o Safari do
       iPhone precisa estar sempre parado em cima de uma placa, e quando a
       conta do ponto de encaixe não fecha — aqui ela não fechava: o
       scroll-padding que estava nesta linha é medida de encaixe pela borda, e
       estas placas encaixam pelo meio — ele resolve não sair do lugar. Fica
       tudo travado, que foi o relato. Com "proximity" o dedo manda e o
       encaixe só ajuda no fim. */
    scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .trajetoria__numeros::-webkit-scrollbar{display:none}
  .trajetoria__numeros::before,
  .trajetoria__numeros::after{content:"";flex:0 0 6px}
  /* position:relative não é enfeite: os <dt>/<dd> abaixo são escondidos com
     position:absolute, e sem uma placa positionada eles se ancoram na lâmina
     — parando a 928px, fora do slide, e esticando a seção em 538px de
     transbordo invisível. Aí bastava o slide chegar na última placa para a
     seção inteira rolar para o lado e aparecer tarja preta na direita. */
  .trajetoria__placa{
    position:relative;
    flex:0 0 74%;scroll-snap-align:center;
    background:center/contain no-repeat
  }
  .trajetoria__placa--50{aspect-ratio:371/337;background-image:url("../img/Trajetoria%20-%2050%20anos.png")}
  .trajetoria__placa--22{aspect-ratio:333/297;background-image:url("../img/Trajetoria%20-%2022%20anos.png")}
  .trajetoria__placa--14{aspect-ratio:327/328;background-image:url("../img/Trajetoria%20-%2014%20anos.png")}
  .trajetoria__placa--04{aspect-ratio:355/319;background-image:url("../img/Trajetoria%20-%2004%20mandatos.png")}
  .trajetoria__numeros dt,.trajetoria__numeros dd{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
  }

  /* As bolinhas embaixo do slide. Cada uma é um alvo de 40px com um ponto de
     9px dentro: o ponto é o que se vê, o botão é o que o dedo acha. */
  .trajetoria__pontos--vivo{
    display:flex;justify-content:center;gap:4px;margin:14px 0 0
  }
  .trajetoria__ponto{
    appearance:none;-webkit-appearance:none;
    width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:transparent;cursor:pointer;
    display:grid;place-items:center
  }
  /* O anel escuro não é sombra de enfeite: as bolinhas caem em cima da
     prateleira de madeira clara, e branco sobre madeira acesa some. Com o
     anel elas se veem na madeira e na parede escura do mesmo jeito. */
  .trajetoria__ponto::before{
    content:"";width:9px;height:9px;border-radius:50%;
    background:rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(0,0,0,.38);
    transition:background-color .2s ease,transform .2s ease
  }
  .trajetoria__ponto.ativo::before{background:#fff;transform:scale(1.3)}
  .trajetoria__ponto:focus-visible{outline:2px solid #efeeea;outline-offset:-6px}
  @media(prefers-reduced-motion:reduce){.trajetoria__ponto::before{transition:none}}

  /* As setas. Pequenas de propósito — quem manda na faixa são as placas, não
     o comando —, mas com o mesmo alvo de 40px das bolinhas: o que encolhe é o
     desenho, nunca a área que o dedo procura. A sombra fina faz por elas o
     que o anel escuro faz pelas bolinhas: segura o traço branco em cima da
     madeira acesa. */
  .trajetoria__seta{
    appearance:none;-webkit-appearance:none;
    width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:transparent;cursor:pointer;color:#fff;
    display:grid;place-items:center
  }
  .trajetoria__seta svg{
    width:11px;height:11px;
    fill:none;stroke:currentColor;stroke-width:2.6;
    stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 1px rgba(0,0,0,.6));
    opacity:.72;transition:opacity .2s ease
  }
  .trajetoria__seta:hover svg{opacity:1}
  .trajetoria__seta:focus-visible{outline:2px solid #efeeea;outline-offset:-6px}
  @media(prefers-reduced-motion:reduce){.trajetoria__seta svg{transition:none}}

  /* ---- 02 e 03: os dois capítulos da parede viram blocos empilhados. ---- */
  .antecedente,.datas{position:static;left:auto;right:auto;top:auto;bottom:auto}
  .datas{margin-top:64px}
  /* Os dois papéis lado a lado, como na parede do desktop — o segundo mais
     abaixo, que é como eles estão pregados lá. */
  .antecedente__doc{
    position:static;left:auto;top:auto;
    display:inline-block;width:44%;max-width:none;margin:0 4% 22px 0;vertical-align:top
  }
  .antecedente__doc--2{margin-top:26px}
  .antecedente__clique{margin:0 0 30px;font-size:13px;line-height:1.4}
  .antecedente__clique::after{width:120px;margin-top:12px}
  .antecedente__texto h2{width:auto}

  /* O calendário fica, com as quatro datas clicáveis por cima dele: a mesa é
     uma peça só e as medidas de dentro são porcentagem dela, então tudo
     continua alinhado quando ela encolhe. A 390px de largura cada data vira
     um alvo de uns 37×60px — pequeno, mas de dedo.

     O vão em cima da mesa é a parede onde o comunicado fica pregado. Ele sobe
     28% da largura da mesa acima dela — é assim na arte, e a conta vale nos
     dois tamanhos —, e sem esse vão ele cairia em cima do fim do relato. No
     desktop quem resolve isso é a coluna estreita do texto ('estreito', na
     lista de datas); aqui a coluna ocupa a largura toda, então quem cede é a
     altura. A mesa sangra de ponta a ponta, por isso a medida é em vw. */
  .datas__mesa{position:relative;top:auto;width:auto;margin:calc(28vw + 34px) -20px 0}
  .datas__relatos{margin-bottom:0}
  /* A chamada impressa no calendário sairia com 3px de altura aqui. Ela sobe
     para cima da mesa, em tamanho de gente — e continua fora do fluxo, senão
     a altura dela entraria na conta da mesa e os botões saíam de cima das
     datas. Sobe acima do comunicado pelo mesmo motivo: papel pregado não
     divide lugar com texto. */
  /* Fora da lista de reset lá em cima de propósito: aqui ela continua
     posicionada, agora presa ao topo da mesa. */
  .datas__chamada{
    position:absolute;left:20px;right:20px;width:auto;bottom:100%;top:auto;
    margin:0 0 calc(28vw + 6px);
    text-align:left;font-size:11px;color:#1a2028;letter-spacing:.08em;font-weight:700
  }


  /* ---- 04 e 05: o objeto da arte não pode ficar atrás do texto. ----
     O abajur e o caderno são o assunto do capítulo. A arte continua sendo a
     mesma do desktop, inteira, mas encostada no pé da lâmina, embaixo do
     texto — e não atrás dele.

     "background-size:100% auto" faz a arte ocupar a largura toda e a altura
     que a proporção dela pedir; o padding de baixo é exatamente essa altura
     (954/1620 = 58,9% da largura), para o texto parar onde a arte começa. */
  .decisao,.permanece{background:#14110c}
  /* Sem folga lateral na lâmina, de propósito: o fundo é pintado na largura
     inteira dela e o vídeo do abajur é medido em cqi, que é a largura de
     dentro. Com padding aqui os dois deixavam de bater — a folga do texto vem
     nos blocos, logo abaixo. */
  .decisao__lamina,.permanece__lamina{
    aspect-ratio:auto;padding:70px 0 0;
    background-size:100% auto;background-position:center bottom;
    background-repeat:no-repeat
  }
  .decisao__topo,.decisao__titulo,.decisao__texto,
  .permanece__topo,.permanece__titulo,.permanece__texto{
    margin-left:20px;margin-right:20px
  }
  /* A decisão continua sendo a arte, e não um bloco de texto com a arte
     embaixo. A lâmina do abajur tem meia altura de parede lisa acima da
     luminária — é sobre essa parede que o texto vai no desktop, e é ela que
     falta quando a lâmina fica em pé.

     Então a parede é continuada para cima. decisao-parede.png tem 1620x2: a
     linha de baixo é a borda de cima da própria arte, achatada na vertical
     para sobrar só o perfil horizontal da luz (clara no meio, escura nos
     cantos), e a de cima é a mesma parede recuando para a sombra, que é o que
     a arte já faz de dentro para fora. Esticada por background-size 100% 100%
     ela vira um degradê que encosta na arte sem emenda — e o capítulo volta a
     ser uma parede só, com o texto em cima dela e o abajur embaixo, longe do
     texto, como nas outras telas. */
  /* A arte entra a 150% da largura, e não a 100%. É o que devolve ao capítulo
     a proporção que ele tem no desktop: lá a cena ocupa 84% da altura e o
     texto é uma legenda em cima dela; a 100% no telefone a conta se invertia
     — texto ocupando dois terços e o abajur virando uma tira no pé.

     A 150% o abajur volta a mandar na lâmina (44% dela) sem o criado-mudo
     perder as bordas, que é o que acontece a partir de 175%. As duas camadas
     de fundo são esticadas juntas: se a parede continuada ficasse a 100%
     enquanto a arte vai a 150%, o perfil da luz não bateria entre as duas e a
     junta reapareceria. */
  .decisao__lamina{
    padding-bottom:88cqi;
    background-image:url("../img/decisao-parede.png");
    background-size:150% 100%;
    background-position:center top;
    background-repeat:no-repeat
  }

  /* A arte vem num ::before só para poder ter máscara própria: mask-image no
     elemento pegaria as duas camadas de fundo junto. Com ela, a arte não tem
     borda de cima — some por 70px dentro da parede continuada —, e a junta
     deixa de existir em vez de ficar disfarçada. É a mesma máscara do vídeo,
     pelo mesmo motivo. */
  .decisao__lamina::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:88cqi;z-index:0;
    background:url("../img/decisao-fundo.jpg") center bottom/150% auto no-repeat;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 70px);
            mask-image:linear-gradient(to bottom, transparent 0, #000 70px);
    pointer-events:none
  }

  /* Corpo menor que o dos outros capítulos — aqui o texto é legenda de uma
     cena, não a coluna de leitura de um capítulo de parede. Alinhado à
     esquerda, como todo o resto do celular: centrar dez linhas seguidas deixa
     as duas margens irregulares e o olho perde o começo da linha seguinte. */
  .decisao__titulo{
    font-size:clamp(21px,5.2vw,30px);margin-bottom:14px
  }
  .decisao__texto p{font-size:14px;line-height:1.5}
  .permanece__lamina{
    padding-bottom:59.13cqi;
    background-image:url("../img/Imagem%20livro.png")
  }

  /* O abajur acende aqui também: o vídeo cobre exatamente a faixa da arte no
     pé da lâmina, com o mesmo enquadramento do desktop.

     A borda de cima dele entra por uma máscara de 70px. O vídeo começa no
     quarto apagado e acende: sem a máscara, essa diferença de luz desenharia
     um risco horizontal onde a faixa encontra a parede continuada — e o risco
     mudaria de força conforme o abajur acende. Com ela, a junta é sempre a
     parede, que é a mesma dos dois lados. */
  .decisao__luz,.decisao__gatilho{
    top:auto;bottom:0;height:88cqi
  }
  /* O vídeo acompanha a arte: mesma largura de 150%, recuado um quarto para a
     esquerda para continuar centrado. Sem isto o abajur do vídeo não cairia
     em cima do abajur da arte na hora de acender. */
  .decisao__luz{
    width:150%;left:-25%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 70px);
            mask-image:linear-gradient(to bottom, transparent 0, #000 70px)
  }
  /* Os dois recados continuam na página. Eles não cabem ao lado do caderno
     quando a arte encolhe para a largura do telefone — a madeira que sobra de
     cada lado do caderno fica com menos de 150px —, então sobem para a faixa
     escura, lado a lado, logo acima da arte. É a mesma leitura do desktop na
     mesma ordem: o texto, os dois recados, o caderno.

     Isto só é possível porque os dois PNG foram recortados com alfa: enquanto
     traziam um pedaço da madeira embutido, só assentavam sobre a arte, e sobre
     a faixa escura apareciam como duas caixas. */
  .permanece__nota{
    display:block;position:absolute;z-index:4;
    top:auto;bottom:calc(59.13cqi + 34px)
  }
  .permanece__nota--esquerda{left:7%;width:40%}
  .permanece__nota--direita{left:auto;right:7%;width:36%}
  .permanece__lamina{padding-bottom:calc(59.13cqi + 122px)}
}
/* ==========================================================================
   Página em construção (page-em-construcao.php)

   O contrário do depoimento: papel branco, tipografia preta e nada desenhado.
   O site inteiro é escuro e carregado de grafismo; quem cai aqui não veio ver
   arte, veio bater numa porta que ainda não abriu — e a página diz isso em
   duas linhas, sem enfeite nenhum. O preto entra só onde precisa marcar: o
   fio do rótulo, o traço sob o aviso e a moldura do botão.
   ========================================================================== */
/* A lâmina cresce até sobrar exatamente o rodapé, sem que ninguém precise
   saber a altura dele: o corpo vira uma coluna e a lâmina come a folga. É o
   que evita tanto a faixa de fundo vazia embaixo do rodapé quanto a barra de
   rolagem por causa de uma conta errada. A classe vem do body_class(). */
body.page-template-page-em-construcao{min-height:100vh;display:flex;flex-direction:column}
body.page-template-page-em-construcao .site-main{display:flex;flex:1 0 auto}

.obra{
  flex:1 0 auto;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  padding:120px 0 110px;
  background:#fff;
  color:#0a0a0a;
  text-align:center;
}
.obra__interno{position:relative;z-index:1;width:min(calc(100% - 40px),760px)}

/* Mesma régua dos capítulos, em preto: fio e o rótulo em caixa alta. Aqui o
   rótulo é o título da página, para quem chegou saber onde está. */
.obra__marcador{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 0 34px;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase
}
.obra__marcador i{display:block;width:56px;height:2px;background:#0a0a0a;transform-origin:left center}
.obra__marcador b{font-weight:800}

/* Sem texto no editor e sem o botão (quando ela é a home), o título fica
   sozinho: a margem de baixo sairia do lugar e desalinharia o bloco do
   centro da lâmina. */
.obra__titulo:last-child{margin-bottom:0}
.obra__titulo{
  margin:0 0 34px;
  font-size:clamp(30px,5.2vw,52px);line-height:1.24;letter-spacing:-.01em;
  font-weight:800;text-transform:uppercase
}
/* O sublinhado do aviso. Era o traço de pincel da capa (Sublinhado.png) e
   virou uma barra reta: a arte é desenho, e aqui não há desenho nenhum. A
   espessura acompanha o corpo do título, que é fluido — daí o em.

   O topo sobe dentro da caixa (100% menos um tanto) porque a caixa do <span>
   é a linha inteira: medido da borda de baixo dela, o traço cairia longe do
   texto. O que sobra é a folga de baixo da cedilha de "CONSTRUÇÃO". */
.obra__risco{position:relative;display:inline-block}
.obra__risco::after{
  content:"";position:absolute;left:0;right:0;
  top:calc(100% - .12em);height:.06em;
  background:#0a0a0a;
  /* O GSAP não alcança um pseudo-elemento: ele anima --obra-risco no <span>
     e o recorte aqui acompanha. É o que faz o traço correr da esquerda. */
  clip-path:inset(0 var(--obra-risco,0%) 0 0)
}

.obra__texto{width:min(100%,540px);margin:0 auto}
.obra__texto p{margin:0 0 1.2em;font-size:17px;line-height:1.6;color:#3a3a3a}
.obra__texto p:last-child{margin-bottom:0}
.obra__texto a{color:#0a0a0a;border-bottom:1px solid #0a0a0a}

.obra__voltar{
  display:inline-block;margin-top:40px;
  padding:15px 30px;
  border:2px solid #0a0a0a;
  color:#0a0a0a;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  transition:background-color .18s ease,color .18s ease
}
.obra__voltar:hover{background:#0a0a0a;color:#fff}
.obra__voltar:focus-visible{outline:3px solid #0a0a0a;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .obra__voltar{transition:none}
}

/* O título é separado em palavras pelo anima-obra.js. A máscara recorta a
   palavra para ela subir de dentro da linha; o padding dá altura para os
   acentos não serem cortados, e a margem negativa devolve essa folga ao
   layout, para a diagramação continuar a mesma sem JavaScript. */
.obra__mascara{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.14em 0;margin:-.14em 0
}
.obra__palavra{display:inline-block;will-change:transform}

/* --------------------------------------------------------------------------
   O estado antes da animação

   Quem anima a página é o anima-obra.js, com GSAP. A classe .obra-anima é
   posta pelo <html> antes do corpo pintar (o script de uma linha no wp_head),
   e é ela que segura o bloco invisível: sem isso a página apareceria inteira
   por um quadro e só depois começaria a animar.

   Se o GSAP não carregar, o mesmo script de uma linha tira a classe sozinho
   depois de 2,5s — a página aparece parada, mas aparece.
   -------------------------------------------------------------------------- */
html.obra-anima .obra__marcador,
html.obra-anima .obra__titulo,
html.obra-anima .obra__texto,
html.obra-anima .obra__voltar{opacity:0}

/* O traço é revelado pelo recorte, não pela opacidade. */
html.obra-anima .obra__risco{--obra-risco:100%}

@media(max-width:900px){
  /* Sem a barra fixa do desktop, a lâmina não precisa da folga do topo. */
  .obra{min-height:auto;padding:80px 0 90px}
  .obra__marcador{gap:12px;font-size:11px;margin-bottom:26px}
  .obra__marcador i{width:40px}
  .obra__texto p{font-size:15px}
}