/* ==========================================================================
   Imersao Agente de IA na Pratica, versao caderno
   Papel pautado, caneta azul, marca-texto, fita adesiva e papelao.
   Regras da casa: nenhum degrade de cor, nenhum travessao, nenhum emoji.
   Toda textura e SVG com ruido ou traco; toda cor e solida.
   ========================================================================== */

/* ---------- 1. Fontes (servidas pelo proprio dominio) ---------- */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/patrick-hand-400-latin.woff2?v=76d44cf2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/caveat-600-latin.woff2?v=76d44cf2) 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, lotes travados */
  --tinta-kraft: oklch(.270 .070 262);   /* texto sobre papelao */

  /* materiais */
  --marca: oklch(.875 .165 92);          /* marca-texto */
  --marca-2: oklch(.905 .120 95);
  --kraft: oklch(.715 .072 70);
  --kraft-escuro: oklch(.640 .075 66);
  --kraft-borda: oklch(.860 .060 80);
  --fita: oklch(.905 .030 88 / .82);
  --margem: oklch(.760 .085 18);
  --pauta: oklch(.620 .100 262);
  --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-papel: 3px 6px 3px 5px;
  --r-botao: 5px 9px 4px 7px;

  /* curvas */
  --saida: cubic-bezier(.2, .8, .2, 1);
  --escrita: cubic-bezier(.6, .05, .3, 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");
  --hachura-kraft: 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='%23132548' 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");
  --pontilhado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Ccircle cx='3' cy='3' r='1.2' fill='%23314996' fill-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");
  --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 { 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; }
b, strong { font-weight: 400; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 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;
  letter-spacing: .01em;
  rotate: -1.6deg;
  isolation: isolate;
}
.eyebrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fita);
  clip-path: var(--rasgo-fita);
}
.kraft .eyebrow { color: var(--tinta-kraft); }

/* letreiro: titulo com volume hachurado de caneta (sem degrade: e um padrao SVG) */
.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, sublinhados): stroke-dashoffset + tremidinha */
.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; }
.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); }
.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); }
}

/* tremidinha de recorte (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; }
.folha--pautada { background-image: var(--pauta-img); background-size: 640px var(--linha); }

/* 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; }

/* placeholder das imagens que ainda nao chegaram */
img[data-ph] { background: transparent; }

/* ---------- 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; }
.h3 { font-size: clamp(1.32rem, 2vw, 1.5rem); line-height: 1.18; color: var(--tinta); }
.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); }
.money { color: var(--tinta); }
.kraft .h2, .kraft .h3, .kraft .lede, .kraft .money, .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:disabled { cursor: not-allowed; opacity: .6; }
.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); }
.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 */
.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 ---------- */
.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 ---------- */
.hero { position: relative; padding: clamp(1.4rem, 4.5vw, 3.6rem) 0 clamp(2.6rem, 6vw, 4.6rem); overflow-x: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "video" "time" "side";
  row-gap: clamp(1.8rem, 5vw, 2.6rem);
}
.hero-main { display: contents; }
.hero-copy { grid-area: copy; min-width: 0; }
.hero-figure { grid-area: video; position: relative; min-width: 0; }
.hero-time { grid-area: time; position: relative; min-width: 0; margin: 0; }
.hero-side { grid-area: side; display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }

.hero-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.3rem;
  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.1rem, 4.6vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.line-money { display: block; margin-top: .12em; font-size: 1.14em; line-height: 1.12; color: var(--tinta); }
.hero-sub { color: var(--tinta-2); font-size: clamp(1.18rem, 1.6vw, 1.32rem); line-height: 1.45; text-wrap: pretty; }
.hero-sub--grande { margin-top: 1.15rem; font-size: clamp(1.32rem, 2.2vw, 1.62rem); line-height: 1.3; color: var(--tinta); }

/* video: foto presa com fita */
.hero-figcap {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 0 .9rem .4rem;
  color: var(--tinta);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  rotate: -2.2deg;
}
.hero-figcap b { position: relative; color: var(--vermelho); }
.seta { position: absolute; color: var(--tinta); pointer-events: none; }
.seta--video { width: 92px; left: 12.5rem; top: -.3rem; rotate: 6deg; z-index: 2; }
.hero-bezel {
  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: -.6deg;
}
.fita--a { top: -12px; left: -18px; --r: -32deg; width: 92px; }
.fita--b { top: -11px; right: -20px; --r: 28deg; width: 92px; }
.hero-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--recorte);
  border-radius: 1px;
}
.hero-video vturb-smartplayer { display: block; width: 100%; }
/* o placeholder do player vem com fundo preto no estilo inline (copiado da
   original, intocado); por cima dele a capa segura o quadro ate o primeiro
   quadro do video, em qualquer estado (normal, pausado, movimento reduzido) */
.hero-video .vturb-player-placeholder {
  background-color: var(--recorte) !important;
  background-image: url(../img/capa-video-960.webp?v=108ac1fa) !important;
  /* mesma largura que a capa ja baixou (1x no desktop, 2x no celular): sem download extra */
  background-image: image-set(url(../img/capa-video-640.webp?v=52f941fd) 1x, url(../img/capa-video-960.webp?v=108ac1fa) 2x) !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-blend-mode: multiply;
}
.vturb-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--recorte);
  border: 0;
  cursor: pointer;
}
.vturb-facade[hidden] { display: none; }
.vturb-facade img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vturb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(76px, 10vw, 104px);
  height: clamp(76px, 10vw, 104px);
  place-items: center;
  translate: -50% -50%;
  transition: transform .24s steps(3, end);
}
.vturb-play svg { width: 100%; height: 100%; overflow: visible; }
.vturb-play__roda { fill: var(--recorte); stroke: var(--tinta); stroke-width: 3.2; stroke-linecap: round; }
.vturb-play__tri { fill: var(--marca); stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; }
.vturb-facade:hover .vturb-play { transform: scale(1.08) rotate(-4deg); }
.vturb-facade:focus-visible { outline: 3px dashed var(--foco); outline-offset: -8px; }

/* o time de pe, recorte pop-up */
.hero-time { align-self: end; padding-top: 2.6rem; }
.hero-time__img {
  width: 100%;
  mix-blend-mode: multiply;
  transform-origin: 50% 96%;
  translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -5px);
  transition: translate .6s var(--saida);
}
.hero-time__chao { width: 100%; height: 14px; margin-top: -10px; color: var(--tinta); }
.nota--time { position: absolute; top: 0; left: 4%; rotate: -3deg; }
.seta--time { width: 74px; left: calc(4% + 13.2rem); top: .3rem; rotate: 10deg; }

/* lista do que a imersao ensina: ficha com caixas marcadas */
.hero-lista-bloco { position: relative; }
.hero-list {
  position: relative;
  padding: 1.6rem 1.35rem 1.35rem;
  background-color: var(--recorte);
  background-image: var(--pauta-img);
  background-size: 640px var(--linha);
  background-position: 0 1.2rem;
  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: .5deg;
}
.fita--c { top: -13px; left: 50%; margin-left: -48px; --r: -2deg; }
.hero-list .eyebrow { margin: 0 0 .9rem; padding: 0; rotate: 0deg; color: var(--vermelho); font-size: 1.55rem; }
.hero-list .eyebrow::before { content: none; }
.hero-list-items li {
  position: relative;
  padding: .42rem 0 .42rem 2.3rem;
  color: var(--tinta);
  font-size: clamp(1.18rem, 1.8vw, 1.32rem);
  line-height: 1.3;
}
.hero-list-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5rem;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--tinta);
  border-radius: 3px 5px 2px 4px;
  rotate: -3deg;
}
.hero-list-items li::after {
  content: '';
  position: absolute;
  left: .05rem;
  top: .02rem;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--vermelho);
  -webkit-mask: 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") 0 0 / 100% 100%;
  mask: 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") 0 0 / 100% 100%;
}
.js .hero-list:not(.visto) .hero-list-items li::after { clip-path: inset(0 100% 0 0); }
.js .hero-list.visto .hero-list-items li::after { animation: risca-caixa .3s steps(3, end) calc(.25s + var(--i) * .22s) both; }
@keyframes risca-caixa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
.spot { mix-blend-mode: multiply; }
.spot--ensinar { position: relative; float: right; width: clamp(96px, 9vw, 130px); margin: -.6rem -.5rem .2rem .6rem; --r0: 4deg; rotate: var(--r0); }
.hero-list-cta { width: 100%; }

.hero-actions .hero-sub { margin-top: .2rem; }
.proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.proof-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.proof-num { position: relative; display: inline-block; color: var(--tinta); font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1; white-space: nowrap; }
.proof-num > span[data-risco] { position: relative; display: inline-block; padding: .08em .1em; }
.proof-lab { color: var(--tinta-2); font-family: var(--f-nota); font-weight: 600; font-size: 1.28rem; line-height: 1.08; }

/* ---------- 9. Faixa de marca-texto ---------- */
.faixa {
  position: relative;
  overflow: hidden;
  margin: clamp(-.6rem, 1vw, .4rem) 0 0;
  padding: 26px 0 30px;
}
.faixa__fita {
  width: 106%;
  margin-left: -3%;
  padding: .55rem 0 .6rem;
  background-color: var(--marca);
  background-image: var(--pauta-img);
  background-size: 640px 14px;
  rotate: -1.3deg;
  box-shadow: 0 10px 18px -12px oklch(.2 .04 60 / .5);
}
.faixa__trilho { display: flex; width: max-content; animation: faixa 46s linear infinite; }
.faixa span {
  position: relative;
  padding: 0 1.1rem 0 1.6rem;
  color: var(--recorte);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  white-space: nowrap;
  -webkit-text-stroke: .075em var(--tinta);
  paint-order: stroke fill;
}
.faixa span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: .55rem;
  height: .55rem;
  margin-top: -.25rem;
  border-radius: 50%;
  background: var(--tinta);
}
@keyframes faixa { to { transform: translateX(-50%); } }

/* ---------- 10. Tudo que a Naia faz: tabela de precos na folha quadriculada ---------- */
.sec-valor { padding-top: clamp(4.6rem, 10vw, 8rem); }
.folha--precos { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3.2rem); rotate: -.35deg; }
.fita--d { top: -12px; left: 8%; --r: -6deg; }
.fita--e { top: -10px; right: 7%; --r: 5deg; }
.naia-capabilities { display: grid; }
.naia-capability {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem .8rem;
  padding: 1.15rem 0 1.2rem;
  background: var(--linha-caneta) 0 100% / 100% 6px no-repeat;
}
.naia-capability:last-child { background: none; }
.naia-capability h3 { font-size: clamp(1.4rem, 2.1vw, 1.65rem); }
.naia-capability p { color: var(--tinta-2); font-size: 1.14rem; line-height: 1.4; }
.cap-value { display: inline-block; color: var(--tinta); font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.1; white-space: nowrap; }
.cap-label { display: block; color: var(--tinta-2); font-family: var(--f-nota); font-weight: 600; font-size: 1.12rem; line-height: 1.1; }
.naia-capability::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 1.35rem;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--vermelho);
  -webkit-mask: 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") 0 0 / 100% 100%;
  mask: 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") 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .24s steps(3, end);
}
.naia-capability:hover::before, .naia-capability.somado::before { clip-path: inset(0 -10% 0 0); }
.naia-capability:hover h3 { text-decoration: underline wavy var(--vermelho) 1.5px; text-underline-offset: .22em; }

.valor-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.valor-total__conta {
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
  padding: 8px;
  background: var(--recorte);
  border-radius: 2px 4px 3px 2px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .14), 0 14px 22px -14px oklch(.2 .04 60 / .45);
  rotate: 1.2deg;
}
.fita--f { top: -12px; left: 50%; margin-left: -48px; --r: 3deg; }
.conta { width: 100%; height: auto; aspect-ratio: 360 / 330; cursor: pointer; }
.valor-total .lab { color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.55rem; line-height: 1.1; margin-bottom: .45rem; }
.valor-total__texto p:not(.lab) { max-width: 30rem; color: var(--tinta-2); font-size: 1.22rem; }
.valor-total .big { position: relative; justify-self: start; color: var(--tinta); font-size: clamp(3.2rem, 8vw, 5.4rem); line-height: 1; white-space: nowrap; }
.valor-total .big .marca { padding-inline: .15em; margin-inline: -.15em; }

/* ---------- 11. O time (papelao) ---------- */
.sec-time { padding: clamp(5rem, 10vw, 8rem) 0 clamp(5rem, 10vw, 8rem); margin-top: 1rem; }
.sec-time .sec-head { margin-bottom: 1.4rem; }
.time-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.recorte--spot { justify-self: end; width: min(62%, 250px); padding: 14px 16px 10px; --r0: 3deg; rotate: var(--r0); }
.recorte--spot .spot { width: 100%; }
.fita--g { top: -10px; left: 50%; margin-left: -48px; --r: -4deg; }

.orquestra {
  position: relative;
  margin-bottom: clamp(2.6rem, 6vw, 4rem);
  padding: 10px 10px 12px;
  background: var(--recorte);
  border-radius: 3px 2px 4px 3px;
  box-shadow: 0 2px 2px oklch(.2 .04 60 / .2), 0 22px 30px -18px oklch(.2 .04 60 / .6);
  rotate: -.3deg;
}
.fita--h { top: -13px; left: 5%; --r: -7deg; }
.fita--i { top: -12px; right: 5%; --r: 6deg; }
.orquestra__canvas { width: 100%; height: auto; aspect-ratio: 1100 / 500; cursor: var(--cursor-caneta); touch-action: manipulation; }
.orquestra__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .55rem; padding: .7rem .4rem .1rem; }
.orquestra__rotulo { margin-right: .4rem; color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.5rem; line-height: 1; }
.orquestra__botoes button {
  min-height: 44px;
  padding: .3rem .85rem .35rem;
  color: var(--tinta);
  background: var(--folha);
  border: 2px solid var(--tinta);
  border-radius: var(--r-botao);
  font-size: 1.12rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s steps(3, end), background-color .2s steps(2, end);
}
.orquestra__botoes button:nth-child(odd) { rotate: -1.2deg; }
.orquestra__botoes button:nth-child(even) { rotate: 1deg; }
.orquestra__botoes button:hover, .orquestra__botoes button.ativo { background: var(--marca); transform: translateY(-2px) rotate(-1.5deg); }

.team-figure {
  position: relative;
  margin: 0 0 clamp(2.8rem, 6vw, 4.4rem);
  padding: clamp(10px, 1.6vw, 18px);
  background: var(--recorte);
  border-radius: 2px 4px 3px 2px;
  box-shadow: 0 2px 2px oklch(.2 .04 60 / .2), 0 22px 30px -18px oklch(.2 .04 60 / .6);
  rotate: .4deg;
}
.team-figure img { width: 100%; mix-blend-mode: multiply; }
.fita--j { top: -12px; left: 12%; --r: 8deg; }
.fita--k { bottom: -12px; right: 12%; --r: -5deg; }

.roster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 1.4rem; }
.agent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.35rem 1.15rem 1.2rem;
  background: var(--recorte);
  border-radius: 2px 5px 3px 4px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .18), 0 16px 22px -14px oklch(.2 .04 60 / .55);
  rotate: calc(var(--giro, -.8deg) + var(--tilt, 0deg));
  transition: transform .28s steps(4, end), box-shadow .28s steps(4, end), rotate .3s steps(3, end);
}
.agent:nth-child(3n+2) { --giro: .9deg; }
.agent:nth-child(3n) { --giro: -.4deg; }
.agent:hover { transform: translateY(-6px) rotate(calc(-1 * var(--giro, 0deg))); box-shadow: 0 1px 1px oklch(.2 .04 60 / .18), 0 24px 26px -14px oklch(.2 .04 60 / .55); }
.fita--card { top: -12px; left: 50%; margin-left: -40px; width: 80px; --r: -3deg; }
.agent:nth-child(even) .fita--card { --r: 4deg; }
.agent img { width: 96px; height: 96px; mix-blend-mode: multiply; transform-origin: 50% 100%; }
.agent.pula img { animation: pulinho .6s steps(6, end); }
@keyframes pulinho {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.08, .88); }
  45% { transform: translateY(-22px) rotate(-5deg) scale(.95, 1.06); }
  72% { transform: translateY(0) scale(1.07, .92); }
  100% { transform: translateY(0) scale(1, 1); }
}
.agent-name { color: var(--tinta); font-size: 1.62rem; line-height: 1.05; }
.agent-role { display: block; margin-top: .2rem; color: var(--vermelho); font-family: var(--f-nota); font-weight: 600; font-size: 1.28rem; line-height: 1.05; }
.agent p { margin-top: .55rem; color: var(--tinta-2); font-size: 1.1rem; line-height: 1.42; }
.agent-lead { background-color: var(--recorte); background-image: var(--pauta-img); background-size: 640px var(--linha); }
.agent-lead .agent-name { font-size: clamp(2rem, 3vw, 2.5rem); }
.agent-lead .agent-name > .agent-role { font-size: 1.5rem; }
.agent-lead p { font-size: 1.25rem; }
.agent-lead img { width: 128px; height: 128px; }

.team-final {
  position: relative;
  margin-top: clamp(2.8rem, 6vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.3rem, 4vw, 3rem);
  isolation: isolate;
  filter: drop-shadow(1px 4px 3px oklch(.2 .04 60 / .3));
  rotate: -.6deg;
}
.team-final::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--recorte); background-image: var(--pauta-img); background-size: 640px var(--linha); clip-path: var(--rasgo-nota); }
.fita--l { top: -12px; left: 50%; margin-left: -48px; --r: 2deg; }
.team-final p { color: var(--tinta); font-size: clamp(1.45rem, 2.7vw, 2.1rem); line-height: 1.28; text-wrap: pretty; }
.team-final .money { color: var(--tinta); }

/* ---------- 12. Lotes ---------- */
.sec-lotes { padding-top: clamp(5.4rem, 11vw, 8.6rem); }
.lotes-topo { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.spot--lotes { justify-self: end; width: clamp(150px, 20vw, 250px); margin: -1rem 0 1rem; --r0: -3deg; rotate: var(--r0); }
.lotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; align-items: stretch; }
.lote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.2rem, 2.6vw, 2rem);
  background: var(--recorte);
  border-radius: 3px 6px 4px 3px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .14), 0 16px 24px -16px oklch(.2 .04 60 / .5);
}
.lote.is-open { rotate: -.5deg; background-image: var(--pauta-img); background-size: 640px var(--linha); }
.lote.is-locked { color: var(--lapis); background: var(--folha); rotate: .6deg; }
.lote.is-locked + .lote.is-locked { rotate: -.4deg; }
.fita--m { top: -12px; left: 50%; margin-left: -48px; --r: -3deg; }
.lote-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lote-id { color: var(--tinta); font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1; }
.lote.is-locked .lote-id { color: var(--lapis); }
.lote-state {
  display: inline-block;
  padding: .32em .6em .28em;
  color: var(--lapis);
  border: 3px double currentColor;
  border-radius: 5px 3px 6px 4px;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  rotate: 4deg;
  mix-blend-mode: multiply;
  -webkit-mask: var(--carimbo-mascara) 0 0 / 180px 180px;
  mask: var(--carimbo-mascara) 0 0 / 180px 180px;
}
.lote.is-open .lote-state { color: var(--vermelho); font-size: 1.12rem; rotate: -7deg; }
.js .lote.is-open:not(.visto) .lote-state { opacity: 0; transform: scale(1.35); }
.js .lote.is-open.visto .lote-state { animation: bate-selo .22s var(--pop) .35s both; }
@keyframes bate-selo {
  0% { opacity: 0; transform: scale(1.35); }
  60% { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
.lote-price { margin-top: clamp(1.2rem, 3vw, 2rem); color: var(--lapis); font-size: clamp(3.1rem, 6vw, 4rem); line-height: .95; }
.lote-price sup { margin-right: .08em; font-size: .38em; vertical-align: .95em; }
.lote.is-open .lote-price { color: var(--tinta); font-size: clamp(4.4rem, 10vw, 6.4rem); }
.lote-duo { margin-top: .8rem; color: var(--tinta); font-size: 1.2rem; line-height: 1.35; }
.lote-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .9rem;
  margin-top: 1.1rem;
  padding: .7rem .95rem .75rem;
  border: 2px dashed var(--tinta-2);
  border-radius: 6px 3px 5px 4px;
}
.lote-timer-lab { color: var(--tinta-2); font-family: var(--f-nota); font-weight: 600; font-size: 1.28rem; line-height: 1.1; }
.lote-timer-clock { min-width: 5.2em; color: var(--vermelho); font-size: 1.9rem; line-height: 1; text-align: right; letter-spacing: .03em; }
.lote-note { margin-top: 1rem; color: var(--tinta-2); font-size: 1.14rem; line-height: 1.4; }
.lote.is-locked .lote-note { color: var(--lapis); }
.lote-bullets { margin-top: 1.2rem; padding-top: 1rem; background: var(--linha-caneta) 0 0 / 100% 6px no-repeat; }
.lote-bullets li { display: flex; gap: .6rem; padding: .28rem 0; color: var(--tinta-2); font-size: 1.14rem; line-height: 1.35; }
.lote-bullets i, .form-side i { flex: none; color: var(--vermelho); font-family: var(--f-nota); font-style: normal; font-weight: 600; }
.lote-bullets i { font-size: 1.5rem; line-height: .9; }
.lote-cta-wrap { margin-top: 1.6rem; }
.lote-seal {
  position: relative;
  margin: auto -.6rem 0;
  padding: .7rem 1rem .75rem;
  color: var(--tinta-kraft);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.1;
  text-align: center;
  rotate: -1.6deg;
  isolation: isolate;
}
.lote-seal::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fita); clip-path: var(--rasgo-fita); }
.lote.is-locked .lote-price { margin-bottom: 1.4rem; }
.lote-rule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.4rem;
  color: var(--tinta);
  font-family: var(--f-nota);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  text-align: center;
  rotate: -1deg;
}
.seta--sobe { position: static; flex: none; width: 26px; color: var(--vermelho); }

/* ---------- 13. Inscricao ---------- */
.sec-inscricao { padding-top: clamp(4.4rem, 9vw, 7rem); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.4rem); align-items: start; }
.form-side { position: relative; }
.form-side ul { margin-top: 1.5rem; }
.form-side li { display: flex; gap: 1rem; align-items: baseline; padding: .7rem 0; color: var(--tinta-2); font-size: 1.2rem; line-height: 1.38; background: var(--linha-caneta) 0 100% / 100% 5px no-repeat; }
.form-side li i { position: relative; display: inline-block; min-width: 2.1rem; font-size: 1.5rem; line-height: 1; text-align: center; }
.spot--garanta { width: clamp(150px, 18vw, 230px); margin: 1.4rem 0 0 auto; --r0: 3deg; rotate: var(--r0); }
.form-card {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.2rem) clamp(1.15rem, 3vw, 2rem) clamp(1.3rem, 3vw, 1.9rem);
  background-color: var(--recorte);
  background-image: var(--pauta-img);
  background-size: 640px var(--linha);
  border-radius: 3px 5px 4px 3px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .16), 0 20px 28px -18px oklch(.2 .04 60 / .55);
}
.form-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.1rem;
  width: 1px;
  background: var(--margem);
  opacity: .7;
  pointer-events: none;
}
.fita--n { top: -12px; left: 10%; --r: -5deg; }
.fita--o { top: -12px; right: 10%; --r: 6deg; }
.form-card > p { margin: .5rem 0 1.4rem; color: var(--tinta-2); font-size: 1.12rem; line-height: 1.4; }
.form-card > .h3 { font-size: 1.7rem; }
.duo-flag {
  position: relative;
  z-index: 1;
  margin: 0 0 1.3rem;
  padding: .85rem 1rem .9rem;
  color: var(--tinta);
  background: var(--marca);
  border-radius: 2px 3px 2px 3px;
  box-shadow: 0 1px 1px oklch(.2 .04 60 / .18), 0 10px 14px -10px oklch(.2 .04 60 / .5);
  rotate: -1.4deg;
}
.duo-flag-lab { display: block; font-family: var(--f-nota); font-weight: 600; font-size: 1.35rem; line-height: 1; }
.duo-flag-txt { margin-top: .25rem; font-size: 1.18rem; line-height: 1.3; }
.field { position: relative; z-index: 1; margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .35rem; color: var(--tinta); font-size: 1.12rem; line-height: 1.25; }
.field input {
  width: 100%;
  min-height: 50px;
  padding: .6rem .85rem;
  color: var(--tinta);
  background: var(--recorte);
  border: 2px solid var(--tinta);
  border-radius: 3px 6px 4px 5px;
  font-family: var(--f-mao);
  font-size: 1.2rem;
}
.field input::placeholder { color: oklch(.5 .07 266); opacity: 1; }
.field input:focus { outline: 3px dashed var(--foco); outline-offset: 3px; background: oklch(.975 .04 95); }
.field input:invalid:not(:placeholder-shown) { border-color: var(--vermelho); }
.form-legal { position: relative; z-index: 1; margin-top: .9rem; color: var(--tinta-2); font-size: 1rem; line-height: 1.4; }
.form-done { position: relative; z-index: 1; padding: .6rem 0 .4rem; text-align: center; }
.form-done h3 { margin-bottom: .5rem; }
.form-done p { margin: 0 0 .5rem; color: var(--tinta-2); font-size: 1.15rem; }
.form-done .checkout-head { color: var(--tinta); }
.form-done .btn { margin-top: 1rem; }
.form-done a { position: relative; color: var(--tinta); text-decoration: underline wavy var(--vermelho) 1.5px; text-underline-offset: .2em; }
.form-done a::after { content: ''; position: absolute; top: 50%; right: -4px; left: -4px; height: 44px; transform: translateY(-50%); }
.form-card.is-checkout > h3, .form-card.is-checkout > p, .form-card.is-checkout > .duo-flag { display: none; }
.is-hidden { display: none !important; }
.form-card .btn-primary { font-size: clamp(1.25rem, 2vw, 1.45rem); }

/* ---------- 14. Duvidas ---------- */
.sec-faq { padding-top: clamp(4.4rem, 9vw, 7rem); }
.faq-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; }
.faq-topo .sec-head { margin-bottom: 1.8rem; }
.spot--faq { width: clamp(110px, 16vw, 200px); margin-bottom: 1rem; --r0: 4deg; rotate: var(--r0); }
.faq { background: var(--linha-caneta) 0 0 / 100% 6px no-repeat; }
.faq details { background: var(--linha-caneta) 0 100% / 100% 6px no-repeat; }
.faq summary {
  position: relative;
  padding: 1.15rem 3rem 1.15rem .15rem;
  color: var(--tinta);
  font-size: clamp(1.32rem, 2.1vw, 1.55rem);
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none' stroke='%23bc3233' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3.4c-.6 3.1-.1 6.5-.4 9.6-.2 3.1.3 6.2-.2 9.4' stroke-width='3.1'/%3E%3Cpath d='M3.6 13.5c3.2-.6 6.4-.1 9.6-.4 3.1-.3 6.2.3 9.3-.2' stroke-width='3.1'/%3E%3Cpath d='M12.7 4.6c.3 5.6-.3 11 .4 16.4' stroke-width='1.5' stroke-opacity='.55'/%3E%3Cpath d='M4.8 12.5c5.5.6 10.9-.5 16.3.5' stroke-width='1.5' stroke-opacity='.55'/%3E%3C/svg%3E") / "";
  position: absolute;
  top: 50%;
  right: .45rem;
  display: block;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  line-height: 0;
  transition: transform .24s steps(3, end);
  animation: ferve .3s steps(1, end) infinite;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { text-decoration: underline wavy var(--vermelho) 1.5px; text-underline-offset: .25em; }
.faq-body { max-width: 44rem; padding: 0 2.6rem 1.4rem .15rem; color: var(--tinta-2); font-size: 1.18rem; line-height: 1.48; }
.faq details[open] .faq-body { animation: escreve-bloco .5s steps(6, end) both; }
@keyframes escreve-bloco { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }

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

/* ---------- 16. Coreografia de entrada do hero ---------- */
.js:not(.acorda) .hero-kicker,
.js:not(.acorda) .hero-sub--grande,
.js:not(.acorda) .hero-figure,
.js:not(.acorda) .hero-time__img,
.js:not(.acorda) .nota--time,
.js:not(.acorda) .hero-list,
.js:not(.acorda) .spot--ensinar,
.js:not(.acorda) .hero-list-cta,
.js:not(.acorda) .hero-actions { 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, 20) * 48ms) both; }
.acorda .hero-sub--grande { animation: escreve-bloco .6s steps(6, end) .95s both; }
.acorda .hero-figure { animation: cai-foto .5s steps(5, end) .55s both; }
.acorda .hero-time__img { animation: levanta .72s steps(6, end) .75s both, ferve-recorte .375s steps(1, end) 1.6s infinite; }
.acorda .nota--time { animation: escreve-bloco .5s steps(5, end) 1.5s both, boia 3.4s steps(6, end) 2.2s infinite; }
.acorda .hero-list { animation: cai-foto .5s steps(5, end) 1s both; }
.acorda .spot--ensinar { animation: cola-tira .42s steps(4, end) 1.35s both, balanca 3s steps(6, end) 2s infinite; }
.acorda .hero-list-cta { animation: cai-foto .5s steps(5, end) 1.15s both; }
.acorda .hero-actions { animation: escreve-bloco .6s steps(6, end) 1.25s both; }
.acorda .hero .traco path { animation: desenha .6s cubic-bezier(.45, .1, .3, 1) 1.2s both; }
.acorda .hero-time__chao path { animation-delay: .5s; }
.acorda .seta--time path:nth-child(2), .acorda .seta--video path:nth-child(2) { animation-delay: 1.75s; animation-duration: .3s; }

@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 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; } }

/* o time "respira" em stop-motion depois de levantar, e pula no hover */
.acorda .hero-time:hover .hero-time__img { animation: levanta .72s steps(6, end) .75s both, ferve-recorte .375s steps(1, end) 1.6s infinite, pulinho-time .6s steps(6, end); }
@keyframes pulinho-time {
  0%, 100% { transform: perspective(1100px) rotateX(0deg); }
  30% { transform: perspective(1100px) translateY(-12px) rotate(-.7deg); }
  60% { transform: perspective(1100px) translateY(2px) scale(1.012, .985); }
}
.nota--time { --r0: -3deg; }
.hero-figcap { --r0: -2.2deg; animation: boia 3s steps(6, end) 1.8s infinite; }
.btn__seta { animation: cutuca 2.6s steps(4, end) infinite; }
.seta--sobe { animation: sobe-seta 1.6s steps(4, end) infinite; }
.spot--lotes, .spot--garanta, .spot--faq, .recorte--spot { animation: balanca 3.2s steps(6, end) infinite; }
.spot--garanta { animation-delay: -1.1s; }
.spot--faq { animation-delay: -2s; }
.orquestra__rotulo { --r0: -2deg; display: inline-block; animation: boia 3.6s steps(6, end) infinite; }

/* ---------- 17. Revelacao desenhada no scroll ---------- */
.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(4) { transition-delay: .3s; }
.js .reveal.pre > :nth-child(5) { transition-delay: .4s; }
.js .reveal.pre > :nth-child(6) { transition-delay: .5s; }
.js .reveal.pre > :nth-child(n+7) { transition-delay: .6s; }

/* hover que mexe: fichas e etiquetas */
.eyebrow { transition: rotate .24s steps(3, end); }
.sec-head:hover .eyebrow { rotate: 1.2deg; }
.recorte--spot:hover, .spot:not(.spot--ensinar):hover { animation: treme .3s steps(1, end) 3; }
.hero-list:hover { rotate: -.4deg; transition: rotate .24s steps(3, end); }
.duo-flag:hover { rotate: 1deg; transition: rotate .2s steps(3, end); }
.lote.is-open:hover { rotate: .3deg; transition: rotate .24s steps(3, end); }
.team-final:hover, .folha--precos:hover { transition: rotate .3s steps(3, end); }
.team-final:hover { rotate: .4deg; }
.hero-bezel:hover { rotate: .4deg; transition: rotate .28s steps(4, end); }

/* ---------- 18. Pausado e movimento reduzido ---------- */
.is-still *, .is-still *::before, .is-still *::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; }
  *, *::before, *::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; }
  .faixa__trilho { animation: none; }
  .ferve { filter: none; }
}

/* ---------- 19. Tablet e desktop ---------- */
@media (min-width: 600px) {
  .proof-strip { gap: 1.4rem; }
  .valor-total__conta { justify-self: start; }
}
@media (min-width: 720px) {
  .naia-capability { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .naia-capability h3, .naia-capability p { grid-column: 1; }
  .naia-capability .cap-value { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .naia-capability .cap-label { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; max-width: 12rem; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-lead { grid-column: 1 / -1; }
  .agent img { width: 120px; height: 120px; }
  .agent-lead img { width: 170px; height: 170px; }
  .time-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .recorte--spot { width: 220px; }
  .lotes-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .spot--lotes { margin: 0; }
  .valor-total { grid-template-columns: auto minmax(0, 1fr); column-gap: 2.4rem; }
  .valor-total__conta { grid-row: 1 / span 2; width: 340px; }
  .valor-total .big { grid-column: 2; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .hero h1 { font-size: 5.4vw; }
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    grid-template-areas: "copy time" "video side";
    column-gap: clamp(2.4rem, 4.5vw, 4.4rem);
    row-gap: clamp(2rem, 3.5vw, 3rem);
    align-items: start;
  }
  .hero-time { align-self: end; }
  .hero-side { padding-top: .4rem; }
  .lotes { grid-template-columns: 1.3fr 1fr 1fr; gap: 1.6rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent:not(.agent-lead) {
    grid-template-columns: clamp(118px, 11vw, 150px) minmax(0, 1fr);
    grid-template-areas: "foto nome" "texto texto";
    align-items: end;
    column-gap: .9rem;
  }
  .agent:not(.agent-lead) > div { display: contents; }
  .agent:not(.agent-lead) img { grid-area: foto; width: 100%; height: auto; }
  .agent:not(.agent-lead) .agent-name { grid-area: nome; padding-bottom: .5rem; }
  .agent:not(.agent-lead) p { grid-area: texto; margin-top: .7rem; }
  .agent-lead { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 1.8rem 2rem; }
  .agent-lead img { width: 190px; height: 190px; }
  .agent-lead p { max-width: 38rem; }
  .folha--precos { padding-left: clamp(3rem, 5vw, 4.2rem); }
}
@media (min-width: 1180px) {
  /* 2 colunas: cada item fica inteiro (titulo, descricao e preco juntos);
     o setimo fica sozinho na coluna da esquerda */
  .naia-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.4rem; align-items: start; }
}

/* ---------- 20. Celular ---------- */
@media (max-width: 599px) {
  .hero { padding-top: 1.1rem; }
  .hero-copy { padding-right: 38px; }
  .hero h1 { font-size: clamp(1.86rem, 8.4vw, 2.2rem); line-height: 1.06; }
  .hero-sub--grande { font-size: 1.3rem; }
  .hero-kicker { font-size: .98rem; padding: .45rem .8rem .5rem .7rem; }
  .proof-strip { grid-template-columns: 1fr 1fr; row-gap: 1.3rem; }
  .proof-cell:last-child { grid-column: 1 / -1; }
  .seta--video { left: 11.2rem; width: 70px; }
  .seta--time { display: none; }
  .nota--time { position: relative; left: 0; margin-bottom: .4rem; }
  .hero-time { padding-top: .6rem; }
  .fita--a { left: -10px; width: 74px; }
  .fita--b { right: -10px; width: 74px; }
  .faq-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .spot--faq { width: 104px; }
  .h2 { font-size: clamp(1.86rem, 8.2vw, 2.2rem); }
  .lede { font-size: 1.2rem; }
  .orquestra__canvas { aspect-ratio: 358 / 540; }
  .orquestra__rotulo { width: 100%; }
  .naia-capability::before { left: -1.25rem; width: 1.1rem; height: 1.1rem; }
  .agent { padding: 1.2rem 1rem 1.1rem; }
  .agent img { width: 96px; height: 96px; }
  .agent-lead img { width: 116px; height: 116px; }
  .hero-list .spot--ensinar { width: 112px; }
  .lote.is-open .lote-price { font-size: 4.6rem; }
}