/* ==========================================================================
   Call com Euriler, 24/09/2026. Layout RABISCO (starter-kit da casa): papel
   pautado, caneta azul, marca-texto, fita adesiva e papelao, tudo animado em
   stop-motion. Secoes 1 a 7 vem do starter-kit sem mudanca.
   Regras da casa: nenhum degrade de cor (pauta, grao, hachura e marca-texto
   saem de SVG), nenhum travessao, nenhum emoji, fontes Patrick Hand e Caveat.
   ========================================================================== */

/* ---------- 1. Fontes (servidas pelo proprio dominio, licenca SIL OFL 1.1) ---------- */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/patrick-hand-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/caveat-600-latin.woff2) format('woff2');
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: light;

  /* papel */
  --papel: oklch(.958 .020 90);          /* #f6f1e2 pagina */
  --folha: oklch(.978 .013 95);          /* folhas coladas */
  --recorte: oklch(.989 .008 95);        /* recortes e fichas */
  --papel-verso: oklch(.925 .022 88);    /* verso da folha rasgada */

  /* tinta */
  --tinta: oklch(.355 .195 267);         /* caneta azul, titulos */
  --tinta-2: oklch(.430 .130 268);       /* texto corrido */
  --vermelho: oklch(.530 .175 25);       /* caneta vermelha */
  --lapis: oklch(.470 .020 265);         /* grafite */
  --tinta-kraft: oklch(.270 .070 262);   /* texto sobre papelao */

  /* materiais */
  --marca: oklch(.875 .165 92);          /* marca-texto */
  --kraft: oklch(.715 .072 70);
  --fita: oklch(.905 .030 88 / .82);
  --margem: oklch(.760 .085 18);
  --sombra: oklch(.200 .040 60);
  --foco: oklch(.500 .190 25);

  /* fontes */
  --f-mao: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Noteworthy', system-ui, sans-serif;
  --f-nota: 'Caveat', 'Patrick Hand', 'Segoe Print', 'Bradley Hand', system-ui, sans-serif;

  /* medidas */
  --gutter: 16px;
  --largura: 1200px;
  --linha: 30px;
  --r-botao: 5px 9px 4px 7px;

  /* curvas */
  --saida: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.3, 1.45, .5, 1);

  /* texturas: SVG com ruido e traco, nada de degrade */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .2 .22 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --pauta-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='30'%3E%3Cg stroke='%236586c3' stroke-width='1'%3E%3Cpath d='M0 29.5h170' stroke-opacity='.36'/%3E%3Cpath d='M170 29.5h140' stroke-opacity='.27'/%3E%3Cpath d='M310 29.5h200' stroke-opacity='.38'/%3E%3Cpath d='M510 29.5h130' stroke-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  --quadro-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M23.5 0v24M0 23.5h24' fill='none' stroke='%236586c3' stroke-opacity='.26'/%3E%3C/svg%3E");
  --kraft-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .42' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .19 0 0 0 0 .08 .7 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23k)'/%3E%3C/svg%3E");
  --kraft-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .9 0 0 0 0 .78 .5 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23q)'/%3E%3C/svg%3E");
  --hachura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-1 3L3 -1M-1 13L13 -1M7 11L11 7' stroke='%2313239f' stroke-width='1.7'/%3E%3C/svg%3E");
  --marca-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M3 15C70 9 160 12 297 8l-3 40c-96 4-190 2-289 5Z' fill='%23fdd137' fill-opacity='.93'/%3E%3Cpath d='M12 22c92-5 184-4 276-6M9 42c96-2 190-2 282-4' stroke='%23fde58a' stroke-width='5' fill='none' stroke-opacity='.75'/%3E%3C/svg%3E");
  --furo-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='60'%3E%3Ccircle cx='15' cy='30' r='7.2' fill='%23ddd3bd'/%3E%3Cpath d='M8.3 28.4a7.2 7.2 0 0 1 11.6-4.8' stroke='%23a99c80' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --linha-caneta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6C80 3 160 5.4 240 3.8S360 4.9 399 3.6' stroke='%2313239f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  --carimbo-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.45'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E");
  --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 21c3 3 6 6 8 9 5-9 10-16 16-23' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cursor-caneta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 28l3-9L22 4l6 6L13 25z' fill='%23fdfbf6' stroke='%2313239f' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 28l3-9 6 6z' fill='%2313239f'/%3E%3C/svg%3E") 4 28, crosshair;

  /* bordas rasgadas (recortes feitos a mao) */
  --rasgo-tira: polygon(1.5% 8%, 6% 0, 14% 6%, 23% 1%, 31% 7%, 42% 2%, 51% 8%, 60% 1%, 71% 6%, 80% 0, 89% 7%, 97% 2%, 100% 14%, 98.5% 34%, 100% 55%, 98% 76%, 100% 100%, 92% 94%, 83% 100%, 74% 94%, 63% 99%, 54% 93%, 44% 100%, 35% 94%, 24% 100%, 15% 93%, 6% 99%, 0 92%, 1.5% 70%, 0 48%, 2% 27%);
  --rasgo-nota: polygon(0 1.5%, 9% 0, 20% 1.2%, 33% 0, 47% 1.6%, 61% 0, 74% 1.3%, 87% 0, 100% 1.4%, 99.2% 20%, 100% 41%, 99.1% 63%, 100% 84%, 99.4% 100%, 88% 98.4%, 77% 100%, 64% 98.6%, 51% 100%, 38% 98.2%, 25% 100%, 12% 98.5%, 0 100%, .8% 79%, 0 58%, .9% 37%, 0 17%);
  --rasgo-borda: polygon(0 45%, 2% 20%, 4.5% 55%, 7% 25%, 9.5% 60%, 12% 30%, 15% 58%, 18% 18%, 21% 52%, 24% 28%, 27% 62%, 30% 22%, 33% 55%, 36% 30%, 39% 64%, 42% 25%, 45% 50%, 48% 18%, 51% 58%, 54% 28%, 57% 60%, 60% 24%, 63% 55%, 66% 30%, 69% 62%, 72% 22%, 75% 52%, 78% 30%, 81% 64%, 84% 25%, 87% 55%, 90% 20%, 93% 58%, 96% 28%, 98% 55%, 100% 35%, 100% 100%, 0 100%);
  --rasgo-fita: polygon(0 12%, 5% 0, 9% 14%, 12% 2%, 16% 10%, 20% 0, 80% 0, 84% 12%, 88% 0, 92% 14%, 96% 3%, 100% 12%, 100% 88%, 95% 100%, 91% 86%, 87% 98%, 83% 88%, 79% 100%, 21% 100%, 17% 88%, 13% 100%, 9% 87%, 5% 98%, 0 88%);

  /* revelacao "desenhada": a borda serrilhada varre o bloco da esquerda para a direita */
  --risca-oculto: polygon(-14% -14%, -14% -14%, -11% 4%, -15% 16%, -10% 29%, -14% 41%, -11% 54%, -15% 66%, -10% 79%, -13% 91%, -11% 114%, -14% 114%);
  --risca-visivel: polygon(-14% -14%, 114% -14%, 117% 4%, 113% 16%, 118% 29%, 114% 41%, 117% 54%, 113% 66%, 118% 79%, 115% 91%, 117% 114%, -14% 114%);
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--tinta-2);
  background-color: var(--papel);
  background-image: var(--grao), var(--pauta-img);
  background-size: 240px 240px, 640px var(--linha);
  font-family: var(--f-mao);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--tinta); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.defs-tinta { position: absolute; width: 0; height: 0; overflow: hidden; }

/* margem vermelha dupla e furos do caderno, atras de tudo */
body::before, body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
body::after {
  left: max(6px, calc(50vw - 600px - 34px));
  width: 5px;
  border-left: 1px solid var(--margem);
  border-right: 1px solid var(--margem);
  opacity: .8;
}
body::before {
  display: none;
  left: max(4px, calc(50vw - 600px - 84px));
  width: 30px;
  background: var(--furo-img) 0 12px / 30px 60px repeat-y;
}
@media (min-width: 1320px) { body::before { display: block; } }

.wrap { position: relative; width: min(var(--largura), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { position: relative; width: min(900px, 100% - 2 * var(--gutter)); margin-inline: auto; }

:focus-visible { outline: 3px dashed var(--foco); outline-offset: 4px; }
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1.1rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
}
.skip-link:focus { top: 12px; left: 12px; }

/* ---------- 4. Pecas de papelaria ---------- */

/* fita adesiva: cor solida translucida com as pontas picotadas */
.fita {
  position: absolute;
  z-index: 3;
  width: 96px;
  height: 26px;
  background: var(--fita);
  clip-path: var(--rasgo-fita);
  pointer-events: none;
  rotate: var(--r, -4deg);
}

/* etiqueta de fita com letra de mao: todos os "eyebrows" */
.eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 1rem;
  padding: .28rem .95rem .32rem;
  color: var(--tinta);
  font-family: var(--f-nota);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.15;
  rotate: -1.6deg;
  isolation: isolate;
  transition: rotate .24s steps(3, end);
}
.eyebrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fita);
  clip-path: var(--rasgo-fita);
}
.kraft .eyebrow { color: var(--tinta-kraft); }
.sec-head:hover .eyebrow { rotate: 1.2deg; }

/* letreiro: titulo com volume hachurado de caneta (padrao SVG, nao degrade) */
.letreiro { position: relative; isolation: isolate; }
.letreiro[data-texto]::before {
  content: attr(data-texto) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: .045em .06em;
  color: transparent;
  background: var(--hachura) 0 0 / .3em .3em;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.letreiro.partido::before { content: none; }
.partido .palavra { position: relative; display: inline-block; }
.partido .palavra::before {
  content: attr(data-texto) / "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  translate: .045em .06em;
  color: transparent;
  background: var(--hachura) 0 0 / .3em .3em;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  white-space: nowrap;
}

/* marca-texto: passa da esquerda para a direita, linha por linha */
.marca {
  padding: 0 .12em;
  margin: 0 -.12em;
  background-image: var(--marca-img);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 78%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .marca:not(.line-money .marca):not(.visto) { background-size: 0% 78%; }
.js .marca.visto { transition: background-size .6s cubic-bezier(.3, .7, .2, 1) .1s; }

/* nota de margem (Caveat) */
.nota {
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--tinta);
}

/* tracos desenhados (setas, chao): cada <path> leva pathLength="1" no HTML, entao
   stroke-dasharray: 1 e o comprimento inteiro e o dashoffset de 1 a 0 desenha o traco.
   Sem pathLength, o 1 vira 1 unidade do viewBox (pontilhado) e nada se desenha. */
.traco { overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.traco path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.seta { position: absolute; color: var(--tinta); pointer-events: none; }

/* riscos de caneta (sublinhado e circulo) desenhados pelo js/riscos.js */
.risco-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.risco-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.risco-svg.desenhado path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, .55s) cubic-bezier(.45, .1, .3, 1) var(--atraso, 0s); }

/* tremido de traco (boil): 3 filtros de ruido trocando a 10 quadros por segundo */
.ferve { animation: ferve .3s steps(1, end) infinite; }
@keyframes ferve {
  0% { filter: url(#ferve-1); }
  33.333% { filter: url(#ferve-2); }
  66.666% { filter: url(#ferve-3); }
}

/* recorte chacoalhando no hover (10 quadros por segundo) */
@keyframes treme {
  0% { rotate: var(--r0, 0deg); }
  33.333% { rotate: calc(var(--r0, 0deg) + .45deg); }
  66.666% { rotate: calc(var(--r0, 0deg) - .35deg); }
}
/* fervura leve para recortes grandes: 8 quadros por segundo */
@keyframes ferve-recorte {
  0% { rotate: 0deg; }
  33.333% { rotate: .14deg; }
  66.666% { rotate: -.11deg; }
}
/* bilhete boiando, balanco de recorte, seta cutucando: tudo aos quadros */
@keyframes boia {
  0%, 100% { rotate: var(--r0, -2deg); translate: 0 0; }
  50% { rotate: calc(var(--r0, -2deg) + 1.5deg); translate: 0 -4px; }
}
@keyframes balanca {
  0%, 100% { rotate: var(--r0, 0deg); }
  50% { rotate: calc(var(--r0, 0deg) + 2.4deg); }
}
@keyframes cutuca {
  0%, 68%, 100% { translate: 0 0; }
  78% { translate: 6px 0; }
  88% { translate: 1px 0; }
}
@keyframes sobe-seta {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* recorte de papel com borda rasgada e sombra (sombra no pai, recorte no ::before) */
.recorte {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(1px 3px 2px oklch(.2 .04 60 / .22));
}
.recorte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--recorte);
  clip-path: var(--rasgo-nota);
}

/* folhas coladas sobre o caderno */
.folha {
  position: relative;
  background-color: var(--folha);
  border-radius: 2px 5px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .12), 0 14px 22px -14px oklch(.2 .04 60 / .45);
}
.folha--quadriculada { background-image: var(--quadro-img); background-size: 24px 24px; }

/* papelao */
.kraft {
  color: var(--tinta-kraft);
  background-color: var(--kraft);
  background-image: var(--kraft-grao), var(--kraft-fibra);
  background-size: 200px 200px, 320px 320px;
}
.rasgo { position: absolute; left: 0; right: 0; height: 18px; background: inherit; pointer-events: none; }
.rasgo--topo { top: -17px; clip-path: var(--rasgo-borda); }
.rasgo--base { bottom: -17px; clip-path: var(--rasgo-borda); rotate: 180deg; }

/* imagem desenhada no traco rabisco: fundo #FFFFFF some sobre o papel */
.spot { mix-blend-mode: multiply; }

/* ---------- 5. Tipografia de secao ---------- */
.sec { position: relative; padding: clamp(4.2rem, 9vw, 7.5rem) 0; overflow-x: clip; }
.sec-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.h2 { font-size: clamp(2.05rem, 4.6vw, 3.55rem); line-height: 1.04; letter-spacing: -.005em; }
.lede { max-width: 40rem; margin-top: 1.1rem; font-size: clamp(1.2rem, 1.9vw, 1.42rem); line-height: 1.42; color: var(--tinta-2); text-wrap: pretty; }
.accent { position: relative; color: var(--tinta); }
.kraft .h2, .kraft .lede, .kraft .accent { color: var(--tinta-kraft); }

/* ---------- 6. Botoes ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .8rem 1.5rem .85rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
  font-family: var(--f-mao);
  font-size: clamp(1.28rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-primary {
  background-color: var(--marca);
  background-image: var(--marca-img);
  background-size: 100% 100%;
  box-shadow: 3px 4px 0 var(--tinta);
}
.btn-primary:hover { transform: translateY(-3px) rotate(-1.2deg); box-shadow: 5px 7px 0 var(--tinta); }
.btn-primary:active { transform: translateY(2px) scale(.99); box-shadow: 1px 1px 0 var(--tinta); }
.btn__seta { flex: none; width: 2.1rem; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s steps(3, end); animation: cutuca 2.6s steps(4, end) infinite; }
.btn:hover .btn__seta { transform: translateX(5px); }
.btn-block { display: flex; width: 100%; }
.btn-note {
  margin-top: 1.1rem;
  color: var(--vermelho);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  rotate: -1deg;
}

/* botao de pausar (WCAG 2.2.2): etiqueta de papel presa no canto.
   Visivel 44x44 no minimo; o ::after aumenta o alvo de toque para ~60x60. */
.pausa { display: none; }
.js .pausa {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 44px;
  min-height: 44px;
  padding: .35rem .8rem .35rem .6rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
  box-shadow: 2px 3px 0 oklch(.355 .195 267 / .9);
  font-family: var(--f-mao);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  rotate: 1.4deg;
  transition: transform .2s steps(3, end), box-shadow .2s ease;
}
.pausa:hover { transform: translateY(-2px) rotate(-1.4deg); }
.js .pausa::after { content: ''; position: absolute; inset: -8px; border-radius: 10px; }
.pausa__ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pausa__ico--play { display: none; fill: var(--marca); }
.is-still .pausa__ico--pausa { display: none; }
.is-still .pausa__ico--play { display: block; }
.js.is-reduzido .pausa { display: none; }
@media (max-width: 599px) {
  .js .pausa { padding: .35rem; justify-content: center; }
  .pausa__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 7. Abertura: a folha de tarefas que rasga ---------- */
.abertura { display: none; }
.has-abertura .abertura {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  overflow: hidden;
  cursor: pointer;
  --ritmo: 1;
}
.has-abertura.abertura-vista .abertura { --ritmo: .38; }
.abertura.rasgando { pointer-events: none; cursor: default; }
.abertura__folha {
  position: absolute;
  inset: 0;
  background-color: var(--folha);
  background-image: var(--quadro-img);
  background-size: 26px 26px;
}
.abertura__folha::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(34px, 7vw, 96px);
  width: 4px;
  border-left: 1px solid var(--margem);
  border-right: 1px solid var(--margem);
}
.abertura__miolo {
  position: absolute;
  left: clamp(52px, 12vw, 220px);
  right: var(--gutter);
  top: clamp(64px, 13vh, 150px);
}
.abertura__titulo {
  display: inline-block;
  margin-bottom: clamp(18px, 3.4vh, 34px);
  color: var(--tinta);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1;
  border-bottom: 3px solid var(--tinta);
  padding-bottom: .1em;
}
.abertura__lista li {
  display: flex;
  align-items: center;
  gap: .9rem;
  height: clamp(40px, 6.2vh, 56px);
  color: var(--tinta);
  font-size: clamp(1.5rem, 3.1vw, 2.3rem);
  line-height: 1;
  opacity: 0;
  animation: surge-linha .01s linear calc((.12s + var(--i) * .1s) * var(--ritmo)) forwards;
}
.abertura__lista .caixa {
  position: relative;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--tinta);
  border-radius: 3px 5px 2px 4px;
  rotate: -3deg;
}
.abertura__lista .caixa svg {
  position: absolute;
  left: -.12em;
  top: -.34em;
  width: 1.5em;
  height: 1.5em;
  overflow: visible;
  fill: none;
  stroke: var(--vermelho);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.abertura__lista .caixa path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: risca-check .16s steps(3, end) calc((.86s + var(--i) * .1s) * var(--ritmo)) forwards;
}
.abertura__carimbo {
  position: absolute;
  top: clamp(40px, 9vh, 90px);
  right: clamp(0px, 6vw, 110px);
  padding: .5em .8em .45em;
  color: var(--vermelho);
  border: 4px double var(--vermelho);
  border-radius: 6px 3px 7px 4px;
  font-family: var(--f-mao);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  mix-blend-mode: multiply;
  -webkit-mask: var(--carimbo-mascara) 0 0 / 180px 180px;
  mask: var(--carimbo-mascara) 0 0 / 180px 180px;
  opacity: 0;
  transform: rotate(-9deg) scale(1.7);
  animation: bate-carimbo .2s var(--pop) calc(1.62s * var(--ritmo)) forwards;
}
.abertura__nota {
  position: absolute;
  top: calc(clamp(40px, 9vh, 90px) + clamp(3.4rem, 7vw, 5rem));
  right: clamp(8px, 9vw, 160px);
  color: var(--tinta);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  rotate: -5deg;
  opacity: 0;
  animation: surge-linha .01s linear calc(1.95s * var(--ritmo)) forwards;
}
.petala { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform, clip-path; }
.congelada *, .congelada *::before, .congelada *::after { animation: none !important; }
.congelada .abertura__lista li, .congelada .abertura__nota { opacity: 1; }
.congelada .abertura__lista .caixa path { stroke-dashoffset: 0; }
.congelada .abertura__carimbo { opacity: .88; transform: rotate(-8deg); }
.petala__cara { position: absolute; inset: 0; }
.petala__verso { position: absolute; inset: 0; display: none; background: var(--papel-verso); }
.petala__sombra { position: absolute; inset: 0; background: var(--sombra); opacity: 0; }
.petala.virada .petala__cara { display: none; }
.petala.virada .petala__verso { display: block; }
.petala__luz { position: absolute; inset: 0; background: var(--recorte); opacity: 0; }
.petala__fibra { position: absolute; left: 0; top: 0; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.petala__fibra .fibra { stroke: var(--recorte); stroke-width: 5; }
.petala__fibra .fenda { stroke: oklch(.3 .04 60 / .55); stroke-width: 1.3; }
.petala.virada .petala__fibra .fenda { stroke: oklch(.3 .04 60 / .25); }
@keyframes surge-linha { to { opacity: 1; } }
@keyframes risca-check { to { stroke-dashoffset: 0; } }
@keyframes bate-carimbo {
  0% { opacity: 0; transform: rotate(-9deg) scale(1.7); }
  60% { opacity: .92; transform: rotate(-7deg) scale(.96); }
  100% { opacity: .88; transform: rotate(-8deg) scale(1); }
}

/* ---------- 8. Hero: titulo e palco da call ---------- */
:root {
  /* estojo de 4 cores dos personagens (canon Estilo 5) */
  --caneta-azul: #1018ad;
  --caneta-vermelha: #d42a2f;
  --caneta-laranja: #e3611a;
  --caneta-verde: #1f7a34;
  --caneta-roxa: #7a3fb5;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hero { position: relative; padding: clamp(1.2rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.4rem); overflow-x: clip; }
.hero-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.4rem; align-items: end; }
.hero-copy { min-width: 0; }
.hero-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
  padding: .5rem 1rem .55rem .85rem;
  color: var(--tinta);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.15;
  isolation: isolate;
  filter: drop-shadow(1px 2px 1px oklch(.2 .04 60 / .22));
  rotate: -1.4deg;
}
.hero-kicker::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--recorte);
  clip-path: var(--rasgo-tira);
}
.hero-kicker .dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 55% 45% 52% 48% / 60% 50% 55% 45%;
  background: var(--vermelho);
  animation: pisca 1.6s steps(2, end) infinite;
}
@keyframes pisca { 50% { opacity: .25; } }
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5rem); line-height: 1.02; letter-spacing: -.01em; color: var(--tinta); }
.line-money { display: inline-block; font-size: 1.1em; line-height: 1.12; color: var(--tinta); }
.hero-sub { max-width: 34rem; margin-top: 1rem; color: var(--tinta); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.32; text-wrap: pretty; }
.hero-sub .data { position: relative; display: inline-block; padding: 0 .12em; white-space: nowrap; }
.hero-lado { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; gap: .6rem; min-width: 0; }
.nota--hero { max-width: 16rem; --r0: -3deg; rotate: -3deg; }
.seta--hero { position: static; flex: none; width: 58px; color: var(--vermelho); rotate: 8deg; }

/* o palco: folha pautada colada com fita, os dois de pe na linha */
.palco {
  position: relative;
  margin-top: clamp(1.3rem, 3vw, 2.1rem);
  padding: clamp(10px, 1.6vw, 18px) clamp(10px, 1.6vw, 18px) 0;
  background-color: var(--folha);
  background-image: var(--pauta-img);
  background-size: 640px var(--linha);
  border-radius: 2px 5px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .12), 0 14px 22px -14px oklch(.2 .04 60 / .45);
  rotate: -.35deg;
}
.fita--p1 { top: -12px; left: 7%; --r: -5deg; }
.fita--p2 { top: -11px; right: 8%; --r: 4deg; }
.palco__cena { position: relative; aspect-ratio: 330 / 196; --pessoa-base: 41%; }
.palco__tinta { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* sem z-index na figura: ela nao pode virar contexto de empilhamento, senao o multiply
   do desenho nao enxerga o papel do palco e o fundo branco aparece */
/* largura de cada um: a base do palco vezes --larg (o Euriler recebe a razao de aspecto dele sobre a do
   Denderson, para os dois terem a mesma altura) */
.pessoa { position: absolute; bottom: 0; width: calc(var(--pessoa-base) * var(--larg, 1)); margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pessoa--d { left: 1%; }
.pessoa--e { right: 1%; }
.pessoa__pulo { display: block; }
.pessoa__img { width: 100%; mix-blend-mode: multiply; transform-origin: 50% 100%; }
.pessoa__nome {
  position: absolute;
  bottom: 9%;
  z-index: 3;
  padding: .12rem .7rem .16rem;
  color: var(--tinta);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  white-space: nowrap;
  isolation: isolate;
  pointer-events: none;
}
.pessoa__nome::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fita); clip-path: var(--rasgo-fita); }
.pessoa--d .pessoa__nome { left: 4%; rotate: -3deg; }
.pessoa--e .pessoa__nome { right: 4%; rotate: 2.5deg; }
/* lugar reservado do avatar (enquanto a imagem aprovada nao chega): folha em branco com o nome */
.pessoa__vazio {
  display: grid;
  place-items: center;
  aspect-ratio: 789 / 978;
  background: var(--recorte);
  border: 2.5px dashed var(--tinta-2);
  border-radius: 4px 9px 5px 8px;
}
.pessoa__vazio-nome { color: var(--tinta); font-family: var(--f-mao); font-size: clamp(1.6rem, 4.2vw, 3.2rem); line-height: 1; rotate: -4deg; }
.palco__chao { position: relative; z-index: 3; display: block; width: 100%; height: 16px; margin-top: -8px; color: var(--tinta); }
/* o pulo de quem recebe o aviaozinho vai na propria imagem (translate e scale), junto
   das animacoes que ela ja tem: um ancestral com transform quebraria o multiply */
@keyframes pula-pessoa {
  0%, 100% { translate: 0 0; scale: 1; }
  30% { translate: 0 -7%; scale: 1; }
  60% { translate: 0 1%; scale: 1.02 .97; }
}

/* ---------- 9. Secoes ---------- */
.sec { padding: clamp(3rem, 7vw, 5.6rem) 0; }
.sec-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.meta-call { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; color: var(--tinta); font-family: var(--f-nota); font-weight: 600; font-size: 1.4rem; line-height: 1.1; }
.meta-call span { position: relative; }
.meta-call span + span::before { content: '\00b7'; margin-right: 1.1rem; color: var(--vermelho); }
.sec-gravacao { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
/* ordem da pagina: a call, logo abaixo o mapa mental, depois os capitulos */
.sec-capitulos { padding-top: clamp(1.6rem, 4vw, 3rem); }

/* video: foto presa com fita.
   REGRA: moldura, capa e player NUNCA dependem do laco de animacao. Nada de
   opacity 0 esperando a coreografia, e as regras globais de pausa e movimento
   reduzido nao entram na arvore do player. O fundo e papel, nunca preto. */
.video {
  position: relative;
  padding: 10px 10px 34px;
  background: var(--recorte);
  border-radius: 2px 4px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .14), 0 18px 26px -16px oklch(.2 .04 60 / .5);
  rotate: -.5deg;
}
.fita--a { top: -12px; left: -18px; --r: -32deg; width: 92px; }
.fita--b { top: -11px; right: -20px; --r: 28deg; width: 92px; }
.video__tela { position: relative; overflow: hidden; background: var(--recorte); border-radius: 1px; aspect-ratio: 16 / 9; }
.video__player { width: 100%; height: 100%; object-fit: contain; background: var(--recorte); }
/* controles nativos do Chrome: sem a sombra escura em degrade por baixo; no lugar
   dela, uma faixa de tinta solida so na base */
.video__player::-webkit-media-controls-panel { background-image: none; box-shadow: inset 0 -62px 0 oklch(.355 .195 267 / .84); }
.video__capa {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--tinta);
  background-color: var(--recorte);
  background-image: var(--quadro-img);
  background-size: 24px 24px;
  border: 0;
  cursor: pointer;
}
.video__capa[hidden] { display: none; }
.video__capa-titulo {
  position: absolute;
  left: 50%;
  top: 14%;
  translate: -50% 0;
  width: 92%;
  font-family: var(--f-mao);
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  text-align: center;
}
.video__capa-nota {
  position: absolute;
  left: 50%;
  bottom: 12%;
  translate: -50% 0;
  width: 92%;
  color: var(--vermelho);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  text-align: center;
  rotate: -1.5deg;
}
.video__play {
  position: absolute;
  top: 52%;
  left: 50%;
  display: grid;
  width: clamp(70px, 9vw, 104px);
  height: clamp(70px, 9vw, 104px);
  place-items: center;
  translate: -50% -50%;
  transition: transform .24s steps(3, end);
}
.video__play svg { width: 100%; height: 100%; overflow: visible; }
.video__play-roda { fill: var(--recorte); stroke: var(--tinta); stroke-width: 3.2; stroke-linecap: round; }
.video__play-tri { fill: var(--marca); stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.video__capa:hover .video__play { transform: scale(1.08) rotate(-4deg); }
.video__capa:focus-visible { outline: 3px dashed var(--foco); outline-offset: -8px; }
.video__legenda { position: absolute; left: 14px; right: 14px; bottom: 4px; color: var(--tinta-2); font-family: var(--f-nota); font-weight: 600; font-size: 1.2rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* capitulos: folha pautada com margem vermelha */
.capitulos-folha {
  position: relative;
  padding: 1.3rem 1rem 1rem 2.6rem;
  background-color: var(--recorte);
  background-image: var(--pauta-img);
  background-size: 640px var(--linha);
  background-position: 0 .5rem;
  border-radius: 2px 5px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .14), 0 14px 22px -14px oklch(.2 .04 60 / .45);
  rotate: .4deg;
}
.capitulos-folha::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.7rem;
  width: 4px;
  border-left: 1px solid var(--margem);
  border-right: 1px solid var(--margem);
  pointer-events: none;
}
.fita--c { top: -13px; left: 50%; margin-left: -48px; --r: -2deg; }
.capitulos-topo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .5rem; }
.capitulos-titulo { color: var(--tinta); font-size: 1.7rem; line-height: 1.1; }
.capitulos-dica { color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.2rem; line-height: 1.1; rotate: -1deg; }
.capitulos-lista { position: relative; overscroll-behavior: contain; }
.capitulos-lista li { position: relative; padding: .15rem 0 .35rem; }
.cap {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  min-height: 44px;
  padding: .45rem .3rem .3rem 0;
  color: var(--tinta);
  background: none;
  border: 0;
  border-radius: 3px;
  font-family: var(--f-mao);
  font-size: 1.16rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.cap__tempo { flex: none; min-width: 4.1rem; color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.28rem; line-height: 1.1; }
.cap__titulo { padding: 0 .12em; margin: 0 -.12em; background-image: var(--marca-img); background-repeat: no-repeat; background-position: 0 60%; background-size: 0% 78%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.3, .7, .2, 1); }
.cap:hover .cap__titulo { text-decoration: underline wavy var(--vermelho) 1.5px; text-underline-offset: .22em; }
.capitulos-lista li.atual .cap__titulo { background-size: 100% 78%; }
.capitulos-lista li.atual::before {
  content: '';
  position: absolute;
  left: -1.95rem;
  top: .72rem;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--vermelho);
  -webkit-mask: var(--check-img) 0 0 / 100% 100%;
  mask: var(--check-img) 0 0 / 100% 100%;
}
.cap__desc { margin: 0 0 .2rem calc(4.1rem + .75rem); color: var(--tinta-2); font-size: 1.02rem; line-height: 1.38; text-wrap: pretty; }

/* lista longa no celular e no tablet: os 8 primeiros e o botao para ver todos (so com JS) */
.capitulos-mais {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: .6rem 0 .2rem;
  padding: .3rem 1rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
  box-shadow: 2px 3px 0 var(--tinta);
  font-family: var(--f-mao);
  font-size: 1.15rem;
  cursor: pointer;
}
.capitulos-mais[hidden] { display: none; }
@media (max-width: 1099px) {
  .js .capitulos-folha:not(.aberta) .capitulos-lista li:nth-child(n+9) { display: none; }
}
@media (min-width: 1100px) {
  .capitulos-mais { display: none; }
}

/* ---------- 10. Mapa mental (motor da apostila com a pele rabisco) ---------- */
.sec-mapa { padding-top: clamp(1.6rem, 4vw, 3rem); }
.gv-mapa { position: relative; min-width: 0; max-width: 100%; }
.gv-mapa .mm-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.gv-mapa .mm-head-l { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-width: 0; }
.gv-mapa .mm-count { color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.45rem; line-height: 1; rotate: -2deg; }
.gv-mapa .mm-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gv-mapa .mm-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .85rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
  box-shadow: 2px 3px 0 var(--tinta);
  font-family: var(--f-mao);
  font-size: 1.12rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s steps(3, end), box-shadow .2s steps(3, end);
}
.gv-mapa .mm-tools button:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 3px 5px 0 var(--tinta); }
.gv-mapa .mm-tools button:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--tinta); }
.gv-mapa .mm-tools button.is-icon { width: 44px; padding: 0; }
.gv-mapa .mm-tools button[aria-pressed="true"] { background-color: var(--marca); background-image: var(--marca-img); background-size: 100% 100%; }
.gv-mapa .mm-tools svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gv-mapa .mm-hint { margin: 0 0 .8rem; color: var(--tinta-2); font-family: var(--f-nota); font-weight: 600; font-size: 1.28rem; line-height: 1.15; }
.gv-mapa .mm-box {
  position: relative;
  height: clamp(420px, 66vh, 660px);
  height: clamp(420px, 66svh, 660px);
  overflow: hidden;
  background-color: var(--recorte);
  background-image: var(--quadro-img);
  background-size: 24px 24px;
  border-radius: 2px 5px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .14), 0 18px 26px -16px oklch(.2 .04 60 / .5);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.gv-mapa .mm-box:focus-visible { outline: 3px dashed var(--foco); outline-offset: 4px; }
.gv-mapa .mm-box.is-dragging { cursor: grabbing; }
.gv-mapa.is-compact .mm-box { height: clamp(400px, 64vh, 560px); height: clamp(400px, 64svh, 560px); }
.gv-mapa .mm-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: var(--tinta); font-size: 1.3rem; text-align: center; }
.gv-mapa .mm-status button { min-height: 44px; padding: 0 1rem; color: var(--tinta); background: var(--recorte); border: 2px solid var(--tinta); border-radius: var(--r-botao); cursor: pointer; }
.gv-mapa .mm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.gv-mapa .mm-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.gv-mapa .mm-links path { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.gv-mapa .mm-links path.mm-fina { stroke-width: 1.9; stroke-opacity: .6; }
.gv-mapa .mm-node {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: 270px;
  padding: 6px 12px 7px;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--mm-acc, var(--tinta));
  border-radius: 3px 8px 4px 7px;
  box-shadow: 2px 3px 0 oklch(.2 .04 60 / .16);
  font-family: var(--f-mao);
  font-size: 1.06rem;
  line-height: 1.28;
  cursor: default;
  overflow-wrap: break-word;
}
.gv-mapa .mm-node[hidden] { display: none; }
.gv-mapa .mm-node.is-branch { padding-right: 20px; cursor: pointer; }
.gv-mapa .mm-node.is-branch:hover { background-color: var(--folha); }
.gv-mapa .mm-d0 {
  max-width: 240px;
  padding: 10px 16px 11px;
  color: var(--tinta);
  background-color: var(--marca);
  background-image: var(--marca-img);
  background-size: 100% 100%;
  border-color: var(--tinta);
  box-shadow: 3px 4px 0 var(--tinta);
  font-size: 1.3rem;
  line-height: 1.12;
}
.gv-mapa .mm-d1 { max-width: 280px; font-size: 1.14rem; }
.gv-mapa .mm-d2 { border-width: 1.5px; }
.gv-mapa .mm-d3 { border-width: 1.5px; border-style: dashed; color: var(--tinta-2); font-size: 1rem; }
.gv-mapa .mm-label { display: inline; border-radius: 3px; }
.gv-mapa .mm-label[role=button] { cursor: pointer; }
.gv-mapa .mm-label:focus-visible { outline: 3px dashed var(--foco); outline-offset: 2px; }
.gv-mapa .mm-badge {
  position: absolute;
  right: -13px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 23px;
  padding: 0 6px;
  box-sizing: border-box;
  translate: 0 -50%;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--mm-acc, var(--tinta));
  border-radius: 55% 45% 52% 48% / 60% 50% 55% 45%;
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  pointer-events: none;
}
.gv-mapa .mm-node.is-open .mm-badge { font-size: 0; }
.gv-mapa .mm-node.is-open .mm-badge::before { content: ''; display: block; width: 9px; height: 2.4px; border-radius: 2px; background: var(--tinta); }
.gv-mapa .mm-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: 1px;
  margin: 0 0 0 7px;
  padding: 1px 7px 2px 5px;
  color: var(--vermelho);
  background: var(--recorte);
  border: 1.5px solid var(--vermelho);
  border-radius: 4px 6px 3px 5px;
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  cursor: pointer;
  white-space: nowrap;
  rotate: -2deg;
}
.gv-mapa .mm-time svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.gv-mapa .mm-time:hover { color: var(--recorte); background: var(--vermelho); }
.gv-mapa.is-compact .mm-d0 { max-width: 150px; padding: 8px 11px; font-size: 1.12rem; }
.gv-mapa.is-compact .mm-d1 { max-width: 200px; font-size: 1.04rem; }
.gv-mapa.is-compact .mm-d2, .gv-mapa.is-compact .mm-d3 { max-width: 215px; }
.gv-mapa.is-compact .mm-tools .mm-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gv-mapa.is-compact .mm-tools button { width: 44px; padding: 0; }

/* ---------- 11. Rodape (contracapa de papelao) ---------- */
.rodape { position: relative; margin-top: clamp(2.6rem, 6vw, 4.4rem); padding: 3rem 0 3.6rem; overflow-x: clip; }
.rodape p { max-width: 52rem; margin-bottom: .5rem; color: var(--tinta-kraft); font-size: 1.1rem; line-height: 1.45; }
.rodape .mono { font-family: var(--f-nota); font-weight: 600; font-size: 1.35rem; }

/* ---------- 12. Coreografia de entrada do hero ----------
   Enquanto a classe .acorda nao chega (a abertura ainda esta na tela), as pecas
   esperam escondidas. O VIDEO NAO ENTRA AQUI: ele nasce visivel. */
.js:not(.acorda) .hero-kicker,
.js:not(.acorda) .hero-sub,
.js:not(.acorda) .nota--hero,
.js:not(.acorda) .palco,
.js:not(.acorda) .pessoa__img,
.js:not(.acorda) .pessoa__nome { opacity: 0; }
.js:not(.acorda) .partido .palavra { clip-path: inset(-35% 100% -35% -8%); }
.js:not(.acorda) .line-money .marca { background-size: 0% 78%; }
.js:not(.acorda) .hero .traco path { stroke-dashoffset: 1; }

.acorda .hero-kicker { animation: cola-tira .42s steps(4, end) .05s both; }
.acorda .partido .palavra { animation: escreve-palavra .3s steps(4, end) calc(.22s + var(--i) * 48ms) both; }
.acorda .line-money .marca { animation: passa-marca .6s cubic-bezier(.3, .7, .2, 1) calc(.3s + var(--n, 4) * 48ms) both; }
.acorda .hero-sub { animation: escreve-bloco .6s steps(6, end) .6s both; }
.acorda .nota--hero { animation: escreve-bloco .5s steps(5, end) 1.1s both, boia 3.4s steps(6, end) 2.2s infinite; }
.acorda .hero .traco path { animation: desenha .6s cubic-bezier(.45, .1, .3, 1) 1.2s both; }
.acorda .seta--hero path:nth-child(2) { animation-delay: 1.75s; animation-duration: .3s; }
.acorda .palco { animation: cai-foto .5s steps(5, end) .3s both; }
.acorda .palco__chao path { animation-delay: .7s; }
.acorda .pessoa--d .pessoa__img { animation: levanta .72s steps(6, end) .85s both, ferve-recorte .375s steps(1, end) 1.7s infinite; }
.acorda .pessoa--e .pessoa__img { animation: levanta .72s steps(6, end) 1.1s both, ferve-recorte .375s steps(1, end) 1.95s infinite; }
.acorda .pessoa--d.pula .pessoa__img { animation: levanta .72s steps(6, end) .85s both, ferve-recorte .375s steps(1, end) 1.7s infinite, pula-pessoa .6s steps(6, end); }
.acorda .pessoa--e.pula .pessoa__img { animation: levanta .72s steps(6, end) 1.1s both, ferve-recorte .375s steps(1, end) 1.95s infinite, pula-pessoa .6s steps(6, end); }
.acorda .pessoa--d .pessoa__nome { animation: cola-tira .42s steps(4, end) 1.45s both; }
.acorda .pessoa--e .pessoa__nome { animation: cola-tira .42s steps(4, end) 1.7s both; }

@keyframes cola-tira {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.3) translateY(-16px); }
  45% { opacity: 1; transform: rotate(1deg) scale(.97); }
  70% { transform: rotate(-2deg) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes escreve-palavra { from { clip-path: inset(-35% 100% -35% -8%); } to { clip-path: inset(-35% -10% -35% -8%); } }
@keyframes passa-marca { from { background-size: 0% 78%; } to { background-size: 100% 78%; } }
@keyframes escreve-bloco { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes cai-foto {
  0% { opacity: 0; transform: translateY(-14px) rotate(-2.5deg) scale(1.03); }
  60% { opacity: 1; transform: translateY(2px) rotate(.4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes levanta {
  0% { opacity: 1; transform: perspective(1100px) rotateX(86deg); }
  60% { transform: perspective(1100px) rotateX(-9deg); }
  80% { transform: perspective(1100px) rotateX(4deg); }
  100% { opacity: 1; transform: perspective(1100px) rotateX(0deg); }
}
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- 13. Revelacao desenhada no scroll ----------
   So o que nasce abaixo da dobra recebe .pre (js/main.js). Depois de revelado o
   bloco perde o recorte (.feito), para fita e sombra aparecerem inteiras. */
.js .reveal.pre > :not(.fita) { clip-path: var(--risca-oculto); transition: clip-path .8s steps(8, end); }
.js .reveal.pre.in > :not(.fita) { clip-path: var(--risca-visivel); }
.js .reveal.pre.in.feito > :not(.fita) { clip-path: none; }
.js .reveal.pre > :nth-child(2) { transition-delay: .1s; }
.js .reveal.pre > :nth-child(3) { transition-delay: .2s; }
.js .reveal.pre > :nth-child(n+4) { transition-delay: .3s; }

/* ---------- 14. Pausado e movimento reduzido ----------
   Tudo termina no quadro final. A arvore do video fica FORA dessas regras
   (:not(.video *)), e o mapa mental e os capitulos respondem na hora. */
.is-still *:not(.video *), .is-still *:not(.video *)::before, .is-still *:not(.video *)::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}
.is-still .reveal.pre > * { clip-path: none !important; }
.is-still .ferve { filter: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.video *), *:not(.video *)::before, *:not(.video *)::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal.pre > * { clip-path: none !important; }
  .ferve { filter: none; }
}

/* ---------- 15. Tablet e desktop ---------- */
@media (min-width: 600px) {
  .palco__cena { aspect-ratio: 760 / 380; --pessoa-base: 33%; }
  .pessoa--d { left: 3%; }
  .pessoa--e { right: 3%; }
}
@media (min-width: 960px) {
  .hero-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .hero-lado { justify-content: flex-end; padding-bottom: .6rem; }
  .palco__cena { aspect-ratio: 1164 / 452; --pessoa-base: 29%; }
  .pessoa--d { left: 5%; }
  .pessoa--e { right: 5%; }
}
@media (min-width: 1100px) {
  /* folha na largura toda: duas colunas, a ordem desce pela primeira e segue na segunda */
  .capitulos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--linhas, 20), auto); grid-auto-flow: column; column-gap: 3.4rem; }
}

/* ---------- 16. Celular ---------- */
@media (max-width: 599px) {
  .hero { padding-top: 1.1rem; }
  .hero-copy { padding-right: 38px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.7rem); line-height: 1.04; }
  .hero-kicker { font-size: .98rem; padding: .45rem .8rem .5rem .7rem; }
  .hero-lado { display: none; }
  .pessoa__nome { bottom: 6%; }
  .fita--a { left: -10px; width: 74px; }
  .fita--b { right: -10px; width: 74px; }
  .h2 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .lede { font-size: 1.2rem; }
  .capitulos-folha { padding-left: 2.3rem; }
  .capitulos-folha::before { left: 1.45rem; }
  .cap { font-size: 1.1rem; }
  .cap__desc { margin-left: 0; }
  .meta-call { gap: .3rem 1.2rem; }
  .meta-call span + span::before { content: none; }
}