/* IMT Academy — "Do zero a R$ 10 mil em 30 dias" · 23/10/2026
 *
 * O HERO é ESCURO (26/10/2026, pedido dele: "O FUNDO DO HERO TEM QUE SER AQUELE QUE EU TINHA PEDIDO, SÓ QUE
 * SUBISTITUINDO POR O ISRAEL QUE ESTÁ AGORA ALI"): o desenho da 1ª versão (46f4d3a) com a foto nova — ele de camiseta
 * branca no escritório escuro com as faixas de LED lime. A foto inteira de fundo, um véu quase preto que vem da
 * esquerda, a grade sutil de quadrados (branco bem baixo), o título branco em três linhas com "R$ 10 mil" numa faixa
 * lime cheia (o que entrou em 23/10 e ficou), a pílula lime cheia + a de contorno com seta, a barra de navegação de
 * vidro e os 4 pilares 2 × 2 embaixo do texto. (De 23 a 26/10 o hero foi claro, com a foto de estúdio branco.)
 * O resto da página é a NOVA-IDENTIDADE-2026-10 (ID visual/ISRAEL MEIRA/):
 *   palco  radial #1C1C1C → #101010 → #060606 (texto #FCFCFC, apoio #B9B9B9, linhas branco 12%)
 *   papel  radial #F5F4F0 → #F2F1EC → #E3E2DD (texto #000, apoio #2B2B2B, linhas preto 9%)
 *   lime   #D8FF00 só como acento. No papel, NUNCA lime fino (1,02:1): só área cheia (o ícone num quadrado
 *          preto, o botão). No palco pode tudo.
 *   Clash Grotesk fina + semibold (títulos, corpo) · Bodoni Moda 900 itálico (a palavra-chave das dobras e os
 *   números) · Montserrat 600 espaçada só no rótulo pequeno.
 *
 * A FOTO: o enquadramento sai das variáveis --capa-x/--capa-y (computador, 16:9, a pessoa à direita do
 * centro) e --capa-x-m/--capa-y-m (celular, 4:5). Ajuste aqui depois de ver a foto final.
 * (26/10/2026) A foto v2 ("preciso estar a direita mas próximo do centro"): o corpo de 47,7 % a 72 % da largura, as MÃOS
 * na ponta esquerda (47,7 %). No computador o hero é mais alto que 16:9, a foto amplia (cover) e corta dos lados; com o
 * corte pelo CENTRO (--capa-x 50 %) as mãos ficam entre ~46 % e 47,7 % da tela em qualquer largura, e a coluna do texto
 * (--texto-max) termina 44 px antes dos 46 % — o título e os pilares nunca encostam nelas (medido de 900 a 1920 px).
 *
 * A ORDEM (26/10/2026): hero → o plano (visual: a conversa do WhatsApp e os 4 encontros) → as 4 semanas → as três
 * frentes → a prova (palco: o número da loja com o gráfico das 3 semanas e os anúncios reais com o selo "Feito pela
 * Agência de IA") → para quem é (papel) → como funciona + compra → dúvidas.
 *
 * Revelar à prova de falha (lp.js): todo estado escondido vive só em html.anima …:not(.ok); sem JS, sem
 * IntersectionObserver ou com menos movimento, a página é o estado final. Nenhum style="".
 * O seletor de parcelas e o cupom são os da loja (/assets/loja/parcelas.css e cupom.css), que leem --f,
 * --acento-escuro e --acento-halo daqui.
 */

@font-face { font-family: 'Clash Grotesk'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fontes/clash-grotesk-light.otf') format('opentype'); }
@font-face { font-family: 'Clash Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fontes/clash-grotesk-regular.otf') format('opentype'); }
@font-face { font-family: 'Clash Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fontes/clash-grotesk-medium.otf') format('opentype'); }
@font-face { font-family: 'Clash Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fontes/clash-grotesk-semibold.otf') format('opentype'); }

:root {
  --lime: #D8FF00; --preto: #000; --branco: #FCFCFC; --noite: #050505;
  --papel: #F2F1EC; --palco: #1C1C1C;
  --apoio-papel: #2B2B2B; --apoio-palco: #B9B9B9;
  --clash: 'Clash Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --bodoni: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --mont: 'Montserrat', system-ui, -apple-system, sans-serif;
  /* o que o seletor de parcelas e o cupom da loja leem */
  --f: var(--clash); --acento-escuro: var(--lime); --acento-halo: rgba(216,255,0,.22);
  --larg: 1180px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --mola: cubic-bezier(.27, .29, .11, 1.21);
  /* o enquadramento da foto (26/10/2026, a v2: ele à direita, perto do centro): no computador a foto corta dos lados
     pelo CENTRO, e as mãos ficam entre ~46 % e 47,7 % da tela (ver o --texto-max no hero) */
  --capa-x: 50%; --capa-y: 10%;
  --capa-x-m: 50%; --capa-y-m: 0%;
}

/* ── superfícies ────────────────────────────────────────────────────────── */
.papel { --tx: #000; --tx-apoio: var(--apoio-papel); --linha: rgba(0,0,0,.09); --linha-forte: rgba(0,0,0,.16); --foco: #000;
  color: var(--tx); background: radial-gradient(120% 90% at 50% 46%, #F5F4F0 0%, #F2F1EC 50%, #E3E2DD 100%); }
.palco { --tx: var(--branco); --tx-apoio: var(--apoio-palco); --linha: rgba(255,255,255,.12); --linha-forte: rgba(255,255,255,.2); --foco: var(--lime);
  color: var(--tx); background: radial-gradient(120% 90% at 50% 28%, #1C1C1C 0%, #101010 48%, #060606 100%); }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; scroll-padding-bottom: 104px; }
body { margin: 0; font: 400 17px/1.5 var(--clash); letter-spacing: -.01em; color: var(--branco); background: var(--noite); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--foco, var(--lime)); outline-offset: 3px; border-radius: 6px; }
.sem-quebra { white-space: nowrap; }

.dentro { width: 100%; max-width: calc(var(--larg) + 40px); margin: 0 auto; padding: 0 20px; }
.dentro--estreito { max-width: 820px; }
.secao { position: relative; padding: 84px 0; overflow: hidden; }
@media (min-width: 900px) { .dentro { padding: 0 40px; max-width: calc(var(--larg) + 80px); } .dentro--estreito { max-width: 900px; } .secao { padding: 120px 0; } }

/* ── tipografia da identidade ───────────────────────────────────────────── */
.fina { display: block; font: 300 clamp(1.45rem, 5.4vw, 2.6rem)/1.04 var(--clash); letter-spacing: -.045em; }
/* Bodoni Moda é variável: SEMPRE pela família, peso 900, itálico (nunca local('BodoniModaItalic-Black')), e com o
   eixo óptico FIXO em 11 (a identidade, §2): sem isso o Chrome põe o opsz no tamanho e os fios somem — a vírgula
   do "350,00" virava ponto (medido nesta página, 23/10/2026). A regra mora no FIM do arquivo: o atalho `font:`
   zera o font-variation-settings, então ela tem de vir depois de todo `font:` com a Bodoni */
.serifada { display: block; font-family: var(--bodoni); font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: .98;
  font-size: clamp(2.6rem, 12.4vw, 5.8rem); padding-top: .1em; }
.serifada--lime { color: var(--lime); }
.papel .serifada--lime { color: #000; }   /* lime no papel some (1,02:1) */
.corpo { max-width: 46ch; margin-top: 22px; font: 400 clamp(1.02rem, 2.6vw, 1.18rem)/1.5 var(--clash); color: var(--tx-apoio); }
.titulo-misto--centro { text-align: center; }

/* ── botões ─────────────────────────────────────────────────────────────── */
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px;
  font: 500 1.06rem/1.15 var(--clash); letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s, border-color .2s; }
.cta:active { transform: scale(.97); transition-duration: .09s; }
.cta--lime { background: var(--lime); color: var(--preto); box-shadow: 0 0 36px rgba(216,255,0,.24); }
.cta--contorno { background: rgba(5,5,5,.25); color: var(--branco); border: 1.5px solid rgba(255,255,255,.42); }
.cta--contorno .seta { width: 20px; height: 20px; transition: transform .3s var(--mola); }
@media (hover: hover) {
  .cta--lime:hover { box-shadow: 0 0 56px rgba(216,255,0,.45); }
  .cta--contorno:hover { border-color: var(--branco); background: rgba(255,255,255,.06); }
  .cta--contorno:hover .seta { transform: translateX(4px); }
}
.cta--brilho { overflow: hidden; isolation: isolate; }
.cta--brilho::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg) translateX(-150%); animation: brilho 3.5s linear infinite; }
@keyframes brilho { 0% { transform: skewX(-20deg) translateX(-150%); } 71.5%, 100% { transform: skewX(-20deg) translateX(420%); } }

/* ═══ A BARRA DE VIDRO (fica no topo) ════════════════════════════════════ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: 10px 12px 0; pointer-events: none; }
.nav__vidro { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 1180px; min-height: 60px; margin: 0 auto; padding: 7px 7px 7px 18px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(14,14,14,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -24px rgba(0,0,0,.9); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav__vidro { background: rgba(14,14,14,.74); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
}
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.nav__logo img { height: 21px; width: auto; }
.nav__ancoras { display: none; }
.nav__ig, .nav__entrar, .nav__comprar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px;
  text-decoration: none; white-space: nowrap; font: 500 .92rem/1 var(--clash); }
.nav__ig { min-width: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); color: var(--branco); }
.nav__ig .ig { width: 18px; height: 18px; flex: none; color: var(--lime); }
.nav__ig span { display: none; }
.nav__entrar { padding: 0 14px; color: var(--branco); }
.nav__comprar { display: none; padding: 0 20px; background: var(--lime); color: var(--preto); font-weight: 600; }
@media (min-width: 375px) { .nav__ig span { display: inline; } .nav__entrar { padding: 0 10px; } }
@media (min-width: 480px) { .nav__entrar { padding: 0 14px; } }
@media (min-width: 900px) { .nav { padding-top: 16px; } .nav__comprar { display: inline-flex; } .nav__logo img { height: 23px; } }
@media (min-width: 1140px) {
  .nav__logo { margin-right: 0; }
  .nav__ancoras { display: flex; align-items: center; gap: 0; margin: 0 auto; }
  .nav__ancoras a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none;
    font: 400 .92rem/1 var(--clash); color: #D9DCD3; transition: color .2s, background-color .2s; }
  .nav__ancoras a:hover { color: var(--branco); background: rgba(255,255,255,.06); }
}
@media (hover: hover) { .nav__ig:hover { border-color: var(--lime); } .nav__entrar:hover { background: rgba(255,255,255,.06); } }

/* ═══ HERO (escuro) ═════════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; background: var(--noite); color: var(--branco); }
.hero__foto { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 80vh; overflow: hidden; background: #0b0b0b; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--capa-x-m) var(--capa-y-m); }
/* o véu: no celular, só por cima da foto, escurecendo de baixo (o título sobe por cima dele) e um pouco do topo
   (a barra de vidro) */
.hero__veu { position: absolute; z-index: 1; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; max-height: 80vh; pointer-events: none;
  background: linear-gradient(0deg, var(--noite) 0%, rgba(5,5,5,.9) 16%, rgba(5,5,5,.3) 40%, rgba(5,5,5,0) 56%),
              linear-gradient(180deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,0) 18%); }
/* a grade sutil de quadrados de canto arredondado (a da referência), por cima do véu, sumindo para a direita */
.hero__grade { position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148'%3E%3Crect x='5' y='5' width='138' height='138' rx='20' fill='%23ffffff' fill-opacity='.018' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E") -34px -22px / 148px 148px repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 62%, #000 100%); mask-image: linear-gradient(180deg, transparent 30%, #000 62%, #000 100%); }
.hero__dentro { position: relative; z-index: 3; margin-top: -88px; padding-bottom: 56px; }
.hero__texto { position: relative; }
.hero__titulo { font: 300 clamp(2.7rem, 13vw, 4.6rem)/.98 var(--clash); letter-spacing: -.05em; color: var(--branco); }
.hero__titulo > span { display: block; }
/* "R$ 10 mil" numa faixa lime cheia, texto preto (19,6:1) */
.hero__faixa { font-weight: 600; letter-spacing: -.045em; color: #000; background: var(--lime); padding: 0 .1em .03em; border-radius: .07em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__lead { max-width: 33rem; margin-top: 22px; font: 400 clamp(1.02rem, 3.9vw, 1.16rem)/1.5 var(--clash); color: #E6E7E1; }
.hero__acao { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__acao .cta--lime { flex: 1 1 100%; }
.hero__acao .cta--contorno { flex: 1 1 auto; }
.hero__preco { margin-top: 20px; font: 400 1rem/1.45 var(--clash); color: #CFD2C9; }
.hero__preco b { color: var(--branco); font-weight: 600; }
.hero__quando { margin-top: 4px; font: 400 .92rem/1.45 var(--clash); color: #9EA398; }
/* (26/10/2026) a oferta (+ R$ 1,00 leva a Agência) e o preço de quem já tem a Agência, numa linha */
.hero__agencia { max-width: 33rem; margin-top: 6px; font: 400 .95rem/1.45 var(--clash); color: #CFD2C9; }
.hero__agencia b { color: var(--lime); font-weight: 600; }
.pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.pilar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); font: 500 .96rem/1.2 var(--clash); letter-spacing: -.01em; color: var(--branco); }
.icone { width: 24px; height: 24px; flex: none; }
.pilar__icone { color: var(--lime); }
@media (min-width: 480px) {
  .hero__acao .cta--lime, .hero__acao .cta--contorno { flex: 0 0 auto; }
}

/* computador: a foto inteira de fundo, o véu escuro da esquerda (ele também apaga a faixa de LED cortada na borda
   esquerda da foto, que competia com o título), o texto por cima e os pilares 2 × 2 embaixo do texto (a pessoa fica no
   terço direito da foto: a coluna de pilares à direita dela, da 1ª versão, ficaria por cima do corpo) */
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: clamp(640px, 50vw, 860px); }
  /* (26/10/2026) a foto no topo, com a altura no máximo 78vw (a ampliação do cover fica em até ~1,39×): onde o texto
     deixa o hero mais alto que isso (de 900 a ~1100 px), a foto acaba num degradê para o fundo escuro, em vez de
     ampliar até ele ir para a borda direita */
  .hero__foto { position: absolute; inset: 0 0 auto 0; height: min(100%, 78vw); aspect-ratio: auto; max-height: none; }
  .hero__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none;
    background: linear-gradient(0deg, var(--noite) 0%, rgba(5,5,5,.6) 40%, rgba(5,5,5,0) 100%); }
  .hero__foto img { object-position: var(--capa-x) var(--capa-y); }
  .hero__veu { inset: 0; aspect-ratio: auto; max-height: none;
    background: linear-gradient(90deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.92) 22%, rgba(5,5,5,.62) 40%, rgba(5,5,5,.14) 56%, rgba(5,5,5,0) 64%),
                linear-gradient(180deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,0) 20%),
                linear-gradient(0deg, var(--noite) 0%, rgba(5,5,5,.5) 12%, rgba(5,5,5,0) 30%); }
  .hero__grade { right: auto; width: 62%;
    -webkit-mask-image: radial-gradient(110% 95% at 18% 50%, #000 34%, rgba(0,0,0,.5) 62%, transparent 86%);
            mask-image: radial-gradient(110% 95% at 18% 50%, #000 34%, rgba(0,0,0,.5) 62%, transparent 86%); }
  .hero__dentro { margin-top: 0; padding-top: 132px; padding-bottom: 128px;
    /* a coluna do texto termina 44 px antes dos 46 % da tela (as mãos da foto v2): a margem esquerda do .dentro é
       max(40px, (100vw − 1260px)/2 + 40px) */
    --texto-max: min(31rem, calc(46vw - max(40px, (100vw - 1260px) / 2 + 40px) - 44px)); }
  .hero__texto { max-width: var(--texto-max); }
  .hero__titulo { font-size: clamp(3.4rem, 5.9vw, 5.9rem); }
  .hero__lead { margin-top: 26px; font-size: clamp(1.06rem, 1.25vw, 1.2rem); }
  .hero__acao { margin-top: 34px; gap: 14px; }
  .pilares { max-width: var(--texto-max); margin-top: 34px; gap: 10px; }
  .pilar { background: rgba(5,5,5,.42); }
}

/* ═══ O PLANO (papel), VISUAL (26/10/2026): a conversa do WhatsApp (bloco preto) e os 4 encontros (bloco claro) ═══ */
.plano__grade { display: grid; gap: 16px; margin-top: 44px; }
.bloco { display: grid; align-content: start; gap: 10px; padding: 26px 20px 24px; border-radius: 32px; }
.bloco--zap { background: #000; color: var(--branco); box-shadow: 0 34px 70px -42px rgba(0,0,0,.75); }
.bloco--vivo { background: rgba(255,255,255,.66); border: 1px solid var(--linha); box-shadow: 0 24px 50px -36px rgba(0,0,0,.35); }
.bloco__rotulo { display: flex; align-items: center; gap: 12px; font: 600 .68rem/1.3 var(--mont); letter-spacing: .32em; text-transform: uppercase; }
.bloco__rotulo svg { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 12px; flex: none; }
.bloco--zap .bloco__rotulo { color: var(--lime); }
.bloco--zap .bloco__rotulo svg { background: var(--lime); color: #000; }
.bloco--vivo .bloco__rotulo { color: #000; }
.bloco--vivo .bloco__rotulo svg { background: #000; color: var(--lime); }
.bloco__titulo { margin-top: 8px; font: 300 clamp(1.75rem, 6.6vw, 2.7rem)/1.02 var(--clash); letter-spacing: -.045em; }
.bloco__sub { font-family: var(--bodoni); font-weight: 900; font-style: italic; font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1.05; letter-spacing: -.03em; }
.bloco--zap .bloco__sub { color: var(--lime); }
.bloco__nota { margin-top: 4px; font: 400 .84rem/1.45 var(--clash); color: #9EA398; }
/* a conversa: uma tela de WhatsApp desenhada em HTML/CSS (ilustração: sem nome, sem número, sem resultado) */
.conversa { margin-top: 12px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0E120F;
  background-image: radial-gradient(rgba(216,255,0,.05) 1px, transparent 1.4px); background-size: 18px 18px; }
.conversa__topo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #161B17; border-bottom: 1px solid rgba(255,255,255,.06); }
.conversa__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #000; flex: none; }
.conversa__avatar svg { width: 22px; height: 22px; }
.conversa__quem { display: grid; gap: 2px; }
.conversa__quem b { font: 600 .98rem/1.2 var(--clash); color: var(--branco); }
.conversa__quem small { font: 400 .8rem/1.2 var(--clash); color: #9EA398; }
.conversa__msgs { display: grid; gap: 10px; padding: 18px 14px 20px; }
.msg { position: relative; max-width: 84%; padding: 9px 12px 7px; border-radius: 16px; font: 400 .95rem/1.38 var(--clash); letter-spacing: -.005em; }
.msg time { display: inline-flex; align-items: center; gap: 4px; float: right; margin: 6px 0 -2px 12px; font: 400 .7rem/1 var(--clash); opacity: .7; }
.msg .lido { width: 16px; height: 11px; }
.msg--mentor { justify-self: start; background: #222925; color: #EEF0EA; border-top-left-radius: 5px; }
.msg--aluno { justify-self: end; background: var(--lime); color: #000; border-top-right-radius: 5px; }
.msg--digita { justify-self: start; display: flex; gap: 5px; padding: 13px 14px; background: #222925; border-top-left-radius: 5px; }
.msg--digita span { width: 7px; height: 7px; border-radius: 50%; background: #9EA398; animation: digita 1.2s ease-in-out infinite; }
.msg--digita span + span { animation-delay: .15s; } .msg--digita span + span + span { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* os 4 encontros: quadrados pretos, o número em Bodoni lime (lime só em área escura) */
.encontros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.encontro { display: grid; align-content: space-between; gap: 14px; min-height: 132px; padding: 14px 14px 16px; border-radius: 20px; background: #000; color: var(--branco); }
.encontro__n { font: 900 italic 3.2rem/.8 var(--bodoni); letter-spacing: -.04em; color: var(--lime); }
.encontro__sem { display: block; font: 500 .98rem/1.2 var(--clash); }
.encontro__tags { display: grid; gap: 6px; margin-top: -6px; }
.encontro__tag { display: inline-flex; align-items: center; gap: 7px; font: 600 .62rem/1.2 var(--mont); letter-spacing: .26em; text-transform: uppercase; color: #C9CCC4; }
.encontro__tag i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lime); box-shadow: 0 0 0 3px rgba(216,255,0,.22); }
.encontro__tag--gravado i { width: 0; height: 0; border-radius: 0; background: none; box-shadow: none; border-style: solid; border-width: 4.5px 0 4.5px 8px; border-color: transparent transparent transparent #C9CCC4; }
.bloco__quando { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--linha); font: 400 .98rem/1.45 var(--clash); color: var(--apoio-papel); }
.bloco__quando .icone { width: 22px; height: 22px; margin-top: 1px; color: #000; }
/* a faixa da meta (honestidade: perto do título do plano) */
.meta { padding: 26px 24px; border-radius: 28px; background: #000; color: var(--branco); box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); }
.meta__titulo { font: 300 clamp(1.4rem, 4.4vw, 1.9rem)/1.12 var(--clash); letter-spacing: -.03em; color: var(--lime); }
.meta p + p { margin-top: 12px; color: #C9CCC4; }
.meta--faixa { margin-top: 16px; }
@media (min-width: 560px) {
  .bloco { padding: 34px 32px 30px; }
  .encontros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .plano__grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 20px; margin-top: 60px; }
  /* os dois blocos com a mesma altura: o dos encontros estica os quadrados (nada de vazio embaixo) */
  .bloco--vivo { grid-template-rows: auto auto auto 1fr auto; }
  .bloco { padding: 40px 38px 34px; }
  .encontros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .encontro { min-height: 150px; }
  .meta--faixa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 20px; padding: 30px 38px; }
  .meta--faixa p + p { margin-top: 0; }
}
@media (min-width: 1140px) { .encontros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══ COMO VAMOS FAZER (palco): as 4 semanas numa linha do tempo (vertical no celular, horizontal no computador) ═══ */
.linha-tempo { --vao: 26px; display: grid; margin-top: 48px; }
.semana { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-content: start; padding-bottom: var(--vao); }
.semana:last-child { padding-bottom: 0; }
.semana:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 64px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), rgba(216,255,0,.18)); }
.semana__no { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--lime); color: #000;
  box-shadow: 0 0 0 6px rgba(216,255,0,.1), 0 0 40px rgba(216,255,0,.18); }
.semana__no .icone { width: 28px; height: 28px; }
.semana__rotulo { display: flex; align-items: baseline; gap: 10px; font: 600 .68rem/1 var(--mont); letter-spacing: .32em; text-transform: uppercase; color: var(--apoio-palco); }
.semana__n { font: 900 italic 2.5rem/.9 var(--bodoni); letter-spacing: -.03em; text-transform: none; color: var(--lime); }
.semana__titulo { margin-top: 8px; font: 500 clamp(1.25rem, 4.2vw, 1.5rem)/1.18 var(--clash); letter-spacing: -.025em; color: var(--branco); }
.semana__nota { margin-top: 8px; font: 400 .88rem/1.4 var(--clash); color: var(--apoio-palco); }
/* (27/10/2026, ?v=5) a DATA do encontro de cada semana (a turma do loja.php: "Segunda, 02/11, às 20h30"), entre o rótulo
   e o tema; no quadrado preto do plano, "seg, 02/11" em lime (área escura) embaixo do "Semana 1" */
.semana__no { grid-row: 1 / span 4; }
.semana__quando { margin-top: 10px; font: 600 .7rem/1.35 var(--mont); letter-spacing: .18em; text-transform: uppercase; color: var(--branco); }
.encontro__data { display: block; margin-top: 6px; font: 600 .62rem/1.2 var(--mont); letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
@media (min-width: 900px) {
  /* a linha passa por trás dos quadrados, do centro do 1º ao do 4º (cada coluna tem (100% − 3 vãos)/4); desenhada no <ol>
     e não em cada <li>, para nada sair da caixa de ninguém */
  .linha-tempo { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--vao); margin-top: 72px; }
  .linha-tempo::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 3 * var(--vao)) / 4 - 28px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--lime), rgba(216,255,0,.18)); }
  .semana { display: block; padding-bottom: 0; }
  .semana:not(:last-child)::before { content: none; }
  .semana__no { position: relative; }
  .semana__rotulo { margin-top: 26px; }
  .semana__titulo { max-width: 15ch; }
}

/* ═══ PARA QUEM É (palco) ════════════════════════════════════════════════ */
.quem__grade { display: grid; gap: 44px; }
.lista-mais { display: grid; gap: 18px; margin-top: 30px; }
.lista-mais li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; font: 400 clamp(1.05rem, 2.6vw, 1.2rem)/1.4 var(--clash); }
.mais { width: 30px; height: 30px; margin-top: 1px; }
.mais rect { fill: #000; }
.mais rect.mais__traco { fill: var(--branco); }
.lista-mais--palco .mais rect { fill: var(--lime); }
.lista-mais--palco .mais rect.mais__traco { fill: #000; }
.nao-e { align-self: end; padding: 28px 26px; border-radius: 28px; border: 1.5px solid rgba(255,255,255,.3); }
.papel .nao-e { border-color: rgba(0,0,0,.26); background: rgba(255,255,255,.5); }   /* (26/10/2026) o "para quem é" foi para o papel */
.nao-e__titulo { font: 300 clamp(1.4rem, 4.4vw, 1.9rem)/1.12 var(--clash); letter-spacing: -.03em; }
.nao-e p + p { margin-top: 12px; color: var(--tx-apoio); }
@media (min-width: 900px) { .quem__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; } }

/* ═══ O QUE VOCÊ APRENDE (papel) ═════════════════════════════════════════ */
.frentes { display: grid; gap: 14px; margin-top: 48px; }
.frente { position: relative; padding: 26px 24px 28px; border-radius: 28px; background: rgba(255,255,255,.62); border: 1px solid var(--linha);
  box-shadow: 0 24px 50px -36px rgba(0,0,0,.35); }
.frente__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #000; color: var(--lime); }
.frente__icone .icone { width: 28px; height: 28px; }
.frente h3 { margin-top: 18px; font: 600 1.35rem/1.15 var(--clash); letter-spacing: -.02em; }
.frente h3 span { display: block; font-weight: 300; }
.frente p { margin-top: 12px; font: 400 1rem/1.5 var(--clash); color: var(--tx-apoio); }
@media (min-width: 900px) { .frentes { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; } }

.feitos { margin-top: 80px; text-align: center; }
.feitos__titulo { font: 300 clamp(1.5rem, 4.6vw, 2.3rem)/1.1 var(--clash); letter-spacing: -.04em; }
.feitos__texto { max-width: 52ch; margin: 14px auto 0; color: var(--tx-apoio); }
.vitrine { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64%, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  padding-bottom: 12px; margin: 36px -20px 0; padding-inline: 20px; scrollbar-width: thin; text-align: left; }
.peca { scroll-snap-align: start; }
.peca__video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; background: #111; box-shadow: 0 30px 60px -34px rgba(0,0,0,.7); }
.peca__titulo { margin-top: 14px; font: 600 1.08rem/1.2 var(--clash); letter-spacing: -.02em; }
.peca__texto { margin-top: 6px; font: 400 .95rem/1.4 var(--clash); color: var(--tx-apoio); }
.feitos__nao { max-width: 56ch; margin: 30px auto 0; font: 400 .98rem/1.5 var(--clash); color: var(--tx-apoio); }
.feitos__nao a { color: var(--tx); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (min-width: 720px) { .vitrine { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: auto; padding-inline: 0; max-width: 900px; gap: 26px; } }

/* o selo das peças (26/10/2026, pedido dele: "nos trabalhos que fiz, fala que foi feito pela agencia de ia"): uma pílula
   preta com a estrela lime, embaixo da peça (por cima ela taparia o começo dos vídeos e o logo da arte); igual no papel e no palco */
.selo { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #000;
  border: 1px solid rgba(255,255,255,.18); color: var(--branco); font: 600 .76rem/1.2 var(--clash); letter-spacing: 0; }
.selo .icone { width: 15px; height: 15px; flex: none; color: var(--lime); fill: currentColor; }
.selo + .peca__titulo { margin-top: 10px; }

/* ═══ A PROVA (palco; 26/10/2026): o número da loja com o gráfico das 3 semanas, a arte e os três motions de anúncios reais ═══ */
.prova__topo { display: grid; gap: 40px; }
.prova__rotulo { margin-bottom: 18px; font: 600 .68rem/1.3 var(--mont); letter-spacing: .32em; text-transform: uppercase; color: var(--lime); }
.prova__grafico { width: 100%; max-width: 560px; margin: 0; padding: 22px 14px 16px; border-radius: 28px; border: 1px solid var(--linha); background: rgba(255,255,255,.03); }
/* o gráfico (SVG da página, sem style=""): barras em branco baixo, a maior em lime cheio; os textos em Clash */
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico text { font-family: var(--clash); fill: var(--branco); }
.grafico__base { stroke: rgba(255,255,255,.3); stroke-width: 1.5; }
.grafico__barra { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.42); stroke-width: 1.2; }
.grafico__barra--destaque { fill: var(--lime); stroke: var(--lime); }
.grafico__valor { font-weight: 600; letter-spacing: -.02em; }
.grafico__semana { font-weight: 500; }
.grafico text.grafico__datas { fill: var(--apoio-palco); }
.prova__grafico figcaption { margin-top: 14px; padding: 0 6px; font: 400 .86rem/1.45 var(--clash); color: var(--apoio-palco); }
.prova__sub { margin-top: 72px; text-align: center; font: 300 clamp(1.5rem, 4.6vw, 2.3rem)/1.1 var(--clash); letter-spacing: -.04em; }
.prova__pecas { display: grid; gap: 36px; margin-top: 32px; }
.prova__arte { margin: 0; }
.prova__arte img { width: 100%; height: auto; border-radius: 20px; background: #111; box-shadow: 0 30px 60px -34px rgba(0,0,0,.7); }
.prova__arte .peca__titulo { margin-top: 10px; }
.vitrine--prova { margin-top: 0; }
.meta--prova { margin-top: 56px; background: rgba(0,0,0,.45); border: 1px solid var(--linha-forte); box-shadow: none; }
@media (min-width: 720px) { .prova__arte { width: 100%; max-width: 560px; margin-inline: auto; } }
@media (min-width: 900px) {
  .prova__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .prova__grafico { padding: 30px 28px 22px; }
  .prova__sub { margin-top: 96px; }
  .meta--prova { margin-top: 64px; }
}
/* computador largo: a arte e os três motions numa fileira só, da mesma altura (1,6 : 3) */
@media (min-width: 1100px) {
  .prova__pecas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr); gap: 20px; align-items: start; margin-top: 40px; }
  .prova__arte { max-width: none; margin: 0; }
  .vitrine--prova { max-width: none; margin: 0; gap: 20px; }
}

/* ═══ COMO FUNCIONA + COMPRAR (palco) ════════════════════════════════════ */
.oferta__grade { display: grid; gap: 44px; }
@media (min-width: 900px) { .oferta__grade { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; } }
/* a sequência de verdade: pagar → a data → ao vivo → suporte */
.depois { display: grid; margin-top: 30px; border-top: 1px solid var(--linha); }
.depois li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linha);
  font: 400 1rem/1.45 var(--clash); color: var(--tx-apoio); }
.depois li b { color: var(--tx); font-weight: 500; }
.depois li a { color: var(--tx); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; white-space: nowrap; }
.depois__n { font: 900 italic 2rem/1 var(--bodoni); color: var(--lime); letter-spacing: -.03em; }
.recebe { margin-top: 32px; padding: 26px 24px; border-radius: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.recebe__rotulo { font: 600 .68rem/1.4 var(--mont); letter-spacing: .42em; text-transform: uppercase; color: var(--lime); }
.recebe .lista-mais { margin-top: 20px; }
.recebe .lista-mais li { font-size: 1.02rem; color: var(--tx-apoio); }
.recebe .lista-mais b { color: var(--tx); font-weight: 500; }
.recebe__nao { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); font: 400 .95rem/1.45 var(--clash); color: var(--tx-apoio); }

.compra { background: #0B0B0B; color: var(--branco); border: 1px solid rgba(255,255,255,.12); border-radius: 36px; padding: 30px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -40px rgba(0,0,0,.9); align-self: start; scroll-margin-top: 92px; }
.compra__nome { font: 500 1.02rem/1.3 var(--clash); color: var(--apoio-palco); }
.preco { margin-top: 6px; }
.preco__valor { display: block; font: 900 italic clamp(3.4rem, 16vw, 5.6rem)/1 var(--bodoni); letter-spacing: -.035em; color: var(--lime); }
.preco__valor small { font-size: .5em; letter-spacing: 0; }
.preco .cupom-novo { font-size: clamp(2.8rem, 13.5vw, 4.6rem); }
/* (02/11/2026) R$ 2.497,00 tem um algarismo a mais: no celular e na coluna de 900–1100 px o "R$" caía numa linha sozinho.
   O preço numa linha só, com o tamanho pela largura do quadro (container query: ~5,4 em de largura cabem em 17,5 cqi).
   Navegador sem container query fica com o de cima (pode quebrar a linha, como antes; nunca estoura). */
@supports (container-type: inline-size) {
  .preco { container-type: inline-size; }
  .preco__valor { white-space: nowrap; font-size: clamp(2.4rem, 17.5cqi, 5.6rem); }
  .preco .cupom-novo { white-space: nowrap; font-size: clamp(2.2rem, 15cqi, 4.6rem); }
}
.preco__nota { margin-top: 12px; color: var(--apoio-palco); }
.preco__nota b { color: var(--branco); font-weight: 500; }
/* (26/10/2026) o preço de quem já tem a Agência, a oferta e o aviso do desconto */
.preco__quem { margin-top: 10px; font: 400 .92rem/1.45 var(--clash); color: var(--apoio-palco); }
.preco__quem b { color: var(--lime); font-weight: 600; }
/* (02/11/2026) a Agência de IA INCLUÍDA: a linha embaixo do preço e o quadro do formulário (só informação, sem caixa) */
.preco__inc { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 400 .98rem/1.4 var(--clash); color: var(--branco); }
.preco__inc b { color: var(--lime); font-weight: 600; }
.preco__inc-icone { width: 20px; height: 20px; flex: none; color: var(--lime); }
.incluida { display: grid; gap: 10px; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid rgba(216,255,0,.45); background: rgba(216,255,0,.04); }
.incluida[hidden] { display: none; }
.incluida__rotulo { display: flex; align-items: center; gap: 8px; font: 600 .66rem/1.3 var(--mont); letter-spacing: .32em; text-transform: uppercase; color: var(--lime); }
.incluida__icone { width: 18px; height: 18px; flex: none; }
.incluida__titulo { font: 500 clamp(1.06rem, 4.2vw, 1.2rem)/1.25 var(--clash); letter-spacing: -.02em; color: var(--branco); }
.incluida__itens { display: grid; gap: 6px; }
.incluida__itens li { position: relative; padding-left: 18px; font: 400 .92rem/1.4 var(--clash); color: #DADDD5; }
.incluida__itens li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); }
.incluida__texto { font: 400 .86rem/1.45 var(--clash); color: #A9B0A3; }
.incluida__texto a { color: var(--branco); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 14px 0; margin: -14px 0; }
.upsell__mais { margin-top: -4px; font: 400 .86rem/1.45 var(--clash); color: #A9B0A3; }
.upsell__mais a { color: var(--branco); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 14px 0; margin: -14px 0; }   /* 14 px: com a letra menor da linha, 12 px davam 43,9 px de toque */
.quem-tem { display: grid; gap: 8px; padding: 18px 18px 20px; border-radius: 18px; border: 1.5px solid var(--lime); background: rgba(216,255,0,.07);
  box-shadow: 0 0 0 4px rgba(216,255,0,.08), 0 24px 50px -30px rgba(216,255,0,.35); scroll-margin: 120px 0; }
.quem-tem__rotulo { font: 600 .66rem/1.3 var(--mont); letter-spacing: .32em; text-transform: uppercase; color: var(--lime); }
.quem-tem__titulo { font: 500 clamp(1.12rem, 4.4vw, 1.3rem)/1.25 var(--clash); letter-spacing: -.02em; color: var(--branco); }
.quem-tem__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--apoio-palco); }
.quem-tem__preco b { font: 900 italic clamp(1.9rem, 8vw, 2.4rem)/1 var(--bodoni); letter-spacing: -.03em; color: var(--lime); }
.quem-tem__preco s { text-decoration-thickness: .08em; }
.quem-tem__texto { font: 400 .92rem/1.45 var(--clash); color: #C9CCC4; }
.quem-tem__nota { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font: 500 .88rem/1.4 var(--clash); color: var(--branco); }

.form { display: grid; gap: 14px; margin-top: 26px; }
.form label { display: grid; gap: 7px; font: 500 .82rem/1 var(--clash); letter-spacing: .02em; color: #C9CCC4; }
.form input[type=text], .form input[type=email], .form input[type=tel] { height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  background: #151515; color: var(--branco); font: 400 1.02rem var(--clash); letter-spacing: 0; width: 100%; }
.form input::placeholder { color: #6b7066; }
.form input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(216,255,0,.22); }
.form input[aria-invalid="true"] { border-color: #FC5860; }
/* a dica embaixo do campo (27/10/2026, o CPF): a voz do .aviso, a mesma da produto-digital */
.form .dica { font: 400 .86rem/1.4 var(--clash); letter-spacing: 0; color: #8E9588; }
.formas { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.formas legend { font: 500 .82rem/1 var(--clash); letter-spacing: .02em; color: #C9CCC4; margin-bottom: 10px; padding: 0; }
.forma { position: relative; cursor: pointer; }
.forma input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.forma span { display: grid; gap: 4px; min-height: 76px; align-content: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: #151515;
  font: 400 .88rem/1.3 var(--clash); color: #C9CCC4; transition: border-color .2s, background .2s; }
.forma span b { font-size: 1.06rem; color: var(--branco); font-weight: 600; }
.forma input:checked + span { border-color: var(--lime); background: rgba(216,255,0,.06); box-shadow: 0 0 0 1px var(--lime); }
.forma input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.erro { padding: 12px 14px; border-radius: 12px; background: rgba(252,88,96,.12); border: 1px solid rgba(252,88,96,.4); color: #FFB3B7; font-size: .95rem; }
.form .cta { width: 100%; margin-top: 6px; padding-inline: 14px; font-size: clamp(.98rem, 4.2vw, 1.1rem); white-space: nowrap; }
.form .cta[disabled] { opacity: .7; cursor: wait; }
@media (max-width: 359px) { .form .cta { white-space: normal; text-wrap: balance; padding-block: 10px; } }
.aviso { font-size: .86rem; color: #8E9588; }
.aviso--meta { color: #C9CCC4; }
.aviso--termos { margin-top: 6px; }
.aviso--termos a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; }
.fechou { display: grid; gap: 14px; margin-top: 26px; padding: 22px 20px; border-radius: 22px; border: 1.5px solid rgba(216,255,0,.5); background: rgba(216,255,0,.05); color: var(--apoio-palco); }
.fechou__titulo { font: 300 1.6rem/1.1 var(--clash); letter-spacing: -.03em; color: var(--lime); }
.fechou a:not(.cta) { color: var(--branco); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.fechou .cta { width: 100%; }
.produto-de { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  font: 600 .64rem/1 var(--mont); letter-spacing: .3em; text-transform: uppercase; color: #8E9588; }
.produto-de img { height: 24px; width: auto; }
@media (min-width: 560px) { .compra { padding: 40px 36px; } }

/* os 7 dias para desistir (CDC art. 49): o número grande e a regra */
.sete { display: grid; gap: 18px; margin-top: 64px; padding: 28px 24px; border-radius: 32px; border: 1.5px solid rgba(216,255,0,.5); background: rgba(216,255,0,.03); scroll-margin-top: 92px; }
.sete__n { font: 900 italic clamp(5rem, 22vw, 8rem)/.82 var(--bodoni); letter-spacing: -.05em; color: var(--lime); }
.sete__titulo { font: 300 clamp(1.45rem, 4.6vw, 2.2rem)/1.12 var(--clash); letter-spacing: -.035em; }
.sete__texto p { margin-top: 12px; max-width: 64ch; color: var(--tx-apoio); }
.sete__texto b { color: var(--tx); font-weight: 500; }
.sete__texto a { color: var(--tx); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (min-width: 720px) { .sete { grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 40px 44px; } }
@media (min-width: 900px) { .sete { margin-top: 96px; } }

/* ═══ DÚVIDAS (papel) ════════════════════════════════════════════════════ */
.faq .titulo-misto { margin-bottom: 30px; }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; min-height: 44px;
  font: 500 clamp(1.08rem, 2.8vw, 1.24rem)/1.3 var(--clash); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: #000; color: var(--branco);
  font: 400 1.4rem/1 var(--clash); transition: transform .3s var(--mola); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 62ch; color: var(--tx-apoio); }
.faq details a { color: var(--tx); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; display: inline-block; padding: 12px 2px; margin: -12px 0; }

/* ═══ RODAPÉ ═════════════════════════════════════════════════════════════ */
.rodape { padding: 56px 0 120px; }
.rodape__grade { display: grid; gap: 24px; }
.rodape .logo { display: inline-flex; align-items: center; min-height: 44px; }
.rodape .logo img { height: 30px; width: auto; }
.rodape__contatos { display: flex; flex-wrap: wrap; gap: 10px; }
.pilula { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  text-decoration: none; font: 500 .98rem/1 var(--clash); color: var(--branco); }
.pilula .ig, .pilula .zap { width: 20px; height: 20px; flex: none; color: var(--lime); }
@media (hover: hover) { .pilula:hover { border-color: var(--lime); } }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 .95rem/1 var(--clash); text-decoration: none; color: var(--tx-apoio); }
.rodape nav a:first-child { color: var(--lime); }
.rodape__assina { font: 600 .62rem/1.6 var(--mont); letter-spacing: .3em; text-transform: uppercase; color: var(--tx-apoio); opacity: .8; }
@media (min-width: 900px) { .rodape { padding: 64px 0; } .rodape__grade { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px 40px; }
  .rodape__contatos { justify-content: center; } .rodape nav { justify-content: flex-end; } .rodape__assina { grid-column: 1 / -1; } }

/* ═══ BARRA FIXA (só celular) ════════════════════════════════════════════ */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(6,6,6,.94); color: var(--branco);
  transform: translateY(110%); transition: transform .55s var(--ease-out); border-top: 1px solid rgba(255,255,255,.08); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .barra { background: rgba(6,6,6,.82); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
}
.barra.vem { transform: none; }
.barra p { font: 400 .98rem/1.15 var(--clash); }
.barra p b { font-weight: 600; }
.barra small { display: block; font-size: .8rem; color: var(--apoio-palco); }
.barra .cta { min-height: 50px; padding: 0 22px; flex: none; font-size: 1rem; }
@media (min-width: 900px) { .barra { display: none; } }

/* o eixo óptico da Bodoni (ver .serifada, acima): DEPOIS de todo `font:` */
.serifada, .preco__valor, .depois__n, .sete__n, .quem-tem__preco b, .bloco__sub, .encontro__n, .semana__n { font-variation-settings: 'wght' 900, 'opsz' 11; }

/* ═══ MOVIMENTO — revelar à prova de falha (o lp.js só põe html.anima se der para animar) ═══ */
html.anima .anim { transition: opacity .2s var(--ease-out) var(--d, 0ms), transform .6s var(--mola) var(--d, 0ms); }
html.anima .anim:not(.ok) { opacity: 0; transform: translateY(22px); }
html.anima .d1 { --d: 60ms; } html.anima .d2 { --d: 120ms; } html.anima .d3 { --d: 180ms; } html.anima .d4 { --d: 240ms; }
html.anima .d5 { --d: 300ms; } html.anima .d6 { --d: 360ms; } html.anima .d7 { --d: 420ms; }
/* o hero entra por coreografia (o lp.js põe .ok no .hero dois quadros depois da carga): a foto assenta, as três
   linhas sobem uma a uma, depois o texto, os botões e os pilares */
html.anima .hero__foto img { transition: transform 1.6s var(--ease-out); }
html.anima .hero:not(.ok) .hero__foto img { transform: scale(1.06); }
html.anima .hero .anim:not(.ok) { transform: translateY(.5em); }
html.anima .hero .d1 { --d: 120ms; } html.anima .hero .d2 { --d: 240ms; } html.anima .hero .d3 { --d: 360ms; }
html.anima .hero .d4 { --d: 620ms; } html.anima .hero .d5 { --d: 780ms; } html.anima .hero .d6 { --d: 880ms; }
html.anima .hero .pilar { --d: 960ms; }
html.anima .hero .pilar + .pilar { --d: 1040ms; } html.anima .hero .pilar + .pilar + .pilar { --d: 1120ms; } html.anima .hero .pilar + .pilar + .pilar + .pilar { --d: 1200ms; }
html.parado *, html.parado *::before, html.parado *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta--brilho::after, .msg--digita span { animation: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0ms !important; }
}