/* Quiz «¿En qué nivel estás?» · Life Maxxxing landing v3
   Autocontenido: usa las variables de la pagina si existen y cae a los hex de la marca si no. */

.qz-host{
  --qz-bg:var(--bg,#0A0A0A);
  --qz-surface:var(--surface,#141414);
  --qz-surface2:var(--surface2,#1C1C1C);
  --qz-border:var(--border,#262626);
  --qz-text:var(--text,#F5F5F5);
  --qz-muted:var(--muted,#9A9A9A);
  --qz-xxx:var(--xxx,#FFA31A);
  --qz-display:var(--display,'Archivo Black','Arial Black',sans-serif);
  --qz-body:var(--body,'Inter',system-ui,-apple-system,sans-serif);
  position:relative;
  background:var(--qz-surface);
  border:1px solid var(--qz-border);
  border-radius:14px;
  padding:26px 22px 24px;
  color:var(--qz-text);
  font-family:var(--qz-body);
}
@media (min-width:760px){ .qz-host{padding:34px 34px 30px} }

/* ---------- respaldo sin JS: la lista de los 6 niveles ---------- */
.qz-fallback{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.qz-fallback li{
  display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
  padding:14px 16px;background:var(--qz-surface2,#1C1C1C);border:1px solid var(--qz-border);border-radius:10px;
}
.qz-fallback b{font-family:var(--qz-display);font-weight:400;font-size:20px;line-height:1;color:var(--qz-xxx)}
.qz-fallback strong{display:block;color:var(--qz-text);font-weight:800;font-size:.95rem;letter-spacing:.02em;margin-bottom:3px}
.qz-fallback span{display:block;color:var(--qz-muted);font-size:.9rem;line-height:1.5}
.qz-intro{margin:0 0 18px;color:var(--qz-muted);font-size:.95rem;max-width:62ch}
.js .qz-host .qz-fallback,.js .qz-host .qz-intro{display:none}

/* ---------- cabecera con paso y barra ---------- */
.qz{display:block}
.qz-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.qz-paso{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--qz-muted);white-space:nowrap;
}
.qz-barra{position:relative;flex:1;height:3px;background:var(--qz-border);border-radius:3px;overflow:hidden}
.qz-barra i{
  position:absolute;inset:0;display:block;background:var(--qz-xxx);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce){ .qz-barra i{transition:none} }
/* en el resultado la barra ya no cuenta nada: fuera, que el ámbar lo lleve el nivel */
.qz--fin .qz-top{display:none}

/* ---------- pregunta ---------- */
.qz-preg{
  font-family:var(--qz-display);font-weight:400;
  font-size:clamp(1.35rem,3.2vw,2.05rem);line-height:1.1;
  margin:0 0 20px;letter-spacing:-.01em;
}
.qz-ops{display:grid;gap:10px;margin:0}
.qz-op{
  display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;
  width:100%;min-height:56px;padding:12px 16px;text-align:left;
  background:var(--qz-surface2,#1C1C1C);color:var(--qz-text);
  border:1px solid var(--qz-border);border-radius:10px;
  font-family:var(--qz-body);font-size:1rem;line-height:1.4;font-weight:500;
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.qz-op:hover{border-color:#4A4A4A;background:#222}
.qz-op:active{transform:translateY(1px)}
.qz-op[aria-pressed="true"]{border-color:var(--qz-xxx);background:#231a0c}
.qz-op .qz-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;
  background:#000;border:1px solid var(--qz-border);
  font-size:12px;font-weight:800;color:var(--qz-muted);
}
.qz-op:hover .qz-num,.qz-op[aria-pressed="true"] .qz-num{color:var(--qz-xxx);border-color:var(--qz-xxx)}
.qz-op .qz-txt{display:block}

.qz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.qz-atras{
  min-height:44px;padding:10px 16px;background:transparent;color:var(--qz-muted);
  border:1px solid var(--qz-border);border-radius:8px;
  font-family:var(--qz-body);font-size:13px;font-weight:600;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.qz-atras:hover{color:var(--qz-text);border-color:#4A4A4A}
.qz-atras[hidden]{display:none}
.qz-tip{font-size:12px;color:var(--qz-muted)}
.qz-tip b{color:var(--qz-text);font-weight:600}
/* en pantalla tactil no hay teclas que enseñar */
@media (hover:none),(pointer:coarse){ .qz-tip{display:none} }

/* ---------- resultado ---------- */
.qz-res{display:block}
.qz-kicker{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  font-weight:600;color:var(--qz-muted);margin-bottom:12px;
}
.qz-nivel{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;flex-wrap:wrap}
.qz-nivel b{
  font-family:var(--qz-display);font-weight:400;
  font-size:clamp(2.6rem,7vw,4.4rem);line-height:.9;color:var(--qz-xxx);
}
.qz-nivel span{
  font-family:var(--qz-display);font-weight:400;
  font-size:clamp(1.2rem,3.4vw,2rem);line-height:1;letter-spacing:.01em;
}
.qz-diag{margin:0 0 20px;color:var(--qz-muted);font-size:1.02rem;max-width:58ch}
.qz-diag strong{color:var(--qz-text);font-weight:600}
.qz-salto{
  margin:0 0 20px;padding:14px 16px;border-left:3px solid var(--qz-xxx);
  background:#181206;color:var(--qz-text);font-size:.95rem;max-width:62ch;
}
.qz-puerta{
  background:var(--qz-bg);border:1px solid var(--qz-border);border-radius:10px;
  padding:18px 18px 16px;margin:0 0 20px;
}
.qz-puerta-t{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;color:var(--qz-xxx);margin-bottom:8px;
}
.qz-puerta p{margin:0;font-size:1rem;line-height:1.55}
.qz-cuenta{
  display:inline-block;margin-top:12px;padding:4px 10px;border-radius:5px;
  background:var(--qz-surface2,#1C1C1C);border:1px solid var(--qz-border);
  font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--qz-muted);
}
.qz-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.qz-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 26px;border-radius:7px;border:1px solid var(--qz-xxx);
  background:var(--qz-xxx);color:#0A0A0A;text-decoration:none;
  font-family:var(--qz-body);font-size:15px;font-weight:800;letter-spacing:.01em;
  cursor:pointer;transition:background .15s ease,transform .15s ease;
}
.qz-btn:hover{background:#FFB53F;transform:translateY(-1px)}
.qz-btn2{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 22px;border-radius:7px;border:1px solid #3A3A3A;
  background:transparent;color:var(--qz-text);
  font-family:var(--qz-body);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.qz-btn2:hover{background:var(--qz-surface2,#1C1C1C);border-color:#4A4A4A}
.qz-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qz-nota{margin:0;font-size:12px;color:var(--qz-muted)}
.qz-rehacer{
  min-height:44px;padding:8px 2px;background:none;border:0;
  color:var(--qz-muted);font-family:var(--qz-body);font-size:13px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.qz-rehacer:hover{color:var(--qz-text)}

.qz-host :focus-visible{outline:2px solid var(--qz-xxx);outline-offset:3px;border-radius:6px}

/* ---------- entrada de pantalla ---------- */
.qz-cuerpo{animation:qz-in .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes qz-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .qz-cuerpo{animation:none}
  .qz-op,.qz-btn,.qz-btn2{transition:none}
}