/*
 * curso.css — a página de vendas padrão de um curso extra (eemcgo/curso.html).
 *
 * A referência é UMA: maximatherapy.com/programs, pelo link, pelos vídeos que o
 * dono gravou e pela engenharia reversa do site que ele mandou em 16/09/2026
 * (maxima-animacoes-engenharia-reversa.md). "Não é para usar Vinci como
 * referência. Somente a segunda." Daí:
 *   • fundos chapados e claros, nuvens, nada de seção escura;
 *   • a roleta da abertura: um disco gigante, um raio por curso, a cena de cada
 *     um vista por uma máscara em V que não gira;
 *   • o cartão do título que sobe, prende, vira e solta as cartas;
 *   • frases e palavras gigantes em caixa alta que nascem esticando;
 *   • cartas coloridas inclinadas, foto de borda torta com adesivos, o cartão
 *     branco de passos, a próxima parada e o rodapé em cartão branco.
 *
 * Toda cor e toda fonte vêm do JSON do curso (`tema`, `fontes`); os valores
 * abaixo são a reserva do Guardiões do Tesouro. O movimento mora no curso.js
 * (GSAP), aqui fica só o desenho e o estado parado.
 */
:root {
  --base: #22130a; --acento: #f4b42c; --acento-2: #ffd46a; --acento-tinta: #24140a;
  --claro: #fff6e3; --claro-2: #f1dfb9;
  --ceu: #9fd8f6; --ceu-claro: #d6f1fd; --campo: #4f9a34; --cunha: #a9dd8c;
  --tinta: #22130a; --cartao: #e8591d; --oferta: #e8591d; --destaque: #2d7a22;
  --f-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --f-texto: 'Nunito', system-ui, sans-serif;
  --largura: 1240px;
  /* A roleta: a medida do disco e o ângulo do V são os do site de referência. */
  --disco-y: 8.95%;
  --v-tan: .6249;          /* tan(90° − 58°) */
}
@media (max-width: 760px) { :root { --disco-y: 10.95%; --v-tan: .8391; } }  /* 50° no celular */

* { box-sizing: border-box; }
/* O corte horizontal é `clip`, nunca `hidden`: hidden faz do body um contêiner
   de rolagem e o palco deixa de prender. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--ceu-claro); color: var(--tinta); font: 500 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cartao); outline-offset: 3px; }

/* Cursor e barra de rolagem com as cores do curso (dono, 16/09/2026: "barra de
   rolagem e cursor do mouse precisam ser mais bonitos e alinhados"). O cursor
   vem do curso.js; a barra é arredondada, com folga da borda da janela. */
body { cursor: var(--cursor, auto); }
a, button, summary, label, [role="button"] { cursor: var(--cursor-mao, pointer); }
input, textarea { cursor: text; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--ceu-claro); }
::-webkit-scrollbar-thumb { background: var(--cartao); border-radius: 999px; border: 4px solid var(--ceu-claro); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--cartao) var(--ceu-claro); }
}
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 800; }
.pular:focus { left: 8px; }
.carregando { min-height: 100svh; display: grid; place-items: center; }
.carregando span { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #0000001a; border-top-color: var(--cartao); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.miolo { width: min(100% - 32px, var(--largura)); margin-inline: auto; position: relative; }
.rotulo { font: 800 13px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.titulo { font: 800 clamp(38px, 5.4vw, 84px)/.9 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.titulo em, .frase-texto em, .empilhadas-palavras em { font-style: normal; color: var(--realce, var(--cartao)); }
.abre { font-size: clamp(17px, 1.5vw, 20px); max-width: 60ch; margin: 0; }
.cabeca { margin-bottom: clamp(36px, 5vw, 64px); }
.cabeca.centro { text-align: center; }
.cabeca.centro .abre { margin-inline: auto; }
.miudo { font-size: 14.5px; opacity: .85; }
.secao { position: relative; padding-block: clamp(84px, 11vw, 160px); overflow: clip; }
.secao.sem-topo { padding-top: 0; }

/* Os fundos chapados. Cada seção escolhe um; a tinta acompanha. */
.fundo-ceu-claro { background: var(--ceu-claro); }
.fundo-ceu { background: var(--ceu); }
.fundo-creme { background: var(--claro); }
.fundo-verde-claro { background: var(--cunha); }
.fundo-verde { background: var(--destaque); color: #fff; --realce: var(--acento-2); }
.fundo-ouro { background: var(--acento); --realce: var(--tinta); }
.fundo-laranja { background: var(--oferta); color: var(--claro); --realce: var(--acento-2); }

/* Botões: pílula chapada, sem sombra de degrau. Nasce esticando (curso.js). */
.pilula { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 17px 30px; font: 800 17px/1 var(--f-texto); text-decoration: none; cursor: pointer; background: var(--cartao); color: var(--claro); transition: background-color .2s ease, color .2s ease; }
.pilula:hover { background: var(--tinta); color: #fff; }
.pilula.clara { background: #fff; color: var(--tinta); }
.pilula.clara:hover { background: var(--tinta); color: #fff; }
.pilula svg { width: 18px; height: 18px; }
.fundo-laranja .pilula { background: var(--claro); color: var(--tinta); }
.chip { display: inline-block; font: 800 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 4px; background: var(--claro); color: var(--tinta); }

/* Nuvens da arte do curso, derivando devagar. Ficam só nas beiradas (as posições
   saem do curso.js): nuvem branca atrás de letra branca apagava o texto. */
.nuvens { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nuvem { position: absolute; left: var(--x); top: var(--y); width: var(--w); min-width: 80px; opacity: .95; animation: deriva var(--dur) ease-in-out var(--atraso) infinite alternate; }
@keyframes deriva { from { transform: translateX(-2vw); } to { transform: translateX(2vw); } }
/* No celular o texto ocupa a largura toda: nas seções não sobra beirada para nuvem. */
@media (max-width: 760px) { #corpo .nuvens { display: none; } }

/* Adesivos: aparecem esticando quando a seção chega (curso.js). */
.adesivo { position: absolute; left: var(--x); top: var(--y); width: clamp(64px, 9vw, var(--w, 140px)); z-index: 3; pointer-events: none; transform: rotate(var(--g)); filter: drop-shadow(0 10px 14px rgb(0 0 0 / .18)); }

/* ── Topo ─────────────────────────────────────────────────────────────── */
.topo { position: fixed; inset: 0 0 auto; z-index: 90; padding: 16px clamp(16px, 2.4vw, 32px); pointer-events: none; }
.topo .linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* O logo vai numa pílula branca, como o menu: solto, o azul dele sumia sobre as
   seções verdes e laranja e brigava com o texto que passava por baixo. */
.marca { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 5px 20px 5px 14px; box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
.marca .brasao { height: 36px; width: auto; }
.marca .go { height: 22px; width: auto; }
.marca .traco { width: 1.5px; height: 24px; background: #0000001a; }
.topo nav { pointer-events: auto; display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 5px 5px 5px 16px; box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
.topo nav a { text-decoration: none; font: 700 14px/1 var(--f-texto); padding: 10px 10px; border-radius: 999px; }
.topo nav a:hover { background: var(--ceu-claro); }
.topo nav .botao-topo { background: var(--cartao); color: var(--claro); padding: 11px 18px; margin-left: 6px; }
.topo nav .botao-topo:hover { background: var(--tinta); color: #fff; }
@media (max-width: 860px) { .topo nav { padding-left: 5px; } .topo nav a:not(.botao-topo) { display: none; } }

/* ── A cortina de entrada (canvas, curso.js) ─────────────────────────── */
.cortina { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }

/* ── A roleta ─────────────────────────────────────────────────────────── */
.roleta { position: absolute; inset: 0 0 auto; height: 110svh; overflow: hidden; z-index: 10; background: var(--roleta-fundo, var(--ceu)); transition: background-color .35s ease; }
.disco { position: absolute; left: 50%; top: 0; height: calc(3352 / 982 * 100svh); aspect-ratio: 3341 / 3352; transform: translate(-50%, calc(var(--disco-y) * -1)); touch-action: pan-y; cursor: grab; }
.disco.arrastando { cursor: grabbing; }
.balanco, .roda { position: absolute; inset: 0; }
/* Cada curso é um raio: a metade de cima do disco, girada em torno do centro. */
.raio { position: absolute; left: 0; top: 0; width: 100%; height: 50%; transform-origin: 50% 100%; transform: rotate(calc(var(--i) * var(--passo))); }
/* A cena passa da tela com folga dos lados e em cima. Do tamanho exato da tela,
   o balanço de 5° da seta mostrava a borda da imagem e um pedaço do curso
   vizinho, e o dono cobrou (16/09/2026): "fica claro que tá desproporcional o
   tamanho da imagem de fundo". */
.cena { --sobra-x: 18svh; --sobra-y: 14svh; position: absolute; left: 50%; top: calc(var(--disco-y) * 2 - var(--sobra-y)); width: calc(100vw + 2 * var(--sobra-x)); height: calc(110svh + var(--sobra-y)); margin-left: calc(-50vw - var(--sobra-x)); background: var(--cor) var(--fundo, none) center 20% / cover no-repeat; overflow: hidden; }
.cena .nuvens { z-index: 1; }
/* O quadro é a tela: o Tito e as peças se medem por ele, não pela cena inteira. */
.cena-quadro { position: absolute; left: var(--sobra-x); top: var(--sobra-y); width: 100vw; height: 110svh; }
.peca { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * .62vw + var(--w) * .5svh); translate: -50% -50%; z-index: 2; }
.peca img { width: 100%; animation: flutua 3.6s ease-in-out var(--atraso, 0s) infinite alternate; }
@keyframes flutua { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(8px) rotate(2deg); } }
/* O Tito é o protagonista da roleta: bem maior que as peças (dono, 16/09/2026:
   "o Tito esteja muito maior em tamanho"), e um pouco mais baixo, com o rosto
   sempre acima do cartão do título. */
.peca.tito { z-index: 4; width: calc(var(--w) * 1.4vw + var(--w) * 1.1svh); top: calc(var(--y) + 8%); }
.tito-botao { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.tito-botao img { animation-duration: 4.4s; }
.balao { position: absolute; right: 88%; top: 16%; width: max-content; max-width: min(300px, 38vw); margin: 0; background: #fff; color: var(--tinta); font: 800 clamp(14px, 1.2vw, 18px)/1.3 var(--f-titulo); padding: 12px 16px; border-radius: 20px 20px 4px 20px; box-shadow: 0 10px 24px rgb(0 0 0 / .15); }
@media (max-width: 760px) {
  /* No celular o Tito grande ocupa a largura: as peças soltas cairiam em cima
     dele, e o cenário já enche a tela. */
  .cena-quadro .peca:not(.tito) { display: none; }
  .peca.tito { width: min(78vw, 340px); top: calc(var(--y) + 10%); }
  .balao { left: 50%; right: auto; top: auto; bottom: calc(100% + 8px); translate: -50% 0; max-width: 72vw; text-align: center; border-radius: 18px; }
}
/* A máscara em V: não gira. O bico fica no pé da tela, a 58° da vertical. */
.v { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--v-cor, var(--ceu-claro)); transition: background-color .5s ease;
  clip-path: polygon(0 calc(100svh - 50vw * var(--v-tan)), 50% 100svh, 100% calc(100svh - 50vw * var(--v-tan)), 100% 100%, 0 100%); }
.seta-roda { position: absolute; z-index: 6; top: calc(89svh - 23px); width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--seta-cor, var(--tinta)); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgb(0 0 0 / .12); }
.seta-roda svg { width: 20px; height: 20px; }
.seta-roda.anterior { left: calc(24% - 23px); }
.seta-roda.proxima { left: calc(75% - 23px); }
@media (max-width: 760px) {
  .seta-roda { top: calc(70svh - 23px); }
  .seta-roda.anterior { left: 14px; }
  .seta-roda.proxima { left: auto; right: 14px; }
}

/* ── O palco: o cartão do título sobe, prende, vira e solta as cartas ── */
.palco { position: relative; z-index: 30; padding-top: 100svh; pointer-events: none; overflow-x: clip; }
.caixa { position: sticky; top: 0; height: 100svh; perspective: 1200px; }
.ceu-queda { position: absolute; inset: 0; overflow: hidden; z-index: 0; opacity: 0; transition: opacity .6s ease; }
.palco.virado .ceu-queda { opacity: 1; }
.nuvens-queda { position: absolute; left: 0; right: 0; top: 0; height: 200%; will-change: transform; }
.nuvens-queda > .nuvens { inset: auto; left: 0; right: 0; top: 0; height: 50%; }
.nuvens-queda > .nuvens + .nuvens { top: 50%; }
.face { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.verso { visibility: hidden; }
.cartao-titulo { pointer-events: auto; width: min(86vw, clamp(300px, 28vw, 420px)); background: var(--cartao); color: var(--claro); border-radius: 6px; padding: clamp(24px, 2.2vw, 34px) clamp(20px, 2vw, 30px); text-align: center; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .4); }
.janela-titulo { position: relative; overflow: hidden; padding-top: .16em; }
.nome-curso { font: 800 clamp(36px, 3.7vw, 58px)/.88 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.nome-curso.longo { font-size: clamp(28px, 2.8vw, 44px); line-height: .92; }
.janela-titulo .saindo { position: absolute; inset: .16em 0 auto; }
.cartao-titulo .chip { margin-top: 14px; }
.texto-titulo { margin: 22px auto 20px; max-width: 30ch; font-size: 16px; line-height: 1.5; }
.descer { width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; display: inline-grid; place-items: center; text-decoration: none; }
.descer svg { width: 20px; height: 20px; }

.pilha { position: relative; width: min(80vw, clamp(280px, 27vw, 400px)); aspect-ratio: 5 / 6; z-index: 2; }
.voa, .inclina, .abre-leque, .balanca { position: absolute; inset: 0; }
.carta { position: absolute; inset: 0; pointer-events: auto; background: var(--cor); color: var(--tinta-carta); border-radius: 12px; padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; box-shadow: 0 24px 50px -26px rgb(0 0 0 / .45); }
.carta h3 { font: 800 clamp(34px, 3vw, 48px)/.9 var(--f-titulo); text-transform: uppercase; margin: 0; }
.carta img { width: 44%; margin: auto; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .15)); }
.carta p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; font-weight: 600; }
.carta small { margin-top: 10px; font: 800 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.caixa > .adesivo { z-index: 1; }

/* Sem movimento: o cartão fica no pé da roleta e as cartas descem em grade, sem prender. */
.palco.parado .caixa { position: relative; height: auto; perspective: none; margin-top: -18svh; display: grid; justify-items: center; gap: 48px; padding: 0 16px 80px; }
.palco.parado .face { position: relative; inset: auto; visibility: visible; }
.palco.parado .pilha { width: min(100%, 1100px); aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.palco.parado .voa, .palco.parado .inclina, .palco.parado .abre-leque, .palco.parado .balanca { position: relative; inset: auto; }
.palco.parado .carta { position: relative; inset: auto; min-height: 380px; }
.palco.parado .espaco, .palco.parado .caixa > .adesivo { display: none; }

/* ── Frase grande (o "We believe…" da referência) ────────────────────── */
.frase { position: relative; padding-block: clamp(90px, 13vw, 190px); text-align: center; overflow: clip; }
.frase-texto { font: 800 clamp(36px, 5.6vw, 92px)/.9 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; color: var(--frase-cor, var(--destaque)); margin: 0 auto; max-width: 18ch; text-wrap: balance; position: relative; z-index: 2; }
.frase-texto.menor { font-size: clamp(30px, 4.2vw, 64px); max-width: 22ch; margin-bottom: clamp(40px, 6vw, 80px); }
.frase-texto.longa { font-size: clamp(26px, 2.9vw, 46px); line-height: .98; max-width: 34ch; }
.frase .pilula { margin-top: 44px; position: relative; z-index: 2; }
.frase-ref { font: 800 14px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; margin: 26px 0 0; position: relative; z-index: 2; }
.frase .abre { margin: 28px auto 0; position: relative; z-index: 2; }
.fundo-laranja .frase-texto { --frase-cor: var(--claro); }
/* SplitScale: cada palavra é um bloco que estica de baixo. */
.palavra-split { display: inline-block; transform-origin: 50% 100%; will-change: transform; }

/* ── A palavra gigante, letra por letra ───────────────────────────────── */
.palavra { position: relative; padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); text-align: center; overflow: clip; }
.palavra-antes, .palavra-depois { font: 800 clamp(20px, 2.2vw, 30px)/1.2 var(--f-titulo); max-width: 30ch; margin: 0 auto; position: relative; z-index: 2; text-wrap: balance; }
.palavra-depois { margin-top: 18px; }
.letras { display: flex; justify-content: center; font: 800 clamp(84px, 19vw, 330px)/.8 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; margin: 30px 0 0; position: relative; z-index: 2; }
.letra { display: inline-block; transform-origin: 50% 100%; color: var(--cor-letra); }

/* ── Foto de borda torta com adesivos ─────────────────────────────────── */
.foto { position: relative; margin-top: -6vw; z-index: 1; overflow-x: clip; }
.foto-moldura { clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 100%); overflow: hidden; }
.foto-img { width: 100%; height: auto; }
.foto .adesivo { width: clamp(80px, 12vw, 190px); }

/* ── Palavras empilhadas com texto ao lado ────────────────────────────── */
.empilhadas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.empilhadas-palavras { position: relative; z-index: 4; font: 800 clamp(48px, 7.2vw, 124px)/.86 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; color: var(--destaque); margin: 0; }
.empilhadas-palavras > span { display: block; }
.empilhadas-texto p { margin: 0 0 16px; font-size: clamp(16px, 1.3vw, 19px); }
.empilhadas-texto .pilula { margin-top: 12px; }
/* Numa coluna só (celular e tablet em pé) o adesivo cairia em cima das palavras. */
@media (max-width: 860px) { .empilhadas { grid-template-columns: 1fr; } .empilhadas .adesivo { display: none; } }

/* ── Cartão branco de passos ──────────────────────────────────────────── */
.cartao-branco { position: relative; z-index: 2; background: #fff; color: var(--tinta); border-radius: 30px; padding: clamp(26px, 4.4vw, 68px); box-shadow: 0 40px 90px -60px rgb(0 0 0 / .35); }
.passos-cartao { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.passos-lado { position: sticky; top: 110px; }
.passos-lado h3 { font: 800 clamp(30px, 3vw, 46px)/.95 var(--f-titulo); text-transform: uppercase; margin: 14px 0 12px; }
.passos-lado .pilula { margin-top: 18px; }
.passos-lado .cabeca { margin-bottom: 0; }
.passos-lado .titulo { font-size: clamp(32px, 3.6vw, 56px); }
.lado-tito { width: min(220px, 60%); margin-top: 18px; }
.passos-lista { list-style: none; margin: 0; padding: 0; }
.passos-lista li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; border-top: 1.5px solid #0000000d; }
.passos-lista li:first-child { border-top: 0; padding-top: 0; }
.passos-lista li.sem-bola { grid-template-columns: 1fr; }
.passos-lista h4 { font: 800 21px/1.15 var(--f-titulo); margin: 4px 0 4px; }
.passos-lista p { margin: 0; font-size: 16px; }
.bola { width: 64px; height: 64px; border-radius: 50%; background: var(--ceu-claro); display: grid; place-items: center; }
.bola img { width: 70%; height: 70%; object-fit: contain; }
.numero-bola { background: var(--cartao); color: var(--claro); font: 800 28px/1 var(--f-titulo); }
.amostra { margin-top: 10px !important; background: var(--claro); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 15px !important; }
@media (max-width: 860px) { .passos-cartao { grid-template-columns: 1fr; } .passos-lado { position: static; } }

/* ── Cartas soltas, inclinadas ────────────────────────────────────────── */
.leque { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.carta-solta { position: relative; background: var(--cor); color: var(--tinta-carta); border-radius: 18px; padding: clamp(24px, 2.4vw, 34px); transform: rotate(var(--g)); box-shadow: 0 24px 50px -30px rgb(0 0 0 / .4); }
.carta-solta h3 { font: 800 clamp(26px, 2.3vw, 36px)/.95 var(--f-titulo); text-transform: uppercase; margin: 0 0 12px; }
.carta-solta p { margin: 0 0 10px; font-size: 16px; }
.carta-solta .chip { margin-bottom: 14px; background: #ffffffcc; }
.curso-carta .curso-capa { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 12px; margin: 0 0 16px; box-shadow: 0 16px 30px -18px rgb(0 0 0 / .5); }
.selo-breve { position: absolute; top: -14px; right: 16px; z-index: 2; background: var(--acento); color: var(--acento-tinta, var(--tinta)); font: 800 12px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .45); }
.cursos-nota { max-width: 680px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: center; font-weight: 700; }
.preco-breve { margin: 8px 0 0; font-size: 14px; font-weight: 700; opacity: .85; }
/* Seis cursos: três por linha no computador, e a capa sem virar pôster. */
@media (min-width: 900px) { .cursos-lista:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cursos-lista:has(> :nth-child(5)) .curso-capa { max-width: 280px; margin-inline: auto; }
/* No celular, as duas linhas de capas precisam do botão abaixo delas, e não em cima. */
@media (max-width: 640px) { .proximo-capas:has(img:nth-child(5)) + .botao-redondo { margin-top: 18px; } }
/* No combo, cada exemplo do capítulo diz de que curso ele veio. */
.amostra-curso { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cursos-botao { text-align: center; margin: clamp(30px, 4vw, 50px) 0 0; }
.carta-rodape { font-weight: 800; border-top: 2px solid currentColor; padding-top: 12px; margin-top: 14px !important; }
.carta-solta ul { margin: 0; padding-left: 20px; }
.carta-solta li { margin-bottom: 6px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); max-width: 1000px; margin-inline: auto; }
@media (max-width: 760px) { .par { grid-template-columns: 1fr; } }
.versiculo { font: 800 clamp(22px, 2.4vw, 32px)/1.2 var(--f-titulo); text-align: center; max-width: 36ch; margin: clamp(48px, 6vw, 80px) auto 0; }
.versiculo cite { display: block; font: 800 13px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; font-style: normal; }
.versiculo.esquerda { text-align: left; margin: 24px 0 0; font-size: clamp(20px, 1.8vw, 26px); }

/* Números gigantes em faixa verde. */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 36px 24px; }
.numero { text-align: center; }
.numero b { display: block; white-space: nowrap; font: 800 clamp(64px, 6vw, 110px)/.8 var(--f-titulo); color: var(--acento-2); }
.numero b small { font-size: .42em; margin: 0 .06em; }
.numero span { display: block; margin-top: 14px; font-weight: 700; max-width: 26ch; margin-inline: auto; }

/* Temporadas. */
.temporada h3 { margin-bottom: 4px; }
.temporada-nome { font: 800 20px/1.2 var(--f-titulo); margin-bottom: 12px !important; }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilulas span { background: #ffffff99; color: var(--tinta); border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 800; }
.temporada .pilula { margin-top: 12px; padding: 11px 18px; font-size: 14px; }
.capitulos { margin: 14px 0 0; padding-left: 22px; font-size: 14.5px; max-height: 280px; overflow: auto; }
.nota-marca { text-align: center; margin: 48px auto 0; font-weight: 800; max-width: 60ch; }

/* Pilares: o letreiro que anda sozinho (o mesmo dos mapas do site principal). */
.galeria { overflow: hidden; padding: 30px 0 34px; cursor: grab; user-select: none; touch-action: pan-y;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
          mask: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent); }
.galeria.arrastando { cursor: grabbing; }
.galeria-trilho, .galeria-copia { display: flex; gap: 24px; align-items: flex-start; }
.galeria-trilho { width: max-content; padding-left: 24px; will-change: transform; }
.galeria .carta-solta { flex: 0 0 min(78vw, 360px); }
.galeria-legenda { text-align: center; margin: 0 auto; max-width: min(100% - 32px, 70ch); font-size: 14px; font-weight: 700; opacity: .75; }
.galeria-legenda + .galeria-legenda { margin-top: 6px; }

/* Referências. */
.autor-obra { font-weight: 800; font-style: italic; }
/* A ressalva dos autores (dono, 16/09/2026): quem compra não pode achar que
   está levando material deles. Cartão branco, bem à vista, logo abaixo dos nomes. */
.aviso-autores { max-width: 820px; margin: 56px auto 0; background: #fff; border: 3px solid var(--cartao); border-radius: 22px; padding: 22px 26px; text-align: center; }
.aviso-autores b { display: block; font: 800 20px/1.2 var(--f-titulo); color: var(--cartao); margin-bottom: 8px; }
.aviso-autores p { margin: 0; font-size: 17px; font-weight: 600; }

/* ── Experimente: o jogo ──────────────────────────────────────────────── */
.experimente { max-width: 860px; margin-inline: auto; }
.experimente .cabeca { margin-bottom: 26px; }
.experimente .titulo { font-size: clamp(32px, 4vw, 58px); }
.jogo-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.jogo-titulo { font: 800 22px/1.2 var(--f-titulo); }
.jogo-instr { font-size: 14px; font-weight: 700; opacity: .75; }
.jogo-moedas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 40px; margin: 14px 0 10px; }
.jogo-moedas img { width: clamp(22px, 7.4vw, 36px); height: clamp(22px, 7.4vw, 36px); object-fit: contain; transition: opacity .2s ease, transform .2s ease; }
.jogo-moedas img.usada { opacity: .16; transform: scale(.8); }
.jogo-potes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 2vw, 14px); }
.pote { position: relative; border: 0; background: var(--claro); border-radius: 22px; padding: 12px 8px 14px; cursor: pointer; display: grid; justify-items: center; transition: transform .15s ease; }
.pote:hover { transform: translateY(-3px); }
.pote:disabled { cursor: default; transform: none; }
.pote-arte { position: relative; width: 100%; height: 108px; }
.pote-arte > img { width: 100%; height: 100%; object-fit: contain; }
.pote-pilha { position: absolute; left: 50%; bottom: 12px; width: 44px; margin-left: -22px; height: 70px; }
.pote-pilha img { position: absolute; left: 0; width: 44px; height: 18px; object-fit: cover; border-radius: 50%; }
.pote b { font: 800 20px/1 var(--f-titulo); margin-top: 6px; }
.pote small { font-size: 12.5px; font-weight: 700; opacity: .7; }
.pote .conta { position: absolute; top: 8px; right: 10px; min-width: 30px; height: 30px; border-radius: 999px; background: var(--cartao); color: var(--claro); font: 800 16px/30px var(--f-titulo); }
.moeda-voando { position: fixed; z-index: 95; width: 34px; height: 34px; pointer-events: none; transition: transform .55s cubic-bezier(.45, .05, .4, 1); }
.jogo-fala { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin-top: 16px; }
.jogo-fala img { width: 76px; height: 86px; object-fit: contain; }
.jogo-fala p { margin: 0; background: var(--ceu-claro); padding: 12px 16px; border-radius: 18px 18px 18px 4px; font-weight: 700; font-size: 15.5px; }
.jogo-fala p b { display: block; font: 800 19px/1.25 var(--f-titulo); color: var(--cartao); }
.jogo-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.jogo-rodape .pilula { padding: 12px 20px; font-size: 15px; }
.jogo-rodape .pilula.clara { box-shadow: inset 0 0 0 2px var(--tinta); }
/* O jogo de escolha, que serve a qualquer curso. */
.escolha-pergunta { font: 800 clamp(19px, 1.8vw, 24px)/1.3 var(--f-titulo); margin: 16px 0 14px; }
.escolha-opcoes { display: grid; gap: 10px; }
.escolha-opcao { text-align: left; border: 2px solid #0000001a; background: var(--claro); color: var(--tinta); border-radius: 16px; padding: 14px 16px; font: 700 16px/1.35 var(--f-texto); cursor: var(--cursor-mao, pointer); transition: border-color .2s ease, background-color .2s ease; }
.escolha-opcao:hover:not(:disabled) { border-color: var(--cartao); }
.escolha-opcao:disabled { cursor: default; opacity: .75; }
.escolha-opcao.certa { opacity: 1; border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 14%, #fff); }
.escolha-opcao.errada { opacity: 1; border-color: #c2410c; background: #fff1eb; }

/* ── A oferta: seção própria, cor forte, faixa correndo ───────────────── */
.oferta-secao { position: relative; background: var(--oferta); color: var(--claro); padding: 0 0 clamp(80px, 10vw, 140px); overflow: clip; }
.faixa-corre { display: flex; overflow: hidden; background: var(--acento); color: var(--tinta); transform: rotate(-2deg); margin: 26px -2vw clamp(56px, 7vw, 96px); padding: 14px 0; }
.faixa-corre > div { display: flex; flex: none; gap: 26px; padding-right: 26px; align-items: center; animation: corre 26s linear infinite; }
.faixa-corre span { font: 800 clamp(22px, 2.4vw, 34px)/1 var(--f-titulo); text-transform: uppercase; white-space: nowrap; }
.faixa-corre i { font-style: normal; font-size: 22px; }
@keyframes corre { to { transform: translateX(-100%); } }
.oferta-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.oferta-produto { position: relative; }
.oferta-capa { width: 88%; border-radius: 14px; transform: rotate(-4deg); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .6); }
/* O combo mostra as capas dos cursos inteiras, duas a duas, no lugar de uma
   capa só: em leque, uma cobria o título da outra. */
.oferta-capas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); max-width: 460px; margin-inline: auto; }
.oferta-capas img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6); transform: rotate(-3deg); }
.oferta-capas img:nth-child(4n + 2), .oferta-capas img:nth-child(4n + 3) { transform: rotate(2.5deg); }
.oferta-capas:has(img:nth-child(5)) { grid-template-columns: repeat(3, 1fr); max-width: 540px; }
.oferta-tito { position: absolute; right: -2%; bottom: -8%; width: 42%; filter: drop-shadow(0 16px 22px rgb(0 0 0 / .3)); }
.oferta-cartao { background: #fff; color: var(--tinta); border-radius: 30px; padding: clamp(26px, 3.6vw, 52px); box-shadow: 0 50px 90px -50px rgb(0 0 0 / .55); }
.selo-oferta { display: inline-block; background: var(--acento); color: var(--tinta); font: 800 14px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; }
.oferta-titulo { font: 800 clamp(34px, 3.8vw, 58px)/.92 var(--f-titulo); text-transform: uppercase; margin: 16px 0 18px; }
.oferta-titulo em { font-style: normal; color: var(--cartao); }
.inclui { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.inclui li { position: relative; padding-left: 32px; font-weight: 700; }
.inclui li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--destaque) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.preco-bloco { border-top: 2px dashed #0000001f; padding-top: 22px; margin-bottom: 18px; }
/* Psicologia da oferta, regra do dono (16/09/2026): o preço de antes é o número
   GRANDE, com "R$ 200,00" inteiro e o risco em destaque, para parecer ainda maior;
   o de agora vem menor e sem ",00" ("por: R$ 97"), para parecer ainda menor. */
.preco-de { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 800 clamp(50px, 5.4vw, 84px)/1 var(--f-titulo); color: var(--tinta); }
.preco-de span { font-size: .36em; }
.preco-de s { position: relative; text-decoration: none; white-space: nowrap; }
.preco-de s::after { content: ''; position: absolute; left: -4%; right: -4%; top: 50%; height: .12em; margin-top: -.06em; border-radius: 99px; background: var(--cartao); transform: rotate(-8deg); }
.preco-por { margin: 12px 0 8px; display: flex; align-items: baseline; gap: 10px; font: 800 clamp(34px, 3.2vw, 48px)/1 var(--f-titulo); color: var(--cartao); }
.preco-por span { font-size: .52em; color: var(--tinta); }
.preco-por.sozinho { font-size: clamp(56px, 6vw, 90px); }
.preco-condicao { margin: 0; font-weight: 700; }
.preco-tem { font: 800 30px/1.1 var(--f-titulo); margin: 0 0 8px; }
.comprar { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; border-radius: 999px; padding: 22px 28px; background: var(--cartao); color: var(--claro); font: 800 clamp(19px, 1.7vw, 23px)/1 var(--f-texto); text-decoration: none; transition: background-color .2s ease; }
.comprar:hover { background: var(--tinta); color: #fff; }
.comprar svg { width: 22px; height: 22px; }
.comprar.pequeno { width: auto; padding: 13px 20px; font-size: 15px; }
.pagamento { text-align: center; font-size: 14px; font-weight: 700; opacity: .65; margin: 12px 0 0; }
.outra-oferta { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: var(--claro); text-decoration: none; font-size: 15px; }
.outra-oferta b { display: block; }
.outra-oferta svg { width: 16px; height: 16px; vertical-align: -3px; }
.aviso-preco { margin: 14px 0 0; font-size: 15px; }
.aviso-preco.forte { font: 800 22px/1.25 var(--f-titulo); }
@media (max-width: 860px) { .oferta-grade { grid-template-columns: 1fr; } .oferta-produto { max-width: 420px; margin-inline: auto; } }

/* A barra flutuante com o preço. */
.barra-oferta { position: fixed; left: 50%; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 14px; background: #fff; color: var(--tinta); border-radius: 999px; padding: 8px 8px 8px 10px; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .35); transform: translate(-50%, 150%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); width: max-content; max-width: calc(100vw - 24px); }
.barra-oferta.visivel { transform: translate(-50%, 0); }
.barra-oferta img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.barra-oferta .barra-capas { display: flex; flex-shrink: 0; padding-left: 4px; }
/* No celular a barra não tem largura para as capas do combo: elas cobriam o preço. */
@media (max-width: 480px) { .barra-oferta .barra-capas { display: none; } .barra-oferta:has(.barra-capas) { padding-left: 18px; } }
.barra-oferta .barra-capas img { width: 30px; height: 42px; border-radius: 6px; border: 2px solid #fff; margin-left: -12px; box-shadow: 0 4px 10px rgb(0 0 0 / .2); }
.barra-oferta .barra-capas img:first-child { margin-left: 0; }
.barra-oferta p { margin: 0; line-height: 1.15; }
.barra-oferta p > b { display: block; font-size: 14px; }
.barra-oferta p span { font: 800 14px/1.1 var(--f-titulo); color: var(--tinta); white-space: nowrap; }
.barra-oferta s { font-size: 21px; text-decoration-thickness: 3px; text-decoration-color: var(--cartao); }
.barra-oferta p span b { font-size: 17px; color: var(--cartao); }

/* ── Dúvidas ──────────────────────────────────────────────────────────── */
.perguntas { max-width: 900px; margin-inline: auto; display: grid; gap: 12px; }
.pergunta { background: #fff; border-radius: 24px; }
.pergunta summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px 26px; cursor: pointer; font-size: 18px; }
.pergunta summary::-webkit-details-marker { display: none; }
.mais { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--cartao); position: relative; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.mais::before, .mais::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px; margin: -1.5px 0 0 -8px; border-radius: 2px; background: var(--claro); }
.mais::after { transform: rotate(90deg); }
.pergunta[open] .mais { transform: rotate(45deg); }
.pergunta p { margin: 0; padding: 0 26px 24px; }

/* ── Próxima parada e rodapé em cartão branco ─────────────────────────── */
.final { --proximo-cor: var(--acento); position: relative; background: var(--proximo-cor); padding: clamp(80px, 10vw, 140px) 0 clamp(16px, 2vw, 28px); overflow: clip; text-align: center; }
.proximo { position: relative; z-index: 2; padding: 0 16px clamp(60px, 8vw, 110px); }
.proximo-rotulo { font: 800 14px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; color: var(--proximo-tinta, var(--tinta)); }
.proximo-titulo { font: 800 clamp(64px, 12vw, 210px)/.8 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; margin: 0 auto; max-width: 12ch; color: color-mix(in srgb, var(--proximo-cor) 40%, #fff); text-wrap: balance; }
.proximo-capa { display: block; width: min(560px, 80vw); margin: -3vw auto 0; position: relative; }
.proximo-capas { display: flex; justify-content: center; gap: 2.5%; width: min(760px, 92vw); }
.proximo-capas img { flex: 1 1 0; min-width: 0; max-width: 23%; aspect-ratio: 2 / 3; object-fit: cover; border: 4px solid #fff; border-radius: 12px; }
/* No celular, seis capas numa linha ficam do tamanho de selo: três por linha. */
@media (max-width: 640px) { .proximo-capas:has(img:nth-child(5)) { flex-wrap: wrap; row-gap: 14px; } .proximo-capas:has(img:nth-child(5)) img { flex: 0 0 30%; max-width: 30%; } }
.proximo-capa img { border-radius: 18px; transform: rotate(3deg); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .5); }
.botao-redondo { position: relative; z-index: 3; display: inline-grid; place-items: center; width: 150px; height: 150px; margin-top: -60px; border-radius: 50%; background: var(--cartao); color: var(--claro); font: 800 17px/1.15 var(--f-texto); text-decoration: none; padding: 20px; transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; }
.botao-redondo:hover { background: var(--tinta); }
/* Rodapé: os dois logos lado a lado, pequenos e no centro (pedido do dono,
   16/09/2026, trocando o logo gigante: "Definitivamente esse logo assim tá horrível"). */
.rodape { background: #fff; color: var(--tinta); border-radius: 30px; padding: clamp(28px, 3.6vw, 48px) 20px; text-align: center; display: grid; justify-items: center; gap: 22px; position: relative; z-index: 2; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-weight: 700; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { text-decoration: underline; }
.rodape-marca { display: flex; align-items: center; justify-content: center; gap: 22px; }
.rodape-marca .brasao { height: 76px; width: auto; }
.rodape-marca .go { height: 40px; width: auto; }
.rodape-marca .traco { width: 2px; height: 50px; background: #0000001a; }
.rodape small { font-size: 13px; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .nuvem, .peca img, .faixa-corre > div { animation: none; }
  .barra-oferta { transition: none; }
}