/* ===== Test jugable dentro del móvil del hero ===== */
.mk-body--quiz { overflow-y: auto; gap: 8px; scrollbar-width: thin; }
.mk-body--quiz::-webkit-scrollbar { width: 4px; }
.mk-body--quiz::-webkit-scrollbar-thumb { background: var(--opogc-border); border-radius: 4px; }

.pq-q { font-family: var(--opogc-font-title); font-weight: 700; font-size: 0.78rem; line-height: 1.35; color: var(--opogc-text); margin: 0 0 4px; }

.pq-opt { display: flex; align-items: flex-start; gap: 7px; width: 100%; text-align: left; padding: 8px 9px; background: #fff; border: 1.5px solid var(--opogc-border); border-radius: 9px; font-family: var(--opogc-font-body); font-size: 0.7rem; line-height: 1.35; color: var(--opogc-text-soft); cursor: pointer; transition: border-color .15s, background .15s; }
.pq-opt:hover:not([disabled]) { border-color: var(--opogc-green-pastel); background: var(--opogc-green-soft); }
.pq-opt[disabled] { cursor: default; }
.pq-key { flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px; background: var(--opogc-surface-alt); display: flex; align-items: center; justify-content: center; font-family: var(--opogc-font-title); font-weight: 700; font-size: 0.62rem; color: var(--opogc-text-muted); }
.pq-opt.is-correct { border-color: var(--opogc-green-pastel); background: var(--opogc-green-soft); color: var(--opogc-green-deep); font-weight: 600; }
.pq-opt.is-correct .pq-key { background: var(--opogc-green-pastel); color: #fff; }
.pq-opt.is-wrong { border-color: #d98a8e; background: #fbeef0; color: #8a3a3f; }
.pq-opt.is-wrong .pq-key { background: #c2575c; color: #fff; }

.pq-exp { font-size: 0.66rem; line-height: 1.45; padding: 8px 9px; border-radius: 8px; background: var(--opogc-green-soft); color: var(--opogc-text-soft); border-left: 3px solid var(--opogc-green-pastel); }
.pq-exp.no { background: #fbeef0; border-left-color: #c2575c; }
.pq-exp-tag { display: inline-block; font-weight: 800; font-size: 0.6rem; letter-spacing: .04em; text-transform: uppercase; margin-right: 5px; }
.pq-exp.ok .pq-exp-tag { color: var(--opogc-green-deep); }
.pq-exp.no .pq-exp-tag { color: #c2575c; }

/* Pantalla de inicio */
.pq-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; min-height: 100%; padding: 14px 6px; }
.pq-intro-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--opogc-green-soft); display: flex; align-items: center; justify-content: center; }
.pq-intro-ic svg { width: 28px; height: 28px; stroke: var(--opogc-green-pastel); }
.pq-intro-t { font-family: var(--opogc-font-title); font-weight: 800; font-size: 1rem; color: var(--opogc-text); margin: 4px 0 0; }
.pq-intro-s { font-size: 0.72rem; color: var(--opogc-text-muted); margin: 0; }
.pq-intro-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pq-intro-list li { font-size: 0.7rem; color: var(--opogc-text-soft); display: flex; align-items: center; gap: 6px; }
.pq-intro-list li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--opogc-green-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D8B5A' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; }

/* Pantalla de resultado */
.pq-result { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; gap: 8px; padding: 10px; }
.pq-badge { font-weight: 800; font-size: 0.62rem; letter-spacing: .06em; padding: 3px 11px; border-radius: 999px; }
.pq-badge.ok { background: var(--opogc-green-soft); color: var(--opogc-green-deep); }
.pq-badge.no { background: #fbeef0; color: #a23a40; }
.pq-num { font-family: var(--opogc-font-title); font-weight: 800; font-size: 2.4rem; color: var(--opogc-green-deep); line-height: 1; }
.pq-num span { font-size: 1rem; color: var(--opogc-text-muted); font-weight: 600; }
.pq-meter { width: 80%; height: 7px; background: var(--opogc-green-soft); border-radius: 999px; overflow: hidden; }
.pq-meter-fill { height: 100%; background: var(--opogc-green-pastel); border-radius: 999px; }
.pq-stats { font-size: 0.66rem; color: var(--opogc-text-muted); margin: 0; }
.pq-msg { font-size: 0.72rem; color: var(--opogc-text-soft); margin: 0; }
.pq-cta { display: inline-block; background: var(--opogc-green-pastel); color: #fff; font-weight: 700; font-size: 0.74rem; padding: 9px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 14px rgba(76,175,125,.32); }
.pq-retry { background: none; border: none; color: var(--opogc-text-muted); font-size: 0.7rem; font-weight: 600; cursor: pointer; text-decoration: underline; font-family: var(--opogc-font-body); }