.elementor-2023 .elementor-element.elementor-element-6e3c9e7{--display:flex;--min-height:300px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}#elementor-popup-modal-2023{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-2023 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-2023 .dialog-close-button{display:flex;font-size:20px;}#elementor-popup-modal-2023 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-2023 .dialog-close-button i{color:var( --e-global-color-accent );}#elementor-popup-modal-2023 .dialog-close-button svg{fill:var( --e-global-color-accent );}@media(max-width:767px){.elementor-2023 .elementor-element.elementor-element-6e3c9e7{--margin-top:5px;--margin-bottom:5px;--margin-left:5px;--margin-right:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:-30px;--padding-right:20px;}.elementor-2023 .elementor-element.elementor-element-6e3c9e7.e-con{--align-self:center;}#elementor-popup-modal-2023 .dialog-message{width:95vw;}#elementor-popup-modal-2023 .dialog-close-button{font-size:13px;}}/* Start custom CSS for html, class: .elementor-element-8d4635f */<script>
  // Converte o input submit do HubSpot em button com ícone após o texto
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
      document.querySelectorAll('.hs-form input[type="submit"]').forEach(function (inp) {
        const btn = document.createElement('button');
        btn.type = 'submit';
        btn.className = inp.className; // mantém classes HubSpot
        // Texto do botão + ícone SVG inline (sem depender de Font Awesome)
        const label = inp.value || 'Enviar';
        btn.innerHTML = label + ' <svg class="cta-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M13.172 12L8.222 7.05l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z"/></svg>';

        // Copia atributos úteis (name, id, aria-*)
        Array.from(inp.attributes).forEach(attr => {
          if (!btn.hasAttribute(attr.name)) btn.setAttribute(attr.name, attr.value);
        });

        // Substitui no DOM
        inp.parentNode.replaceChild(btn, inp);
      });
    }
  });
</script>

<script>
  // Aguarda o formulário HubSpot ser renderizado
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {

      // Define os placeholders desejados
      const placeholders = {
        firstname: 'Nome',
        email: 'E-mail',
        phone: 'Telefone'
      };

      // Aplica os placeholders aos campos do formulário
      document.querySelectorAll('.hs-form input').forEach(input => {
        const name = input.getAttribute('name');
        if (placeholders[name]) {
          input.setAttribute('placeholder', placeholders[name]);
        }
      });
    }
  });
</script>




CSS

/* =========================================================
   ESTILIZAÇÃO BASE DO FORMULÁRIO HUBSPOT
   ========================================================= */

/* Garante que o formulário ocupe toda a largura disponível */
.hs-form {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Garante que os wrappers internos também respeitem a largura total */
.hs-form fieldset,
.hs-form .hs-form-field,
.hs-form .input,
.hs-form .hs-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Estiliza todos os campos do formulário */
.hs-form .hs-input {
  border: 2px solid #eee;
  border-radius: 4px;
  padding: 10px; /* espaçamento interno do campo */
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   ESTILIZAÇÃO DOS CAMPOS ESPECÍFICOS
   ========================================================= */

/* Estiliza o campo de nome */
.hs-form .hs-form-field input[name="firstname"] { background: #ffffff; }
/* Campo e-mail */
.hs-form .hs-form-field input[name="email"] { background: #ffffff; }
/* Campo telefone */
.hs-form .hs-form-field input[name="phone"] { background: #ffffff; }

/* =========================================================
   BOTÃO DE ENVIO (COM ÍCONE ALINHADO AO TEXTO)
   ========================================================= */

/* Regras aplicadas tanto ao input (fallback) quanto ao button convertido */
.hs-form input[type="submit"],
.hs-form button[type="submit"] {
  background: #51E260;
  color: #fff;
  border-radius: 4px;
  width: 100% !important; /* garante 100% da largura */
  padding: 12px 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  /* Alinha texto e ícone lado a lado, com espaçamento fixo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* ícone sempre a 6px do texto */
  white-space: nowrap; /* evita quebra de linha */
  box-sizing: border-box;
}

/* Efeito hover no botão */
.hs-form input[type="submit"]:hover,
.hs-form button[type="submit"]:hover {
  background: #2fbf41; /* verde mais escuro no hover */
}

/* Ícone (SVG inline) do botão */
.hs-form button[type="submit"] .cta-icon {
  width: 16px;
  height: 16px;
  line-height: 1;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.25s ease;
}

/* Animação suave da seta no hover */
.hs-form button[type="submit"]:hover .cta-icon {
  transform: translateX(3px);
}

/* =========================================================
   REMOVER RÓTULOS (LABELS) E MANTER PLACEHOLDERS
   ========================================================= */
.hs-form label { display: none !important; }
.hs-form input::placeholder,
.hs-form textarea::placeholder { color: #666; opacity: 1; }
.hs-form .hs-form-field > label span { display: none !important; }

/* =========================================================
   ESPAÇAMENTO ENTRE OS CAMPOS
   ========================================================= */
.hs-form .hs-form-field { margin-bottom: 8px; }

/* =========================================================
   AJUSTES FINAIS (RESPONSIVIDADE E ESTÉTICA)
   ========================================================= */
@media (max-width: 768px) {
  .hs-form,
  .hs-form fieldset,
  .hs-form .hs-form-field,
  .hs-form .input,
  .hs-form .hs-input,
  .hs-form input[type="submit"],
  .hs-form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
  }
}



/* =========================================================
   VALIDAÇÃO & ERROS (ESTILO ELEGANTE)
   ========================================================= */

/* Remove marcadores dos UL gerados pelo HubSpot */
.hs-form .hs-error-msgs {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

/* Mensagem de erro personalizada e legível */
.hs-form .hs-error-msgs li {
  margin: 0;
  padding: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #ff5252; /* vermelho padrão de alerta */
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* Borda vermelha e leve brilho quando há erro */
.hs-form .hs-input.error,
.hs-form .hs-input.invalid {
  border-color: #ff5252 !important;
  box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.12);
  transition: all 0.3s ease;
}

/* Remove asteriscos dos labels (que estão ocultos) */
.hs-form .hs-form-required {
  display: none !important;
}

/* Quando o usuário começa a digitar, remove a borda vermelha */
.hs-form .hs-input:focus {
  border-color: #51E260 !important; /* volta pro verde */
  box-shadow: 0 0 0 2px rgba(81, 226, 96, 0.15);
  outline: none;
}/* End custom CSS */