/*
 * A página de vendas do Viajante com IA, v2 (13/10/2026).
 * Tokens e fontes do ePassport (src/styles/tokens.css); o que muda por dobra é qual token manda
 * (html[data-tema]). Tudo servido desta pasta.
 */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fontes/oswald-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/space-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fontes/space-mono-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500 600; font-display: swap; src: url('../fontes/cormorant-garamond-var-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fontes/cinzel-var-latin.woff2') format('woff2'); }

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  color-scheme: dark;
  --ink: #0a0f10; --ink2: #0e171a; --ink3: #0b1416;
  --gold: #d8be86; --gold-d: #9c8754; --gold-hi: #f3e7c4; --gold-deep: #a37f1c;
  --cream: #f3ecdc; --smoke: rgba(243, 236, 220, .72); --smoke-2: rgba(243, 236, 220, .58);
  --magenta: #ff2e7e;
  --line: rgba(216, 190, 134, .2); --line-soft: rgba(216, 190, 134, .1);
  --capa: #17233f; --capa-clara: #26386a; --capa-escura: #090f1e;
  --folha: #13201f; --folha-2: #0b1413;
  --grad-papel: linear-gradient(160deg, rgba(243, 236, 220, .04), rgba(243, 236, 220, .01));
  --grad-ouro: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  --brilho-ouro: 0 0 26px rgba(216, 190, 134, .28);
  --f-corpo: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-mono: 'Space Mono', Menlo, 'Courier New', monospace;
  --f-voz: 'Cormorant Garamond', Georgia, serif;
  --f-titulo: 'Cinzel', 'Times New Roman', serif;
  --lado: clamp(16px, 5vw, 48px);
  --largura: 1120px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  /* o fundo do corpo muda por tema (só a cor, que anima) */
  --fundo: var(--ink);
}
html[data-tema="capa"] { --fundo: #0c1427; }
html[data-tema="folha"] { --fundo: #0b1514; }
html[data-tema="noite"] { --fundo: #120b12; }

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body {
  background: url('../img/grao.webp') 0 0 / 80px 80px repeat, var(--fundo);
  background-color: var(--fundo);
  transition: background-color 1.1s var(--curva);
  color: var(--cream);
  font-family: var(--f-corpo);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 6px; }
::selection { background: rgba(216, 190, 134, .35); color: var(--cream); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.caixa { position: relative; width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--lado); }
.olho { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.voz { font-family: var(--f-voz); font-style: italic; font-weight: 500; }
section { position: relative; padding-block: clamp(64px, 9vw, 120px); }
/* a luz de cada dobra: um brilho radial por tema, no próprio section */
section::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
section[data-tema="mesa"]::before { background: radial-gradient(120% 50% at 50% 0%, rgba(13, 61, 69, .45), transparent 60%); }
section[data-tema="capa"]::before { background: radial-gradient(90% 60% at 50% 30%, rgba(38, 56, 106, .5), transparent 65%); }
section[data-tema="folha"]::before { background: radial-gradient(90% 60% at 50% 40%, rgba(22, 41, 42, .8), transparent 65%); }
section[data-tema="noite"]::before { background: radial-gradient(120% 60% at 50% 100%, rgba(255, 46, 126, .12), transparent 65%); }
h2 { font-weight: 400; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; margin-top: 14px; }
h2 em { font-style: normal; color: var(--gold); text-shadow: var(--brilho-ouro); }
.sub { max-width: 44ch; margin-top: 18px; font-size: clamp(1.1rem, 3vw, 1.3rem); line-height: 1.5; color: var(--smoke); }
.centro { text-align: center; }
.centro .sub { margin-inline: auto; }
.nota { font-family: var(--f-mono); font-size: 12px; line-height: 1.7; letter-spacing: .04em; color: var(--smoke-2); }

/* o aparecer: o pagina.js anima com GSAP; sem JavaScript, tudo à vista */
html.js .aparece { opacity: 0; }
html.js .aparece.visto, html.reduz .aparece { opacity: 1; }
/* o texto partido em palavras (o pagina.js embrulha; a máscara é o span de fora) */
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; will-change: transform; }

.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--gold-d); border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); vertical-align: middle; white-space: nowrap; }
.selo-magenta { border-color: var(--magenta); color: var(--magenta); }
.selo-cheio { background: var(--grad-ouro); border-color: transparent; color: #0a0a0a; font-weight: 700; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; text-align: center;
  transition: transform .35s var(--mola), box-shadow .3s var(--curva), background-color .3s, border-color .3s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-ouro { background: var(--grad-ouro); color: #0a0a0a; box-shadow: 0 6px 24px rgba(216, 190, 134, .22), inset 0 1px 0 rgba(255, 255, 255, .45); }
.heroi .btn-ouro::after, .preco .btn-ouro::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 36%; left: -50%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: rasante 5s ease-in-out infinite; }
@keyframes rasante { 0%, 70% { left: -50%; } 100% { left: 130%; } }
.btn-ouro:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 40px rgba(216, 190, 134, .4), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-linha { border: 1px solid var(--gold-d); color: var(--gold-hi); background: rgba(10, 15, 16, .4); }
.btn-linha:hover { border-color: var(--gold); background: rgba(216, 190, 134, .08); }
.btn:active { transform: scale(.97); }
.chamada { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; text-align: center; }
.chamada .nota { max-width: 40ch; }
.preco-cedo { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--smoke); }
.preco-cedo b { font-family: var(--f-corpo); font-weight: 500; font-size: 1.15rem; color: var(--gold); }
.vendo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--smoke-2); }
.vendo i { width: 8px; height: 8px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 0 0 rgba(123, 216, 143, .6); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(123, 216, 143, .6); } 70% { box-shadow: 0 0 0 9px rgba(123, 216, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(123, 216, 143, 0); } }
@media (max-width: 520px) { .chamada .btn { width: 100%; max-width: 360px; } }

/* ==========================================================================
   A BARRA DE PROGRESSO, A FAIXA DO LOTE E O TOPO
   ========================================================================== */
.progresso { position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 2px; transform-origin: left; transform: scaleX(0); background: var(--grad-ouro); box-shadow: 0 0 12px rgba(216, 190, 134, .6); }
.cabeca { position: absolute; left: 0; right: 0; top: 0; z-index: 5; }
.faixa-lote { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px var(--lado); background: linear-gradient(90deg, rgba(216, 190, 134, .14), rgba(255, 46, 126, .12)); border-bottom: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); text-align: center; }
.faixa-lote b { color: var(--magenta); font-weight: 700; }
.faixa-lote .relogio { font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; }
.faixa-lote button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; color: var(--smoke-2); }
.faixa-lote.fechada { display: none; }
@media (max-width: 600px) { .faixa-lote .so-largo { display: none; } .faixa-lote { font-size: 9px; letter-spacing: .06em; padding-right: 40px; } }
.topo { position: relative; z-index: 3; }
.topo .caixa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.topo-logo { display: inline-flex; align-items: center; text-decoration: none; }
.topo-direita { display: flex; align-items: center; gap: 18px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--gold); }
.marca svg { width: 28px; height: 28px; }
.marca span { font-family: var(--f-titulo); font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.topo-link { display: inline-flex; align-items: center; min-height: 42px; white-space: nowrap; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; transition: border-color .3s, background-color .3s; }
.topo-link:hover { border-color: var(--gold-d); background: rgba(216, 190, 134, .06); }
@media (max-width: 640px) { .marca span { display: none; } .topo-link { padding: 0 12px; font-size: 10px; } .sv-mini { --sv: .26; } }

/* a logo do Viajante com IA (decisão de 13/10: o selo de visto): a moldura dupla de carimbo, levemente torta,
   "VIAJANTE COM IA" em Cinzel do mesmo tamanho (o IA em magenta), o avião do app pousado no canto. Escala por --sv. */
.selo-visto { --sv: 1; position: relative; display: inline-grid; justify-items: center; padding: calc(22px * var(--sv)) calc(40px * var(--sv)) calc(18px * var(--sv)); border: calc(2px * var(--sv)) solid var(--gold); border-radius: calc(10px * var(--sv)); transform: rotate(-3deg); color: var(--gold); text-decoration: none; background: rgba(10, 15, 16, .25); }
.selo-visto::before { content: ''; position: absolute; inset: calc(5px * var(--sv)); border: 1px dashed rgba(216, 190, 134, .6); border-radius: calc(7px * var(--sv)); pointer-events: none; }
.sv-nome { font-family: var(--f-titulo); font-weight: 700; font-size: calc(40px * var(--sv)); letter-spacing: .18em; padding-left: .18em; line-height: 1.1; text-align: center; color: var(--gold-hi); }
.sv-nome em { font-style: normal; color: var(--magenta); }
.sv-pe { margin-top: calc(8px * var(--sv)); font-family: var(--f-mono); font-size: calc(10px * var(--sv)); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--gold-d); }
.sv-aviao { position: absolute; right: calc(-18px * var(--sv)); top: calc(-18px * var(--sv)); width: calc(44px * var(--sv)); height: calc(44px * var(--sv)); color: var(--gold-hi); transform: rotate(20deg); filter: drop-shadow(0 0 10px rgba(216, 190, 134, .5)); }
.sv-mini { --sv: .34; transform: rotate(-2deg); }
.sv-mini .sv-pe { display: none; }
.sv-heroi { --sv: 1; margin-bottom: 30px; }
.sv-fim { --sv: .7; margin-bottom: 18px; }
.sv-centro { display: flex; justify-content: center; }
@media (max-width: 640px) { .sv-heroi { --sv: .66; margin-bottom: 24px; } }

html.js:not(.reduz) .aparece-selo { opacity: 0; }
html.js:not(.reduz) .aparece-selo.batido { animation: selo-bate .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes selo-bate { 0% { opacity: 0; transform: scale(1.8) rotate(-12deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }

/* ==========================================================================
   O HERÓI
   ========================================================================== */
.heroi { position: relative; padding-block: 118px 56px; text-align: center; overflow: clip; }
.heroi::before { background: none; }
.heroi-fundo { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.heroi-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .26; }
.heroi-fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 16, .2), rgba(10, 15, 16, .75) 55%, var(--ink)); }
.heroi-luz { position: absolute; left: 50%; top: 28%; z-index: -1; width: min(1100px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(216, 190, 134, .14) 0%, transparent 58%); pointer-events: none; }
.heroi .caixa { display: flex; flex-direction: column; align-items: center; }
.heroi h1 { margin: 0 0 20px; max-width: 16ch; font-weight: 400; font-size: clamp(2.5rem, 9.2vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em; color: var(--gold); text-shadow: var(--brilho-ouro); text-wrap: balance; }
.heroi h1 .mundo { position: relative; color: var(--cream); text-shadow: none; }
.heroi h1 .mundo svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; overflow: visible; }
.heroi h1 .mundo path { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.heroi .sub { max-width: 42ch; margin-bottom: 30px; font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.42; }
.vsl { position: relative; width: 100%; max-width: 880px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px rgba(0, 0, 0, .65), 0 0 0 6px rgba(216, 190, 134, .05); background: var(--capa-escura); }
.vsl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .8; }
.vsl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 16, .05), rgba(10, 15, 16, .72)); }
.vsl-brilho { position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 62%); background-size: 300% 100%; background-position: 100% 0; pointer-events: none; }
.vsl-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(68px, 14vw, 96px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: rgba(216, 190, 134, .28); border: 1.5px solid rgba(243, 231, 196, .7); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.vsl-play svg { color: var(--gold-hi); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.vsl-play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(216, 190, 134, .5); animation: onda 2.4s ease-out infinite; }
@keyframes onda { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.vsl-play svg { width: 36%; height: auto; margin-left: 6%; }
.vsl-aviso { position: absolute; left: 50%; bottom: 7%; z-index: 2; transform: translateX(-50%); padding: 7px 14px; border: 1px solid var(--gold-d); border-radius: 999px; background: rgba(10, 15, 16, .6); font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.vsl-canto { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(10, 15, 16, .6); font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.heroi .chamada { margin-top: 28px; }
.heroi .btn { min-height: 62px; padding-inline: 40px; font-size: 14px; }
/* o teaser da prova, logo abaixo do botão do herói */
.teaser { display: grid; gap: 6px; max-width: 640px; margin-top: 30px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 23, 26, .55); text-decoration: none; text-align: left; transition: border-color .3s, transform .3s var(--curva); }
.teaser:hover { border-color: var(--gold-d); transform: translateY(-2px); }
.teaser-olho { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }
.teaser-texto { font-size: 1.05rem; line-height: 1.45; color: var(--cream); }
.teaser-texto em { font-style: normal; color: var(--gold); }
.teaser-seta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.teaser-seta svg { width: 14px; height: 14px; }
/* a faixa de avisos que desliza */
.avisos { width: 100%; margin-top: 44px; overflow: hidden; border-block: 1px solid var(--line-soft); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.avisos ul { display: flex; gap: 48px; width: max-content; padding: 14px 0; list-style: none; margin: 0; animation: desliza 36s linear infinite; }
.avisos:hover ul { animation-play-state: paused; }
.avisos li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); }
.avisos li svg { width: 16px; height: 16px; color: var(--gold); }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ==========================================================================
   OS DEPOIMENTOS: a esteira, os balões de WhatsApp
   ========================================================================== */
.estrelas { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--smoke); }
.estrelas b { font-family: var(--f-corpo); font-weight: 500; font-size: 1.4rem; color: var(--gold); }
.estrelas svg { width: 92px; height: 16px; color: var(--gold); }
.esteira { display: flex; gap: 16px; margin-top: 36px; padding: 6px var(--lado) 18px; margin-inline: calc(-1 * var(--lado)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.esteira::-webkit-scrollbar { display: none; }
.esteira.arrastando { cursor: grabbing; scroll-snap-type: none; }
.depo { position: relative; flex: 0 0 min(320px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(14, 23, 26, .7); user-select: none; }
.depo-topo { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: var(--grad-ouro); flex: none; }
.avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #16302f, #0a1314); font-weight: 300; font-size: 17px; letter-spacing: .04em; color: var(--gold-hi); }
.depo-quem b { display: block; font-weight: 500; font-size: 16px; }
.depo-quem span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--smoke-2); }
.depo-estrelas { margin-left: auto; width: 70px; height: 12px; color: var(--gold); flex: none; }
.depo p { font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.4; color: var(--cream); flex: 1; }
.depo-resultado { padding-top: 12px; border-top: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
/* os balões de WhatsApp desenhados em HTML */
.zaps { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .zaps { grid-template-columns: repeat(3, 1fr); } }
.zap { padding: 16px; border-radius: 18px; border: 1px solid var(--line-soft); background: #0b1210; display: flex; flex-direction: column; gap: 8px; }
.zap-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--smoke); }
.zap-topo .avatar { width: 30px; height: 30px; }
.zap-topo .avatar span { font-size: 11px; }
.zap-topo i { width: 8px; height: 8px; border-radius: 50%; background: #7bd88f; margin-left: auto; }
.balao { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--cream); background: rgba(243, 236, 220, .07); align-self: flex-start; border-bottom-left-radius: 4px; }
.balao.meu { align-self: flex-end; background: rgba(123, 216, 143, .16); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.balao small { display: block; margin-top: 4px; text-align: right; font-family: var(--f-mono); font-size: 9px; color: var(--smoke-2); }

/* ==========================================================================
   QUEM FALA COM VOCÊ + A FAIXA DE PROVA
   ========================================================================== */
.quem-rapido .caixa { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .quem-rapido .caixa { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.quem-foto { position: relative; max-width: 420px; margin-inline: auto; }
.quem-foto .moldura { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.quem-foto .moldura img { width: 100%; height: 100%; object-fit: cover; }
.quem-foto .carimbo { position: absolute; width: 34%; }
.quem-foto .c1 { right: -8%; top: 6%; transform: rotate(10deg); }
.quem-foto .c2 { left: -10%; top: 44%; transform: rotate(-12deg); }
.quem-foto .c3 { right: -4%; bottom: 8%; transform: rotate(-5deg); }
.quem-linhas { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.quem-linhas li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: baseline; font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--cream); }
.quem-linhas li span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-d); }
.quem-linhas li.destaque { color: var(--gold); }
.prova-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-soft); grid-column: 1 / -1; }
@media (min-width: 800px) { .prova-grade { grid-template-columns: repeat(4, 1fr); } }
.prova-grade b { display: block; font-weight: 300; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: .95; color: var(--gold); text-shadow: var(--brilho-ouro); font-variant-numeric: tabular-nums; }
.prova-grade span { display: block; margin-top: 10px; max-width: 22ch; font-size: 15px; line-height: 1.4; color: var(--smoke); }

/* ==========================================================================
   VOCÊ SE RECONHECE? (as dores)
   ========================================================================== */
.dores-lista { list-style: none; padding: 0; margin: 36px auto 0; max-width: 720px; display: grid; gap: 10px; }
.dores-lista li { padding: 16px 20px 16px 48px; position: relative; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--grad-papel); font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 3.2vw, 1.4rem); line-height: 1.35; color: var(--cream); }
.dores-lista li::before { content: ''; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%; border: 1.5px solid var(--magenta); }
.dores-virada { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: clamp(1.1rem, 2.8vw, 1.25rem); line-height: 1.5; color: var(--smoke); }

/* ==========================================================================
   VOCÊ NÃO PRECISA: a única dobra clara
   ========================================================================== */
.clara { background: var(--cream); color: var(--ink); --line: rgba(10, 15, 16, .14); --line-soft: rgba(10, 15, 16, .08); --smoke: rgba(10, 15, 16, .72); --smoke-2: rgba(10, 15, 16, .55); --gold: #8a6d2a; --gold-hi: #6b5420; --brilho-ouro: none; }
.clara::before { background: radial-gradient(90% 60% at 50% 0%, rgba(216, 190, 134, .4), transparent 60%) !important; }
.clara .grao { position: absolute; inset: 0; background: url('../img/grao.webp') 0 0 / 80px 80px repeat; opacity: .5; mix-blend-mode: multiply; pointer-events: none; }
.clara h2 em { color: #8a6d2a; }
.cartoes { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 760px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }
.cartao { padding: 28px 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .45); box-shadow: 0 20px 50px rgba(10, 15, 16, .08); }
.cartao .risco { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); }
.cartao h3 { margin-top: 10px; font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.cartao h3 s { text-decoration: none; background: linear-gradient(#8a6d2a, #8a6d2a) no-repeat 0 55% / var(--risca, 0%) 3px; }
.cartao p { margin-top: 12px; color: var(--smoke); }

/* ==========================================================================
   A HISTÓRIA, O CASO, AS MARCAS
   ========================================================================== */
.tempo { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .tempo { grid-template-columns: repeat(4, 1fr); } }
.tempo figure { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-soft); }
.tempo img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.tempo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(10, 15, 16, .9)); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.tempo figcaption b { display: block; font-family: var(--f-corpo); font-weight: 300; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--gold); }
@media (max-width: 759px) { .tempo { grid-template-columns: repeat(2, 1fr); } .tempo figure { aspect-ratio: 4 / 5; } }
.virada { margin-top: 64px; display: grid; gap: 28px; }
@media (min-width: 900px) { .virada { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.virada h3 { margin-top: 12px; font-weight: 400; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.1; }
.virada h3 em { font-style: normal; color: var(--gold); }
.caso { display: flex; flex-direction: column; gap: 10px; }
.email { position: relative; max-width: 92%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--grad-papel); }
.email.deles { align-self: flex-start; border-radius: 4px 14px 14px 14px; }
.email.agente { align-self: flex-end; border-radius: 14px 4px 14px 14px; border-color: rgba(216, 190, 134, .4); background: linear-gradient(160deg, #16292a, #0b1514); }
.email-de { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); }
.email.agente .email-de { color: var(--gold); }
.email p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--cream); }
.email .valor { font-family: var(--f-mono); font-size: 13px; color: var(--gold-hi); }
.email.fecho { align-self: center; max-width: 100%; text-align: center; border-color: var(--gold); border-radius: 14px; box-shadow: var(--brilho-ouro); }
.email.fecho .email-de { justify-content: center; }
.marcas { margin-top: 56px; }
.marcas .olho { text-align: center; }
.marcas ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.marcas li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-titulo); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); transition: color .3s; }
.marcas li svg { width: 22px; height: 22px; }
.marcas li:hover { color: var(--gold-hi); }

/* ==========================================================================
   O JEITO COMUM E O JEITO NOVO
   ========================================================================== */
.versus { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 760px) { .versus { grid-template-columns: 1fr 1fr; } }
.versus > div { padding: 28px 26px; border-radius: 20px; border: 1px solid var(--line-soft); }
.versus .novo { border-color: var(--gold-d); background: linear-gradient(160deg, #16292a, #0b1514); box-shadow: var(--brilho-ouro); }
.versus b { display: block; font-weight: 300; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1; color: var(--smoke-2); }
.versus .novo b { color: var(--gold); text-shadow: var(--brilho-ouro); }
.versus small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--smoke-2); }
.versus .novo small { color: var(--gold-hi); }
.versus p { margin-top: 16px; color: var(--smoke); }
.versus ul { margin: 14px 0 0; padding-left: 18px; color: var(--smoke); }
.versus li + li { margin-top: 6px; }

/* ==========================================================================
   A TRIPULAÇÃO
   ========================================================================== */
.tripulacao-grade { position: relative; display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 560px) { .tripulacao-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tripulacao-grade { grid-template-columns: repeat(4, 1fr); } }
.cracha { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 240px; padding: 20px 20px 18px; border-radius: 6px 16px 16px 6px; border: 1px solid rgba(216, 190, 134, .25);
  background: repeating-radial-gradient(circle at 30% 20%, rgba(216, 190, 134, .05) 0 1px, transparent 1px 7px), linear-gradient(160deg, var(--folha), var(--folha-2));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 8px 0 14px -10px rgba(0, 0, 0, .8); transition: transform .4s var(--mola), box-shadow .4s; will-change: transform; }
.cracha:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), var(--brilho-ouro); }
.cracha-topo { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); }
.cracha-topo span:last-child { white-space: nowrap; }
.cracha-fio { height: 1px; margin: 10px 0 16px; background: var(--line); }
.cracha-cabeca { display: flex; align-items: center; gap: 14px; }
.cracha-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--gold-d); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); flex: none; transition: transform .4s var(--mola); }
.cracha:hover .cracha-foto { transform: scale(1.06) rotate(-2deg); }
.cracha-frase { display: block; position: relative; z-index: 1; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--gold-hi); quotes: "\201C" "\201D"; }
.cracha-frase::before { content: open-quote; } .cracha-frase::after { content: close-quote; }
.cracha h3 { font-weight: 400; font-size: 1.4rem; line-height: 1.1; color: var(--gold); }
.cracha h3 small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--smoke-2); margin-top: 4px; }
.cracha p { margin-top: 10px; flex: 1; font-size: 15px; line-height: 1.45; color: var(--smoke); position: relative; z-index: 1; }
.cracha-cabeca { margin-top: 2px; position: relative; z-index: 1; }
.cracha-carimbo { position: absolute; right: -14px; bottom: -14px; width: 76px; opacity: 0; transform: scale(1.7) rotate(-8deg); color: var(--magenta); pointer-events: none; }
.cracha.chefe .cracha-carimbo { color: var(--gold); }
.cracha:hover .cracha-carimbo, .cracha.batido .cracha-carimbo { animation: carimbar .5s cubic-bezier(.2, 1.4, .4, 1) both; opacity: .4; }
.cracha.chefe { border-color: var(--gold); }

/* ==========================================================================
   O PLANO DE VOO: a prateleira de pôsteres
   ========================================================================== */
.prateleira-caixa { position: relative; margin-top: 40px; }
.prateleira { display: flex; gap: 18px; padding: 24px var(--lado) 28px; margin-inline: calc(-1 * var(--lado)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.prateleira::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .prateleira { overflow: visible; margin-inline: 0; padding-inline: 0; justify-content: center; } }
.poster { position: relative; flex: 0 0 min(230px, 62vw); aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; scroll-snap-align: center; border: 1px solid rgba(216, 190, 134, .25); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); background: var(--capa-escura); text-align: left; padding: 0; display: block; transition: transform .45s var(--mola), box-shadow .45s, border-color .3s; will-change: transform; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.poster::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 15, 16, .25), transparent 30%, transparent 45%, rgba(10, 15, 16, .92) 82%); }
.poster-num { position: absolute; left: 14px; top: 10px; z-index: 2; font-family: var(--f-corpo); font-weight: 300; font-size: 3.6rem; line-height: 1; color: rgba(243, 231, 196, .9); text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.poster-selo { position: absolute; right: 12px; top: 14px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(10, 15, 16, .65); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.poster-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px 16px; }
.poster-temporada { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.poster h3 { margin-top: 6px; font-family: var(--f-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--gold-hi); }
.poster-vitoria { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--smoke); }
.poster-aulas { display: none; }
.poster:hover, .poster:focus-visible { transform: translateY(-10px) scale(1.05); z-index: 3; border-color: var(--gold); box-shadow: 0 34px 70px rgba(0, 0, 0, .65), var(--brilho-ouro); }
.poster:hover img { transform: scale(1.06); }
.poster.ativo { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 34px 70px rgba(0, 0, 0, .65); }
.poster-painel { max-width: 760px; margin: 8px auto 0; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, #16292a, #0b1514); display: none; }
.poster-painel.aberto { display: block; }
.poster-painel .painel-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.poster-painel h4 { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.poster-painel .painel-vitoria { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.poster-painel ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 700px) { .poster-painel ol { grid-template-columns: 1fr 1fr; } }
.poster-painel li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.4; color: var(--cream); }
.poster-painel li i { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--gold-d); }
.poster-painel li small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: var(--smoke-2); }
.plano-linha { margin-top: 24px; text-align: center; }
.plano-trilha { position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: -1; background-image: radial-gradient(circle, rgba(216, 190, 134, .5) 1px, transparent 1.5px); background-size: 12px 2px; }

/* ==========================================================================
   A CONTA DO DÓLAR + OS 3 KITS EM LINHA (dentro do Plano de Voo)
   ========================================================================== */
.conta { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line-soft); }
.conta-titulo { font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.08; margin-top: 12px; }
.conta-titulo em { font-style: normal; color: var(--gold); }
.conta-grade { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 760px) { .conta-grade { grid-template-columns: repeat(4, 1fr); } }
.conta-cartao { display: grid; gap: 6px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--grad-papel); }
.conta-cartao svg { width: 26px; height: 26px; color: var(--gold); }
.conta-nome { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); }
.conta-cartao b { font-weight: 300; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1; color: var(--gold); text-shadow: var(--brilho-ouro); }
.conta-como { font-size: 14px; line-height: 1.4; color: var(--smoke); }
.conta-cartao.soma { border-color: var(--gold-d); background: linear-gradient(160deg, #16292a, #0b1514); box-shadow: var(--brilho-ouro); }
.conta .nota { margin-top: 18px; }
.kits-linha { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-soft); }
.kits-linha ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .kits-linha ul { grid-template-columns: repeat(3, 1fr); } }
.kits-linha li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 14px; }
.kits-linha li svg { width: 22px; height: 22px; color: var(--gold); grid-row: span 2; }
.kits-linha li b { font-weight: 500; font-size: 1.05rem; }
.kits-linha li span { font-size: 14px; line-height: 1.4; color: var(--smoke); }
.kits-linha .nota { margin-top: 14px; }

/* ==========================================================================
   OS 3 KITS
   ========================================================================== */
.servicos { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 760px) { .servicos { grid-template-columns: repeat(3, 1fr); } }
.servico { padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--grad-papel); display: flex; flex-direction: column; gap: 10px; transition: transform .4s var(--mola), border-color .3s; }
.servico:hover { transform: translateY(-4px); border-color: var(--gold-d); }
.servico svg { width: 32px; height: 32px; color: var(--gold); }
.servico h3 { font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.servico dl { margin: 0; }
.servico dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); margin-top: 8px; }
.servico dd { margin: 2px 0 0; color: var(--smoke); font-size: 15px; }
.servico .ponte { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--gold-hi); }

/* ==========================================================================
   O APP: o passaporte abre com a rolagem
   ========================================================================== */
.app .caixa { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .app .caixa { grid-template-columns: 1fr 1fr; } }
.app-preco { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--grad-papel); }
.app-preco b { font-weight: 400; color: var(--gold); }
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.widgets img { border-radius: 16px; border: 1px solid var(--line-soft); transition: transform .5s var(--mola); }
.widgets img:hover { transform: translateY(-4px) rotate(-.6deg); }
.widgets .p { aspect-ratio: 1; object-fit: cover; }
.livro-palco { --lw: clamp(170px, 46vw, 250px); --abrir: 0; position: relative; display: flex; justify-content: center; perspective: 1800px; padding-block: 24px; }
@media (min-width: 900px) { .livro-palco { --lw: clamp(220px, 17vw, 250px); } }
.livro-palco::before { content: ''; position: absolute; left: 50%; bottom: 0; width: calc(var(--lw) * 2.3); height: calc(var(--lw) * .32); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.livro-palco::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--lw) * 3); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(216, 190, 134, .1), transparent); pointer-events: none; z-index: -1; }
.livro { position: relative; width: var(--lw); aspect-ratio: 125 / 176; transform-style: preserve-3d; transform: translateX(calc(var(--lw) * .5 * var(--abrir))) rotateX(8deg) rotateZ(-2deg); }
.folha, .capa { position: absolute; inset: 0; border-radius: 4px 14px 14px 4px; }
.folha { overflow: hidden; background: repeating-radial-gradient(circle at 30% 20%, rgba(216, 190, 134, .05) 0 1px, transparent 1px 7px), linear-gradient(160deg, var(--folha), var(--folha-2)); border: 1px solid rgba(216, 190, 134, .22); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 10px 0 18px -10px rgba(0, 0, 0, .8); }
.folha-topo { position: absolute; left: 9%; right: 9%; top: 6%; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: calc(var(--lw) * .034); letter-spacing: .18em; color: var(--gold-d); }
.folha-fio { position: absolute; left: 9%; right: 9%; top: 11%; height: 1px; background: var(--line); }
.folha svg { position: absolute; }
.folha .c-pt { width: 62%; left: 4%; top: 15%; opacity: .92; }
.folha .c-th { width: 70%; right: 1%; bottom: 7%; opacity: 0; }
.livro-palco.batido .folha .c-th { animation: carimbar .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.livro-palco.batido .livro { animation: tremor .22s ease-out .28s; }
@keyframes carimbar { 0% { opacity: 0; transform: scale(1.7) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes tremor { 0%, 100% { translate: 0 0; } 35% { translate: 0 2px; } }
.capa { transform-origin: left center; transform-style: preserve-3d; transform: rotateY(calc(-172deg * var(--abrir))); }
.capa-frente, .capa-verso { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.capa-frente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--lw) * .085); background: radial-gradient(ellipse at 60% 28%, var(--capa-clara) 0%, var(--capa) 45%, var(--capa-escura) 100%); color: var(--gold); box-shadow: 0 34px 70px rgba(0, 0, 0, .6), inset 3px 0 0 rgba(0, 0, 0, .35); }
.capa-frente::before, .capa-frente::after { content: ''; position: absolute; border: 1px solid var(--gold-d); pointer-events: none; }
.capa-frente::before { inset: 7%; border-radius: 5px; opacity: .9; }
.capa-frente::after { inset: calc(7% + 5px); border-radius: 3px; opacity: .5; }
.capa-titulo { font-family: var(--f-titulo); font-weight: 700; font-size: calc(var(--lw) * .1); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; }
.capa-frente .brasao { width: calc(var(--lw) * .34); height: auto; }
.capa-sub { font-family: var(--f-mono); font-size: calc(var(--lw) * .042); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--gold-d); }
.capa-bio { width: calc(var(--lw) * .13); margin-top: calc(var(--lw) * .04); }
.capa-brilho { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .07) 50%, transparent 62%); pointer-events: none; }
.capa-verso { transform: rotateY(180deg); background: linear-gradient(90deg, #1f2e57, #121b33 70%, var(--capa-escura)); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; }
.capa-verso .brasao { width: 30%; color: var(--gold); opacity: .1; }
html.reduz .livro-palco, html:not(.js) .livro-palco { --abrir: 1; }
html.reduz .folha .c-th, html:not(.js) .folha .c-th { opacity: 1; animation: none !important; }
.livro-legenda { margin-top: 10px; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke-2); }
.carimbo { color: var(--gold); overflow: visible; filter: url(#borracha) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.carimbo.sem-filtro { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.carimbo[data-tinta='magenta'] { color: var(--magenta); }
.carimbo[data-tinta='verde'] { color: #7bd88f; }
.carimbo text { fill: currentColor; text-anchor: middle; font-family: var(--f-mono); font-weight: 700; }
.carimbo .c-pais { font-family: var(--f-titulo); font-size: 9px; letter-spacing: 1px; }
.carimbo .c-data { font-size: 12.5px; letter-spacing: .5px; }
.carimbo .c-cod { font-size: 6.5px; letter-spacing: 1.2px; }
.carimbo .c-cid { font-size: 6px; letter-spacing: 1px; opacity: .8; }

/* o app por dentro (adendo 2) */
.app-dentro { grid-column: 1 / -1; margin-top: 24px; padding-top: 40px; border-top: 1px solid var(--line-soft); }
.app-grade { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
@media (min-width: 600px) { .app-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .app-grade { grid-template-columns: repeat(4, 1fr); } }
.app-grade li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--grad-papel); }
.app-grade svg { width: 20px; height: 20px; color: var(--gold); grid-row: span 2; margin-top: 2px; }
.app-grade b { font-weight: 500; font-size: 15px; line-height: 1.25; }
.app-grade span { font-size: 13.5px; line-height: 1.4; color: var(--smoke); }
.app-fecho { margin-top: 22px; text-align: center; font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 3.6vw, 1.6rem); color: var(--gold-hi); }

/* ==========================================================================
   OS BÔNUS (adendo 2): 4 cartões no desenho dos kits
   ========================================================================== */
.bonus-grade { display: grid; gap: 14px; margin-top: 36px; }
@media (min-width: 700px) { .bonus-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bonus-grade { grid-template-columns: repeat(4, 1fr); } }
.bonus-cartao { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--grad-papel); transition: transform .4s var(--mola), border-color .3s; }
.bonus-cartao:hover { transform: translateY(-4px); border-color: var(--gold-d); }
.bonus-cartao > svg { width: 30px; height: 30px; color: var(--gold); }
.bonus-cartao h3 { font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.bonus-problema { font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.35; color: var(--gold-hi); }
.bonus-cartao small { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); }
.bonus-cartao ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--smoke); display: grid; gap: 4px; }
.bonus-resultado { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.4; color: var(--smoke); }
.bonus-resultado b { font-weight: 500; color: var(--cream); }
.bonus-cartao .selo-cheio { align-self: flex-start; white-space: normal; text-align: left; line-height: 1.3; margin-bottom: 6px; }

/* ==========================================================================
   A ESCADA
   ========================================================================== */
.escada { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 760px) { .escada { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.degrau { padding: 24px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--grad-papel); }
.degrau b { display: block; font-weight: 300; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; color: var(--gold); }
.degrau small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke-2); }
.degrau p { margin-top: 12px; color: var(--smoke); font-size: 15px; }
@media (min-width: 760px) { .degrau:nth-child(2) { padding-block: 36px; } .degrau:nth-child(3) { padding-block: 48px; border-color: var(--gold-d); box-shadow: var(--brilho-ouro); } }
.escada-frase { margin-top: 28px; text-align: center; font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 4.6vw, 2rem); color: var(--gold-hi); }

/* ==========================================================================
   A OFERTA
   ========================================================================== */
.oferta { scroll-margin-top: 24px; }
.oferta-caixa { position: relative; max-width: 720px; margin: 36px auto 0; padding: clamp(24px, 5vw, 44px); border: 1px solid var(--gold-d); border-radius: 26px; background: linear-gradient(160deg, rgba(23, 35, 63, .8), rgba(9, 15, 30, .9)); box-shadow: 0 40px 80px rgba(0, 0, 0, .55), var(--brilho-ouro); }
.oferta-caixa .selo-cheio { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }
.lote { display: grid; gap: 8px; margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10, 15, 16, .35); }
.lote-linha { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.lote-linha b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.lote-barra { height: 6px; border-radius: 6px; background: rgba(216, 190, 134, .14); overflow: hidden; }
.lote-barra i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--gold-hi), var(--gold) 45%, var(--magenta)); }
.lote small { font-family: var(--f-mono); font-size: 11px; color: var(--smoke-2); }
.lote small b { color: var(--magenta); }
.pilha { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pilha li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.pilha li:last-child { border-bottom: 0; }
.pilha svg { width: 20px; height: 20px; color: var(--gold); align-self: center; }
.pilha b { display: block; font-weight: 500; font-size: 17px; }
.pilha span { display: block; font-size: 14px; color: var(--smoke); }
.pilha .valor { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--gold-hi); white-space: nowrap; }
.preco { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.preco .olho { color: var(--smoke-2); }
.preco b { display: block; margin-top: 8px; font-weight: 300; font-size: clamp(4rem, 16vw, 6.4rem); line-height: .95; color: var(--gold); text-shadow: var(--brilho-ouro); }
.preco b small { font-size: .4em; vertical-align: top; margin-right: .1em; }
.preco p { margin-top: 10px; font-size: 1.15rem; color: var(--smoke); }
.preco .btn { margin-top: 24px; min-height: 62px; padding-inline: 40px; font-size: 14px; }
.preco .vendo { margin-top: 14px; }
.preco .nota { margin-top: 10px; }
.pagamentos { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke-2); }
.pagamentos span { display: inline-flex; align-items: center; gap: 6px; }
.pagamentos svg { width: 18px; height: 18px; color: var(--gold-d); }
@media (max-width: 520px) { .preco .btn { width: 100%; } }

/* ==========================================================================
   A GARANTIA, QUEM É O GABRIEL, O FAQ, O FIM, O RODAPÉ
   ========================================================================== */
.garantia-linha { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--smoke); }
.garantia-linha b { color: var(--cream); font-weight: 500; }
.garantia-linha .garantia-selo { width: 96px; margin: 0; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--smoke); }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--gold-hi); }
.garantia .caixa { display: grid; gap: 32px; align-items: center; }
@media (min-width: 800px) { .garantia .caixa { grid-template-columns: 240px 1fr; } }
.garantia-selo { width: 200px; margin-inline: auto; transform: rotate(-7deg); }
.garantia-selo .carimbo { width: 100%; height: auto; }
.garantia-selo .c-pais { font-size: 8.5px; }
.garantia-selo .c-data { font-size: 22px; letter-spacing: 0; }
.garantia-selo .c-cod { font-size: 5.6px; }
.garantia .chamada { grid-column: 1 / -1; }

.quem .caixa { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .quem .caixa { grid-template-columns: 1fr 1.1fr; } }
.quem-fotos { position: relative; max-width: 440px; margin-inline: auto; }
.quem-fotos .foto { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 4 / 5; }
.quem-fotos .foto img { width: 100%; height: 100%; object-fit: cover; }
.quem-fotos .recorte { position: absolute; right: -4%; bottom: -3%; width: 44%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.quem ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.quem li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; color: var(--smoke); font-size: 1.05rem; }
.quem li::before { content: ''; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--grad-ouro); }
.quem .lema { margin-top: 28px; padding-left: 18px; border-left: 2px solid var(--gold); font-family: var(--f-voz); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.25; color: var(--gold-hi); }
.quem .lema small { display: block; margin-top: 8px; font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); }

.faq-lista { max-width: 760px; margin: 28px auto 0; }
.faq-lista details { border-top: 1px solid var(--line-soft); }
.faq-lista details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 400; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: '+'; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--f-mono); color: var(--gold); transition: transform .3s var(--curva); }
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista .resp { padding: 0 0 20px; max-width: 60ch; color: var(--smoke); line-height: 1.55; }
.faq-lista .resp b { font-weight: 500; color: var(--cream); }

.fim { text-align: center; overflow: clip; }
.fim h2 { margin-inline: auto; max-width: 18ch; }
.rodape { position: relative; padding: 40px 0 48px; border-top: 1px solid var(--line-soft); }
.rodape .caixa { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rodape .nota { max-width: 60ch; }
.rodape .marca { color: var(--gold-d); }

/* ==========================================================================
   OS GATILHOS: o aviso de compra e o botão flutuante
   ========================================================================== */
.aviso-compra { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 23, 26, .96); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); transform: translateY(140%); opacity: 0; pointer-events: none; }
.aviso-compra .avatar { width: 38px; height: 38px; }
.aviso-compra .avatar span { font-size: 13px; }
.aviso-compra b { display: block; font-weight: 500; font-size: 14px; }
.aviso-compra span { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--smoke-2); }
.aviso-compra span i { color: #7bd88f; font-style: normal; }
.flutuante { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 31; display: none; transform: translateY(140%); }
.flutuante .btn { width: 100%; min-height: 58px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 6px 24px rgba(216, 190, 134, .25); }
@media (max-width: 760px) { .flutuante { display: block; } .aviso-compra { bottom: 90px; } }

/* ==========================================================================
   A ROTA: o avião e as nuvens (como na landing do app)
   ========================================================================== */
html.com-rota body { position: relative; z-index: 0; }
.rota { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.rota svg { position: absolute; left: 0; top: 0; overflow: visible; }
.rota path { fill: none; stroke-linecap: round; }
.rota-pontos path { stroke: rgba(216, 190, 134, .42); stroke-width: 3; stroke-dasharray: 0 13; }
.rota-feito path { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke: rgba(216, 190, 134, .55); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(216, 190, 134, .3)); }
.rota .rota-aviao { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; color: var(--gold-hi); filter: drop-shadow(0 0 10px rgba(216, 190, 134, .55)); will-change: transform; }
.rota.pousou .rota-aviao { color: var(--gold); }
.nuvem { position: absolute; will-change: transform; }
.nuvem svg { display: block; width: 100%; height: auto; overflow: visible; }
.nuvem-corpo { fill: #f3ecdc; fill-opacity: .45; }
.nuvem-luz { fill: #fffaf0; fill-opacity: .5; }
html.com-rota .clara { position: relative; z-index: 0; }
@media (max-width: 699px) { .rota-pontos path { stroke-dasharray: 0 11; } .rota-feito path { stroke: rgba(216, 190, 134, .38); stroke-width: 1.3; } }

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progresso, .vsl-play::before { display: none; }
  .avisos ul { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .avisos { mask-image: none; -webkit-mask-image: none; }
  .cracha-carimbo { opacity: .85; transform: none; }
  .cartao h3 s { --risca: 100%; }
}