/* ==========================================================================
   Página do curso · Mestre do Final Cut Pro (curso.php)
   Porte de mockups-mastercaption/pages/curso.css (prévia aprovada).
   Usa os tokens de /assets/css/rd-mc.css (paleta B · Índigo). Só variáveis de cor.
   Nav, rodapé, .ic e .flag vêm do rd-mc.css (seção "SITE · casca compartilhada"):
   aqui ficam só as exceções da página (botão da nav some com a barra de compra; folga do rodapé no celular).
   ========================================================================== */

/* --dim do design system (#6b6a78) dá 3,6:1 no navy; aqui ele vira texto de verdade (preço riscado, contador), então sobe pra ~5,6:1 */
:root { --dim: #8b8a99; }
picture { display: contents; } /* <picture> não pode virar caixa: o <img> continua sendo o item posicionado */

.btn--grad { box-shadow: 0 12px 44px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .28); }
@media (hover: hover) and (pointer: fine) { .btn--grad:hover { box-shadow: 0 16px 54px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .28); } }
.section-head .lead { margin-top: 18px; }
.center .section-head .lead { margin-left: auto; margin-right: auto; }
main { display: block; overflow-x: hidden; overflow-x: clip; } /* corta o excesso lateral das entradas 3D sem quebrar o sticky */
@media (min-width: 761px) { .section { padding: 120px 0; } }
.h2 { text-wrap: balance; }
.lead, .ch-who__body p, .ch-bonus__card p, .ch-guar__text p, .faq details p { text-wrap: pretty; }
.section-head .lead, .center .lead { text-wrap: balance; }
@media (min-width: 761px) {
  .ch-bonus { padding-top: 96px; }
  .ch-price { padding-bottom: 72px; }
  .ch-faq { padding-top: 104px; }
}
.nobr { white-space: nowrap; }

/* ==========================================================================
   1. HERO · composição aprovada (1440×900) escalada pela largura com --u
   ========================================================================== */
.ch-hero {
  --u: min(1px, calc(100vw / 1440));
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(900 * var(--u));
  background: radial-gradient(70% 60% at 50% 55%, rgba(var(--glow-rgb), .30), transparent 70%), var(--bg);
}
.ch-hero__stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 720 * var(--u)); width: calc(1440 * var(--u)); }
.ch-hero__glow1 { left: calc(370 * var(--u)); top: calc(160 * var(--u)); width: calc(720 * var(--u)); height: calc(640 * var(--u)); }
.ch-hero__glow2 { left: calc(960 * var(--u)); top: calc(200 * var(--u)); width: calc(360 * var(--u)); height: calc(360 * var(--u)); opacity: .35; }
.ch-hero__words { position: absolute; left: 0; right: 0; top: calc(104 * var(--u)); z-index: 1; margin: 0; text-align: center; pointer-events: none; }
.ch-hero__words > span { display: block; white-space: nowrap; } /* sem quebra: com a fonte reserva (antes da Antonio chegar) o "Final Cut Pro" quebrava em 2 linhas e empurrava a página (CLS) */
.ch-hero .ch-w1 { font-size: calc(168 * var(--u)); }
.ch-hero .ch-w2 { font-size: calc(216 * var(--u)); margin-top: calc(2 * var(--u)); }
/* foto nova (v2): o Rai ocupa mais do quadro que na antiga, então ela entra menor (1180 em vez de 1380) e 84 acima
   da base, pra repetir o hero aprovado (b-curso.jpg): cabelo passando na frente do "Mestre do", dedos da esquerda
   saindo do card "11 módulos" e os da direita por cima do "Garantia de 7 dias".
   A cintura (onde a foto termina) e a ponta dos dedos da direita (que encosta na borda) já somem em degradê no próprio
   WebP: máscara em CSS cortaria o brilho do drop-shadow num retângulo. */
.ch-hero__person {
  position: absolute; z-index: 2; bottom: calc(84 * var(--u)); left: calc(132 * var(--u)); width: calc(1180 * var(--u)); max-width: none; height: auto;
  filter: drop-shadow(0 0 60px rgba(var(--glow-rgb), .45));
}
.ch-hero__fade { position: absolute; left: -100vw; right: -100vw; bottom: 0; height: calc(250 * var(--u)); z-index: 3; background: linear-gradient(180deg, transparent, var(--bg) 85%); pointer-events: none; }
.ch-hero__wires { width: 100%; height: 100%; }

/* timeline "fake" do Final Cut rodando atrás do Rai (ajustes 2), nas cores que ele apontou na faixa de clipes do fim
   da página Grátis: régua com timecode; títulos/legendas em roxo, um tom mais violeta que o vídeo e com clipes menores;
   vídeo com os mesmos clipes .timeline__clip do design system (índigo, número + nome do módulo, riscos de onda, sem
   miniatura), e o que passa sob o playhead fica aceso (.timeline__clip--on, o "destacado" da Grátis; curso.js);
   áudio verde com forma de onda; playhead branco parado.
   O PHP põe 2 trechos iguais de 60 s de timecode (--tl-w unidades cada); o track desliza 1 trecho em 60 s e volta pro
   início: o 2º trecho está exatamente onde o 1º estava, então a volta não aparece. Só transform; pausa fora da tela
   (.is-paused do [data-motion] do hero); no print (.is-shot) e com movimento reduzido fica parado na pose do PHP. */
.ch-tl {
  position: absolute; left: 0; right: 0; top: calc(588 * var(--u)); z-index: 1; height: calc(94 * var(--u));
  /* no máximo 1 trecho de largura (2700px): em tela ultralarga (3440px) o fim do 2º trecho apareceria vazio antes da volta */
  max-width: calc(var(--tl-w) * var(--u)); margin-inline: auto;
  overflow: hidden; opacity: .9; pointer-events: none; contain: layout paint;
  font-size: max(7px, calc(9 * var(--u))); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ch-tl__track { display: flex; width: max-content; height: 100%; animation: ch-tl-roll 60s linear var(--tl-delay, 0s) infinite; will-change: transform; }
@keyframes ch-tl-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ch-tl__seg { position: relative; flex: none; width: calc(var(--tl-w) * var(--u)); height: 100%; }
/* régua: traço alto a cada 5 s (com o timecode), médio a cada 1 s, fino a cada 1/5 s (1 s = --tl-w/60) */
.ch-tl__ruler {
  --s: calc(var(--tl-w) / 60 * var(--u));
  position: absolute; left: 0; right: 0; top: 0; height: calc(14 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .14);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px calc(var(--s) * 5)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px var(--s)) 0 100% / 100% 42% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px calc(var(--s) / 5)) 0 100% / 100% 22% no-repeat,
    rgba(255, 255, 255, .025);
}
.ch-tl__ruler span { position: absolute; left: calc(var(--x) * var(--u) + 4 * var(--u)); top: calc(1.5 * var(--u)); font-size: .84em; letter-spacing: .02em; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.ch-tl__lane { position: absolute; left: 0; right: 0; }
.ch-tl__lane > i {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u));
  overflow: hidden; white-space: nowrap; font-style: normal;
}
/* títulos e legendas: roxo (mais violeta que o índigo do vídeo, "um pouquinho diferente"), clipes menores */
.ch-tl__lane--fx { top: calc(18 * var(--u)); height: calc(14 * var(--u)); }
.ch-tl__lane--fx > i {
  display: flex; align-items: center; padding: 0 calc(7 * var(--u)); font-size: .86em; color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(196, 181, 253, .42); border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, rgba(139, 92, 246, .62), rgba(109, 40, 217, .46));
}
/* vídeo: os clipes da faixa da Grátis (cor, borda, texto e riscos vêm do .timeline__clip do rd-mc.css), em escala do hero */
.ch-tl__lane--video { top: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.ch-tl__lane--video > .timeline__clip {
  min-width: 0; height: auto; padding: calc(5 * var(--u)) calc(9 * var(--u)) 0; border-radius: calc(6 * var(--u));
  font-size: max(7px, calc(10.5 * var(--u))); line-height: 1.2;
}
.ch-tl__lane--video .timeline__clip b { margin-right: calc(6 * var(--u)); }
.ch-tl__lane--video .timeline__wave { height: calc(9 * var(--u)); margin-top: calc(5 * var(--u)); }
.ch-tl__lane--video > .timeline__clip--on { box-shadow: 0 0 calc(20 * var(--u)) rgba(var(--glow-rgb), .75); }
/* áudio: verde, forma de onda (SVG embutido; cada clipe começa num ponto diferente da onda) */
.ch-tl__lane--audio { top: calc(75 * var(--u)); height: calc(17 * var(--u)); }
.ch-tl__lane--audio > i {
  padding: calc(1.5 * var(--u)) calc(7 * var(--u)); font-size: .8em; color: rgba(209, 250, 229, .92);
  border: 1px solid rgba(110, 231, 183, .45); border-radius: calc(4 * var(--u));
  background-color: rgba(16, 122, 82, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath fill='%2386efac' fill-opacity='.85' d='M0 19L3 17L6 17L9 17L12 15L15 13L18 13L21 9L24 6L27 6L30 5L33 5L36 4L39 7L42 8L45 7L48 7L51 12L54 11L57 12L60 10L63 10L66 14L69 13L72 10L75 11L78 11L81 10L84 8L87 6L90 8L93 8L96 5L99 7L102 8L105 8L108 8L111 9L114 7L117 9L120 10L123 10L126 14L129 15L132 14L135 14L138 14L141 15L144 12L147 14L150 13L153 12L156 10L159 7L162 7L165 9L168 8L171 9L174 9L177 10L180 11L183 12L186 12L189 14L192 13L195 14L198 14L201 14L204 14L207 15L210 15L213 14L216 12L219 12L222 11L225 11L228 10L231 9L234 9L237 9L240 9L243 10L246 12L249 12L252 14L255 15L258 16L261 16L264 16L267 16L270 16L273 16L276 16L279 15L282 15L285 14L288 12L291 11L294 10L297 10L300 9L303 10L306 10L309 11L312 12L315 13L318 14L321 15L324 15L327 16L330 16L333 16L336 16L339 16L342 16L345 15L348 15L351 14L354 13L357 11L360 10L363 9L366 10L369 9L372 10L375 9L378 11L381 11L384 13L387 14L390 15L393 15L396 16L399 15L402 15L405 15L408 15L411 16L414 15L417 12L420 13L423 10L426 8L429 10L432 7L435 6L438 6L441 6L444 8L447 10L450 12L453 12L456 11L459 13L462 15L465 15L468 13L471 13L474 14L477 13L480 11L483 12L486 10L489 9L492 10L495 9L498 5L501 3L504 5L507 4L510 5L513 9L516 9L519 12L522 12L525 12L528 11L531 10L534 12L537 14L540 13L543 14L546 12L549 11L552 10L555 9L558 6L561 7L564 5L567 8L570 8L573 7L576 9L579 9L582 12L585 14L588 14L591 16L594 18L597 17L600 18L600 22L597 23L594 22L591 24L588 26L585 26L582 28L579 31L576 31L573 33L570 32L567 32L564 35L561 33L558 34L555 31L552 30L549 29L546 28L543 26L540 27L537 26L534 28L531 30L528 29L525 28L522 28L519 28L516 31L513 31L510 35L507 36L504 35L501 37L498 35L495 31L492 30L489 31L486 30L483 28L480 29L477 27L474 26L471 27L468 27L465 25L462 25L459 27L456 29L453 28L450 28L447 30L444 32L441 34L438 34L435 34L432 33L429 30L426 32L423 30L420 27L417 28L414 25L411 24L408 25L405 25L402 25L399 25L396 24L393 25L390 25L387 26L384 27L381 29L378 29L375 31L372 30L369 31L366 30L363 31L360 30L357 29L354 27L351 26L348 25L345 25L342 24L339 24L336 24L333 24L330 24L327 24L324 25L321 25L318 26L315 27L312 28L309 29L306 30L303 30L300 31L297 30L294 30L291 29L288 28L285 26L282 25L279 25L276 24L273 24L270 24L267 24L264 24L261 24L258 24L255 25L252 26L249 28L246 28L243 30L240 31L237 31L234 31L231 31L228 30L225 29L222 29L219 28L216 28L213 26L210 25L207 25L204 26L201 26L198 26L195 26L192 27L189 26L186 28L183 28L180 29L177 30L174 31L171 31L168 32L165 31L162 33L159 33L156 30L153 28L150 27L147 26L144 28L141 25L138 26L135 26L132 26L129 25L126 26L123 30L120 30L117 31L114 33L111 31L108 32L105 32L102 32L99 33L96 35L93 32L90 32L87 34L84 32L81 30L78 29L75 29L72 30L69 27L66 26L63 30L60 30L57 28L54 29L51 28L48 33L45 33L42 32L39 33L36 36L33 35L30 35L27 34L24 34L21 31L18 27L15 27L12 25L9 23L6 23L3 23L0 21Z'/%3E%3C/svg%3E");
  background-size: calc(300 * var(--u)) 72%; background-position: calc(var(--wo) * -1 * var(--u)) 100%; background-repeat: repeat-x;
}
/* playhead branco parado; a timeline corre por baixo (a 1440 fica em x=1030, entre o Rai e a mão direita) */
.ch-tl__playhead {
  position: absolute; z-index: 2; top: 0; left: calc(50% + 310 * var(--u)); width: 2px; height: calc(92 * var(--u)); margin-left: -1px;
  background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .85), 0 0 18px rgba(var(--accent-text-rgb), .6);
}
.ch-tl__playhead::before {
  content: ''; position: absolute; top: 0; left: 50%; width: calc(11 * var(--u)); height: calc(10 * var(--u)); min-width: 8px; min-height: 7px; transform: translateX(-50%);
  background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.is-shot .ch-tl__track { animation: none; transform: translate3d(calc(var(--tl-pose) * var(--u) * -1), 0, 0); }
@media (prefers-reduced-motion: reduce) { .ch-tl__track { animation: none; transform: translate3d(calc(var(--tl-pose) * var(--u) * -1), 0, 0); } }

/* cards flutuantes do hero (medidas em --u) */
.ch-hero .float { font-size: calc(15 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(18 * var(--u)); line-height: 1.45; }
.ch-hero .float__label { font-size: .8em; margin-bottom: .55em; }
.ch-f .row { display: flex; align-items: center; gap: .9em; }
.ch-f .spark { width: 1.47em; height: 1.47em; fill: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
.ch-f__big { font-size: 1.33em; line-height: 1.1; display: block; }
.ch-f--veq { left: calc(110 * var(--u)); top: calc(345 * var(--u)); --rot: -2deg; }
.ch-f--veq .float__label { margin: 0; }
.ch-f--mods { left: calc(206 * var(--u)); top: calc(548 * var(--u)); }
.ch-f__mid { font-size: 1.13em; }
.ch-f__soft { font-size: .87em; color: rgba(255, 255, 255, .82); }
.ch-f--mods .slider { margin-top: .95em; }
.ch-f--leva { left: calc(1100 * var(--u)); top: calc(330 * var(--u)); width: 16.7em; --rot: 2deg; } /* 16,7em = 250px no desktop; em vez de px pra acompanhar a letra mínima no tablet */
.ch-f__list { display: grid; gap: .5em; font-size: .93em; }
.ch-f--gar { left: calc(1080 * var(--u)); top: calc(575 * var(--u)); }
.ch-f__seven { width: 2.27em; height: 2.27em; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(52, 211, 153, .15); color: #6ee7b7; font-weight: 700; }
.ch-f__soft2 { font-size: .87em; color: var(--muted); }
.ch-n--1 { left: calc(230 * var(--u)); top: calc(432 * var(--u)); }
.ch-n--2 { left: calc(1233 * var(--u)); top: calc(470 * var(--u)); }

/* tablet: a pílula da nav tem 80px fixos, mas o título escala com --u e subia pra baixo dela.
   Desce o palco inteiro (título, Rai, cards e timeline) o que faltar pra o topo do título ficar em 100px. */
@media (min-width: 761px) and (max-width: 1180px) {
  .ch-hero { --off: max(0px, calc(100px - 104 * var(--u))); height: calc(900 * var(--u) + var(--off)); }
  .ch-hero__stage { top: var(--off); }
  .ch-tl { top: calc(588 * var(--u) + var(--off)); }
}
/* texto dos cards nunca abaixo de 11,5px (no iPad o 15×--u dava 8,5px) */
.ch-hero .float { font-size: max(11.5px, calc(15 * var(--u))); }
@media (min-width: 761px) and (max-width: 1100px) {
  /* com a letra maior o card cresce; ancora pela direita pra crescer pra dentro, longe da borda */
  .ch-f--gar { left: auto; right: calc(70 * var(--u)); }
  /* o "Você leva" fica mais alto com a letra mínima: sobe o que cresceu, pra o pé dele continuar acima do nó */
  .ch-f--leva { top: calc(330 * var(--u) - max(0px, 108px - 141 * var(--u))); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .ch-f--leva { display: none; }
  .ch-n--2, .ch-hero__wires path:nth-child(2) { display: none; }
  /* iPad retrato: o "Garantia" (ancorado à direita) cobria o playhead; ele vai pro vão da esquerda, antes do "11 módulos" */
  .ch-tl__playhead { left: calc(50% - 600 * var(--u)); }
}

.ch-hero__copy { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u) + 4px); z-index: 7; text-align: center; padding: 0 var(--gutter); }
.ch-hero__btn { padding: 0 40px; }
.ch-hero .checks { margin-top: 20px; }

/* ==========================================================================
   2. INTRO (faixa logo abaixo do hero)
   ========================================================================== */
.ch-intro { position: relative; padding: 76px 0 10px; }
.ch-intro .lead { margin: 20px auto 0; }
.ch-feats {
  list-style: none; margin: 60px auto 0; padding: 28px 0 0; max-width: 1120px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.ch-feats li { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--muted); }
.ch-feats .ic { width: 20px; height: 20px; color: var(--accent-text); }

/* ==========================================================================
   3. PRA QUEM É
   ========================================================================== */
.ch-who__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ch-who__card { height: 100%; overflow: hidden; border-radius: 28px; transition: transform .4s cubic-bezier(.2, .7, .3, 1), border-color .4s ease, box-shadow .4s ease; }
.ch-who__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ch-who__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .ch-who__card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-text-rgb), .4); box-shadow: var(--glass-shadow), 0 0 60px rgba(var(--glow-rgb), .25); }
  .ch-who__card:hover .ch-who__img img { transform: scale(1.05); }
}
.ch-who__img img { -webkit-mask: linear-gradient(180deg, #000 52%, transparent 98%); mask: linear-gradient(180deg, #000 52%, transparent 98%); }
.ch-who__body { position: relative; padding: 0 28px 30px; margin-top: -22px; }
.ch-who__n {
  display: inline-grid; place-items: center; height: 28px; padding: 0 12px; margin-bottom: 16px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--accent); box-shadow: 0 6px 22px rgba(var(--accent-rgb), .55);
}
.ch-who__body h3 { margin-bottom: 10px; }
.ch-who__body p { margin: 0; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   4. COMPARATIVO
   ========================================================================== */
.ch-vs { overflow-x: clip; }
.ch-vs__glow { right: 6%; top: 34%; width: 700px; height: 600px; opacity: .5; }
.ch-vs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.08fr; gap: 30px; max-width: 1020px; margin: 0 auto; align-items: center; }
.ch-vs__col { position: relative; border-radius: 30px; padding: 34px 34px 26px; }
.ch-vs__col--bad { border: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.ch-vs__col--good {
  padding: 44px 40px 34px; border-color: rgba(var(--accent-text-rgb), .38);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .05) 55%, rgba(var(--accent-rgb), .12)), var(--glass-fill), rgba(14, 15, 34, .7);
  box-shadow: var(--glass-shadow), 0 40px 120px rgba(var(--glow-rgb), .35);
}
.ch-vs__head { padding-bottom: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.ch-vs__head h3 { font-size: 25px; letter-spacing: -.035em; line-height: 1.15; }
.ch-vs__col--bad h3 { color: var(--muted); }
.ch-vs__tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ch-vs__tag .ic { width: 13px; height: 13px; }
.ch-vs__tag--on { color: var(--accent-text); }
.ch-vs__col ul { list-style: none; padding: 0; margin: 0; }
.ch-vs__col li { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; font-size: 15.5px; line-height: 1.5; }
.ch-vs__col li + li { border-top: 1px solid rgba(255, 255, 255, .04); }
.ch-vs__col li .ic { width: 24px; height: 24px; padding: 5px; border-radius: 50%; }
.ch-vs__col--bad li { color: #7a7987; }
.ch-vs__col--bad li .ic { color: #5f5e6b; background: rgba(255, 255, 255, .05); stroke-width: 2.4; }
.ch-vs__col--good li { color: var(--text); }
.ch-vs__col--good li .ic { color: #fff; background: var(--accent); stroke-width: 2.6; box-shadow: 0 0 14px rgba(var(--accent-rgb), .75); }
.ch-vs__vs {
  position: absolute; left: calc(48.1% - 1px); top: 50%; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; display: grid; place-items: center; background: #0b0b16; border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   5. MÓDULOS (carrossel 3D)
   ========================================================================== */
/* o topo é transparente: a luz do comparativo (logo acima) atravessa a divisa em vez de ser cortada por ela */
.ch-mods { overflow: hidden; background: linear-gradient(180deg, transparent 0%, var(--navy) 38%, var(--navy) 62%, var(--bg) 100%); }
.ch-mods .section-head { margin-bottom: 36px; }
.ch-mods__num { margin-bottom: 8px; }
.ch-mods .c3d__caption h3 { margin-bottom: 8px; }
.ch-mods .c3d__caption p { margin: 0; }
.ch-mods .c3d__nav { flex-wrap: wrap; row-gap: 0; }
.ch-mods__count { order: 3; flex: 0 0 100%; text-align: center; margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--dim); font-variant-numeric: tabular-nums; }
.ch-buyrow { margin-top: 44px; }
.ch-buyrow .small { margin: 14px 0 0; }

/* ==========================================================================
   6. BÔNUS
   ========================================================================== */
.ch-bonus__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ch-bonus__cover {
  position: relative; aspect-ratio: 600 / 867; border-radius: 22px; overflow: hidden; background: #0b0b14;
  border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), border-color .5s ease, box-shadow .5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ch-bonus__card:hover .ch-bonus__cover { transform: translateY(-8px) rotate(-1.2deg) scale(1.02); border-color: rgba(var(--accent-text-rgb), .5); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(var(--glow-rgb), .35); }
}
.ch-bonus__cover img { width: 100%; height: 100%; object-fit: cover; }
.ch-bonus__tag { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(10, 11, 24, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ch-bonus__k { display: block; margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.ch-bonus__k--free { color: #6ee7b7; }
.ch-bonus__card h3 { margin: 6px 0 6px; font-size: 18px; letter-spacing: -.02em; line-height: 1.3; }
.ch-bonus__card p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* capa da comunidade (WhatsApp) feita em CSS */
.ch-wa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  background: radial-gradient(70% 45% at 50% 36%, rgba(37, 211, 102, .26), transparent 70%), radial-gradient(80% 60% at 50% 110%, rgba(var(--glow-rgb), .35), transparent 70%), linear-gradient(180deg, #0c1418, #070910);
}
.ch-wa__ring { position: absolute; left: 50%; top: 36%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; border: 1px solid rgba(37, 211, 102, .45); animation: ch-ring 3.2s ease-out infinite; }
.ch-wa__ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(37, 211, 102, .35); animation: ch-ring 3.2s ease-out 1.6s infinite; }
@keyframes ch-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.ch-wa__icon { position: relative; width: 88px; height: 88px; margin: -40px 0 18px; border-radius: 26px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #2fd673, #12904c); box-shadow: 0 20px 50px rgba(37, 211, 102, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ch-wa__icon .ic { width: 50px; height: 50px; }
.ch-wa__title { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 44px; line-height: 1; letter-spacing: .01em; }
.ch-wa__sub { font-size: 13px; color: rgba(255, 255, 255, .72); }
.ch-wa__msgs { position: absolute; left: 18px; right: 18px; bottom: 22px; display: grid; gap: 7px; }
.ch-wa__msgs i { display: block; height: 11px; border-radius: 7px; background: rgba(255, 255, 255, .09); }
.ch-wa__msgs i:nth-child(1) { width: 68%; }
.ch-wa__msgs i:nth-child(2) { width: 52%; justify-self: end; background: rgba(37, 211, 102, .3); }
.ch-wa__msgs i:nth-child(3) { width: 60%; }

.ch-stack {
  display: flex; align-items: center; gap: 28px; max-width: 980px; margin: 64px auto 0; padding: 16px 16px 16px 32px; border-radius: 999px;
  border-color: rgba(var(--accent-text-rgb), .22);
}
.ch-stack__items { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-size: 15px; }
.ch-stack__items i { font-style: normal; color: var(--accent-text); font-weight: 700; }
.ch-stack__price { text-align: right; }
.ch-stack__price b { display: block; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; }
.ch-stack__price span { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   7. MÉTODO VEQ
   ========================================================================== */
/* a luz índigo dessa seção (a que o Rai curtiu) entra e sai em degradê, sem borda */
.ch-veq { overflow: hidden; background: var(--bg); }
.ch-veq::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 46% at 50% 46%, rgba(var(--glow-rgb), .42), transparent 72%),
    radial-gradient(32% 36% at 10% 74%, rgba(var(--glow2-rgb), .26), transparent 70%),
    radial-gradient(32% 36% at 90% 28%, rgba(var(--glow2-rgb), .24), transparent 70%),
    linear-gradient(180deg, transparent, var(--navy) 30%, var(--navy) 70%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.ch-veq__light {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  -webkit-mask: radial-gradient(50% 42% at 50% 46%, #000, transparent 80%); mask: radial-gradient(50% 42% at 50% 46%, #000, transparent 80%);
}
.ch-veq .container { position: relative; }
.ch-veq__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1060px; margin: 0 auto 90px; }
.ch-veq__wire { position: absolute; inset: auto 0; top: 50%; height: 100px; margin-top: -50px; z-index: 0; }
.ch-veq__cell { position: relative; z-index: 1; }
.ch-veq__cell:nth-child(3) { margin-top: 56px; }
.ch-veq__card {
  position: relative; overflow: hidden; height: 100%; min-height: 300px; padding: 34px 32px 34px; border-radius: 28px; text-align: left;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .04) 60%), var(--glass-fill), rgba(14, 14, 32, .62);
  border-color: rgba(var(--accent-text-rgb), .22);
}
.ch-veq__letter { /* padding embaixo: sem ele a cauda do Q fica fora da caixa, sem degradê, e o Q vira "O" */
  display: block; font-family: var(--font-cond); font-weight: 700; font-size: 136px; line-height: .9; padding: .08em 0 .16em; margin: -.08em 0 -.16em;
  background: linear-gradient(180deg, #fff 0%, var(--accent-text) 38%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(var(--glow-rgb), .55));
}
.ch-veq__ico { position: absolute; right: 26px; top: 30px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(var(--accent-text-rgb), .28); }
.ch-veq__ico .ic { width: 22px; height: 22px; }
.ch-veq__card h3 { margin: 22px 0 8px; font-size: 28px; letter-spacing: -.035em; }
.ch-veq__card p { margin: 0; font-size: 15.5px; color: #b4b3c4; }

/* ---- VEQ aceso (pedido do Rai): o card cresce (1,06), para de flutuar e liga um neon índigo na borda, tipo tubo.
   Desktop: mouse em cima. Toque (celular/iPad): o card no centro da tela, um por vez (assets/js/pages/curso.js põe .is-lit no .bob).
   Teclado: foco. Print (.is-shot): o E aceso, pra mostrar o efeito parado. Animação só de opacidade e transform;
   as sombras do neon ficam prontas numa camada e só a opacidade dela muda. */
.ch-veq__card { overflow: visible; isolation: isolate; --nx: 72px; --ny: 96px; }
.ch-veq__card::before { /* luz atrás da letra */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(170px 150px at var(--nx) var(--ny), rgba(var(--accent-text-rgb), .30), rgba(var(--glow-rgb), .14) 55%, transparent 78%);
}
.ch-veq__card.lift::after { /* o tubo: substitui o anel discreto do .lift do design system */
  inset: -1px; border: 1.5px solid rgba(226, 229, 255, .95);
  box-shadow:
    0 0 2px rgba(var(--accent-text-rgb), 1),
    0 0 12px 2px rgba(var(--accent-rgb), .95),
    0 0 36px 5px rgba(var(--glow-rgb), .62),
    0 0 84px 12px rgba(var(--glow-rgb), .3),
    inset 0 0 10px 1px rgba(var(--accent-text-rgb), .6),
    inset 0 0 44px rgba(var(--glow-rgb), .32);
}
.ch-veq__letter { transition: filter .45s ease; }
.ch-veq__ico { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease; }
@keyframes ch-neon-on { /* acende piscando, como neon ligando */
  0% { opacity: 0; } 7% { opacity: .9; } 13% { opacity: .15; } 22% { opacity: 1; } 30% { opacity: .45; } 42%, 100% { opacity: 1; }
}
.ch-veq .bob.is-lit { animation-play-state: paused; }
.ch-veq .bob.is-lit::before, .is-shot .ch-veq .bob--d1::before { opacity: .8; }
.ch-veq .bob.is-lit .lift, .is-shot .ch-veq .bob--d1 .lift { transform: scale(1.06); }
.ch-veq .bob.is-lit .ch-veq__card::before, .ch-veq .ch-veq__card:focus-visible::before, .is-shot .ch-veq .bob--d1 .ch-veq__card::before,
.ch-veq .bob.is-lit .ch-veq__card::after, .is-shot .ch-veq .bob--d1 .ch-veq__card::after { opacity: 1; }
.ch-veq .bob.is-lit .ch-veq__card::after, .ch-veq .ch-veq__card:focus-visible::after { animation: ch-neon-on .7s linear both; }
.ch-veq .bob.is-lit .ch-veq__letter, .ch-veq .ch-veq__card:focus-visible .ch-veq__letter, .is-shot .ch-veq .bob--d1 .ch-veq__letter {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 14px rgba(var(--accent-text-rgb), .85)) drop-shadow(0 4px 34px rgba(var(--glow-rgb), .9));
}
.ch-veq .bob.is-lit .ch-veq__ico, .ch-veq .ch-veq__card:focus-visible .ch-veq__ico, .is-shot .ch-veq .bob--d1 .ch-veq__ico {
  background-color: var(--accent); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 22px rgba(var(--accent-rgb), .85);
}
@media (hover: hover) and (pointer: fine) {
  .ch-veq .bob:hover .ch-veq__card::before, .ch-veq .bob:hover .ch-veq__card::after { opacity: 1; }
  .ch-veq .bob:hover .ch-veq__card::after { animation: ch-neon-on .7s linear both; }
  .ch-veq .bob:hover .ch-veq__letter { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 14px rgba(var(--accent-text-rgb), .85)) drop-shadow(0 4px 34px rgba(var(--glow-rgb), .9)); }
  .ch-veq .bob:hover .ch-veq__ico { background-color: var(--accent); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: 0 0 22px rgba(var(--accent-rgb), .85); }
}
.is-shot .ch-veq__card::after { animation: none !important; }
.is-shot .ch-veq__card::before, .is-shot .ch-veq__card::after, .is-shot .ch-veq__letter, .is-shot .ch-veq__ico, .is-shot .ch-veq .lift { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ch-veq .bob.is-lit .lift { transform: none !important; }
  .ch-veq__card::after { animation: none !important; }
}

/* frase que gira */
/* "VOCÊ" fica parado; só a palavra roxa rola na janela. A janela tem a largura da maior palavra ("trabalha menos." /
   "entrega melhor.") e a palavra encosta à esquerda dela: o conjunto "Você + janela" não muda de largura quando a
   palavra troca, então o "Você" nunca pula. O conjunto anda .41em pra direita: assim a frase curta ("fatura mais.",
   1,66em menor) e as longas ficam todas a no máximo ~.42em do eixo, em vez de só a curta ficar .83em pra esquerda. */
.ch-punch {
  /* TEMPO DA FRASE (pedido do Rai: 1 s por palavra). --punch-hold = quanto cada palavra fica parada;
     --punch-swap = a troca (subida) entre uma e outra. Mude só aqui: o curso.js lê os dois valores. */
  --punch-hold: 1s;
  --punch-swap: .34s;
  --lh: 1.34em; /* mesma altura de linha de antes (a seção não muda de tamanho) */
  display: block; margin: 0; text-align: center;
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(40px, 6.2vw, 92px); line-height: var(--lh);
}
.ch-punch__line { display: inline-block; white-space: nowrap; vertical-align: top; transform: translateX(.41em); }
.ch-punch__you { color: var(--text); margin-right: .06em; vertical-align: top; }
.ch-punch__win { display: inline-block; vertical-align: top; height: var(--lh); overflow: hidden; text-align: left; }
/* a lista sobe uma palavra por vez (curso.js põe o translateY; a troca é esta transição, só transform). A 4ª palavra
   é cópia da 1ª: depois de subir até ela, volta pro início sem transição (.is-jump) e ninguém vê a volta.
   Sem JS, com movimento reduzido ou no print fica parada em "fatura mais." (a frase inteira está no .sr-only). */
.ch-punch__list { display: block; transition: transform var(--punch-swap) cubic-bezier(.65, 0, .35, 1); }
.ch-punch__list.is-jump { transition: none; }
.ch-punch__list b {
  display: block; width: max-content; height: var(--lh); font-weight: inherit; padding-right: .05em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   8. QUEM SOU EU
   ========================================================================== */
/* 3 blocos: título, foto, texto. No desktop a foto ocupa a coluna da esquerda inteira;
   em uma coluna a ordem fica texto (título) primeiro, foto depois, bio em seguida. */
.ch-about__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "media head" "media text"; column-gap: 84px; row-gap: 0; align-items: start;
}
.ch-about__head { grid-area: head; }
.ch-about__media { grid-area: media; position: sticky; top: 110px; }
.ch-about__text { grid-area: text; }
/* card da foto: a luz índigo do fundo só aparece enquanto a foto carrega */
.ch-about__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; border: 1px solid var(--line-2);
  background:
    radial-gradient(58% 50% at 50% 38%, rgba(var(--glow-rgb), .62), transparent 72%),
    radial-gradient(70% 45% at 50% 108%, rgba(var(--glow2-rgb), .38), transparent 70%),
    var(--navy);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 140px rgba(var(--glow-rgb), .28);
}
/* foto real inteira (ajustes 2: rindo com o Osmo nas montanhas da Irlanda, 4:5 igual ao card). Ocupa o card todo;
   por cima, um degradê escuro na base e um brilho índigo no canto (mesmo padrão do .sb-photo::after do Sobre) */
.ch-about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ch-about__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 5, 14, .45) 100%),
              radial-gradient(70% 45% at 100% 100%, rgba(var(--glow-rgb), .24), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* cards longe do rosto (o queixo fica em ~40% da altura): "No YouTube" embaixo à esquerda, sobre o jeans;
   "Irlanda" à direita a partir de 44%, no ombro, abaixo do queixo */
.ch-about__f--1 { left: -38px; bottom: 64px; --rot: -2deg; }
.ch-about__f--2 { right: -30px; top: 44%; --rot: 2deg; }
.ch-about__mid { display: block; font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.ch-about__f--2 b { display: block; font-size: 19px; letter-spacing: -.02em; }
.ch-about__soft { font-size: 13px; color: rgba(255, 255, 255, .82); }
.ch-about__head .h2 { margin-bottom: 22px; }
.ch-about__text .lead { max-width: none; color: #c4c3d2; }
.ch-about__text > .muted { font-size: 15.5px; line-height: 1.7; }
.ch-quote {
  margin: 24px 0 0; padding: 18px 22px; border-left: 3px solid var(--accent-text); border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0)); font-size: 17px; font-style: italic; line-height: 1.55; color: var(--text);
}
.ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 28px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.ch-stats > div { padding: 16px 16px 14px; background: rgba(9, 10, 26, .92); }
.ch-stats dt { font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* número que conta (curso.js): um "fantasma" invisível (::before com o valor final, fora do texto da página) reserva
   a largura; o número de verdade fica na mesma célula, encostado à direita, então o "+"/"anos" não se mexe */
.ch-count { display: inline-grid; }
.ch-count::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
.ch-count__n { grid-area: 1 / 1; justify-self: end; }
.ch-stats dd { margin: 5px 0 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.ch-apps { margin-top: 30px; }
.ch-apps__label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.ch-apps__label .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.ch-apps__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* flex-wrap: se o nome e o selo não couberem lado a lado, o selo desce em vez de encostar no nome */
.ch-app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 11px 12px; border-radius: 18px; transition: transform .3s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { a.ch-app:hover { transform: translateY(-3px); border-color: rgba(var(--accent-text-rgb), .55); } }
.ch-app__ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid var(--line-2); }
.ch-app__ico .ic { width: 20px; height: 20px; }
.ch-app--live { border-color: rgba(var(--accent-text-rgb), .32); }
.ch-app--live .ch-app__ico { color: #fff; border-color: transparent; background: linear-gradient(160deg, var(--accent-hover), var(--violet)); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .55); }
.ch-app__name { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ch-app__name b { display: block; font-size: 15px; font-weight: 600; }
.ch-app__name small { font-size: 12px; color: var(--muted); }
.ch-app__badge { flex: none; font-size: 10px; padding: 4px 8px; }
.ch-app__badge .ic { width: 11px; height: 11px; stroke-width: 2.4; }

/* ==========================================================================
   9. PREÇO
   ========================================================================== */
.ch-price { overflow-x: clip; }
.ch-price__glow { left: 50%; top: 30%; width: 1000px; height: 760px; margin-left: -500px; opacity: .42; }
.ch-price__layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; max-width: 1140px; margin: 0 auto; }
.ch-price__visual { position: relative; padding-bottom: 70px; }
.ch-price .section-head { margin-bottom: 40px; }
.ch-price__imac { width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); }
.ch-price__ipadwrap { position: absolute; right: -6%; bottom: 0; width: 48%; }
.ch-price__ipad { /* a foto corta as mãos reto no pulso: o pé da imagem some em degradê em vez de terminar numa linha */
  width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .65));
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent 97%); mask: linear-gradient(180deg, #000 70%, transparent 97%);
}
.ch-price__wrap { position: relative; max-width: 500px; width: 100%; justify-self: end; }
.ch-price__card {
  max-width: none; margin: 0; padding: 36px; border-radius: 32px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .02) 42%), var(--navy);
  border: 1px solid rgba(var(--accent-text-rgb), .24);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 100px rgba(var(--glow-rgb), .25);
}
/* logo do curso no lugar do título do card (quadro 39, lugar 1). O alt do <img> mantém o nome no h3 pra leitor de tela e
   Google. O selo desce pra linha de baixo quando não cabe */
.ch-price__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 12px; }
.ch-price__logo { margin: 0; line-height: 0; }
.ch-price__logo img { display: block; width: 254px; height: 47px; }
.ch-price__top .badge { margin-top: 12px; } /* centra o selo na altura do texto do logo, não na do playhead */
.ch-price__desc { margin: 8px 0 22px; font-size: 14.5px; color: var(--muted); }
.ch-price__value { display: flex; align-items: flex-start; line-height: 1; margin: 10px 0 8px; letter-spacing: -.05em; }
.ch-price__x { align-self: center; margin-right: 12px; font-size: 22px; font-weight: 600; color: var(--muted); letter-spacing: -.02em; }
.ch-price__rs { margin: 12px 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ch-price__int { font-size: 88px; font-weight: 700; }
.ch-price__cents { margin-top: 10px; font-size: 36px; font-weight: 700; }
.ch-price__cash { font-size: 16px; color: var(--muted); }
.ch-price__cash b { color: var(--text); font-weight: 700; }
.ch-price__card ul { margin: 26px 0 28px; }
.ch-price__card li { font-size: 15px; line-height: 1.45; }
.ch-price__card li b { font-weight: 650; }
.ch-price__seal { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.ch-seal-mini {
  flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  font-size: 19px; font-weight: 800; line-height: 1; color: #6ee7b7; border: 1.5px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08);
}
.ch-seal-mini small { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ch-price__fine { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--dim); }

/* ==========================================================================
   10. GARANTIA
   ========================================================================== */
.ch-guar__box {
  display: grid; grid-template-columns: 210px 1fr; gap: 52px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 44px 56px 44px 44px; border-radius: 36px;
  background: radial-gradient(60% 90% at 0% 50%, rgba(var(--glow-rgb), .22), transparent 70%), var(--glass-fill), var(--glass-solid);
}
.ch-guar__seal { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.ch-guar__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ch-spin 26s linear infinite; }
.ch-guar__ring text { font: 700 13px var(--font); fill: rgba(var(--accent-text-rgb), .9); }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-guar__num {
  width: 130px; height: 130px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  font-size: 58px; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, var(--accent-hover), var(--violet));
  box-shadow: 0 20px 60px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ch-guar__num small { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ch-guar__text .h2 { font-size: clamp(30px, 3.4vw, 46px); }
.ch-guar__text p { margin: 16px 0 0; font-size: 16px; color: var(--muted); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.ch-faq__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.ch-faq__head .h2 { font-size: clamp(34px, 3.6vw, 50px); }
.ch-faq__head { position: sticky; top: 120px; }
.ch-faq__head .muted { margin: 20px 0 26px; max-width: 340px; }
.ch-faq__head .btn .ic { width: 16px; height: 16px; }
.faq details { transition: border-color .3s ease, background .3s ease; }
.faq details[open] { background: rgba(255, 255, 255, .04); border-color: rgba(var(--accent-text-rgb), .26); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent-text); } }

/* ==========================================================================
   12. CTA FINAL
   ========================================================================== */
.ch-final { padding-top: 40px; }
.ch-final__card { padding: 112px 40px; }
.ch-final__inner { position: relative; z-index: 2; }
.ch-final .h2 { font-size: clamp(36px, 4.8vw, 64px); }
.ch-final .lead { margin: 22px auto 34px; }
.ch-final__btn { padding: 0 40px; }
.ch-final .checks { margin-top: 22px; }
.ch-marquee {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 1; overflow: hidden; pointer-events: none; transform: translateY(-50%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.ch-marquee__track { display: flex; width: max-content; animation: ch-marquee 46s linear infinite; }
/* line-height folgado: com 1 a Antonio desce abaixo da caixa e o overflow cortava a base das letras */
.ch-marquee__track span {
  padding-right: .2em; white-space: nowrap; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 230px; line-height: 1.35;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-text-rgb), .11);
}
@keyframes ch-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Print (.is-shot) e movimento reduzido
   ========================================================================== */
.is-shot .ch-punch__list { transition: none; transform: none !important; }
.is-shot .ch-marquee__track, .is-shot .ch-guar__ring, .is-shot .ch-wa__ring, .is-shot .ch-wa__ring::after { animation: none; }
.is-shot .ch-wa__ring { transform: scale(1.05); opacity: .5; }
.is-shot .ch-wa__ring::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ch-punch__list { transition: none; }
  .ch-marquee__track, .ch-guar__ring, .ch-wa__ring, .ch-wa__ring::after { animation: none; }
  .ch-who__card, .ch-bonus__cover, .ch-who__img img { transition: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
  .ch-bonus__grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; }
  .ch-price__layout { grid-template-columns: 1fr; gap: 40px; }
  .ch-price__visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .ch-price__wrap { justify-self: center; }
  .ch-stats { grid-template-columns: repeat(2, 1fr); }
}
/* "Quem sou eu" em uma coluna já a partir do iPad paisagem: em 2 colunas a foto ficava estreita
   demais e os cards cobriam o rosto. Título primeiro, foto, depois a bio numa coluna de leitura. */
@media (max-width: 1100px) {
  .ch-about__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "media" "text"; row-gap: 44px; }
  .ch-about__head, .ch-about__text { width: 100%; max-width: 620px; margin: 0 auto; }
  .ch-about__head .h2 { margin-bottom: 0; }
  .ch-about__media { position: relative; top: auto; width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (min-width: 761px) and (max-width: 1100px) { .ch-about__head { text-align: center; } }
/* 1101 a 1200: ainda 2 colunas, mas a coluna de texto fica estreita pra 2 chips de app lado a lado */
@media (min-width: 1101px) and (max-width: 1200px) { .ch-apps__list { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ch-who__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .ch-veq__grid { grid-template-columns: 1fr; max-width: 420px; gap: 22px; }
  .ch-veq__cell:nth-child(3) { margin-top: 0; }
  .ch-veq__wire { display: none; }
  .ch-faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .ch-faq__head { position: static; }
}

@media (max-width: 760px) {
  /* hero no celular: palavras em cima, Rai sobrepondo, botão logo abaixo */
  .section { padding: 76px 0; }
  .section--tight { padding: 52px 0; }
  .ch-hero { --u: .78px; height: auto; padding: 88px 0 30px; background: var(--bg); }
  .ch-hero__stage { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .ch-hero__words { position: relative; top: 0; }
  .ch-hero .ch-w1 { font-size: 20.6vw; }
  .ch-hero .ch-w2 { font-size: 18.7vw; }
  .ch-hero__person { position: relative; display: block; left: auto; bottom: auto; width: 128vw; margin: -32.8vw 0 0 -14.6vw; filter: drop-shadow(0 0 40px rgba(var(--glow-rgb), .45)); }
  .ch-hero__glow1 { left: -10vw; top: 30px; width: 120vw; height: 330px; }
  .ch-hero__glow2 { display: none; }
  .ch-hero__fade { height: 230px; bottom: -110px; background: linear-gradient(180deg, transparent, var(--bg) 52%); }
  /* a timeline ficava atrás do Rai e dos cards (só sobravam pedaços nas bordas): no celular sai */
  .ch-hero__wires, .ch-n, .ch-f--leva, .ch-f--veq, .ch-tl { display: none; }
  .ch-f--veq { left: 6px; top: 104px; }
  /* cards em vw: acompanham a foto (que escala com a largura); ficam abaixo do queixo, sobre os braços */
  .ch-f--mods { left: 6px; top: 51vw; }
  .ch-f--mods .slider { display: none; }
  .ch-f--gar { left: auto; right: 6px; top: 62vw; }
  .ch-f__soft2 { display: none; }
  .ch-hero__copy { position: relative; bottom: auto; margin-top: 16px; }
  .ch-hero__btn { width: 100%; max-width: 380px; padding: 0 20px; }
  .ch-hero .checks { gap: 6px 16px; margin-top: 16px; font-size: 12.5px; }

  .ch-intro { padding: 56px 0 10px; }
  .ch-feats { grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-top: 40px; padding-top: 24px; }
  .ch-feats li { justify-content: flex-start; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.4; }

  .ch-who__grid { gap: 16px; }
  .ch-who__img { aspect-ratio: 16 / 9; }
  .ch-who__body p { font-size: 14.5px; }
  .h2 { font-size: 32px; }
  .ch-who__body { padding: 0 22px 24px; }

  .ch-vs__grid { grid-template-columns: 1fr; gap: 0; }
  .ch-vs__col { padding: 26px 22px 18px; }
  .ch-vs__col--good { padding: 30px 22px 22px; }
  .ch-vs__vs { position: relative; left: auto; top: auto; margin: -14px auto; }
  .ch-vs__col li { font-size: 15px; padding: 10px 0; }
  .ch-vs__head h3 { font-size: 22px; }

  .ch-mods .section-head { margin-bottom: 20px; }
  .ch-mods .c3d__nav { flex-wrap: nowrap; }
  .ch-mods__count { order: 0; flex: none; min-width: 76px; margin: 0; font-size: 13px; color: var(--muted); }
  .ch-buyrow .btn { width: 100%; max-width: 380px; }

  .ch-bonus__grid { gap: 26px 14px; }
  .ch-bonus__card h3 { margin-top: 14px; font-size: 15px; }
  .ch-bonus__card p { font-size: 13px; }
  .ch-bonus__cover { border-radius: 16px; }
  .ch-bonus__tag { left: 8px; top: 8px; font-size: 9px; padding: 4px 8px; }
  .ch-wa__icon { width: 58px; height: 58px; border-radius: 18px; margin: -26px 0 12px; }
  .ch-wa__icon .ic { width: 34px; height: 34px; }
  .ch-wa__ring { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .ch-wa__title { font-size: 28px; }
  .ch-wa__sub { font-size: 11px; padding: 0 8px; line-height: 1.35; }
  .ch-wa__msgs { left: 12px; right: 12px; bottom: 14px; gap: 5px; }
  .ch-wa__msgs i { height: 8px; }
  .ch-stack { flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: 26px; margin-top: 44px; text-align: center; }
  .ch-stack__items { justify-content: center; font-size: 14px; }
  .ch-stack__price { text-align: center; }
  .ch-stack .btn { width: 100%; }

  .ch-veq__grid { margin-bottom: 56px; gap: 16px; }
  .ch-veq__card { min-height: 0; padding: 22px 22px 22px 18px; display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; align-items: center; --nx: 55px; --ny: 50%; }
  .ch-veq__letter { grid-row: 1 / 3; font-size: 92px; text-align: center; }
  .ch-veq__ico { display: none; }
  .ch-veq__card h3 { font-size: 22px; margin: 0 0 4px; align-self: end; }
  .ch-veq__card p { font-size: 14.5px; align-self: start; }
  .ch-veq .bob.is-lit .lift, .is-shot .ch-veq .bob--d1 .lift { transform: scale(1.04); } /* card ocupa a largura toda: 1,06 encostava na borda da tela */
  .ch-m-hide { display: none; }
  .ch-punch { font-size: 9.5vw; } /* "Você" + janela = 8,7em, deslocado .41em: a 9,5vw a ponta direita fica a 16px+ da borda até em 360px */

  .ch-about__grid { row-gap: 32px; }
  .ch-about__f--1 { left: -4px; bottom: 36px; }
  /* "Irlanda" no alto à esquerda, sobre as montanhas (pedido do Rai na rodada 2: à direita ele cobria a mão com o Osmo).
     Fica à esquerda do cabelo em todas as larguras de celular (conferido de 360 a 760) */
  .ch-about__f--2 { right: auto; left: -6px; top: 14px; bottom: auto; --rot: -2deg; }
  .ch-about__f--2 .ch-about__soft { display: block; text-wrap: balance; }
  .ch-about__mid { font-size: 14px; }
  .ch-about__media { position: relative; top: auto; }
  .ch-about__f--2 b { font-size: 16px; }
  .ch-about__text .lead { font-size: 16px; }
  .ch-quote { font-size: 16px; padding: 16px 18px; }
  .ch-stats dt { font-size: 21px; }
  .ch-apps__list { grid-template-columns: 1fr; }
  .ch-apps__label { align-items: flex-start; font-size: 11px; letter-spacing: .1em; line-height: 1.4; }
  .ch-apps__label .ic { margin-top: 1px; }

  .ch-price__visual { padding-bottom: 36px; max-width: 320px; }
  .ch-price__card { padding: 28px 22px; }
  .ch-price__logo img { width: 236px; height: 44px; }
  .ch-price__top .badge { margin-top: 0; }
  .ch-price__int { font-size: 76px; }
  .ch-price__x { font-size: 19px; margin-right: 10px; }
  .ch-price__rs { font-size: 22px; }
  .ch-price__cents { font-size: 30px; }

  .ch-guar__box { grid-template-columns: 1fr; gap: 20px; padding: 34px 22px; text-align: center; border-radius: 28px; }
  .ch-guar__seal { width: 170px; height: 170px; margin: 0 auto; }
  .ch-guar__num { width: 104px; height: 104px; font-size: 46px; }
  .ch-guar__num small { font-size: 11px; }

  .ch-faq .faq details { padding: 0 18px; }
  .ch-faq .faq summary { font-size: 16px; padding: 18px 0; }

  .ch-final { padding-top: 10px; }
  .ch-final__card { padding: 72px 20px; }
  .ch-final__btn { width: 100%; padding: 0 18px; }
  .ch-marquee__track span { font-size: 150px; }

  /* barra de compra fixa embaixo: folga pra ela não cobrir o fim do rodapé */
  .footer { padding-bottom: 110px; }

  /* com a barra de compra embaixo, o "Garantir vaga" da nav seria o segundo botão igual na tela */
  .nav__cta .btn { transition: opacity .3s ease, visibility 0s linear 0s, transform .2s ease; }
  .has-buybar .nav__cta .btn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
}

/* celular estreito (até 389): a foto encolhe e o card "Irlanda" de uma linha só chegava no cabelo. Ele fica mais
   estreito e o "há quase uma década" quebra em 2 linhas, sempre à esquerda do cabelo */
@media (max-width: 389px) {
  .ch-about__f--2 { max-width: 42%; }
}

/* carrossel de módulos no toque (tablet): os pontinhos têm 24px de largura, pequenos pro dedo.
   Fica igual ao celular: setas grandes + contador "03 / 10" entre elas (e o arrastar de sempre). */
@media (pointer: coarse) and (min-width: 761px) {
  .ch-mods .c3d__dots { display: none; }
  .ch-mods .c3d__nav { flex-wrap: nowrap; gap: 28px; }
  .ch-mods__count { order: 0; flex: none; min-width: 76px; margin: 0; font-size: 13px; color: var(--muted); }
}