/* /ganhar-dinheiro-indicando — o que o kit não cobre na página do Kingfin da a referência: o leque de moedas do hero, os três cartões
   altos com o valor grande (o 1º com o arco) e os dois largos, os três cartões de imagem, a frase sobre o símbolo gigante, os seis
   cartões de ícone e os dois largos com a peça, os três cartões do "Como funciona", a faixa em cor e o texto de SEO com "Ler tudo".
   Celular copia a composição do computador: o que lá é fileira de três continua fileira de três em 360px, com a descrição escondida;
   os seis cartões e os dois largos ficam em duas colunas. Só transform/opacity na animação; menos movimento no fim. */

/* ---------- o cartão da casa (borda clara em gradiente sobre o preto, o mesmo do afiliado-precisa-de-cnpj) ---------- */
.p-indica-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}
.p-indica-c h3{font-size:1rem;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-indica-c p{font-size:.8125rem;line-height:1.4;color:var(--lp-mut2);text-wrap:pretty}
.p-indica-ic{display:grid;place-items:center;width:28px;height:28px;color:var(--red-hi)}
.p-indica-ic .ic{width:24px;height:24px}
.p-indica-bt{display:flex;justify-content:center;margin-top:clamp(28px,4vw,56px)}
.p-indica-so-pc{display:none}

/* ---------- hero: o leque de moedas atrás do título (as moedas pretas do Kingfin) ---------- */
#topo{overflow:clip}
.p-indica-leque{--r:172px;--d:118px;position:absolute;left:50%;top:44%;z-index:-1;width:0;height:0;pointer-events:none}
.p-indica-moeda{position:absolute;left:calc(var(--d)/-2);top:calc(var(--d)/-2);width:var(--d);height:var(--d);border-radius:50%;contain:paint;
  transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1)) rotate(calc(var(--a) + 90deg)) scaleY(.58);
  box-shadow:0 9px 0 #1a0705,0 0 0 1px rgba(255,140,128,.14) inset;filter:brightness(.3) saturate(.65)}
/* a imagem amplia 1,3× para a borda da arte sumir; contain:paint recorta o círculo (segue o raio) sem virar curativo de overflow e sem cortar a sombra da espessura */
.p-indica-moeda img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
/* as de baixo, atrás dos botões, apagam mais (na a referência somem no preto) */
.p-indica-moeda:nth-child(n+5):nth-child(-n+9){opacity:.45}

/* ---------- 1. os modelos: três altos + dois largos ---------- */
.p-indica-mod{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.p-indica-alto{grid-column:span 2;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;text-align:center;min-height:200px;padding:16px 8px 14px}
.p-indica-alto h3{font-size:.9375rem}
.p-indica-arco{position:absolute;left:-18%;top:44%;width:96%;fill:none;stroke-linecap:round;pointer-events:none}
.p-indica-arco .t{stroke:rgba(255,255,255,.08);stroke-width:22}
.p-indica-arco .f{stroke:url(#p-indica-g);stroke-width:22;stroke-dasharray:72 100}
.p-indica-v{position:relative;display:grid;justify-items:center;align-content:end;grid-row:3}
.p-indica-v small{font-size:.8125rem;line-height:1.2;color:#fff}
.p-indica-v b{display:flex;align-items:baseline;gap:2px;font-size:2.5rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.p-indica-v b i{font-style:normal;font-size:.45em;letter-spacing:0}
.p-indica-v span{font-size:.8125rem;line-height:1.2;color:var(--lp-mut2)}
.p-indica-largo{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 10px;padding:14px}
.p-indica-largo p{grid-column:1/-1}

/* ---------- 2. de onde vêm as indicações: três cartões de imagem com o texto por cima ---------- */
.p-indica-quem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.p-indica-q{position:relative;display:grid;align-content:end;min-width:0;min-height:220px;padding:12px 10px;border-radius:22px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.p-indica-q img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.p-indica-q::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 62%,rgba(0,0,0,.92))}
.p-indica-q h3{font-size:.9375rem;line-height:1.15;font-weight:600;color:#fff;text-wrap:balance}
.p-indica-q p{display:none;margin-top:8px;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---------- 3. a frase grande sobre o elo gigante ---------- */
.p-indica-frase{position:relative;display:grid;place-items:center;min-height:340px;text-align:center;isolation:isolate}
.p-indica-elo{position:absolute;left:50%;top:50%;z-index:-1;width:min(86vw,600px);height:auto;translate:-50% -50%;fill:none;stroke:#1b1b1b;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.p-indica-frase-t{max-width:760px;font-size:clamp(1.5rem,.9rem + 2.8vw,3.5rem);line-height:1.04;font-weight:600;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.p-indica-frase-t .a{color:var(--red-hi)}

/* ---------- 4. o que você recebe: seis de ícone + dois largos com a peça ---------- */
.p-indica-rec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.p-indica-r{display:grid;align-content:start;gap:8px;padding:16px 14px}
.p-indica-rec2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.p-indica-r2{display:grid;align-content:start;gap:8px;min-height:190px;padding:16px 14px}
.p-indica-r2>div{position:relative;z-index:1;display:grid;gap:8px;max-width:100%}
.p-indica-r2-m{position:absolute;right:-22%;bottom:-14%;width:84%;height:auto;opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}

/* ---------- 5. como funciona: três cartões com a peça embaixo ---------- */
.p-indica-como{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
/* a peça sangra pela borda de baixo do cartão de propósito (como na a referência): o cartão recorta a pintura com contain:paint, que segue o raio */
.p-indica-cf{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;text-align:center;gap:8px;padding:16px 8px 0;overflow:visible;contain:paint}
.p-indica-cf h3{font-size:.9375rem}
.p-indica-cf h3 .a{color:var(--red-hi)}
.p-indica-cf p{display:none}
/* a caixa da imagem cabe no cartão (100%) e a escala de 1,3× a leva ao tamanho de antes; a margem de cima (0,3 × 2/3 da largura = 20%) guarda a altura que a escala ocupa */
.p-indica-cf img{--esc:1.3;align-self:end;width:100%;max-width:100%;height:auto;margin:20% 0 -8%;transform:scale(var(--esc));transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}

/* ---------- 6. a faixa em cor (a faixa verde do Kingfin, na cor da LA, com o texto branco) ---------- */
.p-indica-fx{display:grid;justify-items:center;gap:16px;padding:32px 16px 20px;border-radius:24px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#c8261c 0,#a51d15 55%,#6a140e);box-shadow:0 0 0 1px rgba(255,140,128,.35) inset}
.p-indica-fx-marca{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:#fff}
.p-indica-fx-elo{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.p-indica-fx-t{max-width:760px;font-size:clamp(1.5rem,.8rem + 3vw,3.5rem);line-height:1.04;font-weight:600;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.p-indica-fx-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:8px 0 0;padding:0;list-style:none}
.p-indica-fx-r li{display:grid;align-content:center;gap:2px;min-width:0;min-height:56px;padding:8px 6px;border-radius:12px;background:rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.p-indica-fx-r b{font-size:.9375rem;line-height:1.1;font-weight:700;color:#fff;white-space:nowrap}
.p-indica-fx-r span{font-size:.8125rem;line-height:1.2;color:rgba(255,255,255,.86)}

/* ---------- 7. o texto de SEO em três colunas, cortado com fade até o "Ler tudo" ---------- */
.p-indica-seo{position:relative;display:grid;justify-items:start}
.p-indica-lt{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.p-indica-seo-c{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.p-indica-seo .lp-txt{display:grid;gap:28px;max-width:none;font-size:.875rem;line-height:1.45}
.p-indica-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-indica-lt:checked~.p-indica-seo-c{max-height:none;-webkit-mask-image:none;mask-image:none}
.p-indica-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-indica-lt-b .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.p-indica-lt-b .l,.p-indica-lt:checked~.p-indica-lt-b .m{display:none}
.p-indica-lt:checked~.p-indica-lt-b .l{display:inline}
.p-indica-lt:checked~.p-indica-lt-b .ic{transform:rotate(180deg)}
.p-indica-lt:focus-visible~.p-indica-lt-b{outline:2px solid var(--red-hi);outline-offset:3px}

/* ---------- movimento (só transform/opacity) ---------- */
@media (prefers-reduced-motion:no-preference){
  .p-indica-leque{animation:p-indica-gira 140s linear infinite}
  .p-indica-moeda{animation:p-indica-entra 1s var(--ease) both;animation-delay:calc(var(--n)*.06s)}
  .js-ok .p-indica-alto .p-indica-arco .f{transition:stroke-dashoffset 1.4s var(--ease) .3s}
  .js-ok .p-indica-alto:not(.in) .p-indica-arco .f{stroke-dashoffset:72}
  .js-ok .p-indica-alto .p-indica-v b{transition:transform .9s var(--ease) .2s,opacity .6s var(--ease) .2s}
  .js-ok .p-indica-alto:not(.in) .p-indica-v b{opacity:0;transform:translateY(18px)}
  .js-ok .p-indica-cf img{transition:transform 1s var(--ease) .15s}
  .js-ok .p-indica-cf:not(.in) img{transform:translateY(40px) scale(calc(var(--esc) * .94))}
  .js-ok .p-indica-q img{transition:transform 1.2s var(--ease)}
  .js-ok .p-indica-q:not(.in) img{transform:scale(1.08)}
  .p-indica-elo{animation:p-indica-flut 9s ease-in-out infinite}
}
@keyframes p-indica-gira{to{rotate:360deg}}
@keyframes p-indica-entra{from{opacity:0}to{opacity:1}}
@keyframes p-indica-flut{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@media (hover:hover) and (pointer:fine){
  .p-indica-c,.p-indica-q{transition:transform .25s var(--ease)}
  .p-indica-c:hover,.p-indica-q:hover{transform:translateY(-4px)}
}

/* ---------- tablet ---------- */
@media (min-width:600px){
  .p-indica-leque{--r:230px;--d:124px}
  .p-indica-mod,.p-indica-quem,.p-indica-como{gap:14px}
  .p-indica-alto{min-height:300px;padding:28px 16px 22px}
  .p-indica-alto h3,.p-indica-q h3,.p-indica-cf h3{font-size:1.25rem}
  .p-indica-so-pc{display:block;margin-top:10px;font-size:.9375rem}
  .p-indica-v b{font-size:3.5rem}
  .p-indica-largo{padding:22px 24px}
  .p-indica-largo h3{font-size:1.25rem}
  .p-indica-largo p,.p-indica-r p,.p-indica-r2 p{font-size:.9375rem}
  .p-indica-q{min-height:340px;padding:20px 18px}
  .p-indica-q p{display:block;font-size:.9375rem}
  .p-indica-rec{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .p-indica-rec2{gap:14px;margin-top:14px}
  .p-indica-r,.p-indica-r2{padding:24px 22px}
  .p-indica-r h3,.p-indica-r2 h3{font-size:1.25rem}
  .p-indica-cf p{display:block;font-size:.9375rem}
  .p-indica-fx{padding:48px 32px 28px;border-radius:32px}
  .p-indica-fx-r{grid-template-columns:repeat(6,minmax(0,1fr))}
  .p-indica-seo .lp-txt{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .p-indica-seo-c{max-height:240px}
}

/* ---------- computador (a referência: coluna de 944px, cartões de raio 40, valor de 80px, frase de 56px) ---------- */
@media (min-width:1024px){
  .p-indica-leque{--r:330px;--d:190px;top:46%}
  .p-indica-c,.p-indica-q{border-radius:40px}
  .p-indica-mod,.p-indica-quem,.p-indica-como,.p-indica-rec{gap:18px}
  .p-indica-alto{min-height:424px;padding:44px 32px 36px}
  .p-indica-alto h3,.p-indica-q h3,.p-indica-cf h3,.p-indica-largo h3,.p-indica-r h3,.p-indica-r2 h3{font-size:1.5rem}
  .p-indica-so-pc,.p-indica-largo p,.p-indica-r p,.p-indica-r2 p,.p-indica-cf p,.p-indica-q p{font-size:1rem;line-height:1.5}
  .p-indica-v small{font-size:1rem}
  .p-indica-v b{font-size:5rem}
  .p-indica-v span{font-size:1rem}
  .p-indica-largo{min-height:152px;padding:32px}
  .p-indica-q{min-height:424px;padding:32px}
  .p-indica-frase{min-height:620px}
  .p-indica-r{min-height:280px;gap:12px;padding:32px}
  .p-indica-r .p-indica-ic{margin-bottom:8px}
  .p-indica-ic{width:32px;height:32px}
  .p-indica-ic .ic{width:28px;height:28px}
  .p-indica-rec2{gap:18px;margin-top:18px}
  .p-indica-r2{min-height:262px;padding:32px;align-content:space-between}
  .p-indica-r2>div{max-width:58%}
  .p-indica-r2-m{right:-12%;bottom:-18%;width:62%;opacity:.9}
  .p-indica-cf{min-height:390px;padding:44px 28px 0;gap:14px}
  .p-indica-cf img{--esc:1.18;margin-top:12%;margin-bottom:-12%}
  .p-indica-fx{gap:28px;padding:64px 56px 0;border-radius:40px}
  .p-indica-fx-marca{font-size:1.5rem;gap:10px}
  .p-indica-fx-elo{width:40px;height:40px}
  .p-indica-fx-r{gap:12px;margin:24px 0 -1px;padding-bottom:40px}
  .p-indica-fx-r li{min-height:72px;border-radius:16px}
  .p-indica-fx-r b{font-size:1.125rem}
  .p-indica-seo-c{max-height:200px}
  .p-indica-seo .lp-txt h2{font-size:1.5rem}
}

/* ---------- celular: a mesma composição, com a copy resumida e as colunas apertadas ---------- */
@media (max-width:37.49rem){
  .p-indica-largo h3,.p-indica-r h3,.p-indica-r2 h3{font-size:.9375rem}
  .p-indica-r p{display:none}
  .p-indica-r{padding:14px 12px}
  .p-indica-q,.p-indica-c{border-radius:18px}
  .p-indica-fx-r b{font-size:.8125rem}
  .p-indica-fx-r span{font-size:.75rem}
}
@media (max-width:21.99rem){
  .p-indica-v b{font-size:2rem}
  .p-indica-alto h3,.p-indica-q h3,.p-indica-cf h3{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  .p-indica-moeda{animation:p-indica-some .3s linear both}
}
@keyframes p-indica-some{from{opacity:0}to{opacity:1}}