/* ============================================================
   page-black-friday.css — /black-friday (Black November 2026, combo vitalício)
   Desenho do Claude Design (handoff "Black 2026 Combo v4", com a revisão v4.3
   da primeira tela), valores do
   README do handoff. CSS só desta página: não importa o tokens.css do site.
   Estado: html[data-estado="ativa|encerrada"] + data-so nos elementos.
   Celular = até 940px, o mesmo corte de scripts/black-friday.js.
   ============================================================ */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  --bf-preto: #000000;
  --bf-forest: #041B15;
  --bf-canopy: #072B20;
  --bf-abyss: #020E0A;
  --bf-fern: #1A5440;
  --bf-acento: #89CC72;
  --bf-acento-hover: #A8E08F;
  --bf-titulo: #FFFFFF;
  --bf-texto: #C9D3D5;
  --bf-texto-2: #8FA2A5;
  --bf-apagado: #6F7E80;
  --bf-rotulo: #EBF0F1;
  --bf-linha: #262626;
  --bf-linha-faixa: #1A1A1A;
  --bf-linha-pilula: #3A3A3A;
  --bf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bf-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --bf-gutter: clamp(20px, 5vw, 48px);
  --bf-secao: clamp(72px, 12vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bf-preto);
  color: var(--bf-texto);
  font-family: 'Figtree', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
a { color: var(--bf-titulo); text-decoration-color: var(--bf-linha-pilula); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { color: var(--bf-titulo); text-decoration-color: var(--bf-titulo); }
button, input { font-family: inherit; }
input::placeholder { color: var(--bf-apagado); opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--bf-acento); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--bf-acento); color: var(--bf-preto); }
html.bf-travado { overflow: hidden; }

/* Estado da oferta */
[hidden] { display: none !important; }
html[data-estado="encerrada"] [data-so="ativa"] { display: none !important; }
html:not([data-estado="encerrada"]) [data-so="encerrada"] { display: none !important; }

/* ——— Peças comuns ——————————————————————————————————————————————— */
.bf-wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--bf-gutter); padding-right: var(--bf-gutter); }
/* No desenho, O combo, Bônus, A oferta, WhatsApp e rodapé têm 1120px de
   conteúdo (o recuo fica fora); faixa, topo, preço e dúvidas têm 1120px
   contando o recuo. */
.bf-wrap--largo { max-width: calc(1120px + 2 * var(--bf-gutter)); }
.bf-nowrap { white-space: nowrap; }
.bf-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bf-legenda { font-size: 11px; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--bf-texto-2); }

.bf-h2 { margin-top: 22px; font-size: clamp(32px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 300; color: var(--bf-titulo); text-wrap: balance; }
.bf-h2 em { font-style: italic; font-weight: 900; letter-spacing: -0.045em; }

.bf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms var(--bf-ease), border-color 200ms var(--bf-ease), transform 120ms var(--bf-ease);
}
.bf-btn:active { transform: scale(0.98); }
.bf-btn:disabled { cursor: progress; }
.bf-btn--branco { background: var(--bf-titulo); color: var(--bf-preto); }
.bf-btn--branco:hover { background: var(--bf-acento); color: var(--bf-preto); }
.bf-btn--lime { background: var(--bf-acento); color: var(--bf-forest); }
.bf-btn--lime:hover { background: var(--bf-acento-hover); color: var(--bf-forest); }
.bf-btn--contorno { padding: 0 24px; background: transparent; color: var(--bf-titulo); border: 1px solid var(--bf-fern); }
.bf-btn--contorno:hover { border-color: var(--bf-titulo); color: var(--bf-titulo); }
.bf-btn--cheio { width: 100%; }
.bf-whats { flex: 0 0 auto; }

/* Link-botão ("Já sou aluno") */
.bf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bf-titulo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--bf-linha-pilula);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 200ms var(--bf-ease);
}
.bf-link:hover { text-decoration-color: var(--bf-titulo); }
.bf-link--fern { min-height: 0; padding: 4px 0; font-size: 15px; text-decoration-color: var(--bf-fern); }

/* Caixa desabilitada "Oferta encerrada" */
.bf-desligado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid var(--bf-linha);
  border-radius: 8px;
  background: #0D0D0D;
  color: var(--bf-texto-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  user-select: none;
}

/* Campos (conferência de aluno e janela) */
.bf-rotulo { font-size: 14px; font-weight: 600; color: var(--bf-rotulo); }
.bf-rotulo span { font-weight: 400; color: var(--bf-texto-2); }
.bf-campo {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  background: var(--bf-forest);
  border: 1px solid var(--bf-fern);
  border-radius: 8px;
  color: var(--bf-titulo);
  font-size: 16px;
  outline: none;
  transition: border-color 200ms var(--bf-ease);
}
.bf-campo:focus, .bf-campo[aria-invalid="true"] { border-color: var(--bf-titulo); }
.bf-campo:disabled { cursor: progress; }
.bf-campo--abyss { background: var(--bf-abyss); }
.bf-erro { font-size: 14px; line-height: 1.5; color: var(--bf-titulo); }

/* ——— 0. Faixa do topo ————————————————————————————————————————————— */
.bf-faixa { background: var(--bf-preto); border-bottom: 1px solid var(--bf-linha-faixa); }
.bf-faixa .bf-wrap { display: flex; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* A faixa inteira é o link, nos dois estados, com 44px de altura mínima (área
   de toque). No hover o texto fica branco; a caixa "Black November" não muda. */
.bf-faixa__link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 0; font-size: 11px; line-height: 1.9; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: var(--bf-acento); text-align: center; text-decoration: none; transition: color 200ms var(--bf-ease); }
.bf-faixa__link:hover { color: var(--bf-titulo); }
/* A faixa encosta no alto da página: a moldura de foco fica do lado de dentro. */
.bf-faixa__link:focus-visible { outline-offset: -4px; border-radius: 6px; }
.bf-faixa__link--fim { color: var(--bf-texto-2); }
.bf-faixa__caixa { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--bf-acento); color: var(--bf-preto); line-height: 1.9; }
.bf-faixa__curto { display: none; }
/* Celular: o texto perde o "·" e cai pra 10px, pra caber numa linha a partir de 360px. */
@media (max-width: 940px) {
  .bf-faixa__link { gap: 6px; font-size: 10px; line-height: 2; letter-spacing: 0.14em; }
  .bf-faixa__caixa { padding: 0 6px; line-height: 2; }
  .bf-faixa__longo { display: none; }
  .bf-faixa__curto { display: inline; }
}

/* ——— 1. Topo ——————————————————————————————————————————————————————— */
/* Computador: texto à esquerda (centrado na altura do vídeo), vídeo à
   direita. As linhas 1fr de cima e de baixo fazem a centralização. */
.bf-topo {
  background:
    radial-gradient(ellipse 60% 70% at 78% 50%, rgba(26, 84, 64, 0.55) 0%, rgba(26, 84, 64, 0) 70%),
    linear-gradient(180deg, #000000 0%, #000000 60%, #041B15 100%);
}
.bf-topo__grade {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(56px, 8vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas:
    ".     video"
    "tag   video"
    "h1    video"
    "sub   video"
    "acoes video"
    ".     video";
  column-gap: clamp(32px, 6vw, 80px);
}
.bf-h1 { grid-area: h1; margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; font-size: clamp(34px, 4.8vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--bf-titulo); }
.bf-topo__video { grid-area: video; align-self: center; }
.bf-topo__tag { grid-area: tag; justify-self: start; display: inline-block; padding: 10px 14px; border-radius: 6px; background: var(--bf-titulo); color: var(--bf-preto); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.bf-topo__sub { grid-area: sub; }
.bf-acoes { grid-area: acoes; }

/* Dois níveis, três ênfases: a tag "2 por 1" (a mesma matéria do botão
   principal), o título em três linhas de um peso só e, dentro dele, a cor de
   "acesso vitalício", que nasce branca e acende em verde 800 ms depois da
   primeira pintura. É o único verde do topo. Sem movimento, já nasce verde. */
.bf-h1__linha { display: block; white-space: nowrap; }
.bf-h1__vital { color: var(--bf-acento); }
@media (prefers-reduced-motion: no-preference) {
  .bf-h1__vital { animation: bf-acende 400ms var(--bf-ease) 800ms both; }
}
@keyframes bf-acende { from { color: var(--bf-titulo); } to { color: var(--bf-acento); } }

/* A barra fixa está na tela desde a chegada e cobre a base da primeira tela
   (72px + borda): a folga fica na altura do vídeo, o elemento mais alto do topo. */

.bf-topo__video {
  width: min(calc(max(440px, min(680px, 100vh - 272px)) * 0.5625 + 40px), 42vw);
  justify-self: center;
  padding: 20px;
  background: var(--bf-canopy);
  border: 1px solid var(--bf-fern);
  border-radius: 20px;
}
.bf-video { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0D0D0D; }
.bf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A capa fica à mostra até o player (montado pelo JS depois do carregamento)
   avisar que está pronto; aí ele aparece por cima. O player do <noscript> não
   leva a classe e aparece direto. */
.bf-video__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-video__player { opacity: 0; pointer-events: none; }
.bf-video.is-pronto .bf-video__player { opacity: 1; pointer-events: auto; }

/* O título fecha um bloco; o H2 abre outro, junto dos botões. */
.bf-topo__sub { margin-top: clamp(32px, 3vw, 40px); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; font-weight: 300; color: var(--bf-texto); max-width: 30em; text-wrap: pretty; }
/* Botões numa coluna de 400px, igual no computador e no celular: o botão
   principal e, embaixo dele, o link-botão do aluno, centralizado. */
.bf-acoes { margin-top: 36px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.bf-acoes__comprar { width: 100%; }
.bf-acoes__aluno { width: 100%; min-height: 44px; justify-content: center; text-align: center; text-wrap: balance; }
.bf-acoes__fim { width: 100%; }

/* Celular: um vídeo só, que sai da lateral e entra depois do título, alinhado
   à esquerda com o texto. */
@media (max-width: 940px) {
  .bf-topo__grade { display: flex; flex-direction: column; align-items: flex-start; }
  .bf-topo__video { margin-top: 32px; width: 100%; max-width: 440px; align-self: flex-start; padding: 14px; }
}

/* ——— 1b. Depoimentos ———————————————————————————————————————————————— */
/* A esteira de prints da /oferta-fsm, copiada pra cá sem os números das
   avaliações: as duas páginas andam separadas. Fica no verde em que o topo
   termina e em que o combo começa; o respiro de baixo é o do próprio combo. */
.bf-provas { padding: clamp(24px, 4vw, 48px) 0 0; background: var(--bf-forest); overflow: hidden; }

.bf-provas__mask {
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* A lista vai duplicada no HTML: a animação (em "Movimento") anda metade da
   largura e reinicia; 163 s = ~11,7 s por print, a velocidade da /oferta-fsm. */
.bf-provas__trilha { display: flex; width: max-content; }
/* 30% menores que na /oferta-fsm (lá: clamp(180px, 40vw, 260px)), pra faixa
   ocupar menos altura; o tempo por print continua o mesmo. */
.bf-provas__trilha img { height: clamp(126px, 28vw, 182px); width: auto; border-radius: 9px; margin-right: clamp(9px, 2.1vw, 14px); background: var(--bf-canopy); }
/* Com JS (scripts/black-friday-esteira.js) a trilha anda por script e aceita
   arrasto de mouse e dedo. pan-y: o gesto vertical continua rolando a página. */
.bf-provas__mask.is-js { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bf-provas__mask.is-js .bf-provas__trilha { animation: none; will-change: transform; }
.bf-provas__mask.is-arrastando { cursor: grabbing; }
.bf-provas__mask.is-js .bf-provas__trilha img { pointer-events: none; }

/* ——— 2. O combo ————————————————————————————————————————————————————— */
.bf-combo { background: var(--bf-forest); padding: var(--bf-secao) 0; }
.bf-combo__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px clamp(40px, 6vw, 96px); }
.bf-combo__titulo { flex: 1 1 420px; min-width: 0; }
.bf-combo__apoio { flex: 1 1 320px; min-width: 0; max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--bf-texto); text-wrap: pretty; }

/* Os cursos em cartões, da família dos cartões do kit, com a mídia ao lado do
   texto. Quando o cartão fica estreito (~640px), ele quebra e a mídia vira uma
   banda no topo, com a altura mínima. */
.bf-cursos { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: clamp(20px, 2.5vw, 32px); }
.bf-curso { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--bf-canopy); border: 1px solid var(--bf-fern); border-radius: 20px; overflow: hidden; }
.bf-curso__midia { flex: 1 1 240px; min-width: 0; position: relative; min-height: clamp(240px, 64vw, 320px); background: var(--bf-abyss); }
.bf-curso__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: clamp(24px, 4vw, 44px); box-sizing: border-box; object-fit: contain; display: block; }
.bf-curso__txt { flex: 3 1 400px; min-width: 0; padding: clamp(28px, 3.5vw, 48px); }
.bf-curso .bf-legenda { color: var(--bf-acento); }
.bf-curso__nome { margin-top: 14px; font-size: clamp(30px, 3.6vw, 52px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 900; font-style: italic; color: var(--bf-titulo); }
.bf-curso__meta { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--bf-texto-2); }
.bf-curso__meta > span { white-space: nowrap; }
.bf-curso__meta b { color: var(--bf-titulo); font-weight: 700; }
.bf-curso__desc { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--bf-texto); max-width: 36em; text-wrap: pretty; }

/* ——— 3. O preço ————————————————————————————————————————————————————— */
.bf-preco { padding: var(--bf-secao) 0; }
.bf-preco__grade { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px clamp(40px, 6vw, 96px); }
/* No computador, a tabela ocupa no mínimo uma tela, com o conteúdo no meio:
   com a altura do conteúdo ela parecia uma faixa entre seções maiores. */
@media (min-width: 941px) {
  .bf-preco { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .bf-preco__grade { width: 100%; }
}
.bf-preco__txt { flex: 1 1 340px; min-width: 0; }
.bf-preco__h2 { max-width: 14em; }
.bf-preco__apoio { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--bf-texto); max-width: 32em; text-wrap: pretty; }

.bf-tabela { flex: 1 1 440px; min-width: 0; align-self: center; font-variant-numeric: tabular-nums; }
.bf-tabela__linha {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 16px);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--bf-linha);
}
.bf-tabela__linha > [role="rowheader"] { font-size: 16px; line-height: 1.3; color: var(--bf-texto); font-weight: 500; }
.bf-tabela__linha > [role="cell"] { text-align: right; white-space: nowrap; }
.bf-tabela__linha s { font-size: clamp(18px, 2vw, 26px); line-height: 1.2; font-weight: 300; color: var(--bf-texto-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.bf-tabela__linha--cabeca { align-items: end; padding: 0 0 14px; border-top: 0; font-size: 11px; line-height: 1.3; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--bf-texto-2); }
.bf-tabela__linha--cabeca > [role="columnheader"]:not(:first-child) { text-align: right; }
.bf-tabela__linha--total { border-bottom: 1px solid var(--bf-linha); }
.bf-tabela__linha--total > [role="rowheader"] { font-weight: 600; }
.bf-tabela__linha--black { align-items: center; padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--bf-linha); color: var(--bf-acento); }
.bf-tabela__linha--black > [role="rowheader"] { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.3; font-weight: 900; font-style: italic; letter-spacing: -0.02em; color: var(--bf-acento); }
/* Cada valor novo num bloco lime próprio; o margin negativo alinha os dígitos com a coluna de cima. */
.bf-tabela__bloco { display: inline-block; margin-right: -12px; padding: 8px 12px; border-radius: 8px; background: var(--bf-acento); color: var(--bf-forest); font-size: clamp(22px, 2.8vw, 40px); line-height: 1; font-weight: 900; letter-spacing: -0.05em; }
.bf-tabela__rs { font-size: 0.5em; font-weight: 700; letter-spacing: 0; margin-right: 0.15em; }

/* ——— 4. Bônus: kit de ferramentas ——————————————————————————————————— */
/* Cabeçalho menor que o das seções principais: é uma seção de apoio. */
.bf-bonus { background: var(--bf-canopy); border-top: 1px solid var(--bf-fern); border-bottom: 1px solid var(--bf-fern); padding: var(--bf-secao) 0; }
.bf-bonus__cabeca { max-width: 30em; }
.bf-bonus__h2 { margin-top: 18px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -0.02em; font-weight: 300; color: var(--bf-titulo); text-wrap: balance; }
.bf-bonus__h2 em { font-style: italic; font-weight: 700; }

.bf-kit { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.bf-kit__cartao { min-width: 0; display: flex; flex-direction: column; background: var(--bf-forest); border: 1px solid var(--bf-fern); border-radius: 20px; overflow: hidden; }
/* Mídia sempre 16:9 (as imagens têm 1280×720), qualquer que seja o tamanho do
   texto ao lado. O fundo é o do relatório, enquanto a imagem carrega. */
.bf-kit__midia { display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #041C16; }
.bf-kit__txt { flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(22px, 2.5vw, 32px); }
.bf-kit__nome { font-size: 11px; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--bf-titulo); }
.bf-kit__desc { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--bf-texto); text-wrap: pretty; }

/* ——— 5. A oferta ———————————————————————————————————————————————————— */
.bf-oferta { background: var(--bf-acento); padding: var(--bf-secao) 0; }
.bf-oferta__grade { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 6vw, 96px); }
.bf-oferta__txt { flex: 1 1 340px; min-width: 0; }
.bf-oferta__txt .bf-legenda { color: var(--bf-forest); }
/* O título recebe o foco quando a faixa do alto leva até aqui: não é controle, sem moldura de foco. */
.bf-oferta__txt h2:focus { outline: none; }
.bf-oferta__h2 { color: var(--bf-forest); }

.bf-contagem { margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--bf-forest); color: var(--bf-forest); }
.bf-contagem__grade { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 40px); font-variant-numeric: tabular-nums; }
.bf-contagem__item { display: flex; flex-direction: column; gap: 6px; }
.bf-contagem__n { font-size: clamp(40px, 5vw, 72px); line-height: 0.9; font-weight: 900; letter-spacing: -0.05em; }
.bf-contagem__n--leve { font-weight: 300; }

.bf-painel { flex: 1 1 380px; min-width: 0; max-width: 540px; background: var(--bf-forest); border-radius: 20px; padding: clamp(20px, 3.5vw, 44px); display: flex; flex-direction: column; color: var(--bf-texto); }
.bf-painel__preco { display: flex; flex-direction: column; align-items: flex-start; }
.bf-painel__de { font-size: 15px; line-height: 1.4; font-weight: 300; color: var(--bf-texto-2); }
.bf-painel__valor-linha { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.bf-painel__valor { font-size: clamp(60px, 7vw, 104px); line-height: 0.95; letter-spacing: -0.055em; font-weight: 900; color: var(--bf-titulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-painel__rs { font-size: 0.4em; font-weight: 600; letter-spacing: 0; color: var(--bf-texto-2); margin-right: 0.15em; }
.bf-tag { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--bf-acento); color: var(--bf-forest); font-size: 15px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -0.01em; white-space: nowrap; }
.bf-painel__preco .bf-btn { margin-top: 28px; }
.bf-painel__miuda { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--bf-texto-2); text-wrap: pretty; }
.bf-painel__fim { display: flex; flex-direction: column; }
.bf-painel__fim-txt { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; font-weight: 700; color: var(--bf-titulo); text-wrap: pretty; }
.bf-painel__fim-txt span { font-weight: 300; color: var(--bf-texto); }
.bf-painel__fim .bf-desligado { display: flex; margin-top: 28px; border-color: var(--bf-fern); background: var(--bf-abyss); }
.bf-painel__rodape { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bf-fern); }

/* CTA secundário do bloco da oferta: pede uma linha só pra ele no fim da grade.
   Contorno e texto no verde-escuro, sem preenchimento, pra o card seguir sendo
   a peça principal; o botão só se preenche no hover. */
.bf-duvida {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid var(--bf-forest);
  border-radius: 20px;
}
.bf-duvida__h3 { flex: 1 1 320px; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 300; color: var(--bf-forest); text-wrap: balance; }
.bf-duvida__h3 em { display: block; font-style: italic; font-weight: 900; letter-spacing: -0.045em; }
.bf-duvida__btn { flex: 0 1 300px; padding: 0 28px; background: transparent; color: var(--bf-forest); border: 1px solid var(--bf-forest); }
.bf-duvida__btn:hover { background: var(--bf-forest); color: var(--bf-titulo); }

/* Condição de aluno */
.bf-aluno { display: flex; flex-direction: column; }
.bf-aluno__voltar {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--bf-texto-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 200ms var(--bf-ease);
}
.bf-aluno__voltar:hover { color: var(--bf-titulo); }
.bf-aluno__voltar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bf-aluno__h3 { margin-top: 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -0.04em; font-weight: 900; font-style: italic; color: var(--bf-titulo); }
.bf-aluno__email { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--bf-texto-2); overflow-wrap: anywhere; }
.bf-aluno__form { display: flex; flex-direction: column; }
.bf-aluno__txt { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--bf-texto); text-wrap: pretty; }
.bf-aluno__form .bf-aluno__txt { margin-top: 14px; }
.bf-aluno__rotulo { margin-top: 24px; }
.bf-aluno__form .bf-campo { margin-top: 8px; }
.bf-aluno__form .bf-erro { margin-top: 10px; }
.bf-aluno__enviar { margin-top: 20px; }
.bf-aluno__res { display: flex; flex-direction: column; }
.bf-aluno__achei { margin-top: 20px; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--bf-titulo); }
.bf-aluno__de { margin-top: 16px; font-size: 15px; line-height: 1.45; font-weight: 300; color: var(--bf-texto-2); }
.bf-aluno__valor { margin-top: 8px; font-size: clamp(40px, 4.4vw, 60px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 900; color: var(--bf-acento); }
.bf-aluno__comprar, .bf-aluno__unico { margin-top: 24px; }
.bf-aluno__botoes { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }

.bf-lista { margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid var(--bf-fern); list-style: none; display: flex; flex-direction: column; gap: 14px; }
.bf-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--bf-texto); }
.bf-lista b { color: var(--bf-titulo); font-weight: 700; }
.bf-check { flex: 0 0 auto; margin-top: 3px; fill: none; stroke: var(--bf-acento); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ——— 6. Dúvidas ——————————————————————————————————————————————————————— */
.bf-duvidas { padding: var(--bf-secao) 0; }
.bf-duvidas__grade { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 96px); align-items: flex-start; }
.bf-duvidas__cabeca { flex: 1 1 220px; min-width: 0; }
.bf-duvidas__h2 { font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 300; color: var(--bf-titulo); }
.bf-faq { flex: 3 1 520px; min-width: 0; border-top: 1px solid var(--bf-linha); }
.bf-faq__item { border-bottom: 1px solid var(--bf-linha); }
.bf-faq__q {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 24px 0;
  color: var(--bf-titulo);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.bf-faq__q::-webkit-details-marker { display: none; }
.bf-faq__n { flex: 0 0 2.2em; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--bf-texto-2); font-variant-numeric: tabular-nums; }
.bf-faq__txt { flex: 1 1 auto; min-width: 0; }
.bf-faq__sinal { flex: 0 0 auto; width: 24px; text-align: center; font-size: 28px; line-height: 0.8; font-weight: 300; color: var(--bf-texto-2); }
.bf-faq__sinal::before { content: '+'; }
.bf-faq__item[open] .bf-faq__sinal::before { content: '\2212'; }
.bf-faq__a { padding: 0 clamp(0px, 4vw, 48px) 26px calc(2.2em * 13 / 16 + 20px); font-size: 16px; line-height: 1.65; color: var(--bf-texto); max-width: 64ch; text-wrap: pretty; }

/* ——— 7. Rodapé ———————————————————————————————————————————————————————— */
/* O espaço de baixo é da barra fixa. */
.bf-rodape { padding: 32px 0 calc(120px + env(safe-area-inset-bottom)); }
.bf-rodape__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--bf-texto-2); }
.bf-rodape .bf-legenda { line-height: 1.4; letter-spacing: 0.2em; }
.bf-rodape__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bf-rodape__links a { color: var(--bf-texto-2); }
.bf-rodape__links a:hover { color: var(--bf-titulo); }

/* ——— Barra fixa de compra ———————————————————————————————————————————— */
.bf-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bf-forest);
  border-top: 1px solid var(--bf-fern);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.7);
  padding: 12px clamp(16px, 5vw, 48px) calc(12px + env(safe-area-inset-bottom));
  transform: translateY(calc(100% + 32px));
  pointer-events: none;
  transition: transform 360ms var(--bf-entrada);
}
.bf-barra.is-on { transform: translateY(0); pointer-events: auto; }
.bf-barra__in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Um peso e um tamanho só; o que distingue os dois preços é o risco e a cor.
   Dois trechos que não quebram por dentro: uma linha no computador, duas no celular. */
.bf-barra__txt { min-width: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3; font-weight: 700; color: var(--bf-titulo); }
.bf-barra__txt s { text-decoration-thickness: 1px; }
.bf-barra__preco { color: var(--bf-acento); }
.bf-btn--barra { flex: 0 0 auto; min-height: 48px; padding: 0 20px; font-size: 15px; }

/* Ícone flutuante do WhatsApp, no verde do próprio WhatsApp pra ser reconhecido
   de relance. Com a barra na tela, sobe pra ficar acima dela (73px de altura + a
   mesma folga de 16px); sem a barra, desce pro canto. */
.bf-zap {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--bf-titulo);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  transition: bottom 360ms var(--bf-entrada), background-color 200ms var(--bf-ease);
}
.bf-zap:hover { background: #1EBE5A; }
.bf-zap:focus-visible { outline: 2px solid var(--bf-titulo); outline-offset: 3px; }
.bf-barra.is-on ~ .bf-zap { bottom: calc(89px + env(safe-area-inset-bottom)); }

/* ——— Janela antes do checkout ———————————————————————————————————————— */
.bf-janela {
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  background: var(--bf-canopy);
  border: 1px solid var(--bf-fern);
  border-radius: 16px;
  color: var(--bf-texto);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
}
.bf-janela::backdrop { background: rgba(0, 0, 0, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bf-janela__form { position: relative; padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 40px); }
.bf-janela__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bf-texto-2);
  cursor: pointer;
  transition: color 200ms var(--bf-ease);
}
.bf-janela__fechar:hover { color: var(--bf-titulo); }
.bf-janela__fechar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bf-janela__titulo { padding-right: 40px; font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -0.04em; font-weight: 900; font-style: italic; color: var(--bf-titulo); }
.bf-janela__apoio { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--bf-texto); text-wrap: pretty; }
.bf-janela__campos { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.bf-janela__campo { display: flex; flex-direction: column; gap: 8px; }
.bf-janela__enviar { margin-top: 28px; }
.bf-janela__miuda { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--bf-texto-2); text-wrap: pretty; }
.bf-janela__miuda a { color: var(--bf-texto-2); text-decoration-color: currentColor; text-underline-offset: 3px; }
.bf-janela__miuda a:hover { color: var(--bf-titulo); }

/* ——— Movimento ————————————————————————————————————————————————————————— */
/* As entradas só existem com JS (html.bf-anima) e sem "menos movimento":
   sem eles, tudo aparece no lugar final. */
@media (prefers-reduced-motion: no-preference) {
  html.bf-anima [data-reveal].bf-rev { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--bf-entrada), transform 520ms var(--bf-entrada); }
  html.bf-anima [data-reveal="2"].bf-rev { transition-delay: 70ms; }
  html.bf-anima [data-reveal="3"].bf-rev { transition-delay: 140ms; }
  html.bf-anima [data-reveal="4"].bf-rev { transition-delay: 210ms; }
  html.bf-anima [data-reveal].bf-rev.is-on { opacity: 1; transform: none; }

  /* Esteira de depoimentos sem JS; com JS, o script assume (.is-js). */
  .bf-provas__trilha { animation: bf-esteira 163s linear infinite; }
  .bf-provas__mask:hover .bf-provas__trilha { animation-play-state: paused; }

  .bf-video__player { transition: opacity 300ms var(--bf-ease); }

  .bf-janela[open] { animation: bf-janela-entra 360ms var(--bf-entrada); }
  .bf-janela[open]::backdrop { animation: bf-some 200ms var(--bf-ease) reverse; }
  .bf-janela.is-saindo { animation: bf-some 200ms var(--bf-ease) forwards; }
  .bf-janela.is-saindo::backdrop { animation: bf-some 200ms var(--bf-ease) forwards; }
}
@keyframes bf-janela-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bf-some { from { opacity: 1; } to { opacity: 0; } }
@keyframes bf-esteira { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .bf-btn, .bf-barra, .bf-zap, .bf-campo, .bf-link { transition: none; }
}