/* =====================================================================
   QUIZ DE PRECALIFICACION · 2026-09-29
   Hereda tokens y tipografia de ../styles.css. Lo unico propio de acá es
   el layout de pantalla completa con la tarjeta anclada abajo, el patron
   que usan los quiz de onboarding en mobile.
   ===================================================================== */
.quiz-body{
  margin:0;min-height:100svh;
  background:var(--bg);
  display:flex;flex-direction:column;
  font-family:var(--f-ui);
}

/* ---------- barra superior ---------- */
.q-top{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  gap:10px;padding:14px 16px 0;background:var(--bg);
}
.q-back{
  width:38px;height:38px;border:0;background:none;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;border-radius:10px;
}
.q-back:hover{background:rgba(15,27,42,.06);}
.q-back svg{width:22px;height:22px;}
.q-back[hidden]{visibility:hidden;display:flex;}
.q-logo{grid-column:2;display:flex;justify-content:center;}
.q-logo img{height:26px;width:auto;display:block;}
.q-bars{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;}
.q-bars span{height:4px;border-radius:100px;background:var(--border-2);overflow:hidden;display:block;}
.q-bars i{display:block;height:100%;width:0;background:var(--accent-2);border-radius:100px;transition:width .45s cubic-bezier(.2,.7,.3,1);}

/* ---------- escenario: la tarjeta va abajo ---------- */
.q-stage{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 16px 20px;}
.q-card{
  background:#fff;border-radius:26px;
  padding:clamp(24px,5vw,34px);
  box-shadow:0 -2px 40px -18px rgba(15,27,42,.22), 0 20px 50px -34px rgba(15,27,42,.4);
  width:100%;max-width:560px;margin:0 auto;
  animation:qIn .38s cubic-bezier(.2,.7,.3,1);
}
@keyframes qIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .q-card{animation:none} .q-bars i{transition:none} }

.q-card h1,.q-card h2{
  font-family:var(--f-ui);font-weight:800;
  font-size:clamp(23px,5.4vw,29px);line-height:1.14;letter-spacing:-0.03em;
  margin:0 0 8px;color:var(--ink);
}
.q-sub{margin:0 0 20px;color:var(--text-dim);font-size:15px;line-height:1.6;}
.q-sub:last-child{margin-bottom:0;}

/* ---------- opciones ---------- */
.q-opts{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;}
.q-opt{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:15px 16px;border:1px solid var(--border);border-radius:15px;
  background:#fff;cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .16s ease, background .16s ease;
}
.q-opt:hover{border-color:var(--accent-2);}
.q-opt.is-on{border-color:var(--accent-2);background:rgba(22,194,245,.07);}
.q-opt .lbl{flex:1;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.q-opt .dot{
  width:21px;height:21px;border-radius:50%;border:1.5px solid var(--border-2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.q-opt.is-multi .dot{border-radius:7px;}
.q-opt.is-on .dot{border-color:var(--accent-2);background:var(--accent-2);}
.q-opt.is-on .dot::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);}

/* grilla de 2, para las preguntas con imagen */
.q-opts.is-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.q-opts.is-grid .q-opt{flex-direction:column;align-items:stretch;gap:10px;padding:14px;position:relative;}
.q-opts.is-grid .dot{position:absolute;right:12px;top:12px;}
.q-opts.is-grid .lbl{text-align:center;font-size:14.5px;}
.q-thumb{aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:var(--bg-2);}
.q-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- acuerdo (escala de 5) ---------- */
.q-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 10px;}
.q-scale button{
  aspect-ratio:1/1;border:1px solid var(--border);border-radius:13px;background:#fff;
  font-size:23px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease, transform .16s ease;
}
.q-scale button:hover{border-color:var(--accent-2);transform:translateY(-2px);}
.q-scale button.is-on{border-color:var(--accent-2);background:rgba(22,194,245,.09);}
.q-scale-ends{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px;}

/* ---------- slider ---------- */
.q-slider-val{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(42px,11vw,58px);line-height:1;letter-spacing:-0.02em;
  text-align:center;color:var(--ink);margin:14px 0 18px;
}
.q-range{width:100%;accent-color:var(--accent-2);height:26px;}
.q-ticks{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--text-faint);margin:2px 0 20px;}

/* ---------- lista de lo que incluye ---------- */
.q-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:15px;}
.q-list li{display:flex;gap:13px;align-items:flex-start;}
.q-list .ic{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:rgba(22,194,245,.12);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.q-list b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:2px;}
.q-list span{display:block;font-size:14px;color:var(--text-dim);line-height:1.55;}

/* ---------- resumen de perfil ---------- */
.q-recap{border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:0 0 18px;}
.q-recap div{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:11px 15px;font-size:14.5px;}
.q-recap div + div{border-top:1px solid var(--border);}
.q-recap dt{color:var(--text-faint);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0;}
.q-recap dd{margin:0;color:var(--ink);font-weight:600;}
.q-verdict{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;
  font-size:13px;font-weight:800;letter-spacing:.02em;margin:0 0 16px;
}
.q-verdict.is-fit{background:rgba(22,194,245,.13);color:var(--accent-2);}
.q-verdict.is-not{background:rgba(15,27,42,.07);color:var(--text-dim);}
.q-note{
  background:var(--bg-2);border-radius:13px;padding:14px 16px;margin:0 0 20px;
  font-size:14px;line-height:1.6;color:var(--text-dim);
}

/* ---------- campos ---------- */
.q-field{margin:0 0 14px;}
.q-field input{
  width:100%;padding:15px 16px;border:1px solid var(--border);border-radius:14px;
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
}
.q-field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;}

/* ---------- boton ---------- */
.q-next{
  width:100%;padding:17px 22px;border:0;border-radius:100px;cursor:pointer;
  background:var(--ink);color:#fff;font-family:inherit;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:opacity .16s ease, transform .16s ease;
}
.q-next:hover:not(:disabled){transform:translateY(-1px);}
.q-next:disabled{opacity:.38;cursor:not-allowed;}
.q-next svg{width:17px;height:17px;}
.q-skip{
  display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--text-faint);text-decoration:underline;
  text-underline-offset:3px;
}
.q-legal{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--text-faint);text-align:center;}
.q-legal a{color:var(--accent-2);}

/* dos botones lado a lado, solo en la intro */
.q-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.q-pair .q-next.is-ghost{background:#fff;color:var(--ink);border:1px solid var(--border-2);}

@media (min-width:760px){
  .q-stage{justify-content:center;padding:40px 24px;}
  .q-card{max-width:600px;}
}