/* /marketing-de-indicacao — o que o kit não cobre na página do app para desktop da a referência: a fileira de botões de plataforma do
   hero, os cartões no formato do cartão de ativo (ícone, nome, valor grande, variação em cor, linha do gráfico e botão), a lista
   de contas em vidro com a linha acesa e a figura ao lado, os dois cartões lado a lado (o que passa sozinho com os pontos e o do
   número cromado com a linha do tempo), a faixa larga em cor e o texto de SEO com "Ler tudo".
   Celular copia a composição do computador: os quatro cartões em 2 × 2, a lista e o texto lado a lado, os dois cartões lado a
   lado, com a copy de apoio escondida. 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 ganhar-dinheiro-indicando) ---------- */
.p-mkt-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: a fileira de plataformas da a referência vira as quatro ferramentas ---------- */
.p-mkt-plat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,360px);margin:0 auto}
.p-mkt-plat a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;
  font-size:.875rem;font-weight:600;line-height:1.1;color:#fff;text-decoration:none;background:#141414;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.p-mkt-plat .ic{flex:none;width:18px;height:18px;color:var(--red-hi)}
.p-mkt-ja{display:block;margin-top:14px}

/* ---------- 1. os três modelos: abas em pílula e quatro cartões de ativo ---------- */
.p-mkt-s-mod .lp-abas{margin:clamp(20px,3vw,32px) 0 clamp(20px,3.5vw,48px)}
.p-mkt-at{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.p-mkt-a{display:grid;justify-items:center;align-content:start;gap:4px;padding:16px 10px 10px;text-align:center}
/* a medalha (3:2) é uma moeda inclinada: o símbolo fica à direita do meio (centro em ~57% da largura, ~42% da altura) e chega a
   56% da largura. O recorte centra a janela nele (object-position 71%) e amplia só 1,1×: as 12 medalhas da seção saem com o
   símbolo inteiro (com 1,25× e 1,8× centrados em 50% o visto, o cupom e as moedas saíam cortados na borda direita, simulado em
   29/10/2026). O ladrilho corta a PINTURA (contain:paint respeita o raio e não esconde estouro de layout como o overflow:hidden).
   O ladrilho tem 64/72/80px (29/10/2026): com 44px o símbolo (pessoa, rede, cupom, crédito) ficava pequeno demais para ler */
.p-mkt-ico{display:block;width:64px;height:64px;margin-bottom:6px;border-radius:16px;contain:paint;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.p-mkt-ico img{display:block;width:100%;height:100%;object-fit:cover;object-position:71% 50%;transform:scale(1.1);transform-origin:50% 42%}
.p-mkt-a-k{font-size:.8125rem;line-height:1.2;color:rgba(255,255,255,.86)}
.p-mkt-a-v{margin-top:8px;font-size:1.25rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.p-mkt-a-s{min-height:2.4em;font-size:.75rem;line-height:1.2;color:var(--red-hi);text-wrap:balance}
.p-mkt-sp{width:100%;height:30px;margin:8px 0 10px;fill:none;stroke:var(--red-hi);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.p-mkt-sp path{vector-effect:non-scaling-stroke}
.p-mkt-a-b{display:grid;place-items:center;width:100%;min-height:44px;border-radius:12px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:#262626}

/* ---------- 2. o link e as etapas: a lista em vidro, o medalhão no lugar da pessoa, o texto à direita ---------- */
.p-mkt-dm{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:12px}
.p-mkt-dm-v{position:relative;display:grid;align-items:center;min-height:250px;isolation:isolate}
.p-mkt-dm-m{position:absolute;right:-30%;top:50%;z-index:-1;width:110%;height:auto;translate:0 -50%;opacity:.85;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.p-mkt-dm-l{display:grid;gap:2px;margin:0;padding:8px;list-style:none;border-radius:20px;background:rgba(16,16,16,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 30px 60px -20px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transform:perspective(900px) rotateY(14deg);transform-origin:0 50%}
.p-mkt-dm-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border-radius:14px;color:rgba(255,255,255,.58)}
.p-mkt-dm-l li i{width:12px;height:12px;border-radius:4px;background:#3a3a3a}
.p-mkt-dm-l li span{display:grid;min-width:0}
.p-mkt-dm-l b{font-size:.9375rem;line-height:1.15;font-weight:500}
.p-mkt-dm-l small{display:none;font-size:.8125rem;line-height:1.3}
/* o inativo em .58 e o "⋮" sem opacidade própria: com .42 (e .6 por cima no ⋮) os passos ficavam em 4,1:1 e 2,3:1 no pixel;
   em 768 a arte clareia o fundo à direita do painel e o ⋮ pedia .58 para passar de 4,5:1 com folga (medido de 360 a 1440);
   o aceso continua mandando pelo branco cheio, pelo fundo claro e pela luz vermelha */
.p-mkt-dm-l em{font-style:normal;font-size:1rem;line-height:1}
.p-mkt-dm-l li.on{color:#fff;background:rgba(255,255,255,.08)}
.p-mkt-dm-l li.on i{background:var(--red-hi);box-shadow:0 0 12px var(--red-hi)}
.p-mkt-dm-l li.on small{color:rgba(255,255,255,.72)}
.p-mkt-dm-l .ic{width:18px;height:18px;color:var(--red-hi)}
.p-mkt-dm-t{display:grid;justify-items:center;gap:14px;text-align:center}
.p-mkt-dm-t h3{font-size:1.125rem;line-height:1.12;font-weight:600;letter-spacing:-.015em;color:var(--lp-mut2);text-wrap:balance}
.p-mkt-dm-t h3 b{display:block;color:#fff;font-weight:600}
.p-mkt-mais{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:.9375rem;font-weight:600;color:var(--red-hi);text-decoration:none}
.p-mkt-mais .ic{width:16px;height:16px}

/* ---------- 3. os dois cartões: boas práticas que passam sozinhas e o "7" cromado ---------- */
.p-mkt-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.p-mkt-bp{display:grid;grid-template-rows:auto auto 1fr auto;justify-items:center;gap:8px;min-height:320px;padding:20px 12px 18px;text-align:center}
.p-mkt-bp-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#fff;background:#5a120d;box-shadow:0 0 0 1px rgba(255,140,128,.25) inset}
.p-mkt-bp-ic .ic{width:20px;height:20px}
.p-mkt-bp-k{font-size:.8125rem;color:var(--lp-mut2)}
.p-mkt-sl{display:grid;align-content:center;gap:16px;margin:0;padding:0;list-style:none}
.p-mkt-sl h3{font-size:1rem;line-height:1.15;font-weight:600;color:#fff;text-wrap:balance}
.p-mkt-sl p{display:none;margin-top:8px;font-size:.875rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-mkt-dots{display:none;gap:6px}
.p-mkt-dots i{position:relative;width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.p-mkt-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.p-mkt-sete{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;min-height:320px;padding:20px 8px 16px;text-align:center;isolation:isolate;container-type:inline-size}
.p-mkt-sete h3{font-size:1rem;line-height:1.15;font-weight:600;color:#fff}
/* o brilho atrás do 7 fica dentro do cartão: a elipse de 60% da largura dá o mesmo desenho da caixa de 120% que passava da borda */
.p-mkt-sete::before{content:"";position:absolute;left:0;right:0;top:42%;height:42%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(217,45,32,.6),rgba(217,45,32,.16) 55%,transparent 75%)}
.p-mkt-sete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.06) 40%,rgba(0,0,0,.6))}
.p-mkt-7{display:grid;place-items:center;align-self:center}
/* cromo claro: a faixa mais escura (#b8b8b8) ainda dá 4,5:1 sobre o centro do brilho vermelho, lido no pixel pelo portão */
.p-mkt-7 span{display:block;font-size:9rem;line-height:.9;font-weight:700;letter-spacing:-.04em;color:#d9d9d9;
  background:linear-gradient(165deg,#ffffff 0,#dcdcdc 30%,#b8b8b8 52%,#f2f2f2 66%,#c4c4c4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.7))}
/* coluna nunca menor que a pílula: com minmax(0,1fr) as três pílulas se encostavam no cartão de 122px do celular */
.p-mkt-tl{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:4px;width:100%;margin:0;padding:0;list-style:none}
.p-mkt-tl li{display:grid;justify-items:center;gap:6px;min-width:0}
.p-mkt-tl b{display:grid;place-items:center;min-height:26px;padding:0 8px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap;color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.p-mkt-tl span{font-size:.75rem;line-height:1.2;color:rgba(255,255,255,.5)}
.p-mkt-tl li.on b{color:#000;background:#fff}
.p-mkt-tl li.on span{color:#fff}

/* ---------- 4. a faixa larga (o "Comece a negociar"): a foto dos amigos olhando o celular de fundo (29/10/2026) e, por baixo do
   texto, o véu reto de cima para baixo na cor da LA (degradê linear de ponta a ponta, nunca forma sobre a cena); o texto branco
   fica na base, sobre a parte mais densa do véu ---------- */
.p-mkt-fx{position:relative;isolation:isolate;overflow:clip;display:flex;align-items:flex-end;justify-content:center;gap:14px;
  min-height:96px;aspect-ratio:2/1;padding:0 20px 22px;border-radius:28px;text-decoration:none;
  font-size:1.5rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#fff;
  background:#3a0806;box-shadow:0 0 0 1px rgba(255,140,128,.35) inset,0 30px 80px -30px rgba(217,45,32,.6)}
.p-mkt-fx-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s var(--ease)}
.p-mkt-fx::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,8,6,0) 22%,rgba(92,14,9,.72) 58%,rgba(122,21,15,.94) 100%)}
.p-mkt-fx .cta-seta{flex:none}

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

/* ---------- movimento (só transform/opacity) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* a linha do gráfico se desenha ao abrir a aba (o painel volta de display:none e a animação recomeça) */
  .p-mkt-sp path{stroke-dasharray:100;animation:p-mkt-traco 1.4s var(--ease) both}
  .p-mkt-a:nth-child(2) .p-mkt-sp path{animation-delay:.08s}
  .p-mkt-a:nth-child(3) .p-mkt-sp path{animation-delay:.16s}
  .p-mkt-a:nth-child(4) .p-mkt-sp path{animation-delay:.24s}
  .p-mkt-a{animation:p-mkt-sobe .6s var(--ease) both}
  .p-mkt-a:nth-child(2){animation-delay:.06s}
  .p-mkt-a:nth-child(3){animation-delay:.12s}
  .p-mkt-a:nth-child(4){animation-delay:.18s}
  /* as boas práticas passam sozinhas, uma a cada 4 s, com a barra do ponto enchendo (o carrossel de depoimentos da a referência) */
  .p-mkt-sl{gap:0}
  .p-mkt-sl li{grid-area:1/1;opacity:0;animation:p-mkt-slide 16s linear infinite;animation-delay:calc(var(--n)*4s)}
  .p-mkt-dots{display:flex}
  .p-mkt-dots i::after{animation:p-mkt-ponto 16s linear infinite;animation-delay:calc(var(--n)*4s)}
  .p-mkt-dm-m{animation:p-mkt-flut 8s ease-in-out infinite}
  .js-ok .p-mkt-s-dm .p-mkt-dm-l{transition:transform 1s var(--ease),opacity .8s var(--ease)}
  .js-ok .p-mkt-7 span{transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
  .js-ok .p-mkt-sete:not(.in) .p-mkt-7 span{opacity:0;transform:translateY(30px) scale(.92)}
}
@keyframes p-mkt-traco{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes p-mkt-sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes p-mkt-slide{0%{opacity:0;transform:translateY(10px)}3%{opacity:1;transform:none}22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes p-mkt-ponto{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
@keyframes p-mkt-flut{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (hover:hover) and (pointer:fine){
  .p-mkt-c,.p-mkt-fx,.p-mkt-plat a{transition:transform .25s var(--ease)}
  .p-mkt-a:hover,.p-mkt-plat a:hover{transform:translateY(-4px)}
  .p-mkt-fx:hover{transform:translateY(-3px)}
  .p-mkt-fx:hover .p-mkt-fx-img{transform:scale(1.04)}
  .p-mkt-a-b{transition:transform .2s var(--ease),opacity .2s}
  .p-mkt-a-b:hover{opacity:.85}
}
.p-mkt-a-b:active,.p-mkt-fx:active,.p-mkt-plat a:active{transform:scale(.98)}

/* ---------- tablet ---------- */
@media (min-width:600px){
  .p-mkt-plat{grid-template-columns:repeat(4,auto);justify-content:center;width:auto}
  .p-mkt-plat a{padding:0 16px}
  .p-mkt-at{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .p-mkt-a{padding:24px 14px 14px}
  .p-mkt-ico{width:72px;height:72px}
  .p-mkt-a-v{font-size:1.5rem}
  .p-mkt-dm{gap:24px}
  .p-mkt-dm-v{min-height:380px}
  .p-mkt-dm-l{padding:12px;border-radius:26px}
  .p-mkt-dm-l li{min-height:60px;padding:10px 14px}
  .p-mkt-dm-l b{font-size:1.125rem}
  .p-mkt-dm-l small{display:block}
  .p-mkt-dm-t h3{font-size:1.5rem}
  .p-mkt-duo{gap:14px}
  .p-mkt-bp,.p-mkt-sete{min-height:440px;padding:28px 20px 22px}
  .p-mkt-bp-k{font-size:.9375rem}
  .p-mkt-sl h3,.p-mkt-sete h3{font-size:1.375rem}
  .p-mkt-sl p{display:block;font-size:1rem}
  .p-mkt-7 span{font-size:14rem}
  .p-mkt-tl b,.p-mkt-tl span{font-size:.875rem}
  .p-mkt-fx{min-height:128px;aspect-ratio:3/1;padding-bottom:30px;border-radius:40px;font-size:2rem}
  .p-mkt-seo .lp-txt{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .p-mkt-seo-c{max-height:240px}
}

/* ---------- computador (a referência: coluna de 944px, cartão de ativo de 224px com raio 32, faixa de 160px com raio 48) ---------- */
@media (min-width:1024px){
  .p-mkt-c{border-radius:32px}
  .p-mkt-at{gap:16px}
  .p-mkt-a{padding:36px 16px 16px;gap:6px}
  .p-mkt-ico{width:80px;height:80px;border-radius:18px}
  .p-mkt-a-k{font-size:1rem}
  .p-mkt-a-v{margin-top:14px;font-size:1.75rem}
  .p-mkt-a-s{font-size:.875rem}
  .p-mkt-sp{height:40px;margin:14px 0 18px}
  .p-mkt-dm{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}
  .p-mkt-dm-v{min-height:540px}
  .p-mkt-dm-m{right:-8%;width:88%}
  .p-mkt-dm-l{width:340px;padding:16px;border-radius:32px}
  .p-mkt-dm-l li{min-height:76px;padding:12px 18px;border-radius:18px}
  .p-mkt-dm-l b{font-size:1.375rem}
  .p-mkt-dm-t{gap:18px}
  .p-mkt-dm-t h3{font-size:1.75rem}
  .p-mkt-duo{gap:18px}
  .p-mkt-bp,.p-mkt-sete{min-height:560px;padding:44px 32px 36px;border-radius:40px}
  .p-mkt-bp-ic{width:56px;height:56px;border-radius:12px}
  .p-mkt-bp-ic .ic{width:26px;height:26px}
  .p-mkt-sl h3,.p-mkt-sete h3{font-size:1.75rem}
  .p-mkt-sl p{font-size:1.0625rem;line-height:1.5}
  .p-mkt-dots i{width:32px}
  .p-mkt-7 span{font-size:19rem}
  .p-mkt-tl b{min-height:32px;padding:0 14px;font-size:1rem}
  .p-mkt-tl span{font-size:1rem}
  .p-mkt-fx{min-height:160px;aspect-ratio:3.4/1;padding-bottom:40px;border-radius:48px;font-size:2.5rem}
  .p-mkt-seo-c{max-height:200px}
  .p-mkt-seo .lp-txt h2{font-size:1.5rem}
}

/* ---------- celular: a mesma composição, com a copy resumida ---------- */
@media (max-width:37.49rem){
  .p-mkt-s-mod .lp-abas{gap:6px}
  .p-mkt-s-mod .lp-abas button{padding:0 12px;font-size:.8125rem}
  .p-mkt-a-v{font-size:1.125rem}
  /* a lista e o texto em sequência, como a a referência no celular (o texto ao lado da lista estourava a coluna de 160px) */
  .p-mkt-dm{grid-template-columns:minmax(0,1fr);gap:20px}
  .p-mkt-dm-v{min-height:270px}
  .p-mkt-dm-l{width:66%;transform:perspective(700px) rotateY(10deg)}
  /* empilhado, o medalhão fica dentro da coluna: com right negativo ele passava 27px da tela */
  .p-mkt-dm-m{right:0;width:74%}
  .p-mkt-dm-t h3{font-size:1.25rem}
  .p-mkt-7 span{font-size:7.5rem}
  /* as legendas da linha do tempo somem; ficam as três pílulas */
  .p-mkt-tl span{display:none}
  .p-mkt-tl b{padding:0 6px}
}
/* as três pílulas em fila pedem 148px: no cartão mais estreito (122px em 320, 142px em 360) a linha do tempo desce em coluna,
   as três com a largura da maior, centradas; mede o cartão (container), não a tela, e vem depois do bloco do celular */
@container (max-width:9.4rem){
  .p-mkt-tl{grid-template-columns:max-content;justify-content:center}
  .p-mkt-tl li{justify-items:stretch}
}
@media (max-width:21.99rem){
  .p-mkt-tl span{font-size:.6875rem}
  .p-mkt-a-v{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .p-mkt-a{animation:p-mkt-some .3s linear both}
}
@keyframes p-mkt-some{from{opacity:0}to{opacity:1}}