<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
<meta name="theme-color" content="#f6f5f1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>EixoZero — Criação de Sites e Marketing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#f6f5f1;--fg:#111118;--muted:#5c5c6e;--card:#fffcf8;--line:#e6e2d8;
--hl:#c8f04a;--hl-fg:#111118;--soft:#ece8de;
--shadow:0 18px 50px rgba(17,17,24,.08);--radius:1.35rem;
--header-h:62px;
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--pad-x:1.25rem;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--bg:#0c0c11;--fg:#f3f2ee;--muted:#a9a9bb;--card:#16161e;--line:#2b2b36;--soft:#1d1d26;--shadow:0 22px 50px rgba(0,0,0,.35)}
}
:root[data-theme="dark"]{--bg:#0c0c11;--fg:#f3f2ee;--muted:#a9a9bb;--card:#16161e;--line:#2b2b36;--soft:#1d1d26;--shadow:0 22px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{
font-size:16px;scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + var(--safe-top) + .5rem);
-webkit-text-size-adjust:100%;text-size-adjust:100%;
overflow-x:hidden;width:100%;
}
body{
background:var(--bg);color:var(--fg);
font-family:'Poppins',system-ui,-apple-system,sans-serif;
font-weight:400;line-height:1.65;
overflow-x:hidden;width:100%;max-width:100vw;position:relative;
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";pointer-events:none;position:fixed;inset:0;z-index:40;opacity:.035;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1,h2,h3,.logo{
font-family:'Outfit',system-ui,-apple-system,sans-serif;
font-weight:800;letter-spacing:-.03em;line-height:1.08;
overflow-wrap:break-word;word-wrap:break-word;
}
b{font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:70rem;margin:0 auto;padding:0 var(--pad-x);width:100%}
.hl{background:var(--hl);color:var(--hl-fg);padding:.02em .16em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--hl);z-index:50;transition:width .1s linear}
header{
position:sticky;top:0;z-index:30;padding-top:var(--safe-top);
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}
nav{display:flex;justify-content:space-between;align-items:center;min-height:var(--header-h);gap:10px}
.logo{font-size:1.3rem;flex:none}
.logo span{background:var(--hl);color:var(--hl-fg);padding:0 .12em;border-radius:.18em;margin-left:2px}
.right{display:flex;gap:8px;align-items:center;flex:none}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
background:var(--fg);color:var(--bg);
padding:.85em 1.35em;border-radius:999px;
font:inherit;font-weight:500;font-size:.92rem;
border:0;cursor:pointer;min-height:44px;
transition:transform .2s,background .2s,box-shadow .2s;
line-height:1.2;-webkit-appearance:none;appearance:none;
text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.lime{background:var(--hl);color:var(--hl-fg)}
.btn.out{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.btn.sm{padding:.5em 1em;font-size:.82rem;min-height:40px}
.btn.icon{width:40px;padding:0;border-radius:12px}
.btn[disabled]{opacity:.65;cursor:wait;transform:none}
.slide{
display:flex;align-items:center;justify-content:center;
width:100%;min-height:calc(100svh - var(--header-h) - var(--safe-top));
padding:3.5rem 0;
}
@supports (min-height: 100dvh){
.slide{min-height:calc(100dvh - var(--header-h) - var(--safe-top))}
}
.slide.alt{background:var(--hl);color:#111118}
.alt .hl{background:#111118;color:var(--hl)}
.alt .lead{color:#2c3a05}
.alt .lead b{color:#111118}
.alt .label{color:#3a4a0a}
.label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
h1{font-size:clamp(1.95rem,7.5vw,5.1rem)}
h2{font-size:clamp(1.65rem,6vw,3.9rem);margin-bottom:1.2rem;max-width:16em}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;width:100%}
.eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.78rem;font-weight:500;color:var(--muted);
background:var(--card);border:1px solid var(--line);
border-radius:999px;padding:.35rem .8rem;margin-bottom:1.2rem;max-width:100%;
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 4px #22a06b22;flex:none}
.hero p{margin:1.35rem 0 1.7rem;color:var(--muted);font-size:1.05rem;max-width:32rem}
.cta{display:flex;gap:.7rem;flex-wrap:wrap}
.cta .btn{flex:1 1 auto;min-width:0}
.checks{display:flex;gap:.6rem 1.1rem;flex-wrap:wrap;margin-top:1.6rem;font-size:.82rem;color:var(--muted)}
.checks span{display:inline-flex;align-items:center;gap:.45rem}
.checks span::before{
content:"";width:.7rem;height:.7rem;border-radius:50%;
background:var(--hl);box-shadow:inset 0 0 0 3px var(--hl-fg);flex:none;
}
.serp{background:var(--card);border:1px solid var(--line);border-radius:1.6rem;padding:1.15rem;box-shadow:var(--shadow);width:100%}
.bar{
background:var(--soft);border:1px solid var(--line);border-radius:999px;
padding:.65rem 1rem;font-size:.84rem;color:var(--muted);margin-bottom:1rem;
display:flex;gap:.6rem;align-items:center;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.res{padding:.85rem 1rem;border-radius:14px;margin-bottom:.45rem;font-size:.78rem;color:var(--muted);overflow:hidden}
.res i{display:block;height:8px;border-radius:5px;background:var(--line);margin-top:.5rem;width:85%}
.res b{display:block;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res.top{background:var(--hl);color:#2c3a05}
.res.top b{color:var(--hl-fg)}
.res.top i{background:#11111833}
.res .n{float:right;font-weight:600;font-size:.72rem}
.lead{font-size:clamp(1.15rem,2.6vw,2.05rem);color:var(--muted);max-width:50rem;line-height:1.5}
.lead b{color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem;width:100%}
.card{
background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:1.5rem 1.45rem;
transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card small{
font-family:'Outfit',sans-serif;font-weight:700;font-size:.78rem;
background:var(--hl);color:var(--hl-fg);padding:.2rem .65rem;border-radius:999px;
}
.card h3{font-size:1.3rem;margin:2rem 0 .45rem}
.card p{color:var(--muted);font-size:.94rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.2rem;width:100%}
.step{border-top:3px solid var(--fg);padding-top:1rem}
.step h3{font-size:1.15rem;margin-bottom:.35rem}
.step p{font-size:.92rem;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:start;width:100%}
.contact p{color:var(--muted);font-size:1rem;margin-bottom:1.2rem}
.note{
display:flex;gap:.7rem;align-items:flex-start;
background:var(--soft);border:1px solid var(--line);
border-radius:16px;padding:1rem 1.05rem;font-size:.86rem;color:var(--muted);
}
form{
display:grid;gap:.7rem;
background:var(--card);border:1px solid var(--line);
border-radius:1.6rem;padding:1.35rem;box-shadow:var(--shadow);
width:100%;
}
.field{display:grid;gap:.32rem;width:100%}
.field span{font-size:.78rem;font-weight:500;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;width:100%}
input,textarea,select{
width:100%;padding:.9rem 1rem;border-radius:14px;
border:1.5px solid var(--line);
background:var(--bg);color:var(--fg);
font:inherit;font-size:16px;
appearance:none;-webkit-appearance:none;-webkit-border-radius:14px;
max-width:100%;
}
select{
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
background-size:6px 6px,6px 6px;background-repeat:no-repeat;
padding-right:2.4rem;
}
input:focus,textarea:focus,select:focus{
outline:0;border-color:var(--fg);
box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 45%,transparent);
}
textarea{min-height:7.2rem;resize:vertical;font-family:inherit}
form .btn{width:100%;padding:1rem;font-size:1rem;white-space:normal}
#msg{font-size:.88rem;min-height:1.3em;font-weight:500;text-align:center}
.ok{color:#1f7a4d}
.err{color:#c0392b}
.hp{position:absolute!important;left:-9999px!important;height:0!important;width:0!important;opacity:0!important;overflow:hidden!important}
.foot{
margin-top:2.4rem;font-size:.78rem;color:var(--muted);
display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
padding-bottom:calc(.5rem + var(--safe-bottom));
}
#dots{
position:fixed;right:1rem;top:50%;transform:translateY(-50%);
display:flex;flex-direction:column;gap:.75rem;z-index:20;
}
#dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--fg);background:transparent;padding:0;cursor:pointer}
#dots button.on{background:var(--fg)}
#count{
position:fixed;left:1rem;bottom:calc(.9rem + var(--safe-bottom));
font-family:'Outfit',sans-serif;font-weight:700;font-size:.82rem;z-index:20;
background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem;
}
.hide-m{display:none}
@media (min-width:1100px){.hide-m{display:inline-flex}}
@media (max-width:860px){
:root{--pad-x:1.1rem;--header-h:58px}
#dots,#count{display:none}
.hero,.contact,.grid,.steps,.row2{grid-template-columns:1fr;gap:1rem}
.steps{gap:1rem}
.contact{gap:1.6rem}
.slide{
padding:2.2rem 0 2.4rem;
min-height:calc(100svh - var(--header-h) - var(--safe-top));
align-items:flex-start;
}
@supports (min-height: 100dvh){
.slide{min-height:calc(100dvh - var(--header-h) - var(--safe-top))}
}
.slide:first-of-type{align-items:center}
h1{font-size:clamp(1.85rem,8vw,2.6rem);text-align:left}
h2{font-size:clamp(1.55rem,6.5vw,2.1rem);max-width:100%}
.lead{font-size:1.1rem}
.hero{gap:2rem}
.hero p{font-size:1rem;margin:1rem 0 1.4rem}
.cta .btn{flex:1 1 100%}
.serp{padding:1rem;border-radius:1.2rem}
.bar{font-size:.78rem;padding:.55rem .85rem}
.res{padding:.7rem .85rem}
.res b{font-size:.95rem}
.card{padding:1.25rem 1.15rem}
.card h3{margin-top:1.6rem}
.card:hover{transform:none;box-shadow:none}
form{padding:1.1rem;border-radius:1.3rem}
.foot{flex-direction:column;gap:.3rem;text-align:center}
}
@media (max-width:380px){
:root{--pad-x:.9rem}
h1{font-size:1.7rem}
h2{font-size:1.45rem}
.btn{font-size:.88rem;padding:.75em 1.1em}
}
@media (hover:none){.btn:hover{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.card{transition:none}}
</style>
</head>
<body>
<div id="prog"></div>
<header><div class="wrap"><nav>
<a href="#s0" class="logo">Eixo<span>Zero</span></a>
<div class="right">
<button class="btn out sm icon" id="theme" type="button" aria-label="Alternar tema">◐</button>
<button class="btn out sm hide-m" id="full" type="button">Tela cheia</button>
<a href="#s4" class="btn sm lime">Orçamento</a>
</div>
</nav></div></header>
<div id="dots"></div><div id="count">01 / 05</div>
<main>
<section class="slide" id="s0"><div class="wrap hero">
<div>
<span class="eyebrow"><i></i> Sites e marketing que geram pedido</span>
<h1>Seu cliente está procurando agora. <span class="hl">Quem aparece primeiro</span> fecha.</h1>
<p>Criamos sites rápidos e bonitos e fazemos o marketing que coloca a sua empresa na frente de quem já quer comprar.</p>
<div class="cta"><a href="#s4" class="btn lime">Quero aparecer primeiro</a><a href="#s2" class="btn out">Ver serviços</a></div>
<div class="checks"><span>Site rápido</span><span>Aparece no Google</span><span>Design sob medida</span></div>
</div>
<div class="serp" aria-hidden="true">
<div class="bar">🔍 agência de sites perto de mim</div>
<div class="res top"><span class="n">1º</span><b>Sua empresa</b>www.suaempresa.com.br<i></i></div>
<div class="res"><span class="n">2º</span><b>Concorrente A</b>www.concorrente-a.com.br<i></i></div>
<div class="res"><span class="n">3º</span><b>Concorrente B</b>www.concorrente-b.com.br<i></i></div>
</div>
</div></section>
<section class="slide alt" id="s1"><div class="wrap">
<div class="label">O problema</div>
<h2>Seu site precisa <span class="hl">trabalhar por você</span>.</h2>
<p class="lead">Se o site demora para carregar, não aparece no Google ou parece um modelo pronto, o visitante não reclama. Ele simplesmente <b>fecha a aba e vai para o próximo</b>.</p>
</div></section>
<section class="slide" id="s2"><div class="wrap">
<div class="label">Serviços</div>
<h2>O que fazemos pela sua empresa.</h2>
<div class="grid">
<div class="card"><small>01</small><h3>Criação de sites</h3><p>Institucionais, landing pages e lojas virtuais rápidos, responsivos e prontos para vender.</p></div>
<div class="card"><small>02</small><h3>Marketing e SEO</h3><p>Estratégia e conteúdo para sua empresa ser encontrada por quem procura o que você faz.</p></div>
<div class="card"><small>03</small><h3>Tráfego pago</h3><p>Anúncios no Google e Instagram com meta clara e relatório que você entende.</p></div>
<div class="card"><small>04</small><h3>Identidade visual</h3><p>Logo, cores e linguagem para a sua marca ser lembrada e reconhecida.</p></div>
</div>
</div></section>
<section class="slide" id="s3"><div class="wrap">
<div class="label">Como funciona</div>
<h2>Do zero ao <span class="hl">site no ar</span>.</h2>
<div class="steps">
<div class="step"><h3>1. Conversa</h3><p>Entendemos seu negócio, seu público e o que você quer alcançar.</p></div>
<div class="step"><h3>2. Proposta</h3><p>Escopo, prazo e valor combinados por escrito, sem surpresa.</p></div>
<div class="step"><h3>3. Criação</h3><p>Você acompanha e aprova cada etapa do projeto.</p></div>
<div class="step"><h3>4. Lançamento</h3><p>Site publicado e resultados acompanhados de perto.</p></div>
</div>
</div></section>
<section class="slide" id="s4"><div class="wrap">
<div class="contact">
<div>
<div class="label">Contato</div>
<h2>Vamos colocar sua empresa <span class="hl">na frente</span>?</h2>
<p>Conte o que você precisa. Respondemos em até um dia útil.</p>
<div class="note">Nome, e-mail e mensagem são obrigatórios. Seus dados não são compartilhados.</div>
</div>
<form id="form" novalidate autocomplete="on"
action="https://formsubmit.co/eixozeroagency@gmail.com"
method="POST"
target="ez_target">
<input type="hidden" name="_subject" value="Novo contato pelo site — EixoZero">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_captcha" value="false">
<input type="text" name="_honey" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="field">
<span>Nome</span>
<input id="nome" name="Nome" type="text" placeholder="Como podemos te chamar"
autocomplete="name" autocapitalize="words" enterkeyhint="next" required>
</div>
<div class="row2">
<div class="field">
<span>E-mail</span>
<input id="email" name="E-mail" type="email" inputmode="email"
placeholder="voce@email.com" autocomplete="email"
autocapitalize="off" autocorrect="off" spellcheck="false"
enterkeyhint="next" required>
</div>
<div class="field">
<span>WhatsApp</span>
<input id="tel" name="WhatsApp" type="tel" inputmode="tel"
placeholder="(opcional)" autocomplete="tel" enterkeyhint="next">
</div>
</div>
<div class="field">
<span>Serviço</span>
<select id="serv" name="Serviço">
<option>Criação de site</option>
<option>Marketing digital</option>
<option>Tráfego pago</option>
<option>Identidade visual</option>
<option>Outro</option>
</select>
</div>
<div class="field">
<span>Mensagem</span>
<textarea id="texto" name="Mensagem" placeholder="Conte um pouco sobre o que você precisa"
enterkeyhint="send" required></textarea>
</div>
<button type="submit" class="btn lime" id="send">Enviar mensagem</button>
<div id="msg" role="status" aria-live="polite"></div>
</form>
<iframe name="ez_target" id="ez_target" title="Envio do formulário"
style="position:absolute;left:-9999px;width:1px;height:1px;border:0"
aria-hidden="true"></iframe>
</div>
<div class="foot"><span>© 2026 EixoZero</span><span>Criação de sites e marketing digital</span></div>
</div></section>
</main>
<script>
/* =========================================================
1. NAVEGAÇÃO ENTRE SLIDES
========================================================= */
function vh(){
return (window.visualViewport ? window.visualViewport.height : window.innerHeight) || 0;
}
const slides = [...document.querySelectorAll('.slide')];
const dots = document.getElementById('dots');
const count = document.getElementById('count');
const prog = document.getElementById('prog');
let cur = 0;
const names = ['Início','Problema','Serviços','Como funciona','Contato'];
slides.forEach((s,i)=>{
const b = document.createElement('button');
b.type = 'button';
b.setAttribute('aria-label', names[i]);
b.title = names[i];
b.onclick = () => go(i);
dots.appendChild(b);
});
function go(i){
i = Math.max(0, Math.min(slides.length - 1, i));
slides[i].scrollIntoView({behavior:'smooth', block:'start'});
}
function update(){
const y = (window.scrollY || window.pageYOffset || 0) + vh() * 0.42;
cur = 0;
slides.forEach((s, i) => { if (s.offsetTop <= y) cur = i; });
[...dots.children].forEach((d, i) => d.classList.toggle('on', i === cur));
count.textContent = String(cur + 1).padStart(2,'0') + ' / ' + String(slides.length).padStart(2,'0');
const max = document.documentElement.scrollHeight - vh();
prog.style.width = (max > 0 ? Math.min(100, (window.scrollY / max) * 100) : 0) + '%';
}
let ticking = false;
function onScroll(){
if (ticking) return;
ticking = true;
requestAnimationFrame(() => { update(); ticking = false; });
}
addEventListener('scroll', onScroll, {passive:true});
addEventListener('resize', onScroll);
addEventListener('orientationchange', () => setTimeout(update, 150));
if (window.visualViewport) window.visualViewport.addEventListener('resize', onScroll);
update();
/* Atalhos de teclado */
addEventListener('keydown', e => {
if (/INPUT|TEXTAREA|SELECT/.test(e.target.tagName) || e.metaKey || e.ctrlKey || e.altKey) return;
const k = e.key;
if (['ArrowDown','ArrowRight','PageDown',' '].includes(k)){ e.preventDefault(); go(cur + 1); }
else if (['ArrowUp','ArrowLeft','PageUp'].includes(k)){ e.preventDefault(); go(cur - 1); }
else if (k === 'Home'){ e.preventDefault(); go(0); }
else if (k === 'End'){ e.preventDefault(); go(slides.length - 1); }
});
/* =========================================================
2. TELA CHEIA
========================================================= */
const fullBtn = document.getElementById('full');
if (fullBtn){
fullBtn.onclick = () => {
try{
if (document.fullscreenElement) document.exitFullscreen();
else if (document.documentElement.requestFullscreen) document.documentElement.requestFullscreen().catch(()=>{});
}catch(_){}
};
}
/* =========================================================
3. TEMA CLARO/ESCURO
========================================================= */
const root = document.documentElement;
const savedTheme = localStorage.getItem('ez-theme');
if (savedTheme) root.setAttribute('data-theme', savedTheme);
document.getElementById('theme').onclick = () => {
const next = root.getAttribute('data-theme') === 'dark'
? 'light'
: (root.getAttribute('data-theme') === 'light'
? 'dark'
: (matchMedia('(prefers-color-scheme:dark)').matches ? 'light' : 'dark'));
root.setAttribute('data-theme', next);
localStorage.setItem('ez-theme', next);
};
/* =========================================================
4. FORMULÁRIO — POST real via iframe (não sai da página)
========================================================= */
const form = document.getElementById('form');
const msg = document.getElementById('msg');
const sendBtn = document.getElementById('send');
const nome = document.getElementById('nome');
const email = document.getElementById('email');
const tel = document.getElementById('tel');
const serv = document.getElementById('serv');
const texto = document.getElementById('texto');
function setMsg(t, type){
msg.className = type === 'ok' ? 'ok' : type === 'err' ? 'err' : '';
msg.style.color = type === 'load' ? 'var(--muted)' : '';
msg.textContent = t;
}
function obterDados(){
return {
nome: nome.value.trim(),
email: email.value.trim(),
telefone: tel.value.trim(),
servico: serv.value,
mensagem: texto.value.trim()
};
}
/* Backup local (iOS limpa campos ao voltar de outro app) */
function salvarBackup(d){ try{ localStorage.setItem('ez_form_backup', JSON.stringify(d)); }catch(_){} }
function carregarBackup(){
try{
const b = localStorage.getItem('ez_form_backup');
if (!b) return;
const d = JSON.parse(b);
if (!nome.value && d.nome) nome.value = d.nome;
if (!email.value && d.email) email.value = d.email;
if (!tel.value && d.telefone) tel.value = d.telefone;
if (!texto.value && d.mensagem) texto.value = d.mensagem;
}catch(_){}
}
function limparBackup(){ try{ localStorage.removeItem('ez_form_backup'); }catch(_){} }
let timerSalvar;
form.addEventListener('input', () => {
clearTimeout(timerSalvar);
timerSalvar = setTimeout(() => salvarBackup(obterDados()), 800);
});
setTimeout(carregarBackup, 300);
/* Envio */
let enviando = false;
form.addEventListener('submit', e => {
const d = obterDados();
/* Validação */
if (!d.nome || !/^\S+@\S+\.\S+$/.test(d.email) || !d.mensagem){
e.preventDefault();
setMsg('Preencha nome, e-mail válido e a mensagem.', 'err');
if (!d.nome) nome.focus();
else if (!/^\S+@\S+\.\S+$/.test(d.email)) email.focus();
else texto.focus();
return;
}
/* Deixa o POST seguir naturalmente para o iframe */
salvarBackup(d);
enviando = true;
sendBtn.disabled = true;
sendBtn.textContent = 'Enviando…';
setMsg('Enviando sua mensagem…', 'load');
/* O iframe não avisa quando termina; simulamos o retorno */
setTimeout(() => {
if (!enviando) return;
enviando = false;
setMsg('Mensagem enviada! Responderemos em até um dia útil.', 'ok');
form.reset();
limparBackup();
sendBtn.disabled = false;
sendBtn.textContent = 'Enviar mensagem';
}, 2200);
});
/* =========================================================
5. iOS — mantém o campo visível quando o teclado abre
========================================================= */
if (window.visualViewport){
const vv = window.visualViewport;
const handler = () => {
const el = document.activeElement;
if (el && /INPUT|TEXTAREA|SELECT/.test(el.tagName)){
const r = el.getBoundingClientRect();
if (r.bottom > vv.height - 24){
el.scrollIntoView({block:'center', behavior:'smooth'});
}
}
};
vv.addEventListener('resize', handler);
vv.addEventListener('scroll', handler);
}
</script>
</body>
</html>