/*
  Página Seja um Distribuidor (07/10/2026, pedido da reunião de 07/10). Só esta página carrega este arquivo.
  O texto à esquerda e o panfleto do Clube Fiel à direita; no tablet e no celular, o panfleto vem abaixo do texto.
  Para voltar: DEV-LOCAL/backup-antes-distribuidor-2026-10-07
*/
.distribuidor-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:start}
.distribuidor-abertura{font-size:1.12rem;font-weight:500;color:var(--navy)}
.distribuidor-texto h2{margin-top:30px}

/* as vantagens: cada uma com um círculo no verde da marca e o sinal de certo no azul-marinho do site */
.distribuidor-vantagens{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.distribuidor-vantagens li{position:relative;padding-left:34px;font-weight:600;color:var(--navy)}
.distribuidor-vantagens li::before{content:"";position:absolute;left:0;top:.12em;width:22px;height:22px;border-radius:50%;
  background:#A6CE38 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002549' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}

.distribuidor-lema{font-size:1.2rem;font-weight:800;color:var(--navy)}

/* WhatsApp comercial (14/10/2026): embaixo do panfleto, na largura dele. O verde do WhatsApp (o mesmo do ícone do
   cabeçalho), com o texto em verde-escuro, porque branco sobre esse verde fica sem contraste */
.distribuidor-whats{margin:22px 0 0}
.botao.botao-whats{display:flex;width:100%;padding-inline:16px;background:#25D366;color:#063B22;text-align:left;
  box-shadow:0 14px 26px -18px rgba(0,37,73,.55)}
.botao.botao-whats svg{flex:0 0 auto;width:20px;height:20px}
/* no celular o texto vai para 2 linhas: o número fica inteiro na 2ª */
.botao-whats .sem-quebra{white-space:nowrap}
.botao.botao-whats:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* o formulário (o contato é só por ele desde 07/10/2026): o visual do formulário do catálogo, num cartão como o antigo do e-mail */
.distribuidor-form{margin-top:26px;border:0;border-radius:16px;box-shadow:0 14px 30px -22px rgba(0,37,73,.45);scroll-margin-top:110px}
.distribuidor-form h3{margin:0 0 14px;font-size:1.15rem;color:var(--navy)}
/* campos em pares (08/10/2026): quando um rótulo quebra em 2 linhas (o do CNPJ), as caixas do par continuam na mesma altura */
.distribuidor-form .campos > div.campo{display:flex;flex-direction:column;justify-content:flex-end}
/* "Já trabalha com a rede pública de ensino?" (sim/não, 08/10/2026): a pergunta no estilo dos rótulos, as opções lado a lado */
.distribuidor-form .distribuidor-escolha{border:0;padding:0;margin:0 0 12px;min-width:0}
.distribuidor-form .distribuidor-escolha legend{padding:0;margin-bottom:7px;font-size:.82rem;font-weight:700;color:var(--navy)}
.distribuidor-form .distribuidor-escolha label{display:inline-flex;align-items:center;gap:7px;margin:0 26px 0 0;font-size:.9rem;font-weight:600;cursor:pointer}
.distribuidor-form .distribuidor-escolha input{width:18px;height:18px;margin:0;padding:0;border:0;accent-color:var(--navy);cursor:pointer}

.distribuidor-panfleto img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 50px -24px rgba(0,37,73,.5)}

@media (max-width:1024px){
  .distribuidor-grade{grid-template-columns:1fr;gap:36px}
  .distribuidor-panfleto{width:100%;max-width:420px;margin-inline:auto}
}
/* só no celular (14/10/2026, pedido do Wedson): o texto, o panfleto, o formulário e o botão do WhatsApp, nessa ordem.
   As duas colunas "se desfazem" (display:contents) e as quatro partes são ordenadas na grade */
@media (max-width:767px){
  .distribuidor-grade{gap:0}
  .distribuidor-texto,.distribuidor-panfleto{display:contents}
  .distribuidor-intro{order:1}
  .distribuidor-panfleto img{order:2;max-width:420px;margin:8px auto 0}
  .distribuidor-form{order:3;margin-top:30px}
  .distribuidor-whats{order:4;max-width:420px;width:100%;margin:26px auto 0}
}