/* Ponte entre o formulário do HubSpot e o desenho `.cform` e `.lp-form` das páginas.
 *
 * Este arquivo é compartilhado, e é exceção consciente à convenção de um CSS
 * por página: a ponte se repete em cinco páginas, e a própria convenção diz que
 * padrão repetido em três ou mais sobe para um lugar só. Quatro cópias da mesma
 * ponte é garantia de deriva.
 *
 * O truque é que ele é curto de propósito. O `.cform` de cada página já veste
 * `input`, `select`, `textarea` e `label` por seletor de elemento, então os
 * campos que o HubSpot injeta já nascem com a cara certa. Sobra o que a
 * marcação do HubSpot faz diferente: a caixa do campo, as duas colunas e o
 * botão, que lá é um `<input type="submit">` e por isso cairia na regra dos
 * campos de texto. */

:is(.cform, .lp-form) .hs-form-field {
  margin-bottom: 14px;
}

:is(.cform, .lp-form) .hs-form-field > label {
  display: block;
  margin-bottom: 6px;
}

:is(.cform, .lp-form) .hs-form-required {
  margin-left: 2px;
}

:is(.cform, .lp-form) .hs-field-desc {
  font-size: 13px;
  opacity: .85;
  margin: 4px 0 0;
}

/* O HubSpot manda duas colunas com float. Em cartão estreito isso dá campo de
   150px, e ninguém digita e-mail em 150px. Uma coluna só, sempre: as páginas
   que usam isto têm o formulário numa coluna lateral, nunca em largura total. */
:is(.cform, .lp-form) :is(.form-columns-2, .form-columns-3) {
  display: block;
}

:is(.cform, .lp-form) :is(.form-columns-2, .form-columns-3) > .hs-form-field {
  width: 100%;
  float: none;
  padding: 0;
}

:is(.cform, .lp-form) .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  box-sizing: border-box;
}

:is(.cform, .lp-form) textarea.hs-input {
  min-height: 104px;
  resize: vertical;
}

/* O botão. Sem esta regra ele herda o estilo de campo de texto e vira uma caixa
   branca com a palavra "Enviar" dentro. */
:is(.cform, .lp-form) .hs-button {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
}

:is(.cform, .lp-form) .hs-button:hover {
  filter: brightness(1.12);
}

:is(.cform, .lp-form) .hs-form ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

:is(.cform, .lp-form) :is(.hs-error-msg, .hs-error-msgs label) {
  font-size: 13px;
  color: #C0392B;
}

:is(.cform, .lp-form) .legal-consent-container {
  font-size: 13px;
  line-height: 1.6;
}

:is(.cform, .lp-form) .submitted-message {
  font-size: 15px;
  line-height: 1.6;
}

:is(.cform, .lp-form) .hs-cform-erro {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}