/* Páginas /afiliados (landing) e /afiliado (painel) — visual alinhado à revenda CAPACARD */

body.af-pg .pg-top__in,
body.af-pg .pg-main {
  max-width: 58rem;
}
body.af-pg .pg-main {
  gap: var(--space-4);
  padding-bottom: var(--space-12);
}

.af {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Hero ---- */
.af-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-brand);
  overflow: hidden;
  isolation: isolate;
  animation: af-in 0.55s ease both;
}
.af-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 18%, var(--color-glass-3), transparent 52%),
    var(--pattern-cartoes) 0 0 / var(--size-pattern-cartoes) repeat;
}
@media (min-width: 760px) {
  .af-banner {
    grid-template-columns: minmax(0, 1.25fr) minmax(10rem, 0.75fr);
    align-items: end;
    padding: var(--space-8) var(--space-8) var(--space-6);
    gap: var(--space-6);
  }
}
.af-banner__marca {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.af-banner__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  opacity: 0.78;
}
.af-banner h1 {
  margin: 0 0 var(--space-3);
  max-width: 16ch;
  font-size: var(--fs-26);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-wrap: balance;
}
@media (min-width: 900px) {
  .af-banner h1 { font-size: var(--fs-34); }
}
.af-banner__lead {
  margin: 0 0 var(--space-4);
  max-width: 40ch;
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  text-wrap: pretty;
}
.af-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.af-banner__cena {
  position: relative;
  justify-self: end;
  align-self: end;
  width: min(100%, 14rem);
  aspect-ratio: 1.05;
  margin-inline: auto 0;
}
.af-banner__mascote {
  position: absolute;
  right: 0;
  bottom: calc(var(--space-2) * -1);
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(23, 21, 31, 0.18));
  pointer-events: none;
  user-select: none;
  animation: af-mascote 0.7s 0.12s ease both;
}
@media (min-width: 760px) {
  .af-banner__cena { width: min(100%, 16rem); }
}

.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-btn-lg, 3rem);
  padding: 0 var(--space-5);
  border-radius: var(--radius-btn);
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
  border: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.af-btn:active { transform: scale(0.98); }
.af-btn--ink {
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.af-btn--ink:hover { background: #2a2733; color: var(--color-on-dark); }
.af-btn--ghost {
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-1) solid rgba(23, 21, 31, 0.14);
}
.af-btn--ghost:hover { background: #fff; }

/* ---- Destaques ---- */
.af-destaque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-on-dark);
  animation: af-in 0.55s 0.08s ease both;
}
@media (min-width: 720px) {
  .af-destaque {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
  }
}
.af-destaque__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.af-destaque__item strong {
  font-size: var(--fs-20);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  color: var(--color-brand);
  line-height: 1.1;
}
@media (min-width: 720px) {
  .af-destaque__item strong { font-size: var(--fs-22); }
}
.af-destaque__item span {
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--color-on-dark-2);
}

/* ---- Seções ---- */
.af-sec {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-line);
  animation: af-in 0.5s ease both;
}
@media (min-width: 900px) {
  .af-sec { padding: var(--space-7); }
}
.af-sec:nth-of-type(1) { animation-delay: 0.1s; }
.af-sec:nth-of-type(2) { animation-delay: 0.14s; }
.af-sec:nth-of-type(3) { animation-delay: 0.18s; }
.af-sec:nth-of-type(4) { animation-delay: 0.22s; }
.af-sec:nth-of-type(5) { animation-delay: 0.26s; }

.af-sec__cab { margin-bottom: var(--space-5); max-width: 48ch; }
.af-sec__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.af-sec__cab h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-22);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.af-sec__cab p {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}

/* ---- Passos ---- */
.af-passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  counter-reset: af;
}
@media (min-width: 700px) {
  .af-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
.af-passos li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-height: 100%;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + 0.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-1) solid var(--color-line);
  counter-increment: af;
}
.af-passos li::before {
  content: counter(af);
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-ink);
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
}
.af-passos strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
}
.af-passos span {
  font-size: var(--fs-13-5);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}
.af-passos code,
.af-regras code {
  font-size: 0.92em;
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  background: rgba(23, 21, 31, 0.06);
}

/* ---- Faixas de comissão ---- */
.af-faixas {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .af-faixas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .af-faixas {
    grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .af-faixa--destaque {
    grid-row: 1 / span 2;
  }
}
.af-faixa {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-1) solid var(--color-line);
  min-height: 100%;
}
.af-faixa--destaque {
  background: var(--color-brand);
  border-color: transparent;
  justify-content: center;
}
.af-faixa__tipo {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.af-faixa--destaque .af-faixa__tipo { color: var(--color-ink); opacity: 0.72; }
.af-faixa__pct {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--color-ink);
}
.af-faixa--destaque .af-faixa__pct { font-size: var(--fs-40, 2.5rem); }
.af-faixa__txt {
  margin: 0;
  font-size: var(--fs-13-5);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}
.af-faixa--destaque .af-faixa__txt { color: var(--color-ink); }

/* ---- Exemplos ---- */
.af-exemplos {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .af-exemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
.af-ex {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-1) solid var(--color-line);
}
.af-ex h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
}
.af-ex ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.af-ex li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-13-5);
  color: var(--color-ink-2);
}
.af-ex li:last-child {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: var(--border-1) solid var(--color-line);
  color: var(--color-ink);
}
.af-ex strong {
  color: var(--color-ink);
  font-weight: var(--fw-extrabold);
  text-align: right;
}
.af-nota-fina {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-13);
  color: var(--color-ink-3);
}

/* ---- Ciclo ---- */
.af-ciclo {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  counter-reset: ciclo;
}
@media (min-width: 700px) {
  .af-ciclo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.af-ciclo li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-1) solid var(--color-line);
  counter-increment: ciclo;
  min-height: 100%;
}
.af-ciclo li::before {
  content: counter(ciclo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-brand);
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
}
.af-ciclo strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
}
.af-ciclo span {
  font-size: var(--fs-13-5);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}

/* ---- Regras ---- */
.af-regras {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .af-regras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
.af-regras li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: var(--border-1) solid var(--color-line);
  min-height: 100%;
}
.af-regras strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
}
.af-regras span {
  font-size: var(--fs-13-5);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}

/* ---- CTA final ---- */
.af-cta {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 214, 0, 0.35), transparent 42%),
    var(--color-surface);
  border: var(--border-1) solid var(--color-line);
  text-align: center;
  animation: af-in 0.55s 0.28s ease both;
}
@media (min-width: 900px) {
  .af-cta { padding: var(--space-8); }
}
.af-cta__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 36rem;
  margin: 0 auto;
}
.af-cta__marca {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.af-cta h2 {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}
.af-cta__in > p {
  margin: 0;
  max-width: 38ch;
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-2);
}
.af-cta__btns {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  width: 100%;
  max-width: 20rem;
  margin-top: var(--space-2);
}
@media (min-width: 560px) {
  .af-cta__btns {
    flex-direction: row;
    max-width: none;
    justify-content: center;
    width: auto;
  }
}
.af-cta__btns .btn {
  text-decoration: none;
  min-width: 11.5rem;
}

@keyframes af-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes af-mascote {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .af-banner,
  .af-destaque,
  .af-sec,
  .af-cta,
  .af-banner__mascote {
    animation: none;
  }
}

/* ================================================================== Painel /afiliado */
.af-painel__topo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.af-painel__topo h1 {
  margin: 0;
  font-size: var(--fs-22);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
}
.af-painel__status {
  font-size: var(--fs-13);
  color: var(--color-ink-2);
}
.af-painel__status[data-st="ativo"] { color: var(--color-ok, #1a7a3c); font-weight: var(--fw-bold); }
.af-painel__status[data-st="pendente"] { color: var(--color-warn, #9a6b00); font-weight: var(--fw-bold); }
.af-painel__status[data-st="suspenso"] { color: var(--color-danger, #b42318); font-weight: var(--fw-bold); }

.af-saldos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .af-saldos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .af-saldos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.af-saldo {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-line);
}
.af-saldo span {
  display: block;
  font-size: var(--fs-12);
  color: var(--color-ink-3);
  margin-bottom: var(--space-1);
}
.af-saldo strong {
  font-size: var(--fs-16);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
}

.af-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-brand);
  color: var(--color-ink);
}
.af-link label {
  font-size: var(--fs-12);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.af-link__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.af-link code {
  flex: 1 1 12rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn-sm);
  background: var(--color-surface);
  font-size: var(--fs-13);
  word-break: break-all;
}

.af-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-line);
}
.af-form h2 {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: var(--fw-extrabold);
}
.af-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.af-form input {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn-sm);
  background: var(--color-bg, #fff);
  font: inherit;
  font-size: var(--fs-15);
}
.af-form__msg {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--color-ink-2);
}
.af-form__msg[data-erro="1"] { color: var(--color-danger, #b42318); }
.af-form__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.af-lista-itens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.af-lista-itens li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--color-line);
  background: var(--color-surface);
  font-size: var(--fs-13);
}
.af-lista-itens strong { font-weight: var(--fw-extrabold); }
.af-lista-itens .af-meta { color: var(--color-ink-3); }

.af-vazio {
  margin: 0;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink-3);
  font-size: var(--fs-14);
}

.af-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Painel: largura um pouco mais estreita para formulários */
body.af-pg:has(#af-raiz) .pg-top__in,
body.af-pg:has(#af-raiz) .pg-main {
  max-width: 42rem;
}