/* /afiliado-revendedor-ou-parceiro — só o que o kit (lp.css) não cobre. Clone da fixed-time-trades da a referência:
   cartões dos modelos nas abas (os "ativos"), 2×2 do "por que", anel de medalhões e a faixa com a mão.
   Celular primeiro; só transform e opacity animam; prefers-reduced-motion desliga o movimento. */

/* ---------- 1. modelos: a aba do nosso modelo leva o ponto vermelho; cartões 2×2 no celular, 4 lado a lado no computador ---------- */
#p-arp-abas-t0{display:inline-flex;align-items:center;gap:8px}
#p-arp-abas-t0::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 0 3px rgba(255,84,72,.22)}
.p-arp-lead{max-width:640px;margin:0 auto 18px;text-align:center;font-size:1rem;line-height:1.5;color:var(--lp-mut2);text-wrap:balance}
.p-arp-lead b{color:#fff;font-weight:600}
.p-arp-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.p-arp-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.p-arp-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:20px 12px 18px;border-radius:24px;text-align:center;
  background:radial-gradient(120% 140% at 15% 0%,#171717 0%,#0e0e0e 70%);box-shadow:0 0 0 1px var(--line) inset}
@media (min-width:768px){.p-arp-c{padding:32px 20px 28px;border-radius:32px;gap:8px}}
.p-arp-c--nos{background:radial-gradient(120% 140% at 50% 0%,rgba(217,45,32,.2) 0%,#0e0e0e 66%);box-shadow:0 0 0 1px rgba(255,84,72,.34) inset}
.p-arp-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:6px;background:rgba(255,255,255,.08);color:#fff}
.p-arp-c--nos .p-arp-ic{background:linear-gradient(180deg,#dc2f22,var(--red-d));box-shadow:0 8px 24px rgba(217,45,32,.35)}
@media (min-width:768px){.p-arp-ic{width:56px;height:56px;border-radius:16px}}
.p-arp-ic .ic{width:24px;height:24px}
.p-arp-t{margin:0;font-size:1rem;line-height:1.25;font-weight:500;color:var(--lp-mut2)}
.p-arp-v{margin:4px 0 2px;font-size:clamp(1.375rem,1.1rem + .9vw,2rem);line-height:1.05;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-arp-d{margin:0;font-size:1rem;line-height:1.4;color:var(--lp-mut2);text-wrap:pretty}

/* entrada: os cartões sobem em sequência quando a grade entra na tela (o .in é do la.js) */
.js-ok .p-arp-g .p-arp-c{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .2s;transition-delay:calc(var(--i) * 70ms)}
.js-ok .p-arp-g.in .p-arp-c{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.p-arp-c:hover{box-shadow:0 0 0 1px var(--line2) inset}.p-arp-c--nos:hover{box-shadow:0 0 0 1px rgba(255,84,72,.6) inset}}

/* ---------- 2. por que: 2×2 em toda largura (o celular copia a grade do computador) ---------- */
.p-arp-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:940px;margin-inline:auto}
@media (min-width:768px){.p-arp-bento{gap:16px}}
.p-arp-b .rd-card{display:flex;flex-direction:column;overflow:hidden;min-height:clamp(270px,36vw,436px);padding:20px 12px 0;text-align:center}
@media (min-width:768px){.p-arp-b .rd-card{padding:40px 32px 0}}
.p-arp-b .rd-h3{margin:0;font-size:clamp(1.0625rem,.85rem + .9vw,1.5rem);line-height:1.1}
.p-arp-bm{position:relative;flex:1;display:grid;place-items:center;margin-top:12px;min-height:0}
.p-arp-bm--med img{display:block;width:calc(100% + 24px);max-width:440px;height:auto;margin-inline:-12px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}

/* o kit pronto: quatro linhas que acendem em sequência (o relógio da a referência vira a conta que já nasce montada) */
.p-arp-bm--kit{padding-bottom:16px}
.p-arp-kit{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(100%,300px)}
.p-arp-kit li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;text-align:left}
@media (min-width:768px){.p-arp-kit{gap:10px}.p-arp-kit li{gap:12px;padding:10px 12px;border-radius:16px}}
.p-arp-kit-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff}
.p-arp-kit-ic .ic{width:16px;height:16px}
@media (min-width:768px){.p-arp-kit-ic{width:36px;height:36px;border-radius:10px}.p-arp-kit-ic .ic{width:18px;height:18px}}
.p-arp-kit-t{min-width:0;font-size:.875rem;line-height:1.2;font-weight:600;color:#fff}
@media (min-width:768px){.p-arp-kit-t{font-size:1rem}}
.p-arp-kit-ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff}
.p-arp-kit-ok .ic{width:13px;height:13px}
@media (max-width:47.99rem){.p-arp-kit-ok{display:none}}

/* o "95%" inflado da a referência vira o "1º" em relevo vermelho */
.p-arp-bm--um{place-items:end center}
.p-arp-um{display:grid;justify-items:center;margin-bottom:-.12em}
.p-arp-um b{display:block;font-size:clamp(7rem,3rem + 17vw,17rem);line-height:.86;font-weight:800;letter-spacing:-.06em;
  color:var(--red-hi);text-shadow:0 1px 0 #c8281c,0 3px 0 #a81f15,0 5px 0 #8f170f,0 7px 0 #6b100a,0 22px 34px rgba(217,45,32,.4)}
.p-arp-um span{order:-1;margin-bottom:10px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.875rem;line-height:1.2;font-weight:600;color:rgba(255,255,255,.86);white-space:nowrap}
@media (max-width:47.99rem){.p-arp-um span{padding:4px 9px;font-size:.75rem}}

/* o especialista com balão vira a Academia no celular, saindo pela borda de baixo */
.p-arp-bm--cel{place-items:start center;padding-top:6px}
.p-arp-celw{position:relative;width:min(74%,250px);margin-bottom:-62%}
.p-arp-bolha{position:absolute;right:58%;top:30%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--red-d);color:#fff;font-size:.875rem;line-height:1.2;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
@media (max-width:47.99rem){.p-arp-bolha{right:auto;left:50%;translate:-50% 0;top:24%;padding:5px 8px;border-radius:10px;font-size:.75rem}}

@media (prefers-reduced-motion:no-preference){
  .p-arp-kit-ok{animation:p-arp-acende 6s var(--ease) infinite;animation-delay:calc(var(--k) * .45s)}
  .p-arp-kit li{animation:p-arp-linha 6s var(--ease) infinite;animation-delay:calc(var(--k) * .45s)}
  .p-arp-um b{animation:p-arp-boia 5s ease-in-out infinite}
  .p-arp-bolha{animation:p-arp-boia2 4s ease-in-out infinite}
}
@keyframes p-arp-acende{0%,6%{opacity:0;transform:scale(.4)}14%,80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.4)}}
@keyframes p-arp-linha{0%,6%{transform:translateX(0)}12%{transform:translateX(4px)}18%,100%{transform:translateX(0)}}
@keyframes p-arp-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes p-arp-boia2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- 3. anel de medalhões com o texto no meio (a roda gira devagar; o contêiner corta a pintura) ---------- */
.p-arp-anel-s{--D:clamp(560px,86vw,1120px);--T:clamp(80px,10.5vw,150px);display:grid;place-items:center;min-height:calc(var(--D) + var(--T) * .4);padding-block:0}
.p-arp-anel{position:absolute;inset:0;contain:paint;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.p-arp-roda{position:absolute;left:50%;top:50%;width:var(--D);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--D) / -2)}
.p-arp-roda span{position:absolute;left:50%;top:50%;width:var(--T);height:var(--T);margin:calc(var(--T) / -2) 0 0 calc(var(--T) / -2);
  transform:rotate(var(--a)) translateY(calc((var(--D) - var(--T)) / -2)) rotate(calc(var(--a) * -1))}
.p-arp-roda img{display:block;width:100%;height:100%;object-fit:cover;border-radius:26%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.6);
  transform:perspective(500px) rotateX(-12deg) rotateY(12deg)}
.p-arp-roda span:nth-child(even) img{transform:perspective(500px) rotateX(10deg) rotateY(-14deg)}
/* a roda gira no sentido contrário ao da página de comissão, e cada medalhão gira ao contrário dela: ficam de pé */
@media (prefers-reduced-motion:no-preference){
  .p-arp-roda{animation:p-arp-gira 150s linear infinite reverse}
  .p-arp-roda img{animation:p-arp-gira 150s linear infinite}
}
@keyframes p-arp-gira{from{rotate:0deg}to{rotate:360deg}}
.p-arp-anel-tx{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;width:min(100% - var(--pad) * 2,calc(var(--D) - var(--T) * 2 - 48px),460px);text-align:center}
.p-arp-anel-tx .lp-h2{margin:0}
.p-arp-anel-tx .lp-p{margin:0;max-width:40ch}
.p-arp-anel-tx .rd-link{transform:none}

/* ---------- 4. faixa com a mão: foto + texto lado a lado também no celular ---------- */
.p-arp-ban{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:28px;
  background:radial-gradient(100% 160% at 15% 0%,#171717 0%,#0e0e0e 66%);box-shadow:0 0 0 1px var(--line) inset}
@media (min-width:768px){.p-arp-ban{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px;border-radius:40px}}
.p-arp-ban-m{position:relative;align-self:end;padding-top:20px}
/* no celular a mão cresce por escala (não muda a caixa) e a faixa corta a pintura na borda */
.p-arp-ban-m img{display:block;width:100%;max-width:100%;height:auto;margin:0 0 -16%;transform:scale(1.18);transform-origin:50% 100%}
@media (min-width:768px){.p-arp-ban-m{padding-top:28px}.p-arp-ban-m img{max-width:540px;margin:0 auto -18%;transform:none}}
.p-arp-ban-tx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 14px 24px 4px;text-align:center}
@media (min-width:768px){.p-arp-ban-tx{gap:24px;padding:48px 48px 48px 8px}}
.p-arp-ban-t{margin:0;font-size:clamp(1.25rem,.95rem + 1.2vw,2rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-arp-ban-t span{display:block;color:var(--lp-mut)}
.p-arp-ban-tx .btn{max-width:100%}
.p-arp-ban-tx .rd-link{transform:none;margin-block:-8px}
@media (max-width:47.99rem){
  .p-arp-lg{display:none}
  .p-arp-ban-tx .btn-lg{min-height:48px;padding-inline:16px}
}

@media (prefers-reduced-motion:reduce){
  .js-ok .p-arp-g .p-arp-c{transform:none;transition:opacity .2s}
}

/* a janela em perspectiva não passa da largura da tela (medição de 19/10/2026): inclinada, a borda de baixo dela
   abre ~1,1× (768) a ~1,24× (1440) a largura da caixa e saía da tela entre 700 e 1366px (-8→776 em 768, -57→1081
   em 1024). A caixa encolhe só o necessário entre 600 e 1439; em 1440 continua com os 1120 de antes. */
@media (min-width:600px) and (max-width:1439px){.lp-hero--janela .lp-persp{width:min(100%,1120px,calc(70vw + 116px))}}

/* trilha no celular: o nome desta página ("Afiliado, revendedor ou parceiro", 201px) não cabe nos ~160px que sobram
   depois de "Início › Como começar" e o kit cortava com reticências. Aqui ele quebra em duas linhas, ao lado da
   própria seta (a seta não fica solta: está dentro do mesmo <li>). Medição de 19/10/2026. */
@media (max-width:599px){.lp-bc [aria-current]{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;text-align:left;line-height:1.3}}