/* ===== Efectos "vivos" del test ===== */
@media (prefers-reduced-motion: no-preference) {

/* Entrada de cada pantalla */
.pq-enter { animation: pqIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes pqIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Opciones en cascada: SÓLO deslizamiento, nunca opacidad (el fundido lo hace .pq-enter) */
.pq-opt { animation: pqOpt .38s cubic-bezier(.22,1,.36,1) backwards; }
.pq-opt:nth-child(2) { animation-delay: .05s; }
.pq-opt:nth-child(3) { animation-delay: .11s; }
.pq-opt:nth-child(4) { animation-delay: .17s; }
.pq-opt:nth-child(5) { animation-delay: .23s; }
@keyframes pqOpt { from { transform: translateX(10px); } to { transform: none; } }
.pq-opt:active:not([disabled]) { transform: scale(.97); }
.pq-opt { transition: border-color .15s, background .15s, transform .12s; }

/* Acierto: pop. Fallo: shake */
.pq-opt.is-correct, .pq-opt.is-wrong { opacity: 1 !important; }
.pq-opt.is-correct { animation: pqPop .45s cubic-bezier(.22,1.4,.4,1) both; }
@keyframes pqPop { 0% { opacity: 1; transform: scale(1); } 40% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.pq-opt.is-wrong { animation: pqShake .4s both; }
@keyframes pqShake { 0%,100% { opacity: 1; transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Destello al marcar correcta */
.pq-opt.is-correct::after {
    content: ''; position: absolute; inset: 0; border-radius: 9px;
    background: radial-gradient(circle at center, rgba(76,175,125,.35), transparent 70%);
    animation: pqFlash .6s ease-out forwards; pointer-events: none;
}
.pq-opt { position: relative; overflow: hidden; }
@keyframes pqFlash { from { opacity: 1; } to { opacity: 0; } }

/* Explicación entra deslizando */
.pq-exp { animation: pqExp .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes pqExp { from { opacity: 0; transform: translateY(8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 300px; } }

/* Icono de intro: latido suave */
.pq-intro-ic { animation: pqBeat 2.4s ease-in-out infinite; }
@keyframes pqBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.pq-intro-list li { opacity: 0; animation: pqIn .4s ease both; }
.pq-intro-list li:nth-child(1) { animation-delay: .15s; }
.pq-intro-list li:nth-child(2) { animation-delay: .27s; }
.pq-intro-list li:nth-child(3) { animation-delay: .39s; }

/* Botón "Empezar test": pulso para invitar al clic */
.mk-next.is-pulse { animation: pqPulse 1.8s ease-in-out infinite; }
@keyframes pqPulse {
    0%,100% { box-shadow: 0 4px 14px rgba(76,175,125,.32), 0 0 0 0 rgba(76,175,125,.5); }
    50% { box-shadow: 0 4px 18px rgba(76,175,125,.45), 0 0 0 8px rgba(76,175,125,0); }
}

/* Barra de progreso con brillo al avanzar */
.mk-prog-fill { transition: width .5s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; }
.mk-prog-fill::after {
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: pqSheen 2s ease-in-out infinite;
}
@keyframes pqSheen { 0% { left: -40%; } 60%,100% { left: 110%; } }

/* Resultado */
.pq-badge { animation: pqBadge .5s cubic-bezier(.22,1.4,.4,1) both .1s; }
@keyframes pqBadge { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.pq-num { animation: pqPop .5s cubic-bezier(.22,1.4,.4,1) both .2s; }
.pq-meter-fill { transition: width 1s cubic-bezier(.22,1,.36,1) .3s; }
.pq-cta { animation: pqPulse 1.8s ease-in-out infinite .6s; }

/* Confeti */
.pq-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; border-radius: 28px; }
.pq-confetti i {
    position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px;
    animation: pqFall linear forwards;
}
@keyframes pqFall {
    to { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

}