/* ══ O QUE VEM COM A SUA CONTA ══
   Dezoito cards, um ícone animado em cada. O ícone é o desenho e é a animação:
   nada de segundo elemento mexendo no canto. Com dezoito cards, dois pontos de
   movimento por card encheriam a dobra de trinta e seis coisas se mexendo.

   Vive numa folha própria porque entra em seis páginas: uma cópia por página
   sairia de sincronia na primeira edição. */
.cta-sec{box-sizing:border-box;padding:72px 24px;background:var(--off-white,#FBFAF7);width:100%}
.cta-sec *{box-sizing:border-box}
.cta-in{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.cta-kick{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nucleo-laranja,#FF6B35);text-align:center}
.cta-h2{font-family:var(--font-voz,Georgia,serif);font-weight:600;font-size:31px;
  line-height:1.15;text-align:center;color:var(--preto,#17171E);margin:-4px 0 0;
  max-width:24ch}
.cta-lede{font-size:15px;line-height:1.65;color:var(--gray-texto,#41414B);
  text-align:center;max-width:60ch;margin:0}

/* Três colunas fixas, não `auto-fit`: dezoito divide por três e por dois, mas
   não por quatro. Com as colunas livres, tela larga caía em quatro e a última
   linha ficava com dois cards e um buraco. */
.cta-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;width:100%;margin-top:22px}

/* `padding-top` alto em vez de margem no título: o ícone é absoluto, então quem
   reserva o espaço dele é o card. Com margem, cada card de texto curto ficava
   com altura diferente. */
.cta-i{position:relative;overflow:hidden;background:#FFF;
  border:1px solid rgba(20,10,0,.07);border-radius:18px;padding:72px 20px 22px;
  display:flex;flex-direction:column;gap:7px;
  box-shadow:0 8px 22px rgba(23,23,30,.045);transition:box-shadow .2s,transform .2s}
.cta-i:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(23,23,30,.07)}
.cta-t{font-weight:600;font-size:15.5px;color:var(--preto,#17171E);line-height:1.25}
.cta-b{font-size:13.5px;line-height:1.55;color:var(--gray-texto,#41414B)}
.cta-pe{font-size:13px;color:var(--gray-deco,#83838D);text-align:center;margin:16px 0 0}

.cta-ico{position:absolute;left:20px;top:20px;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center}
/* o `.px` e os mapas moram em `_px.css`, que o menu também usa; aqui só o
   tamanho do pixel dentro do quadradinho do grid */
.cta-ico .px{font-size:2px}

/* ── a cena ──
   Canto oposto ao ícone. O ícone é quadrado e duro; a cena é redonda e macia.
   O contraste entre os dois é proposital: o pixel marca a categoria, a cena
   mostra a coisa acontecendo. */
.cta-cena{position:absolute;right:16px;top:20px;width:76px;height:40px;
  opacity:.85;pointer-events:none;transition:opacity .2s,transform .2s}
.cta-i:hover .cta-cena{opacity:1;transform:translateY(-1px)}
/* `b` junto de `i` e `em`: sem ele os elementos <b> ficavam inline e sem
   posição, e cinco cenas perdiam a peça que fecha a história (a nota do CRM,
   o verde do checkout, a confirmação da agenda, o ok da IA e as palavras do
   MCP). Some sem erro nenhum, que é o pior tipo de falha. */
.cta-cena i,.cta-cena em,.cta-cena b{position:absolute;display:block;
  font-style:normal;font-weight:400}


/* ── as dezoito cenas ──
   Uma por card. A versão anterior tinha nove rodando em dezoito e a página
   parecia estar se repetindo, porque estava. Aqui cada cena mostra a coisa
   daquele card acontecendo, e é isso que impede duas vizinhas de parecerem a
   mesma.

   Todas são macias, de canto arredondado e tempo em `cubic-bezier`, para
   contrastar com o ícone, que é duro e quadrado: o pixel marca a categoria, a
   cena mostra o que a categoria faz.

   Cuidado deliberado com a cor: a referência do mercado usa lilás pálido sobre
   branco. Aqui é a família quente da marca, âmbar até uva, com o verde
   entrando só onde significa "deu certo". */
:root{--c-neu:#E7DFD2;--c-neu2:#F2ECE3;--c-fogo:#FF6B35;--c-ouro:#FFB800;
  --c-uva:#C73E9C;--c-ok:#2BA24C;--c-tinta:#2A2118}

/* ══ 1 · CRM ══ o card atravessa as colunas e a nota sobe junto */
.cn-crm i{top:6px;width:22px;height:30px;border-radius:5px;background:var(--c-neu2);
  box-shadow:inset 0 0 0 1.5px var(--c-neu)}
.cn-crm i:nth-child(1){left:0} .cn-crm i:nth-child(2){left:27px} .cn-crm i:nth-child(3){left:54px}
.cn-crm em{left:4px;top:12px;width:14px;height:7px;border-radius:3px;
  background:var(--c-fogo);animation:k-crm 4.4s cubic-bezier(.6,0,.25,1) infinite}
.cn-crm b{left:4px;top:23px;width:0;height:4px;border-radius:4px;background:var(--c-ok);
  animation:k-crm-n 4.4s cubic-bezier(.6,0,.25,1) infinite}
@keyframes k-crm{0%,12%{transform:translate(0,0)}30%,44%{transform:translate(27px,0)}
  62%,86%{transform:translate(54px,0)}96%,100%{transform:translate(0,0)}}
@keyframes k-crm-n{0%,12%{width:4px;transform:translateX(0)}
  30%,44%{width:9px;transform:translateX(27px)}
  62%,86%{width:14px;transform:translateX(54px)}96%,100%{width:4px;transform:translateX(0)}}

/* ══ 2 · conversas ══ três canais desaguando na mesma caixa */
.cn-conversas i{left:0;width:9px;height:9px;border-radius:50%}
.cn-conversas i:nth-child(1){top:2px;background:var(--c-ok);animation:k-conv 3.6s 0s cubic-bezier(.5,0,.3,1) infinite}
.cn-conversas i:nth-child(2){top:16px;background:var(--c-uva);animation:k-conv 3.6s .22s cubic-bezier(.5,0,.3,1) infinite}
.cn-conversas i:nth-child(3){top:30px;background:var(--c-ouro);animation:k-conv 3.6s .44s cubic-bezier(.5,0,.3,1) infinite}
.cn-conversas em{right:0;top:10px;width:26px;height:20px;border-radius:6px;
  background:var(--c-neu2);box-shadow:inset 0 0 0 1.5px var(--c-neu)}
@keyframes k-conv{0%,14%{transform:translate(0,0) scale(1);opacity:1}
  62%{transform:translate(56px,var(--dy,0)) scale(.5);opacity:1}
  72%,88%{transform:translate(56px,var(--dy,0)) scale(.2);opacity:0}
  96%,100%{transform:translate(0,0) scale(1);opacity:1}}
.cn-conversas i:nth-child(1){--dy:16px} .cn-conversas i:nth-child(3){--dy:-16px}

/* ══ 3 · IA ══ a pergunta desce e a resposta já sai no meio do caminho.
   A versão anterior era bolha, três pontinhos e barra: o mesmo vocabulário da
   central de conversas, e o que este card vende não é conversa, é a ausência
   de espera. Aqui as duas se cruzam de propósito, a resposta partindo antes de
   a pergunta terminar de entrar. */
.cn-ia i{left:0;top:2px;width:34px;height:12px;border-radius:7px 7px 7px 2px;
  background:var(--c-neu);animation:k-ia-p 3.4s cubic-bezier(.3,1.2,.5,1) infinite}
.cn-ia em{right:0;bottom:2px;width:44px;height:12px;border-radius:7px 7px 2px 7px;
  background:linear-gradient(90deg,var(--c-fogo),#FF8B2A);
  animation:k-ia-r 3.4s cubic-bezier(.3,1.2,.5,1) infinite}
.cn-ia b{right:2px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--c-ok);
  animation:k-ia-ok 3.4s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes k-ia-p{0%,4%{opacity:0;transform:translate(-16px,-8px)}
  20%,84%{opacity:1;transform:translate(0,0)}
  96%,100%{opacity:0;transform:translate(-16px,-8px)}}
@keyframes k-ia-r{0%,16%{opacity:0;transform:translate(16px,8px)}
  30%,84%{opacity:1;transform:translate(0,0)}
  96%,100%{opacity:0;transform:translate(16px,8px)}}
@keyframes k-ia-ok{0%,24%{opacity:0;transform:scale(.2)}
  36%,84%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.2)}}

/* ══ 4 · automações ══ a luz percorre os nós e cada um acende */
.cn-automacoes::before{content:"";position:absolute;left:6px;right:6px;top:18px;height:2px;
  border-radius:2px;background:var(--c-neu)}
.cn-automacoes i{top:12px;width:14px;height:14px;border-radius:5px;background:var(--c-neu2);
  box-shadow:inset 0 0 0 1.5px var(--c-neu);animation:k-auto 3.6s ease-out infinite}
.cn-automacoes i:nth-child(1){left:0}
.cn-automacoes i:nth-child(2){left:22px;animation-delay:.28s}
.cn-automacoes i:nth-child(3){left:44px;animation-delay:.56s}
.cn-automacoes i:nth-child(4){left:66px;animation-delay:.84s}
.cn-automacoes em{left:2px;top:16px;width:6px;height:6px;border-radius:50%;
  background:var(--c-ouro);animation:k-auto-luz 3.6s cubic-bezier(.4,0,.3,1) infinite}
@keyframes k-auto{0%,8%{background:var(--c-neu2)}18%,74%{background:var(--c-fogo)}
  88%,100%{background:var(--c-neu2)}}
@keyframes k-auto-luz{0%,4%{transform:translateX(0);opacity:0}
  10%{opacity:1}30%{transform:translateX(22px)}50%{transform:translateX(44px)}
  70%{transform:translateX(66px);opacity:1}78%,100%{transform:translateX(66px);opacity:0}}

/* ══ 5 · sites ══ a página se escreve e vai ao ar */
.cn-sites::before{content:"";position:absolute;inset:0;border-radius:7px;
  box-shadow:inset 0 0 0 1.5px var(--c-neu)}
.cn-sites::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  border-radius:7px 7px 0 0;background:var(--c-neu2)}
.cn-sites i{left:7px;height:4px;border-radius:4px;background:var(--c-neu);width:0;
  animation:k-sites 4.4s cubic-bezier(.4,0,.2,1) infinite}
.cn-sites i:nth-child(1){top:16px}
.cn-sites i:nth-child(2){top:24px;animation-delay:.2s}
.cn-sites i:nth-child(3){top:32px;animation-delay:.4s}
.cn-sites em{right:7px;bottom:5px;width:16px;height:8px;border-radius:8px;
  background:var(--c-ok);opacity:0;animation:k-sites-no 4.4s ease-out infinite}
@keyframes k-sites{0%,6%{width:0}34%,80%{width:44px}94%,100%{width:0}}
@keyframes k-sites-no{0%,52%{opacity:0;transform:scale(.4)}
  62%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}

/* ══ 6 · checkout ══ o cartão passa e aprova */
.cn-checkout i{left:0;top:8px;width:46px;height:26px;border-radius:6px;
  background:var(--c-neu2);box-shadow:inset 0 0 0 1.5px var(--c-neu)}
.cn-checkout em{left:6px;top:14px;width:34px;height:5px;border-radius:5px;
  background:var(--c-uva);animation:k-ck-fita 3.4s ease-in-out infinite}
.cn-checkout b{right:2px;top:12px;width:18px;height:18px;border-radius:50%;
  background:var(--c-ok);opacity:0;animation:k-ck-ok 3.4s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes k-ck-fita{0%,20%{opacity:1;transform:translateX(0)}
  46%,100%{opacity:.35;transform:translateX(0)}}
@keyframes k-ck-ok{0%,34%{opacity:0;transform:scale(.3)}
  48%,84%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}

/* ══ 7 · e-mail ══ os envelopes saem em fila */
.cn-email i{left:0;top:13px;width:22px;height:15px;border-radius:3px;
  background:var(--c-fogo);opacity:0;animation:k-mail 3.2s cubic-bezier(.4,0,.5,1) infinite}
.cn-email i:nth-child(2){animation-delay:.34s;background:#FF8B2A}
.cn-email i:nth-child(3){animation-delay:.68s;background:var(--c-ouro)}
@keyframes k-mail{0%{opacity:0;transform:translateX(0) scale(.7)}
  16%{opacity:1;transform:translateX(8px) scale(1)}
  70%{opacity:1;transform:translateX(52px) scale(1)}
  86%,100%{opacity:0;transform:translateX(70px) scale(.8)}}

/* ══ 8 · agenda ══ o horário é preenchido e confirmado */
.cn-agenda i{top:4px;width:13px;height:22px;border-radius:4px;background:var(--c-neu2);
  box-shadow:inset 0 0 0 1.5px var(--c-neu)}
.cn-agenda i:nth-child(1){left:0} .cn-agenda i:nth-child(2){left:18px}
.cn-agenda i:nth-child(3){left:36px} .cn-agenda i:nth-child(4){left:54px}
.cn-agenda em{left:36px;top:4px;width:13px;height:0;border-radius:4px;background:var(--c-fogo);
  animation:k-ag 3.8s cubic-bezier(.4,0,.2,1) infinite}
.cn-agenda b{left:36px;top:30px;width:13px;height:5px;border-radius:5px;background:var(--c-ok);
  opacity:0;animation:k-ag-ok 3.8s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes k-ag{0%,10%{height:0}34%,84%{height:22px}96%,100%{height:0}}
@keyframes k-ag-ok{0%,40%{opacity:0;transform:scale(.3)}
  54%,84%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}

/* ══ 9 · ligação ══ a onda da chamada correndo, com o ponto de gravação */
.cn-ligacao i{bottom:0;width:5px;border-radius:5px;background:var(--c-neu);
  transform-origin:center bottom;animation:k-onda 1.6s ease-in-out infinite}
.cn-ligacao i:nth-child(1){left:16px;height:12px}
.cn-ligacao i:nth-child(2){left:25px;height:24px;animation-delay:.12s}
.cn-ligacao i:nth-child(3){left:34px;height:34px;animation-delay:.24s;background:var(--c-fogo)}
.cn-ligacao i:nth-child(4){left:43px;height:22px;animation-delay:.36s}
.cn-ligacao i:nth-child(5){left:52px;height:30px;animation-delay:.48s}
.cn-ligacao i:nth-child(6){left:61px;height:14px;animation-delay:.6s}
.cn-ligacao em{left:0;top:15px;width:9px;height:9px;border-radius:50%;background:#E63946;
  animation:k-rec 1.6s ease-in-out infinite}
@keyframes k-onda{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.32)}}
@keyframes k-rec{0%,100%{opacity:1}50%{opacity:.3}}

/* ══ 10 · posts ══ um post vira seis */
.cn-posts em{left:0;top:13px;width:15px;height:15px;border-radius:5px;background:var(--c-fogo)}
.cn-posts i{left:24px;width:11px;height:11px;border-radius:4px;opacity:0}
.cn-posts i:nth-child(2){top:1px;background:var(--c-ouro);animation:k-post 3.4s .05s cubic-bezier(.3,1.2,.5,1) infinite}
.cn-posts i:nth-child(3){top:15px;background:var(--c-uva);animation:k-post 3.4s .2s cubic-bezier(.3,1.2,.5,1) infinite}
.cn-posts i:nth-child(4){top:29px;background:#A855F7;animation:k-post 3.4s .35s cubic-bezier(.3,1.2,.5,1) infinite}
.cn-posts i:nth-child(5){top:8px;background:#FF8B2A;animation:k-post2 3.4s .5s cubic-bezier(.3,1.2,.5,1) infinite}
@keyframes k-post{0%,10%{opacity:0;transform:translateX(-18px) scale(.4)}
  30%,80%{opacity:1;transform:translateX(0) scale(1)}
  94%,100%{opacity:0;transform:translateX(-18px) scale(.4)}}
@keyframes k-post2{0%,10%{opacity:0;transform:translate(-18px,0) scale(.4)}
  30%,80%{opacity:1;transform:translate(26px,0) scale(1)}
  94%,100%{opacity:0;transform:translate(-18px,0) scale(.4)}}

/* ══ 11 · blog ══ o resultado sobe da última para a primeira posição */
.cn-blog i,.cn-blog em{left:0;height:8px;border-radius:8px;background:var(--c-neu)}
.cn-blog i:nth-child(1){top:1px;width:60px}
.cn-blog i:nth-child(2){top:12px;width:52px}
.cn-blog i:nth-child(3){top:23px;width:56px}
.cn-blog em{top:34px;width:44px;background:var(--c-fogo);
  animation:k-blog 4.2s cubic-bezier(.5,0,.2,1) infinite}
@keyframes k-blog{0%,14%{transform:translateY(0)}32%{transform:translateY(-11px)}
  50%{transform:translateY(-22px)}68%,88%{transform:translateY(-33px)}
  98%,100%{transform:translateY(0)}}

/* ══ 12 · reputação ══ as estrelas enchem e a nota fecha */
.cn-reputacao i{top:9px;width:13px;height:13px;background:var(--c-neu);
  clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 57%,79% 92%,50% 71%,21% 92%,32% 57%,4% 35%,39% 35%);
  animation:k-star 4.2s cubic-bezier(.3,1.5,.5,1) infinite}
.cn-reputacao i:nth-child(1){left:0}
.cn-reputacao i:nth-child(2){left:16px;animation-delay:.15s}
.cn-reputacao i:nth-child(3){left:32px;animation-delay:.3s}
.cn-reputacao i:nth-child(4){left:48px;animation-delay:.45s}
.cn-reputacao em{left:0;bottom:2px;width:0;height:4px;border-radius:4px;background:var(--c-ouro);
  animation:k-star-n 4.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes k-star{0%,8%{background:var(--c-neu);transform:scale(1)}
  18%{background:var(--c-ouro);transform:scale(1.25)}
  26%,84%{background:var(--c-ouro);transform:scale(1)}
  96%,100%{background:var(--c-neu);transform:scale(1)}}
@keyframes k-star-n{0%,8%{width:0}70%,84%{width:61px}96%,100%{width:0}}

/* ══ 13 · membros ══ as aulas vão sendo concluídas */
.cn-membros i{left:14px;height:6px;border-radius:6px;background:var(--c-neu)}
.cn-membros i:nth-child(1){top:2px;width:54px}
.cn-membros i:nth-child(2){top:14px;width:46px}
.cn-membros i:nth-child(3){top:26px;width:50px}
.cn-membros em{left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--c-ok);
  animation:k-aula 4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes k-aula{0%,10%{transform:translateY(0);opacity:1}
  34%,44%{transform:translateY(12px)}66%,86%{transform:translateY(24px)}
  94%,100%{transform:translateY(0);opacity:1}}

/* ══ 14 · comunidade ══ as pessoas chegam em volta */
.cn-comunidade em{left:32px;top:14px;width:14px;height:14px;border-radius:50%;
  background:var(--c-fogo)}
.cn-comunidade i{width:11px;height:11px;border-radius:50%;background:var(--c-neu);opacity:0;
  animation:k-gente 3.8s cubic-bezier(.3,1.4,.5,1) infinite}
.cn-comunidade i:nth-child(2){left:10px;top:2px}
.cn-comunidade i:nth-child(3){left:58px;top:5px;animation-delay:.22s;background:#F0C9A8}
.cn-comunidade i:nth-child(4){left:16px;top:27px;animation-delay:.44s;background:#EBD3B8}
.cn-comunidade i:nth-child(5){left:54px;top:26px;animation-delay:.66s}
@keyframes k-gente{0%,10%{opacity:0;transform:scale(.2)}
  28%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.2)}}

/* ══ 15 · contratos ══ a assinatura é riscada, com a caneta na ponta */
.cn-contratos i{left:6px;height:5px;border-radius:5px;background:var(--c-neu)}
.cn-contratos i:nth-child(1){top:3px;width:58px}
.cn-contratos i:nth-child(2){top:13px;width:44px}
.cn-contratos::before{content:"";position:absolute;left:6px;bottom:6px;width:62px;height:1.5px;
  border-radius:2px;background:var(--c-neu)}
.cn-contratos em{left:6px;bottom:8px;width:62px;height:11px;background:var(--c-uva);
  clip-path:polygon(0 78%,6% 40%,10% 86%,17% 22%,24% 88%,31% 34%,39% 80%,48% 46%,58% 74%,70% 50%,84% 66%,100% 56%,100% 70%,84% 80%,70% 64%,58% 88%,48% 60%,39% 94%,31% 48%,24% 100%,17% 36%,10% 100%,6% 54%,0 92%);
  transform-origin:left center;animation:k-assina 4.4s cubic-bezier(.35,0,.25,1) infinite}
.cn-contratos::after{content:"";position:absolute;left:4px;bottom:10px;width:6px;height:6px;
  border-radius:50%;background:var(--c-tinta);opacity:0;
  animation:k-caneta 4.4s cubic-bezier(.35,0,.25,1) infinite}
@keyframes k-assina{0%,8%{transform:scaleX(0)}44%,86%{transform:scaleX(1)}
  96%,100%{transform:scaleX(0)}}
@keyframes k-caneta{0%,6%{transform:translateX(0);opacity:0}
  12%{opacity:1}44%{transform:translateX(60px);opacity:1}
  54%,100%{transform:translateX(60px);opacity:0}}

/* ══ 16 · relatórios ══ as barras crescem e o ponto traça a tendência */
.cn-relatorios i{bottom:0;width:12px;border-radius:4px 4px 2px 2px;transform-origin:center bottom;
  background:linear-gradient(180deg,var(--c-ouro),var(--c-fogo));
  animation:k-barra 4s cubic-bezier(.4,0,.2,1) infinite}
.cn-relatorios i:nth-child(1){left:2px;height:14px}
.cn-relatorios i:nth-child(2){left:19px;height:22px;animation-delay:.12s}
.cn-relatorios i:nth-child(3){left:36px;height:18px;animation-delay:.24s}
.cn-relatorios i:nth-child(4){left:53px;height:32px;animation-delay:.36s}
.cn-relatorios em{left:5px;bottom:12px;width:7px;height:7px;border-radius:50%;
  background:var(--c-uva);box-shadow:0 0 0 2.5px #FFF;
  animation:k-tend 4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes k-barra{0%,8%{transform:scaleY(.06)}32%,84%{transform:scaleY(1)}
  96%,100%{transform:scaleY(.06)}}
@keyframes k-tend{0%,30%{transform:translate(0,0);opacity:0}
  38%{opacity:1}50%{transform:translate(17px,-8px)}62%{transform:translate(34px,-4px)}
  76%,86%{transform:translate(51px,-18px);opacity:1}96%,100%{transform:translate(0,0);opacity:0}}

/* ══ 17 · integrações ══ as duas metades se encaixam */
.cn-integracoes i{top:12px;width:30px;height:16px;background:var(--c-neu2);
  box-shadow:inset 0 0 0 1.5px var(--c-neu)}
.cn-integracoes i:nth-child(1){left:0;border-radius:8px 3px 3px 8px;
  animation:k-encaixa-e 3.6s cubic-bezier(.5,0,.2,1) infinite}
.cn-integracoes i:nth-child(2){right:0;border-radius:3px 8px 8px 3px;
  animation:k-encaixa-d 3.6s cubic-bezier(.5,0,.2,1) infinite}
.cn-integracoes em{left:50%;margin-left:-5px;top:15px;width:10px;height:10px;border-radius:50%;
  background:var(--c-ouro);opacity:0;animation:k-faisca 3.6s ease-out infinite}
@keyframes k-encaixa-e{0%,10%{transform:translateX(-12px)}42%,84%{transform:translateX(0)}
  96%,100%{transform:translateX(-12px)}}
@keyframes k-encaixa-d{0%,10%{transform:translateX(12px)}42%,84%{transform:translateX(0)}
  96%,100%{transform:translateX(12px)}}
@keyframes k-faisca{0%,38%{opacity:0;transform:scale(.3)}
  46%{opacity:1;transform:scale(1)}66%,100%{opacity:0;transform:scale(1.8)}}

/* ══ 18 · MCP ══ o pedido é digitado e a conta executa.
   A barra escura da versão anterior parecia carregamento, e ainda por cima
   estava fora da paleta. Três blocos curtos surgindo em sequência leem como
   palavras sendo escritas; o que cresce embaixo é a conta obedecendo. */
.cn-mcp b{top:3px;height:6px;border-radius:6px;background:#B8A992;width:0;
  animation:k-mcp-p 4.2s cubic-bezier(.4,0,.2,1) infinite}
.cn-mcp b:nth-child(1){left:0}
.cn-mcp b:nth-child(2){left:20px;animation-delay:.24s}
.cn-mcp b:nth-child(3){left:44px;animation-delay:.48s}
.cn-mcp em{top:1px;width:2px;height:10px;border-radius:2px;background:var(--c-fogo);
  animation:k-mcp-c 4.2s cubic-bezier(.4,0,.2,1) infinite,k-pisca .85s step-end infinite}
.cn-mcp i{left:0;bottom:2px;width:0;height:17px;border-radius:6px;
  background:linear-gradient(90deg,var(--c-fogo),var(--c-uva));
  animation:k-mcp-r 4.2s cubic-bezier(.3,1.2,.5,1) infinite}
@keyframes k-mcp-p{0%,6%{width:0}22%,84%{width:16px}96%,100%{width:0}}
@keyframes k-mcp-c{0%,6%{left:0}22%{left:18px}46%{left:38px}
  70%,84%{left:62px}96%,100%{left:0}}
@keyframes k-pisca{50%{opacity:0}}
@keyframes k-mcp-r{0%,50%{width:0;opacity:0}
  66%,86%{width:72px;opacity:1}96%,100%{width:0;opacity:0}}

/* Quem pediu menos movimento vê o desenho parado, não some com ele. As peças
   que começam invisíveis ou com largura zero precisam voltar, senão a cena
   fica pela metade. */
@media (prefers-reduced-motion:reduce){
  .cta-cena *,.cta-cena::before,.cta-cena::after{animation:none!important}
  .cta-cena i,.cta-cena em,.cta-cena b{opacity:1;transform:none}
  .cn-crm b{width:14px;transform:translateX(54px)}
  .cn-sites i{width:44px} .cn-agenda em{height:22px}
  .cn-reputacao i{background:var(--c-ouro)} .cn-reputacao em{width:61px}
  .cn-automacoes i{background:var(--c-fogo)} .cn-automacoes em{opacity:0}
  .cn-contratos em{transform:scaleX(1)}
  .cn-mcp b{width:16px} .cn-mcp em{left:62px} .cn-mcp i{width:72px}
  .cn-posts i:nth-child(5){transform:translateX(26px)}
}

@media (max-width:900px){ .cta-h2{font-size:26px}
  .cta-grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .cta-sec{padding:52px 16px}
  .cta-grade{grid-template-columns:1fr;gap:12px}
  .cta-i{padding:66px 18px 20px}
}



/* ══ A GARANTIA NO FIM DO CHECKOUT ══
   Mesma voz do fecho da home, em caixa própria. Só o /seuplano usa: é a
   última coisa antes do rodapé legal, quando a pessoa já leu tudo e volta a
   decidir. */
.gar-fim{background:var(--off-white);padding:var(--sp-16) var(--sp-6) var(--sp-12)}
.gar-cx{max-width:660px;margin:0 auto;text-align:center;position:relative;
  border:1.5px solid transparent;border-radius:26px;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             linear-gradient(124deg,#FFB800,#FF6B35 46%,#FF3D7F) border-box;
  box-shadow:0 30px 70px rgba(10,10,11,.08);padding:var(--sp-10) var(--sp-8) var(--sp-8)}
/* o --px precisa vir daqui: .msc--g o declara no próprio elemento e ganha da
   herança, deixando o mascote grande demais para esta caixa */
.gar-fim .gar-msc{--px:5px;margin:0 auto var(--sp-4)}
.gar-kick{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nucleo-laranja)}
.gar-h2{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:400;
  font-size:clamp(1.625rem,1.2rem + 1.7vw,2.375rem);line-height:1.08;letter-spacing:-.03em;
  color:var(--preto);margin:10px 0 0;text-wrap:balance}
.gar-h2 em{font-style:italic;background:linear-gradient(100deg,#FF6B35,#FF3D7F);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gar-sub{font-size:1rem;line-height:1.6;color:var(--gray-body);margin:14px auto 0;max-width:46ch}
.gar-bt{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--sp-6);
  background:linear-gradient(100deg,#FF8B2A,#FF3D7F);color:#FFF;text-decoration:none;
  font-weight:600;font-size:1rem;line-height:1;padding:16px 30px;border-radius:999px;
  box-shadow:0 14px 30px -14px rgba(255,90,60,.9);transition:transform .16s ease}
.gar-bt:hover{transform:translateY(-1px)}
.gar-micro{font-size:.8125rem;line-height:1.5;color:var(--gray-texto);margin:14px auto 0;max-width:48ch}
.gar-micro a{color:var(--gray-body)}
@media (max-width:620px){
  .gar-fim{padding:var(--sp-12) var(--sp-4) var(--sp-10)}
  .gar-cx{padding:var(--sp-8) var(--sp-5) var(--sp-6)}
  .gar-bt{display:flex;width:100%;padding:15px 20px}
}

/* A barra do plano escolhido é fixa e flutua sobre o pé da página. A folga
   vai no último elemento, que é o rodapé legal: sem ela a barra cobre o fim
   da caixa da garantia e a linha dos termos justamente para quem rolou até
   o fim, que é quem o bloco existe para convencer. */
body:has(.pl-fix[data-on="true"]) .pl-legal{padding-bottom:96px}