/* ═══════════════════════════════════════════════════════════
   PARCEIROS E AFILIADOS — as peças que só existem nestas duas páginas.
   Tudo o mais (topo, painéis, passos, FAQ, rodapé) reaproveita as folhas
   das páginas de nicho.
   ═══════════════════════════════════════════════════════════ */


/* ── a escada de níveis ──
   Cinco degraus. O visual de escada vem da barra que cresce em cada card, não
   de altura diferente por card: altura desigual quebra o alinhamento do texto
   e obriga a ler em ziguezague. */
.esc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  margin-top:var(--sp-6)}
.esc-d{display:flex;flex-direction:column;background:#FFF;
  border:1px solid var(--border);border-radius:16px;padding:20px 18px 18px;
  position:relative;overflow:hidden}
.esc-d[data-topo="true"]{border-color:rgba(255,107,53,.42);
  box-shadow:0 10px 30px -18px rgba(255,107,53,.55)}

/* a barra que cresce: é ela que faz a leitura de escada */
.esc-barra{height:4px;border-radius:999px;background:var(--s-superf-3,#F1EEE8);
  margin-bottom:16px;overflow:hidden}
.esc-barra i{display:block;height:100%;width:var(--w,20%);border-radius:999px;
  background:linear-gradient(90deg,#FFB800,#FF6B35 60%,#FF3D7F)}

.esc-nome{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-body)}
.esc-req{font-size:.8125rem;line-height:1.4;color:var(--gray-body);margin-top:4px;
  min-height:2.4em}
.esc-val{font-family:var(--font-titulo,var(--font-display));font-size:2rem;
  font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--preto);
  margin:14px 0 2px}
.esc-val em{display:block;font-style:normal;font-size:.875rem;font-weight:500;
  color:var(--gray-body);margin-top:6px}
.esc-sub{font-size:.75rem;color:var(--gray-body)}
.esc-b{list-style:none;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px}
.esc-b li{font-size:.8125rem;line-height:1.4;color:var(--gray-body);
  padding-left:16px;position:relative}
.esc-b li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:50%;background:#FF6B35}

@media (max-width:980px){ .esc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .esc{grid-template-columns:1fr} .esc-req{min-height:0} }

/* ── comparativo ──
   Sem nomear concorrente: número de terceiro que não foi verificado vira
   publicidade comparativa enganosa, e o efeito retórico não depende do nome. */
.cmp{margin-top:var(--sp-6);border:1px solid var(--border);border-radius:18px;
  background:#FFF;overflow:hidden}
.cmp-l{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px;align-items:center;padding:15px 22px;border-top:1px solid var(--border)}
.cmp-l:first-child{border-top:0;background:var(--s-superf-3,#FBFAF7)}
.cmp-l:first-child span{font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray-body)}
.cmp-l[data-nos="true"]{background:linear-gradient(90deg,rgba(255,184,0,.10),rgba(255,61,127,.06))}
.cmp-l b{font-size:.9375rem;font-weight:600;color:var(--preto)}
.cmp-l span{font-size:.875rem;color:var(--gray-body)}
.cmp-l[data-nos="true"] span{color:var(--preto);font-weight:500}
@media (max-width:620px){ .cmp-l{grid-template-columns:1fr;gap:4px;padding:14px 18px}
  .cmp-l:first-child{display:none} }

/* ── conta simples de ganho ──
   Um exemplo aritmético vale mais que adjetivo: mostra a conta em vez de
   prometer "renda passiva". */
.cta-conta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:var(--sp-6)}
.cta-conta article{background:#FFF;border:1px solid var(--border);border-radius:16px;
  padding:22px 20px}
.cta-conta b{display:block;font-family:var(--font-titulo,var(--font-display));
  font-size:1.875rem;font-weight:600;line-height:1;color:var(--preto);
  letter-spacing:-.02em;margin-bottom:8px}
.cta-conta span{font-size:.875rem;line-height:1.5;color:var(--gray-body)}
@media (max-width:760px){ .cta-conta{grid-template-columns:1fr} }

/* ── a ejeção ──
   A seção que conta que o parceiro pode virar plataforma própria. É o único
   painel escuro da página de parceiros de propósito: contraste marca a peça
   como o argumento central, não como mais um bloco de benefício. */
.eje-abre{max-width:720px}
.eje-abre p{font-size:1.0625rem;line-height:1.68;color:rgba(255,255,255,.78);
  margin:0 0 var(--sp-4)}
.eje-abre p b{color:#FFF;font-weight:600}
.eje-abre .q{font-family:var(--font-titulo,var(--font-display));font-size:1.375rem;
  font-weight:600;line-height:1.36;color:#FFF;letter-spacing:-.01em;
  margin:var(--sp-5) 0 var(--sp-4)}

.eje{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:var(--sp-6)}
.eje article{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:24px 22px}
.eje h3{font-family:var(--font-titulo,var(--font-display));font-size:1.125rem;
  font-weight:600;line-height:1.34;color:#FFF;letter-spacing:-.01em;margin:0 0 10px}
.eje p{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.7);margin:0}
.eje-n{display:inline-block;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:#FFB800;
  border:1px solid rgba(255,184,0,.3);border-radius:999px;
  padding:3px 9px;margin-bottom:14px}
@media (max-width:860px){ .eje{grid-template-columns:1fr} }

/* o fecho: por que uma empresa faria isso */
.eje-porque{margin-top:var(--sp-6);padding:26px 28px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,184,0,.12),rgba(255,61,127,.08));
  border:1px solid rgba(255,184,0,.22);max-width:820px}
.eje-porque h3{font-family:var(--font-titulo,var(--font-display));font-size:1.25rem;
  font-weight:600;color:#FFF;margin:0 0 10px;letter-spacing:-.01em}
.eje-porque p{font-size:.9375rem;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 10px}
.eje-porque p:last-child{margin-bottom:0}
.eje-porque b{color:#FFF;font-weight:600}

/* ── o degrau dos 100% ──
   A escada de comissão termina em 40%. Este bloco é o que vem depois dela e
   precisa ler como salto de natureza, não como mais um degrau: o parceiro para
   de receber percentual e passa a receber a assinatura inteira. Por isso o
   número grande com a progressão riscada ao lado, e não outro card na grade. */
.eje-cem{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:34px;
  align-items:center;margin-top:var(--sp-6);padding:30px 32px;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,184,0,.14),rgba(255,61,127,.10));
  border:1px solid rgba(255,184,0,.28)}
.eje-cem-n{text-align:center;flex:0 0 auto}
.eje-cem-esc{display:block;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:6px}
.eje-cem-n b{display:block;font-family:var(--font-titulo,var(--font-display));
  font-size:4rem;font-weight:600;line-height:.94;letter-spacing:-.035em;
  background:linear-gradient(135deg,#FFB800,#FF6B35 55%,#FF3D7F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* o degrau do 0 e o % descem abaixo da caixa; background-clip:text só pinta
     dentro dela, então sem esta folga o glifo sai sem preenchimento */
  padding-bottom:.08em}
.eje-cem-r{display:block;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.eje-cem-t h3{font-family:var(--font-titulo,var(--font-display));font-size:1.375rem;
  font-weight:600;line-height:1.32;color:#FFF;letter-spacing:-.015em;margin:0 0 12px}
.eje-cem-t p{font-size:.9375rem;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 10px}
.eje-cem-t p:last-child{margin-bottom:0}
.eje-cem-t b{color:#FFF;font-weight:600}
@media (max-width:760px){ .eje-cem{grid-template-columns:1fr;gap:20px;padding:26px 24px}
  .eje-cem-n{text-align:left} }