/* EntrenosFácil · test de perfil personalizado */
.quiz-sec { background: var(--bg); overflow: hidden; }
.quiz-sec::before { content: ''; position: absolute; width: 640px; height: 640px; left: -220px; top: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(109,40,217,.28), transparent 65%); filter: blur(30px); pointer-events: none; }
.quiz-sec::after { content: ''; position: absolute; width: 640px; height: 640px; right: -220px; bottom: 0; border-radius: 50%; background: radial-gradient(circle, rgba(239,68,68,.22), transparent 65%); filter: blur(30px); pointer-events: none; }
.quiz-sec .wrap { position: relative; z-index: 1; }

.quiz { position: relative; max-width: 940px; margin-inline: auto; padding: 2px; border-radius: 36px; background: linear-gradient(120deg, var(--red), var(--yellow), #6d28d9, var(--red)); background-size: 300% 300%; animation: qborder 9s linear infinite; box-shadow: 0 50px 120px -40px rgba(239,68,68,.45); }
@keyframes qborder { to { background-position: 300% 0; } }
.q-card { position: relative; border-radius: 34px; background: linear-gradient(170deg, #0d1226, #080c19); padding: 34px; min-height: 520px; overflow: hidden; }

.q-top { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; min-height: 38px; }
.q-prog { flex: 1; display: flex; gap: 6px; }
.q-prog i { flex: 1; height: 5px; border-radius: 5px; background: var(--line2); position: relative; overflow: hidden; }
.q-prog i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--red), var(--yellow)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); box-shadow: 0 0 14px rgba(250,204,21,.7); }
.q-prog i.done::after { transform: scaleX(1); }
.q-prog i.cur::after { transform: scaleX(.35); animation: qpulse 1.6s ease-in-out infinite; }
@keyframes qpulse { 50% { opacity: .55; } }
.q-count { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.q-count b { color: var(--yellow); }
.q-back { border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); font: 600 13px var(--body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: opacity .3s, transform .3s var(--ease), background .2s; }
.q-back:hover { background: rgba(255,255,255,.1); transform: translateX(-3px); }
.q-back[hidden] { display: none; }

.q-stage { position: relative; }
.q-panel { animation: qin .6s var(--ease) both; }
.q-panel.back { animation-name: qinb; }
.q-panel.out { animation: qout .26s ease-in both; }
.q-panel.out.back { animation-name: qoutb; }
@keyframes qin { from { opacity: 0; transform: translateX(60px); filter: blur(8px); } }
@keyframes qinb { from { opacity: 0; transform: translateX(-60px); filter: blur(8px); } }
@keyframes qout { to { opacity: 0; transform: translateX(-60px); filter: blur(8px); } }
@keyframes qoutb { to { opacity: 0; transform: translateX(60px); filter: blur(8px); } }

.q-title { font-size: clamp(34px, 5vw, 56px); margin: 0 0 8px; }
.q-hint { color: var(--muted); margin: 0 0 28px; font-size: 17px; }
.q-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.q-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px 22px; border-radius: 22px; border: 1.5px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); font: inherit; cursor: pointer; transition: transform .45s var(--ease), border-color .3s, background .3s, opacity .4s; opacity: 0; animation: qopt .6s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes qopt { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.q-opt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(250,204,21,.16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.q-opt:hover { transform: translateY(-4px); border-color: rgba(250,204,21,.5); background: rgba(255,255,255,.06); }
.q-opt:hover::before { opacity: 1; }
.q-opt .k { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--yellow); background: linear-gradient(135deg, rgba(239,68,68,.26), rgba(250,204,21,.12)); border: 1px solid var(--line2); transition: all .4s var(--ease); }
.q-opt b { display: block; font-size: 17px; line-height: 1.25; }
.q-opt span.s { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.q-opt.sel { border-color: var(--yellow); background: rgba(250,204,21,.09); transform: scale(1.02); box-shadow: 0 0 0 5px rgba(250,204,21,.14), 0 26px 50px -24px rgba(250,204,21,.5); }
.q-opt.sel .k { background: var(--yellow); color: #111; transform: rotate(360deg); }
.q-opt.dim { opacity: .3 !important; transform: scale(.97); }
.q-hintkeys { margin-top: 20px; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }

/* intro */
.q-intro { text-align: center; padding: 30px 6px; display: grid; justify-items: center; gap: 18px; }
.q-bolt { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(239,68,68,.35), rgba(250,204,21,.2)); border: 1px solid var(--line2); color: var(--yellow); position: relative; animation: bob 5s ease-in-out infinite; }
.q-bolt::before { content: ''; position: absolute; inset: -10px; border-radius: 36px; border: 1.5px dashed rgba(250,204,21,.4); animation: spin 14s linear infinite; }
.q-bolt svg { width: 46px; height: 46px; }
.q-intro h3 { font-size: clamp(40px, 6vw, 70px); }
.q-intro p { color: var(--muted); max-width: 52ch; margin: 0; font-size: 18px; }
.q-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.q-facts span { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }

/* cálculo */
.q-calc { display: grid; justify-items: center; text-align: center; gap: 24px; padding: 50px 0; }
.q-orbit { position: relative; width: 150px; height: 150px; }
.q-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--yellow); animation: spin 1.1s linear infinite; }
.q-orbit i:nth-child(2) { inset: 16px; border-top-color: var(--red); animation-duration: 1.6s; animation-direction: reverse; }
.q-orbit i:nth-child(3) { inset: 32px; border-top-color: #8b5cf6; animation-duration: 2.1s; }
.q-orbit img { position: absolute; inset: 48px; width: 54px; height: 54px; border-radius: 50%; }
.q-lines { display: grid; gap: 10px; text-align: left; min-height: 100px; }
.q-lines div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; opacity: 0; transform: translateX(-14px); animation: qline .6s var(--ease) forwards; animation-delay: var(--d); }
.q-lines div::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
@keyframes qline { to { opacity: 1; transform: none; } }

/* resultado */
.q-res { display: grid; gap: 26px; }
.q-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: stretch; }
.q-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(250,204,21,.13); color: var(--yellow); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.q-res h3 { font-size: clamp(44px, 7vw, 86px); margin: 12px 0 8px; background: linear-gradient(90deg, #fff, var(--yellow), var(--orange)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.q-sub { color: var(--muted); margin: 0 0 16px; font-size: 17px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chips span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); font-size: 13px; font-weight: 600; opacity: 0; animation: qopt .6s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 300ms); }
.q-metrics { padding: 22px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; gap: 16px; align-content: center; }
.q-m { display: grid; gap: 6px; }
.q-m div { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.q-m div b { color: #fff; font-variant-numeric: tabular-nums; }
.q-m .bar { height: 8px; border-radius: 8px; background: var(--line2); overflow: hidden; }
.q-m .bar i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, var(--yellow), var(--red)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: calc(var(--i) * 140ms + 400ms); box-shadow: 0 0 12px rgba(239,68,68,.6); }
.q-res.go .q-m .bar i { transform: scaleX(1); }
.q-note { font-size: 12px; color: var(--muted); text-align: right; margin-top: -6px; }

.q-week { padding: 22px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.q-week h4 { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .5px; }
.q-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.q-d { text-align: center; padding: 14px 4px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); opacity: 0; transform: translateY(18px) scale(.9); }
.q-res.go .q-d { animation: qpop .7s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 500ms); }
@keyframes qpop { to { opacity: 1; transform: none; } }
.q-d small { display: block; color: var(--muted); font-weight: 700; letter-spacing: 1px; font-size: 11px; }
.q-d b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; }
.q-d.t { background: linear-gradient(160deg, rgba(239,68,68,.3), rgba(250,204,21,.14)); border-color: rgba(250,204,21,.5); }
.q-d.c { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.3); }
.q-d.r b { color: var(--muted); font-size: 15px; }
.q-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.q-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; background: var(--red); }
.q-legend span:nth-child(2)::before { background: var(--yellow); }
.q-legend span:nth-child(3)::before { background: var(--line2); }

.q-recs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.q-rec { position: relative; padding: 22px 22px 22px 22px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.03); opacity: 0; transform: translateY(26px); }
.q-res.go .q-rec { animation: qpop .8s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms + 900ms); }
.q-rec h5 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .5px; text-transform: uppercase; color: var(--yellow); }
.q-rec p { margin: 0; color: #cfd5ea; font-size: 15px; }
.q-rec.warn { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.q-rec.warn h5 { color: #ff8a80; }
.q-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.q-disc { text-align: center; color: var(--muted); font-size: 12px; margin: 0; }
.q-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

body.in-test .float-cta { opacity: 0 !important; pointer-events: none; transform: translate(-50%, 140%) !important; }

@media (max-width: 920px) {
  .q-card { padding: 22px 18px; }
  .q-opts, .q-recs { grid-template-columns: minmax(0, 1fr); }
  .q-hero { grid-template-columns: minmax(0, 1fr); }
  .q-days { gap: 5px; } .q-d { padding: 10px 2px; } .q-d b { font-size: 16px; }
  .q-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-opt, .q-chips span, .q-d, .q-rec, .q-lines div { opacity: 1 !important; transform: none !important; }
  .q-m .bar i { transform: scaleX(1) !important; }
}