Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diagnóstico PULSO — Descubra a saúde do seu negócio</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--black: #0a0a0a;
--dark: #111111;
--card: #161616;
--border: rgba(255,255,255,0.07);
--amber: #c8882a;
--amber-bright: #e8a030;
--amber-dim: rgba(200,136,42,0.15);
--off-white: #f2ede6;
--muted: #6b6460;
--green: #2a7a4a;
--green-bg: rgba(42,122,74,0.12);
--yellow: #8a7020;
--yellow-bg: rgba(138,112,32,0.12);
--red: #8a2a2a;
--red-bg: rgba(138,42,42,0.12);
}
html { scroll-behavior: smooth; }
body {
background: var(--black);
color: var(--off-white);
font-family: 'DM Sans', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
/* NOISE */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 1000;
}
/* HEADER */
.header {
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: rgba(10,10,10,0.95);
backdrop-filter: blur(12px);
z-index: 100;
}
.logo {
display: flex;
flex-direction: column;
gap: 1px;
}
.logo-by { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase; }
.logo-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.15em; color: var(--amber); line-height: 1; }
.progress-wrap {
display: flex;
align-items: center;
gap: 1rem;
}
.progress-text { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.1em; }
.progress-bar-outer { width: 120px; height: 3px; background: var(--border); border-radius: 2px; }
.progress-bar-inner { height: 100%; background: var(--amber); border-radius: 2px; transition: width 0.4s ease; width: 0%; }
/* HERO */
.hero {
padding: 5rem 2rem 4rem;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.hero-tag {
display: inline-block;
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--amber);
border: 1px solid rgba(200,136,42,0.3);
padding: 0.4rem 1rem;
margin-bottom: 2rem;
}
.hero-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3rem, 8vw, 5.5rem);
line-height: 0.92;
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
.hero-title span { color: var(--amber); }
.hero-sub {
font-family: 'Crimson Pro', serif;
font-style: italic;
font-size: 1.25rem;
color: rgba(242,237,230,0.65);
line-height: 1.6;
margin-bottom: 3rem;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.hero-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--muted);
}
.meta-dot { width: 5px; height: 5px; background: var(--amber); border-radius: 50%; }
.btn-start {
display: inline-block;
margin-top: 3rem;
background: var(--amber);
color: var(--black);
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1.1rem 3rem;
cursor: pointer;
border: none;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
transition: background 0.2s, transform 0.2s;
}
.btn-start:hover { background: var(--amber-bright); transform: translateY(-2px); }
/* QUIZ SECTION */
#quiz-section { display: none; }
#quiz-section.active { display: block; }
.quiz-container {
max-width: 720px;
margin: 0 auto;
padding: 3rem 2rem 6rem;
}
/* PILAR HEADER */
.pilar-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.pilar-letter {
font-family: 'Bebas Neue', sans-serif;
font-size: 3.5rem;
color: var(--amber);
line-height: 1;
opacity: 0.3;
}
.pilar-info { flex: 1; }
.pilar-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.1em; color: var(--off-white); }
.pilar-desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.pilar-count { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
/* QUESTION */
.question-block {
margin-bottom: 3rem;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.5s ease forwards;
}
.question-block:nth-child(2) { animation-delay: 0.1s; }
.question-block:nth-child(3) { animation-delay: 0.2s; }
.question-num {
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--amber);
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.question-text {
font-family: 'Crimson Pro', serif;
font-size: 1.25rem;
line-height: 1.5;
color: var(--off-white);
margin-bottom: 1.2rem;
}
.options { display: flex; flex-direction: column; gap: 0.6rem; }
.option {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.2rem;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.2s;
background: var(--card);
position: relative;
}
.option:hover { border-color: rgba(200,136,42,0.4); background: rgba(200,136,42,0.05); }
.option.selected {
border-color: var(--amber);
background: var(--amber-dim);
}
.option.selected .option-letter { background: var(--amber); color: var(--black); }
.option-letter {
width: 28px;
height: 28px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 500;
color: var(--muted);
flex-shrink: 0;
transition: all 0.2s;
}
.option-text { font-size: 0.92rem; line-height: 1.5; color: rgba(242,237,230,0.8); padding-top: 3px; }
/* NAV BUTTONS */
.nav-buttons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.btn-nav {
font-family: 'DM Sans', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.8rem 1.8rem;
cursor: pointer;
border: none;
transition: all 0.2s;
}
.btn-prev {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
}
.btn-prev:hover { border-color: rgba(255,255,255,0.2); color: var(--off-white); }
.btn-next {
background: var(--amber);
color: var(--black);
font-weight: 500;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn-next:hover { background: var(--amber-bright); }
.btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
/* RESULT SECTION */
#result-section { display: none; }
#result-section.active { display: block; }
.result-container {
max-width: 720px;
margin: 0 auto;
padding: 4rem 2rem 6rem;
}
.result-top {
text-align: center;
margin-bottom: 4rem;
}
.result-tag {
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 1rem;
}
.result-score-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.result-score {
font-family: 'Bebas Neue', sans-serif;
font-size: 7rem;
line-height: 1;
color: var(--off-white);
}
.result-score-max {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: var(--muted);
align-self: flex-end;
margin-bottom: 0.8rem;
}
.result-status {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.result-desc {
font-family: 'Crimson Pro', serif;
font-style: italic;
font-size: 1.1rem;
line-height: 1.7;
color: rgba(242,237,230,0.7);
max-width: 520px;
margin: 0 auto;
}
/* PILAR BREAKDOWN */
.breakdown {
margin-bottom: 3rem;
}
.breakdown-title {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.5rem;
}
.pilar-bars { display: flex; flex-direction: column; gap: 1rem; }
.pilar-bar-item { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 1rem; }
.pilar-bar-label { font-size: 0.8rem; color: var(--muted); }
.pilar-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pilar-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; width: 0%; }
.pilar-bar-score { font-size: 0.8rem; font-weight: 500; text-align: right; }
/* CTA BLOCK */
.cta-block {
border: 1px solid rgba(200,136,42,0.4);
padding: 3rem;
background: linear-gradient(135deg, rgba(200,136,42,0.06) 0%, transparent 60%);
text-align: center;
position: relative;
}
.cta-block::before {
content: 'PRÓXIMO PASSO';
position: absolute;
top: -1px;
left: 2rem;
background: var(--amber);
color: var(--black);
font-family: 'Bebas Neue', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.2em;
padding: 0.3rem 0.8rem;
}
.cta-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.1;
margin-bottom: 1rem;
}
.cta-title span { color: var(--amber); }
.cta-desc {
font-size: 0.95rem;
color: rgba(242,237,230,0.65);
line-height: 1.7;
margin-bottom: 2rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.btn-cta {
display: inline-block;
background: var(--amber);
color: var(--black);
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1.1rem 2.5rem;
text-decoration: none;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
transition: background 0.2s, transform 0.2s;
cursor: pointer;
border: none;
}
.btn-cta:hover { background: var(--amber-bright); transform: translateY(-2px); }
.cta-note {
font-size: 0.75rem;
color: var(--muted);
margin-top: 1rem;
}
/* FOOTER */
.footer {
text-align: center;
padding: 2rem;
font-size: 0.72rem;
color: var(--muted);
border-top: 1px solid var(--border);
letter-spacing: 0.1em;
}
/* ANIMATIONS */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* RESPONSIVE */
@media (max-width: 600px) {
.hero-title { font-size: 3rem; }
.result-score { font-size: 5rem; }
.cta-block { padding: 2rem; }
.pilar-bar-item { grid-template-columns: 80px 1fr 40px; }
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="logo">
<div class="logo-by">por</div>
<div class="logo-name">Método PULSO</div>
</div>
<div class="progress-wrap">
<span class="progress-text" id="progress-text">0 / 15</span>
<div class="progress-bar-outer">
<div class="progress-bar-inner" id="progress-bar"></div>
</div>
</div>
</header>
<!-- HERO -->
<section id="hero-section">
<div class="hero">
<div class="hero-tag">Diagnóstico Gratuito</div>
<h1 class="hero-title">Qual é a saúde<br>do seu <span>negócio</span>?</h1>
<p class="hero-sub">15 perguntas. 5 minutos. Um diagnóstico honesto baseado nos 5 pilares que separam negócios que crescem dos que estacionam.</p>
<div class="hero-meta">
<div class="meta-item"><div class="meta-dot"></div>15 perguntas</div>
<div class="meta-item"><div class="meta-dot"></div>5 minutos</div>
<div class="meta-item"><div class="meta-dot"></div>Resultado imediato</div>
<div class="meta-item"><div class="meta-dot"></div>100% gratuito</div>
</div>
<button class="btn-start" onclick="startQuiz()">Começar diagnóstico →</button>
</div>
</section>
<!-- QUIZ -->
<section id="quiz-section">
<div class="quiz-container" id="quiz-container"></div>
</section>
<!-- RESULT -->
<section id="result-section">
<div class="result-container" id="result-container"></div>
</section>
<footer class="footer">
@mentorrealista · Método PULSO · Luiz Fillipi da Silveira
</footer>
<script>
const WHATSAPP_NUMBER = "55SEUNUMERO"; // SUBSTITUIR pelo número real
const questions = [
// PILAR P
{ id: 1, pilar: "P", pilarName: "Processo", pergunta: "Como você consegue a maioria dos seus clientes hoje?", opcoes: [
{ texto: "Só por indicação espontânea — quando para, fico sem cliente.", pontos: 0 },
{ texto: "Indicação + alguma coisa nas redes, mas sem consistência.", pontos: 7 },
{ texto: "Tenho algumas ações de prospecção, mas sem processo definido.", pontos: 13 },
{ texto: "Tenho um processo definido de captação que funciona todo mês.", pontos: 20 },
]},
{ id: 2, pilar: "P", pilarName: "Processo", pergunta: "Como é o seu processo de vendas — do primeiro contato ao fechamento?", opcoes: [
{ texto: "Não tenho processo. Cada venda acontece do seu jeito.", pontos: 0 },
{ texto: "Tenho uma abordagem mais ou menos padrão, mas improvisada.", pontos: 7 },
{ texto: "Tenho um script básico, mas nem sempre sigo.", pontos: 13 },
{ texto: "Tenho um funil estruturado que sigo e melhoro constantemente.", pontos: 20 },
]},
{ id: 3, pilar: "P", pilarName: "Processo", pergunta: "Quando um cliente em potencial pede orçamento e some, o que você faz?", opcoes: [
{ texto: "Não faço nada. Se ele quiser, ele volta.", pontos: 0 },
{ texto: "Às vezes mando uma mensagem, mas sem padrão.", pontos: 7 },
{ texto: "Tenho um follow-up básico, mas sem sequência estruturada.", pontos: 13 },
{ texto: "Tenho uma sequência de follow-up definida que cubro sistematicamente.", pontos: 20 },
]},
// PILAR U
{ id: 4, pilar: "U", pilarName: "Urgência", pergunta: "Você sabe qual é o maior gargalo do seu negócio hoje?", opcoes: [
{ texto: "Não sei. Sinto que tem coisa errada, mas não consigo identificar.", pontos: 0 },
{ texto: "Tenho uma ideia, mas não sei por onde começar.", pontos: 7 },
{ texto: "Sei qual é o problema principal, mas não estou atacando ele.", pontos: 13 },
{ texto: "Sei qual é o gargalo e tenho um plano ativo para resolver.", pontos: 20 },
]},
{ id: 5, pilar: "U", pilarName: "Urgência", pergunta: "Como você toma decisões sobre onde focar sua energia no negócio?", opcoes: [
{ texto: "Apago o incêndio que aparecer. Sem planejamento.", pontos: 0 },
{ texto: "Tenho noção do que é urgente, mas mudo muito de foco.", pontos: 7 },
{ texto: "Tenho prioridades, mas o dia a dia atrapalha.", pontos: 13 },
{ texto: "Tenho método claro para identificar e atacar a restrição principal.", pontos: 20 },
]},
{ id: 6, pilar: "U", pilarName: "Urgência", pergunta: "Qual é a sua presença digital hoje para atrair novos clientes?", opcoes: [
{ texto: "Praticamente nenhuma. Não posto, não anuncio, não apareço.", pontos: 0 },
{ texto: "Posto às vezes, mas sem estratégia ou consistência.", pontos: 7 },
{ texto: "Tenho presença razoável, mas sem linha editorial definida.", pontos: 13 },
{ texto: "Tenho estratégia de conteúdo ativa e consistente que gera leads.", pontos: 20 },
]},
// PILAR L
{ id: 7, pilar: "L", pilarName: "Lucro", pergunta: "Você sabe quanto lucrou no mês passado — não faturou, lucrou?", opcoes: [
{ texto: "Não sei. Não tenho controle financeiro definido.", pontos: 0 },
{ texto: "Tenho uma ideia aproximada, mas sem número preciso.", pontos: 7 },
{ texto: "Sei o faturamento, mas não tenho clareza da margem real.", pontos: 13 },
{ texto: "Sei exatamente quanto lucrei, minha margem e meu custo por cliente.", pontos: 20 },
]},
{ id: 8, pilar: "L", pilarName: "Lucro", pergunta: "Como funciona a separação entre seu dinheiro pessoal e o caixa da empresa?", opcoes: [
{ texto: "Não separo. Uso o mesmo banco para tudo.", pontos: 0 },
{ texto: "Separo às vezes, mas misturo quando precisa.", pontos: 7 },
{ texto: "Tenho contas separadas, mas o controle ainda é fraco.", pontos: 13 },
{ texto: "PJ e PF completamente separados, com pró-labore definido.", pontos: 20 },
]},
{ id: 9, pilar: "L", pilarName: "Lucro", pergunta: "Você tem certeza de que seu preço cobre todos os custos e ainda gera lucro?", opcoes: [
{ texto: "Não tenho certeza. Precifiquei no feeling ou olhando o concorrente.", pontos: 0 },
{ texto: "Acho que cobre, mas nunca calculei direito.", pontos: 7 },
{ texto: "Já calculei, mas faz tempo e o custo pode ter mudado.", pontos: 13 },
{ texto: "Tenho precificação calculada com margem definida e revisão periódica.", pontos: 20 },
]},
// PILAR S
{ id: 10, pilar: "S", pilarName: "Sistema", pergunta: "O que acontece no seu negócio quando você some por 2 dias?", opcoes: [
{ texto: "Para. Só funciona se eu estiver presente.", pontos: 0 },
{ texto: "Fica lento e cheio de problemas que me ligam para resolver.", pontos: 7 },
{ texto: "Funciona, mas com qualidade inferior ao normal.", pontos: 13 },
{ texto: "Funciona normalmente. Tenho processos e pessoas que sustentam.", pontos: 20 },
]},
{ id: 11, pilar: "S", pilarName: "Sistema", pergunta: "Como está a qualidade e consistência da sua entrega para os clientes?", opcoes: [
{ texto: "Varia muito. Depende do meu humor e disponibilidade.", pontos: 0 },
{ texto: "É boa quando estou presente, mas inconsistente no geral.", pontos: 7 },
{ texto: "É razoavelmente consistente, mas ainda dependente de mim.", pontos: 13 },
{ texto: "É consistente e padronizada, independentemente de quem executa.", pontos: 20 },
]},
{ id: 12, pilar: "S", pilarName: "Sistema", pergunta: "Como você lida com time ou colaboradores do seu negócio?", opcoes: [
{ texto: "Faço tudo eu mesmo. Não tenho time ou não confio em delegar.", pontos: 0 },
{ texto: "Tenho alguém, mas preciso supervisionar tudo de perto.", pontos: 7 },
{ texto: "Delego algumas coisas, mas ainda resolvo muito pessoalmente.", pontos: 13 },
{ texto: "Tenho time treinado e processo claro. Delego com confiança.", pontos: 20 },
]},
// PILAR O
{ id: 13, pilar: "O", pilarName: "Ownership", pergunta: "Quanto tempo por semana você trabalha NO negócio — estratégia, crescimento — e não DENTRO dele?", opcoes: [
{ texto: "Zero. Estou sempre no operacional.", pontos: 0 },
{ texto: "Menos de 2 horas. É difícil sair do dia a dia.", pontos: 7 },
{ texto: "Entre 2 e 5 horas. Tento, mas sempre aparece urgência.", pontos: 13 },
{ texto: "Mais de 5 horas. Tenho tempo estruturado para pensar no negócio.", pontos: 20 },
]},
{ id: 14, pilar: "O", pilarName: "Ownership", pergunta: "Como você reage quando aparece um problema que você não sabe resolver?", opcoes: [
{ texto: "Entro em pânico ou procrastino. Fico travado.", pontos: 0 },
{ texto: "Tento resolver sozinho, mas demoro muito e me desgasto.", pontos: 7 },
{ texto: "Busco ajuda, mas não tenho método para isso.", pontos: 13 },
{ texto: "Tenho processo para diagnosticar, priorizar e resolver. Aplico o Teorema do Dateo Jeito.", pontos: 20 },
]},
{ id: 15, pilar: "O", pilarName: "Ownership", pergunta: "Como você se vê daqui a 12 meses se continuar fazendo o que está fazendo hoje?", opcoes: [
{ texto: "No mesmo lugar ou pior. Sei que precisa mudar mas não mudo.", pontos: 0 },
{ texto: "Com algum crescimento, mas nada significativo.", pontos: 7 },
{ texto: "Crescendo, mas de forma lenta e instável.", pontos: 13 },
{ texto: "Com crescimento sólido e previsível. Tenho clareza do caminho.", pontos: 20 },
]},
];
const PILARES = ["P", "U", "L", "S", "O"];
const PILAR_NAMES = { P: "Processo", U: "Urgência", L: "Lucro", S: "Sistema", O: "Ownership" };
let answers = {};
let currentPilar = 0;
function getPilarQuestions(pilar) {
return questions.filter(q => q.pilar === pilar);
}
function startQuiz() {
document.getElementById('hero-section').style.display = 'none';
document.getElementById('quiz-section').classList.add('active');
renderPilar(0);
window.scrollTo(0, 0);
}
function renderPilar(pilarIndex) {
currentPilar = pilarIndex;
const pilar = PILARES[pilarIndex];
const qs = getPilarQuestions(pilar);
const container = document.getElementById('quiz-container');
const totalAnswered = Object.keys(answers).length;
const totalQ = questions.length;
document.getElementById('progress-text').textContent = `${totalAnswered} / ${totalQ}`;
document.getElementById('progress-bar').style.width = `${(totalAnswered / totalQ) * 100}%`;
container.innerHTML = `
<div class="pilar-header">
<div class="pilar-letter">${pilar}</div>
<div class="pilar-info">
<div class="pilar-name">${PILAR_NAMES[pilar]}</div>
<div class="pilar-desc">Bloco ${pilarIndex + 1} de 5 — 3 perguntas</div>
</div>
<div class="pilar-count">Pergunta ${pilarIndex * 3 + 1}–${pilarIndex * 3 + 3} de 15</div>
</div>
${qs.map((q, i) => `
<div class="question-block">
<div class="question-num">Pergunta ${q.id}</div>
<div class="question-text">${q.pergunta}</div>
<div class="options">
${q.opcoes.map((op, j) => `
<div class="option ${answers[q.id] === op.pontos ? 'selected' : ''}"
onclick="selectAnswer(${q.id}, ${op.pontos}, this)">
<div class="option-letter">${String.fromCharCode(65+j)}</div>
<div class="option-text">${op.texto}</div>
</div>
`).join('')}
</div>
</div>
`).join('')}
<div class="nav-buttons">
${pilarIndex > 0
? `<button class="btn-nav btn-prev" onclick="renderPilar(${pilarIndex - 1})">← Anterior</button>`
: `<div></div>`
}
${pilarIndex < 4
? `<button class="btn-nav btn-next" id="btn-next" onclick="nextPilar()" ${allPilarAnswered(pilar) ? '' : 'disabled'}>Próximo →</button>`
: `<button class="btn-nav btn-next" id="btn-next" onclick="showResult()" ${allPilarAnswered(pilar) ? '' : 'disabled'}>Ver resultado →</button>`
}
</div>
`;
}
function allPilarAnswered(pilar) {
const qs = getPilarQuestions(pilar);
return qs.every(q => answers[q.id] !== undefined);
}
function selectAnswer(qId, pontos, el) {
answers[qId] = pontos;
// Update UI
const options = el.closest('.options').querySelectorAll('.option');
options.forEach(o => o.classList.remove('selected'));
el.classList.add('selected');
// Update progress
const totalAnswered = Object.keys(answers).length;
document.getElementById('progress-text').textContent = `${totalAnswered} / 15`;
document.getElementById('progress-bar').style.width = `${(totalAnswered / 15) * 100}%`;
// Enable next button if all answered
const pilar = PILARES[currentPilar];
const btn = document.getElementById('btn-next');
if (btn && allPilarAnswered(pilar)) {
btn.disabled = false;
}
}
function nextPilar() {
if (currentPilar < 4) {
renderPilar(currentPilar + 1);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
function calcScore() {
let total = 0;
questions.forEach(q => { total += (answers[q.id] || 0); });
return Math.round((total / 300) * 100);
}
function calcPilarScores() {
const scores = {};
PILARES.forEach(p => {
const qs = getPilarQuestions(p);
const raw = qs.reduce((sum, q) => sum + (answers[q.id] || 0), 0);
scores[p] = Math.round((raw / 60) * 100);
});
return scores;
}
function showResult() {
document.getElementById('quiz-section').classList.remove('active');
document.getElementById('result-section').classList.add('active');
const score = calcScore();
const pilarScores = calcPilarScores();
const maxPilar = 60;
// Determine status
let status, statusColor, desc, ctaTitle, ctaDesc;
if (score >= 85) {
status = "✓ NEGÓCIO SÓLIDO";
statusColor = "var(--green)";
desc = "Você tem uma base saudável. Os cinco pilares estão razoavelmente estruturados. O Método PULSO pode te levar de bom para excelente — mas com mais aceleração do que correção.";
ctaTitle = "Quer crescer mais <span>rápido?</span>";
ctaDesc = "Mesmo com uma base sólida, uma sessão estratégica gratuita pode identificar onde você está deixando dinheiro na mesa.";
} else if (score >= 80) {
status = "⚠ ATENÇÃO NECESSÁRIA";
statusColor = "#c8a020";
desc = "Você tem gaps importantes em pelo menos dois pilares. Seu negócio funciona, mas está deixando dinheiro na mesa e crescendo abaixo do potencial. Você está no momento certo — ainda tem base para crescer, mas precisa de estrutura agora.";
ctaTitle = "Hora de <span>estruturar.</span>";
ctaDesc = "Uma sessão estratégica gratuita de 30 minutos vai te mostrar exatamente por onde começar.";
} else {
status = "🔴 AÇÃO URGENTE";
statusColor = "#c04040";
desc = "Seu negócio tem fragilidades sérias em múltiplos pilares. Continuar do jeito que está vai ser cada vez mais difícil — e mais caro. Cada mês sem estrutura é um mês de dinheiro desperdiçado e crescimento perdido.";
ctaTitle = "Você precisa de ajuda <span>agora.</span>";
ctaDesc = "Não amanhã. Agende agora sua sessão estratégica gratuita de 30 minutos e vamos traçar um plano.";
}
// Find weakest pilar
const weakest = PILARES.reduce((a, b) => pilarScores[a] < pilarScores[b] ? a : b);
const waMsg = encodeURIComponent(`Olá Fillipi! Fiz o Diagnóstico PULSO e tirei ${score}/100 pontos. Quero agendar minha Sessão Estratégica Gratuita.`);
const waLink = `https://wa.me/${WHATSAPP_NUMBER}?text=${waMsg}`;
const container = document.getElementById('result-container');
container.innerHTML = `
<div class="result-top">
<div class="result-tag">Seu resultado</div>
<div class="result-score-wrap">
<div class="result-score" id="animated-score">0</div>
<div class="result-score-max">/100</div>
</div>
<div class="result-status" style="color: ${statusColor}">${status}</div>
<p class="result-desc">${desc}</p>
</div>
<div class="breakdown">
<div class="breakdown-title">Diagnóstico por pilar</div>
<div class="pilar-bars">
${PILARES.map(p => {
const pct = pilarScores[p];
const barColor = pct >= 70 ? 'var(--green)' : pct >= 55 ? '#c8a020' : '#c04040';
const isWeakest = p === weakest;
return `
<div class="pilar-bar-item">
<div class="pilar-bar-label" style="${isWeakest ? 'color: var(--amber); font-weight: 500;' : ''}">${p} — ${PILAR_NAMES[p]}${isWeakest ? ' ←' : ''}</div>
<div class="pilar-bar-track">
<div class="pilar-bar-fill" id="bar-${p}" style="background: ${barColor};"></div>
</div>
<div class="pilar-bar-score" style="color: ${barColor}">${pilarScores[p]}%</div>
</div>
`;
}).join('')}
</div>
<p style="font-size: 0.78rem; color: var(--muted); margin-top: 1rem;">← Seu maior gargalo é o pilar <strong style="color: var(--amber)">${PILAR_NAMES[weakest]}</strong>. É por ele que a mentoria começa.</p>
</div>
<div class="cta-block">
<h2 class="cta-title">${ctaTitle}</h2>
<p class="cta-desc">${ctaDesc}</p>
<a href="${waLink}" target="_blank" class="btn-cta">Agendar Sessão Estratégica Gratuita →</a>
<p class="cta-note">30 minutos · Gratuito · Sem compromisso · Via WhatsApp</p>
</div>
`;
// Animate score
let current = 0;
const target = score;
const duration = 1200;
const increment = target / (duration / 16);
const el = document.getElementById('animated-score');
const timer = setInterval(() => {
current = Math.min(current + increment, target);
el.textContent = Math.round(current);
if (current >= target) clearInterval(timer);
}, 16);
// Animate bars after delay
setTimeout(() => {
PILARES.forEach(p => {
const bar = document.getElementById(`bar-${p}`);
if (bar) bar.style.width = pilarScores[p] + '%';
});
}, 400);
document.getElementById('progress-text').textContent = '15 / 15';
document.getElementById('progress-bar').style.width = '100%';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>