.elementor-2551 .elementor-element.elementor-element-4fee517{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-b368fdc *//* ==============================
   CORREÇÃO DOS ESPAÇOS EXAGERADOS
   ============================== */

/* Evita espaço gigante quando o field só tem texto */
.field:has(.field-desc):not(:has(input, select, textarea)) {
  margin-top: 12px;
}

/* Remove margem extra quando não existe título */
.field:has(.field-desc):not(:has(.field-title)) .field-desc {
  margin-top: 0;
}

/* Evita espaço duplicado após títulos de seção */
.form-trafego h2 + .field {
  margin-top: 14px;
}

/* Checkbox mais compacto */
.checkbox-group {
  margin-top: 10px;
}

/* Texto explicativo isolado mais colado */
.field > .texto-como-encontrar {
  margin-top: 6px;
}

/* Ajuste fino mobile */
@media (max-width: 768px) {
  .field {
    margin-top: 18px;
  }

  .field:has(.field-desc):not(:has(input, select, textarea)) {
    margin-top: 10px;
  }
}

/* ===============================
   CORREÇÃO DEFINITIVA MOBILE iOS
   =============================== */

@media (max-width: 768px) {

  /* Remove cálculo errado de altura do flex */
  .field.inline {
    display: block !important;
  }

  /* Cada field-block vira bloco normal */
  .field.inline .field-block {
    flex: none !important;
    width: 100%;
    margin-top: 16px;
  }

  /* Remove espaço fantasma do primeiro item */
  .field.inline .field-block:first-child {
    margin-top: 0;
  }

  /* Normaliza textos no Safari */
  .field-title,
  .field-desc {
    line-height: 1.35;
    margin-bottom: 6px;
  }

  /* Garante que inputs não herdem altura extra */
  .form-trafego input,
  .form-trafego select,
  .form-trafego textarea {
    margin-top: 6px;
  }

  /* Reduz espaço geral entre campos */
  .field {
    margin-top: 18px;
  }

  /* Campos só de texto (sem input) */
  .field:has(.field-desc):not(:has(input, select, textarea)) {
    margin-top: 10px;
  }
}/* End custom CSS */
/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Formulário de Tráfego Pago</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<style>
body {
  font-family: 'Inter', sans-serif;
  background: #0b0b0c;
  padding: 40px 20px;
  color: #fff;
}

form {
  background: #111114;
  max-width: 920px;
  margin: auto;
  padding: 48px;
  border-radius: 8px;
}

h2 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 64px;
}

.field {
  margin-top: 28px;
}

.field-title {
  font-size: 15px;
  font-weight: 500;
}

.field-desc {
  font-size: 13px;
  color: #a1a1aa;
  margin-top: 4px;
}

input, select, textarea {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #0f0f12;
  border: 1px solid #2a2a2e;
  border-radius: 8px;
  color: #fff;
}

textarea {
  min-height: 120px;
}

button {
  margin-top: 48px;
  padding: 14px;
  width: 100%;
  font-size: 14px;
  background: #ffffff;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

button.secondary {
  background: #1a1a1f;
  color: #fff;
  border: 1px solid #2a2a2e;
  margin-top: 12px;
}

.checkbox-group {
  margin-top: 20px;
}

.checkbox-group label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}

.checkbox-group input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #ffffff;
}

.error {
  color: #f87171;
  font-size: 13px;
  margin-top: 8px;
}

.hidden {
  display: none;
}
</style>
</head>

<body>

<form>

<h2>1. Identificação da empresa</h2>

<div class="field">
  <div class="field-title">CNPJ</div>
  <div class="field-desc">usamos o CNPJ para buscar automaticamente os dados da empresa</div>
  <input type="text" id="cnpj">
  <button type="button" class="secondary" onclick="buscarCNPJ()">Buscar dados pelo CNPJ</button>
  <div id="cnpjErro" class="error hidden">CNPJ inválido ou não encontrado</div>
</div>

<div class="field">
  <div class="field-title">Razão social</div>
  <input type="text" id="razaoSocial">
</div>

<div class="field">
  <div class="field-title">Nome fantasia</div>
  <input type="text" id="nomeFantasia">
</div>

<div class="field">
  <div class="field-title">Endereço completo</div>
  <input type="text" id="endereco">
</div>

<div class="field">
  <div class="field-title">E-mail principal</div>
  <input type="email" id="emailEmpresa">
</div>

<div class="field">
  <div class="field-title">Telefone e WhatsApp</div>
  <input type="text" id="telefoneEmpresa">
</div>

<h2>2. Informações do negócio</h2>

<div class="field">
  <div class="field-title">Segmento do negócio</div>
  <div class="field-desc">selecione a opção que mais representa sua empresa</div>
  <select>
    <option>Serviços</option>
    <option>Comércio local</option>
    <option>E-commerce</option>
    <option>Infoproduto</option>
    <option>Educação</option>
    <option>Saúde</option>
    <option>Estética e beleza</option>
    <option>Imobiliário</option>
    <option>Automotivo</option>
    <option>Alimentação</option>
    <option>Tecnologia</option>
    <option>Marketing e publicidade</option>
    <option>Financeiro</option>
    <option>Jurídico</option>
    <option>Turismo</option>
    <option>Construção e reforma</option>
    <option>Indústria</option>
    <option>Agronegócio</option>
    <option>Moda</option>
    <option>Outro</option>
  </select>
</div>

<div class="field">
  <div class="field-title">O que a empresa vende</div>
  <div class="field-desc">explique de forma simples</div>
  <textarea></textarea>
</div>

<div class="field">
  <div class="field-title">Ticket médio</div>
  <div class="field-desc">valor médio cobrado por produto ou serviço</div>
  <input type="text">
</div>

<div class="field">
  <div class="field-title">Modelo de venda</div>
  <select>
    <option>Produto</option>
    <option>Serviço</option>
    <option>Assinatura</option>
  </select>
</div>

<h2>3. Objetivo da contratação</h2>

<div class="checkbox-group">
  <label><input type="checkbox"> Gerar leads</label>
  <label><input type="checkbox"> Gerar vendas diretas</label>
  <label><input type="checkbox"> Gerar mensagens no WhatsApp</label>
  <label><input type="checkbox"> Aumentar alcance</label>
  <label><input type="checkbox"> Aumentar visualizações no Instagram</label>
  <label><input type="checkbox"> Aumentar seguidores qualificados</label>
  <label><input type="checkbox"> Reconhecimento de marca</label>
  <label><input type="checkbox"> Tráfego para site ou landing page</label>
  <label><input type="checkbox"> Outro objetivo</label>
</div>

<h2>4. Público que deseja alcançar</h2>

<div class="field">
  <div class="field-title">Quem é o cliente ideal</div>
  <textarea></textarea>
</div>

<div class="field">
  <div class="field-title">Tipo de cliente</div>
  <select>
    <option>Pessoa física</option>
    <option>Empresa</option>
  </select>
</div>

<div class="field">
  <div class="field-title">Faixa etária aproximada</div>
  <input type="text">
</div>

<div class="field">
  <div class="field-title">Região de atuação</div>
  <input type="text">
</div>

<div class="field">
  <div class="field-title">Público que não deve receber anúncios</div>
  <textarea></textarea>
</div>

<h2>5. Orçamento de anúncios</h2>

<div class="field">
  <div class="field-title">Valor mensal disponível</div>
  <input type="text">
</div>

<div class="field">
  <div class="field-title">Valor diário máximo</div>
  <input type="text">
</div>

<div class="checkbox-group">
  <label>
    <input type="checkbox" required>
    estou ciente de que o investimento em anúncios é pago diretamente para as plataformas
  </label>
</div>

<h2>6. Ciência sobre resultados</h2>

<div class="checkbox-group">
  <label><input type="checkbox" required> entendo que anúncios geram oportunidades, não garantem vendas</label>
  <label><input type="checkbox" required> sei que atendimento e oferta influenciam diretamente os resultados</label>
  <label><input type="checkbox" required> autorizo a criação, veiculação e otimização das campanhas</label>
</div>

<button type="submit">Enviar formulário</button>

</form>

<script>
function buscarCNPJ() {
  const cnpj = document.getElementById('cnpj').value.replace(/\D/g, '');
  const erro = document.getElementById('cnpjErro');

  erro.classList.add('hidden');

  if (cnpj.length !== 14) {
    erro.classList.remove('hidden');
    return;
  }

  fetch(`https://publica.cnpj.ws/cnpj/${cnpj}`)
    .then(r => r.json())
    .then(data => {
      const empresa = Array.isArray(data) ? data[0] : data;
      const est = empresa.estabelecimento;

      document.getElementById('razaoSocial').value = empresa.razao_social || '';
      document.getElementById('nomeFantasia').value = est.nome_fantasia || '';
      document.getElementById('emailEmpresa').value = est.email || '';
      document.getElementById('telefoneEmpresa').value =
        est.ddd1 && est.telefone1 ? `(${est.ddd1}) ${est.telefone1}` : '';
      document.getElementById('endereco').value =
        `${est.tipo_logradouro} ${est.logradouro}, ${est.numero} - ${est.bairro}, ${est.cidade?.nome}/${est.estado?.sigla}`;
    })
    .catch(() => erro.classList.remove('hidden'));
}
</script>

</body>
</html>/* End custom CSS */