/* Página de vendas (/pv1). Fora do app: sem sidebar, sem login, sem estado.
   Mesma identidade do produto — violeta #2A0A6B, ouro #FFB800, Manrope — porque a pessoa
   que clica no anúncio tem de reconhecer a tela quando entrar no Scanner depois. */

.pv {
  --navy: #2A0A6B;
  --navy-2: #3D1A8F;
  --navy-3: #341080;
  --gold: #FFB800;
  --gold-claro: #FFCB45;
  --gold-escuro: #B07A00;
  --papel: #F7F4FD;
  --branco: #FFFFFF;
  --linha: #E6DFF5;
  --txt: #1C0B45;
  --txt-2: #4A4263;
  --txt-3: #6F7A8C;
  --verde: #067647;
  --verde-bg: #ECFDF3;
  --vermelho: #B42318;
  --vermelho-bg: #FEF3F2;
  --raio: 12px;
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  color: var(--txt);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* o navegador da 8px de margem ao body por padrao, e a pagina nunca zerou: sobrava uma tira
     branca dos dois lados do topo, do hero e do rodape — as tres faixas que deviam sangrar */
  margin: 0;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
.pv h1, .pv h2, .pv h3, .pv h4 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.02em; }
.pv p { margin: 0 0 1em; }
.pv strong { font-weight: 700; }
.pv-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.pv-estreito { max-width: 760px; }
.pv-secao { padding: 72px 0; }
.pv-secao-clara { background: var(--papel); }
.pv-centro { text-align: center; }
.pv-olho {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-escuro); background: #FBF3DE;
  border: 1px solid #EBD8A4; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.pv-secao h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; }
.pv-sub { font-size: 1.1rem; color: var(--txt-2); max-width: 62ch; }
.pv-centro .pv-sub { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- topo */
.pv-topo {
  position: sticky; top: 0; z-index: 40; background: rgba(42,10,107,.97);
  backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1);
}
.pv-topo .pv-wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.pv-marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; }
.pv-marca svg { width: 30px; height: 30px; flex: none; }
.pv-marca strong { font-weight: 800; }
.pv-topo-acoes { display: flex; align-items: center; gap: 10px; }
.pv-link-entrar { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 8px 12px; }
.pv-link-entrar:hover { color: #fff; }

/* ---------------------------------------------------------------- botões */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: var(--navy); font-weight: 800; font-size: 1.02rem;
  padding: 15px 28px; border-radius: var(--raio); text-decoration: none; border: 0;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 18px rgba(255,184,0,.28); text-align: center; font-family: inherit;
}
.pv-btn:hover { background: var(--gold-claro); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,184,0,.36); }
.pv-btn-g { font-size: 1.12rem; padding: 19px 40px; width: 100%; max-width: 460px; }
.pv-btn-mini { padding: 9px 16px; font-size: .9rem; box-shadow: none; }
.pv-btn-fantasma { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; }
.pv-btn-fantasma:hover { background: rgba(255,255,255,.12); }
.pv-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; box-shadow: none; }
.pv-sob-btn { font-size: .87rem; color: var(--txt-3); margin-top: 12px; }
/* nas duas seções escuras o cinza do texto de apoio fica ilegível sobre o navy */
.pv-hero .pv-sob-btn, .pv-fecho .pv-sob-btn { color: rgba(255,255,255,.68); }

/* ---------------------------------------------------------------- hero */
.pv-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 55%, #1E0650 100%);
  color: #fff; padding: 64px 0 76px; position: relative; overflow: hidden;
}
.pv-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(820px 340px at 50% 6%, rgba(255,184,0,.16), transparent 70%);
}

/* ---------------------------------------------------------------- foto de fundo do hero
   A arte entra como camada propria (::before) e nao como background da secao: assim da pra
   escurecer so ela, sem lavar o texto junto.

   Duas travas pra nao sobrar marca de borda:
   · mask-image apaga a foto de baixo pra cima, entao ela termina em nada — nao numa linha reta;
   · o ::after por cima ainda fecha em var(--navy) solido, que e a mesma cor do fim da dobra.
   Uma cobre a falha da outra: se o navegador ignorar a mascara, o degrade do ::after segura. */
.pv-hero-foto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 88%;
  background-image: var(--pv-hero-foto);
  background-size: cover; background-position: center 62%; background-repeat: no-repeat;
  opacity: .85; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,.45) 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0,0,0,.45) 68%, transparent 100%);
}
.pv-hero-foto::after {
  opacity: 1;
  background:
    radial-gradient(820px 340px at 50% 6%, rgba(255,184,0,.13), transparent 70%),
    linear-gradient(180deg, rgba(42,10,107,.22) 0%, rgba(42,10,107,.52) 42%, rgba(42,10,107,.86) 74%, var(--navy) 100%);
}
/* A foto precisa de altura pra aparecer ACIMA da headline. A classe dupla e de proposito: a media
   query la embaixo tambem escreve padding em .pv-hero, e com a mesma especificidade quem vem por
   ultimo no arquivo ganha — aqui nao pode ganhar. */
.pv-hero.pv-hero-foto { padding-top: 150px; }
@media (min-width: 900px) { .pv-hero.pv-hero-foto { padding-top: 230px; } }
/* Em tela estreita o recorte cai bem na emenda do diptico e nao se ve nada. Aqui a camera vai
   pro lado direito da arte, que e onde esta o rosto de quem deu certo. */
@media (max-width: 720px) {
  .pv-hero-foto::before { background-position: 74% 22%; height: 72%; }
}
.pv-hero .pv-wrap { position: relative; z-index: 1; }
.pv-hero h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); font-weight: 800; margin-bottom: 20px; }
.pv-hero h1 em { font-style: normal; color: var(--gold-claro); }
/* .pv-hero .pv-hero-sub e nao .pv-hero-sub: a regra generica .pv p define margin de uma vez
   so e tem especificidade maior (0,1,1), entao ela zerava o auto e o paragrafo ficava 98px
   a esquerda do eixo enquanto titulo e botao estavam centrados */
.pv-hero .pv-hero-sub { font-size: 1.14rem; color: rgba(255,255,255,.84); max-width: 56ch; margin: 0 auto 28px; }
/* uma coluna so: sem o cartao de amostra, o hero virou manchete + promessa + botao,
   e isso le melhor centralizado do que encostado na esquerda com meia dobra vazia */
/* vídeo de demonstração, entre a headline e o botão */
.pv-video { max-width: 760px; margin: 6px auto 26px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); background: #000; }
.pv-hero-grade { display: block; text-align: center; }
.pv-hero-grade > div { max-width: 820px; margin: 0 auto; }
.pv-hero .pv-btn-g { margin-left: auto; margin-right: auto; }


/* ---------------------------------------------------------------- números */
.pv-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pv-numero { background: var(--navy); color: #fff; border-radius: var(--raio); padding: 26px 24px; }
.pv-numero b { display: block; font-size: 2.3rem; font-weight: 800; color: var(--gold-claro); line-height: 1.1; }
.pv-numero span { font-size: .95rem; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- listas */
.pv-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pv-bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.04rem; }
/* o marcador virou ícone (ver .pv-bullets .pv-ico) */

/* ---------------------------------------------------------------- casos reais */
.pv-casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 30px; }
.pv-caso {
  background: var(--branco); border: 1px solid var(--linha); border-top: 3px solid var(--vermelho);
  border-radius: var(--raio); padding: 22px;
}
.pv-caso h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vermelho); margin-bottom: 10px; }
.pv-caso p { font-size: .97rem; color: var(--txt-2); margin-bottom: 10px; }
.pv-caso cite { display: block; font-size: .78rem; color: var(--txt-3); font-style: normal; }

/* ---------------------------------------------------------------- passos e perguntas */
.pv-fontes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 28px 0 36px; }
.pv-fonte { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; }
.pv-fonte b { display: block; color: var(--navy); font-size: 1.02rem; margin-bottom: 4px; }
.pv-fonte span { font-size: .91rem; color: var(--txt-2); }
.pv-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: passo; }
.pv-passo { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; position: relative; }
.pv-passo::before {
  counter-increment: passo; content: counter(passo);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--gold);
  font-weight: 800; font-size: .95rem; margin-bottom: 12px;
}
.pv-passo h3 { font-size: 1.04rem; margin-bottom: 6px; }
.pv-passo p { font-size: .94rem; color: var(--txt-2); margin: 0; }
.pv-perguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pv-pergunta { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; }
.pv-pergunta b { display: block; font-size: 1.02rem; margin-bottom: 6px; color: var(--navy); }
.pv-pergunta span { font-size: .93rem; color: var(--txt-2); }
.pv-pergunta i { font-style: normal; color: var(--gold-escuro); font-weight: 800; margin-right: 6px; }

/* ---------------------------------------------------------------- comparativo */
.pv-tabela-caixa { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
.pv-tabela { width: 100%; border-collapse: collapse; min-width: 560px; }
.pv-tabela th, .pv-tabela td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--linha); }
.pv-tabela thead th { background: var(--navy); color: #fff; font-size: .88rem; font-weight: 700; }
.pv-tabela thead th:not(:first-child) { text-align: center; width: 160px; }
.pv-tabela td:not(:first-child) { text-align: center; font-size: 1.08rem; }
.pv-tabela tbody tr:last-child td { border-bottom: 0; }
.pv-tabela tbody tr:nth-child(even) { background: #FAFBFD; }
.pv-tabela td:first-child { font-size: .95rem; color: var(--txt-2); }
.pv-sim { color: var(--verde); font-weight: 800; }
.pv-nao { color: #C0C6D0; font-weight: 800; }
.pv-col-nossa { background: rgba(255,184,0,.06); }

/* ---------------------------------------------------------------- stack e bônus */
.pv-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pv-item { display: flex; gap: 13px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; }
.pv-item .pv-tick { color: var(--verde); font-weight: 800; flex: 0 0 auto; }
.pv-item b { display: block; margin-bottom: 3px; }
.pv-item span { font-size: .92rem; color: var(--txt-2); }
.pv-bonus .pv-item { border-color: #EBD8A4; background: #FDFAF1; }
.pv-bonus .pv-tick { color: var(--gold-escuro); }

/* ---------------------------------------------------------------- custo de errar */
/* 2x2 no desktop: com tres colunas o quarto cartao ficava sozinho e torto na esquerda */
.pv-custos { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 34px; }
@media (min-width: 760px) { .pv-custos { grid-template-columns: 1fr 1fr; } }
.pv-custo { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio); padding: 20px; }
.pv-custo b { display: block; color: var(--gold-claro); margin-bottom: 6px; font-size: 1.02rem; }
.pv-custo span { font-size: .93rem; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- planos */
.pv-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
/* o cartão é branco dentro de uma seção escura: precisa retomar a cor do texto, senão o
   título do plano herda o branco da seção e some no fundo branco do próprio cartão */
.pv-plano { background: var(--branco); color: var(--txt); border: 1px solid var(--linha); border-radius: 16px; padding: 28px 24px; position: relative; }
/* a âncora dos botões da página: para abaixo do topo fixo e chega deslizando */
.pv-plano { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.pv-plano-top { border: 2px solid var(--gold); box-shadow: 0 16px 40px rgba(42,10,107,.14); }
.pv-fita {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy); font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.pv-plano h3 { font-size: 1.3rem; margin-bottom: 2px; }
.pv-plano-linha { font-size: .88rem; color: var(--txt-3); margin-bottom: 16px; }
/* "Por apenas 12x de" em cima do número: a parcela é de uma cobrança trimestral, e escrever
   "/mês" do lado dela dava a entender que era mensalidade */
.pv .pv-preco-antes { font-size: .9rem; font-weight: 600; color: var(--txt-3); margin: 0 0 3px; }
.pv-preco { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.pv-preco b { font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1; white-space: nowrap; }
.pv-preco span { color: var(--txt-3); font-weight: 600; }
.pv-ano { font-size: .88rem; color: var(--txt-3); margin-bottom: 8px; }
.pv-porana {
  display: inline-block; background: var(--verde-bg); color: var(--verde); border: 1px solid #BFE3CE;
  font-size: .85rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.pv-plano ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.pv-plano li { display: flex; gap: 9px; font-size: .93rem; color: var(--txt-2); align-items: flex-start; }
.pv-plano li::before { content: '✓'; color: var(--verde); font-weight: 800; flex: 0 0 auto; }
.pv-plano .pv-btn { width: 100%; }

/* ---------------------------------------------------------------- garantia */
.pv-garantia {
  display: flex; gap: 22px; align-items: flex-start; background: var(--branco);
  border: 1px solid var(--linha); border-left: 4px solid var(--gold); border-radius: var(--raio); padding: 30px;
}
.pv-selo-g {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; background: #FBF3DE;
  border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: var(--gold-escuro); font-weight: 800; line-height: 1;
}
/* o selo de verdade (21/09/2026): roseta dourada, centro navy, "GARANTIA / 7 DIAS / DINHEIRO DE VOLTA" */
.pv-selo { flex: 0 0 auto; width: 136px; }
.pv-selo-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(42,10,107,.22)); }
@media (max-width: 560px) { .pv-selo { width: 124px; margin: 0 auto; } }
.pv-selo-g b { font-size: 1.7rem; } .pv-selo-g span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- faq */
.pv-faq { display: grid; gap: 10px; }
.pv-faq details { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.pv-faq summary {
  cursor: pointer; padding: 17px 22px; font-weight: 700; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: '+'; color: var(--gold-escuro); font-size: 1.4rem; font-weight: 700; flex: 0 0 auto; }
.pv-faq details[open] summary { border-bottom: 1px solid var(--linha); }
.pv-faq details[open] summary::after { content: '−'; }
.pv-faq-corpo { padding: 16px 22px 20px; color: var(--txt-2); font-size: .97rem; }
.pv-faq-corpo p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- fechamento e rodapé */
.pv-fecho { background: linear-gradient(160deg, var(--navy) 0%, #1E0650 100%); color: #fff; }
.pv-fecho h2 { color: #fff; }
.pv-fecho .pv-sub { color: rgba(255,255,255,.82); }
.pv-rodape { background: #160438; color: rgba(255,255,255,.66); padding: 44px 0 34px; font-size: .88rem; }
.pv-rodape a { color: rgba(255,255,255,.86); }
.pv-rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; margin-bottom: 26px; }
.pv-rodape h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.pv-rodape-fim { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* ---------------------------------------------------------------- responsivo */
@media (min-width: 900px) {
  .pv-hero { padding: 84px 0 96px; }
  .pv-secao { padding: 88px 0; }
}
.pv-so-estreito { display: none; }
@media (max-width: 560px) {
  .pv-btn-g { padding: 17px 24px; font-size: 1.04rem; }
  .pv-garantia { flex-direction: column; gap: 16px; }
  .pv-topo .pv-link-entrar { display: none; }
  /* no celular o cabeçalho não comporta a frase inteira: a marca quebrava em duas linhas e o
     botão tomava metade da tela. O rótulo curto resolve sem esconder o CTA, que é o que importa. */
  .pv-so-largo { display: none; }
  .pv-so-estreito { display: inline; }
  .pv-marca span { white-space: nowrap; font-size: .95rem; }
  .pv-topo-acoes .pv-btn-mini { padding: 9px 18px; }
}

/* ================================================================ prints do produto */
.pv-print {
  display: block; width: 100%; height: auto; border-radius: 10px;
  /* fio dourado da marca: com o cinza claro de antes o print se dissolvia no fundo e parecia
     que nao tinha borda nenhuma */
  border: 1px solid var(--gold); background: var(--branco);
  box-shadow: 0 12px 34px rgba(42,10,107,.13);
}
.pv-print-escuro { box-shadow: 0 18px 48px rgba(0,0,0,.42); border-color: rgba(255,255,255,.14); }
.pv-figura { margin: 0; }
.pv-figura figcaption {
  margin-top: 10px; font-size: .85rem; color: var(--txt-3); text-align: center;
}
.pv-fecho .pv-figura figcaption { color: rgba(255,255,255,.6); }
.pv-legenda-real {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
  color: var(--verde); background: var(--verde-bg); border: 1px solid #BFE3CE;
  padding: 4px 11px; border-radius: 999px;
}
.pv-legenda-real::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* duas colunas: texto de um lado, print do outro */
.pv-duo { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.pv-duo + .pv-duo { margin-top: 64px; }
@media (min-width: 900px) {
  .pv-duo { grid-template-columns: 1fr 1.15fr; gap: 48px; }
  .pv-duo-invertido > *:first-child { order: 2; }
}
.pv-duo h3 { font-size: 1.5rem; }
.pv-duo p { color: var(--txt-2); }

/* galeria de prints menores */
.pv-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }

/* ================================================================ movimento */
@media (prefers-reduced-motion: no-preference) {
  /* A prova de falha: o conteudo nasce VISIVEL. So quando o JS assume (classe no body) e que os
     blocos somem para entrar animados. Sem isso, um erro de script deixaria meia pagina em branco
     — que e um estrago muito maior do que ficar sem animacao. */
  .pv-anima .pv-surge { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
  .pv-anima .pv-surge.pv-visivel { opacity: 1; transform: none; }
  .pv-surge-1 { transition-delay: .08s; } .pv-surge-2 { transition-delay: .16s; }
  .pv-surge-3 { transition-delay: .24s; } .pv-surge-4 { transition-delay: .32s; }
  .pv-item, .pv-caso, .pv-pergunta, .pv-passo, .pv-fonte, .pv-plano { transition: transform .25s ease, box-shadow .25s ease; }
  .pv-item:hover, .pv-caso:hover, .pv-pergunta:hover, .pv-passo:hover, .pv-fonte:hover {
    transform: translateY(-4px); box-shadow: 0 12px 28px rgba(42,10,107,.11);
  }
  .pv-plano:hover { transform: translateY(-5px); }
  .pv-tabela tbody tr { transition: background .2s ease; }
  .pv-tabela tbody tr:hover { background: #FFF8E6; }
}

/* o cruzamento das quatro fontes, desenhado */
.pv-cruz { width: 100%; max-width: 620px; margin: 0 auto; display: block; }
.pv-cruz .fonte-caixa { fill: #fff; stroke: var(--linha); stroke-width: 1.5; }
.pv-cruz .fonte-txt { font: 700 13px Manrope, sans-serif; fill: var(--navy); }
.pv-cruz .fio { stroke: var(--gold); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }
.pv-cruz .nucleo { fill: var(--navy); }
.pv-cruz .nucleo-txt { font: 800 15px Manrope, sans-serif; fill: var(--gold-claro); }
.pv-cruz .achou { font: 800 12px Manrope, sans-serif; fill: var(--vermelho); }
.pv-cruz .vale  { font: 800 12px Manrope, sans-serif; fill: var(--verde); }
@media (prefers-reduced-motion: no-preference) {
  .pv-cruz .fio { animation: pv-fluir 2.4s linear infinite; }
  .pv-cruz .fio-2 { animation-delay: .3s; } .pv-cruz .fio-3 { animation-delay: .6s; } .pv-cruz .fio-4 { animation-delay: .9s; }
  @keyframes pv-fluir { to { stroke-dashoffset: -48; } }
  .pv-cruz .pulso { animation: pv-pulsar 2.6s ease-in-out infinite; transform-origin: center; }
  @keyframes pv-pulsar { 0%,100% { r: 46; opacity: 1; } 50% { r: 49; opacity: .88; } }
}

/* número que conta */
.pv-numero b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- bônus dentro do plano */
.pv-bonus-rotulo {
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-3); margin: 4px 0 8px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.pv-bonus-rotulo.pv-bonus-tem { color: var(--gold-escuro); }
.pv-plano-bonus, .pv-plano-sem { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.pv-plano-bonus li, .pv-plano-sem li { display: flex; gap: 9px; font-size: .91rem; align-items: flex-start; }
.pv-plano-bonus li { color: var(--txt-2); }
.pv-plano-bonus li::before { content: '★'; color: var(--gold-escuro); font-weight: 800; flex: 0 0 auto; }
.pv-plano-sem li { color: #A6AEBB; }
.pv-plano-sem li::before { content: '✕'; color: #C6CCD6; font-weight: 800; flex: 0 0 auto; }

/* ---------------------------------------------------------------- os três passos */
.pv-passos3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 860px) { .pv-passos3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pv-passos3 li {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 18px 18px 0; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 30px rgba(42,10,107,.06);
}
.pv-passo-cabeca { display: flex; gap: 13px; align-items: flex-start; }
.pv-passo-num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: var(--gold-claro); font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.pv-passo-cabeca b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
/* so o span do texto: sem o > div o seletor pegava tambem o numero dentro do circulo,
   que virava cinza escuro em cima do navy e sumia */
.pv-passo-cabeca > div > span { display: block; font-size: .92rem; color: var(--txt-2); line-height: 1.5; }
/* a imagem encosta no rodapé do cartão: some a borda de baixo e o print vira o "pé" do passo */
.pv-passos3 .pv-figura { margin-top: auto; }
.pv-passos3 .pv-print {
  width: 100%; display: block; border-radius: 10px 10px 0 0; border-bottom: 0;
  aspect-ratio: 640 / 728; object-fit: cover; object-position: center top;
}

/* ---------------------------------------------------------------- selo da fonte no caso real */
.pv-fonte-selo {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: #F1ECFC; border: 1px solid #DCD2F2;
  padding: 5px 10px; border-radius: 7px;
}
.pv-fonte-selo svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- galeria: mesma altura
   Os três prints têm formatos diferentes (a calculadora é muito mais alta). Sem uma altura
   comum, a linha fica torta e o cartão do meio estica os vizinhos. O recorte é sempre pelo
   topo, que é onde está a informação que importa em cada tela. */
/* Sem proporcao imposta: cada print foi cortado no ARQUIVO, numa faixa de pixels vazios, no fim
   do seu proprio bloco — os anuncios depois do segundo, o grafico depois da ultima barra, o
   checklist depois do terceiro item. Forcar uma altura comum obrigava um dos tres a mostrar
   metade de um bloco; com os cartoes alinhados no topo, os tres aparecem inteiros. */
.pv-galeria { align-items: start; }
.pv-galeria .pv-print { height: auto; }

/* ---------------------------------------------------------------- comparativo no celular
   Em 390px a tabela (min-width 560) rolava de lado, e a coluna do Scanner -- o único argumento
   da dobra -- era a última. Ninguém arrasta o que não sabe que existe. Abaixo de 720px cada
   linha vira um cartão, com os dois selos lado a lado e rótulo em cima de cada um. */
@media (max-width: 720px) {
  .pv-tabela-caixa { overflow-x: visible; border: 0; background: transparent; }
  .pv-tabela, .pv-tabela tbody, .pv-tabela tr, .pv-tabela td { display: block; width: auto; }
  .pv-tabela { min-width: 0; }
  .pv-tabela thead { display: none; }
  /* grid e nao inline-block: com dois td de 48% mais o espaco em branco entre as tags o
     segundo selo quebrava pra linha de baixo */
  .pv-tabela tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch;
    background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
    padding: 14px 15px 13px; margin-bottom: 12px;
  }
  .pv-tabela td:first-child { grid-column: 1 / -1; }
  .pv-tabela tbody tr:nth-child(even) { background: var(--branco); }
  .pv-tabela tbody tr:last-child { margin-bottom: 0; }
  .pv-tabela td { border-bottom: 0; padding: 0; }
  .pv-tabela td:first-child { font-size: .97rem; color: var(--txt); font-weight: 600; margin-bottom: 11px; }
  /* os dois selos entram numa linha só, cada um com o nome da coluna em cima */
  .pv-tabela td:not(:first-child) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 7px 4px; border-radius: 9px; text-align: center;
    background: var(--papel); font-size: 1.12rem;
  }
  .pv-tabela td:not(:first-child)::before {
    content: attr(data-col); display: block; font-size: .66rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; color: var(--txt-3);
  }
  .pv-tabela td.pv-col-nossa { background: rgba(255,184,0,.12); }
  .pv-tabela td.pv-col-nossa::before { color: var(--gold-escuro); }
}

/* ---------------------------------------------------------------- letra e alvo de toque no celular
   Medido em 390px: sete trechos abaixo de 12,5px (selo de fonte a 10,9; o "dias" do contador a
   9,9) e os links do rodapé com 19px de altura de toque, contra os 40 recomendados. */
@media (max-width: 720px) {
  .pv-fonte-selo { font-size: .8rem; }
  /* o selo da garantia: o "dias" saia com 9,9px, menor que qualquer texto da pagina */
  .pv-selo-g span { font-size: .84rem; }
  .pv-legenda-real, .pv-bonus-rotulo { font-size: .82rem; }
  .pv-fita { font-size: .8rem; }
  .pv-numero b span, .pv-numero small { font-size: .8rem; }
  .pv-rodape-fim a, .pv-rodape a { display: inline-block; padding: 10px 2px; }
  .pv-marca { padding: 7px 0; }
}

/* ================================================================ ícones
   Um tamanho por contexto e a cor herdada do bloco. São 33 na página; antes eram 4 no total,
   contando a logo, e nove seções não tinham nenhum elemento visual. */
.pv-ico { flex: 0 0 auto; width: 22px; height: 22px; }

.pv-bullets .pv-ico { width: 25px; height: 25px; color: var(--gold-escuro); margin-top: 1px; }
.pv-bullets li > span { flex: 1; }
/* o que o Scanner achou em editais de verdade: problema, então X vermelho (igual à /pv2) */
.pv-achados .pv-ico { color: var(--vermelho); }

.pv-item .pv-tick { display: inline-flex; align-items: flex-start; }
.pv-item .pv-ico { width: 26px; height: 26px; color: var(--navy); }
.pv-bonus .pv-item .pv-ico { color: var(--gold-escuro); }

.pv-custo .pv-ico { width: 28px; height: 28px; color: var(--gold-claro); margin-bottom: 12px; display: block; }

.pv-ico-p { width: 26px; height: 26px; color: var(--gold-escuro); margin-bottom: 10px; display: block; }

/* ================================================================ ritmo de cor
   A página tinha 14 seções e só três com cor de marca: topo, hero e rodapé. Onze mil pixels
   seguidos de branco e cinza. O stack vira navy — é o meio da página, é a dobra que lista o que
   o produto entrega, e o cartão branco sobre o navy dá o contraste que faltava. */
.pv-secao-escura { background: linear-gradient(165deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; }
.pv-secao-escura h2, .pv-secao-escura h3 { color: #fff; }
.pv-secao-escura .pv-sub { color: rgba(255,255,255,.82); }
.pv-secao-escura .pv-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.pv-secao-escura .pv-item b { color: #fff; }
.pv-secao-escura .pv-item span { color: rgba(255,255,255,.78); }
.pv-secao-escura .pv-item .pv-ico { color: var(--gold-claro); }

/* fio dourado acima do título de seção: marca o começo de cada dobra sem pesar */
.pv-fio-topo { display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--gold);
  margin: 0 0 18px; }
.pv-centro .pv-fio-topo { margin-left: auto; margin-right: auto; }
.pv-secao-escura .pv-fio-topo { background: var(--gold-claro); }

/* ================================================================ motion
   Nada que se mexa sozinho na cara de quem lê: só resposta ao mouse, e desligado em
   prefers-reduced-motion junto com o resto. */
@media (prefers-reduced-motion: no-preference) {
  .pv-item, .pv-custo, .pv-pergunta, .pv-caso, .pv-passos3 li {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pv-item:hover, .pv-pergunta:hover, .pv-caso:hover, .pv-passos3 li:hover {
    transform: translateY(-3px); box-shadow: 0 14px 32px rgba(42,10,107,.10); border-color: var(--gold);
  }
  .pv-custo:hover { transform: translateY(-3px); border-color: rgba(255,184,0,.5); }
  .pv-ico { transition: transform .18s ease; }
  .pv-item:hover .pv-ico, .pv-pergunta:hover .pv-ico { transform: scale(1.12); }
  /* o fio do título cresce quando a dobra entra na tela */
  .pv-fio-topo { transform: scaleX(.25); transform-origin: left; transition: transform .5s ease .1s; }
  .pv-centro .pv-fio-topo { transform-origin: center; }
  .pv-visivel .pv-fio-topo, .pv-visivel.pv-fio-topo { transform: scaleX(1); }
}

/* ================================================================ FAQ, linha do tempo, selo, colunas */
.pv-faq summary { display: flex; align-items: center; gap: 11px; }
.pv-ico-faq { width: 21px; height: 21px; color: var(--gold-escuro); }
.pv-faq summary > span { flex: 1; }

.pv-selo-g { display: flex; flex-direction: column; align-items: center; }
.pv-ico-selo { width: 26px; height: 26px; color: var(--gold-escuro); margin-bottom: 2px; }

.pv-tabela thead th { vertical-align: middle; }
.pv-ico-col { width: 20px; height: 20px; display: block; margin: 0 auto 5px; color: var(--gold-claro); }
/* o logo do Scanner no cabeçalho da coluna dele, com cara de ícone de app */
.pv-logo-col { display: block; width: 36px; height: 36px; margin: 0 auto 6px; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 6px 14px rgba(0,0,0,.28); }
.pv-logo-col svg { display: block; width: 100%; height: 100%; }
.pv-tabela thead th:first-child .pv-ico-col { display: none; }

/* ================================================================ o pé do print
   Com object-fit: cover o corte cai onde cair. Quando cai no meio de uma frase parece defeito;
   esmaecido, lê-se como "continua" — que é o que de fato acontece. */
/* Sem esmaecido: depois que cada arquivo passou a ter a proporcao do cartao, nada e cortado na
   exibicao — e apagar o pe comeria conteudo de verdade. O corte agora e feito no ARQUIVO, numa
   faixa de pixels vazios, entao ele cai entre dois blocos e nunca no meio de uma linha. */

/* ---------------------------------------------------------------- planos no celular
   Empilhados, o primeiro da lista e o que a pessoa le primeiro — e o primeiro e o Basico, que e
   o que a pagina MENOS recomenda. Invertendo a coluna, ela encontra o Operacao, depois o
   Investidor (o destacado, no meio) e so entao o Basico. No desktop a ordem fica como esta. */
@media (max-width: 860px) {
  .pv-planos { display: flex; flex-direction: column-reverse; }
}

/* ---------------------------------------------------------------- uma frase por linha
   A copy do André vem em frases curtas, uma por linha, terminando em "…". Com o espaço de
   parágrafo inteiro entre elas o bloco se esfarela; perto uma da outra, lê como fala. */
.pv p.pv-linha { margin-bottom: .55em; }

/* ================================================================ paleta violeta + ouro (21/09/2026)
   60% branco, 30% violeta, 10% ouro. O topo e os cartões de número eram blocos escuros; ficaram
   brancos pra página respirar, e o violeta ficou pro hero, pra oferta, pro fechamento e pro rodapé.
   (As variáveis ainda se chamam --navy e --gold: renomear mexeria em 200 linhas sem mudar um pixel.) */
.pv-topo { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--linha); }
.pv-marca { color: var(--navy); }
.pv-link-entrar { color: var(--txt-2); } .pv-link-entrar:hover { color: var(--navy); }
.pv-numero { background: var(--branco); color: var(--navy); border: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(42,10,107,.07); }
.pv-numero b { color: var(--gold-escuro); } .pv-numero span { color: var(--txt-2); }
.pv-print { border-color: #DCD2F2; }

/* com o vídeo no hero, a foto de fundo não precisa de 230 px livres em cima: o vídeo tem de
   aparecer sem rolar */
.pv-hero.pv-hero-foto:has(.pv-video) { padding-top: 64px; }
@media (min-width: 900px) { .pv-hero.pv-hero-foto:has(.pv-video) { padding-top: 84px; } }
@media (max-width: 560px) { .pv-video { border-radius: 10px; margin-bottom: 20px; } }