/* /captador-de-clientes — o que o kit não cobre na página de redes sociais da a referência: a hero com o título à esquerda e os quatro
   cartões em 2 × 2 à direita (ícone em caixa no alto, nome e número embaixo, "Saiba mais" que sobe no hover), a foto da feira
   sob o título (no lugar do planeta e dos rostos, 29/10/2026), os alcances em pílula e os canais, as duas figuras com o cartão que passa sozinho
   e os pontos, e o texto de SEO com "Ler tudo".
   Celular copia a composição da a referência no celular: título e cartões 2 × 2, a mesma foto inteira, canais lado a lado, as figuras
   com o cartão por cima. Só transform/opacity na animação; menos movimento no fim. */

/* ---------- o cartão da casa (borda clara em gradiente sobre o preto, o mesmo das outras guias) ---------- */
.p-capt-c{position:relative;min-width:0;border:1px solid transparent;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 120% at 0 0,#171717 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box}

/* ---------- hero: os quatro cartões das redes viram as quatro ferramentas ---------- */
.p-capt-rd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,460px);margin:4px auto 0}
.p-capt-rc{display:grid;grid-template-rows:auto 1fr;align-content:space-between;gap:14px;min-height:112px;padding:14px;text-align:left;text-decoration:none;color:#fff}
.p-capt-rc-i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset}
.p-capt-rc-i .ic{width:18px;height:18px}
.p-capt-rc-t{display:grid;align-self:end;gap:2px;min-width:0}
.p-capt-rc-t b{font-size:1rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.p-capt-rc-t span{font-size:.875rem;line-height:1.15;color:rgba(255,255,255,.55)}
.p-capt-rc-v{display:none}

/* ---------- 1. onde o captador encontra clientes: a foto da feira, os alcances e os canais ---------- */
.p-capt-s-onde{isolation:isolate}
/* o título em duas linhas, centrado, como o da a referência */
.p-capt-s-onde .lp-h2 .g{display:block}
.p-capt-mundo{display:grid;justify-items:center;gap:20px;margin-top:20px;text-align:center}
/* a foto funde com o preto da página: as quatro bordas somem em degradê RETO (dois lineares cruzados, nunca radial nem oval);
   o pé some mais longo, para as abas subirem por cima do chão da feira */
.p-capt-ft{position:relative;width:min(100%,820px);margin:0;aspect-ratio:3/2;contain:paint;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 66%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 66%,transparent);mask-composite:intersect}
.p-capt-ft img{display:block;width:100%;height:100%;object-fit:cover}
.p-capt-ft+[data-abas]{margin-top:-9%}
.p-capt-mundo [data-abas]{display:grid;justify-items:center;gap:16px;width:100%}
.p-capt-mundo .lp-abas{margin:0}
/* as abas não escolhidas sobem por cima do pé da foto: fundo escuro próprio para o texto não sumir na camisa */
.p-capt-mundo .lp-abas button[aria-selected="false"]{background:rgba(10,10,10,.78);color:#d6d6d6}
.p-capt-mundo .lp-painel{display:grid;justify-items:center;gap:14px;width:100%}
.p-capt-mundo .lp-painel[hidden]{display:none}
.p-capt-al{max-width:34em;font-size:.9375rem;line-height:1.45;color:var(--lp-mut2);text-wrap:balance}
.p-capt-cn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:560px;margin:0;padding:0;list-style:none}
.p-capt-cn li{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:0 8px;border-radius:12px;
  font-size:.8125rem;font-weight:600;line-height:1.1;color:#fff;background:#1a1a1a;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-capt-cn .ic{flex:none;width:18px;height:18px;color:var(--red-hi)}
.p-capt-cn .lg{display:none}
.p-capt-dg{max-width:36em;font-size:.875rem;line-height:1.45;color:var(--lp-mut)}
.p-capt-dg a{color:var(--tx);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}

/* ---------- 2. um dia de captação: as duas figuras e o cartão que passa sozinho ---------- */
.p-capt-ac{display:block;color:var(--red-hi)}
.p-capt-dupla{display:grid;justify-items:center;margin-top:12px}
.p-capt-fig{position:relative;width:100%;max-width:640px;height:250px;isolation:isolate}
.p-capt-fig img{position:absolute;height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}
.p-capt-fig-a{left:4%;top:4%;width:56%;opacity:.7;z-index:-1}
.p-capt-fig-b{right:2%;top:10%;width:70%}
.p-capt-sl{display:grid;gap:10px;width:min(100%,520px);margin:-48px 0 0;padding:0;list-style:none}
.p-capt-sl li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:4px;padding:14px 16px;text-align:left;
  background:rgba(16,16,16,.78) padding-box,linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)) border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-capt-sl-n{grid-row:1/span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;font-size:.9375rem;font-weight:700;color:#fff;background:#a51d15}
.p-capt-sl h3{font-size:1rem;line-height:1.15;font-weight:600;color:#fff}
.p-capt-sl p{font-size:.875rem;line-height:1.4;color:var(--lp-mut2);text-wrap:pretty}
.p-capt-dots{display:none;gap:6px;margin-top:18px}
.p-capt-dots i{position:relative;width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.p-capt-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}

/* ---------- 3. o texto de SEO em três colunas, cortado com fade até o "Ler tudo" ---------- */
.p-capt-seo{position:relative;display:grid;justify-items:start;margin-top:clamp(24px,4vw,48px)}
.p-capt-lt{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.p-capt-seo-c{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.p-capt-seo .lp-txt{display:grid;gap:28px;max-width:none;font-size:.875rem;line-height:1.45}
.p-capt-seo .lp-txt h2{margin:0 0 16px;font-size:1.25rem;line-height:1;font-weight:500;color:rgba(255,255,255,.72)}
.p-capt-lt:checked~.p-capt-seo-c{max-height:none;-webkit-mask-image:none;mask-image:none}
.p-capt-lt-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;padding:0 16px;border-radius:12px;font-size:1rem;font-weight:500;color:#fff;background:#1d1d1d;cursor:pointer}
.p-capt-lt-b .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.p-capt-lt-b .l,.p-capt-lt:checked~.p-capt-lt-b .m{display:none}
.p-capt-lt:checked~.p-capt-lt-b .l{display:inline}
.p-capt-lt:checked~.p-capt-lt-b .ic{transform:rotate(180deg)}
.p-capt-lt:focus-visible~.p-capt-lt-b{outline:2px solid var(--red-hi);outline-offset:3px}

/* ---------- movimento (só transform/opacity) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* os cartões da hero sobem escalonados */
  /* backwards e não both: terminada a entrada, o hover e o toque voltam a mexer no transform */
  .p-capt-rc{animation:p-capt-sobe .7s var(--ease) backwards;animation-delay:calc(.25s + var(--d,0s))}
  .p-capt-rc:nth-child(2){--d:.07s}
  .p-capt-rc:nth-child(3){--d:.14s}
  .p-capt-rc:nth-child(4){--d:.21s}
  /* a foto assenta ao entrar: nasce 6% mais perto e volta ao quadro */
  .js-ok .p-capt-ft img{transition:transform 1.4s var(--ease)}
  .js-ok .p-capt-ft:not(.in) img{transform:scale(1.06)}
  /* as etapas passam sozinhas, uma a cada 4 s, com a barra do ponto enchendo (o carrossel de depoimentos da a referência) */
  .p-capt-sl{gap:0}
  .p-capt-sl li{grid-area:1/1;opacity:0;animation:p-capt-slide 20s linear infinite;animation-delay:calc(var(--n)*4s)}
  .p-capt-dots{display:flex}
  .p-capt-dots i::after{animation:p-capt-ponto 20s linear infinite;animation-delay:calc(var(--n)*4s)}
  .p-capt-fig-a{animation:p-capt-flut 9s ease-in-out infinite}
  .p-capt-fig-b{animation:p-capt-flut 8s ease-in-out -3s infinite}
}
@keyframes p-capt-sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes p-capt-slide{0%{opacity:0;transform:translateY(10px)}2.5%{opacity:1;transform:none}18%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes p-capt-ponto{0%{transform:scaleX(0)}20%{transform:scaleX(1)}20.01%,100%{transform:scaleX(0)}}
@keyframes p-capt-flut{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (hover:hover) and (pointer:fine){
  .p-capt-rc{transition:transform .25s var(--ease)}
  .p-capt-rc:hover{transform:translateY(-4px)}
  .p-capt-rc-t,.p-capt-rc-v{transition:transform .3s var(--ease),opacity .3s var(--ease)}
}
.p-capt-rc:active{transform:scale(.98)}

/* ---------- tablet ---------- */
@media (min-width:600px){
  .p-capt-rd{gap:12px;width:min(100%,520px)}
  .p-capt-rc{min-height:150px;padding:20px;border-radius:26px}
  .p-capt-rc-i{width:40px;height:40px;border-radius:10px}
  .p-capt-rc-i .ic{width:20px;height:20px}
  .p-capt-rc-t b,.p-capt-rc-t span{font-size:1.25rem}
  .p-capt-cn{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:none}
  .p-capt-cn li{padding:0 16px;font-size:.9375rem}
  .p-capt-cn .lg{display:inline}
  .p-capt-cn .sm{display:none}
  .p-capt-al{font-size:1rem}
  .p-capt-fig{height:400px}
  .p-capt-sl{margin-top:-72px}
  .p-capt-sl li{padding:18px 20px;border-radius:24px}
  .p-capt-sl h3{font-size:1.125rem}
  .p-capt-sl p{font-size:1rem}
  .p-capt-seo .lp-txt{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .p-capt-seo-c{max-height:240px}
}

/* ---------- computador (a referência: título à esquerda, cartões de 224 × 218 com raio 32 à direita; rostos de 130px) ---------- */
@media (min-width:1024px){
  .lp-hero-c{width:min(100%,1180px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr repeat(5,auto) 1fr;column-gap:64px;row-gap:20px;justify-items:start;text-align:left}
  .lp-hero-c>nav{grid-area:2/1}
  .lp-hero-c>.selo{grid-area:3/1}
  .lp-hero-c>.lp-h1{grid-area:4/1}
  .lp-hero-c>.lp-lede{grid-area:5/1}
  .lp-hero-c>.hero-cta{grid-area:6/1;justify-content:flex-start}
  .lp-hero-c>.lp-sub{grid-area:1/2/-1/3;align-self:center;width:100%}
  .lp-hero .lp-bc{justify-content:flex-start}
  .p-capt-rd{gap:16px;width:100%;margin:0}
  .p-capt-rc{min-height:218px;padding:28px 32px;border-radius:32px}
  .p-capt-rc-t b,.p-capt-rc-t span{font-size:1.5rem}
  .p-capt-rc-v{position:absolute;right:24px;top:28px;display:inline-flex;align-items:center;gap:2px;font-size:.9375rem;font-weight:600;color:var(--red-hi);opacity:0;transform:translateY(6px)}
  .p-capt-rc-v .ic{width:16px;height:16px}
  .p-capt-mundo{gap:28px;margin-top:32px}
  .p-capt-fig{max-width:720px;height:560px}
  .p-capt-sl{width:min(100%,560px);margin-top:-110px}
  .p-capt-sl li{padding:22px 26px;border-radius:28px}
  .p-capt-sl-n{width:40px;height:40px;border-radius:10px;font-size:1.0625rem}
  .p-capt-sl h3{font-size:1.25rem}
  .p-capt-dots i{width:32px}
  .p-capt-seo-c{max-height:200px}
  .p-capt-seo .lp-txt h2{font-size:1.5rem}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .p-capt-rc:hover .p-capt-rc-v{opacity:1;transform:none}
}

/* ---------- celular: a mesma composição, com a copy resumida ---------- */
@media (max-width:37.49rem){
  .p-capt-s-onde .lp-abas{gap:6px}
  .p-capt-s-onde .lp-abas button{padding:0 12px;font-size:.8125rem}
}
@media (max-width:21.99rem){
  .p-capt-rc-t span{font-size:.8125rem}
  .p-capt-cn li{gap:4px;padding:0 4px;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .p-capt-rc{animation:p-capt-some .3s linear both}
}
@keyframes p-capt-some{from{opacity:0}to{opacity:1}}