/* /rede-de-subafiliados — o que o kit não cobre na página "about" da a referência: o hero com o objeto 3D sob o holofote em cima e a
   frase embaixo, a linha do tempo com a pessoa e o número grande, a frase de missão, a balança do bento, o cartão-foto que
   alterna com a grade de "Ver tudo", o cartão largo e a fileira de provas com o medalhão grande.
   Celular copia a composição do computador: pílula e texto lado a lado em cada linha, grade de controles em 2 colunas (4 à
   vista + "Ver tudo"), provas em 2 colunas; o cartão largo é texto + imagem e vai em sequência, com a MESMA imagem.
   Animação só com transform e opacity, e parada com "menos movimento". Prefixo de classe: p-rs-. */

/* ---------- hero: a moeda da rede sob o holofote vermelho em cima, a frase centrada embaixo ---------- */
.lp-hero--img{--ih:min(40svh,330px);--it:24px;justify-content:flex-start;padding-top:calc(var(--it) + var(--ih)*.86);padding-bottom:72px}
.lp-hero--img::before{display:none}
@media (max-width:599.98px) and (max-height:600px){.lp-hero--img{--ih:min(30svh,330px)}}
/* a imagem começa quase no topo, atrás do menu (a moeda nasce abaixo dele), e some para o preto nas quatro bordas: nenhuma aresta de caixa à vista */
.lp-hero--img .lp-hero-bg{inset:auto;top:var(--it);left:0;width:100%;height:var(--ih);object-fit:cover;object-position:50% 30%;
  -webkit-mask:linear-gradient(#0000,#000 18%,#000 60%,#0000 97%);mask:linear-gradient(#0000,#000 18%,#000 60%,#0000 97%)}
@media (min-width:600px){
  .lp-hero--img{--ih:min(50svh,calc(min(100vw,1360px)/2.56));--it:30px}
  .lp-hero--img .lp-hero-bg{left:50%;width:calc(var(--ih)*2.56);max-width:100%;translate:-50% 0;
    -webkit-mask:linear-gradient(#0000,#000 18%,#000 60%,#0000 97%),linear-gradient(90deg,#0000,#000 18%,#000 82%,#0000);-webkit-mask-composite:source-in;
    mask:linear-gradient(#0000,#000 18%,#000 60%,#0000 97%) intersect,linear-gradient(90deg,#0000,#000 18%,#000 82%,#0000)}
}
/* a luz do holofote "respira" devagar (só a opacidade da imagem; parada com menos movimento) */
@media (prefers-reduced-motion:no-preference){
  .lp-hero--img .lp-hero-bg{animation:p-rs-luz 6s ease-in-out infinite alternate}
  @keyframes p-rs-luz{from{opacity:.86}to{opacity:1}}
}

/* tons do título de duas cores fora do .lp-h2 */
.p-rs-mi-t .g,.p-rs-ct-t .g,.p-rs-sup-t .g{color:var(--lp-mut2)}

/* ---------- 1. a ordem da rede: linhas de pílula + texto (apagam por cor) e a mão com o celular ---------- */
.p-rs-or{display:grid;gap:32px;margin-top:clamp(32px,4vw,56px)}
.p-rs-tl{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.p-rs-tl li{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:16px}
.p-rs-pl{justify-self:center;max-width:100%;padding:.32em .78em;border-radius:999px;background:var(--b);color:var(--c);
  font-size:calc(var(--f)*1px);line-height:1.1;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.p-rs-tl p{margin:0;font-size:16px;line-height:1.45;color:var(--t);text-wrap:pretty}
.p-rs-tl-1{--b:#fff;--c:#000;--t:#fff;--f:20}
.p-rs-tl-2{--b:#a6a6a6;--c:#000;--t:#d6d6d6;--f:19}
.p-rs-tl-3{--b:#3a3a3a;--c:#e6e6e6;--t:#bdbdbd;--f:18}
.p-rs-tl-4{--b:#2a2a2a;--c:#cfcfcf;--t:#acacac;--f:17}
.p-rs-tl-5{--b:#1f1f1f;--c:#b8b8b8;--t:#a0a0a0;--f:16}
.p-rs-tl-6{--b:#181818;--c:#a6a6a6;--t:#959595;--f:16}

/* a figura: a mão com o celular some para o preto embaixo, e o número grande sobe por cima do sumiço (a pessoa da a referência) */
.p-rs-fig{order:-1;display:grid;justify-items:center;margin:0;text-align:center}
.p-rs-fig img{display:block;width:min(62%,420px);height:auto;-webkit-mask:linear-gradient(#000 52%,#0000 92%);mask:linear-gradient(#000 52%,#0000 92%)}
.p-rs-fig-x{position:relative;display:grid;justify-items:center;gap:12px;margin-top:-72px}
.p-rs-big{font-size:clamp(3.25rem,2.2rem + 4.2vw,5.25rem);line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff}
.p-rs-big-d{max-width:22em;font-size:16px;line-height:1.4;color:#fff;text-wrap:balance}
.p-rs-demo{max-width:30em;font-size:14px;line-height:1.4;color:var(--lp-mut2)}

@media (min-width:768px){
  .p-rs-tl{gap:20px}
  .p-rs-tl li{grid-template-columns:180px minmax(0,1fr);gap:28px}
  .p-rs-pl{font-size:calc(var(--f)*1.45px)}
}
@media (min-width:1024px){
  .p-rs-or{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}
  .p-rs-fig{order:0}
  .p-rs-tl{gap:clamp(20px,2.4vw,36px)}
  .p-rs-tl li{grid-template-columns:200px minmax(0,1fr);gap:40px}
  .p-rs-pl{font-size:calc(var(--f)*1.8px)}
  .p-rs-fig img{width:min(100%,480px)}
  .p-rs-fig-x{margin-top:-170px}
}

/* ---------- 3. a frase de missão em duas tonalidades (a referência: 40/40, 944 de largura) ---------- */
.p-rs-mi-t{margin:0;font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:pretty}

/* ---------- 4. o bento: a balança com as etiquetas das duas pernas ---------- */
/* a trilha do carrossel (pílulas de 160 em fila) não pode empurrar a coluna: 1fr sem piso estourava a página para 2.448 px */
.p-rs-bento>*{min-width:0}
@media (min-width:768px){.p-rs-bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.p-rs-bal{position:relative;width:min(92%,420px);margin:24px auto 0}
.p-rs-bal img{display:block;width:100%;height:auto;-webkit-mask:radial-gradient(closest-side,#000 70%,#0000);mask:radial-gradient(closest-side,#000 70%,#0000)}
.p-rs-tag{position:absolute;padding:8px 14px;border:1px solid rgba(255,84,72,.7);border-radius:12px;background:linear-gradient(#341311,#170807);
  font-size:16px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;white-space:nowrap;box-shadow:0 0 18px -4px rgba(255,84,72,.55)}
.p-rs-tag-1{left:2%;top:14%}
.p-rs-tag-2{right:2%;top:46%}
@media (prefers-reduced-motion:no-preference){
  .p-rs-tag{animation:p-rs-boia 4s ease-in-out infinite alternate}
  .p-rs-tag-2{animation-delay:-2s}
  @keyframes p-rs-boia{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
}
.p-rs-sm-p{margin:0;font-size:16px;line-height:1.45;color:var(--lp-mut2)}
@media (min-width:768px){
  .p-rs-big-in{overflow:hidden;border-radius:40px}
  .p-rs-bal{position:absolute;right:0;bottom:0;width:52%;margin:0}
}
@media (min-width:1280px){.p-rs-bal{width:50%;right:16px;bottom:24px}}

/* ---------- 5. o que o dono da rede controla: texto à esquerda, cartão-foto + grade à direita ---------- */
.p-rs-ct{display:grid;gap:28px}
.p-rs-ct-t{margin:0;font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:pretty}
.p-rs-ct-r{display:grid;justify-items:start;gap:16px;min-width:0}

/* cartão-foto: três medalhões que se revezam, com as barrinhas de progresso em cima (o "stories" da a referência) */
.p-rs-ft{position:relative;width:100%;aspect-ratio:462/400;border:1px solid #262626;border-radius:24px;overflow:hidden;background:#0a0a0a;isolation:isolate}
.p-rs-ft-s{position:absolute;inset:0;margin:0;opacity:0}
.p-rs-ft-s1{opacity:1}
.p-rs-ft-s img{width:100%;height:100%;object-fit:cover}
.p-rs-ft-s figcaption{position:absolute;inset:auto 0 0;display:grid;justify-items:start;gap:10px;padding:56px 20px 22px;background:linear-gradient(#0000,rgba(0,0,0,.86) 46%)}
.p-rs-ft-tag{padding:4px 10px;border-radius:8px;background:#000;font-size:14px;line-height:20px;color:#fff;box-shadow:0 0 0 1px #333 inset}
.p-rs-ft-t{font-size:18px;line-height:1.3;color:#fff}
.p-rs-ft-bar{position:absolute;z-index:2;inset:14px 20px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p-rs-ft-bar i{height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.p-rs-ft-bar i::after{content:"";display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.p-rs-ft-bar i:first-child::after{transform:none}
@media (prefers-reduced-motion:no-preference){
  /* a 1ª entra já acesa (atraso negativo), as outras a cada 4 s; as barrinhas enchem no mesmo compasso */
  .p-rs-ft-s{animation:p-rs-slide 12s infinite}
  .p-rs-ft-s1{opacity:0;animation-delay:-.5s}
  .p-rs-ft-s2{animation-delay:3.5s}
  .p-rs-ft-s3{animation-delay:7.5s}
  @keyframes p-rs-slide{0%{opacity:0}4%,33%{opacity:1}37%,100%{opacity:0}}
  .p-rs-ft-bar i::after{animation:12s linear -.5s infinite}
  .p-rs-ft-bar i:nth-child(1)::after{animation-name:p-rs-b1}
  .p-rs-ft-bar i:nth-child(2)::after{animation-name:p-rs-b2}
  .p-rs-ft-bar i:nth-child(3)::after{animation-name:p-rs-b3}
  @keyframes p-rs-b1{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
  @keyframes p-rs-b2{0%,35%{transform:scaleX(0)}68%,100%{transform:scaleX(1)}}
  @keyframes p-rs-b3{0%,68%{transform:scaleX(0)}100%{transform:scaleX(1)}}
}

/* grade de cartões pequenos: 2 colunas; 4 à vista no celular e 6 no computador, o resto atrás do "Ver tudo" */
.p-rs-k{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0;padding:0;list-style:none}
.p-rs-k li{display:grid;align-content:start;gap:10px;min-height:108px;padding:16px;border:1px solid #262626;border-radius:20px;background:#101010}
.p-rs-k li:nth-child(n+5){display:none}
.p-rs-k-k{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--lp-mut2)}
.p-rs-k-k .ic{width:18px;height:18px;flex:none;color:var(--red-hi)}
.p-rs-k-t{font-size:16px;line-height:1.3;color:#fff;text-wrap:pretty}
.p-rs-cb{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.p-rs-mais{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;background:#1b1b1b;
  font-size:16px;font-weight:600;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s}
.p-rs-mais:active{transform:scale(.98)}
.p-rs-mais .ic{width:16px;height:16px;transform:rotate(90deg);transition:transform .3s}
.p-rs-mais-b{display:none}
.p-rs-cb:focus-visible+.p-rs-mais{outline:2px solid var(--red-hi);outline-offset:3px}
.p-rs-cb:checked+.p-rs-mais .p-rs-mais-a{display:none}
.p-rs-cb:checked+.p-rs-mais .p-rs-mais-b{display:inline}
.p-rs-cb:checked+.p-rs-mais .ic{transform:rotate(-90deg)}
.p-rs-ct-r:has(.p-rs-cb:checked) .p-rs-k li{display:grid}
@media (hover:hover) and (pointer:fine){.p-rs-mais:hover{background:#262626}}
@media (min-width:1024px){
  .p-rs-ct{grid-template-columns:minmax(0,1fr) 462px;gap:88px;align-items:start}
  .p-rs-ct-t{position:sticky;top:120px}
  .p-rs-k{gap:16px}
  .p-rs-k li:nth-child(n+5){display:grid}
  .p-rs-k li:nth-child(n+7){display:none}
}

/* ---------- 6. o cartão largo: texto e o celular com a tela Rede ---------- */
.p-rs-sup-c .rd-card{overflow:hidden}
.p-rs-sup{display:grid;gap:8px;padding:32px 24px 0}
.p-rs-sup-x{display:grid;justify-items:start;gap:14px}
.p-rs-sup-t{margin:0;font-size:clamp(1.375rem,1.15rem + .6vw,1.5rem);line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-rs-sup-p{margin:0;font-size:16px;line-height:1.45;color:var(--lp-mut2)}
.p-rs-sup-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:4px}
.p-rs-sup-m{order:2;height:260px;overflow:hidden;margin-top:16px}
.p-rs-sup-m .lp-cel{width:min(64%,240px);margin:0 auto}
@media (min-width:600px){
  .p-rs-sup{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;padding:0 40px 0 24px;min-height:360px}
  .p-rs-sup-m{order:0;align-self:end;height:340px;margin:24px 0 0}
  .p-rs-sup-m .lp-cel{width:min(100%,260px)}
}
@media (min-width:1024px){
  .p-rs-sup{min-height:438px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-right:56px}
  .p-rs-sup-m{height:400px}
  .p-rs-sup-m .lp-cel{width:min(100%,300px)}
}

/* ---------- 7. não é pirâmide: a fileira de provas, o link e o medalhão grande sob o brilho vermelho ---------- */
.p-rs-np .lp-head{max-width:880px}
.p-rs-np-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:944px;margin:0 auto;padding:0;list-style:none}
.p-rs-np-l li{display:flex;align-items:center;gap:10px;min-height:64px;padding:12px 14px;border:1px solid #262626;border-radius:16px;background:#0e0e0e;
  font-size:15px;line-height:1.3;color:#fff}
.p-rs-np-l .ic{width:20px;height:20px;flex:none;color:var(--red-hi)}
.p-rs-np-a{display:flex;justify-content:center;margin:24px 0 0}
.p-rs-np-m{position:relative;width:min(100%,760px);margin:8px auto 0;isolation:isolate}
.p-rs-np-m::before{content:"";position:absolute;inset:6% 4% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.45),#0000);pointer-events:none}
.p-rs-np-m img{display:block;width:100%;height:auto;-webkit-mask:radial-gradient(closest-side,#000 72%,#0000);mask:radial-gradient(closest-side,#000 72%,#0000)}
@media (min-width:600px){.p-rs-np-l li{font-size:16px}}
@media (min-width:1024px){.p-rs-np-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}