/* Gabs Resumos — tokens extraídos do PDF do e-book. Ver DESIGN.md */

:root{
  --violeta:#5D17EB;
  --violeta-esc:#4711B8;
  --violeta-cl:#7B45F0;

  --azul:#CFEDFF;
  --verde:#E4F7DD;
  --lilas:#E3CCF1;
  --coral:#F79382;
  --coral-cl:#FDE3E3;

  --tinta:#1A1626;
  --corpo:#46405A;
  --suave:#6E6880;
  --tenue:#9C96AC;
  --borda:#E6E1F0;
  --fundo:#FFFFFF;
  --fundo-alt:#F7F4FD;
  --escuro:#241056;

  --estrela:#F59E0B;

  --medida:60ch;
  --raio:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--fundo);
  color:var(--corpo);
  font-family:Jost,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;color:var(--tinta);letter-spacing:-.02em;text-wrap:balance;}
h1{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.03;font-weight:700;}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;font-weight:700;}
h3{font-size:1.18rem;font-weight:600;line-height:1.3;}
p{margin:0;max-width:var(--medida);}
strong{color:var(--tinta);font-weight:600;}
img{max-width:100%;height:auto;display:block;}

a{color:var(--violeta);}
a:hover{color:var(--violeta-esc);}
:focus-visible{outline:3px solid var(--violeta);outline-offset:3px;border-radius:4px;}

.hand{font-family:Mali,"Comic Sans MS",cursive;}

.container{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem);}
.container.estreito{max-width:720px;}
.centro{text-align:center;}
.centro p{margin-left:auto;margin-right:auto;}

/* faixa lateral colorida — assinatura da marca, herdada do e-book */
.secao,.hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0;}
.borda-azul::before,.borda-verde::before,.borda-lilas::before,.borda-coral::before{
  content:"";position:absolute;inset:0 auto 0 0;width:10px;
}
.borda-azul::before{background:var(--azul);}
.borda-verde::before{background:var(--verde);}
.borda-lilas::before{background:var(--lilas);}
.borda-coral::before{background:var(--coral);}
@media(max-width:640px){
  .borda-azul::before,.borda-verde::before,.borda-lilas::before,.borda-coral::before{width:6px;}
}

.fundo-alt{background:var(--fundo-alt);}
.secao-escura{background:var(--escuro);}
.claro{color:#fff;}
.secao-escura .apoio{color:#CFC4EE;}

.faixa-topo{background:var(--escuro);color:#DCD2F7;text-align:center;padding:.7rem 1rem;font-size:.95rem;}

.sobrelinha{font-size:1.02rem;color:var(--violeta);margin-bottom:.45rem;}
.sobrelinha.claro{color:#B79EFF;}
.lead{font-size:1.16rem;color:var(--suave);}
.apoio{color:var(--suave);}
.micro{font-size:.9rem;color:var(--suave);display:flex;align-items:flex-start;gap:.45rem;}
/* o escudo acompanha a PRIMEIRA linha: com o texto quebrando em duas, o
   alinhamento central deixava o ícone boiando na altura da segunda */
.micro .ico-mini{flex-shrink:0;margin-top:.18em;}
.centro .micro{justify-content:center;}
.ico-mini{width:16px;height:16px;fill:none;stroke:var(--suave);stroke-width:1.8;}

/* HERO */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.hero-texto{display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start;}
.hero-capa img{border-radius:var(--raio);}
@media(max-width:840px){
  .hero-grid{grid-template-columns:1fr;}
  /* A capa continua vindo primeiro — ver o produto cedo é o que a página que vendeu
     fazia. Mas ela para de comer a tela inteira: com 34vh de teto, o título, a
     promessa e a troca 800 → 91 cabem na primeira dobra do celular, que é de onde
     vem a maior parte do tráfego. */
  .hero-capa{order:-1;max-width:420px;margin:0 auto;}
  .hero-capa img{max-height:28vh;width:auto;margin:0 auto;}
  .hero-texto{gap:.9rem;}
}

.beneficios{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.beneficios li{display:flex;align-items:flex-start;gap:.7rem;max-width:var(--medida);}
.beneficios svg{width:21px;height:21px;flex-shrink:0;margin-top:.18rem;fill:none;stroke:var(--violeta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* BOTÃO */
.botao{
  display:inline-block;background:linear-gradient(180deg,var(--violeta-cl),var(--violeta));
  color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;
  padding:1rem 2rem;border-radius:14px;
  box-shadow:0 4px 0 var(--violeta-esc),0 12px 26px -8px rgba(93,23,235,.45);
  transition:transform .12s ease,box-shadow .12s ease;
}
.botao:hover{color:#fff;transform:translateY(2px);box-shadow:0 2px 0 var(--violeta-esc),0 8px 18px -8px rgba(93,23,235,.45);}
.botao.largo{display:block;width:100%;text-align:center;}

.cabecalho-secao{margin-bottom:2rem;display:flex;flex-direction:column;gap:.5rem;}
.selo{
  display:inline-block;font-size:.95rem;font-weight:600;color:var(--violeta);
  background:var(--azul);padding:.25rem .85rem;border-radius:999px;
  vertical-align:middle;margin-left:.5rem;
}

/* AMOSTRAS */
.amostras{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.amostras figure{margin:0;}
.amostras img{
  border-radius:12px;border:1px solid var(--borda);
  box-shadow:0 2px 4px rgba(26,22,38,.05),0 14px 34px -14px rgba(26,22,38,.28);
}
@media(max-width:720px){.amostras{grid-template-columns:1fr;max-width:380px;margin:0 auto;}}

/* SISTEMAS */
.sistemas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.sistemas li{
  background:var(--fundo-alt);border:1px solid var(--borda);border-radius:12px;
  padding:.85rem 1.1rem;color:var(--tinta);font-weight:500;font-size:1rem;
}
@media(max-width:840px){.sistemas{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.sistemas{grid-template-columns:1fr;}}

/* AUTORA */
.autora{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.autora-foto img{border-radius:var(--raio);background:var(--azul);}
.autora-texto{display:flex;flex-direction:column;gap:.9rem;}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.6rem;}
.numeros div{display:flex;flex-direction:column;}
.numeros strong{font-size:1.6rem;color:var(--violeta);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.numeros span{font-size:.86rem;color:var(--suave);line-height:1.35;}
@media(max-width:840px){.autora{grid-template-columns:1fr;}.autora-foto{max-width:320px;}}

/* DEPOIMENTOS */
.depoimentos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
.depoimentos blockquote{
  margin:0;background:#fff;border-radius:var(--raio);padding:1.6rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.depoimentos p{font-size:1rem;line-height:1.6;}
.depoimentos cite{font-style:normal;font-weight:600;color:var(--tinta);font-size:.95rem;}
.estrelas{color:var(--estrela);letter-spacing:.12em;font-size:1.05rem;}
@media(max-width:840px){.depoimentos{grid-template-columns:1fr;}}

.nota-pendente{
  margin:1.6rem auto 0;text-align:center;font-family:Mali,cursive;
  color:#B79EFF;font-size:.95rem;max-width:none;
}

/* OFERTA */
.cartao-oferta{
  background:#fff;border:2px solid var(--borda);border-radius:22px;
  padding:clamp(1.8rem,4vw,2.8rem);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.cartao-oferta .sobrelinha{margin-bottom:.6rem;}
.preco-de{color:var(--tenue);text-decoration:line-through;font-size:1.05rem;}
.preco{font-size:clamp(2.8rem,7vw,3.8rem);font-weight:700;color:var(--tinta);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:.2rem 0 .4rem;}
.cartao-oferta .botao{margin-top:1.4rem;}
.pagamentos{margin-top:1rem;font-size:.9rem;color:var(--suave);}

.garantia{
  display:flex;gap:1.2rem;align-items:flex-start;margin-top:1.6rem;
  background:var(--verde);border-radius:18px;padding:1.6rem;
}
.garantia svg{width:44px;height:44px;flex-shrink:0;fill:none;stroke:#2E6B4F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.garantia h3{margin-bottom:.4rem;}

/* FAQ */
.faq{margin-top:1.8rem;display:flex;flex-direction:column;gap:.8rem;}
.faq details{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:1.1rem 1.4rem;}
.faq summary{cursor:pointer;font-weight:600;color:var(--tinta);font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--violeta);font-size:1.5rem;line-height:1;font-weight:400;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin-top:.7rem;color:var(--suave);}

h2.grande{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.8rem;}
.secao-escura .botao{margin-top:1.6rem;margin-bottom:.9rem;}

footer{padding:1.8rem;text-align:center;font-size:.9rem;color:var(--suave);border-top:1px solid var(--borda);}
footer p{max-width:none;}

/* revelação na rolagem */
.revelar{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
.revelar.visivel{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .revelar{opacity:1;transform:none;transition:none;}
  .botao{transition:none;}
}

/* ---- blocos novos ---- */

.grande-texto{font-size:1.1rem;margin-bottom:1rem;}
.centro .grande-texto{margin-left:auto;margin-right:auto;}

/* selo flutuante sobre a capa */
.hero-capa{position:relative;}
.selo-flutuante{
  position:absolute;right:-6px;bottom:14px;
  background:var(--violeta);color:#fff;border-radius:50%;
  width:104px;height:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1px;
  box-shadow:0 10px 26px -8px rgba(93,23,235,.55);
  transform:rotate(-8deg);
}
.selo-flutuante strong{font-size:1.5rem;line-height:1;letter-spacing:-.02em;}
.selo-flutuante span{font-size:.68rem;line-height:1.2;opacity:.92;}
@media(max-width:840px){.selo-flutuante{width:88px;height:88px;right:0;}}

/* mecanismo */
.mecanismo{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;}
.passo{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:1.8rem;display:flex;flex-direction:column;gap:.6rem;position:relative;
}
.passo-num{
  width:38px;height:38px;border-radius:50%;background:var(--lilas);
  color:var(--violeta);font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:.2rem;
}
@media(max-width:760px){.mecanismo{grid-template-columns:1fr;}}

/* carrossel de depoimentos */
.carrossel{overflow:hidden;}
.carrossel-trilho{
  display:flex;gap:1.3rem;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.carrossel-trilho > blockquote{
  margin:0;background:#fff;border-radius:var(--raio);padding:1.7rem;
  display:flex;flex-direction:column;gap:.9rem;
  flex:0 0 calc((100% - 2.6rem)/3);
}
.carrossel-trilho p{font-size:1rem;line-height:1.6;flex-grow:1;}
.carrossel-trilho footer{display:flex;align-items:center;gap:.7rem;padding:0;border:0;}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--av,var(--azul));
  color:var(--violeta);font-weight:700;font-size:.9rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
}
.carrossel cite{font-style:normal;font-weight:600;color:var(--tinta);font-size:.95rem;}

.carrossel-controles{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.6rem;}
.seta{
  width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease;
}
.seta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);}
.seta svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.seta[disabled]{opacity:.3;cursor:default;}
.pontos{display:flex;gap:.45rem;}
.pontos button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .2s ease,width .2s ease;
}
.pontos button[aria-current="true"]{background:#fff;width:24px;border-radius:5px;}

@media(max-width:900px){.carrossel-trilho > blockquote{flex:0 0 calc((100% - 1.3rem)/2);}}
@media(max-width:620px){.carrossel-trilho > blockquote{flex:0 0 100%;}}

/* lista do que inclui */
.inclui{
  list-style:none;margin:1.4rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid var(--borda);width:100%;
  display:flex;flex-direction:column;gap:.6rem;text-align:left;
}
.inclui li{display:flex;align-items:flex-start;gap:.6rem;font-size:.98rem;color:var(--corpo);}
.inclui svg{width:19px;height:19px;flex-shrink:0;margin-top:.2rem;fill:none;stroke:#2E6B4F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* selo de garantia */
.selo-garantia{
  width:92px;height:92px;flex-shrink:0;border-radius:50%;
  background:#fff;border:3px dashed #2E6B4F;color:#2E6B4F;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1px;
}
.selo-garantia strong{font-size:1.7rem;line-height:1;letter-spacing:-.02em;}
.selo-garantia span{font-size:.66rem;line-height:1.2;font-weight:600;}
@media(max-width:620px){.garantia{flex-direction:column;align-items:center;text-align:center;}}

/* ---- preço: o risco é desenhado, não é text-decoration ---- */
.bloco-preco{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:.6rem 0 .2rem;}
.linha-de{display:inline-flex;align-items:baseline;gap:.5rem;position:relative;color:var(--tenue);font-size:1.15rem;}
.linha-de .valor{position:relative;display:inline-block;font-weight:500;}
.linha-de .valor::after{
  content:"";position:absolute;left:-4%;right:-4%;top:52%;height:2.5px;
  background:var(--coral);border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.65,0,.35,1) .25s;
}
.visivel .linha-de .valor::after{transform:scaleX(1);}
.economia{
  font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#B3491F;background:var(--coral-cl);padding:.25rem .7rem;border-radius:999px;margin-top:.5rem;
}
.parcelas{font-size:1rem;color:var(--suave);margin-top:.3rem;}
.parcelas strong{color:var(--tinta);}

/* números que contam */
.conta{font-variant-numeric:tabular-nums;}

/* botão magnético e pulso de atenção */
.botao{position:relative;overflow:hidden;}
.botao::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 48%,transparent 62%);
  transform:translateX(-120%);
}
.botao.brilhar::after{animation:brilho 1.1s ease-out;}
@keyframes brilho{to{transform:translateX(120%);}}

/* mockup de dispositivo desenhado em CSS, com a página real dentro */
.dispositivos{display:flex;align-items:flex-end;justify-content:center;gap:0;position:relative;}
.tablet{
  position:relative;background:#241056;border-radius:22px;padding:12px 10px;
  box-shadow:0 22px 50px -18px rgba(36,16,86,.55),0 2px 0 rgba(255,255,255,.15) inset;
  width:min(78%,340px);transform:rotate(-3deg);
}
.tablet img{border-radius:10px;display:block;width:100%;}
.celular{
  position:relative;background:#241056;border-radius:20px;padding:9px 6px;
  box-shadow:0 18px 40px -14px rgba(36,16,86,.55);
  width:min(34%,140px);margin-left:-9%;margin-bottom:-6%;transform:rotate(4deg);z-index:2;
}
.celular img{border-radius:12px;display:block;width:100%;}
.tablet::after,.celular::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:4px;width:28%;height:3px;border-radius:2px;background:rgba(255,255,255,.35);
}

/* reportagem / autoridade emprestada */
.reportagem{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
.recorte{
  background:#fff;border:1px solid var(--borda);border-radius:14px;padding:1.5rem;
  border-top:4px solid var(--azul);display:flex;flex-direction:column;gap:.55rem;
}
.recorte:nth-child(2){border-top-color:var(--verde);}
.recorte:nth-child(3){border-top-color:var(--lilas);}
.recorte h3{font-size:1.05rem;}
.recorte p{font-size:.96rem;line-height:1.58;}
@media(max-width:840px){.reportagem{grid-template-columns:1fr;}}

/* parallax leve */
.parallax{will-change:transform;}

/* barra fixa de compra no celular */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.97);border-top:1px solid var(--borda);
  padding:.7rem 1rem;display:none;align-items:center;gap:.8rem;
  box-shadow:0 -6px 22px -10px rgba(26,22,38,.35);
  transform:translateY(110%);transition:transform .3s ease;
}
.barra-fixa.ativa{transform:none;}
.barra-fixa .bf-preco{display:flex;flex-direction:column;line-height:1.15;}
.barra-fixa .bf-preco small{font-size:.72rem;color:var(--tenue);text-decoration:line-through;}
.barra-fixa .bf-preco strong{font-size:1.25rem;color:var(--tinta);}
.barra-fixa .botao{flex:1;padding:.85rem 1rem;font-size:1rem;text-align:center;}
@media(max-width:760px){.barra-fixa{display:flex;} body{padding-bottom:74px;}}

/* ---- corpo em camadas: montagem por rolagem ---- */
.corpo-camadas{
  position:relative;width:min(100%,340px);margin:0 auto;
  aspect-ratio:414/900;
}
.corpo-camadas img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1);
}
.corpo-camadas img.dentro{opacity:1;transform:none;}
.corpo-legenda{
  display:flex;justify-content:center;gap:1.1rem;flex-wrap:wrap;
  margin-top:1.4rem;font-size:.88rem;
}
.corpo-legenda span{display:flex;align-items:center;gap:.4rem;color:var(--suave);opacity:.4;transition:opacity .4s ease,color .4s ease;}
.corpo-legenda span.ativa{opacity:1;color:var(--tinta);font-weight:600;}
.corpo-legenda i{width:11px;height:11px;border-radius:50%;display:inline-block;}
@media(prefers-reduced-motion:reduce){
  .corpo-camadas img{opacity:1;transform:none;transition:none;}
  .corpo-legenda span{opacity:1;}
}

.mecanismo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.mecanismo-grid .mecanismo{grid-template-columns:1fr;}
@media(max-width:900px){.mecanismo-grid{grid-template-columns:1fr;}}

/* ---- video controlado pela rolagem ---- */
.palco-scrub{
  position:relative;width:min(100%,320px);margin:0 auto;
  aspect-ratio:620/1080;border-radius:var(--raio);overflow:hidden;
  background:#fff;
}
.palco-scrub img,.palco-scrub video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.palco-scrub video{opacity:0;transition:opacity .5s ease;}
.palco-scrub.pronto video{opacity:1;}
.palco-scrub.pronto img{opacity:0;transition:opacity .5s ease;}
.palco-scrub.estatico video{display:none;}

/* ---- PILARES: as quatro etiquetas logo abaixo do hero ----
   Rótulo curto + uma linha de apoio. Não repete a lista do hero: lá são frases que
   explicam, aqui é o que a pessoa lê de relance enquanto rola. */
.pilares-faixa{
  background:var(--fundo-alt);
  border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  padding:clamp(1.5rem,3.2vw,2.2rem) 0;
}
.pilares{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);
}
.pilares li{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;
  align-items:center;padding-left:1rem;border-left:3px solid var(--azul);
}
.pilares li:nth-child(2){border-left-color:var(--verde);}
.pilares li:nth-child(3){border-left-color:var(--lilas);}
.pilares li:nth-child(4){border-left-color:var(--coral);}
.pilares strong{font-size:1.02rem;line-height:1.22;color:var(--tinta);letter-spacing:-.015em;}
.pilar-apoio{grid-column:2;font-size:.85rem;line-height:1.4;color:var(--suave);}
.ico-estrela{width:20px;height:20px;fill:var(--estrela);stroke:none;flex-shrink:0;}
@media(max-width:900px){.pilares{grid-template-columns:repeat(2,1fr);gap:1.1rem 1.4rem;}}
@media(max-width:460px){.pilares{grid-template-columns:1fr;}}

/* ---- FIGURA DAS TRÊS CAMADAS (seção do mecanismo) ---- */
.corpo-figura{margin:0;display:flex;flex-direction:column;gap:.9rem;}
.corpo-figura img{width:100%;border-radius:var(--raio);}
.figura-legenda{
  display:flex;gap:.4rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--suave);
}
.figura-legenda span{flex:1;text-align:center;position:relative;padding-top:.85rem;}
.figura-legenda span::before{
  content:"";position:absolute;top:0;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:var(--coral);
}
.figura-legenda span:nth-child(2)::before{background:var(--lilas);}
.figura-legenda span:nth-child(3)::before{background:var(--azul);}

/* ---- PLACAR: 91 páginas · 13 sistemas · 83 ilustrações ---- */
.placar{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.2rem,5vw,3.4rem);margin:0 0 2rem;
}
.placar div{display:flex;flex-direction:column;align-items:center;gap:.1rem;}
.placar div + div{padding-left:clamp(1.2rem,5vw,3.4rem);border-left:1px solid var(--borda);}
.placar strong{
  font-size:clamp(2.1rem,5.2vw,3rem);line-height:1;color:var(--violeta);
  font-variant-numeric:tabular-nums;letter-spacing:-.035em;
}
.placar span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--suave);}

/* preço por página: a conta que ninguém faz sozinho */
.por-pagina{margin-top:.5rem;font-size:.95rem;color:var(--suave);}
.por-pagina strong{color:var(--violeta);font-weight:700;}

/* ---- TROCA: 800+ páginas → 91, a ancoragem da primeira dobra ----
   O número grande da esquerda é cinza (o volume que ela não vai ler) e o da direita
   é violeta (o que ela recebe). A seta coral é o único elemento que se move entre os
   dois — é o gesto da promessa inteira. */
.troca{
  display:flex;align-items:center;gap:clamp(.7rem,2.6vw,1.5rem);
  padding:.85rem 1.15rem;background:var(--fundo-alt);
  border:1px solid var(--borda);border-radius:14px;
  width:fit-content;max-width:100%;
}
.troca-lado{display:flex;flex-direction:column;line-height:1.05;}
.troca-lado strong{
  font-size:clamp(1.5rem,4.4vw,1.9rem);color:var(--tenue);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.troca-lado small{font-size:.76rem;color:var(--suave);line-height:1.3;margin-top:.2rem;}
.troca-fim strong{color:var(--violeta);font-size:clamp(1.8rem,5.2vw,2.35rem);}
.troca-seta{
  width:26px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- MARCADORES: os quatro benefícios da página vencedora, na dobra ---- */
.marcadores{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem 1rem;
}
.marcadores li{
  display:flex;align-items:center;gap:.5rem;
  font-size:1rem;font-weight:500;color:var(--tinta);line-height:1.3;
}
.marcadores li:last-child{grid-column:1 / -1;}
@media(max-width:560px){.marcadores{grid-template-columns:1fr;}}

/* o "PDF" do placar não é número, mas ocupa o mesmo lugar visual */
.placar strong.placar-texto{font-size:clamp(1.6rem,3.8vw,2.2rem);letter-spacing:-.02em;}

/* curso de quem deu o depoimento, sob o nome */
.carrossel cite small{display:block;font-weight:500;font-size:.79rem;color:#9C93BE;margin-top:1px;}

/* a fonte da nota de pesquisa, quando ela aparece centrada e sozinha */
.recorte-fonte.centro{margin-top:1rem;}

/* ---- RECORTES DE FONTE ----------------------------------------------------
   Três cartões com cara de recorte de publicação: cabeçalho com o nome do
   periódico em serifa e o ano, o dado grande, a frase e a citação embaixo.
   O ar de recorte vem da rotação mínima — feita com a propriedade `rotate`,
   e não com `transform`, porque a cascata do efeitos.css zera o transform dos
   filhos ao revelar (.cascata.visivel > *{transform:none}) e apagaria o tilt.
   Os números foram conferidos no texto dos próprios artigos (25/08/2026).   */
.fontes-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
.fonte-mini{
  position:relative;display:flex;flex-direction:column;gap:.55rem;
  background:#fff;border:1px solid var(--borda);border-top:5px solid var(--azul);
  border-radius:6px;padding:1.15rem 1.25rem 1.05rem;
  text-decoration:none;color:inherit;
  box-shadow:0 12px 26px -20px rgba(36,16,86,.42);
}
.fonte-mini:nth-child(1){rotate:-.7deg;}
.fonte-mini:nth-child(2){rotate:.45deg;}
.fonte-mini:nth-child(3){rotate:-.35deg;}
.fonte-mini:nth-child(2){border-top-color:var(--verde);}
.fonte-mini:nth-child(3){border-top-color:var(--lilas);}

/* cabeçalho: o periódico é o que dá a credencial, então é ele que abre o cartão */
.fonte-cabeca{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--borda);
}
.fonte-veiculo{
  font-family:Georgia,"Times New Roman",serif;
  font-size:.83rem;line-height:1.22;font-weight:700;color:var(--tinta);
  letter-spacing:.005em;
}
.fonte-ano{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;font-weight:700;color:var(--tenue);
  font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0;
}
.fonte-tema{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--violeta);
}

/* o dado é o que a pessoa lê de longe; a frase existe para dar sentido a ele */
.fonte-dado{
  display:flex;align-items:baseline;gap:.32rem;
  font-size:clamp(2.5rem,5.4vw,3.2rem);line-height:.92;font-weight:700;
  color:var(--violeta);letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  margin:.1rem 0 -.1rem;
}
.fonte-dado b{font-weight:inherit;font-size:inherit;color:inherit;}
.fonte-un{
  font-style:normal;font-size:.98rem;font-weight:600;
  color:var(--suave);letter-spacing:0;
}
.fonte-mini strong{font-size:.95rem;line-height:1.36;color:var(--corpo);font-weight:500;}
.fonte-ref{
  font-size:.74rem;line-height:1.35;color:var(--tenue);
  margin-top:auto;padding-top:.65rem;border-top:1px solid var(--borda);
}
.fonte-ref em{font-style:italic;}
.fonte-mini::after{
  content:"abrir o estudo →";
  font-size:.74rem;font-weight:700;color:var(--violeta);letter-spacing:.01em;
}
.nota-fontes{max-width:62ch;margin:2rem 0 0;}   /* alinhada a esquerda, como o resto do miolo */
@media(max-width:860px){
  .fontes-mini{grid-template-columns:1fr;gap:1.1rem;}
  .fonte-dado{font-size:2.6rem;}
}

/* a frase de prova social sob o título dos depoimentos */
.destaque-social{color:#CFC4EE;font-size:1.08rem;}
.destaque-social strong{color:#fff;font-variant-numeric:tabular-nums;}

/* parágrafo solto que não deve herdar a medida de leitura estreita */
.apoio.sem-teto{max-width:none;}

/* ---- O SEGUNDO ARQUIVO: a secao de bonus, quando o produto tem um -----------
   Mesma malha da secao da autora (imagem de um lado, texto do outro), mas com a
   capa menor: o bonus apoia a oferta, nao disputa com ela.                    */
.bonus-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center;}
.bonus-capa img{width:100%;max-width:340px;margin:0 auto;filter:drop-shadow(0 26px 40px rgba(36,16,86,.28));}
.bonus-texto .numeros{margin-top:1.4rem;}
@media(max-width:860px){
  .bonus-grid{grid-template-columns:1fr;}
  .bonus-capa img{max-width:230px;}
}

/* o volume, sob o nome do produto no hero — rotulo, nao subtitulo */
.sobrelinha-vol{
  display:inline-block;margin-top:.45rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--violeta);background:var(--fundo-alt);
  border:1px solid var(--borda);border-radius:999px;padding:.3rem .7rem;
}

/* ---- HOME: hero da marca ---------------------------------------------------
   O hero da home nao tem capa ao lado — nao ha um produto ainda. Entao ele e
   centrado e curto: frase, promessa e o caminho para a vitrine.              */
.hero-home{text-align:center;}
.hero-home .container{display:block;}
.hero-home h1{max-width:16ch;margin:0 auto;}
.hero-home .lead{margin:1.1rem auto 0;}
.hero-home .botao{margin-top:1.8rem;}
.hero-home .micro{justify-content:center;margin-top:1rem;}
.centro-medida{max-width:52ch;margin-left:auto;margin-right:auto;}

/* ---- HOME: a vitrine dos e-books -------------------------------------------
   Cada cartao e um link inteiro (area de clique grande no celular). A capa fica
   num palco de cor clara para o livro nao flutuar no branco, e a faixa colorida
   do topo repete a cor do produto, a mesma que separa as secoes da pagina dele. */
.vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.4rem;}
.vitrine-item{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--borda);border-top:5px solid var(--azul);
  border-radius:var(--raio);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 14px 30px -24px rgba(36,16,86,.5);
}
.vitrine-item.borda-verde{border-top-color:var(--verde);}
.vitrine-item.borda-lilas{border-top-color:var(--lilas);}
.vitrine-item.borda-coral{border-top-color:var(--coral);}
.vitrine-item.borda-azul{border-top-color:var(--azul);}
/* a faixa lateral animada das secoes nao vale aqui: e cartao, nao secao */
.efeitos .vitrine-item::before{content:none;}

.vitrine-tag{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--violeta);border-radius:999px;padding:.28rem .6rem;
}
/* O palco da capa tem ALTURA FIXA e centraliza a imagem dentro.
   Os mockups nao tem todos a mesma proporcao — os de tablet+celular+livro sao
   quadrados ou deitados, e o livro 3D que o capa_mockup.py desenha e 3:4. Sem uma
   altura comum, cada cartao comecava o texto numa linha diferente e a grade ficava
   torta. */
.vitrine-capa{
  display:block;overflow:hidden;
  height:210px;background:var(--fundo-alt);padding:1.1rem 1.2rem .5rem;
}
/* O palco e BLOCO, nao flex: como item de flex com align-items:center, o height:100%
   da imagem nao resolvia contra o pai (ficava auto), e a capa alta transbordava o
   palco e cobria o nome do produto. Em bloco o percentual resolve, e o object-fit
   centraliza a capa dentro sem deformar. */
.vitrine-capa img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(36,16,86,.26));}
.vitrine-corpo{display:flex;flex-direction:column;gap:.42rem;padding:1.1rem 1.2rem 1.3rem;flex:1;}
.vitrine-nome{font-size:1.06rem;line-height:1.25;color:var(--tinta);font-weight:700;}
.vitrine-vol{
  align-self:flex-start;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--violeta);background:var(--fundo-alt);
  border:1px solid var(--borda);border-radius:999px;padding:.2rem .5rem;
}
.vitrine-resumo{font-size:.9rem;line-height:1.45;color:var(--suave);}
/* a linha de dados agora vem ANTES do resumo e e o que permite comparar os oito
   de relance — por isso ganhou peso e a cor da marca */
.vitrine-dado{font-size:.79rem;color:var(--violeta);font-weight:600;letter-spacing:.01em;}
.vitrine-preco{
  margin-top:auto;padding-top:.7rem;
  font-size:1.3rem;font-weight:700;color:var(--violeta);letter-spacing:-.02em;
}
.vitrine-preco small{
  font-size:.82rem;font-weight:500;color:var(--tenue);
  text-decoration:line-through;margin-right:.35rem;letter-spacing:0;
}
.vitrine-cta{font-size:.82rem;font-weight:700;color:var(--violeta);}
@media(max-width:520px){
  .vitrine{grid-template-columns:1fr 1fr;gap:.9rem;}
  .vitrine-capa{height:150px;padding:.8rem .8rem .4rem;}
  .vitrine-corpo{padding:.85rem .9rem 1rem;}
  .vitrine-nome{font-size:.94rem;}
  .vitrine-resumo{display:none;}
  .vitrine-preco{font-size:1.12rem;}
  /* em duas colunas o preco nao cabe numa linha so: o riscado sobe */
  .vitrine-preco small{display:block;margin:0 0 .1rem;}
}

/* ---- CELULAR: dois ajustes de alinhamento (27/08/2026) ---------------------
   Vieram de prints do aparelho real. Três colunas de números na largura de um
   celular quebram toda legenda em duas linhas, sobrando "e-book" e "trás" órfãos
   na segunda. Uma coluna resolve e ainda deixa o número maior.               */
@media(max-width:600px){
  .numeros{grid-template-columns:1fr;gap:.75rem;}
  .numeros div{flex-direction:row;align-items:baseline;gap:.5rem;}
  .numeros strong{font-size:1.45rem;flex-shrink:0;}
  .numeros span{font-size:.88rem;}
}

/* ---- CELULAR: o placar em duas colunas (27/08/2026) ------------------------
   Com flex e quebra livre, os quatro dados se dividiam em 2 + 1 + 1 e os dois
   ultimos ficavam centralizados sozinhos, cada um numa linha — o desalinho que
   o cliente viu no aparelho. Sao quatro itens: 2x2 fecha certo. A divisoria
   vertical vira horizontal, senao sobra um risco solto no meio da grade.     */
@media(max-width:600px){
  .placar{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 0;}
  .placar div + div{padding-left:0;border-left:0;}
  .placar div:nth-child(even){border-left:1px solid var(--borda);}
  .placar div:nth-child(n+3){padding-top:1.2rem;border-top:1px solid var(--borda);}
}

/* ---- os dois arquivos do Vol 2, um por linha, com a soma destacada ---------
   Substitui o par de numeros solto: aqui fica explicito o que e guia, o que e
   caderno de exercicios e o que e soma — a confusao que a pagina tinha antes. */
.dois-arquivos{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;max-width:34rem;}
.dois-arquivos li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--borda);}
.dois-arquivos strong{font-size:.98rem;color:var(--tinta);}
.dois-arquivos span{font-size:.88rem;color:var(--suave);text-align:right;}
.dois-arquivos-soma{border-bottom:0;padding-top:.1rem;}
.dois-arquivos-soma strong,.dois-arquivos-soma span{color:var(--violeta);font-weight:700;}
@media(max-width:520px){
  .dois-arquivos li{flex-direction:column;gap:.1rem;}
  .dois-arquivos span{text-align:left;}
}

/* ---- as fontes, agora dentro de um <details> ------------------------------
   Substituem os tres recortes grandes. A pagina vende um PDF, nao uma aula de
   psicologia cognitiva: a mensagem fica na frase acima e a comprovacao fica a um
   clique, completa e clicavel.                                               */
.fontes-lista{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem;}
.fontes-lista li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--borda);font-size:.92rem;}
.fontes-lista li:last-child{border-bottom:0;padding-bottom:0;}
.fontes-lista a{font-weight:700;color:var(--violeta);text-decoration:none;}
.fontes-lista a:hover{text-decoration:underline;}
.fontes-lista span{font-size:.82rem;color:var(--tenue);font-style:italic;}
.fontes-lista em{flex-basis:100%;font-style:normal;color:var(--suave);font-size:.88rem;}