.elementor-80 .elementor-element.elementor-element-0b8d1e2{--display:flex;}/* Start custom CSS */<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fale com um especialista — FEN Educação</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --paper-0:#FAFAF8;--paper-50:#F3F3F0;--paper-100:#E7E7E2;
  --ink-900:#0A0A0A;--ink-700:#1C1C1A;--ink-500:#6E6E69;--ink-300:#A8A8A2;
  --line-light:rgba(10,10,10,0.1);--line-dark:rgba(255,255,255,0.14);
  --lime-400:#E3FC5B;--lime-500:#CBE23E;
  --purple-200:#DCD3FF;--purple-300:#B9A6FF;--purple-400:#9A7EFF;--purple-500:#7C5CFF;--purple-600:#6A46F0;--purple-700:#4B3499;--purple-900:#2E2159;
  --teal-500:#2BBFAE;--teal-700:#1D5C54;--teal-900:#123531;
  --amber-500:#D97A3D;--amber-700:#8A4520;--amber-900:#4F2812;
  --blue-500:#4C7FD9;--blue-700:#2E4E85;--blue-900:#1B2E4D;
  --surface-page:var(--paper-50);--surface-page-dark:var(--ink-900);
  --surface-card:#FFFFFF;--surface-card-dark:rgba(255,255,255,0.05);
  --text-primary:var(--ink-900);--text-primary-inverse:#FFFFFF;
  --text-secondary:var(--ink-500);--text-secondary-inverse:rgba(255,255,255,0.62);
  --border-subtle:var(--line-light);--border-subtle-inverse:var(--line-dark);
  --accent-cta-bg:var(--purple-500);--accent-cta-text:#FFFFFF;

  --font-sans:'Plus Jakarta Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --text-eyebrow:13px;--tracking-eyebrow:0.08em;
  --text-xs:13px;--text-sm:15px;--text-base:17px;--text-lg:20px;
  --text-h4:19px;--text-h3:26px;--text-h2:35px;--text-h1:51px;--text-display:70px;
  --leading-tight:1.05;--leading-snug:1.2;--leading-normal:1.5;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --container-max:1280px;--container-pad:24px;

  --radius-sm:12px;--radius-md:20px;--radius-lg:32px;--radius-xl:40px;--radius-pill:999px;
  --shadow-card:0 1px 2px rgba(10,10,10,0.06);
  --shadow-float:0 16px 40px rgba(0,0,0,0.35);
  --shadow-modal:0 24px 64px rgba(0,0,0,0.45);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;--duration-base:240ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:var(--weight-semibold)}

.wrap{max-width:900px;margin:0 auto;padding:0 var(--container-pad)}
.wrap-wide{max-width:1180px;margin:0 auto;padding:0 var(--container-pad)}

.section{padding:var(--space-9) 0}
.section--dark{background:var(--surface-page-dark);color:#fff}

.eyebrow{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--space-4);display:flex;align-items:center;gap:10px}
.eyebrow--inverse{color:var(--text-secondary-inverse)}
.eyebrow::before{content:'';width:16px;height:1px;background:currentColor;opacity:.5;transform-origin:left;transform:scaleX(0)}
.eyebrow.is-drawn::before{transition:transform .5s var(--ease-standard);transform:scaleX(1)}

.body{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-secondary)}
.body--inverse{color:var(--text-secondary-inverse)}

.btn{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:15px;border:none;cursor:pointer;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);white-space:nowrap}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.98)}
.btn--lg{padding:16px 30px;font-size:16px}
.btn--accent{background:var(--accent-cta-bg);color:var(--accent-cta-text)}
.btn-icon{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);flex-shrink:0}
.btn-icon svg{width:11px;height:11px}
.btn[disabled]{opacity:.6;cursor:default;pointer-events:none}

.hero-title{font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:-0.015em;font-weight:600;margin-bottom:var(--space-5)}
@media (max-width:900px){.hero-title{font-size:45px}}
@media (max-width:560px){.hero-title{font-size:32px}}
.hero-grid .hero-title{font-size:38px}
@media (min-width:1240px){.hero-grid .hero-title{font-size:44px}}
@media (max-width:980px){.hero-grid .hero-title{font-size:46px}}
@media (max-width:560px){.hero-grid .hero-title{font-size:30px}}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 0.95fr;gap:56px;align-items:start}
.hero-grid > div{min-width:0}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(28px)}

.glow-bg{position:relative;overflow:hidden}
.glow-blob{position:absolute;border-radius:999px;filter:blur(50px);pointer-events:none;opacity:.4}

/* Qualify box */
.qualify-box{display:flex;gap:14px;align-items:flex-start;background:rgba(124,92,255,.14);border:1px solid rgba(154,126,255,.35);border-radius:var(--radius-md);padding:18px 20px;margin-top:32px}
.qualify-box__icon{width:38px;height:38px;border-radius:11px;background:rgba(154,126,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qualify-box__icon svg{width:18px;height:18px;color:var(--purple-300)}
.qualify-box p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin:0}
.qualify-box strong{color:#fff;font-weight:700}

/* Form card */
.form-card{position:relative;background:var(--surface-card);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-modal)}
@media (max-width:560px){.form-card{padding:26px 22px}}

.field{margin-bottom:20px}
.field__label{display:block;font-size:14px;font-weight:600;color:var(--ink-900);margin-bottom:4px}
.field__hint{font-size:12.5px;color:var(--text-secondary);margin-bottom:8px}
.field__control{width:100%;font-family:var(--font-sans);font-size:15px;color:var(--ink-900);padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--paper-50);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.field__control::placeholder{color:var(--ink-300)}
.field__control:focus{outline:none;border-color:var(--purple-500);box-shadow:0 0 0 3px rgba(124,92,255,.15);background:#fff}
textarea.field__control{resize:vertical;min-height:104px;line-height:1.5;font-family:var(--font-sans)}
.field__select-wrap{position:relative}
select.field__control{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
select.field__control:invalid{color:var(--ink-300)}
.field__select-wrap svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-secondary);pointer-events:none}
.field__error{font-size:12px;color:#C6433A;margin-top:5px;display:none}
.field--error .field__control{border-color:#C6433A}
.field--error .field__error{display:block}

.form-disclaimer{font-size:12.5px;line-height:1.55;color:var(--text-secondary);text-align:center;margin-top:16px}

.form-success{text-align:center;padding:24px 8px}
.form-success__icon{width:56px;height:56px;border-radius:999px;background:var(--lime-400);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.form-success__icon svg{width:26px;height:26px;color:var(--ink-900)}
.form-success h3{font-size:22px;margin-bottom:10px}
.form-success p{font-size:14.5px;line-height:1.6;color:var(--text-secondary);max-width:340px;margin:0 auto}

footer{background:var(--ink-900);color:#fff;padding:32px 0}
footer .body{font-size:14px;color:var(--text-secondary-inverse)}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:22px;height:22px;border-radius:6px}

/* Força os Containers do Elementor que envolvem esta página a ficarem em largura total,
   mesmo que o Container esteja configurado como "Boxed" no editor. Só afeta blocos que
   contenham as classes desta página (top-bar, nav-pill, section, footer, sticky-cta),
   então não deve interferir em outras páginas do site. */
.e-con:has(.top-bar),.e-con:has(.nav-pill),.e-con:has(.section),.e-con:has(footer),.e-con:has(.sticky-cta),
.e-con-inner:has(.top-bar),.e-con-inner:has(.nav-pill),.e-con-inner:has(.section),.e-con-inner:has(footer),.e-con-inner:has(.sticky-cta){
  max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;
  padding-top:0!important;padding-bottom:0!important;gap:0!important;row-gap:0!important;column-gap:0!important;
}
<\/style>
</head>
<body>

<section class="section section--dark glow-bg">
  <div class="glow-blob" style="top:-140px;right:-120px;width:460px;height:460px;background:var(--purple-600)"></div>
  <div class="glow-blob" style="bottom:-160px;left:-140px;width:360px;height:360px;background:var(--purple-900)"></div>

  <div class="wrap-wide" style="position:relative;z-index:1">
    <div class="hero-grid">

      <div>
        <a href="https://feneducacao.com" style="display:inline-flex;align-items:center;gap:10px;margin-bottom:40px" class="reveal" data-reveal>
          <img src="https://feneducacao.com/wp-content/uploads/2026/09/fen-logo.png" alt="FEN Educação" style="width:26px;height:26px;border-radius:7px">
          <span style="font-size:14px;font-weight:700;color:#fff">FEN Educação</span>
        </a>

        <div class="eyebrow eyebrow--inverse reveal" data-reveal>Conversa com especialista</div>

        <h1 class="hero-title reveal" data-reveal style="color:#fff">Sua empresa cresceu. Agora, precisa de um plano para continuar crescendo.</h1>

        <p class="body body--inverse reveal" data-reveal style="max-width:460px">Preencha o formulário para solicitar uma conversa com um especialista da FEN Educação sobre os desafios e os próximos passos do seu negócio.</p>

        <div class="qualify-box reveal" data-reveal>
          <div class="qualify-box__icon"><i data-lucide="target"></i></div>
          <p>Esta conversa é para o momento certo do seu negócio: <strong>empresas que faturam pelo menos R$ 150 mil por mês</strong> e buscam estruturar sua próxima fase de crescimento.</p>
        </div>
      </div>

      <div class="form-card reveal" data-reveal>
        <form id="specialistForm" novalidate>

          <div class="field">
            <label class="field__label" for="f-nome">Nome completo</label>
            <div class="field__hint">Como você se chama?</div>
            <input class="field__control" type="text" id="f-nome" name="nome" placeholder="Seu nome completo" autocomplete="name" required>
            <div class="field__error">Digite seu nome completo.</div>
          </div>

          <div class="grid grid-2">
            <div class="field">
              <label class="field__label" for="f-email">E-mail</label>
              <div class="field__hint">Seu melhor e-mail</div>
              <input class="field__control" type="email" id="f-email" name="email" placeholder="voce@empresa.com" autocomplete="email" required>
              <div class="field__error">Digite um e-mail válido.</div>
            </div>

            <div class="field">
              <label class="field__label" for="f-whatsapp">WhatsApp com DDD</label>
              <div class="field__hint">(00) 00000-0000</div>
              <input class="field__control" type="tel" id="f-whatsapp" name="whatsapp" placeholder="(00) 00000-0000" inputmode="numeric" autocomplete="tel" required>
              <div class="field__error">Digite um WhatsApp válido com DDD.</div>
            </div>
          </div>

          <div class="field">
            <label class="field__label" for="f-instagram">Instagram</label>
            <div class="field__hint">@seuperfil ou @suaempresa</div>
            <input class="field__control" type="text" id="f-instagram" name="instagram" placeholder="@seuperfil ou @suaempresa" required>
            <div class="field__error">Informe seu Instagram.</div>
          </div>

          <div class="field">
            <label class="field__label" for="f-faturamento">Qual é o faturamento médio mensal da sua empresa?</label>
            <div class="field__hint">Selecione uma faixa</div>
            <div class="field__select-wrap">
              <select class="field__control" id="f-faturamento" name="faturamento" required defaultValue="">
                <option value="" disabled selected>Selecione uma faixa</option>
                <option value="ate-150k">Até R$ 150 mil / mês</option>
                <option value="150k-300k">De R$ 150 mil a R$ 300 mil / mês</option>
                <option value="300k-500k">De R$ 300 mil a R$ 500 mil / mês</option>
                <option value="500k-1m">De R$ 500 mil a R$ 1 milhão / mês</option>
                <option value="acima-1m">Acima de R$ 1 milhão / mês</option>
              </select>
              <i data-lucide="chevron-down"></i>
            </div>
            <div class="field__error">Selecione uma faixa de faturamento.</div>
          </div>

          <div class="field">
            <label class="field__label" for="f-desafio">Qual é o principal desafio da sua empresa hoje?</label>
            <div class="field__hint">Conte brevemente o que mais trava o crescimento do seu negócio.</div>
            <textarea class="field__control" id="f-desafio" name="desafio" placeholder="Conte brevemente o que mais trava o crescimento do seu negócio." required></textarea>
            <div class="field__error">Conte brevemente o seu principal desafio.</div>
          </div>

          <button class="btn btn--accent btn--lg" type="submit" id="submitBtn" style="width:100%;margin-top:8px">
            <span id="submitBtnText">Quero conversar com um especialista</span>
            <span class="btn-icon"><i data-lucide="arrow-right"></i></span>
          </button>

          <p class="form-disclaimer">Após o envio, a equipe da FEN Educação analisará suas respostas e entrará em contato pelo WhatsApp informado.</p>
        </form>

        <div class="form-success" id="formSuccess" hidden>
          <div class="form-success__icon"><i data-lucide="check-check"></i></div>
          <h3>Recebemos suas informações!</h3>
          <p>A equipe da FEN Educação vai analisar suas respostas e entrar em contato pelo WhatsApp informado.</p>
        </div>
      </div>

    </div>
  </div>
</section>

<footer>
  <div class="wrap-wide">
    <div class="body footer-brand"><img src="https://feneducacao.com/wp-content/uploads/2026/09/fen-logo.png" alt="FEN Educação">Uma realização FEN Educação.</div>
  </div>
</footer>

<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
lucide.createIcons();
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.reveal').forEach(function(el){
  gsap.to(el,{
    opacity:1,y:0,duration:0.8,ease:'power3.out',
    scrollTrigger:{trigger:el,start:'top 90%',once:true}
  });
});

document.querySelectorAll('.eyebrow').forEach(function(e){
  ScrollTrigger.create({trigger:e,start:'top 95%',once:true,onEnter:function(){e.classList.add('is-drawn');}});
});

// Máscara de WhatsApp: (00) 00000-0000
var waInput = document.getElementById('f-whatsapp');
waInput.addEventListener('input', function(){
  var d = waInput.value.replace(/\D/g,'').slice(0,11);
  var out = d;
  if(d.length > 2) out = '(' + d.slice(0,2) + ') ' + d.slice(2);
  if(d.length > 7) out = '(' + d.slice(0,2) + ') ' + d.slice(2,7) + '-' + d.slice(7);
  waInput.value = out;
});

// ── Integração RD Station Marketing — API de Conversões (API Key) ──────────
// 1. Gere a chave em: RD Station > Integrações > "API de Conversões" > Gerar chave.
// 2. Cole a chave abaixo, no lugar de "COLE_SUA_API_KEY_AQUI".
// 3. Antes de publicar, crie em RD Station > Configurações > Campos personalizados
//    os campos: cf_instagram, cf_faturamento_mensal, cf_principal_desafio
//    (identificador exatamente assim) — sem isso o RD recebe o dado mas não
//    consegue usá-lo em segmentações, fluxos de automação ou lead scoring.
var RD_STATION_API_KEY = 'COLE_SUA_API_KEY_AQUI';
var RD_STATION_CONVERSION_IDENTIFIER = 'formulario-conversa-especialista';

function getUtmParam(name){
  return new URLSearchParams(window.location.search).get(name) || '';
}

function sendToRDStation(payload){
  var body = {
    event_type: 'CONVERSION',
    event_family: 'CDP',
    payload: {
      conversion_identifier: RD_STATION_CONVERSION_IDENTIFIER,
      name: payload.nome,
      email: payload.email,
      mobile_phone: payload.whatsapp,
      traffic_source: getUtmParam('utm_source'),
      traffic_medium: getUtmParam('utm_medium'),
      traffic_campaign: getUtmParam('utm_campaign'),
      cf_instagram: payload.instagram,
      cf_faturamento_mensal: payload.faturamento,
      cf_principal_desafio: payload.desafio
    }
  };

  return fetch('https://api.rd.services/platform/conversions?api_key=' + RD_STATION_API_KEY, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  }).then(function(res){
    if(!res.ok){ throw new Error('RD Station respondeu ' + res.status); }
    return res.json().catch(function(){ return null; });
  });
}

// Validação + envio
var form = document.getElementById('specialistForm');
var submitBtn = document.getElementById('submitBtn');
var submitBtnText = document.getElementById('submitBtnText');

function validateField(el){
  var field = el.closest('.field');
  var valid = el.checkValidity();
  if(el.id === 'f-whatsapp' && valid){
    valid = el.value.replace(/\D/g,'').length === 11;
  }
  field.classList.toggle('field--error', !valid);
  return valid;
}

function showSuccess(){
  form.hidden = true;
  document.getElementById('formSuccess').hidden = false;
}

form.addEventListener('submit', function(e){
  e.preventDefault();

  var fields = form.querySelectorAll('.field__control[required]');
  var allValid = true;
  fields.forEach(function(el){
    if(!validateField(el)) allValid = false;
  });
  if(!allValid){
    form.querySelector('.field--error .field__control').focus();
    return;
  }

  var payload = {
    nome: form.nome.value.trim(),
    email: form.email.value.trim(),
    whatsapp: form.whatsapp.value.trim(),
    instagram: form.instagram.value.trim(),
    faturamento: form.faturamento.value,
    desafio: form.desafio.value.trim()
  };

  submitBtn.setAttribute('disabled','disabled');
  submitBtnText.textContent = 'Enviando...';

  sendToRDStation(payload)
    .then(function(){
      showSuccess();
    })
    .catch(function(err){
      // O lead já preencheu tudo certo — não penalizamos a experiência dele
      // por uma falha do lado do RD Station. Mas registramos o erro pra
      // investigação (ver Console do navegador / considerar um monitor de erro).
      console.error('Falha ao enviar lead para o RD Station:', err);
      showSuccess();
    });
});

form.querySelectorAll('.field__control[required]').forEach(function(el){
  el.addEventListener('blur', function(){ validateField(el); });
});
</script>
</body>
</html>/* End custom CSS */