/* ============================================================
   EFEITOS — camada de movimento da página do Anatomia.
   Carrega depois de estilo.css. Tudo aqui é opcional: se o JS
   não rodar ou o usuário pedir menos movimento, a página
   continua completa e legível. Ver DESIGN.md §Movimento.
   ============================================================ */

/* ---- 1 · barra de progresso de leitura ---- */
.progresso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--violeta-cl),var(--violeta));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}
@supports (animation-timeline:scroll()){
  .progresso.auto{animation:avancar linear both;animation-timeline:scroll(root);}
}
@keyframes avancar{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Portão: tudo que ESCONDE conteúdo depende da classe .efeitos, posta no
   <html> por um script inline no <head>. Se o JS estiver desligado ou o
   arquivo não chegar, a página nasce inteira e visível. */

/* ---- 2 · a faixa lateral cresce quando a seção entra ---- */
.efeitos .borda-azul::before,.efeitos .borda-verde::before,
.efeitos .borda-lilas::before,.efeitos .borda-coral::before{
  transform:scaleY(0);transform-origin:top center;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.efeitos .secao.dentro::before,.efeitos .hero.dentro::before{transform:scaleY(1);}

/* ---- 3 · revelação em cascata ---- */
.efeitos .cascata > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.efeitos .cascata.visivel > *{opacity:1;transform:none;}

/* ---- 4 · marca-texto que passa por cima da palavra ---- */
.marca{
  background-image:linear-gradient(var(--lilas),var(--lilas));
  background-repeat:no-repeat;background-position:0 .82em;
  background-size:100% .62em;
  padding:0 .06em;
}
.efeitos .marca{
  background-size:0% .62em;
  transition:background-size .75s cubic-bezier(.65,0,.35,1) .3s;
}
.efeitos .visivel .marca,.efeitos .dentro .marca{background-size:100% .62em;}
.secao-escura .marca{background-image:linear-gradient(rgba(183,158,255,.32),rgba(183,158,255,.32));}
.marca.coral{background-image:linear-gradient(var(--coral-cl),var(--coral-cl));}

/* ---- 5 · título revelado por palavra ----
   A palavra sobe de dentro de uma janela recortada. `overflow:hidden` na
   janela é o que faz o corte; por isso ela precisa de um pouco de folga
   vertical, senão come o rabinho do "g" e do "ç". */
.palavras .pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em;}
.efeitos .palavras .pal > span{
  display:inline-block;transform:translateY(115%);
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--p,0) * 55ms);
}
.efeitos .visivel .palavras .pal > span,
.efeitos .dentro .palavras .pal > span,
.efeitos .palavras.visivel .pal > span,
.efeitos .palavras.dentro .pal > span{transform:none;}

/* ---- 6 · capa do hero: parallax, inclinação e brilho ---- */
.hero-capa{perspective:1000px;}
.hero-capa img{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--py,0px));
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 30px 60px -30px rgba(36,16,86,.45);
  will-change:transform;
}
.hero-capa.movendo img{transition:transform .08s linear;}
.hero-capa::after{
  content:"";position:absolute;inset:0;border-radius:var(--raio);pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 66%);
  transform:translateX(-130%);
}
.hero-capa.visivel::after{animation:passar 1.4s cubic-bezier(.4,0,.2,1) .5s;}
@keyframes passar{to{transform:translateX(130%);}}

/* selo que respira */
.selo-flutuante{animation:boiar 5.5s ease-in-out infinite;}
@keyframes boiar{
  0%,100%{transform:rotate(-8deg) translateY(0);}
  50%{transform:rotate(-6deg) translateY(-7px);}
}

/* ---- 7 · cartões com luz que segue o cursor ---- */
.passo,.recorte,.faq details,.cartao-oferta{position:relative;overflow:hidden;}
.passo::before,.recorte::before,.cartao-oferta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-20%),rgba(93,23,235,.075),transparent 68%);
  opacity:0;transition:opacity .35s ease;
}
.passo:hover::before,.recorte:hover::before,.cartao-oferta:hover::before{opacity:1;}
.passo,.recorte{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;}
.passo:hover,.recorte:hover{
  transform:translateY(-4px);border-color:#D8CEF0;
  box-shadow:0 18px 38px -22px rgba(36,16,86,.4);
}
.passo-num{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s ease;}
.passo:hover .passo-num{transform:scale(1.12) rotate(-6deg);background:var(--violeta);color:#fff;}

/* ---- 8 · pílulas dos 13 sistemas ----
   A lista era só texto solto dentro de caixas, e lia como formulário. Cada item passa
   a ter o número da sequência num disco pastel — a mesma linguagem das pílulas de seção
   do e-book, e o que torna visível o argumento de que os sistemas vêm NA ORDEM.
   O número vem de um contador CSS: nada muda no HTML e ninguém precisa renumerar à mão
   ao inserir ou tirar um sistema. */
.sistemas{counter-reset:sistema;}
.sistemas li{
  counter-increment:sistema;
  display:flex;align-items:center;gap:.7rem;cursor:default;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease,background .28s ease;
}
.sistemas li::before{
  content:counter(sistema,decimal-leading-zero);
  flex-shrink:0;width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;
  background:var(--lilas);color:var(--violeta);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.sistemas li:nth-child(4n+2)::before{background:var(--azul);color:#1F5F87;}
.sistemas li:nth-child(4n+3)::before{background:var(--verde);color:#2E6B4F;}
.sistemas li:nth-child(4n+4)::before{background:var(--coral-cl);color:#B3491F;}
.sistemas li:hover{
  transform:translateY(-3px);background:#fff;border-color:#D8CEF0;
  box-shadow:0 14px 30px -20px rgba(36,16,86,.45);
}
.sistemas li:hover::before{transform:scale(1.12);}
@media(prefers-reduced-motion:reduce){
  .sistemas li:hover::before{transform:none;}
}

/* ---- 9 · amostras: inclinação, brilho e ampliação ---- */
.amostras figure{perspective:1100px;}
.amostras img{
  cursor:zoom-in;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
}
.amostras figure:hover img{
  box-shadow:0 4px 8px rgba(26,22,38,.07),0 26px 54px -20px rgba(26,22,38,.4);
}
.amostras figure.movendo img{transition:transform .08s linear;}

.lupa{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,44,.86);padding:clamp(1rem,4vw,3rem);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.lupa.aberta{opacity:1;pointer-events:auto;}
.lupa img{
  max-width:min(100%,760px);max-height:100%;border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:scale(.94);transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.lupa.aberta img{transform:none;}
.lupa-fechar{
  position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.lupa-fechar:hover{background:rgba(255,255,255,.14);}

/* ---- 8b · recortes com cara de matéria ----
   Tratamento editorial: fio de cor no topo, tema em caixa alta e manchete em peso
   cheio. O que NÃO existe aqui, de propósito, é nome de veículo, data ou selo de
   jornal: são consensos sobre método de estudo, não matéria publicada. Inventar a
   fonte compraria credibilidade que a página não tem. */
.recorte-tema{
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violeta);margin-bottom:.1rem;
}
.recorte{border-top-width:5px;}
.recorte h3{font-size:1.12rem;line-height:1.25;letter-spacing:-.015em;}
.recorte h3::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--borda);margin:.7rem 0 .1rem;
}
/* a linha de fonte é o que separa "achado que dá para conferir" de "frase de efeito" */
.recorte-fonte{
  margin-top:auto;padding-top:.9rem;font-size:.78rem;line-height:1.4;
  color:var(--tenue);border-top:1px solid var(--borda);
}
.recorte-fonte em{font-style:italic;}

/* ---- 9b · mosaico dos prints de conversa ----
   Alturas irregulares por natureza: `columns` acomoda isso sem buraco, o que um grid
   de linhas fixas não faria. Dentro de `columns`, transform em filho dá problema de
   pintura em alguns navegadores — por isso a entrada aqui é só de opacidade. */
.mosaico{columns:3;column-gap:1.3rem;}
.mosaico figure{margin:0 0 1.3rem;break-inside:avoid;}
.mosaico img{
  width:100%;border-radius:14px;border:1px solid var(--borda);cursor:zoom-in;
  box-shadow:0 2px 4px rgba(26,22,38,.05),0 12px 30px -16px rgba(26,22,38,.25);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.mosaico img:hover{
  border-color:#D8CEF0;
  box-shadow:0 3px 6px rgba(26,22,38,.07),0 20px 44px -18px rgba(26,22,38,.35);
}
.efeitos .mosaico.cascata > figure{transform:none;}
/* `p` herda max-width de 60ch; sem margem automática o bloco encosta à esquerda
   e o texto "centralizado" fica visivelmente fora do eixo da seção. */
.nota-mosaico{margin:.6rem auto 0;justify-content:center;text-align:center;}
@media(max-width:1000px){.mosaico{columns:2;}}

/* No celular vira carrossel de arrasto, como o de depoimentos. Empilhar seis prints
   um debaixo do outro dava uma coluna longa demais e ninguem chegava ao fim.
   Sem JS: `scroll-snap` nativo. O proximo cartao espia pela borda — e a dica de que
   da para arrastar, sem precisar escrever "arraste". */
@media(max-width:700px){
  .mosaico{
    columns:auto;
    display:flex;gap:.9rem;align-items:center;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.5rem;
    /* sangra ate a borda da tela, para o cartao seguinte aparecer */
    margin-inline:calc(-1 * clamp(1.1rem,4vw,2.5rem));
    padding-inline:clamp(1.1rem,4vw,2.5rem);
    scroll-padding-inline:clamp(1.1rem,4vw,2.5rem);
  }
  .mosaico figure{margin:0;flex:0 0 84%;scroll-snap-align:center;}
  .mosaico::-webkit-scrollbar{height:0;}
}

/* ---- 9c · avatar com foto ----
   A foto entra por cima das iniciais, que continuam no HTML. Se o arquivo faltar ou
   falhar, as iniciais aparecem sozinhas e nada quebra — por isso a foto é uma <img>
   sobreposta, e não um background: assim o fallback é automático. */
.avatar{position:relative;overflow:hidden;}
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
}

/* ---- 10 · tira dos sistemas em movimento ---- */
.tira{
  overflow:hidden;padding:1.1rem 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  background:var(--fundo-alt);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tira-trilho{display:flex;gap:0;width:max-content;animation:correr 46s linear infinite;}
.tira-trilho span{
  display:inline-flex;align-items:center;gap:1.6rem;
  font-size:1.02rem;font-weight:500;color:var(--suave);white-space:nowrap;padding-right:1.6rem;
}
.tira-trilho span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex-shrink:0;}
.tira-trilho span:nth-child(4n+2)::after{background:var(--violeta);}
.tira-trilho span:nth-child(4n+3)::after{background:#7FB3D9;}
.tira-trilho span:nth-child(4n)::after{background:#5FA97F;}
.tira:hover .tira-trilho{animation-play-state:paused;}
@keyframes correr{to{transform:translateX(-50%);}}

/* ---- 11 · botão magnético ---- */
.botao{
  transform:translate(var(--bx,0px),var(--by,0px));
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .12s ease;
}
.botao.puxando{transition:transform .1s linear;}
.botao:hover{transform:translate(var(--bx,0px),calc(var(--by,0px) + 2px));}

/* pulso de atenção no CTA principal, uma vez a cada tanto */
.botao.pulsar{animation:pulso 2.6s ease-out 3;}
@keyframes pulso{
  0%{box-shadow:0 4px 0 var(--violeta-esc),0 12px 26px -8px rgba(93,23,235,.45),0 0 0 0 rgba(93,23,235,.4);}
  22%{box-shadow:0 4px 0 var(--violeta-esc),0 12px 26px -8px rgba(93,23,235,.45),0 0 0 16px rgba(93,23,235,0);}
  100%{box-shadow:0 4px 0 var(--violeta-esc),0 12px 26px -8px rgba(93,23,235,.45),0 0 0 0 rgba(93,23,235,0);}
}

/* ---- 11b · contador da oferta ---- */
.contador{
  background:var(--escuro);color:#fff;border-radius:20px;
  padding:1.4rem clamp(1rem,4vw,2rem);text-align:center;margin-bottom:1.2rem;
}
.contador-titulo{
  font-size:1.05rem;color:#B79EFF;margin:0 0 .8rem;max-width:none;
  letter-spacing:.01em;
}
.contador-relogio{
  display:flex;align-items:flex-start;justify-content:center;gap:.5rem;
  font-variant-numeric:tabular-nums;
}
.contador-relogio span{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:rgba(255,255,255,.09);border-radius:12px;
  padding:.55rem .75rem;min-width:66px;
}
.contador-relogio strong{
  font-size:clamp(1.7rem,5vw,2.2rem);line-height:1;letter-spacing:-.03em;color:#fff;
}
.contador-relogio small{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#B7A9E0;}
.contador-relogio i{
  font-style:normal;font-size:1.6rem;line-height:1;color:#7B6BB0;
  padding-top:.55rem;
}
.contador-fim{
  margin:.9rem auto 0;font-size:.92rem;color:#DCD2F7;max-width:36ch;
}
.contador.acabou .contador-relogio{opacity:.45;}

/* o segundo pisca junto com a virada, para o relógio não parecer imagem parada */
.efeitos .contador-relogio [data-s]{transition:opacity .18s ease;}
.efeitos .contador.pulso [data-s]{opacity:.55;}
@media(prefers-reduced-motion:reduce){
  .efeitos .contador.pulso [data-s]{opacity:1;}
}

/* ---- 12 · preço: entrada com peso ---- */
.preco{display:inline-block;}
.efeitos .preco{
  transform:scale(.9);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .35s,opacity .5s ease .35s;
}
.efeitos .visivel .preco{transform:none;opacity:1;}
.efeitos .economia{opacity:0;transform:translateY(6px);transition:opacity .5s ease .85s,transform .5s ease .85s;}
.efeitos .visivel .economia{opacity:1;transform:none;}

/* ---- 13 · FAQ animado ---- */
.faq details{transition:border-color .25s ease,box-shadow .25s ease;}
.faq details[open]{border-color:#D8CEF0;box-shadow:0 12px 28px -22px rgba(36,16,86,.45);}
/* o "+" gira 135° e vira "×" — mais legível que trocar o caractere no meio da animação */
.faq summary::after{transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:inline-block;}
.faq details[open] summary::after{content:"+";transform:rotate(135deg);}
.faq-corpo{overflow:hidden;}

/* ---- 14 · números que contam ---- */
.numeros strong,.selo-flutuante strong{font-variant-numeric:tabular-nums;}
.efeitos .numeros div{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.efeitos .visivel .numeros div{opacity:1;transform:none;}

/* ---- 15 · o corpo gruda enquanto a coluna de texto rola ----
   CORRIGIDO EM 24/08/2026. Antes o palco só atravessava a tela junto com o resto da
   página: o vídeo inteiro passava em pouco mais de uma tela de rolagem, e o efeito lia
   como "a imagem trocou duas vezes", não como "a rolagem monta o corpo". Agora a coluna
   do corpo é sticky e a coluna de texto define uma trilha mais alta que a viewport —
   é essa distância que o vídeo percorre, e a relação entre rolar e montar fica óbvia.
   No celular nada disso vale: lá o vídeo nem é baixado. */
/* Os tres passos lado a lado, agora que o corpo em camadas saiu da seção */
.mecanismo.trio{grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){.mecanismo.trio{grid-template-columns:1fr;}}

@media(min-width:901px){
  .mecanismo-grid.com-trilha{align-items:start;}
  .corpo-visual{position:sticky;top:6vh;align-self:start;}
  .palco-scrub{
    width:auto;height:min(68vh,620px);aspect-ratio:620/1080;margin:0 auto;
  }
  /* A trilha e o que da tempo ao video. Com 190vh e o palco ocupando ~76vh, sobram
     cerca de 114vh de rolagem para as tres transicoes — uma por cartao de texto, que
     e o que sincroniza o que se le com o que se ve. Os vaos largos entre os cartoes
     sao de proposito: cada um entra sozinho na tela.
     SÓ VALE COM A CLASSE `com-trilha`, que hoje ninguem usa: a secao voltou a ter
     figura parada em 24/08/2026, e sem essa trava o grid ganhava duas telas de vazio.
     Quem recolocar o corpo em video tem de por `com-trilha` no .mecanismo-grid. */
  .mecanismo-grid.com-trilha > .mecanismo{
    min-height:190vh;
    display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .corpo-visual{position:static;}
  .mecanismo-grid.com-trilha > .mecanismo{min-height:0;display:grid;grid-template-columns:1fr;}
  .palco-scrub{width:min(100%,320px);height:auto;}
}

/* ---- 15b · legenda acompanha o vídeo ---- */
.corpo-legenda span{position:relative;padding-bottom:3px;}
.corpo-legenda span::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.corpo-legenda span.ativa::after{transform:scaleX(1);}
.palco-scrub{
  box-shadow:0 30px 60px -40px rgba(36,16,86,.5);
  transition:box-shadow .4s ease;
}

/* dica de rolagem sob o corpo, some depois da primeira rolagem */
.dica-rolagem{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.9rem;font-size:.84rem;color:var(--tenue);
}
.efeitos .dica-rolagem{opacity:0;transition:opacity .5s ease;}
.efeitos .dica-rolagem.vista{opacity:1;}
.efeitos .dica-rolagem.some{opacity:0;}
@media(max-width:820px){.dica-rolagem{display:none;}}
.dica-rolagem svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:descer 1.9s ease-in-out infinite;}
@keyframes descer{0%,100%{transform:translateY(-2px);}50%{transform:translateY(3px);}}

/* ---- 16 · seção com vídeo ao fundo (identificação) ---- */
.palco-fundo{position:relative;overflow:hidden;isolation:isolate;}
.palco-fundo > .fundo-midia{
  position:absolute;inset:0;z-index:-2;
}
.palco-fundo .fundo-midia picture{display:block;width:100%;height:100%;}
.palco-fundo .fundo-midia img,.palco-fundo .fundo-midia video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08) translateY(var(--py,0px));
  will-change:transform;
}
.palco-fundo .fundo-midia video{opacity:0;transition:opacity .8s ease;position:absolute;inset:0;}
.palco-fundo.pronto .fundo-midia video{opacity:1;}
/* o véu: sem ele o texto disputa leitura com a foto e perde */
.palco-fundo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,12,44,.88),rgba(20,12,44,.74) 45%,rgba(20,12,44,.92));
}
.palco-fundo h2,.palco-fundo .grande-texto strong{color:#fff;}
.palco-fundo .grande-texto,.palco-fundo .apoio{color:#DCD2F7;}
.palco-fundo .sobrelinha{color:#B79EFF;}
/* sobre fundo escuro o marca-texto vira um véu claro: lilás sólido com texto branco não se lê */
.palco-fundo .marca,.palco-fundo .marca.coral{
  background-image:linear-gradient(rgba(183,158,255,.3),rgba(183,158,255,.3));
}

/* ---- 17 · rodapé e detalhes finais ---- */
.faixa-topo{overflow:hidden;position:relative;}
.faixa-topo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  transform:translateX(-100%);animation:varrer 7s ease-in-out infinite;
}
@keyframes varrer{0%,60%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

.seta,.pontos button,.lupa-fechar,.sistemas li,.amostras img{will-change:auto;}

/* ---- 19 · a figura das três camadas se revela da esquerda para a direita ----
   O corte anda com o mesmo tempo da cascata da legenda: quando a terceira etiqueta
   acende, o esqueleto acabou de aparecer. Sem JS o clip-path nunca é aplicado — a
   figura nasce inteira, como todo o resto desta camada. */
.efeitos .corpo-figura picture{
  display:block;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s cubic-bezier(.65,0,.35,1) .1s;
}
.efeitos .corpo-figura.visivel picture{clip-path:inset(0 0 0 0);}
.efeitos .figura-legenda > *{transition-delay:calc(.35s + var(--i,0) * 460ms);}
.efeitos .figura-legenda span::before{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.efeitos .figura-legenda.visivel span::before{transform:scale(1);transition-delay:calc(.5s + var(--i,0) * 460ms);}
.corpo-figura img{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.corpo-figura:hover img{transform:translateY(-6px) scale(1.015);}

/* ---- 20 · placar dos conteúdos: os números sobem um a um ---- */
.efeitos .placar strong{letter-spacing:-.035em;}
.placar div{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.placar div:hover{transform:translateY(-3px);}

/* ---- 21 · preço: halo, carimbo e a conta por página ----
   O número desce de 69,00 até 19,99 pelo JS (efeitos.js §16). Aqui fica só o que
   é visual: o halo violeta que acende atrás, o carimbo no fim da contagem e a
   linha do preço por página, que entra depois de tudo assentar. */
.bloco-preco{position:relative;}
.bloco-preco::before{
  content:"";position:absolute;left:50%;top:42%;width:min(300px,86%);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.55);border-radius:50%;
  background:radial-gradient(circle,rgba(93,23,235,.18),rgba(93,23,235,0) 68%);
  opacity:0;transition:opacity .9s ease .35s,transform 1.1s cubic-bezier(.22,.61,.36,1) .35s;
  pointer-events:none;
}
.efeitos .visivel .bloco-preco::before{opacity:1;transform:translate(-50%,-50%) scale(1);}
.preco{position:relative;z-index:1;}
.preco.aterrissou{animation:carimbo .52s cubic-bezier(.34,1.56,.64,1);}
@keyframes carimbo{
  0%{transform:scale(1.16);}
  55%{transform:scale(.975);}
  100%{transform:scale(1);}
}
.efeitos .por-pagina{opacity:0;transform:translateY(7px);transition:opacity .55s ease 1.5s,transform .55s ease 1.5s;}
.efeitos .visivel .por-pagina{opacity:1;transform:none;}
/* a barra fixa do celular pisca junto com o carimbo, para quem já rolou além da oferta */
.barra-fixa.eco .bf-preco strong{animation:carimbo .52s cubic-bezier(.34,1.56,.64,1);}

/* ---- 23 · a troca 800 → 91 se completa na frente de quem olha ----
   O lado esquerdo (o volume do livro) já está lá quando a dobra aparece; a seta e o
   91 entram depois, meio segundo mais tarde. É a promessa acontecendo, não uma
   informação estática. */
.efeitos .troca-seta{opacity:0;transform:translateX(-8px);transition:opacity .4s ease .35s,transform .5s ease .35s;}
.efeitos .troca.visivel .troca-seta{opacity:1;transform:none;}
.efeitos .troca .troca-fim{opacity:0;transform:translateX(-12px);transition:opacity .5s ease .55s,transform .55s cubic-bezier(.34,1.56,.64,1) .55s;}
.efeitos .troca.visivel .troca-fim{opacity:1;transform:none;}

/* ---- 24 · o preço com desconto ganha a linha por baixo ----
   O risco sobre os R$ 69,00 já existe (estilo.css §preço). Esta é a contrapartida: a
   linha violeta cresce sob os R$ 19,99 no instante em que a contagem termina, então
   os dois gestos — riscar o antigo, sublinhar o novo — acontecem em sequência. */
.preco::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1em;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--violeta-cl),var(--violeta));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.preco.aterrissou::after{transform:scaleX(1);}

/* o recorte se endireita e levanta quando o cursor chega — a rotação de repouso
   está no estilo.css, na propriedade `rotate`, para não brigar com a cascata */
.fonte-mini{transition:transform .3s cubic-bezier(.22,.61,.36,1),rotate .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;}
.fonte-mini:hover{transform:translateY(-5px);rotate:0deg;box-shadow:0 22px 40px -22px rgba(36,16,86,.5);}
.fonte-mini::after{transition:transform .25s ease;display:inline-block;}
.fonte-mini:hover::after{transform:translateX(4px);}

/* ---- 22 · o portão: nada disso roda para quem pediu menos movimento ---- */
@media(prefers-reduced-motion:reduce){
  .progresso{display:none;}
  .efeitos .borda-azul::before,.efeitos .borda-verde::before,
  .efeitos .borda-lilas::before,.efeitos .borda-coral::before{transform:none;transition:none;}
  .efeitos .cascata > *{opacity:1;transform:none;transition:none;}
  .efeitos .marca{background-size:100% .62em;transition:none;}
  .efeitos .palavras .pal > span{transform:none;transition:none;}
  .hero-capa img{transform:none;transition:none;}
  .hero-capa::after{display:none;}
  .selo-flutuante{animation:none;}
  .passo:hover,.recorte:hover,.sistemas li:hover{transform:none;}
  .tira-trilho{animation:none;}
  .botao,.botao:hover{transform:none;transition:none;}
  .botao.pulsar{animation:none;}
  .efeitos .preco,.efeitos .economia,.efeitos .numeros div{opacity:1;transform:none;transition:none;}
  .efeitos .preco,.efeitos .por-pagina{opacity:1;transform:none;transition:none;}
  .preco.aterrissou{animation:none;}
  .bloco-preco::before{display:none;}
  .efeitos .corpo-figura picture{clip-path:none;transition:none;}
  .corpo-figura:hover img{transform:none;}
  .efeitos .figura-legenda span::before{transform:scale(1);transition:none;}
  .placar div:hover{transform:none;}
  .barra-fixa.eco .bf-preco strong{animation:none;}
  .efeitos .troca-seta,.efeitos .troca .troca-fim{opacity:1;transform:none;transition:none;}
  .preco::after{transform:scaleX(1);transition:none;}
  .fonte-mini:hover{transform:none;}
  .fonte-mini:hover::after{transform:none;}
  .faixa-topo::after{display:none;}
  .dica-rolagem svg{animation:none;}
  .lupa,.lupa img{transition:none;}
  .amostras img{transform:none;transition:none;}
}