/* Programa de afiliados (afiliados.html, 2026-10-07). Usa os tokens de site.css; azul é o único acento.
   Sotaque Folha (2026-10-09, marca/precepta/sotaque-folha/): tudo o que é da página do programa fica em folha,
   escopado em .af (o cabeçalho, o rodapé e os .btn globais são do bloco Folha de site.css, de outra frente).
   Escolhas do Sebastião (2026-10-09): 06 B check em L desenhado; 07 B rótulo na cantoneira (sobretítulo sem folhinha;
   rótulo de cartão senta num L que segue como filete); 08 B Mini L na cor de --marca (azul; dentro de caixa colorida, a
   cor da caixa); 09 C pontilhado (número azul e pontilhado ligando os passos); 13 B cantoneira (fundo claro da cor da
   caixa em --cb, folha sem contorno e L grosso no canto, na cor --cc); 16 C convergência, então nada de folha que vira: o botão fica em folha fixa. */

.af{
  --r-folha:14px 4px 14px 4px; --r-folha-m:10px 3px 10px 3px; --r-folha-s:7px 2px 7px 2px; --r-folha-xs:3.5px 1px 3.5px 1px;
  --marca:var(--azul);
}

.af .wrap{max-width:1040px}
.af section + section{margin-top:56px}

.af-hero{max-width:780px}
.af-hero h1{margin-top:14px;font-size:clamp(2rem,4.2vw,3.1rem);font-weight:700;letter-spacing:-.025em;line-height:1.06}
/* destaque de palavra em título vai em Poppins, como na proposta e na matriz editorial (a serifa fica para citação) */
.af-hero h1 .serif{color:var(--azul);font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.af-hero p{margin-top:18px;font-size:1.06rem;line-height:1.65;color:#3D4043;max-width:62ch}
.af-hero p b{color:var(--grafite)}
.af-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.af-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.af-passo{position:relative;padding:24px;border-radius:var(--r-folha);background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.af-passo i{font-style:normal;color:var(--azul);font-weight:700;font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums}
/* pontilhado que liga um passo ao seguinte: horizontal entre cartões lado a lado, vertical quando empilham */
.af-passo:not(:last-child)::after{content:"";position:absolute;top:calc(24px + .575rem - 1px);left:calc(24px + 1.15rem);right:-34px;border-top:2px dotted var(--azul);pointer-events:none}
.af-passo b{font-size:1.02rem;margin-top:4px}
.af-passo p{font-size:.9rem;line-height:1.6;color:#3D4043}

.af h2{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.015em}
.af .sub{margin-top:8px;font-size:.95rem;color:var(--cinza-medio)}

.af-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.af-card{padding:26px;border-radius:var(--r-folha);background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.af-card .eyebrow{display:block;position:relative;margin:0 0 4px;padding:0 0 7px 17px;line-height:1.3}
.af-card .eyebrow::before{content:"";position:absolute;left:0;bottom:0;width:12px;height:18px;border-left:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);border-bottom-left-radius:5px}
.af-card .eyebrow::after{content:"";position:absolute;left:12px;right:0;bottom:0;height:1px;background:var(--rule)}
.af-card.destaque{border-color:rgba(0,103,185,.45)}
.af-card h3{font-size:1.15rem;font-weight:700}
.af-card dl{margin:6px 0 0;display:grid;gap:0}
.af-card dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.af-card dt{font-size:.86rem;color:var(--cinza-medio)}
.af-card dd{margin:0;text-align:right;font-size:.98rem}
.af-card dd s{color:var(--cinza-medio)}
.af-card dd small{display:block;font-size:.76rem;color:var(--cinza-medio)}
.af-comissao{margin-top:auto;padding-top:14px;font-size:.95rem;color:#3D4043}
.af-comissao b{display:block;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--azul);line-height:1.15}

.af-regras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.af-regras-grid > div{--cc:var(--azul);--cb:#EAF3FB;position:relative;padding:22px 24px;border-radius:var(--r-folha);background:var(--cb)}
/* cantoneira: fundo claro da cor da caixa (--cb), folha sem contorno e L grosso no canto grande, na cor --cc */
.af-regras-grid > div::before,.af-recusado::before,.af-pausado::before{content:"";position:absolute;left:0;top:0;width:30px;height:24px;border-left:3px solid var(--cc);border-top:3px solid var(--cc);border-top-left-radius:14px;pointer-events:none}
.af-regras-grid h3{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc)}
.af-regras-grid ul{list-style:none;margin:12px 0 0;padding:0}
.af-regras-grid li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.6;color:#3D4043}
.af-regras-grid li::before{content:"";position:absolute;left:3px;top:calc(.8em - 4.5px);width:7px;height:8px;border-left:2.2px solid var(--marca);border-bottom:2.2px solid var(--marca);border-bottom-left-radius:3px}
.af-regras-grid li + li{margin-top:8px}
.af-termo-link{margin-top:16px;font-size:.9rem;color:var(--cinza-medio)}
.af-termo-link a,.af-privacidade a,.af-rodape a,.af-estado p a{color:var(--azul)}

.af-inscricao{margin-top:56px;scroll-margin-top:110px}
.af-estado{display:flex;flex-direction:column;gap:12px}
.af-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.af-recusado,.af-pausado{--cc:#C8372D;--cb:#FDF1EF;--marca:#C8372D;position:relative;padding:12px 16px 12px 18px;border-radius:var(--r-folha);background:var(--cb);color:var(--danger-fg);font-size:.86rem}

.af-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:8px}
.af-form .largo{grid-column:1 / -1}
.af-form .field label small{font-weight:400;color:var(--cinza-medio)}
.af-form .check a{color:var(--azul)}
.af-form .check.bad{color:var(--danger-fg)}
.af-form-fim{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.af-msg{font-size:.86rem;color:var(--cinza-medio)}
.af-msg.erro{color:var(--danger-fg)}
.af-msg.ok{color:#2F7D4F}
.af-privacidade{font-size:.8rem;color:var(--cinza-medio)}

.af-painel-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.af-cupom{display:flex;align-items:center;gap:14px;margin-top:6px}
.af-cupom b{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:700;letter-spacing:.06em;color:var(--azul)}
.af-painel-topo .sub{max-width:44ch;margin:0}
.af-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.af-kpis > div{padding:16px 18px;border-radius:var(--r-folha);background:var(--bg-claro);display:flex;flex-direction:column;gap:2px}
.af-kpis b{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.af-kpis span{font-size:.78rem;color:var(--cinza-medio)}
.af-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch}
.af-tabela table{width:100%;border-collapse:collapse;font-size:.88rem}
.af-tabela th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza-medio);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--rule)}
.af-tabela td{padding:10px;border-bottom:1px solid var(--rule);vertical-align:top}
.af-tabela td small{display:block;color:var(--cinza-medio);font-size:.76rem}
.af-texto{padding:18px 20px;border-radius:var(--r-folha);border:1px dashed #CFCFC9}
.af-texto-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.af-texto p{margin-top:10px;font-size:.9rem;line-height:1.6;color:#3D4043;white-space:pre-line}
.af-rodape{font-size:.82rem;color:var(--cinza-medio)}
/* prazo da primeira venda e página de vendas (2026-10-09) */
.af-prazo{margin-top:16px;font-size:.9rem;line-height:1.6;color:#3D4043;max-width:80ch}
.af-aviso-prazo{padding:12px 16px;border-radius:var(--radius-sm);background:var(--azul-tint);font-size:.88rem;line-height:1.55;color:#3D4043}
.af-aviso-prazo b{color:var(--grafite)}
.af-vendas-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.af-vendas-head a{font-size:.86rem;color:var(--azul)}
.af-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.af-filtros label{display:grid;gap:4px;font-size:.78rem;font-weight:600;color:var(--grafite)}
.af-filtros select{padding:8px 12px;border-radius:var(--radius-sm);border:1px solid #D6D5CF;background:var(--paper);font:inherit;font-size:.88rem}
.af-total{font-size:.9rem;color:#3D4043}
.af-total b{color:var(--grafite)}

/* kit de divulgação (2026-10-09): prévias na parte pública e artes com o cupom no painel */
.af-kit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;margin-top:18px}
.af-kit-grid figure{margin:0;display:flex;flex-direction:column;gap:8px}
.af-kit-grid img,.af-kit-grid canvas{display:block;width:100%;height:auto;border-radius:var(--r-folha);border:1px solid var(--rule);background:#fff}
.af-kit-grid figcaption{font-size:.82rem;color:var(--cinza-medio)}
.af-kit{display:flex;flex-direction:column;gap:6px}
.af-kit .af-texto-head small{font-size:.8rem;color:var(--cinza-medio)}
.af-kit-card{display:flex;flex-direction:column;gap:8px}
.af-kit-card b{font-size:.86rem}
.af-kit-card .af-botoes{gap:8px;margin-top:0}
.af-kit-card .btn{padding:8px 14px;font-size:.8rem}

/* ---- Sotaque Folha: botões, cartão da inscrição e formulário (só dentro de .af) ---- */
.af .acct-card{border-radius:var(--r-folha)}
/* botão em folha fixa, sem brilho */
.af .btn{border-radius:var(--r-folha-m)}
.af .btn-primary{box-shadow:none}
.af .btn-primary::after{content:none;animation:none}
.af .btn-primary:hover{transform:none}
.af .field input{border-radius:var(--r-folha-m)}
/* 06 B: caixa de 18 px com raio 4 e contorno 1,75; marcada, contorno azul e o check do L desenhado em azul, sem
   preencher (uma capa da cor do papel sai da frente do check, da esquerda para a direita) */
.af .check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;flex:none;border:1.75px solid #BDBFBB;border-radius:4px;background:linear-gradient(var(--paper),var(--paper)) right center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230067B9' stroke-width='3' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l3.9 3.9q1.1 1.1 2.2 0l8.9-8.9'/%3E%3C/svg%3E") center/14px 14px no-repeat;cursor:pointer;transition:border-color .18s,background-size .38s cubic-bezier(.2,.7,.2,1)}
.af .check input[type="checkbox"]:checked{border-color:var(--azul);background-size:0% 100%,14px 14px}
.af .check.bad input[type="checkbox"]{border-color:var(--danger-fg)}
.af .check input[type="checkbox"]:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.af .check input[type="checkbox"]{transition:none}}

@media (max-width:860px){
  .af-passos,.af-regras-grid{grid-template-columns:1fr}
  .af-passo{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start}
  .af-passo i{grid-row:1 / span 2;margin-top:3px}
  .af-passo b{margin-top:0}
  .af-passo:not(:last-child)::after{top:calc(27px + 1.15rem + 8px);bottom:-34px;left:28px;right:auto;border-top:0;border-left:2px dotted var(--azul)}
  .af-kit-grid{grid-template-columns:1fr 1fr}
  .af-cards{grid-template-columns:1fr}
  .af-kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .af-form{grid-template-columns:1fr}
  .af-hero-cta .btn,.af-botoes .btn{flex:1 1 100%;justify-content:center;text-align:center}
}