*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --text:#1d1d1f;
  --muted:#6e6e73;
  --accent:#6366f1;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --whatsapp: #25d366;
  --white: #ffffff;
}
html,body{overflow-x:hidden;width:100%;scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;background:#f5f5f7; display:flex; flex-direction:column; min-height:100vh;}

/* Background */
.bg-scene { position: fixed; inset: 0; z-index: -1; background: #f5f5f7; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; }
.blob-1 { width: 600px; height: 600px; background: #dbeafe; top: -100px; left: -100px; }
.blob-2 { width: 500px; height: 500px; background: #ede9fe; bottom: -100px; right: -100px; }

/* Nav */
nav {
  position: fixed; top: 0; left: 0; width: 100%; height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.04); z-index: 1000;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; transition: filter 0.4s ease, transform 0.3s var(--ease); }
.logo:hover img { transform: scale(1.04); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: #374151; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: #111; }
.nav-cta {
  background: #111827; color: #fff; border: 1px solid #111827; padding: 0.6rem 1.3rem; border-radius: 40px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.3s ease; text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { background: #374151; border-color: #374151; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 8px; z-index: 210; }
.menu-toggle i { width: 28px; height: 28px; }

/* Main Container */
.quiz-wrapper {
  max-width: 800px; margin: 160px auto 100px; padding: 0 20px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.05);
  color:var(--muted);padding:.5rem 1.2rem;border-radius:40px;
  font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:2rem;
}
.quiz-intro{text-align:center;margin-bottom:3rem; animation:fadeInBlur 1.2s var(--ease) both;}
.quiz-intro h1{
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300;
  line-height:1.05;letter-spacing:-.04em;color:var(--text);
  margin-bottom:1.2rem;
}
.quiz-intro h1 em{
  font-style:normal;font-weight:400;
  background:linear-gradient(135deg,#1d1d1f,#6366f1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.quiz-intro p{color:var(--muted);font-size:1.05rem;max-width:580px;margin:0 auto;font-weight:300;line-height:1.6;}
@keyframes fadeInBlur{
  from{opacity:0;filter:blur(15px);transform:translateY(40px);}
  to{opacity:1;filter:blur(0);transform:translateY(0);}
}

.quiz-card {
  background: var(--white); border-radius: 32px; padding: 3rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.03);
  position: relative; overflow: hidden;
}

/* Progress */
.progress-container { margin-bottom: 2.5rem; }
.progress-bar { width: 100%; height: 4px; background: #eee; border-radius: 2px; overflow: hidden; margin-bottom: 0.5rem; }
.progress-fill { width: 0%; height: 100%; background: var(--accent); transition: width 0.4s var(--ease); }
.progress-text { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Questions */
.question-step { display: none; }
.question-step.active { display: block; animation: slideIn 0.8s var(--ease); }
@keyframes slideIn { 
  from { opacity:0; transform: translateX(30px) scale(0.98); filter: blur(10px); } 
  to { opacity:1; transform: translateX(0) scale(1); filter: blur(0); } 
}

.question-step h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 2rem; line-height: 1.3; }

.options-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.option-item {
  position: relative; display: flex; align-items: center;
  padding: 1.4rem 1.8rem; border: 1.5px solid #eee; border-radius: 20px;
  cursor: pointer; transition: all 0.4s var(--ease);
  background: rgba(255, 255, 255, 0.95);
}
.option-item:hover { 
  border-color: var(--accent); 
  background: rgba(99, 102, 241, 0.03);
  transform: translateX(8px);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.05);
}
.option-item.selected { 
  border-color: var(--accent); 
  background: var(--accent);
  color: #fff;
}
.option-item.selected .option-text { color: #fff; font-weight: 500; }

.option-item input { position: absolute; opacity: 0; cursor: pointer; }
.option-text { font-size: 1rem; color: var(--text); transition: color 0.3s; }

/* Navigation Buttons */
.quiz-nav { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; }
.btn-quiz {
  padding: 1rem 2.5rem; border-radius: 30px; font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: all 0.4s var(--ease); border: none;
}
.btn-prev { background: #f0f0f5; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.btn-prev:hover { background: #eaeaef; color: var(--text); transform: translateX(-4px); }
.btn-next { display: none !important; } /* Removed as requested */
.btn-submit { background: var(--text); color: #fff; width: 100%; font-size: 1.1rem; padding: 1.2rem; }
.btn-submit:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* Result Form (Final Step) */
.final-form { display: none; }
.final-form.active { display: block; }
.final-form h2 { margin-bottom: 1rem; }
.input-group { margin-bottom: 1.5rem; }
.input-group label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.input-group input {
  width: 100%; padding: 1rem; border-radius: 12px; border: 1px solid #eee;
  font-family: inherit; font-size: 1rem;
}

/* FOOTER */
.minimal-footer{
  padding:3.5rem 8vw;
  background:#000;color:#fff;
  position:relative;z-index:10;
}
.f-container{max-width:1200px;margin:0 auto;}
.f-logo{margin-bottom:2rem;}
.f-logo img{height:32px;opacity:0.9;}
.f-links{display:flex;gap:2.5rem;list-style:none;padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,0.1);}
.f-links a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:0.85rem;transition:0.3s;font-weight:400;}
.f-links a:hover{color:#fff;}
.f-bottom{padding-top:1.8rem;display:flex;justify-content:space-between;align-items:center;}
.f-copyright{font-size:0.8rem;color:rgba(255,255,255,0.6);font-weight:400;}

/* WHATSAPP */
.whatsapp-float{
  position:fixed;bottom:50px;right:30px;z-index:999;
  background:#25d366;color:#fff;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 25px rgba(37,211,102,0.4);
  transition:all 0.4s var(--ease);text-decoration:none;
  animation:pulse 2s infinite;
}
.whatsapp-float:hover{transform:scale(1.1) translateY(-5px);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.4);}70%{box-shadow:0 0 0 20px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

@media (max-width: 768px) {
  nav { padding: 0 5vw; }
  .nav-links {
    position: fixed; top: 70px; left: 0; width: 100%; height: 0;
    flex-direction: column; background: rgba(255, 255, 255, 0.95); gap: 0;
    overflow: hidden; transition: 0.5s var(--ease); z-index: 200;
  }
  .nav-links.active { height: auto; padding: 2rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transition: 0.3s; }
  .nav-links.active li { opacity: 1; margin: 1.2rem 0; }
  .nav-links a { font-size: 1.1rem; color: var(--text); font-weight: 500; }
  .nav-cta { display: none; }
  .menu-toggle { display: block; }
  
  .quiz-wrapper { margin-top: 100px; padding-bottom: 60px;}
  .quiz-card { padding: 2rem 1.5rem; border-radius: 24px; }
  .quiz-intro h1 { font-size: 1.8rem; }
}