/* Preguntas del cuento: usa el degradado y los tintes de .np del reproductor. */
.np-quiz{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px auto 0;padding:14px 22px;border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;color:oklch(.22 .1 298);background:var(--np-gold);box-shadow:0 5px 0 oklch(.72 .13 78),0 16px 26px -14px oklch(.16 .08 298 / .75)}
.np-quiz svg{width:20px;height:20px;stroke-width:2}
.np-quiz b{margin-left:4px;padding:2px 9px;border-radius:999px;font-size:13px;background:oklch(.22 .1 298 / .16)}
.np-quiz:active{transform:translateY(2px);box-shadow:0 3px 0 oklch(.72 .13 78)}

.qz{gap:0;padding-left:20px;padding-right:20px;color:oklch(.995 .003 300);text-align:center}
.qz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.qz-top .np-chip{flex:none}
.qz-step{flex:1;font-weight:700;font-size:14px;letter-spacing:.3px;opacity:.9}
.qz-top .np-chip+.qz-step{margin-right:44px}

.qz-dots{display:flex;justify-content:center;gap:8px;margin:18px 0 6px}
.qz-dots i{width:10px;height:10px;border-radius:50%;background:oklch(1 0 0 / .28);transition:background .2s,transform .2s}
.qz-dots i.done{background:var(--np-gold)}
.qz-dots i.now{background:oklch(1 0 0 / .95);transform:scale(1.35)}

.qz-cuento{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px auto 0}
.qz-cuento img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid oklch(1 0 0 / .85);box-shadow:0 8px 20px -10px oklch(.16 .08 298 / .9)}
.qz-cuento span{font-size:12px;font-weight:700;letter-spacing:.3px;opacity:.85;max-width:260px}

.qz-question{font-family:'Nunito',sans-serif;font-size:clamp(20px,5vw,27px);font-weight:900;line-height:1.25;margin:14px auto 4px;max-width:520px;text-wrap:balance}
.qz-hint{font-size:14px;opacity:.75;margin-top:10px}
.qz>.qz-cuento{margin-top:auto}
.qz>.qz-next,.qz>.qz-hint{margin-bottom:auto}

.qz-options{display:grid;gap:11px;width:100%;max-width:480px;margin:20px auto 0}
.qz-option{position:relative;display:flex;align-items:center;gap:13px;text-align:left;min-height:86px;padding:11px 14px;border-radius:22px;font-family:'Nunito',sans-serif;font-weight:700;font-size:17px;line-height:1.25;color:oklch(.22 .1 298);background:oklch(1 0 0 / .95);box-shadow:0 4px 0 oklch(.16 .08 298 / .35);transition:transform .12s,box-shadow .12s,background .2s,opacity .2s}
.qz-txt{flex:1;min-width:0}

/* La lámina del dibujo. Tres fondos que se alternan para que las tres tarjetas
   no se lean como una sola mancha, como pasaba con la lista de antes. */
.qz-lamina{flex:none;width:64px;height:64px;border-radius:19px;display:grid;place-items:center;overflow:hidden}
.qz-lamina--0{background:oklch(.93 .07 85)}
.qz-lamina--1{background:oklch(.91 .06 215)}
.qz-lamina--2{background:oklch(.92 .06 340)}
.qz-lamina svg{width:46px;height:46px;stroke:none;fill:none}
.qz-lamina b{font-size:27px;font-weight:900;color:oklch(.45 .12 298)}
@media(prefers-reduced-motion:no-preference){
 .qz-option.ok .qz-lamina{animation:qz-salto .5s cubic-bezier(.22,1,.36,1)}
}
@keyframes qz-salto{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-5deg)}100%{transform:scale(1)}}
.qz-option:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 oklch(.16 .08 298 / .35)}
.qz-option:disabled{cursor:default}
.qz-option i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:oklch(.62 .16 152);color:white;flex:none}
.qz-option i svg{width:16px;height:16px;stroke-width:3}
.qz-option.ok{background:oklch(.88 .12 152);box-shadow:0 4px 0 oklch(.55 .13 152)}
.qz-option.no{background:oklch(.88 .07 25);box-shadow:0 4px 0 oklch(.62 .15 25);opacity:.95}
.qz-option.off{opacity:.5}

.qz-feedback{margin:20px auto 0;font-family:'Nunito',sans-serif;font-weight:800;font-size:19px}
.qz-feedback.ok{color:oklch(.92 .14 150)}
.qz-feedback.no{color:oklch(.93 .07 60)}

.qz-next{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 0;padding:16px 30px;border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;color:oklch(.995 .003 300);background:var(--np-pink);box-shadow:0 5px 0 var(--np-pink-deep),0 18px 28px -14px oklch(.16 .08 298 / .8)}
.qz-next:active{transform:translateY(2px);box-shadow:0 3px 0 var(--np-pink-deep)}

.qz-end{justify-content:center}
.qz-end .qz-top{position:absolute;left:20px;right:20px;top:max(10px,env(safe-area-inset-top))}
.qz-medal{display:grid;place-items:center;width:104px;height:104px;margin:10px auto 18px;border-radius:50%;background:oklch(1 0 0 / .16);color:var(--np-gold)}
.qz-medal svg{width:52px;height:52px;stroke-width:1.5}
.qz-end h2{font-family:'Nunito',sans-serif;font-size:clamp(22px,5.4vw,29px);font-weight:900;line-height:1.25;max-width:440px;margin:0 auto;text-wrap:balance}
.qz-score{font-family:'Nunito',sans-serif;font-size:19px;font-weight:700;margin-top:16px}
.qz-score b{font-size:46px;display:block;line-height:1.05;color:var(--np-gold)}
.qz-best{margin-top:8px;font-size:15px;opacity:.85}
.qz-end-actions{display:grid;gap:10px;justify-items:center;margin-top:24px}
.qz-back-link{padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;color:oklch(.995 .003 300);opacity:.85;text-decoration:underline}

@media (prefers-reduced-motion:reduce){.qz-option,.qz-next,.np-quiz,.qz-dots i{transition:none}}
@media (min-width:700px){.qz-question{margin-top:28px}.qz-options{gap:14px}}