/* =====================================================================
   De nada em nada, tudo.  Sistema visual
   Metáfora condutora: a folha e o cordão (cordel = folheto no cordão).
   Ver AGENTS.md para regras de uso.
   ===================================================================== */

/* ---------- Fontes (auto-hospedadas, OFL) ---------- */
@font-face{font-family:"Slab";src:url("../fonts/alfa-slab-one-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Alegreya";src:url("../fonts/alegreya-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Mao";src:url("../fonts/caveat-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* matéria */
  --papel:#E9E4D6;      /* papel jornal */
  --papel-2:#DDD6C3;    /* papel envelhecido */
  --folha:#F5F1E6;      /* miolo do folheto */
  --sepia:#D6C6A0;      /* diorama */
  --tinta:#1B1714;      /* tinta de xilogravura */
  --tinta-2:#3B332B;
  --cinza:#5A5348;      /* texto secundário sobre papel (contraste 5,9:1) */
  /* capas de folheto */
  --amarelo:#ECBC2C;
  --rosa:#E5A79E;
  --verde:#8CB698;
  --anil-claro:#A9B8E2;
  /* campos e acentos */
  --anil:#24318A;
  --urucum:#B8361F;     /* anotações à mão: círculos, sublinhados */
  --madeira:#B48650;    /* prendedor */

  --f-slab:"Slab","Rockwell","Roboto Slab",Georgia,serif;
  --f-text:"Alegreya",Georgia,"Times New Roman",serif;
  --f-mao:"Mao","Segoe Print","Bradley Hand",cursive;

  --gutter:clamp(20px,5vw,64px);
  --max:1240px;
  --medida:60ch;
  --header:56px;

  /* tempo */
  --t-ja:120ms;       /* resposta imediata */
  --t-ui:240ms;       /* componentes */
  --t-revela:650ms;   /* revelações editoriais */
  --t-cena:900ms;     /* cenas e capítulos */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-pop:cubic-bezier(.34,1.45,.64,1);

  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  --pontos:radial-gradient(circle,rgba(27,23,20,.22) 1.15px,transparent 1.35px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--papel)}
html.travado{overflow:hidden}
body{margin:0;background:var(--papel) var(--grao);color:var(--tinta);font-family:var(--f-text);font-size:clamp(1.0625rem,.98rem + .35vw,1.25rem);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--urucum)}
button{font:inherit;color:inherit;cursor:pointer}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--urucum);outline-offset:3px;border-radius:2px}
.campo-tinta :focus-visible,.campo-anil :focus-visible{outline-color:var(--amarelo)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:var(--header)}
::selection{background:var(--amarelo);color:var(--tinta)}

.pular{position:fixed;left:12px;top:-60px;z-index:100;background:var(--tinta);color:var(--folha);padding:10px 16px;font-weight:600;transition:top var(--t-ui) var(--ease)}
.pular:focus{top:12px}

.miolo{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left))}

/* ---------- Campos de cor ---------- */
.campo-tinta{background:var(--tinta);color:var(--papel)}
.campo-anil{background:var(--anil) var(--grao);color:var(--folha)}
.campo-amarelo{background:var(--amarelo) var(--grao);color:var(--tinta)}
.campo-sepia{background:var(--sepia) var(--grao);color:var(--tinta)}
.campo-papel-2{background:var(--papel-2) var(--grao)}

.cap{position:relative;padding-block:clamp(72px,11vw,150px)}

/* ---------- Tipografia ---------- */
.slab{font-family:var(--f-slab);font-weight:400;letter-spacing:-.005em;line-height:.95}
.h2{font-family:var(--f-slab);font-size:clamp(2.3rem,1.4rem + 4.6vw,5.4rem);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.h3{font-family:var(--f-slab);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);line-height:1.05}
.declara{font-family:var(--f-slab);font-size:clamp(2rem,1.1rem + 4.2vw,4.8rem);line-height:1;text-wrap:balance}
.lead{font-size:clamp(1.2rem,1rem + .8vw,1.55rem);line-height:1.5;max-width:46ch}
.texto{max-width:var(--medida)}
.texto p{text-wrap:pretty}
.legenda{font-size:.95rem;font-style:italic;color:var(--cinza);line-height:1.45}
.campo-tinta .legenda,.campo-anil .legenda{color:rgba(245,241,230,.78)}
.mao{font-family:var(--f-mao);font-weight:600;font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);line-height:1.05;color:var(--urucum)}
.campo-tinta .mao,.campo-anil .mao{color:var(--amarelo)}

/* ---------- Cordão (objeto condutor) ---------- */
.cordao{display:block;width:100%;height:18px;overflow:visible}
.cordao path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* Etiqueta de capítulo: pendurada num trecho de cordão */
.etiqueta{position:relative;display:flex;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.etiqueta::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:currentColor;opacity:.55}
.etiqueta-papel{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:.55em;background:var(--folha);color:var(--tinta);padding:16px 16px 10px;margin-left:clamp(0px,3vw,32px);box-shadow:2px 3px 0 rgba(27,23,20,.18);transform:rotate(-1.5deg);transform-origin:50% 0}
.etiqueta-papel::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:22px;margin-left:-5px;background:var(--madeira);border-radius:2px;box-shadow:inset -3px 0 0 rgba(0,0,0,.18)}
.etiqueta-n{font-family:var(--f-slab);font-size:1.5rem;line-height:1}
.etiqueta-t{font-style:italic;font-size:1rem;line-height:1.2}

/* ---------- Cabeçalho ---------- */
.topo{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--header) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);display:flex;align-items:center;gap:12px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));color:var(--tinta);transition:background var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.topo.solido{background:rgba(233,228,214,.96);box-shadow:0 1px 0 rgba(27,23,20,.14)}
@supports (backdrop-filter:blur(6px)){.topo.solido{background:rgba(233,228,214,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
.topo-marca{font-family:var(--f-slab);font-size:1.02rem;text-decoration:none;white-space:nowrap;margin-right:auto;line-height:1}
.topo-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--tinta);background:transparent;font-weight:600;font-size:.98rem;text-decoration:none;line-height:1;border-radius:0;transition:background var(--t-ja),color var(--t-ja),transform var(--t-ja)}
.topo-btn:hover{background:var(--tinta);color:var(--papel)}
.topo-btn:active{transform:translateY(1px)}
.topo-btn.cheio{background:var(--tinta);color:var(--papel)}
.topo-btn.cheio:hover{background:var(--urucum);border-color:var(--urucum)}
.topo-btn svg{width:18px;height:18px}
.progresso{position:absolute;left:0;right:0;bottom:-1px;height:3px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--urucum);pointer-events:none}
@media (max-width:420px){.topo-marca{font-size:.92rem}.topo-btn{padding:0 11px}.topo-btn .so-largo{display:none}}
@media (max-width:350px){.topo{gap:8px}.topo-marca{font-size:.78rem}}

/* Índice (dialog) */
.indice{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:var(--tinta) ;color:var(--papel)}
.indice::backdrop{background:var(--tinta)}
.indice-in{min-height:100%;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 16px) max(var(--gutter),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(var(--gutter),env(safe-area-inset-left))}
.indice-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.indice-topo .topo-btn{border-color:var(--papel);color:var(--papel)}
.indice-topo .topo-btn:hover{background:var(--papel);color:var(--tinta)}
.indice ol{counter-reset:c;columns:2 320px;column-gap:48px}
.indice li{break-inside:avoid;border-top:1px solid rgba(233,228,214,.2)}
.indice a{display:flex;gap:16px;align-items:baseline;padding:14px 0;text-decoration:none;font-family:var(--f-slab);font-size:clamp(1.3rem,1rem + 1.6vw,2.2rem);line-height:1.05;transition:color var(--t-ja)}
.indice a:hover{color:var(--amarelo)}
.indice a span{font-family:var(--f-text);font-size:.9rem;font-style:italic;opacity:.7;min-width:2ch}
.indice[open]{animation:aparece var(--t-ui) var(--ease)}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid var(--tinta);background:var(--tinta);color:var(--papel);line-height:1.1;box-shadow:4px 4px 0 rgba(27,23,20,.28);transition:transform var(--t-ja) var(--ease),box-shadow var(--t-ja) var(--ease),background var(--t-ja)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(27,23,20,.3);background:var(--urucum);border-color:var(--urucum)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(27,23,20,.3)}
.btn.vazado{background:transparent;color:var(--tinta)}
.btn.vazado:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.campo-tinta .btn{background:var(--amarelo);color:var(--tinta);border-color:var(--amarelo);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.campo-tinta .btn.vazado{background:transparent;color:var(--papel);border-color:var(--papel)}

/* ======================================================================
   ABERTURA
   ====================================================================== */
.abertura{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,64px);padding:calc(var(--header) + env(safe-area-inset-top) + clamp(12px,3vh,32px)) max(var(--gutter),env(safe-area-inset-right)) clamp(40px,7vh,80px) max(var(--gutter),env(safe-area-inset-left));overflow:hidden}
.abertura::after{content:"";position:absolute;right:-40px;bottom:-40px;width:min(60vw,640px);height:min(60vw,640px);background:var(--pontos);background-size:9px 9px;-webkit-mask:radial-gradient(circle at 70% 70%,#000 0,transparent 68%);mask:radial-gradient(circle at 70% 70%,#000 0,transparent 68%);pointer-events:none}
.abertura-cordao{grid-column:1/-1;color:var(--tinta);margin-inline:calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter));height:40px}
.abertura-texto{grid-column:1;grid-row:2;align-self:end;position:relative;z-index:2}
.titulo{font-family:var(--f-slab);line-height:.86;letter-spacing:-.015em;margin:0 0 clamp(20px,3vh,32px)}
.titulo .t1,.titulo .t2,.titulo .t3{display:block}
.titulo .t1{font-size:clamp(2.1rem,1rem + 5.4vw,5.6rem)}
.titulo .t2{font-size:clamp(2.7rem,1.2rem + 7.4vw,7.6rem)}
.titulo .t3{position:relative;display:inline-block;font-size:clamp(5.6rem,1rem + 22vw,15.5rem);line-height:.82;margin-top:.04em}
.circulo{position:absolute;left:-6%;top:4%;width:114%;height:100%;overflow:visible;pointer-events:none;color:var(--urucum)}
.circulo path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.abertura-sub{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-style:italic;line-height:1.4;max-width:34ch;margin-bottom:20px}
.ficha{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:28px;font-size:1rem}
.carimbo{display:inline-block;font-family:var(--f-slab);font-size:.95rem;letter-spacing:.02em;color:var(--urucum);border:2px solid var(--urucum);padding:6px 10px 5px;transform:rotate(-3deg);background:rgba(245,241,230,.25)}
.acoes{display:flex;flex-wrap:wrap;gap:14px}

.abertura-folheto{grid-column:2;grid-row:2;position:relative;z-index:1;align-self:start;justify-self:center;width:min(100%,380px);margin-top:-22px}
.abertura-folheto .nota{position:absolute;left:-14px;bottom:-12px;transform:translateX(-100%) rotate(-4deg);text-align:right;white-space:nowrap}
.abertura-folheto .nota svg{width:72px;height:40px;margin:2px 0 0 auto;color:var(--urucum)}
.abertura-folheto .nota svg path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

@media (min-width:861px){.titulo .t3{font-size:clamp(5.6rem,1rem + 16vw,15.5rem)}}
@media (max-width:860px){
  .abertura{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start}
  .abertura-folheto{grid-column:1;grid-row:2;justify-self:end;width:clamp(128px,40vw,230px);margin:-24px 4px 0 0}
  .abertura-folheto .nota{left:auto;right:calc(100% + 10px);bottom:auto;top:44%;transform:rotate(-5deg)}
  .abertura-texto{grid-row:3;margin-top:-6vw}
  .abertura::after{width:90vw;height:90vw}
}
@media (max-width:860px) and (min-height:700px){.abertura-texto{margin-top:0}}
@media (max-height:520px) and (orientation:landscape){.abertura{min-height:auto}}

/* ---------- Folheto (componente de capa) ---------- */
.folheto-capa{position:relative;aspect-ratio:2/3;background:var(--cor,var(--folha));color:var(--tinta);padding:9% 9% 8%;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:inset 0 0 0 5px var(--cor,var(--folha)),inset 0 0 0 7px var(--tinta),0 14px 22px -10px rgba(27,23,20,.45),0 2px 0 rgba(27,23,20,.15)}
.folheto-capa::after{content:"";position:absolute;inset:0;background:var(--grao);mix-blend-mode:multiply;opacity:.55;pointer-events:none}
.folheto-capa .fc-genero{font-style:italic;font-size:clamp(.62rem,.5rem + .4vw,.85rem);line-height:1.1;margin-top:4%}
.folheto-capa .fc-xilo{flex:1;width:100%;display:grid;place-items:center;padding:6% 0}
.folheto-capa .fc-xilo svg{width:92%;height:auto;max-height:100%}
.folheto-capa .fc-titulo{font-family:var(--f-slab);font-size:clamp(.85rem,.6rem + 1vw,1.4rem);line-height:1;text-wrap:balance}
.folheto-capa .fc-autor{font-style:italic;font-size:clamp(.62rem,.5rem + .4vw,.85rem);margin-top:6px}
.pregador{position:absolute;z-index:3;top:-16px;left:50%;width:14px;height:34px;margin-left:-7px;background:var(--madeira);border-radius:2px;box-shadow:inset -4px 0 0 rgba(0,0,0,.18),1px 2px 2px rgba(0,0,0,.2)}
.pregador::after{content:"";position:absolute;left:3px;right:3px;top:13px;height:5px;border-radius:1px;background:#8d8a82}
.balanca{transform-origin:50% -20px}

/* ======================================================================
   1  A FALA VEM PRIMEIRO
   ====================================================================== */
.oralidade-grade{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.oralidade .declara{color:var(--folha);max-width:14ch;margin-bottom:clamp(32px,5vw,56px)}
.oralidade .texto p{color:rgba(245,241,230,.86)}
.oralidade .grande{font-family:var(--f-slab);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);line-height:1.08;color:var(--amarelo);margin:1.2em 0}
.escala{position:relative;display:grid;grid-template-columns:auto auto;align-items:end;justify-content:center;gap:clamp(18px,3vw,36px);padding:40px 0 20px}
.escala-item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.bola{border-radius:50%;display:grid;place-items:center;font-family:var(--f-slab);line-height:1}
.bola-fala{width:clamp(170px,26vw,320px);aspect-ratio:1;background:var(--amarelo) var(--grao);color:var(--tinta);font-size:clamp(1.6rem,1rem + 2.4vw,3rem)}
.bola-escrita{width:clamp(70px,9vw,120px);aspect-ratio:1;border:2px dashed rgba(245,241,230,.7);color:var(--papel);font-size:clamp(.95rem,.8rem + .5vw,1.2rem)}
.escala-item span{font-size:.95rem;font-style:italic;color:rgba(245,241,230,.75)}
.escala .mao{position:absolute;right:2%;top:0;transform:rotate(-6deg)}
.escala svg.seta{position:absolute;right:16%;top:26px;width:86px;height:60px;color:var(--amarelo)}
.escala svg.seta path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.kin .w{display:inline-block}
@media (max-width:860px){.oralidade-grade{grid-template-columns:1fr}.escala{order:-1;justify-content:start}}

/* ======================================================================
   2  O MOTE
   ====================================================================== */
.mote{padding-block:clamp(80px,14vw,190px)}
.mote-pergunta{font-family:var(--f-text);font-weight:600;font-size:clamp(2rem,1.1rem + 4.4vw,5rem);line-height:1.08;letter-spacing:-.01em;max-width:18ch;text-wrap:balance;margin-bottom:36px}
.sublinha{position:relative;white-space:nowrap}
.sublinha svg{position:absolute;left:-2%;right:-2%;width:104%;bottom:-.2em;height:.42em;overflow:visible;color:var(--urucum);pointer-events:none}
.sublinha svg path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mote-pista{display:inline-flex;align-items:center;gap:10px;font-style:italic;font-size:1.1rem}
.mote-pista svg{width:22px;height:22px}

/* ======================================================================
   3  POR QUE ESTE FILME EXISTE
   ====================================================================== */
.porque{padding-top:0}
.porque-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.epigrafe{font-style:italic;font-size:1.15rem;color:var(--cinza);max-width:34ch;margin-bottom:28px}
.porque .h2{font-size:clamp(2.1rem,1.2rem + 3vw,3.9rem);margin-bottom:clamp(28px,4vw,44px)}
.comparacao{position:relative;padding:36px 0 8px}
.comparacao-par{display:flex;align-items:center;gap:clamp(10px,2vw,20px);flex-wrap:wrap}
.recorte{display:inline-block;background:var(--folha);padding:16px 20px 14px;font-family:var(--f-slab);font-size:clamp(1.1rem,.8rem + 1.1vw,1.7rem);line-height:1;box-shadow:0 10px 16px -10px rgba(27,23,20,.5);clip-path:polygon(0 3%,3% 0,40% 2%,70% 0,97% 2%,100% 0,99% 40%,100% 96%,96% 100%,60% 98%,30% 100%,2% 98%,0 100%,1% 60%)}
.recorte.r1{transform:rotate(-2deg);background:var(--amarelo)}
.recorte.r2{transform:rotate(1.5deg)}
.igual{font-family:var(--f-slab);font-size:clamp(1.8rem,1.2rem + 2vw,3rem);color:var(--urucum)}
.comparacao .legenda{margin-top:18px;max-width:40ch}
.continuidade{font-family:var(--f-slab);font-size:clamp(1.7rem,1.1rem + 2.6vw,3.2rem);line-height:1.02;margin:clamp(40px,6vw,72px) 0 24px;max-width:16ch;text-wrap:balance}
.continuidade em{font-style:normal;color:var(--urucum)}
.fecho{font-style:italic;font-size:1.25rem}
@media (max-width:860px){.porque-grade{grid-template-columns:1fr}}

/* ======================================================================
   4  A VOZ DO SERTÃO
   ====================================================================== */
.voz-grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);gap:clamp(40px,6vw,96px);align-items:start}
.voz .h2{color:var(--folha);margin-bottom:16px}
.credito{font-style:italic;color:rgba(245,241,230,.8);line-height:1.45;margin-bottom:clamp(32px,4vw,48px)}
.poema{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.5;color:var(--folha)}
.poema .estrofe{margin:0 0 1.2em}
.poema .estrofe span{display:block}
.poema details summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600;color:var(--amarelo);list-style:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.poema details summary::-webkit-details-marker{display:none}
.poema details summary::after{content:"+";font-family:var(--f-slab)}
.poema details[open] summary{display:none}
.video{position:sticky;top:calc(var(--header) + 24px)}
.video-quadro{position:relative;aspect-ratio:9/16;max-height:72svh;width:100%;max-width:340px;margin-inline:auto;background:var(--tinta) var(--pontos);background-size:8px 8px;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 40px -18px rgba(0,0,0,.6);transform:rotate(1.2deg)}
.video-quadro::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(233,228,214,.75);transform:rotate(-3deg);z-index:2}
.video-play,.video iframe{display:block;width:100%;height:100%;border:0;background:#000}
.video-play{position:relative;padding:0;overflow:hidden}
.video-play img.falhou{display:none}
.video-play img{width:100%;height:100%;object-fit:cover;opacity:.85;filter:grayscale(1) contrast(1.1)}
.video-play .play{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--folha);font-weight:600;text-align:left;line-height:1.25}
.video-play .play i{flex:none;width:52px;height:52px;border-radius:50%;background:var(--amarelo);display:grid;place-items:center;transition:transform var(--t-ja) var(--ease-pop)}
.video-play:hover .play i{transform:scale(1.08)}
.video-play .play i svg{width:20px;height:20px;color:var(--tinta);margin-left:3px}
.video .legenda{text-align:center;margin-top:16px}
.video .legenda a{color:var(--folha)}
@media (max-width:860px){.voz-grade{grid-template-columns:1fr}.video{position:static}.video-quadro{max-width:300px}}

/* ======================================================================
   5  COMO SE MEDE UM VERSO
   ====================================================================== */
.verso-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
@media (max-width:860px){.verso-intro{grid-template-columns:1fr}}
.anatomia{background:var(--folha);box-shadow:0 18px 30px -22px rgba(27,23,20,.6);padding:clamp(22px,4vw,48px);position:relative;margin-bottom:clamp(64px,9vw,120px)}
.anatomia::before{content:"";position:absolute;top:-10px;left:12%;width:90px;height:22px;background:rgba(236,188,44,.6);transform:rotate(-4deg)}
.anatomia-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.anatomia-fonte{font-style:italic;color:var(--cinza)}
.chaves{display:flex;gap:10px;flex-wrap:wrap}
.chave{min-height:44px;padding:0 18px;border:2px solid var(--tinta);background:transparent;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:background var(--t-ja),color var(--t-ja)}
.chave::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-radius:50%;transition:background var(--t-ja)}
.chave[aria-pressed="true"]{background:var(--tinta);color:var(--folha)}
.chave[aria-pressed="true"]::before{background:var(--amarelo);border-color:var(--amarelo)}
.versos-anat{display:grid;gap:6px}
.versos-anat li{display:grid;grid-template-columns:minmax(0,1fr) 3ch 2ch;align-items:center;gap:12px;min-height:2.4em;padding:4px 0;border-bottom:1px dashed rgba(27,23,20,.18);font-size:clamp(1.15rem,.95rem + 1.2vw,1.9rem);line-height:1.25}
.v-sil{display:none;flex-wrap:wrap;gap:4px}
.v-sil b{font-weight:400;font-size:.8em;background:var(--papel-2);padding:2px 7px 1px;border-radius:2px}
.v-sil b.ton{background:var(--tinta);color:var(--folha)}
.v-sil b.fora{background:transparent;color:var(--cinza);text-decoration:line-through;text-decoration-thickness:1px}
.v-n,.v-letra{font-family:var(--f-slab);font-size:.9em;text-align:center;opacity:0;transition:opacity var(--t-ui)}
.rima{background:none;color:inherit;padding:0;transition:background-size var(--t-revela) var(--ease);background-image:linear-gradient(var(--rc,var(--amarelo)),var(--rc,var(--amarelo)));background-repeat:no-repeat;background-size:0 62%;background-position:0 78%}
.rima[data-r="b"]{--rc:var(--anil-claro)}
.anatomia[data-rimas="1"] .rima{background-size:100% 62%}
.anatomia[data-rimas="1"] .v-letra{opacity:1}
.anatomia[data-silabas="1"] .v-txt{display:none}
.anatomia[data-silabas="1"] .v-sil{display:flex}
.anatomia[data-silabas="1"] .v-n{opacity:1;color:var(--urucum)}
.v-letra[data-r="a"]{color:#9a7400}
.v-letra[data-r="b"]{color:var(--anil)}
.anatomia-nota{margin:20px 0 0;font-size:1rem;color:var(--cinza);max-width:62ch;min-height:3em}

.formas-hd{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px}
.legenda-rimas{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.95rem;color:var(--cinza)}
.legenda-rimas span{display:inline-flex;align-items:center;gap:6px}
.legenda-rimas i{width:22px;height:12px;display:inline-block;border:1px solid rgba(27,23,20,.4)}
.formas{border-top:2px solid var(--tinta)}
.forma{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,1fr) minmax(0,1.2fr);gap:clamp(16px,3vw,40px);padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid rgba(27,23,20,.25);align-items:start}
.forma h3{font-family:var(--f-slab);font-size:clamp(1.35rem,1rem + 1.2vw,2rem);line-height:1}
.forma .medida{display:block;font-style:italic;color:var(--cinza);font-size:.95rem;margin-top:8px;line-height:1.3}
.forma p{margin:0;max-width:52ch}
.esquema{display:grid;gap:3px;padding-top:4px}
.esquema span{display:flex;align-items:center;justify-content:flex-end;height:14px;width:calc(var(--s) / 11 * 100%);min-width:30px;padding-right:5px;font-family:var(--f-slab);font-size:.62rem;line-height:1;background:var(--rc,transparent);border:1px solid rgba(27,23,20,.45);transform-origin:0 50%}
.esquema [data-r="a"]{--rc:var(--amarelo)}
.esquema [data-r="b"]{--rc:var(--anil-claro)}
.esquema [data-r="c"]{--rc:var(--rosa)}
.esquema [data-r="d"]{--rc:var(--verde)}
.esquema [data-r="x"]{--rc:transparent;border-style:dashed}
.esquema [data-r="1"]{--rc:var(--amarelo)}
.esquema [data-r="2"]{--rc:var(--tinta);color:var(--folha)}
.esquema [data-r="m"]{--rc:var(--urucum);color:var(--folha)}
.esquema [data-r="o"]{--rc:var(--anil-claro)}
.esquema [data-r="n"]{--rc:var(--papel-2)}
.esquema .fim{width:calc(var(--s) / 11 * 100%)}
.esquema-nota{font-family:var(--f-mao);font-weight:600;color:var(--urucum);font-size:1.15rem;margin-top:6px;line-height:1}
html.js .forma .esquema span{transform:scaleX(.001);transition:transform var(--t-revela) var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
html.js .forma.on .esquema span{transform:none}
@media (max-width:860px){.forma{grid-template-columns:1fr;gap:12px}.esquema{max-width:420px}}
.outras{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,4vw,56px)}
.outras ul{display:flex;flex-wrap:wrap;gap:10px}
.outras li{background:var(--folha);padding:8px 14px 7px;box-shadow:1px 2px 0 rgba(27,23,20,.15);line-height:1.25}
.outras li b{font-family:var(--f-slab);font-weight:400}
.outras li small{display:block;font-size:.88rem;color:var(--cinza);font-style:italic;max-width:38ch}
@media (max-width:860px){.outras{grid-template-columns:1fr}}

/* ======================================================================
   6  O FOLHETO  (diorama de papel: cena fixa + passos)
   ====================================================================== */
.folheto-cap .h2{max-width:12ch}
.dobra{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);margin-top:clamp(24px,4vw,48px)}
.palco{position:sticky;top:calc(var(--header) + 4vh);height:min(76svh,680px);display:grid;place-items:center;perspective:1400px;overflow:hidden}
.palco::before{content:"";position:absolute;inset:8% 6% 4%;background:radial-gradient(ellipse at 50% 30%,rgba(255,240,200,.55),transparent 65%);pointer-events:none}
.palco-varal{position:absolute;left:-2%;right:-2%;top:13%;height:40px;color:var(--tinta-2);opacity:0;transition:opacity var(--t-cena) var(--ease)}
.folha{position:relative;width:min(38%,250px);aspect-ratio:2/3;transform-style:preserve-3d;transition:transform var(--t-cena) var(--ease)}
.folha .face{position:absolute;inset:0;background:var(--folha);box-shadow:0 20px 30px -18px rgba(27,23,20,.6);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.folha .metade-e{transform:translateX(-50%)}
.folha .metade-d{transform-origin:0 50%;transform:translateX(50%);transform-style:preserve-3d;transition:transform var(--t-cena) var(--ease)}
.folha .metade-d .verso-f{transform:rotateY(180deg)}
.linhas-txt{position:absolute;inset:14% 14%;background:repeating-linear-gradient(to bottom,rgba(27,23,20,.55) 0 2px,transparent 2px 13px);-webkit-mask:linear-gradient(90deg,#000 60%,transparent);mask:linear-gradient(90deg,#000 60%,transparent);opacity:.5}
.folha .verso-f{padding:0}
.folha .verso-f .folheto-capa{position:absolute;inset:0;box-shadow:inset 0 0 0 5px var(--folha),inset 0 0 0 7px var(--tinta)}
.folha > .pregador{left:0;top:-20px}
.folha .pregador{opacity:0;transition:opacity var(--t-ui) var(--ease)}
.vizinho{position:absolute;top:13%;width:min(30%,150px);opacity:0;transition:transform var(--t-cena) var(--ease-pop),opacity var(--t-cena) var(--ease)}
.vizinho.v1{left:2%;transform:translate(-60%,30px) rotate(-6deg)}
.vizinho.v2{right:2%;transform:translate(60%,30px) rotate(5deg)}
.palco[data-passo="2"] .folha .metade-d{transform:translateX(50%) rotateY(-180deg)}
.palco[data-passo="2"] .folha{transform:translateX(50%)}
.palco[data-passo="3"] .folha .metade-d{transform:translateX(50%) rotateY(-180deg)}
.palco[data-passo="3"] .folha{transform:translate(50%,-24%) scale(.86)}
.palco[data-passo="3"] .folha .pregador{opacity:1}
.palco[data-passo="3"] .palco-varal{opacity:1}
.palco[data-passo="3"] .vizinho{opacity:1}
.palco[data-passo="3"] .vizinho.v1{transform:translate(0,22px) rotate(-4deg)}
.palco[data-passo="3"] .vizinho.v2{transform:translate(0,30px) rotate(3deg)}
.passos{padding-block:10svh 20svh}
.passo{min-height:62svh;display:flex;flex-direction:column;justify-content:center}
.passo p{font-family:var(--f-slab);font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem);line-height:1.04;max-width:13ch;margin:0 0 12px;transition:opacity var(--t-revela)}
.passo small{display:block;font-size:1.05rem;font-style:italic;max-width:36ch;line-height:1.45}
html.js .passo{opacity:.28;transition:opacity var(--t-revela) var(--ease)}
html.js .passo.atual{opacity:1}
@media (max-width:860px){
  .dobra{grid-template-columns:1fr;gap:0}
  .palco{top:var(--header);height:44svh;z-index:2;background:var(--sepia) var(--grao);margin-inline:calc(-1 * var(--gutter))}
  .folha{width:min(34%,160px)}
  .vizinho{width:min(24%,110px)}
  .passos{padding-block:4svh 10svh}
  .passo{min-height:48svh;justify-content:flex-start;padding-top:4svh}
}
@media (max-height:540px){
  .palco{position:relative;top:0;height:380px}
  .passo{min-height:auto;padding:16px 0}
  html.js .passo{opacity:1}
}

/* Leitura do folheto (páginas com rolagem horizontal nativa) */
.leitura{margin-top:clamp(56px,8vw,100px)}
.leitura-topo{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.leitura-topo .h3 small{display:block;font-family:var(--f-text);font-style:italic;font-size:1.05rem;margin-top:8px}
.paginador{display:flex;align-items:center;gap:10px}
.paginador button{width:48px;height:48px;border:2px solid var(--tinta);background:var(--folha);display:grid;place-items:center;transition:background var(--t-ja),color var(--t-ja)}
.paginador button:hover:not(:disabled){background:var(--tinta);color:var(--folha)}
.paginador button:disabled{opacity:.35;cursor:default}
.paginador button svg{width:20px;height:20px}
.paginador output{min-width:7ch;text-align:center;font-style:italic}
.paginas{position:relative;display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:12px max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))) 28px;margin-inline:calc(-1 * max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))));scrollbar-width:thin;scrollbar-color:var(--tinta-2) transparent;overscroll-behavior-x:contain;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.paginas:focus-visible{outline-offset:-3px}
.pagina{flex:0 0 min(330px,80vw);scroll-snap-align:start;background:var(--folha);padding:26px 26px 20px;box-shadow:0 16px 24px -16px rgba(27,23,20,.55);display:flex;flex-direction:column;min-height:440px;position:relative}
.pagina::after{content:"";position:absolute;inset:0;background:var(--grao);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
.pagina-cab{display:flex;justify-content:space-between;font-style:italic;font-size:.85rem;color:var(--cinza);border-bottom:1px solid rgba(27,23,20,.3);padding-bottom:6px;margin-bottom:18px}
.pagina .estrofe{margin:0 0 1em;font-size:1.12rem;line-height:1.5}
.pagina .estrofe span{display:block}
.pagina .refrao{font-style:italic;color:var(--urucum)}
.pagina .sep{text-align:center;letter-spacing:.6em;color:var(--cinza);margin:.3em 0 .9em;font-size:.8rem}
.pagina-n{margin-top:auto;text-align:center;font-family:var(--f-slab);font-size:.9rem;color:var(--cinza)}
.pagina.capa{padding:0;background:var(--rosa)}
.pagina.capa .folheto-capa{height:100%;aspect-ratio:auto;box-shadow:inset 0 0 0 5px var(--rosa),inset 0 0 0 7px var(--tinta)}
.pagina.capa .folheto-capa .fc-titulo{font-size:1.9rem}
.pagina.contracapa{justify-content:center;text-align:center;gap:18px;font-size:1rem}
.pagina.contracapa strong{font-family:var(--f-slab);font-weight:400;font-size:1.3rem;display:block;margin-bottom:6px}

/* ======================================================================
   7  O ACERVO  (varal de folhetos)
   ====================================================================== */
.acervo-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,7vw,88px)}
@media (max-width:860px){.acervo-hd{grid-template-columns:1fr}}
.varal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(176px,calc(50% - 12px)),1fr));gap:64px 24px;padding-top:18px}
.varal li{position:relative}
.varal li::before{content:"";position:absolute;top:-2px;left:-12px;right:-12px;height:2px;background:var(--tinta-2);border-radius:2px}
.folheto{display:block;text-decoration:none;transform:rotate(var(--tilt,0deg));transform-origin:50% -16px;transition:transform var(--t-ui) var(--ease)}
.folheto:hover,.folheto:focus-visible{transform:rotate(0) translateY(-6px)}
.folheto:active{transform:rotate(0) translateY(-2px) scale(.99)}
.folheto .pregador{top:-18px}
.folheto .fc-xilo svg{color:var(--tinta);fill:currentColor}
.folheto .selo{position:absolute;z-index:4;right:-8px;top:14px;font-family:var(--f-mao);font-weight:600;font-size:1rem;line-height:1;color:var(--urucum);background:var(--folha);padding:4px 7px 3px;transform:rotate(6deg);box-shadow:1px 1px 0 rgba(27,23,20,.2)}
.acervo-aviso{margin-top:clamp(40px,6vw,64px);font-size:.98rem;color:var(--cinza);max-width:70ch}
.textos-cordel{margin-top:32px}
.texto-cordel{display:none;background:var(--folha);padding:24px;margin-bottom:24px}
.texto-cordel:target{display:block}

/* Leitor (dialog) */
.leitor{border:0;padding:0;width:min(560px,calc(100% - 32px));max-height:min(88svh,880px);background:var(--folha);color:var(--tinta);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.leitor[open]{display:flex;flex-direction:column;animation:folhear var(--t-ui) var(--ease)}
@keyframes folhear{from{opacity:0;transform:translateY(16px) rotate(-.6deg)}to{opacity:1;transform:none}}
.leitor::backdrop{background:rgba(20,16,13,.8)}
.leitor-cab{display:flex;align-items:flex-start;gap:12px;padding:20px 16px 16px 24px;background:var(--cor,var(--amarelo));border-bottom:2px solid var(--tinta)}
.leitor-cab h2{font-family:var(--f-slab);font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);line-height:1.02;flex:1}
.leitor-cab p{margin:6px 0 0;font-style:italic;font-size:1rem}
.leitor-fechar{flex:none;width:48px;height:48px;border:2px solid var(--tinta);background:var(--folha);display:grid;place-items:center}
.leitor-fechar:hover{background:var(--tinta);color:var(--folha)}
.leitor-fechar svg{width:20px;height:20px}
.leitor-corpo{overflow-y:auto;overscroll-behavior:contain;padding:24px 24px calc(28px + env(safe-area-inset-bottom))}
.leitor-corpo .estrofe,.texto-cordel .estrofe{margin:0 0 1.1em;font-size:1.18rem;line-height:1.55}
.leitor-corpo .estrofe span,.texto-cordel .estrofe span{display:block}
.leitor-corpo .cred,.texto-cordel .cred{font-style:italic;font-size:.98rem;color:var(--cinza);border-top:1px solid rgba(27,23,20,.2);padding-top:14px;margin-top:8px}
.aviso-provisorio{display:flex;gap:10px;align-items:flex-start;background:var(--papel-2);border-left:4px solid var(--urucum);padding:12px 14px;font-size:.95rem;line-height:1.4;margin-bottom:20px}
.leitor-corpo .ler-tudo{margin-top:16px}
@media (max-width:600px){
  .leitor{width:100%;max-width:100%;margin:auto 0 0;max-height:92svh}
  .leitor[open]{animation:subir var(--t-ui) var(--ease)}
  @keyframes subir{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
}

/* ======================================================================
   8  AS VOZES
   ====================================================================== */
.vozes-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(32px,5vw,56px)}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtro{min-height:44px;padding:0 16px;border:2px solid var(--tinta);background:var(--folha);font-weight:600;font-size:.98rem;transition:background var(--t-ja),color var(--t-ja)}
.filtro[aria-pressed="true"]{background:var(--tinta);color:var(--folha)}
.nomes{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;border-top:2px solid var(--tinta);padding-top:28px}
.nomes li{display:inline-flex;align-items:baseline;gap:.4em;padding-right:.55em;margin-right:.55em;border-right:2px solid rgba(27,23,20,.25);transition:opacity var(--t-ui) var(--ease);font-family:var(--f-text);font-weight:600;font-size:clamp(1.45rem,1rem + 2.2vw,2.8rem);line-height:1.15}
.nomes li small{font-weight:400;font-style:italic;font-size:.42em;color:var(--cinza);white-space:nowrap}
.nomes[data-filtro]:not([data-filtro="todos"]) li{opacity:.18}
.nomes[data-filtro="repente"] li[data-grupo="repente"],
.nomes[data-filtro="cordel"] li[data-grupo="cordel"],
.nomes[data-filtro="pesquisa"] li[data-grupo="pesquisa"],
.nomes[data-filtro="contemporanea"] li[data-grupo="contemporanea"]{opacity:1}
.vozes-status{margin-top:20px;font-style:italic;color:var(--cinza);min-height:1.6em}

/* ======================================================================
   9  O FILME
   ====================================================================== */
.filme .declara{color:var(--folha);max-width:16ch;margin-bottom:28px}
.filme .lead{color:rgba(245,241,230,.88)}
.quem{margin:clamp(48px,7vw,88px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);align-items:start}
.quem-lista{display:flex;flex-wrap:wrap;gap:8px 10px}
.quem-lista li{font-family:var(--f-slab);font-size:clamp(1.15rem,.9rem + 1.1vw,1.8rem);line-height:1;padding:10px 14px 8px;background:var(--papel);color:var(--tinta);transform:rotate(var(--r,0deg));box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.quem-lista li:nth-child(3n){background:var(--amarelo)}
.quem-lista li:nth-child(4n){background:var(--rosa)}
html.js .quem-lista li{opacity:0;transform:translateY(14px) rotate(var(--r,0deg));transition:opacity var(--t-ui) var(--ease),transform var(--t-revela) var(--ease-pop);transition-delay:calc(var(--i) * 60ms)}
html.js .quem-lista.on li{opacity:1;transform:rotate(var(--r,0deg))}
@media (max-width:860px){.quem{grid-template-columns:1fr}}
.tempos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(245,241,230,.3)}
.tempo{padding:28px clamp(0px,2vw,28px) 28px 0;border-right:1px solid rgba(245,241,230,.18)}
.tempo + .tempo{padding-left:clamp(16px,2vw,28px)}
.tempo:last-child{border-right:0}
.tempo b{display:block;font-family:var(--f-slab);font-weight:400;color:var(--amarelo);font-size:clamp(1.25rem,1rem + .9vw,1.7rem);line-height:1.05;margin-bottom:10px}
.tempo p{color:rgba(245,241,230,.82);font-size:1.02rem;margin:0}
.tempo i{display:block;font-size:.95rem;color:rgba(245,241,230,.6);margin-bottom:8px}
@media (max-width:760px){.tempos{grid-template-columns:1fr}.tempo,.tempo + .tempo{border-right:0;border-bottom:1px solid rgba(245,241,230,.18);padding-left:0}}
.ficha-filme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(48px,6vw,72px) 0}
.ficha-filme div{border-top:2px solid var(--amarelo);padding-top:12px}
.ficha-filme dt{font-style:italic;color:rgba(245,241,230,.65);font-size:.95rem}
.ficha-filme dd{margin:4px 0 0;font-family:var(--f-slab);font-size:clamp(1.1rem,.9rem + .7vw,1.45rem);line-height:1.1}
@media (max-width:760px){.ficha-filme{grid-template-columns:1fr}}

/* Linha do tempo no cordão */
.trilha-hd{margin-bottom:24px}
.trilha{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-top:30px}
.trilha::before{content:"";position:absolute;top:10px;left:0;right:0;height:2px;background:rgba(245,241,230,.45)}
.trilha li{position:relative;padding:16px 12px 14px;background:rgba(245,241,230,.06);border:1px solid rgba(245,241,230,.16)}
.trilha li::before{content:"";position:absolute;top:-28px;left:50%;width:10px;height:22px;margin-left:-5px;background:var(--madeira);border-radius:2px}
.trilha b{display:block;font-family:var(--f-slab);font-weight:400;font-size:1.1rem;line-height:1.05;margin-bottom:6px}
.trilha span{font-size:.92rem;font-style:italic;color:rgba(245,241,230,.72);line-height:1.3;display:block}
.trilha .feito{background:rgba(245,241,230,.14)}
.trilha .feito b::after{content:" \2713";color:var(--verde)}
.trilha .agora{background:var(--amarelo);color:var(--tinta);border-color:var(--amarelo)}
.trilha .agora span{color:var(--tinta-2)}
.trilha .agora .mao{position:absolute;left:8px;bottom:calc(100% + 30px);color:var(--amarelo);white-space:nowrap;transform:rotate(-4deg);font-size:1.4rem}
@media (max-width:860px){
  .trilha{grid-template-columns:1fr;padding-top:0;padding-left:30px;gap:14px}
  .trilha::before{top:0;bottom:0;left:10px;right:auto;width:2px;height:auto}
  .trilha li::before{top:50%;left:-26px;margin:-5px 0 0;width:22px;height:10px}
  .trilha .agora .mao{position:static;display:block;color:var(--urucum);margin-top:8px;transform:none}
}

/* ======================================================================
   10  DESDOBRAMENTOS
   ====================================================================== */
.entregas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;border-top:2px solid var(--tinta);margin-bottom:clamp(64px,9vw,120px)}
.entrega{padding:24px 20px 24px 0;border-bottom:1px solid rgba(27,23,20,.25)}
.entrega h3{font-family:var(--f-slab);font-size:1.5rem;line-height:1;margin-bottom:10px}
.entrega p{font-size:1.02rem;margin-bottom:12px}
.status{display:inline-flex;align-items:center;gap:8px;font-style:italic;font-size:.95rem}
.status::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--tinta)}
.status.ativo::before{background:var(--verde);border-color:#2f6b3f}















/* ======================================================================
   11  APOIE
   ====================================================================== */
.apoie-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.apoie .h2{font-size:clamp(2.5rem,1.3rem + 4.4vw,5.6rem);margin-bottom:28px}
.nota-fiscal{background:var(--folha);padding:22px 24px;margin:28px 0;box-shadow:4px 4px 0 var(--tinta);font-size:1.12rem;line-height:1.5}
.nota-fiscal strong{font-family:var(--f-slab);font-weight:400}
.retorno h3{font-family:var(--f-slab);font-size:1.6rem;margin-bottom:16px}
.retorno ul{border-top:2px solid var(--tinta)}
.retorno li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid rgba(27,23,20,.3);line-height:1.4}
.retorno li::before{content:"";width:14px;height:14px;margin-top:6px;background:var(--tinta);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.contatos{display:grid;gap:14px;margin-top:32px}
.contatos .btn{justify-content:space-between;width:100%;max-width:420px}
.contatos .btn small{font-weight:400;font-style:italic;font-size:.95rem;opacity:.85}
@media (max-width:860px){.apoie-grade{grid-template-columns:1fr}}

/* ======================================================================
   FIM  (a resposta) + realização + rodapé
   ====================================================================== */
.fim{text-align:left;padding-block:clamp(96px,16vw,220px) clamp(64px,10vw,120px)}
.fim .pergunta{font-style:italic;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);max-width:40ch;color:rgba(245,241,230,.75);margin-bottom:clamp(24px,4vw,40px)}
.fim .resposta{font-family:var(--f-slab);line-height:.86;letter-spacing:-.015em;color:var(--folha)}
.fim .resposta span{display:block}
.fim .resposta .r1{font-size:clamp(1.9rem,1rem + 4.6vw,5rem)}
.fim .resposta .r2{font-size:clamp(2.4rem,1rem + 6.4vw,6.8rem)}
.fim .resposta .r3{font-size:clamp(5rem,1rem + 20vw,14rem);color:var(--amarelo)}
.realizacao{border-top:1px solid rgba(245,241,230,.2);padding-block:clamp(48px,7vw,80px)}



.links{display:grid;gap:4px}
.links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid rgba(245,241,230,.2);color:var(--folha)}
.links a:hover{color:var(--amarelo)}
.links small{font-style:italic;color:rgba(245,241,230,.6);margin-left:auto;padding-left:16px}
.rodape{padding-block:24px calc(24px + env(safe-area-inset-bottom));border-top:1px solid rgba(245,241,230,.15);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.92rem;color:rgba(245,241,230,.66)}


/* ======================================================================
   MOVIMENTO
   ====================================================================== */
/* conteúdo só é escondido quando o JS confirma que vai revelar */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity var(--t-revela) var(--ease),transform var(--t-revela) var(--ease)}
html.js .rv.on{opacity:1;transform:none}
html.js .kin .w{opacity:0;transform:translateY(.35em) rotate(-2deg);transition:opacity var(--t-ui) var(--ease),transform var(--t-revela) var(--ease-pop);transition-delay:calc(var(--i) * 70ms)}
html.js .kin.on .w{opacity:1;transform:none}
html.js .traco path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease) .15s}
html.js .traco.on path{stroke-dashoffset:0}

/* Abertura: uma única sequência orquestrada no carregamento */
@media (prefers-reduced-motion:no-preference){
  .titulo .t1{animation:cai .7s var(--ease-pop) .05s both}
  .titulo .t2{animation:cai .7s var(--ease-pop) .2s both}
  .titulo .t3{animation:carimba .6s var(--ease-pop) .42s both}
  .circulo path{stroke-dasharray:1;stroke-dashoffset:1;animation:desenha .9s var(--ease) 1.05s forwards}
  .abertura-folheto .balanca{animation:pendulo 2.6s cubic-bezier(.3,.5,.3,1) .15s both}
  .abertura-folheto .nota{animation:esvai .5s var(--ease) 1.7s both}
  .abertura-sub,.ficha,.acoes{animation:surge .6s var(--ease) .75s both}
}
@keyframes cai{from{opacity:0;transform:translateY(-.4em) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes carimba{0%{opacity:0;transform:scale(1.25) rotate(-4deg)}70%{opacity:1}100%{transform:none}}
@keyframes desenha{to{stroke-dashoffset:0}}
@keyframes esvai{from{opacity:0}to{opacity:1}}
@keyframes surge{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pendulo{0%{transform:translateY(-40px) rotate(-14deg);opacity:0}12%{opacity:1}30%{transform:rotate(8deg)}50%{transform:rotate(-4.5deg)}68%{transform:rotate(2.2deg)}84%{transform:rotate(-1deg)}100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js .rv,html.js .kin .w,html.js .quem-lista li{opacity:1!important;transform:none!important}
  html.js .traco path,.circulo path{stroke-dashoffset:0!important}
  html.js .forma .esquema span,html.js .alcance-barra i{transform:none!important}
  html.js .passo{opacity:1}
}

/* Impressão: texto legível, sem cenários */
@media print{
  .topo,.palco,.video,.pular,.paginador,.filtros,.chaves{display:none!important}
  body{background:#fff}
  .campo-tinta,.campo-anil,.campo-amarelo,.campo-sepia{background:#fff!important;color:#000!important}
  .paginas{flex-direction:column;overflow:visible}
  html.js .rv,html.js .kin .w{opacity:1;transform:none}
}


/* ======================================================================
   MARCAS
   Regra: cada marca aparece com a arte original (PNG transparente), sobre o fundo
   que a própria arte exige. Sem cartões individuais, sem filtros, sem recolorir,
   sem contorno, sem rotação (Manual da Lei Rouanet, usos indevidos).
   Tamanho óptico definido por marca (altura), não por caixa.
   ====================================================================== */
.marca{display:block;height:auto;max-width:100%}

/* Podcast Nordestino: painel escuro, logo integrado (a arte tem texto branco) */
.parceria{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--tinta) var(--grao);color:var(--papel);padding:clamp(28px,5vw,64px);position:relative}
.parceria::before{content:"";position:absolute;top:-10px;left:12%;width:96px;height:22px;background:rgba(229,167,158,.8);transform:rotate(-3deg)}
.parceria .mao{color:var(--amarelo)}
.parceria .h2{font-size:clamp(1.9rem,1.1rem + 2.8vw,3.4rem);margin:10px 0 18px;color:var(--folha);max-width:16ch}
.parceria-texto p{color:rgba(245,241,230,.86);max-width:48ch}
.parceria-marca{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.parceria-marca img{width:min(340px,100%);height:auto}
.parceria-marca figcaption{display:grid;gap:4px;border-top:1px solid rgba(245,241,230,.25);padding-top:16px;width:100%}
.parceria-marca b{font-family:var(--f-slab);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;color:var(--amarelo)}
.parceria-marca span{font-style:italic;color:rgba(245,241,230,.75);max-width:34ch}
@media (max-width:860px){.parceria{grid-template-columns:1fr}}

/* Rodapé: colofão (sobre tinta) + creditos (folha branca única para o bloco institucional) */
.realizacao{border-top:1px solid rgba(245,241,230,.2);padding-block:clamp(48px,7vw,80px)}
.colofao{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.colofao-rotulo,.cc-rotulo{margin:0 0 14px;font-style:italic;font-size:.95rem;line-height:1.2}
.colofao-rotulo{color:rgba(245,241,230,.6)}
.colofao-producao p:not(.colofao-rotulo){color:rgba(245,241,230,.8);max-width:40ch;margin-top:16px}
.marca-bourbon{width:clamp(170px,18vw,230px)}
.marca-podcast{width:clamp(150px,15vw,200px)}
@media (max-width:860px){.colofao{grid-template-columns:1fr 1fr}.colofao .links{grid-column:1/-1}}
@media (max-width:480px){.colofao{grid-template-columns:1fr}}
.creditos{position:relative;margin:clamp(40px,6vw,64px) 0 0;background:#fff;color:var(--tinta);display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:center;align-items:end;padding:clamp(32px,4vw,44px) clamp(24px,4vw,48px) clamp(28px,3vw,36px);box-shadow:0 18px 30px -20px rgba(0,0,0,.7)}
.creditos-pregador{position:absolute;top:-14px;left:18%;width:14px;height:32px;background:var(--madeira);border-radius:2px;box-shadow:inset -4px 0 0 rgba(0,0,0,.18)}
.creditos-pregador.dir{left:auto;right:18%}
/* cada grupo centraliza rótulo e marca; as marcas nunca esticam (largura definida, altura automática) */
.cc-grupo{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-inline:clamp(24px,3.4vw,48px);min-width:0}
.cc-grupo + .cc-grupo{border-left:1px solid rgba(27,23,20,.15)}
.cc-rotulo{color:var(--cinza)}
.creditos .marca,.creditos img{flex:none;height:auto;max-width:100%;object-fit:contain}
.marca-lei{width:141px}
.marca-coruja{width:90px}
.marca-gov{width:390px}
@media (max-width:760px){
  .creditos{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);justify-content:stretch;padding:36px 20px 24px}
  .cc-grupo{padding:22px 0}
  .cc-grupo:first-of-type{padding-top:4px}
  .cc-grupo + .cc-grupo{border-left:0;border-top:1px solid rgba(27,23,20,.15)}
  .marca-lei{width:132px}
}
.rodape a{color:inherit}

/* Carta da poesia */
.carta-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.carta-intro .h2{font-size:clamp(1.55rem,1rem + 1.8vw,2.6rem)}
.carta-intro .h2{margin-bottom:20px}
.carta-intro .legenda{margin-top:16px;max-width:42ch}
@media (max-width:860px){.carta-grade{grid-template-columns:1fr}}
.carta-folha{position:relative;background:var(--folha) var(--grao);padding:clamp(28px,4vw,44px);box-shadow:0 22px 34px -24px rgba(27,23,20,.7);display:grid;gap:16px;border-top:10px solid transparent;border-image:repeating-linear-gradient(45deg,var(--urucum) 0 12px,var(--folha) 12px 20px,var(--anil) 20px 32px,var(--folha) 32px 40px) 10}
.carta-selo{position:absolute;top:18px;right:18px;width:92px;height:92px;border:2px dashed var(--urucum);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-12deg);color:var(--urucum);line-height:1.05;padding:8px}
.carta-selo b{font-family:var(--f-slab);font-weight:400;font-size:.8rem}
.carta-selo i{font-size:.66rem}
.carta-aviso{margin:0 104px 0 0;font-size:1rem;font-style:italic;color:var(--cinza);min-height:1.5em}
.carta-folha[data-estado="ativo"] .carta-aviso:empty{display:none}
.carta-email{display:grid;gap:6px}
.carta-email label{font-weight:600}
.carta-email input{min-height:52px;padding:0 14px;border:2px solid var(--tinta);background:#fff;font:inherit;font-size:1.1rem;border-radius:0;width:100%}
.carta-email input:disabled,.carta-folha button:disabled,.carta-consente input:disabled{cursor:not-allowed;opacity:.55}
.carta-email input[aria-invalid="true"]{border-color:var(--urucum);box-shadow:inset 0 0 0 1px var(--urucum)}
.carta-isca{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.carta-consente{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:1rem;line-height:1.45;cursor:pointer}
.carta-consente input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--tinta)}
.carta-folha .btn{justify-self:start}
.carta-ou{display:flex;align-items:center;gap:12px;color:var(--cinza);font-style:italic;margin:2px 0}
.carta-ou::before,.carta-ou::after{content:"";flex:1;height:1px;background:rgba(27,23,20,.25)}
.btn-google{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px 0 14px;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:4px;font-family:"Roboto","Segoe UI",Arial,sans-serif;font-weight:500;font-size:15px;justify-self:start;transition:background var(--t-ja),box-shadow var(--t-ja)}
.btn-google:hover:not(:disabled){background:#f8f9fa;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.btn-google svg{width:20px;height:20px}
.carta-google-confirma{display:grid;gap:14px;background:#fff;border-left:4px solid var(--anil);padding:16px}
.carta-google-confirma[hidden]{display:none}
.carta-google-confirma p{margin:0}
.carta-google-acoes{display:flex;flex-wrap:wrap;gap:12px}
.carta-status{margin:0;min-height:1.5em;font-weight:600;line-height:1.4}
.carta-status[data-tipo="erro"]{color:var(--urucum)}
.carta-status[data-tipo="ok"]{color:#2f6b3f}
.carta-rodape{margin:0;font-size:.92rem;color:var(--cinza)}
.carta-simulacao{background:var(--amarelo);color:var(--tinta);padding:8px 12px;font-weight:600;font-size:.92rem;margin:0 104px 0 0}
@media (max-width:480px){.carta-selo{width:72px;height:72px;top:12px;right:12px}.carta-aviso,.carta-simulacao{margin-right:76px}}