/* Home — sección "Minijuegos" (retos). Namespace .hr- */
#minijuegos { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--forge), var(--steel) 55%, var(--forge)); }
#minijuegos::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 15% 20%, rgba(30,111,255,.22), transparent 70%), radial-gradient(ellipse 45% 40% at 90% 85%, rgba(0,207,255,.12), transparent 70%); pointer-events: none; }
#minijuegos::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(60,90,140,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(60,90,140,.12) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%); pointer-events: none; }
#minijuegos .container { position: relative; z-index: 1; }
.hr-intro { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.hr-intro h2 { margin: 0 0 1rem; }
.hr-intro p { margin: 0 auto; color: var(--vapor); max-width: 62ch; }
.hr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.hr-card { position: relative; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; border-radius: 12px; border: 1px solid rgba(60,80,120,.6); background: linear-gradient(180deg, rgba(21,30,48,.92), rgba(14,21,37,.96)); transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s; isolation: isolate; }
@property --hr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hr-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--hr-a), transparent 0 60%, var(--cyan) 80%, var(--blue-glow) 90%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; z-index: 2; pointer-events: none; animation: hr-spin 5s linear infinite; }
@keyframes hr-spin { to { --hr-a: 360deg; } }
.hr-card:hover, .hr-card:focus-visible { transform: translateY(-8px); border-color: var(--blue-glow); box-shadow: 0 40px 80px -30px rgba(30,111,255,.6); }
.hr-card:hover::before, .hr-card:focus-visible::before { opacity: 1; }
.hr-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--forge); }
.hr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.hr-card:hover .hr-cover img { transform: scale(1.07); }
.hr-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,12,20,.92)); }
.hr-lv { position: absolute; z-index: 1; left: 1.1rem; bottom: .9rem; display: flex; align-items: baseline; gap: .6rem; }
.hr-lv b { font-family: var(--font-cond); font-weight: 800; font-size: 3rem; line-height: .9; color: var(--white); }
.hr-lv span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vapor); }
.hr-badge { position: absolute; z-index: 1; top: .9rem; left: .9rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .65rem; border-radius: 3px; background: rgba(8,12,20,.82); border: 1px solid rgba(0,207,255,.5); color: var(--cyan); }
.hr-body { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem 1.6rem 1.7rem; flex: 1; }
.hr-body h3 { margin: 0; font-family: var(--font-cond); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: .02em; text-transform: uppercase; color: var(--white); line-height: 1; }
.hr-body p { margin: 0; color: var(--vapor); font-size: .98rem; }
.hr-rail { display: flex; gap: 4px; margin-top: .2rem; }
.hr-rail i { flex: 1; height: 6px; border-radius: 2px; background: rgba(60,90,140,.35); }
.hr-rail i:nth-child(-n+4) { background: var(--blue); }
.hr-rail i:nth-child(n+5):nth-child(-n+9) { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hr-rail i:nth-child(n+10) { background: var(--cyan); box-shadow: 0 0 8px rgba(0,207,255,.5); }
.hr-go { margin-top: auto; display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.hr-go svg { width: 20px; height: 20px; transition: transform .25s; }
.hr-card:hover .hr-go svg { transform: translateX(6px); }
.hr-challenge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: 1.5rem 1.8rem; border-radius: 12px; border: 1px solid rgba(0,207,255,.35); background: linear-gradient(100deg, rgba(30,111,255,.18), rgba(0,207,255,.06)); }
.hr-trophy { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); background: rgba(0,207,255,.08); }
.hr-trophy svg { width: 30px; height: 30px; }
.hr-challenge h3 { margin: 0 0 .25rem; font-family: var(--font-cond); font-weight: 800; font-size: 1.7rem; letter-spacing: .03em; text-transform: uppercase; color: var(--white); }
.hr-challenge p { margin: 0; color: var(--vapor); }
.hr-more { white-space: nowrap; }
@media (max-width: 900px) {
  .hr-grid { grid-template-columns: 1fr; }
  .hr-challenge { grid-template-columns: 1fr; }
  .hr-more { white-space: normal; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hr-card, .hr-cover img { transition: none; } .hr-card::before { animation: none; } .hr-card:hover { transform: none; } }