/* Pagina de vendas v4 da PC-BA 2026 (`/pc-ba-2026/`, ver `VERSAO_VENDAS_PCBA`).

   MUDANCA ESTRUTURAL em relacao a v3: a pagina navega como o `/feed/`. O
   `<main data-paginas>` e um container com `scroll-snap-type: y mandatory`, e
   cada `.pg` e uma tela cheia (`min-height: 100svh`) com `scroll-snap-align:
   start`. Um gesto de rolagem -- dedo, roda do mouse ou Page Down -- leva a
   SECAO inteira para a proxima, como um card do feed puxando o seguinte.

   Por isso o layout de cada `.pg` e sempre o mesmo contrato: eyebrow + h2 +
   lead + um fecho curto, centralizados verticalmente. Nao ha secao de leitura
   corrida (a FAQ e a unica excecao deliberada: ela pode crescer alem de
   100svh, e o snap so garante que ela comeca alinhada ao topo).

   Tokens, cabecalho, botoes, hero (mascote/carimbo/risco/selo) e a amostra
   jogavel vieram de `vendas_pcba_v3.css`, sem reescrever o que ja funciona em
   producao -- so os nomes de classe que mudaram de secao (`.oferta` -> dentro
   de `.pg--oferta`, etc.) foram ajustados.                                   */

:root {
  --pc-escuro: #02062d;
  --pc-escuro-2: #071040;
  --pc-ciano: #4fb3ff;
  --pc-texto-claro: #c3cfe8;
  --pc-linha: #e5e9f2;
  --pc-texto: #4b536b;
  --pc-cinza-fundo: #f1f4fb;
}

* { box-sizing: border-box; }
/* `hidden` e como uma secao sai do ar nesta pagina sem ser apagada do
   template. Precisa do `!important`: o atributo vale `display: none` na folha
   do NAVEGADOR, e qualquer `display` de autor -- aqui o `display: flex` de
   `.pg` -- vence sem disputa. Sem esta linha, marcar uma secao com `hidden`
   nao faz absolutamente nada e ela continua na tela. */
[hidden] { display: none !important; }
/* `svh` e o ultimo valor, NAO `dvh`. O viewport dinamico muda de altura
   quando a barra do navegador do celular recolhe, e aqui a altura e a unidade
   do encaixe de scroll-snap: com `dvh` os pontos de encaixe eram
   redimensionados NO MEIO da rolagem e a pagina pulava sozinha. `svh` e o
   viewport pequeno, que nao muda. Nao reintroduza `dvh` nesta folha -- nem
   aqui, nem em `.paginas`, nem em `.pg`. */
body {
  margin: 0;
  background: #fafbff;
  color: var(--fxm-ink-brand);
  font-family: var(--fxm-font);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
a { color: inherit; }
p { margin: 0 0 20px; }
img { max-width: 100%; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 40; }
.skip:focus { top: 12px; background: #fff; padding: 10px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--fxm-orange); outline-offset: 4px; }

/* ---------- cabecalho ----------
   Fixo por CIMA das secoes que rolam: a marca e o CTA continuam a vista o
   tempo inteiro, como o `.fd__topo` do feed acompanha o card visivel. */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(20px, calc((100% - 1160px) / 2));
  background: rgba(2, 6, 45, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topo > a { text-decoration: none; display: flex; align-items: center; gap: 9px; }
.topo .fxm-logo__fixar { color: var(--fxm-white); }
.topo-leis {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(79, 179, 255, .16);
  color: var(--pc-ciano);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topo-cta {
  flex: none;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--fxm-blue-bright);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.topo-cta:hover { background: #fff; color: var(--pc-escuro); }

/* ---------- trilho de progresso (so desktop) ----------
   Mesma leitura do `.fd__trilho` do feed, aplicada as SECOES da pagina em vez
   de aos microcards de uma cadeia: um ponto por tela, o atual em azul. No
   celular ele brigaria com a barra de gestos do sistema, entao some de fato
   (`display: none` na media query de 620px -- antes este comentario prometia
   isso mas a regra la embaixo so diminuia as bolinhas, e elas continuavam no
   ar, a 8px da borda, por cima do texto das secoes estreitas). */
.trilho {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.trilho i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.trilho i.atual { background: var(--pc-ciano); transform: scale(1.4); }
/* Sobre secao branca ou cinza-clara, as bolinhas no tom do fundo escuro
   (brancas/ciano) quase somem. `.trilho--clara` e alternado pelo JS conforme
   a secao em foco (`data-fundo` no `<section>`) e troca a paleta inteira para
   cinza -- nao so a bolinha atual, porque uma fileira com dois tons no meio
   da transicao leria como erro visual, nao como adaptacao. */
.trilho--clara i { background: rgba(2, 6, 45, .16); }
.trilho--clara i.atual { background: var(--fxm-blue-bright); }

/* ---------- botoes ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 15px 26px;
  background: var(--fxm-blue-bright);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 10px 26px rgba(6, 104, 252, .28);
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.botao:hover { background: var(--fxm-blue-mid); transform: translateY(-1px); }
.botao--grande { width: 100%; max-width: 420px; min-height: 58px; font-size: 16.5px; }
.botao--claro { background: #fff; color: var(--pc-escuro); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.botao--claro:hover { background: var(--pc-ciano); color: var(--pc-escuro); }

/* ---------- tipografia comum ----------
   A ENTRELINHA DOS TITULOS ESTA AMARRADA A ALTURA DA PINCELADA DO `.risco`.
   O grifo pinta uma faixa de 1.15em atras da palavra; se a linha for mais
   BAIXA que a faixa, a faixa de uma linha invade a linha de cima e o azul
   passa na frente das letras de la. Com `line-height: 1.04`, como estava, a
   faixa de 1.15em sobrava ~0.1em para cada lado da caixa da linha e cortava
   justamente as descidas da linha anterior (o "p" de "para", o "c" cedilha de
   "Voce") -- uma tarja azul atravessando o titulo.
   1.18 no h1 e 1.20 no h2 sao os menores valores que ainda deixam a faixa
   INTEIRA dentro da propria linha. Nao baixe nenhum dos dois sem baixar o
   `background-size` do `.risco` junto.                                     */
h1 {
  font-size: clamp(38px, 5.6vw, 74px);
  line-height: 1.18;
  letter-spacing: -.055em;
  margin: 0 0 24px;
  font-weight: 900;
}
h1 em, h2 em { font-style: normal; color: var(--pc-ciano); }
h2 {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
  letter-spacing: -.04em;
  margin: 0 0 22px;
  font-weight: 800;
}
.eyebrow {
  color: var(--fxm-blue-mid);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 18px;
}
.pg--escura .eyebrow, .pg--hero .eyebrow, .pg--oferta .eyebrow, .pg--fecho .eyebrow { color: var(--pc-ciano); }
.lead { font-size: 17px; color: var(--pc-texto); max-width: 58ch; }
.pg--escura .lead, .pg--hero .lead, .pg--oferta .lead, .pg--fecho .lead { color: var(--pc-texto-claro); }
.pg-lead-central { margin-inline: auto; }
.micro { font-size: 12px; color: #626c82; line-height: 1.6; margin: 16px 0 0; }
.pg-remate { margin: 20px 0 0; font-size: 15px; color: var(--pc-texto); font-weight: 650; }
.pg-remate--claro { color: var(--pc-texto-claro); }

/* ---------- O IMA: container + secoes ----------
   `overflow-y: auto` no container, e cada `.pg` com `min-height: 100svh` e
   `scroll-snap-align: start`.

   `mandatory`, nao `proximity`: o ima tem de ser firme -- a rolagem sempre
   termina encaixada numa secao, nunca no meio de duas. `proximity` so
   magnetiza quando a rolagem para perto de um encaixe, o que deixa o efeito
   intermitente.

   `scroll-snap-stop: always` SAIU, e nao deve voltar. Ele obriga uma parada em
   CADA encaixe que o gesto atravessa: um deslize longo, que em qualquer outra
   pagina desce varias telas, parava na secao seguinte e so. Da primeira tela
   ate o preco sao SETE secoes, logo sete gestos obrigatorios para quem so
   quer ver quanto custa -- numa pagina de vendas isso e pedagio, nao ima.
   Sem ele o scroll-snap continua magnetizando onde a rolagem para; a
   diferenca e que agora ela pode atravessar mais de uma tela de uma vez.

   `scroll-behavior: smooth` vive AQUI, nao no `html`: quem rola e este
   container, e no `html` a propriedade nao tinha efeito nenhum (o clique nas
   bolinhas do trilho so animava porque o JS passa `behavior: 'smooth'` na
   mao).

   E seguro usar `mandatory` mesmo com as secoes que passam da altura da tela
   no celular. A especificacao de scroll-snap trata area de encaixe MAIOR que
   o viewport como um INTERVALO de posicoes validas, nao como um ponto:
   qualquer rolagem em que a secao ainda cubra a tela inteira e um encaixe
   legitimo. Dentro de uma secao alta a rolagem e livre e para onde o dedo
   deixou; o ima volta a agir na fronteira com a secao seguinte.           */
.paginas {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.pg {
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 100px 28px 56px;
  background: #fff;
}
.pg--cinza { background: var(--pc-cinza-fundo); }
.pg--escura { background: var(--pc-escuro); color: #fff; }
.pg-conteudo { width: min(1080px, 100%); margin: auto; }
.pg-conteudo--estreita { max-width: 720px; }

/* ---------- 1. hero ----------
   `align-items: flex-start`, nao `center`: a base `.pg` centraliza o
   conteudo no MEIO da tela inteira, o que e otimo para secoes curtas mas
   empurrava `.selo` para longe do cabecalho sempre que o bloco de texto era
   alto. Ancorado no topo, o espaco sobra embaixo (onde ja mora a dica de
   rolagem) e o selo fica sempre a mesma distancia do cabecalho. */
.pg--hero {
  background: var(--pc-escuro);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  align-items: flex-start;
  padding-top: 112px;
}
.pg-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 88% 30%, rgba(240, 163, 46, .20) 0%, transparent 62%),
    radial-gradient(85% 70% at 8% 0%, rgba(6, 104, 252, .26) 0%, transparent 58%),
    linear-gradient(180deg, var(--pc-escuro-2) 0%, var(--pc-escuro) 55%);
}
/* Sem segunda coluna: a mascote saiu, entao o texto nao precisa mais dividir
   a tela com nada. Uma coluna, largura de leitura confortavel. */
.hero-grid { max-width: 680px; }
.hero-texto { min-width: 0; }

/* A plaquinha do concurso. Era `position: absolute` no canto do hero, e isso
   colidia de verdade -- nao "podia colidir", colidia:

   - Em telas de ate 620px ela ficava em `top: 66px` com o cabecalho fixo
     ocupando 58px, enquanto o `.selo` (um pill de ~48 caracteres, que nessa
     largura quebra em duas ou tres linhas) comecava em 100px e crescia para a
     direita por baixo dela.
   - Em tela baixa (`max-height: 700px`, celular em paisagem e notebook curto)
     o hero sobe para 76px de padding e a plaquinha para `top: 64px`: a
     sobreposicao com o selo passava a ser certa, nao possivel.

   Agora ela e um item EM FLUXO na mesma fileira do selo (`.hero-marcas`): nao
   da para colidir com nada por construcao, e quando a largura aperta a fileira
   so quebra e a plaquinha desce uma linha. O motivo original de tira-la do
   fluxo era a MASCOTE, que empurrava o h1 para baixo -- a mascote nao existe
   mais, e um pill de uma linha dividindo a fileira com o selo nao empurra
   nada.

   O `clip-path` tambem encolheu: o ponto `0% 48%` abria um talho no meio da
   borda esquerda que entrava nos 16px de padding e comia a primeira letra --
   o mesmo defeito que apagava letra no grifo, em miniatura. Agora sao so
   cantos de 4-6%. Branca com letra vermelha, como pedido.                 */
.hero-marcas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 18px;
}
.carimbo {
  flex: none;
  margin: 0;
  padding: 9px 15px;
  background: #fff;
  color: #d61f26;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  clip-path: polygon(0% 5%, 97% 0%, 100% 94%, 95% 100%, 4% 97%, 0% 60%);
}
/* A pincelada era um `::before` absoluto com `clip-path`, e esse desenho tinha
   dois defeitos que voltavam sempre em formas diferentes:

   1. O `clip-path` recortava os cantos da faixa. Recorte pequeno some, recorte
      grande come letra -- e como a palavra e `color: #fff`, letra fora da
      pincelada e letra INVISIVEL sobre a secao clara. Foi daqui que saiu o
      bug das "letras apagadas", e cada rodada de ajuste do poligono so movia
      o problema de canto.
   2. A caixa crescia por `em` para fora do texto (`top: -.12em` etc.), entao
      passava da altura da linha e o azul cobria as letras da LINHA DE CIMA.

   Agora a faixa e `background-image` no proprio elemento inline, com altura
   FIXA de 1.15em centralizada. 1.15em nao e gosto: centralizada, a faixa vai
   de ~0.21em abaixo da linha de base ate ~0.94em acima -- precisa chegar la
   porque a cauda do c-cedilha desce a ~0.20em ("comecar a responder" e um
   grifo desta pagina) e o acento de maiuscula sobe a ~0.93em. Como e medida
   em `em` do proprio texto, e independente da metrica da fonte que o aparelho
   carregou (Inter ~1.21em de area de conteudo, Segoe UI ~1.33em, Arial
   ~1.12em) -- o desenho antigo dependia disso e variava de aparelho para
   aparelho.

   `box-decoration-break: clone` para o grifo que quebra em duas linhas receber
   a faixa inteira nas duas, nao meia faixa em cada.                        */
.risco {
  font-style: normal;
  color: #fff;
  padding: 0 .18em;
  border-radius: 4px;
  background-image: linear-gradient(100deg, var(--fxm-blue-bright), var(--fxm-blue-shade));
  background-size: 100% 1.15em;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Impressao (e qualquer motor que descarte imagem de fundo) nao pode herdar o
   `color: #fff`: sem a pincelada por tras, a palavra grifada sairia branca no
   branco -- justamente o defeito que estas regras existem para matar. No
   contraste forcado do sistema o proprio navegador ja substitui `color`, por
   isso so a impressao precisa de regra propria. */
@media print {
  .risco { color: var(--fxm-ink-brand); background: none; text-decoration: underline; }
}
/* `--azul` e o unico tom usado nesta versao (a v3 tinha tambem `--ambar` para
   distinguir questao real de exclusiva, que aqui nao existe fora da amostra).
   A classe existe para o HTML dizer explicitamente qual variante escolheu,
   mesmo com uma so disponivel -- `.risco` sozinho ja e esse tom por padrao. */
.risco--azul {}
/* Sem margem propria: o respiro ate o h1 agora e da fileira `.hero-marcas`,
   senao o selo e a plaquinha empurrariam alturas diferentes na mesma linha. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(79, 179, 255, .14);
  border: 1px solid rgba(79, 179, 255, .35);
  color: var(--pc-ciano);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.selo-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-ciano);
  box-shadow: 0 0 10px var(--pc-ciano);
}
.cta-bloco { margin-top: 28px; }
.cta-apoio { margin: 12px 0 0; font-size: 13px; color: var(--pc-texto-claro); line-height: 1.6; }

/* Dica de rolagem: so no hero, some assim que o visitante ja rolou uma vez
   (o JS nao precisa marcar isso -- ela e `position:absolute` dentro da
   PRIMEIRA secao, entao sair dela ja tira a dica de cena). */
.pg-rolar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pc-texto-claro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pg-rolar span {
  width: 18px;
  height: 18px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: pg-rolar-bounce 1.6s ease-in-out infinite;
}
@keyframes pg-rolar-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  50% { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}

/* ---------- 4. os quatro gestos ---------- */
.gestos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.gesto {
  padding: 26px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.gesto-seta {
  display: block;
  margin-bottom: 10px;
  font-size: 26px;
  line-height: 1;
  color: var(--pc-ciano);
}
.gesto b { display: block; margin-bottom: 6px; font-size: 16px; }
.gesto p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pc-texto-claro); }
.gesto--destaque { background: rgba(79, 179, 255, .09); border-color: rgba(79, 179, 255, .3); }

/* ---------- 7. publico ---------- */
.publico { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.publico-col { padding: 28px; border-radius: 16px; }
.publico-col--sim { background: var(--fxm-green-soft); border: 1px solid #b6e6cd; }
.publico-col--nao { background: #fff; border: 1px solid var(--fxm-gray-300); }
.publico-titulo { margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.publico-col--sim .publico-titulo { color: #0f6d41; }
.publico-col--nao .publico-titulo { color: var(--fxm-gray-700); }
.publico-col ul { margin: 0; padding: 0; list-style: none; }
.publico-col li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-top: 1px solid rgba(0, 0, 0, .07);
  font-size: 13.5px;
  line-height: 1.5;
}
.publico-col li:first-child { border-top: 0; }
.publico-col li b { font-weight: 800; }
.publico-col--sim li::before { content: "✓"; position: absolute; left: 3px; top: 9px; color: #0f7a46; font-weight: 900; }
.publico-col--nao li { color: var(--pc-texto); }
.publico-col--nao li::before { content: "×"; position: absolute; left: 4px; top: 7px; color: var(--fxm-gray-500); font-size: 16px; font-weight: 900; }

/* ---------- 8. o que voce recebe ---------- */
.recebe { margin: 38px 0 0; padding: 0; list-style: none; max-width: 56ch; }
.recebe li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px;
  line-height: 1.5;
}
.recebe li:first-child { border-top: 0; }
.recebe li::before { content: "✓"; position: absolute; left: 0; color: var(--pc-ciano); font-weight: 900; }

/* ---------- 9. oferta ---------- */
.pg--oferta { background: var(--pc-escuro); color: #fff; }
.prazo-mini { display: flex; flex-wrap: wrap; gap: 24px 36px; margin: 30px 0 0; }
.prazo-item { display: flex; align-items: center; gap: 10px; margin: 0; }
.prazo-item b { font-size: 26px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.prazo-item span { font-size: 12.5px; line-height: 1.35; color: #cadcff; max-width: 16ch; }
.prazo-item--destaque b { color: var(--fxm-green); }
.prazo-item--destaque span { color: #fff; font-weight: 700; }
.preco {
  margin-top: 34px;
  background: #fff;
  color: var(--pc-escuro);
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.preco-nome { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fxm-blue-mid); }
.valor { font-size: 54px; font-weight: 900; letter-spacing: -.06em; line-height: 1; margin: 10px 0 8px; }
.valor small { font-size: 20px; letter-spacing: 0; margin-right: 5px; vertical-align: super; }
.preco-linha { margin: 0; font-size: 13px; color: var(--pc-texto); }
.preco-dia { margin: 7px 0 0; font-size: 13px; color: var(--pc-texto); }
.preco-dia b { color: var(--fxm-ink-brand); }
.preco hr { border: 0; border-top: 1px solid var(--pc-linha); margin: 18px 0; }
.preco-garantias { margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; }
.preco-garantias li { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.preco-garantias li::before { content: "✓"; color: var(--fxm-green); font-weight: 900; font-size: 12px; }
.ativo { color: #187144; font-weight: 700; font-size: 13px; }

/* ---------- 13. o que nao inclui ---------- */
.naoinclui-lista { margin: 32px 0 0; padding: 0; list-style: none; max-width: 56ch; }
.naoinclui-lista li {
  padding: 15px 0 15px 28px;
  border-top: 1px solid var(--pc-linha);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pc-texto);
  position: relative;
}
.naoinclui-lista li:first-child { border-top: 0; }
.naoinclui-lista li::before { content: "×"; position: absolute; left: 3px; color: var(--fxm-red); font-weight: 900; font-size: 16px; }

/* ---------- 14. faq ----------
   Unica secao sem teto de altura: com 8 perguntas ela passa de 100svh, e o
   snap so garante o alinhamento do TOPO -- o resto rola normal por cima,
   dentro do mesmo container. */
.pg--faq { align-items: flex-start; padding-top: 128px; }
.faq { max-width: 760px; margin-top: 12px; }
.faq details { border-bottom: 1px solid #dce3f0; padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 700; line-height: 1.5; font-size: 15px; }
.faq p { margin: 13px 0 0; color: var(--pc-texto); font-size: 14px; line-height: 1.55; }

/* ---------- 15. fechamento ---------- */
.pg--fecho { background: var(--pc-escuro); color: #fff; text-align: center; }
.pg--fecho .lead { margin-inline: auto; }
.pg--fecho .botao { margin: 22px auto 0; }
.fecho-apoio { margin: 14px 0 0; font-size: 12.5px; color: var(--pc-texto-claro); }
.fecho-assinatura { margin: 30px 0 0; font-size: 12px; letter-spacing: .04em; color: #7c88ab; text-transform: uppercase; }

/* ---------- rodape ----------
   Vai DENTRO de `.paginas`, depois da ultima secao. Tem de ser ali: o `body` e
   `overflow: hidden` com altura de uma tela exata, e `.paginas` ocupa essa
   tela inteira -- um rodape irmao de `<main>`, como estava, ficava empurrado
   para fora da area visivel SEM nenhuma forma de chegar nele. Eram dois links
   renderizados, no HTML, que ninguem no mundo conseguia clicar.

   `scroll-snap-align: end` -- e nao `none` -- e o que de fato torna o rodape
   alcancavel. Com `snap-type: mandatory` o container e OBRIGADO a descansar
   num encaixe: se o rodape nao for um, o ultimo encaixe continua sendo o topo
   da secao de fechamento, e a rolagem que revelaria o rodape e puxada de
   volta. Com `end`, o fim do rodape alinhado ao fim da tela passa a ser uma
   posicao de descanso legitima -- a ultima da pagina.

   Nao e `.pg`, logo nao ganha uma tela inteira para si: ele aparece junto do
   pe da secao de fechamento, com um empurrao a mais de rolagem.           */
.rodape {
  scroll-snap-align: end;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  font-size: 12px;
  color: var(--pc-texto);
  background: #fff;
  border-top: 1px solid var(--pc-linha);
}
.rodape a { text-decoration: none; font-weight: 700; }

@media (max-width: 950px) {
  .carimbo { font-size: 11px; padding: 7px 12px; }
  .publico { grid-template-columns: 1fr; }
  .prazo-mini { gap: 18px 26px; }
}

/* O celular e onde esta pagina mais errava, e o erro era sempre o mesmo: cada
   secao e UMA TELA, mas varias tinham conteudo bem mais alto do que a tela de
   um telefone. A dos quatro gestos, empilhada em coluna unica, passava de
   780px contra ~500px uteis num aparelho de 640px de altura. Com scroll-snap
   o visitante encaixa no TOPO da secao e nao recebe nenhum sinal de que metade
   dela esta abaixo -- na secao dos gestos isso escondia justamente os dois
   gestos horizontais, que sao o argumento novo da pagina, e na secao da oferta
   escondia o BOTAO dentro do cartao de preco.

   Por isso aqui o espacamento APERTA em vez de crescer (era o contrario, e o
   comentario antigo defendia o respiro). O respiro generoso fica no desktop,
   onde ha tela sobrando para ele.                                         */
@media (max-width: 620px) {
  .pg { padding: 88px 20px 44px; }
  .pg--hero { padding-top: 96px; }
  .pg--faq { padding-top: 100px; }
  .carimbo { font-size: 10px; padding: 6px 11px; }
  .hero-marcas { margin-bottom: 14px; }
  .topo { padding: 10px 16px; min-height: 58px; }
  .topo-cta { font-size: 11px; padding: 8px 11px; }
  /* Some no celular, como o comentario do trilho sempre prometeu. */
  .trilho { display: none; }
  .botao--grande { max-width: none; font-size: 15.5px; }
  .lead { font-size: 15.5px; }
  .pg-remate { font-size: 14px; margin-top: 16px; }

  /* O piso de 38px do `clamp` do h1 era alto para 375px de largura: o titulo
     do hero virava cinco linhas e, somado ao selo, a lead e o apoio, empurrava
     o BOTAO para fora da primeira tela. Numa pagina em que cada secao e uma
     tela, o botao do hero abaixo da dobra e o pior lugar possivel para ele.
     O piso cai para ~31px em 375px e volta a crescer com a largura. */
  h1 { font-size: clamp(30px, 8.4vw, 42px); margin-bottom: 18px; }
  h2 { font-size: clamp(23px, 6.4vw, 32px); margin-bottom: 18px; }
  .selo { font-size: 10px; letter-spacing: .04em; padding: 6px 11px; }
  .cta-bloco { margin-top: 20px; }
  .cta-apoio { font-size: 12.5px; }
  /* Reserva a faixa onde mora a dica de rolagem (`.pg-rolar`, absoluta a 22px
     do fim): sem isso ela caia por cima da linha de apoio do botao. */
  .pg--hero { padding-bottom: 64px; }

  /* Quatro gestos em 2x2, nao em coluna: sao cartoes de uma frase, e empilhar
     os quatro era o que estourava a tela. A regra de 950px nao empilha mais
     por isso mesmo -- em tablet o problema era igual. */
  .gestos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
  .gesto { padding: 16px 14px; border-radius: 13px; }
  .gesto-seta { font-size: 21px; margin-bottom: 7px; }
  .gesto b { font-size: 14.5px; }
  .gesto p { font-size: 12.5px; }

  .publico { gap: 14px; margin-top: 24px; }
  .publico-col { padding: 18px 18px 20px; }
  .publico-col li { padding: 10px 0 10px 24px; font-size: 13px; }
  .publico-col--sim li::before, .publico-col--nao li::before { top: 7px; }

  .recebe { margin-top: 24px; }
  .recebe li { padding: 11px 0 11px 26px; font-size: 14px; }
  .naoinclui-lista { margin-top: 22px; }
  .naoinclui-lista li { padding: 12px 0 12px 26px; font-size: 13.5px; }

  .prazo-mini { gap: 12px 22px; margin-top: 20px; }
  .prazo-item b { font-size: 22px; }
  .prazo-item span { font-size: 12px; }
  .preco { padding: 22px; max-width: none; margin-top: 22px; border-radius: 16px; }
  .preco hr { margin: 14px 0; }
  .preco-garantias { margin-bottom: 14px; }
  .valor { font-size: 44px; }

  .faq details { padding: 15px 0; }
  .faq summary { font-size: 14.5px; }
  .rodape { flex-direction: column; gap: 8px; }
}

/* Telas baixas, incluindo celulares em paisagem: reduzir respiros e tipo para
   manter o conteudo do hero dentro da tela antes do proximo snap. */
@media (max-height: 700px) {
  .pg { padding-top: 76px; padding-bottom: 32px; }
  .pg--hero { padding-top: 76px; }
  h1 { font-size: clamp(29px, 4vw, 48px); margin-bottom: 12px; }
  h2 { font-size: clamp(23px, 3vw, 34px); margin-bottom: 14px; }
  .hero-marcas { margin-bottom: 12px; }
  .selo { padding: 6px 11px; }
  .lead { font-size: 15px; }
  .cta-bloco { margin-top: 16px; }
  .botao--grande { min-height: 50px; }
  .pg-rolar { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Tem de ser `.paginas`: e ele que rola, nao o `html`. */
  .paginas { scroll-behavior: auto; }
  .botao, .trilho i { transition: none; }
  .pg-rolar span { animation: none; }
}

/* Navegadores sem suporte a scroll-snap (raros hoje) simplesmente rolam a
   pagina inteira como uma pagina normal -- `.paginas` continua um container
   com `overflow-y: auto` funcional mesmo sem o efeito de ima. Nao e um
   fallback escrito a parte: e a ausencia da propriedade se comportando como
   scroll comum, que e exatamente o que se quer quando ela falta. */