/* Formulário de lead próprio — substitui o embed do RD Station.
   Cores tiradas da paleta do site: #0270EB (CTA) e #181A1B (texto).
   Branco sobre #0270EB dá 4,69:1, acima do mínimo AA de 4,5:1 para texto normal. */

.epoc-lead {
  --azul: #0270EB;
  --azul-escuro: #003E83;
  --texto: #181A1B;
  --borda: #c9ced1;
  --erro: #b3261e; /* 5,9:1 sobre branco */
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px;
  font-family: "Montserrat", sans-serif;
  color: var(--texto);
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
}

/* Sem título/subtítulo próprios: a seção que hospeda o form já traz o h2
   "Vamos iniciar sua jornada de crescimento?" e o h3 logo acima dele. */

.epoc-lead__campo { margin-bottom: 14px; }

.epoc-lead__campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--texto);
}

.epoc-lead__campo input,
.epoc-lead__campo select {
  width: 100%;
  min-height: 44px; /* alvo de toque folgado: o mínimo da WCAG 2.2 é 24px */
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-sizing: border-box;
}

.epoc-lead__campo select { cursor: pointer; }

.epoc-lead__campo input:focus-visible,
.epoc-lead__campo select:focus-visible,
.epoc-lead__botao:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

/* Estado de erro: nunca só pela cor — o texto da mensagem carrega a informação. */
.epoc-lead__campo input[aria-invalid="true"],
.epoc-lead__campo select[aria-invalid="true"] { border-color: var(--erro); border-width: 2px; }

.epoc-lead__erro {
  display: block;
  font-size: 13px;
  color: var(--erro);
  margin: 5px 0 0;
  font-weight: 600;
}
.epoc-lead__erro[hidden] { display: none; }

.epoc-lead__optin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0;
}
.epoc-lead__optin input {
  width: 24px; /* alvo mínimo da WCAG 2.2 (2.5.8) */
  height: 24px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}
.epoc-lead__optin label {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  color: #4a5054;
}

/* Dois seletores de classe (0,2,0) de propósito: o tema tem uma regra global
   ".elementor-kit-11894 button" (0,1,1) que pinta todo <button> cru de #0B31AE em
   formato pílula. Os CTAs que o site realmente mostra são <a class="elementor-button">,
   azuis #0270EB e retos — como o nosso é um <button> de verdade, sem forçar aqui ele
   sairia azul-marinho e arredondado no meio de uma página de botões azuis retos. */
.epoc-lead .epoc-lead__botao {
  width: 100%;
  min-height: 48px;
  padding: 13px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--azul);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.epoc-lead .epoc-lead__botao:hover { background: var(--azul-escuro); }
.epoc-lead .epoc-lead__botao[disabled] { opacity: .6; cursor: progress; }

.epoc-lead__status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.epoc-lead__status:empty { margin: 0; }
.epoc-lead__status--erro { color: var(--erro); }
.epoc-lead__status--ok { color: #0b6b3a; } /* 5,3:1 sobre branco */

.epoc-lead__obrigatorio { color: var(--erro); }

/* Honeypot: display:none mantém o campo fora da árvore de acessibilidade e do foco
   (aria-hidden + tabindex="-1" arriscaria a regra aria-hidden-focus do axe). */
.epoc-lead__hp { display: none; }

.epoc-lead--enviado .epoc-lead__form { display: none; }

@media (max-width: 480px) {
  .epoc-lead { padding: 20px 16px; }
}

/* ---------- Grupo de múltipla escolha ----------
   <fieldset> + <legend> e não um <label> solto: o leitor de tela precisa anunciar a pergunta
   ("Qual(is) o(s) formato(s)...") ao entrar em cada caixa, senão o visitante ouve dez opções
   sem saber do que se trata. O RD renderiza esses checkbox SEM label associado — este bloco
   também corrige isso. */
.epoc-lead__grupo {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0; /* fieldset tem min-width:min-content por padrão e estoura o grid */
}
.epoc-lead__grupo legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--texto);
}
.epoc-lead__opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 12px;
}
.epoc-lead__opcao {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.epoc-lead__opcao input {
  width: 24px; /* alvo mínimo da WCAG 2.2 (2.5.8) */
  height: 24px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}
.epoc-lead__grupo[aria-invalid="true"] legend { color: var(--erro); }

/* ---------- Entrega do material (aparece no lugar do formulário, após enviar) ----------
   O card fica visível quando .epoc-lead--enviado esconde só o <form>. É aqui que o material
   é entregue na hora — o que antes exigia mandar o visitante para uma LP do RD. */
.epoc-lead__entrega { margin-top: 16px; }
.epoc-lead__entrega-titulo {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--texto);
}
/* botão-link de download: herda o visual do botão de envio, mas some o cursor de progresso */
.epoc-lead__baixar {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: 8px;
  cursor: pointer;
}
.epoc-lead__baixar:last-child { margin-bottom: 0; }