/* Compactación del cuestionario: desktop y móvil */
@media screen and (min-width: 621px){
main{margin:18px auto 32px;max-width:880px}
#quiz.panel{margin-top:12px;padding:20px 28px 22px;border-radius:20px}
#quiz .row:first-child{margin-bottom:5px}
#quiz .eyebrow{font-size:11px;letter-spacing:.12em}
#quiz .bar{height:7px;margin:10px 0 18px}
#question{font-size:clamp(22px,2.4vw,28px);line-height:1.25;margin:0 0 17px}
#quiz .options{gap:8px}
#quiz .option{min-height:49px;padding:11px 48px 11px 17px;border-radius:12px;font-size:15px;line-height:1.35}
#quiz .option:before{right:16px;width:19px;height:19px}
#quiz .row:last-child{margin-top:15px}
#quiz .btn{padding:11px 17px;margin-top:0;font-size:14px}
}
@media screen and (max-width:620px){
main{margin:16px auto;padding:0 13px}
#quiz.panel{margin-top:12px;padding:18px 16px;border-radius:17px}
#quiz .bar{height:7px;margin:10px 0 17px}
#question{font-size:clamp(21px,5.3vw,26px);line-height:1.3;margin:0 0 17px}
#quiz .options{gap:9px}
#quiz .option{min-height:53px;padding:12px 45px 12px 14px;font-size:14px}
#quiz .row:last-child{margin-top:14px}
#quiz .btn{margin-top:0;padding:11px 13px;font-size:13px}
}

/* Versión compacta v2: pregunta y respuestas visibles sin desplazamiento excesivo */
header{padding:9px max(3%,calc((100% - 1060px)/2));min-height:58px}
header a{display:inline-flex;align-items:center;gap:9px;font-size:15px;line-height:1.1}
header img{width:39px;height:39px;object-fit:contain;vertical-align:middle;margin:0;background:white;border-radius:8px;padding:2px}
header #theme{padding:9px 12px;border-radius:10px;min-height:36px}
main{max-width:760px;margin:12px auto 26px}
main:has(#quiz:not(.hide))>.eyebrow,main:has(#quiz:not(.hide))>h1,main:has(#quiz:not(.hide))>p{display:none}
#start,#result{margin-top:18px}
#quiz.panel{margin-top:4px;padding:17px 21px 17px;border-radius:16px}
#quiz .row:first-child{margin-bottom:0}
#quiz .eyebrow{font-size:10px;letter-spacing:.10em}
#quiz .muted{font-size:12px}
#quiz .bar{height:5px;margin:8px 0 14px}
#question{font-size:clamp(19px,2vw,24px);line-height:1.25;margin:0 0 13px;letter-spacing:-.02em}
#quiz .options{gap:7px}
#quiz .option{min-height:42px;padding:9px 41px 9px 14px;border-radius:10px;font-size:14px;line-height:1.3;box-shadow:0 2px 8px #172c4908}
#quiz .option:before{right:14px;width:17px;height:17px;border-width:1.5px}
#quiz .row:last-child{margin-top:12px}
#quiz .btn{padding:9px 14px;margin-top:0;font-size:13px}
@media(max-width:620px){
header{padding:9px 13px}
header a{font-size:12px;gap:6px}
header img{width:34px;height:34px}
main{margin:8px auto;padding:0 10px}
#quiz.panel{margin-top:4px;padding:14px 12px 15px;border-radius:14px}
#question{font-size:19px;margin-bottom:13px}
#quiz .options{gap:7px}
#quiz .option{min-height:45px;padding:10px 39px 10px 12px;font-size:13px}
#quiz .row:last-child{margin-top:12px}
}

/* v3: respuestas en dos columnas para evitar cortes en pantallas de escritorio */
@media screen and (min-width:760px){
#quiz .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
#quiz .option{min-height:62px;padding:13px 44px 13px 16px;display:flex;align-items:center;font-size:14px}
#quiz.panel{max-width:820px;margin:10px auto 0;padding:18px 24px}
#quiz .bar{margin:9px 0 16px}
#question{font-size:clamp(21px,2vw,26px);margin-bottom:17px}
#quiz .row:last-child{margin-top:16px}
}
@media screen and (min-width:760px) and (max-height:720px){
header{min-height:48px;padding-top:5px;padding-bottom:5px}
header img{width:31px;height:31px}
main{margin-top:6px}
#quiz.panel{padding:13px 20px}
#quiz .option{min-height:53px;padding-top:9px;padding-bottom:9px}
#quiz .bar{margin:6px 0 12px}
#question{margin-bottom:12px;font-size:21px}
}