#quizApp { min-height:90vh; }

/* HERO */
.quiz-hero { min-height:85vh; display:flex; align-items:center; justify-content:center; padding:80px 24px; border-bottom:var(--border); text-align:center; background:radial-gradient(circle at 50% 60%,rgba(255,77,28,.08) 0%,transparent 50%); }
.quiz-hero-inner { max-width:600px; }
.quiz-hero-inner h1 { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; letter-spacing:-2.5px; line-height:1.05; margin-bottom:16px; }
.quiz-hero-inner h1 em { font-style:italic; color:var(--accent); }
.quiz-hero-inner p { font-size:1rem; color:#666; line-height:1.6; margin-bottom:36px; }
.quiz-meta { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:36px; }
.quiz-meta-item { font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.quiz-start-btn {
  background:var(--accent); color:#fff; border:2px solid var(--ink);
  border-radius:14px; padding:16px 40px; font-size:1rem; font-weight:700;
  font-family:'Inter',sans-serif; cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); transition:all .15s;
}
.quiz-start-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }

/* PREGUNTA */
.quiz-pregunta { max-width:720px; margin:0 auto; padding:60px 24px; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.quiz-progress { margin-bottom:40px; }
.qp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.qp-label { font-size:.78rem; font-weight:600; color:var(--muted); }
.qp-num { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:800; }
.qp-bar { height:4px; background:var(--soft); border-radius:2px; }
.qp-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease; }

.quiz-q-num { font-size:.7rem; text-transform:uppercase; letter-spacing:2px; color:var(--accent); font-weight:700; margin-bottom:10px; }
.quiz-q-text { font-family:'Syne',sans-serif; font-size:clamp(1.4rem,3vw,2rem); font-weight:800; letter-spacing:-.5px; line-height:1.2; margin-bottom:32px; }

.quiz-opciones { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:32px; }
.quiz-opcion {
  background:var(--white); border:2px solid rgba(26,26,26,.12);
  border-radius:14px; padding:20px 18px; cursor:pointer;
  transition:all .18s; text-align:left; font-family:'Inter',sans-serif;
}
.quiz-opcion:hover { border-color:rgba(26,26,26,.3); transform:translateY(-2px); box-shadow:2px 4px 0 rgba(26,26,26,.08); }
.quiz-opcion.selected { border-color:var(--ink); background:var(--bg); box-shadow:4px 4px 0 var(--ink); }
.qo-icon { font-size:1.8rem; margin-bottom:10px; }
.qo-label { font-size:.9rem; font-weight:700; margin-bottom:4px; }
.qo-desc { font-size:.75rem; color:var(--muted); line-height:1.4; }

.quiz-nav { display:flex; align-items:center; justify-content:space-between; }
.quiz-back { background:none; border:var(--border); border-radius:10px; padding:10px 18px; font-size:.85rem; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; color:var(--ink); transition:all .15s; }
.quiz-back:hover { background:var(--soft); }
.quiz-next {
  background:var(--ink); color:var(--bg); border:2px solid var(--ink);
  border-radius:12px; padding:13px 28px; font-size:.9rem; font-weight:700;
  font-family:'Inter',sans-serif; cursor:pointer;
  box-shadow:3px 3px 0 rgba(26,26,26,.3); transition:all .15s;
}
.quiz-next:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(26,26,26,.3); }
.quiz-next:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }

/* RESULTADO */
.quiz-resultado { max-width:900px; margin:0 auto; padding:60px 24px 80px; animation:fadeIn .4s ease; }
.qr-header { text-align:center; margin-bottom:48px; }
.qr-perfil-icon { font-size:4rem; margin-bottom:16px; }
.qr-header h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; letter-spacing:-1.5px; margin-bottom:10px; }
.qr-header p { font-size:.95rem; color:#666; line-height:1.6; max-width:500px; margin:0 auto; }

.qr-stack-title { font-size:.72rem; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:var(--muted); margin-bottom:20px; }
.qr-stack { display:flex; flex-direction:column; gap:12px; margin-bottom:40px; }

.qr-tool {
  display:grid; grid-template-columns:auto auto 1fr auto;
  align-items:center; gap:20px;
  background:var(--white); border:var(--border); border-radius:14px;
  padding:20px 24px; transition:all .15s;
}
.qr-tool:hover { transform:translateX(4px); border-color:var(--accent); }
.qr-order { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; color:rgba(26,26,26,.1); min-width:32px; }
.qr-tool-icon { font-size:1.5rem; width:46px; height:46px; background:var(--bg); border:var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.qr-tool-info .qr-tool-name { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; margin-bottom:3px; }
.qr-tool-info .qr-tool-why { font-size:.8rem; color:#666; line-height:1.5; }
.qr-tool-btn { background:var(--accent); color:#fff; border:2px solid var(--ink); border-radius:10px; padding:9px 18px; font-size:.78rem; font-weight:700; text-decoration:none; white-space:nowrap; box-shadow:2px 2px 0 var(--ink); transition:all .15s; display:inline-block; }
.qr-tool-btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }

/* PACK RECOMENDADO */
.qr-pack-rec { margin: 32px 0 8px; }
.qr-pack-label { font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; color:var(--muted); margin-bottom:12px; }
.qr-pack-card { display:flex; align-items:center; gap:16px; background:var(--soft); border:2px solid var(--ink); border-radius:14px; padding:18px 20px; box-shadow:3px 3px 0 var(--ink); }
.qr-pack-emoji { font-size:2rem; flex-shrink:0; }
.qr-pack-info { flex:1; min-width:0; }
.qr-pack-titulo { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:800; margin-bottom:4px; }
.qr-pack-desc { font-size:.78rem; color:var(--muted); line-height:1.5; }
.qr-pack-btn { background:var(--ink); color:var(--bg); border-radius:10px; padding:10px 18px; font-size:.8rem; font-weight:700; text-decoration:none; font-family:'Inter',sans-serif; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.qr-pack-btn:hover { background:#333; }

.qr-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.qr-action { background:var(--ink); color:var(--bg); border:2px solid var(--ink); border-radius:12px; padding:13px 24px; font-size:.88rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s; box-shadow:3px 3px 0 rgba(26,26,26,.2); }
.qr-action:hover { transform:translate(-1px,-1px); }
.qr-action.outline { background:transparent; color:var(--ink); }
.qr-action.outline:hover { background:var(--soft); }

@media (max-width:600px) {
  .quiz-opciones { grid-template-columns:1fr 1fr; }
  .qr-tool { grid-template-columns:auto 1fr; grid-template-rows:auto auto; }
  .qr-order { display:none; }
  .qr-tool-btn { grid-column:2; }
}