/* Código do Produto Viral, Jéssica Freire.
   Prefixo do projeto: cpv-. Raízes registradas em docs/css-namespaces.raia-a.md.

   Cores: as do site no ar foram lidas do CSS servido em
   jessicafreire.com/assets/index-CunmFjOA.css (tokens em HSL), e conferidas
   contra as peças do cliente, amostradas com PIL:
     pílula e barra das capas de módulo  #ff0347
     ciano do logo                        #00fefe
     rosa do Banner Funil                 #fc0042
   São a mesma família. Ficou o valor do site, que é o que está no ar hoje. */

:root{
  --cpv-fundo:        #050505;   /* --background: 0 0% 2%   */
  --cpv-fundo-2:      #0d0d0d;
  --cpv-superficie:   rgba(255,255,255,.045);
  --cpv-borda:        rgba(255,255,255,.075);
  --cpv-borda-forte:  rgba(255,255,255,.14);
  --cpv-texto:        #f5f5f5;   /* --foreground: 0 0% 96%  */
  --cpv-texto-2:      #a1a1a1;
  /* #6f6f6f reprovava no Lighthouse: 3,79:1 sobre o #101010 do cartao de
     etapa e 4,06:1 sobre o fundo do rodape, contra os 4,5:1 que o AA pede
     para texto normal. Medido na URL publica em 08/09/2026, e era o unico
     motivo da acessibilidade estar em 95. #838383 da 5,02:1 e 5,38:1. */
  --cpv-texto-3:      #838383;
  --cpv-ciano:        #24f5d2;   /* --tiktok-cyan: 170 91% 55% */
  --cpv-magenta:      #fe2a5b;   /* --tiktok-red:  346 99% 58% */
  --cpv-gradiente:    linear-gradient(135deg, #24f5d2, #fe2a5b);
  --cpv-gradiente-h:  linear-gradient(135deg, #3cf6d7, #fe436f);

  --cpv-largura:      1100px;
  --cpv-largura-texto:760px;
  --cpv-raio:         18px;
  --cpv-raio-p:       12px;
  /* Poppins servida pelo site, declarada em fontes.css */
  --cpv-fonte: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji";
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cpv-fundo);
  color:var(--cpv-texto);
  font-family:var(--cpv-fonte);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:82px;          /* espaço da barra fixa de chamada */
}

img{ max-width:100%; height:auto; display:block; }
picture{ display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.15; letter-spacing:-.035em; }
p{ margin:0 0 16px; }
::selection{ background:rgba(36,245,210,.3); }

/* ---------- container ---------- */

.cpv-conteudo{
  width:100%;
  max-width:var(--cpv-largura);
  margin:0 auto;
  padding:0 20px;
}
.cpv-conteudo--texto{ max-width:var(--cpv-largura-texto); }

/* ---------- barra de navegação do topo ---------- */

.cpv-topo{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(5,5,5,.88);
  border-bottom:1px solid var(--cpv-borda);
  transform:translateY(-100%);
  transition:transform .25s ease;
}
.cpv-topo.is-visivel{ transform:translateY(0); }
.cpv-topo__interno{
  max-width:var(--cpv-largura);
  margin:0 auto;
  padding:9px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.cpv-topo__marca{ display:flex; align-items:center; }
.cpv-topo__marca img{ width:120px; height:55px; }

/* ---------- topo da página ---------- */

.cpv-heroi{
  position:relative;
  padding:52px 0 46px;
  text-align:center;
  background:
    radial-gradient(48% 34% at 12% 6%, rgba(36,245,210,.10), transparent 70%),
    radial-gradient(44% 30% at 88% 14%, rgba(254,42,91,.10), transparent 70%);
}
.cpv-heroi__rotulo{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cpv-texto-3); margin:0 0 20px;
}
.cpv-heroi__titulo{
  font-size:clamp(38px, 11vw, 76px);
  font-weight:300;
  letter-spacing:-.05em;
  line-height:1.04;
  margin:0 0 26px;
}
.cpv-heroi__titulo strong{
  font-weight:800;
  background:var(--cpv-gradiente);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:block;
}
.cpv-heroi__promessa{
  font-size:clamp(18px, 4.4vw, 26px);
  font-weight:600; line-height:1.3; letter-spacing:-.02em;
  max-width:620px; margin:0 auto 12px;
}
/* quebra so no desktop, antes do "3 Dias", para o numero nao ficar sozinho no
   fim da linha. No celular o texto corre livre. */
.cpv-heroi__quebra{ display:none; }
.cpv-heroi__ressalva{
  font-style:italic; color:var(--cpv-texto-2);
  font-size:15px; max-width:560px; margin:0 auto 32px;
}
.cpv-heroi__palco{ max-width:400px; margin:0 auto; }
.cpv-heroi__aviso{
  color:var(--cpv-texto-2); font-size:14px; margin:18px auto 26px;
}

/* ---------- hero em duas colunas, só no desktop ----------
   Texto à esquerda, vídeo à direita. No celular nada muda: a regra inteira mora
   dentro do `min-width`, e a ordem do HTML continua sendo a de lá (rótulo,
   título, promessa, ressalva, vídeo, aviso, chamada).

   A troca é feita por área de grade, e não movendo elementos no HTML. Mover
   mudaria a ordem no celular também, que é justamente o que não pode. */
@media (min-width: 900px){
  .cpv-heroi{ padding:62px 0 54px; }
  .cpv-heroi .cpv-conteudo{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(280px, 336px);
    grid-template-areas:
      "rotulo   video"
      "titulo   video"
      "promessa video"
      "ressalva video"
      "chamada  video"
      ".        aviso";
    column-gap:56px;
    align-content:center;
    text-align:left;
  }
  .cpv-heroi__rotulo{ grid-area:rotulo; }
  .cpv-heroi__titulo{ grid-area:titulo; }
  .cpv-heroi__promessa{ grid-area:promessa; margin:0 0 12px; max-width:none; }
  .cpv-heroi__ressalva{ grid-area:ressalva; margin:0 0 26px; max-width:none; }
  .cpv-heroi__palco{ grid-area:video; align-self:center; max-width:none; margin:0; }
  .cpv-heroi__aviso{ grid-area:aviso; margin:14px 0 0; text-align:center; }
  /* o botão passa a ter a largura do próprio texto: esticado em meia tela ele
     vira uma barra de 500 px que não parece mais um botão */
  .cpv-heroi .cpv-cta--bloco{
    grid-area:chamada;
    justify-self:start;
    /* `start`, e nao o `stretch` padrao da grade: o video ocupa as linhas da
       esquerda e a sobra de altura dele e dividida entre elas. Esticado, o
       botao chegava a 98 px, a altura de duas linhas de texto. */
    align-self:start;
    display:inline-block;
    width:auto; max-width:none; margin:6px 0 0;
  }
  .cpv-heroi__quebra{ display:inline; }
}

/* ---------- moldura de vídeo 9:16 ---------- */
/* Dois usos. Nos depoimentos, capa clicável: o YouTube só é baixado no
   clique. Na VSL do topo, desde 25/09/2026, SEM capa: a moldura segura o
   player da ConverteAI, que carrega junto com a página, a pedido do cliente
   (ver NOTAS.md, adendo 8). O `aspect-ratio` reserva a altura antes de o
   player montar, e é o que evita salto de layout. */

.cpv-video{
  position:relative;
  aspect-ratio:9/16;
  background:#000;
  border-radius:var(--cpv-raio);
  overflow:hidden;
  border:1px solid var(--cpv-borda-forte);
}
.cpv-video picture{ width:100%; height:100%; }
.cpv-video img{
  width:100%; height:100%; object-fit:cover;
}
.cpv-video iframe,
.cpv-video vturb-smartplayer{ width:100%; height:100%; border:0; display:block; }
.cpv-video__botao{
  position:absolute; inset:0;
  width:100%; border:0; padding:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  color:var(--cpv-texto);
  font-family:inherit;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
}
/* mesma cor dos botoes de compra: o degrade ciano e magenta ficava cinza no meio */
.cpv-video__disco{
  width:66px; height:66px; border-radius:50%;
  background:linear-gradient(135deg, #ff3d6e 0%, #e8144c 50%, #c70940 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(36,245,210,.2), inset 0 1px 0 rgba(255,255,255,.28);
}
.cpv-video__disco svg{ width:26px; height:26px; fill:#fff; margin-left:4px; }
.cpv-video__legenda{
  font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

/* ---------- tarja rolante de urgência ---------- */

/* Passa sozinha e sem fim, com a mecanica do carrossel dos modulos e da faixa
   da home: o grupo aparece duas vezes no trilho e a animacao anda metade dele,
   entao o quadro final e igual ao inicial e nao ha emenda.

   Tres camadas, e nao uma, por causa do gate de mobile (docs/testa_mobile.py):
   - .cpv-tarja segura o fundo e o brilho, com overflow:hidden para a luz que
     atravessa nao aumentar a area rolavel;
   - __rolo e quem rola (overflow-x:auto). O que esta fora da tela continua
     alcancavel arrastando, e e isso que o gate aceita. Com `hidden` aqui a
     tarja reprovava, e foi por isso que ela ficou parada ate 17/09/2026;
   - __trilho e o que anda. */
.cpv-tarja{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(36,245,210,.08), rgba(254,42,91,.08)),
    var(--cpv-fundo-2);
}
/* o brilho: uma mancha de luz larga e suave que vai e volta devagar */
.cpv-tarja::before{
  content:"";
  position:absolute; top:-60%; bottom:-60%; left:0;
  width:40%;
  background:radial-gradient(closest-side, rgba(36,245,210,.22), rgba(254,42,91,.12) 60%, transparent);
  animation:cpv-tarja-luz 10s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes cpv-tarja-luz{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(200%); }
}
.cpv-tarja__rolo{
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.cpv-tarja__rolo::-webkit-scrollbar{ display:none; }
.cpv-tarja__trilho{
  display:flex; width:max-content; margin:0 auto;
  animation:cpv-desliza 60s linear infinite;
}
.cpv-tarja:hover .cpv-tarja__trilho{ animation-play-state:paused; }
.cpv-tarja__grupo{ display:flex; align-items:center; padding:14px 0; }
.cpv-tarja__item{
  display:flex; align-items:center;
  white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cpv-texto);
}
/* separador: um ponto com o degrade da marca */
.cpv-tarja__item::after{
  content:"";
  flex:0 0 5px; height:5px; margin:0 28px;
  border-radius:50%;
  background:var(--cpv-gradiente);
}

/* ---------- seção ---------- */

.cpv-secao{ padding:74px 0; }
.cpv-secao--linha{ border-top:1px solid var(--cpv-borda); }
.cpv-secao--ciano{
  background:radial-gradient(50% 40% at 50% 0%, rgba(36,245,210,.07), transparent 70%);
}
.cpv-secao--magenta{
  background:radial-gradient(50% 40% at 50% 0%, rgba(254,42,91,.07), transparent 70%);
}
.cpv-secao__rotulo{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cpv-ciano); text-align:center; margin:0 0 14px;
}
.cpv-secao__titulo{
  font-size:clamp(27px, 6.4vw, 46px);
  font-weight:300; letter-spacing:-.045em; line-height:1.1;
  text-align:center; margin:0 0 18px;
}
.cpv-secao__titulo strong{
  font-weight:800;
  background:var(--cpv-gradiente);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpv-secao__titulo--menor{ font-size:clamp(22px, 5vw, 30px); margin:46px 0 26px; }
.cpv-secao__linha{
  text-align:center; color:var(--cpv-texto-2);
  font-size:16.5px; max-width:720px; margin:0 auto 40px;
}
.cpv-secao__centro{ text-align:center; }
.cpv-secao__acao{ margin:36px 0 0; }
.cpv-secao__linha strong{ color:var(--cpv-texto); font-weight:600; }
.cpv-secao__miolo{ max-width:820px; margin:0 auto; }
.cpv-secao__miolo p{ color:var(--cpv-texto-2); font-size:16.5px; }
.cpv-secao__miolo strong{ color:var(--cpv-texto); font-weight:650; }
.cpv-secao__fecho{
  text-align:center; font-size:19px; font-weight:600; margin:34px 0 0;
}

/* ---------- grade genérica de cartões ---------- */

.cpv-grade{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.cpv-grade--dupla{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.cpv-grade--tripla{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.cpv-grade--espaco{ margin-top:36px; }

/* ---------- carrossel dos módulos ---------- */
/* Namespace: cpv-carrossel. Registrado em docs/css-namespaces.md.

   Passa sozinho e sem fim, mostrando até cinco capas por vez, com as bordas
   sumindo num degradê.

   Duas decisões que não são estéticas:

   1. `overflow-x:auto`, e não `hidden`. O que sai da tela continua alcançável
      arrastando, então o carrossel não esconde conteúdo de quem não espera a
      volta, de quem usa teclado ou de quem desligou animação. O gate de mobile
      do projeto (docs/testa_mobile.py) também só aceita conteúdo fora da tela
      quando existe um ancestral que rola de verdade, e com `hidden` os onze
      cartões contariam como cortados. A barra é escondida por CSS.

   2. O eco é um SEGUNDO trilho, e não uma cópia dentro do mesmo container.
      O laço sem salto precisa da lista duplicada, mas duplicar dentro de
      `#cpv-modulos` faria docs/pre_renderiza.py gravar 22 cartões no HTML
      servido, e o crawler leria o currículo duas vezes. Assim o HTML servido
      tem os onze de verdade e o eco nasce vazio, preenchido pelo pagina.js. */

/* Ele é irmão do .cpv-conteudo, e não filho, para ocupar a largura da tela:
   as capas ficam maiores sem mudar quantas aparecem. Sair pela largura em
   `100vw` seria mais curto e está errado, porque `100vw` inclui a barra de
   rolagem e sobra alguns pixels de rolagem horizontal na página inteira. */
.cpv-carrossel{
  --cpv-carrossel-vis: 5;      /* capas visíveis ao mesmo tempo */
  --cpv-carrossel-vao: 14px;
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* o degradê come as pontas, para os cartões entrarem e saírem sem corte seco */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
}
.cpv-carrossel::-webkit-scrollbar{ display:none; }

.cpv-carrossel__pista{ display:flex; width:max-content; }
.cpv-carrossel__trilho{ display:flex; }

/* `100cqw` é a largura do próprio carrossel. Sem container query a largura em
   porcentagem se resolveria contra o trilho, que é a soma dos cartões, e a
   conta ficaria circular. O `flex` de cima é o que vale se `cqw` não existir. */
.cpv-carrossel__trilho > .cpv-modulo{
  flex: 0 0 168px;
  flex-basis: calc(100cqw / var(--cpv-carrossel-vis) - var(--cpv-carrossel-vao));
  margin-right: var(--cpv-carrossel-vao);
}

/* O laço fecha porque a pista tem os cartões DUAS vezes: andar metade da pista
   é andar exatamente uma lista, e o quadro final é idêntico ao inicial.
   A classe só entra pelo pagina.js, depois que o eco existe; sem JavaScript a
   pista fica parada e o carrossel vira uma faixa que rola na mão. */
.cpv-carrossel.is-rodando .cpv-carrossel__pista{
  animation: cpv-desliza var(--cpv-carrossel-tempo, 44s) linear infinite;
  will-change: transform;
}
@keyframes cpv-desliza{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* para quando a pessoa quer ler, e enquanto ela arrasta */
.cpv-carrossel.is-rodando:hover .cpv-carrossel__pista,
.cpv-carrossel.is-rodando:focus-within .cpv-carrossel__pista,
.cpv-carrossel.is-parado .cpv-carrossel__pista{ animation-play-state: paused; }

@media (max-width: 900px){ .cpv-carrossel{ --cpv-carrossel-vis: 3; } }
@media (max-width: 560px){ .cpv-carrossel{ --cpv-carrossel-vis: 2; } }

@media (prefers-reduced-motion: reduce){
  .cpv-carrossel.is-rodando .cpv-carrossel__pista{ animation: none; }
}

/* ---------- cartão de conteúdo ---------- */

.cpv-cartao{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:26px 24px;
}
.cpv-cartao__emoji{ font-size:30px; line-height:1; display:block; margin-bottom:14px; }
.cpv-cartao__marca{
  color:var(--cpv-ciano); font-weight:700; font-size:15px;
  display:block; margin-bottom:8px;
}
.cpv-cartao h3{
  font-size:18px; letter-spacing:-.02em; margin:0 0 9px;
}
.cpv-cartao p{ color:var(--cpv-texto-2); font-size:15px; margin:0; }
.cpv-cartao--objecao{ border-color:rgba(254,42,91,.2); }
.cpv-cartao--objecao h3{ color:var(--cpv-magenta); font-size:16.5px; }
.cpv-cartao--bonus{
  border-color:rgba(36,245,210,.22);
  background:linear-gradient(160deg, rgba(36,245,210,.07), var(--cpv-superficie) 60%);
}
.cpv-cartao--centro{ text-align:center; }
.cpv-cartao--centro .cpv-cartao__emoji{ margin-left:auto; margin-right:auto; }

/* ---------- contador de alunos ---------- */

.cpv-contador{
  display:inline-flex; align-items:baseline; gap:10px;
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:14px 30px;
  margin-bottom:44px;
}
.cpv-contador__valor{
  font-size:clamp(28px, 7vw, 38px); font-weight:650;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.cpv-contador__valor::before{ content:"+"; color:var(--cpv-ciano); }
.cpv-contador__rotulo{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cpv-texto-2);
}

/* ---------- placar de euros e dias ---------- */

.cpv-placar{
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin-bottom:34px;
}
.cpv-placar__bloco{ text-align:center; }
.cpv-placar__valor{
  display:block;
  font-size:clamp(40px, 12vw, 78px); font-weight:250;
  letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--cpv-gradiente);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpv-placar__rotulo{
  display:block; margin-top:8px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cpv-texto-3);
}
.cpv-placar__risco{ font-size:30px; font-weight:200; color:var(--cpv-texto-3); }

/* ---------- prints de resultado ---------- */

/* Flex, e nao grade: sao 14 prints, e com cinco por linha a ultima fica com
   quatro. Na grade eles encostariam na esquerda; aqui a linha incompleta
   centraliza sozinha. As colunas mudam nos mesmos pontos da grade antiga
   (2, 3, 4 e 5), no bloco responsivo do fim do arquivo. */
.cpv-prova{
  --cpv-prova-col: 2;
  --cpv-prova-vao: 12px;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--cpv-prova-vao);
}
.cpv-prova__figura{
  flex:0 0 calc((100% - (var(--cpv-prova-col) - 1) * var(--cpv-prova-vao)) / var(--cpv-prova-col));
  margin:0;
  border-radius:var(--cpv-raio-p);
  overflow:hidden;
  border:1px solid var(--cpv-borda);
  background:var(--cpv-fundo-2);
}
.cpv-prova__figura img{ width:100%; height:auto; }

.cpv-prova__videos{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  max-width:620px; margin:0 auto 44px;
}

/* ---------- módulos do currículo ---------- */

.cpv-modulo{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.cpv-modulo__capa{ display:block; background:#000; }
.cpv-modulo__capa img{ width:100%; height:auto; }
.cpv-modulo__texto{ padding:16px 18px 22px; }
/* O numero e so orientacao; quem vende o modulo e o titulo. A pilula cheia
   disputava o olho com ele, entao virou um contorno discreto. */
.cpv-modulo__num{
  display:inline-block;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cpv-texto-3);
  border:1px solid var(--cpv-borda-forte);
  border-radius:999px; padding:2px 10px; margin-bottom:12px;
}
/* Tamanho pela largura do CARTAO, e nao da tela: o carrossel mostra cinco
   cartoes a partir de 901 px, entao logo acima desse ponto eles sao estreitos.
   `100cqw` e a largura do carrossel, que e container; dividido pelas capas
   visiveis da a largura de um cartao. A primeira linha vale onde `cqw` nao
   existe. */
.cpv-modulo__chapeu{
  display:block; color:var(--cpv-texto-2); line-height:1.35;
  font-size:14px;
  font-size:clamp(12px, calc(100cqw / var(--cpv-carrossel-vis, 5) * .038), 14px);
}
.cpv-modulo h3{
  font-weight:800; line-height:1.12; letter-spacing:-.025em;
  color:var(--cpv-magenta); margin:3px 0 0;
  overflow-wrap:break-word;
  font-size:19px;
  font-size:clamp(15px, calc(100cqw / var(--cpv-carrossel-vis, 5) * .062), 22px);
}
.cpv-modulo--ciano h3{ color:var(--cpv-ciano); }

/* ---------- etapa do método ---------- */

.cpv-etapa{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:26px 24px;
}
.cpv-etapa__emoji{ font-size:28px; line-height:1; display:block; margin-bottom:12px; }
.cpv-etapa h3{
  font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cpv-ciano); margin:0 0 4px;
}
.cpv-etapa__rotulo{
  color:var(--cpv-texto-3); font-size:13px; margin:0 0 12px;
}
.cpv-etapa ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.cpv-etapa li{
  position:relative; padding-left:20px;
  color:var(--cpv-texto-2); font-size:14.5px; line-height:1.5;
}
.cpv-etapa li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:var(--cpv-gradiente);
}

/* ---------- bloco da autoridade ---------- */

.cpv-autora{
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
}
.cpv-autora__foto{
  border-radius:var(--cpv-raio); overflow:hidden;
  border:1px solid var(--cpv-borda);
  position:sticky; top:80px;
}
.cpv-autora__foto img{ width:100%; height:auto; }
.cpv-autora__texto p{ color:var(--cpv-texto-2); font-size:16px; }
.cpv-autora__texto strong{ color:var(--cpv-texto); font-weight:650; }
.cpv-autora__assinatura{
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--cpv-borda);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cpv-texto-3);
}

/* ---------- esqueça isto / conquiste aquilo ---------- */

/* Duas colunas lado a lado, como contras e pros: o que fica para tras em
   magenta, o que a pessoa conquista em ciano. A coluna boa tem a borda mais
   acesa e um halo, para o olho terminar nela. No celular empilham, na mesma
   ordem da leitura. Os icones sao SVG, e nao os caracteres de marca e visto:
   a Poppins nao tem esses dois, e cada sistema os desenharia com outra fonte. */
.cpv-troca{
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
.cpv-troca__coluna{
  border-radius:24px;
  padding:32px 30px 26px;
  background:linear-gradient(180deg, rgba(254,42,91,.07), rgba(255,255,255,.015) 42%), var(--cpv-fundo-2);
  border:1px solid rgba(254,42,91,.2);
}
.cpv-troca__coluna--boa{
  background:linear-gradient(180deg, rgba(36,245,210,.09), rgba(255,255,255,.015) 42%), var(--cpv-fundo-2);
  border-color:rgba(36,245,210,.3);
  box-shadow:0 30px 70px -40px rgba(36,245,210,.45);
}
.cpv-troca__titulo{
  font-size:clamp(22px, 2.5vw, 27px);
  font-weight:300; letter-spacing:-.035em; line-height:1.15;
  margin:0 0 20px;
}
.cpv-troca__titulo strong{ font-weight:800; color:var(--cpv-magenta); }
.cpv-troca__coluna--boa .cpv-troca__titulo strong{ color:var(--cpv-ciano); }
.cpv-troca__lista{ list-style:none; margin:0; padding:0; }
.cpv-troca__item{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.cpv-troca__sinal{
  flex:0 0 30px; width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cpv-magenta);
  background:rgba(254,42,91,.12);
  box-shadow:inset 0 0 0 1px rgba(254,42,91,.38);
}
.cpv-troca__sinal svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.cpv-troca__coluna--boa .cpv-troca__sinal{
  color:var(--cpv-ciano);
  background:rgba(36,245,210,.12);
  box-shadow:inset 0 0 0 1px rgba(36,245,210,.42);
}
.cpv-troca__item h3{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin:4px 0 3px; }
.cpv-troca__coluna--ruim .cpv-troca__item h3{ color:var(--cpv-texto-2); }
.cpv-troca__item p{ color:var(--cpv-texto-2); font-size:14.5px; line-height:1.5; margin:0; }
@media (min-width:861px){
  .cpv-troca{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
  .cpv-troca__coluna{ padding:38px 36px 30px; }
}

/* ---------- jornada e passos ---------- */

.cpv-jornada{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  counter-reset:cpv-jornada;
}
.cpv-jornada__etapa{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio);
  padding:24px 22px;
  position:relative;
}
.cpv-jornada__etapa::before{
  counter-increment:cpv-jornada;
  content:counter(cpv-jornada);
  position:absolute; top:-14px; left:22px;
  width:30px; height:30px; border-radius:50%;
  background:var(--cpv-gradiente);
  color:#050505; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.cpv-jornada__quando{
  display:block; margin:8px 0 6px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cpv-ciano);
}
.cpv-jornada__etapa h3{ font-size:19px; margin:0 0 8px; }
.cpv-jornada__etapa p{ color:var(--cpv-texto-2); font-size:15px; margin:0; }

/* ---------- oferta ---------- */

.cpv-oferta{
  max-width:640px; margin:0 auto;
  background:linear-gradient(160deg, rgba(36,245,210,.06), rgba(254,42,91,.06)), var(--cpv-fundo-2);
  border:1px solid var(--cpv-borda-forte);
  border-radius:26px;
  padding:34px 28px 30px;
  text-align:center;
}
.cpv-oferta__pilha{ list-style:none; margin:0 0 26px; padding:0; text-align:left; }
.cpv-oferta__pilha li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0;
  border-bottom:1px dashed var(--cpv-borda);
  font-size:15px; color:var(--cpv-texto-2);
}
.cpv-oferta__pilha b{ color:var(--cpv-texto); font-weight:650; white-space:nowrap; }
.cpv-oferta__soma{
  display:flex; justify-content:space-between; gap:16px;
  font-size:16.5px; font-weight:700; padding:14px 0 0;
}
.cpv-oferta__soma span:last-child{ color:var(--cpv-magenta); }
.cpv-oferta__aviso{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cpv-magenta); margin:26px 0 6px;
}
/* "De R$ 3.000,00 por apenas", a frase da pagina do cliente no ar, desde
   25/09/2026. Sem `line-through`: ele riscaria a frase inteira, e na pagina
   dele ela nao e tachada. */
.cpv-oferta__ancora{
  font-size:13.5px; color:var(--cpv-texto-3);
  margin:0 0 4px;
}
.cpv-oferta__parcela{
  font-size:clamp(34px, 9vw, 58px); font-weight:250;
  letter-spacing:-.05em; line-height:1.05; margin:6px 0 4px;
  background:var(--cpv-gradiente);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpv-oferta__parcela small{ font-size:.6em; }
.cpv-oferta__avista{ color:var(--cpv-texto-2); font-size:16px; margin:0 0 24px; }
/* Banner de ponta a ponta no topo do cartao: a margem negativa anula o padding
   dele, nos mesmos valores (34 e 28 no desktop, 28 e 18 no celular). O raio de
   cima e o do cartao menos a borda de 1 px, para as curvas coincidirem. */
.cpv-oferta__banner{
  position:relative;
  margin:-34px -28px 26px;
  border-radius:25px 25px 0 0;
  overflow:hidden;
  aspect-ratio:16 / 7;
  background:#000;
}
.cpv-oferta__banner img{ width:100%; height:100%; object-fit:cover; }
/* a base do banner some no fundo do cartao, sem corte seco antes da lista */
.cpv-oferta__banner::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(180deg, transparent, var(--cpv-fundo-2));
  pointer-events:none;
}
.cpv-oferta__bump{
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--cpv-borda);
  text-align:left;
}
.cpv-oferta__bump h3{ font-size:15px; margin:0 0 6px; color:var(--cpv-ciano); }
.cpv-oferta__bump p{ color:var(--cpv-texto-2); font-size:14px; margin:0; }
.cpv-oferta__selo{ color:var(--cpv-texto-3); font-size:13px; margin:18px 0 0; }
.cpv-oferta__garantia{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--cpv-borda);
  color:var(--cpv-texto-2); font-size:14.5px;
}

/* ---------- duas escolhas ---------- */

.cpv-escolha{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.cpv-escolha__lado{
  border:1px solid rgba(254,42,91,.24);
  border-radius:var(--cpv-raio);
  padding:28px 24px;
  background:var(--cpv-superficie);
}
.cpv-escolha__lado--boa{ border-color:rgba(36,245,210,.3); }
.cpv-escolha__lado h3{
  font-size:16px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cpv-magenta); margin:0 0 10px;
}
.cpv-escolha__lado--boa h3{ color:var(--cpv-ciano); }
.cpv-escolha__lado p{ color:var(--cpv-texto-2); font-size:15.5px; margin:0; }

/* ---------- perguntas frequentes ---------- */

.cpv-faq{ max-width:760px; margin:0 auto; }
.cpv-faq details{
  background:var(--cpv-superficie);
  border:1px solid var(--cpv-borda);
  border-radius:var(--cpv-raio-p);
  margin-bottom:10px;
  overflow:hidden;
}
.cpv-faq summary{
  cursor:pointer;
  padding:18px 20px;
  font-weight:600; font-size:15.5px;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.cpv-faq summary::-webkit-details-marker{ display:none; }
.cpv-faq summary::after{
  content:"+"; color:var(--cpv-ciano);
  font-size:22px; font-weight:300; line-height:1; flex:0 0 auto;
}
.cpv-faq details[open] summary::after{ content:"−"; }
.cpv-faq__resposta{
  padding:0 20px 18px;
  color:var(--cpv-texto-2); font-size:15px;
}

/* ---------- chamada para ação ---------- */

/* Cor: o magenta da marca, do claro ao profundo. O degrade antigo ia do ciano
   ao magenta, e as duas cores misturadas em linha reta passam por um cinza no
   meio (#91909a), justamente atras do texto. Dentro da mesma familia o degrade
   fica saturado de ponta a ponta, e o texto branco tem 4,5:1 no meio do botao.
   O ciano continua no contorno fino.

   Dois movimentos, os dois so de composicao (nada de layout nem repintura):
   - respiro: cresce 3% e volta, em 3,2 s. Usa a propriedade `scale`, e nao
     `transform`, para somar com o translateY do hover em vez de apaga-lo;
   - brilho: uma faixa de luz atravessa o botao a cada 3,6 s, ATRAS do texto.
     O `isolation` cria o contexto de empilhamento, e o `z-index:-1` poe a
     faixa entre o fundo do botao e as letras. */
.cpv-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-block;
  background:linear-gradient(135deg, #ff3d6e 0%, #e8144c 50%, #c70940 100%);
  color:#fff;
  text-decoration:none;
  text-shadow:0 1px 2px rgba(80,0,20,.35);
  font-weight:700; font-size:16.5px; letter-spacing:.01em;
  padding:18px 34px;
  border-radius:16px;
  border:0; cursor:pointer;
  font-family:inherit;
  text-align:center;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:
    0 14px 34px -10px rgba(254,42,91,.6),
    0 0 0 1px rgba(36,245,210,.2),
    inset 0 1px 0 rgba(255,255,255,.28);
  animation:cpv-respira 3.2s ease-in-out infinite;
}
.cpv-cta::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:40%;
  z-index:-1;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform:translateX(-140%) skewX(-20deg);
  animation:cpv-brilho 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cpv-respira{
  0%, 100%{ scale:1; }
  50%{ scale:1.03; }
}
@keyframes cpv-brilho{
  0%{ transform:translateX(-140%) skewX(-20deg); }
  45%, 100%{ transform:translateX(360%) skewX(-20deg); }
}
.cpv-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:
    0 18px 42px -10px rgba(254,42,91,.75),
    0 0 0 1px rgba(36,245,210,.38),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.cpv-cta--bloco{ display:block; width:100%; max-width:520px; margin:0 auto; }
.cpv-cta--topo{
  font-size:12px; padding:10px 18px; border-radius:12px;
  box-shadow:0 0 0 1px rgba(36,245,210,.2), inset 0 1px 0 rgba(255,255,255,.28);
}
.cpv-cta__pos{
  text-align:center; color:var(--cpv-texto-3);
  font-size:14px; margin:14px 0 0;
}

/* ---------- barra fixa de chamada ---------- */

.cpv-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:rgba(5,5,5,.94);
  border-top:1px solid var(--cpv-borda);
  padding:11px 16px;
  transition:transform .25s ease;
}
.cpv-barra.is-oculta{ transform:translateY(115%); }
.cpv-barra__interno{
  max-width:var(--cpv-largura); margin:0 auto;
  display:flex; align-items:center; gap:16px;
}
.cpv-barra__preco{ font-size:13.5px; color:var(--cpv-texto-2); }
.cpv-barra__preco b{ color:var(--cpv-texto); font-size:15.5px; display:block; }
.cpv-barra .cpv-cta{
  margin-left:auto; padding:14px 26px; font-size:15px;
  box-shadow:
    0 8px 24px -10px rgba(254,42,91,.6),
    0 0 0 1px rgba(36,245,210,.2),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------- rodapé ---------- */

.cpv-rodape{
  border-top:1px solid var(--cpv-borda);
  padding:46px 0 40px;
  text-align:center;
  color:var(--cpv-texto-3);
  font-size:13.5px;
}
/* o logo pequeno no lugar do nome em texto. Seletor com o rodape na frente
   para vencer o `.cpv-rodape p`, que zera a margem de todo paragrafo daqui */
.cpv-rodape .cpv-rodape__marca{ display:flex; justify-content:center; margin:0 0 22px; }
.cpv-rodape__marca img{ width:110px; height:auto; }
.cpv-rodape__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  margin:0 0 22px; padding:0; list-style:none;
}
.cpv-rodape__links a{ color:var(--cpv-texto-2); text-decoration:none; }
.cpv-rodape__links a:hover{ color:var(--cpv-ciano); }
.cpv-rodape p{ margin:0 0 8px; }
.cpv-rodape__aviso{
  max-width:640px; margin:20px auto 0;
  font-size:12.5px; line-height:1.6; color:var(--cpv-texto-3);
}

/* ---------- responsivo ---------- */

@media (min-width:500px){ .cpv-prova{ --cpv-prova-col: 3; } }
@media (min-width:660px){ .cpv-prova{ --cpv-prova-col: 4; } }
@media (min-width:940px){ .cpv-prova{ --cpv-prova-col: 5; } }

@media (min-width:761px){
  /* `dupla` e `tripla` fixas no desktop: com auto-fit as grades de quatro
     cartoes davam 3 + 1, e a de seis dava 4 + 2 */
  .cpv-grade--dupla{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cpv-grade--tripla{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cpv-secao__miolo p{ text-align:center; }
  .cpv-oferta__bump{ text-align:center; }
}

@media (max-width:760px){
  body{ font-size:15.5px; padding-bottom:76px; }
  .cpv-conteudo{ padding:0 16px; }
  .cpv-heroi{ padding:40px 0 36px; }
  .cpv-secao{ padding:54px 0; }
  .cpv-autora{ grid-template-columns:1fr; gap:22px; }
  .cpv-autora__foto{ position:static; }
  .cpv-oferta{ padding:28px 18px 24px; }
  .cpv-oferta__banner{ margin:-28px -18px 22px; }
  .cpv-oferta__pilha li{ font-size:14px; }
  .cpv-cartao{ padding:22px 20px; }
  .cpv-etapa{ padding:22px 20px; }
  .cpv-placar{ gap:16px; }
  /* Tamanho pela largura da tela: a Poppins e mais larga que a fonte do sistema,
     e a chamada inteira (39 caracteres em caixa alta) pede 349 px a 15 px, o que
     quebrava em duas linhas em todo celular. 3,5vw cabe numa linha de 320 a 430 px,
     medido nas larguras de glifo do proprio arquivo da fonte. */
  .cpv-cta{ font-size:clamp(11px, 3.5vw, 15px); padding:16px 12px; width:100%; }
  /* no cartao de oferta sobram 36 px a menos de largura, pelo padding dele */
  .cpv-oferta .cpv-cta{ font-size:clamp(10.5px, 3.15vw, 14.5px); }
  .cpv-cta--topo{ width:auto; font-size:11.5px; padding:9px 14px; }
  .cpv-barra__preco{ display:none; }
  .cpv-barra .cpv-cta{ margin-left:0; font-size:14px; padding:14px 10px; }
  .cpv-topo__marca img{ width:96px; height:44px; }
}

@media (max-width:380px){
  .cpv-barra .cpv-cta{ font-size:13px; letter-spacing:-.01em; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .cpv-cta{ transition:none; animation:none; }
  .cpv-cta::after{ animation:none; display:none; }
  .cpv-cta:hover{ transform:none; }
  .cpv-topo,.cpv-barra{ transition:none; }
  .cpv-tarja::before, .cpv-tarja__trilho{ animation:none; }
  .cpv-tarja__grupo[aria-hidden="true"]{ display:none; }
}