/* ══════════════════════════════════════════════════════════════════════
   Pré Black Friday — tema EXCLUSIVO da página /pre-black.

   Nada aqui existe fora de `.bf`. O invólucro é aberto em `site/page.php`
   só para o slug desta página (lista explícita, igual ao que a `altoqi`
   já fazia): página de fora não baixa esta folha nem abre a div, então
   nenhuma regra daqui alcança as outras 20 e poucas páginas do site.

   O bloco de formulário é o compartilhado (`.pgf-*`); o que muda é a
   roupa — cores, tipografia, molduras. Por isso TODO seletor começa em
   `.bf`: tirar o invólucro devolve a página ao visual padrão.

   Baseado nos materiais do marketing: preto, dourado, fita amarela e o
   buquê de balões pretos.
   ══════════════════════════════════════════════════════════════════════ */

/* Única regra fora de `.bf` — e mesmo assim exclusiva desta página, porque
   esta folha só é carregada aqui. O briefing pede tela sem nada que desvie
   do formulário. O balão do chat é a segunda porta mais clicada do site e
   o aviso de matrícula chama o olho para fora do formulário: numa captação
   os dois dividem a conversão em vez de somar. Ambos continuam em todas as
   outras páginas. */
#ebc-root,            /* balão do chat */
#avm {                /* avisos de "fulano acabou de se matricular" */
  display: none !important;
}

.bf {
  --bf-ouro: #f3c75f;
  --bf-ouro-2: #c9922c;
  --bf-fita: #f6c019;
  --bf-preto: #050506;
  position: relative;
  isolation: isolate;          /* as camadas de fundo ficam presas aqui */
  overflow: hidden;
  background: var(--bf-preto);
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

/* Tema claro do site não vale aqui: a campanha é preta por definição, e
   metade da arte (fita amarela, dourado, balões) some num fundo branco. */
.light-mode .bf { background: var(--bf-preto); }

/* ── Camadas de fundo ──────────────────────────────────────────────────
   Pseudo-elementos, não <div>: a página é montada pelo construtor e o
   HTML do bloco é compartilhado — decoração que precisa de marcação nova
   obrigaria a mexer no bloco de todo mundo. */

/* Brilho de cima, como no material. */
.bf::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(243,199,95,.16) 0%, rgba(243,199,95,.05) 38%, transparent 68%);
  pointer-events: none;
  z-index: -2;
}

/* ── Fitas "BLACK FRIDAY" ──────────────────────────────────────────────
   Duas faixas inclinadas, como no material, com o texto correndo por
   dentro. A faixa é a caixa (fica parada, recorta o que passa); o trilho
   é o que anda. Animar `transform` é a única forma barata: o navegador
   entrega para a GPU e não recalcula layout a cada quadro.

   O trilho leva a frase DUAS vezes e anda -50% da própria largura. Como
   as duas metades são idênticas, no fim do percurso o desenho é o mesmo
   do começo — o laço não tem emenda. */
.bf-fita {
  position: absolute;
  left: -14%;
  width: 128%;
  padding: 9px 0;
  background: var(--bf-fita);
  color: #16120a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1;
  overflow: hidden;          /* é o recorte que faz o texto "entrar" na faixa */
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.bf-fita--topo {
  top: 64px;
  transform: rotate(-4deg);
  box-shadow: 0 14px 40px -18px rgba(246,192,25,.7);
}
/* A segunda fecha a página, inclinada para o outro lado — é o cruzamento
   que aparece na arte. */
.bf-fita--pe {
  bottom: 48px;
  transform: rotate(3deg);
  box-shadow: 0 -14px 40px -18px rgba(246,192,25,.55);
}

.bf-fita__trilho {
  display: flex;
  width: max-content;
  /* 20s para percorrer metade do trilho (~1.440px) = ~72 px/s: anda o
     bastante para a pessoa ver o texto correndo, devagar o bastante para
     dar para ler. A 38s parecia parada. */
  animation: bfCorre 20s linear infinite;
}
.bf-fita__trilho--volta { animation-name: bfCorreVolta; }
.bf-fita__trilho span { white-space: nowrap; }

@keyframes bfCorre      { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes bfCorreVolta { from { transform: translateX(-50%);  } to { transform: translateX(0);    } }

/* ── Buquês de balões ──────────────────────────────────────────────────
   Um de cada lado, como na arte: o da direita espelhado e mais alto.

   ⚠️ A imagem PRECISA ter canal alfa (`pre-black-baloes-alfa.webp` é RGBA). A
   primeira versão foi convertida para RGB, o fundo transparente virou
   preto chapado, e o buquê passou a ser um RETÂNGULO preto em cima do
   fundo com brilho — a borda do retângulo aparecia como uma linha vertical
   (era o "balão bugado" do print). O arquivo trocou de NOME ao ser
   refeito, e não só de conteúdo: a imagem é chamada daqui de dentro, sem
   marcador de versão, e o navegador de quem já tinha aberto a página
   seguiria mostrando o retângulo por dias. Endereço novo não tem cache.

   Também não leva mais máscara de degradê: ela apagava o balão de cima e
   deixava os de baixo cortados no ar. A proporção vem do arquivo
   (290×1100), e cada buquê aparece inteiro. */
.bf .pgf-split::before,
.bf .pgf-split::after {
  content: '';
  position: absolute;
  aspect-ratio: 290 / 1100;
  background: url('../img/pre-black-baloes-alfa.webp') center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* Tela larga: as margens têm espaço de sobra — buquês inteiros, nítidos,
   cada um centrado na sua margem. */
@media (min-width: 1600px) {
  .bf .pgf-split::before {
    left: calc((100vw - 1280px) / 2 - 220px);
    bottom: 34px;
    height: min(74vh, 680px);
  }
  .bf .pgf-split::after {
    right: calc((100vw - 1280px) / 2 - 220px);
    top: 9%;
    height: min(64vh, 590px);
    transform: scaleX(-1);
  }
}

/* Notebook: a margem é curta, então os buquês ficam metade para fora da
   tela, espiando das bordas — o da direita por trás da beirada do cartão. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .bf .pgf-split::before {
    left: -64px;
    bottom: 30px;
    height: min(62vh, 560px);
    opacity: .8;
  }
  .bf .pgf-split::after {
    right: -64px;
    top: 10%;
    height: min(54vh, 480px);
    transform: scaleX(-1);
    opacity: .8;
  }
}

/* ── Primeira dobra ──────────────────────────────────────────────────── */
.bf .pgf-split {
  padding-top: clamp(104px, 15vh, 168px);
  padding-bottom: clamp(96px, 11vh, 140px);   /* espaço para a fita do pé */
}
@media (min-width: 1024px) {
  /* Com cabeçalho e rodapé desligados, a dobra é a tela inteira. */
  .bf .pgf-split { min-height: 100svh; min-height: 100vh; }
}

/* ── Chamada da campanha (letreiro PRÉ BLACK FRIDAY) ───────────────────
   Reprodução do material: moldura fina, "PRÉ" sentado na linha de cima,
   BLACK cheio e FRIDAY vazado, com a frase em itálico embaixo.

   O letreiro substitui o que o bloco escreveria (sobrancelha, título e
   apoio) — esses ficam escondidos logo abaixo. A página é `noindex`, então
   esconder o h1 do bloco não custa busca; a leitura em voz alta continua
   inteira pelo `.bf-lock__leitor`. */
.bf-chamada { max-width: 560px; }

.bf-lock { margin: 0; font-weight: 800; }

/* Texto só para leitor de tela: o letreiro é desenho, e letra solta em
   caixa alta ("B-L-A-C-K") sai horrível em voz alta. */
.bf-lock__leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ⚠️ Sem `overflow: hidden`: "PRÉ" fica MONTADO na linha de cima (metade
   para fora da caixa, como no material) e qualquer recorte aqui o cortava
   ao meio. Por isso o brilho que varre o letreiro é feito com
   `background-position`, que anda dentro da própria caixa e não precisa de
   recorte nenhum. */
.bf-lock__moldura {
  position: relative;
  display: block;
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.6vw, 34px) clamp(18px, 2.4vw, 28px);
}

/* Os cinco traços da moldura. Soltos, e não `border`, porque cada um é
   desenhado na entrada (escala de 0 a 1 a partir de uma ponta). */
.bf-l { position: absolute; background: #fff; display: block; }
.bf-l--topo-e { top: 0; left: 0;  width: calc(50% - clamp(38px, 5vw, 58px)); height: 2px; }
.bf-l--topo-d { top: 0; right: 0; width: calc(50% - clamp(38px, 5vw, 58px)); height: 2px; }
.bf-l--esq    { top: 0; bottom: 0; left: 0;  width: 2px; }
.bf-l--dir    { top: 0; bottom: 0; right: 0; width: 2px; }
.bf-l--base   { bottom: 0; left: 0; right: 0; height: 2px; }

/* "PRÉ" no vão entre os dois traços de cima. */
.bf-pre {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -52%);
  font-style: normal;
  font-size: clamp(15px, 1.9vw, 22px);
  font-weight: 800;
  letter-spacing: .22em;
  text-indent: .22em;            /* compensa o espaço que o tracking põe no fim */
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Sem "PRÉ" (página `black-friday`): os dois traços de cima viram uma linha
   inteira e a moldura perde o respiro extra que o PRÉ montado pedia. */
.bf-chamada--sem-pre .bf-l--topo-e { width: 100%; }
.bf-chamada--sem-pre .bf-l--topo-d { display: none; }
.bf-chamada--sem-pre .bf-lock__moldura { padding-top: clamp(18px, 2.4vw, 28px); }

/* Corpo do letreiro. Uma variável só para BLACK e FRIDAY: o FRIDAY é SVG
   e tem de ter exatamente a mesma altura de maiúscula do BLACK. */
.bf-lock { --bf-corpo: clamp(52px, 7.4vw, 92px); }

.bf-black {
  display: block;
  font-size: var(--bf-corpo);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.012em;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

/* ── FRIDAY vazado ─────────────────────────────────────────────────────
   ⚠️ Não use a Montserrat do site aqui. Ela vem do Google como fonte
   VARIÁVEL, e fonte variável monta cada letra com peças sobrepostas — a
   perna do R por cima do bojo, a barra do A por cima das diagonais, os
   braços do Y por cima da haste. Preenchida, a sobreposição some; vazada,
   cada peça aparece e o R ganha um "X" por dentro. Foi o print do João.

   `montserrat-contorno.woff2` (3,4 KB) é a mesma Montserrat, com o peso
   congelado em 900, só as letras F R I D A Y e as peças FUNDIDAS num
   contorno só. Receita, se precisar regerar (fonttools + skia-pathops):
     instancer.instantiateVariableFont(f, {'wght': 900})
     Subsetter(text='FRIDAY') ; removeOverlaps(f) ; f.flavor='woff2'
   Nome de família próprio para não colidir com a Montserrat do site. */
@font-face {
  font-family: 'Montserrat Contorno';
  src: url('../fonts/montserrat-contorno.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  /* `block`: melhor alguns milissegundos sem FRIDAY do que ele aparecer na
     fonte errada (com os traços sobrando) e depois trocar. */
  font-display: block;
}

/* SVG com a altura das maiúsculas do BLACK (70% do corpo) + a folga do
   traço; a largura sai da proporção do viewBox. */
.bf-friday {
  display: block;
  height: calc(var(--bf-corpo) * .73);
  width: auto;
  max-width: 100%;
  margin: calc(var(--bf-corpo) * .14) auto 0;
  overflow: visible;
}
.bf-friday text {
  font-family: 'Montserrat Contorno', 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 100px;
  fill: none;
  stroke: #fff;
  /* Espessura em unidades do desenho, proporcional ao tamanho do letreiro
     (≈2,4px no computador, ≈1,35px no celular) — como na arte impressa.
     ⚠️ Sem `vector-effect: non-scaling-stroke`: com ele o Chrome mede o
     tracejado da animação em px de tela e o Safari em unidades do desenho,
     e no iPhone o traço saía curto, deixando pedaços das letras sem
     desenhar. Sem ele, os dois medem igual. */
  stroke-width: 2.6;
  stroke-linejoin: round;
  /* As letras têm posição fixa (ver page.php); nada herdado pode mexer no
     espaçamento — o h1 em volta tem ajustes de tipografia próprios. */
  letter-spacing: 0;
  word-spacing: 0;
  font-kerning: none;
}

/* Varredura dourada que passa pelo letreiro no fim da entrada. */
.bf-brilho {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(104deg,
      transparent 42%, rgba(255,255,255,.38) 48%, rgba(243,199,95,.6) 52%, transparent 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  opacity: 0;
  pointer-events: none;
}

.bf-frase {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.75vw, 21px);
  line-height: 1.38;
  color: #e6e3de;
  text-align: center;
}
.bf-frase span { display: block; }
.bf-frase b { font-weight: 700; font-style: italic; color: #fff; }

/* O bloco compartilhado continua montando sobrancelha, título e apoio — o
   letreiro ocupa o lugar dos três. Escondidos aqui, e não apagados do
   painel: quem editar a página ainda vê (e edita) os textos. */
/* ⚠️ `:not([data-bf-chamada])` e não `:first-child`: o JavaScript move o
   letreiro para dentro desta coluna, e aí ELE passa a ser o primeiro filho
   — com o seletor por posição, a regra escondia justamente o letreiro e
   deixava a sobrancelha do bloco à mostra. */
.bf .pgf-split-txt > div:not([data-bf-chamada]),
.bf .pgf-split-h,
.bf .pgf-split-txt > p { display: none !important; }

/* Marca EBPÓS. A página não leva o cabeçalho do site (é captação: menu
   só tira gente do formulário), então a assinatura entra aqui — sem ela a
   pessoa não sabe de quem é a oferta. Versão clara do logotipo, que vive
   em `assets` e viaja com o deploy. */
.bf .pgf-split-txt::before {
  content: '';
  display: block;
  width: 168px;
  height: 49px;
  margin-bottom: 26px;
  background: url('../img/logo-ebpos-claro.png') left center / contain no-repeat;
}

.bf .pgf-split-h {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(31px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}

/* ⚠️ `!important` é obrigatório aqui, não é preguiça: o `site.css` tem
   `.light-mode .text-white{color:#11151c !important}`, e o título do bloco
   carrega a classe `text-white`. Sem isto, quem navega com o tema claro
   (preferência do sistema — é o padrão em muito celular) via o título
   quase preto sobre o fundo preto. Só se descobre olhando a página no
   tema claro; no escuro está tudo certo. */
.light-mode .bf .pgf-split-h,
.light-mode .bf .text-white,
.light-mode .bf .text-slate-100 { color: #fff !important; }

/* Mesma história nos campos: `site.css` tem
   `.light-mode input, .light-mode select, .light-mode textarea
    { background:#fff !important; color:#11151c !important; border-color:… }`.
   Sem o `!important` aqui, no tema claro o formulário desta página ficava
   com campos brancos dentro do cartão preto. As três propriedades são
   listadas porque a regra de lá mexe nas três. */
.light-mode .bf .pgf-in,
.light-mode .bf input,
.light-mode .bf select,
.light-mode .bf textarea {
  background-color: rgba(255,255,255,.045) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
}
.light-mode .bf .pgf-in:focus {
  border-color: var(--bf-ouro) !important;
  background-color: rgba(255,255,255,.07) !important;
}

.bf .pgf-split-txt p {
  margin-top: 18px;
  max-width: 520px;
  color: #c9c6c0 !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.65;
}

/* ── Cartão do formulário ─────────────────────────────────────────────
   Opaco de propósito: o padrão é quase transparente e, com os balões
   atrás, o texto dos campos perderia contraste. */
.bf .pgf-card {
  border-radius: 18px;
  border: 1px solid rgba(243,199,95,.26);
  background: linear-gradient(180deg, #121113 0%, #0a0a0b 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  padding: 26px 22px;
}
@media (min-width: 768px) { .bf .pgf-card { padding: 32px 30px; } }
.light-mode .bf .pgf-card { border-color: rgba(243,199,95,.26); background: linear-gradient(180deg, #121113 0%, #0a0a0b 100%); }

/* Destaque do topo do cartão ("Turmas com início imediato."): etiqueta,
   não título — é oferta, e oferta tem prazo. */
.bf .pgf-card-h,
.light-mode .bf .pgf-card-h {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(243,199,95,.34);
  background: rgba(243,199,95,.1);
  color: var(--bf-ouro);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.bf .pgf-card-h::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bf-ouro);
  box-shadow: 0 0 0 4px rgba(243,199,95,.18);
}

/* ── Campos ───────────────────────────────────────────────────────────── */
.bf .pgf-label,
.light-mode .bf .pgf-label {
  margin: 16px 0 7px;
  color: #e7e4df;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bf .pgf-form > .pgf-label:first-of-type { margin-top: 0; }

.bf .pgf-in,
.light-mode .bf .pgf-in {
  padding: 14px 15px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  color: #fff;
  font-size: 15.5px;      /* ≥16px no celular evita o zoom automático do iOS;
                             15.5 + o meta viewport do site já segura. */
}
.bf .pgf-in::placeholder { color: #6f6c66; }
.bf .pgf-in:focus,
.bf .pgf-in:focus-visible {
  outline: none;
  border-color: var(--bf-ouro);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(243,199,95,.2);
}
/* ⚠️ As três últimas linhas NÃO são enfeite. A regra acima usa o atalho
   `background:`, que zera imagem, repetição, posição e tamanho — e tem mais
   peso que o `.pgf-sel` do bloco, que era quem definia "não repetir, à
   direita, 12×8". Sem repeti-las aqui, a setinha vira um ladrilho e o campo
   fica listrado de amarelo. Só aparece no CELULAR, onde o <select> nativo é
   usado; no computador o campo vira caixa de busca e o defeito some. */
.bf .pgf-sel {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23f3c75f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
/* No tema claro a seta sumia: o bloco tem `.light-mode .pgf-in{background:#fff}`
   — ATALHO, que zera a imagem — com o mesmo peso do meu `.bf .pgf-sel`, e ele
   vem depois (o <style> do bloco fica no corpo da página, o meu arquivo no
   topo). Empate de especificidade decide pela ordem, e a ordem não está nas
   minhas mãos. Daí a regra mais específica, com !important. */
.light-mode .bf .pgf-sel {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23f3c75f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}

/* Lista do campo de busca (o <select> vira combobox quando a lista é longa). */
.bf .pgf-cb-lista,
.light-mode .bf .pgf-cb-lista {
  border-color: rgba(243,199,95,.24);
  background: #121113;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.9);
}
.bf .pgf-cb-op,
.light-mode .bf .pgf-cb-op { color: #cfccc6; }
.bf .pgf-cb-op.is-ativa,
.bf .pgf-cb-op[aria-selected='true'],
.light-mode .bf .pgf-cb-op.is-ativa { background: rgba(243,199,95,.16); color: #fff; }

/* ── Botão ────────────────────────────────────────────────────────────── */
.bf .pgf-btn {
  margin-top: 24px;
  padding: 17px 28px;
  border-radius: 12px;
  background: linear-gradient(100deg, #f8d87f 0%, var(--bf-ouro) 42%, var(--bf-ouro-2) 100%);
  color: #14100a;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 18px 40px -18px rgba(243,199,95,.65);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.bf .pgf-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.bf .pgf-btn:active { transform: translateY(0); }
.bf .pgf-btn[disabled] { opacity: .75; transform: none; box-shadow: none; }

.bf .pgf-msg { margin-top: 14px; color: #a8a49d; }
.bf .pgf-msg.err { color: #ff8b8b; }

/* Finalidade do cadastro + Política de Privacidade, logo abaixo do botão. */
.bf .pgf-lgpd,
.light-mode .bf .pgf-lgpd {
  margin-top: 14px;
  color: #8e8a83;
  font-size: 11.5px;
  line-height: 1.6;
}
.bf .pgf-lgpd a { color: var(--bf-ouro); text-decoration: underline; text-underline-offset: 2px; }

/* ── Confirmação ─────────────────────────────────────────────────────── */
.bf .pgf-done { padding: 34px 6px; }
.bf .pgf-done-ic,
.light-mode .bf .pgf-done-ic {
  width: 54px; height: 54px;
  background: rgba(243,199,95,.14);
  border: 1px solid rgba(243,199,95,.3);
}
.bf .pgf-done-ic svg { stroke: var(--bf-ouro); }
.bf .pgf-done p,
.light-mode .bf .pgf-done p {
  max-width: 34ch;
  margin: 0 auto;
  color: #efece7;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
}

/* ── Aceite da LGPD (partial compartilhado) ───────────────────────────── */
.bf .ac-linha, .bf .ac-txt, .light-mode .bf .ac-txt { color: #a8a49d; }
.bf .ac-txt a, .light-mode .bf .ac-txt a { color: var(--bf-ouro); }
.bf .ac-linha input[type='checkbox'] { accent-color: var(--bf-ouro); }

/* ── Celular ──────────────────────────────────────────────────────────
   A prioridade do pedido é o celular: fita menor, balões discretos atrás
   do texto (não atrás do cartão, onde roubariam contraste dos campos). */
@media (max-width: 1023px) {
  .bf-fita { font-size: 11px; letter-spacing: .14em; padding: 7px 0; }
  .bf-fita--pe { bottom: 24px; }
  /* A dobra do celular tem de caber: marca, chamada, os três campos e o
     botão. Cada medida abaixo saiu de medir o `getBoundingClientRect()` do
     botão num aparelho de 390×844 — era 931px (fora da tela) e passou a
     837px. Apertar mais começaria a custar legibilidade. */
  .bf-fita--topo { top: 10px; }             /* a fita subia por cima do logotipo */
  .bf .pgf-split { padding-top: 72px; padding-bottom: 76px; }
  .bf .pgf-split-grid { gap: 18px; }
  .bf .pgf-split-h { font-size: 28px; line-height: 1.1; }
  .bf .pgf-split-txt p { margin-top: 10px; font-size: 14.5px !important; line-height: 1.5; }
  .bf .pgf-card { padding: 20px 18px; }
  .bf .pgf-card-h { margin-bottom: 12px; }
  .bf .pgf-label { margin: 12px 0 6px; }
  .bf .pgf-in { padding: 12px 14px; }
  .bf .pgf-btn { margin-top: 18px; padding: 15px 24px; }
  /* No celular o cartão fica embaixo do texto e o canto esquerdo é onde a
     leitura começa: aqui o buquê vai para a direita, no alto, atrás do
     título, e bem mais apagado. */
  .bf .pgf-split::before {
    height: min(46vh, 380px);
    top: 56px; right: -38px; left: auto; bottom: auto;
    opacity: .38;
  }
  .bf .pgf-split::after { display: none; }   /* no celular, um buquê só */
  .bf .pgf-split-txt::before { width: 124px; height: 36px; margin-bottom: 14px; }
  .bf .pgf-split-txt { text-align: left; }
  .bf .pgf-card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bf .pgf-btn { transition: none; }
  .bf .pgf-btn:hover { transform: none; }
  /* Texto correndo é exatamente o que incomoda quem pede menos movimento
     (enjoo, vertigem). A faixa continua, parada. */
  .bf-fita__trilho { animation: none; }
}