/* Formulário do plugin eletrolar-forms. Usa as variáveis e as classes .es-form
   do tema; aqui entra só o que o tema não tem. Campo, botão e dropdown retos,
   como o resto do site. */

.es-formulario{
  --f-verde: var(--green-dark, #0B8A00);
  --f-texto: var(--green-text, #0A7E00);
  --f-borda: var(--gray-200, #DDDFE3);
  --f-erro:  var(--stop, #8E2C24);
  font-family: var(--font-texto, "neue-haas-grotesk-text", sans-serif);
}
.es-formulario,
.es-formulario *,
.es-formulario *::before,
.es-formulario *::after{ box-sizing: border-box; }

/* ------------------------------------------------------------------ grade
   O prefixo .es-formulario garante que a grade de quatro colunas vença a de
   duas do tema, qualquer que seja a ordem em que os CSS carregam. */
.es-formulario .es-form .es-bloco{ margin-inline: 0; padding-inline: 0; }
.es-formulario .es-form .es-linha--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.es-formulario .es-form .es-col-1{ grid-column: span 1; }
.es-formulario .es-form .es-col-2{ grid-column: span 2; }
.es-formulario .es-form .es-col-3{ grid-column: span 3; }
.es-formulario .es-form .es-col-4{ grid-column: span 4; }
.es-formulario .es-form .es-campo + .es-campo{ margin-top: 0; }
.es-formulario .es-form .es-intro{ max-width: 64ch; margin: 0 0 16px; line-height: 1.6; }
.es-formulario .es-form .es-aceite{ margin-top: 32px; }
.es-formulario .es-form .es-declaro a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.es-formulario .es-form .es-declaro a:hover{ color: var(--f-texto); }
.es-formulario .es-form .es-condicional{ margin-top: 18px; }
@media (max-width: 720px){
  .es-formulario .es-form .es-linha--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-formulario .es-form .es-col-3,
  .es-formulario .es-form .es-col-4{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .es-formulario .es-form .es-linha--4{ grid-template-columns: minmax(0, 1fr); }
  .es-formulario .es-form .es-linha--4 .es-campo{ grid-column: auto; }
}

/* ---------------------------------------------------------------- captcha */
.es-formulario .es-form .es-captcha{ margin-top: 24px; }
.es-formulario .es-form .es-captcha iframe{ max-width: 100%; }

/* ------------------------------------------- pergunta de interesse (Quero Expor) */
.es-formulario .es-form-aberto{
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--green-dark, #0B8A00);
  background: var(--bg, #FAFBFC);
  padding: clamp(28px, 4vw, 44px);
}
.es-formulario .es-form-aberto h2{
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 900; font-family: var(--font-titulo, "neue-haas-grotesk-display", sans-serif) !important; letter-spacing: -.026em;
  color: var(--black, #111);
}
.es-formulario .es-form-aberto p{
  margin: 12px 0 24px;
  font-size: 1.08rem; letter-spacing: .012em; line-height: 1.65;
  color: var(--gray-700, #374151);
}
.es-formulario .es-pergunta ~ .es-form .es-bloco:first-of-type{
  margin-top: 36px; padding-top: 36px;
  border-top: 1px solid var(--gray-200, #E2E4E8);
}
.es-formulario .es-form-pronto{ margin-top: clamp(28px, 4vw, 44px); }

/* Avise-me dentro do Quero Expor: o mesmo componente da página Avise-me,
   vestido como caixa do formulário em vez de faixa de página. */
.es-formulario .es-avise{
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--f-borda);
  text-align: left;
}
.es-formulario .es-avise::before{ display: none; }
.es-formulario .es-avise .esn-inner{ max-width: none; margin: 0; }
.es-formulario .es-avise .esn-title{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 10px; }
.es-formulario .es-avise .esn-lead{ margin: 0; max-width: 60ch; color: var(--gray-700, #374151); }
.es-formulario .es-avise .esn-form{ justify-content: flex-start; margin-top: 24px; }
.es-formulario .es-avise .esn-consent{ justify-content: flex-start; }
.es-formulario .es-avise .esn-consent a{ text-decoration: underline !important; text-underline-offset: 2px; }
.es-formulario .es-avise .esn-msg.is-error{ color: var(--f-erro); }
.es-formulario .es-avise .esn-consent{ order: 4; }
.es-formulario .es-avise .es-captcha{ order: 5; flex: 1 1 100%; align-items: flex-start; margin: 2px 0 0; }
.es-formulario .es-avise .es-captcha-aviso{ max-width: 60ch; margin-top: 8px; text-align: left; font-size: .8rem; }
.es-formulario .es-avise .esn-msg:empty{ display: none; }