/* Curso Cinegrafista — o que é só desta página (a base está em /assets/loja/lp.css).
 * Cor do curso: âmbar tungstênio #FFB938 (a do card da vitrine). Medido: preto sobre âmbar 12,3:1;
 * âmbar sobre #0A0A0A 11,6:1; âmbar sobre o #151515 do formulário 10,7:1. Sem vermelho (é da urgência):
 * até o ponto do REC é âmbar.
 *
 *   .visor ............ ASSINATURA: a foto do hero no monitor da câmera (cantos, terços, foco que trava,
 *                       REC + timecode, linha de exposição). HUD é aria-hidden: é desenho, não conteúdo.
 *   .claquete ......... a agenda da turma numa claquete; o bastão de cima bate uma vez ao entrar
 *   .regua, .modulo ... os dois tempos do curso em meses (um traço por semana) e os módulos embaixo do mês
 *   .professor ........ parede âmbar, a foto inteira (câmera na mão: não se recorta)
 *   .turma ............ FORMATURA: a foto da turma com o certificado (16:9, larga) + a data no canto
 *   .filme ............ a tira de filme da formatura: o Israel e os formandos discursando (5 quadros
 *                       9:16; rola de lado abaixo de 1100 px, cinco colunas acima)
 *   .formados ......... a turma de 09/09 (ladrilho da data + 9 cartões 1:1 aluno + Israel; 2 colunas
 *                       no celular, 5 a partir de 700 px: 10 peças, nenhuma casa vazia) e, menor, as turmas
 *                       anteriores + o card "a próxima foto aqui é a sua"
 *   .golpe, .compra__turma, .compra__whats ... oferta
 */
:root { --acento: #FFB938; --acento-tx: #000; }
.sem-quebra { white-space: nowrap; }
.chapa.inteira { white-space: nowrap; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
/* a luz de tungstênio vem de trás do visor, fraca */
.hero.fundo-preto { background: radial-gradient(70% 42% at 50% 78%, rgba(255,185,56,.13), rgba(255,185,56,0) 70%), var(--preto); }
.hero__grade { grid-template-areas: "texto" "figura"; }
.hero__texto { margin-top: 0; padding: 18px 0 8px; }
.hero h1 { font-size: clamp(1.95rem, calc((100vw - 40px) / 9.4), 4.4rem); }
.hero .lead b { color: var(--acento); font-weight: 800; }
.hero .apoio { line-height: 1.45; }
@media (min-width: 900px) {
  .hero.fundo-preto { background: radial-gradient(46% 60% at 80% 46%, rgba(255,185,56,.14), rgba(255,185,56,0) 70%), var(--preto); }
  .hero__grade { grid-template-areas: "texto figura"; align-items: center; }
  .hero__texto { padding: 40px 0 104px; }
  .hero h1 { font-size: clamp(2.6rem, 4.7vw, 4.4rem); }
  .hero .cta { white-space: nowrap; }
}

/* ── o visor ─────────────────────────────────────────────────────────── */
.visor { grid-area: figura; justify-self: center; width: 100%; max-width: 440px; margin: 36px 0 64px; }
.visor__quadro { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #151515;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 90px -24px var(--acento-halo-forte); }
.visor__quadro picture, .visor__quadro img { display: block; width: 100%; height: 100%; }
.visor__quadro img { object-fit: cover; }
.visor__hud { position: absolute; inset: 0; pointer-events: none; color: var(--branco);
  font: 700 clamp(.58rem, 2.5vw, .72rem)/1 var(--f); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.visor__hud p { position: absolute; left: 11%; right: 11%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.visor__topo { top: 6.2%; }
.visor__base { bottom: 6.2%; }
.visor__base span { opacity: .8; }
.visor__base b { font-weight: 800; }
.visor__hud .minusc { text-transform: none; }
/* terços: o terço do meio tem as duas linhas verticais; o ::before estica as horizontais até as bordas */
.visor__tercos { position: absolute; top: 0; bottom: 0; left: 33.333%; right: 33.333%; border-inline: 1px solid rgba(252,252,252,.2); }
.visor__tercos::before { content: ""; position: absolute; top: 33.333%; bottom: 33.333%; left: -100%; right: -100%; border-block: 1px solid rgba(252,252,252,.2); }
.visor__canto { position: absolute; width: 7%; aspect-ratio: 1; border: 0 solid rgba(252,252,252,.92); }
.visor__canto--a { top: 3.6%; left: 4.4%; border-top-width: 2px; border-left-width: 2px; }
.visor__canto--b { top: 3.6%; right: 4.4%; border-top-width: 2px; border-right-width: 2px; }
.visor__canto--c { bottom: 3.6%; left: 4.4%; border-bottom-width: 2px; border-left-width: 2px; }
.visor__canto--d { bottom: 3.6%; right: 4.4%; border-bottom-width: 2px; border-right-width: 2px; }
/* o foco no rosto (medido na foto recortada: rosto entre 41–60 % na largura e 15–42 % na altura) */
.visor__foco { position: absolute; left: 39%; top: 13%; width: 23%; height: 30%; border: 2px solid var(--acento); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 18px -4px var(--acento-halo-forte); }
.visor__rec { display: inline-flex; align-items: center; gap: 6px; }
.visor__rec i { width: .8em; height: .8em; border-radius: 50%; background: var(--acento); box-shadow: 0 0 8px var(--acento-halo-forte); animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.visor__tc { font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.visor__fmt { padding: 3px 5px; border: 1px solid rgba(252,252,252,.7); border-radius: 3px; }
/* bateria: corpo e polo desenhados DENTRO da caixa (nada transborda) */
.visor__bat { position: relative; flex: none; width: calc(2.2em + 4px); height: 1.1em; opacity: 1 !important; }
.visor__bat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 4px; border: 1.5px solid var(--branco); border-radius: 2px; }
.visor__bat::after { content: ""; position: absolute; right: 1px; top: 30%; width: 2px; height: 40%; background: var(--branco); border-radius: 0 1px 1px 0; }
.visor__bat i { position: absolute; top: 3px; bottom: 3px; left: 3px; right: calc(4px + 30%); background: var(--acento); border-radius: 1px; }
.visor__leg { margin-top: 14px; font: 600 .86rem/1.4 var(--f); color: var(--tx-fraco); }
.visor__leg b { color: var(--tx); font-weight: 700; }
@media (min-width: 700px) and (max-width: 899px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "texto figura"; align-items: center; column-gap: 32px; }
  .hero h1 { font-size: clamp(2.3rem, 6vw, 3.1rem); }
  .hero__texto { padding: 24px 0 64px; }
  .visor { margin: 12px 0 56px; }
}
@media (min-width: 900px) {
  .visor { max-width: 470px; margin: 24px 0 88px; align-self: center; }
}

/* o foco entra largo e branco, trava no rosto e pisca duas vezes (só com html.anima) */
html.anima .hero .visor__foco { transition: transform .55s var(--mola-estalo) 1.2s, border-color .12s linear 1.62s; }
html.anima .hero:not(.ok) .visor__foco { transform: scale(1.75); border-color: rgba(252,252,252,.85); }
html.anima .hero.ok .visor__foco { animation: af .2s linear 1.8s 2; }
@keyframes af { 50% { opacity: 0; } }

/* ═══ COMO SÃO AS AULAS ══════════════════════════════════════════════════ */
/* celular: texto → passos → claquete. Computador: texto e claquete lado a lado,
 * os três passos numa fileira embaixo (sem o retângulo morto ao lado da claquete). */
.formato__grade { display: grid; grid-template-areas: "texto" "passos" "claquete"; column-gap: 56px; }
.formato__texto { grid-area: texto; }
.formato__passos { grid-area: passos; }
.formato .claquete { grid-area: claquete; }
.formato .lista-num { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
.formato .lista-num li { grid-template-columns: 56px 1fr; padding: 22px 24px; }
@media (min-width: 900px) {
  .formato__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texto claquete" "passos passos"; align-items: center; }
  .formato .lista-num { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
  .formato .lista-num li { grid-template-columns: 1fr; align-content: start; gap: 16px; padding: 24px; }
}

/* ── a claquete ──────────────────────────────────────────────────────── */
.claquete { width: 100%; max-width: 520px; justify-self: center; margin-top: 12px; filter: drop-shadow(0 34px 34px rgba(0,0,0,.22)); }
.claquete__bastoes { position: relative; height: 78px; }
.claquete__bastao { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(118deg, var(--preto) 0 26px, #F2F2F2 26px 52px); box-shadow: inset 0 0 0 2px var(--preto); }
.claquete__bastao--cima { bottom: auto; top: 6px; border-radius: 6px; transform-origin: 14px 100%; }
.claquete__lousa { background: #141414; color: #F2F2F2; border-radius: 0 0 16px 16px; padding: 22px 20px 20px; }
.claquete__titulo { font: 800 .74rem/1 var(--f); letter-spacing: .26em; text-transform: uppercase; color: var(--acento); }
.claquete__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5px; margin-top: 16px; background: rgba(242,242,242,.55); border: 1.5px solid rgba(242,242,242,.55); border-radius: 6px; overflow: hidden; }
.claquete__campo { background: #141414; padding: 11px 12px 12px; min-width: 0; }
.claquete__campo--largo { grid-column: 1 / -1; }
.claquete dt, .claquete__rotulo { font: 800 .62rem/1 var(--f); letter-spacing: .2em; text-transform: uppercase; color: #9C9C9C; }
.claquete dd { margin: 7px 0 0; font: 800 clamp(1rem, 3.6vw, 1.3rem)/1.1 var(--f); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.claquete__rotulo { margin-top: 20px; }
.claquete__datas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.claquete__datas li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,185,56,.09); border: 1px solid rgba(255,185,56,.32); }
.claquete__datas span { font: 700 .66rem/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: #9C9C9C; }
.claquete__datas b { font: 900 1.2rem/1 var(--f); color: var(--acento); font-variant-numeric: tabular-nums; }
.claquete__pe { margin-top: 16px; font: 600 .8rem/1.4 var(--f); color: #9C9C9C; }
@media (min-width: 420px) { .claquete__datas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .claquete { margin-top: 0; } .claquete__lousa { padding: 26px 26px 24px; } }
/* a batida: o bastão de cima nasce aberto e fecha quando a claquete entra (só com html.anima) */
html.anima .claquete__bastao--cima { transition: transform .26s cubic-bezier(.55, 0, .9, .35) calc(var(--d, 0ms) + 520ms); }
html.anima .claquete:not(.ok) .claquete__bastao--cima { transform: rotate(-17deg); }

/* ═══ O CURSO: régua de meses + módulos ══════════════════════════════════ */
.curso .fichas { margin-top: 30px; }
/* o título à esquerda e os quatro números num quadro 2 × 2 à direita */
@media (min-width: 900px) {
  .curso__cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
  .curso .curso__fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 6px; }
  .curso__fichas li { display: grid; align-content: space-between; gap: 18px; min-height: 132px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--linha); }
  .curso__fichas b { justify-self: start; font-size: clamp(2.2rem, 3.4vw, 3rem); }
}
.regua { display: flex; flex-direction: column; gap: 44px; margin-top: 52px; }
.regua__fase { min-width: 0; }
@media (min-width: 900px) {
  .regua { flex-direction: row; gap: 20px; }
  .regua__fase--ini { flex: var(--ini, 3) 1 0; }
  .regua__fase--ava { flex: var(--ava, 2) 1 0; }
}
/* um mês por célula, um traço por semana; fundamentos em âmbar cheio, avançado em âmbar VAZADO
 * (o contorno, como os números 05–08 dos módulos: sem listra, que lia como fita de obra) */
.regua__trilha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.regua__trilha span { position: relative; padding: 18px 0 0 2px; font: 800 .68rem/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-fraco);
  background: linear-gradient(var(--acento), var(--acento)) 0 0 / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, rgba(252,252,252,.34) 0 1px, transparent 1px 25%) 0 9px / 100% 5px no-repeat; }
.regua__fase--ava .regua__trilha span { background: repeating-linear-gradient(90deg, rgba(252,252,252,.34) 0 1px, transparent 1px 25%) 0 9px / 100% 5px no-repeat; }
.regua__fase--ava .regua__trilha span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border: 1.5px solid var(--acento); border-radius: 1px; }
.regua__nome { margin-top: 22px; font: 800 clamp(1.2rem, 3.4vw, 1.5rem)/1.1 var(--f); text-transform: uppercase; }
.regua__nome small { display: block; margin-top: 6px; font: 600 .86rem/1.3 var(--f); text-transform: none; color: var(--tx-fraco); }
.modulos { display: grid; gap: 10px; margin-top: 18px; }
.modulo { border-radius: 18px; background: var(--card); border: 1px solid var(--linha); }
.modulo summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; }
.modulo summary::-webkit-details-marker { display: none; }
.modulo summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--card-forte); color: var(--tx); font: 800 1.2rem/1 var(--f); transition: transform .3s var(--mola); }
.modulo[open] summary::after { transform: rotate(45deg); }
.modulo__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acento); color: var(--acento-tx); font: 900 1rem/1 var(--f); font-variant-numeric: tabular-nums; }
.regua__fase--ava .modulo__n { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); }
.modulo__t { flex: 1; min-width: 0; font: 700 1.02rem/1.25 var(--f); }
.modulo__t small { display: block; margin-top: 5px; font: 700 .7rem/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-fraco); }
.modulo ul { display: grid; gap: 10px; padding: 2px 18px 20px 18px; }
.modulo li { position: relative; padding-left: 18px; font-size: .95rem; line-height: 1.45; color: var(--tx-fraco); }
.modulo li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--acento); }
@media (min-width: 560px) { .modulo ul { padding-left: 74px; } }

/* ═══ QUEM ENSINA ════════════════════════════════════════════════════════ */
.professor__foto { justify-self: center; width: 100%; max-width: 440px; }
.professor__foto img { width: 100%; border-radius: 28px; box-shadow: 0 36px 60px -34px rgba(0,0,0,.5); }
.professor h2 { max-width: 20ch; }
.professor .chips { margin-top: 26px; }

/* ═══ FORMATURA: a turma + a tira de filme ══════════════════════════════ */
.turma { margin: 44px 0 0; }
.turma__quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #151515;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -34px rgba(0,0,0,.9), 0 0 90px -30px var(--acento-halo-forte); }
.turma__quadro picture, .turma__quadro img { display: block; width: 100%; height: 100%; }
.turma__quadro img { object-fit: cover; }
.turma__data { position: absolute; left: 10px; top: 10px; padding: 5px 7px; border-radius: 3px; background: rgba(5,5,5,.78); font: 800 .64rem/1 var(--f); letter-spacing: .14em; color: var(--acento); }
.turma__legenda { margin-top: 14px; max-width: 74ch; font-size: .92rem; line-height: 1.45; color: var(--tx-fraco); text-wrap: pretty; }
@media (min-width: 900px) { .turma__data { left: 16px; top: 16px; font-size: .72rem; } }
/* no celular a foto da turma vai de ponta a ponta (sai do recuo de 20px do .dentro): 11 pessoas numa
   foto larga precisam de cada pixel; a data e a legenda continuam alinhadas com o texto */
@media (max-width: 599px) { .turma__quadro { margin-inline: -20px; border-radius: 0; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 -1px 0 rgba(255,255,255,.08); } .turma__data { left: 20px; } }
.filme { position: relative; margin-top: 32px; padding: 32px 0; border-radius: 10px; background: #050505; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.filme::before, .filme::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='8' y='1' width='12' height='10' rx='2.5' fill='%23d9d9d9'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x; }
.filme::before { top: 10px; }
.filme::after { bottom: 10px; }
.filme__quadros { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; padding: 0 12px; scrollbar-width: none; }
.filme__quadros::-webkit-scrollbar { display: none; }
.filme__quadro { position: relative; scroll-snap-align: start; }
.filme__quadro img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 3px; }
.filme__n { position: absolute; left: 6px; bottom: 6px; padding: 4px 6px; border-radius: 3px; background: rgba(5,5,5,.78); font: 800 .64rem/1 var(--f); letter-spacing: .14em; color: var(--acento); }
.filme:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }
@media (min-width: 720px) { .filme__quadros { grid-auto-columns: 27%; } }
@media (min-width: 1100px) {
  .filme__quadros { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding: 0 14px; }
}

/* cabeçalho em duas colunas (título à esquerda, texto à direita) */
@media (min-width: 900px) {
  .cab2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; }
  .cab2 .medida { margin: 0 0 8px; }
}

/* ═══ FORMADOS ═══════════════════════════════════════════════════════════ */
.formados__rotulo { margin-top: 40px; font: 800 .74rem/1 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-fraco); }
.formados__rotulo--antes { margin-top: 48px; }
/* turma de 09/09: o ladrilho da data + 9 cartões = 10 peças (2 x 5 no celular, 5 x 2 no computador) */
.formados__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 16px; }
@media (min-width: 700px) { .formados__grade { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 16px; } }
.formados__turma { container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; border-radius: 22px; background: var(--preto); color: var(--branco); }
.formados__turma-k { font: 800 .66rem/1 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
/* A data mede ~5,65em de largura: 16,5cqi a faz caber no cartão em qualquer largura (a 320 px estourava). */
.formados__turma-data { font: 900 min(1.9rem, 16.5cqi)/1 var(--f); letter-spacing: -.02em; color: var(--acento); white-space: nowrap; }
.formados__turma-tx { font-size: .88rem; line-height: 1.35; color: #BFC5B9; text-wrap: pretty; }
@media (min-width: 700px) { .formados__turma { padding: 14px; } }
@media (min-width: 900px) { .formados__turma { padding: 18px; } }
.formado img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; }
.formado__nome { margin-top: 12px; font: 800 1rem/1.2 var(--f); text-wrap: balance; }
.formado__selo { display: inline-flex; align-items: center; min-height: 26px; margin-top: 7px; padding: 0 11px; border-radius: 999px; background: var(--acento); color: var(--acento-tx); font: 800 .64rem/1 var(--f); letter-spacing: .16em; text-transform: uppercase; }
.formados__grade .formado img { border-radius: 18px; }
@media (min-width: 700px) { .formados__grade .formado__nome { font-size: .94rem; } }
/* turmas anteriores: fileira menor. Celular: 3 retratos lado a lado + o card embaixo, na largura toda;
   computador: 3 retratos de 1 fração + o card de 4 frações na mesma linha */
.formados__antes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin-top: 16px; }
.formado--antes img { border-radius: 16px; }
.formado--antes .formado__nome { margin-top: 9px; font-size: .86rem; }
.formado--antes .formado__selo { min-height: 22px; padding: 0 9px; font-size: .58rem; }
.formado--proximo { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px; border-radius: 22px; --chapa: var(--preto); --chapa-tx: var(--acento); }
@media (min-width: 700px) {
  .formados__antes { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 4fr); gap: 16px; }
  .formado--proximo { grid-column: auto; justify-content: center; gap: 14px; padding: 24px 28px; }
  /* 29/09: sem as turmas anteriores (lista vazia no config), o card fica sozinho: ocupa a linha inteira em vez de uma coluna estreita */
  .formados__antes .formado--proximo:only-child { grid-column: 1 / -1; }
}
.formado__proximo { font: 900 clamp(1.1rem, 4.4vw, 1.5rem)/1.12 var(--f); text-transform: uppercase; letter-spacing: -.01em; color: #000; }
.formado--proximo p:not(.formado__proximo) { font-size: .92rem; line-height: 1.4; }
.formado__link { display: inline-flex; align-items: center; min-height: 44px; font: 800 .9rem/1 var(--f); color: #000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ═══ OFERTA ═════════════════════════════════════════════════════════════ */
.golpe { margin-top: 18px; padding: 18px 20px; border-radius: 18px; border: 1px dashed rgba(255,185,56,.45); }
.golpe__t { font: 800 .74rem/1 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.golpe p + p { margin-top: 8px; color: var(--tx-fraco); font-size: .95rem; }
.golpe b { color: var(--tx); }
.compra__rotulo { margin-bottom: 16px; font: 800 .74rem/1 var(--f); letter-spacing: .22em; text-transform: uppercase; color: #A3A8A0; }
.compra__turma { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255,185,56,.08); border: 1px solid rgba(255,185,56,.26); font-size: .92rem; line-height: 1.45; color: #BFC5B9; }
.compra__turma span { display: block; margin-bottom: 5px; font: 800 .68rem/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--acento); }
.compra__turma b { color: var(--branco); }
.compra__whats { width: 100%; margin-top: 24px; gap: 10px; padding-inline: 18px; white-space: nowrap; }
.compra__whats .ic-whats { flex: none; }
.compra .aviso { margin-top: 14px; }
.preco__cent { font-size: .5em; vertical-align: .72em; letter-spacing: 0; }
/* as duas colunas terminam juntas: o cartão de compra estica e a assinatura desce */
@media (min-width: 900px) {
  .oferta .colunas { align-items: stretch; }
  .oferta .compra { display: flex; flex-direction: column; align-self: stretch; }
  .oferta .compra > * { flex: none; }
  .oferta .compra .produto-de { margin-top: auto; padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .visor__rec i, .visor__foco { animation: none !important; }
}