/* Lobby de los retos (/retos.html): el reto abierto arriba y cómo funciona. Usa el diseño de las páginas de acceso. */
.rl{display:grid;gap:16px}
.rl .card h2{margin:0 0 10px}
.rl-pasos,.rl-lista{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.5}
.rl .sub + .sub{margin-top:8px}
.rl-ahora{margin-top:22px;display:grid;gap:12px;max-width:420px}
.rl-buscando,.rl-nada{margin:0;padding:12px 14px;border-radius:var(--r-m);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);font-size:14px}
.rl-reto{display:grid;gap:6px;padding:14px;border-radius:var(--r-m);background:#fff;color:var(--ink);overflow-wrap:anywhere}
.rl-reto b{font-size:17px;line-height:1.3}
.rl-reto p{margin:0;font-size:14px;color:var(--muted)}
.rl-reto small{color:var(--muted);font-size:12.5px}
.rl-etiqueta{justify-self:start;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--accent-soft);padding:3px 8px;border-radius:999px}
.rl-jugar{margin-top:6px;text-align:center}
.rl-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.rl-fotos figure{margin:0;display:grid;gap:6px}
.rl-fotos img{width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--line-soft);background:var(--paper)}
.rl-fotos figcaption{font-size:12.5px;color:var(--muted);text-align:center}
.rl-titulo{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.rl-reto.destacado{box-shadow:0 0 0 3px var(--accent)}
.rl-reto.cerrado .rl-etiqueta{color:var(--muted);background:var(--paper)}
.rl-recientes{display:grid;gap:10px;margin-top:10px}
.rl-recientes .rl-reto{border:1px solid var(--line-soft)}
.rl-mios{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rl-mios a{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-s);background:var(--paper);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.rl-mios small{color:var(--muted);font-size:13px}
.rl-mios .rl-premio{color:#8A6100;font-weight:600}
/* En PC la columna azul queda fija mientras se lee la información (si no, el reto en vivo quedaría abajo del todo). */
@media (min-width:900px){.rl-marca{position:sticky;top:0;height:100vh;overflow-y:auto}.rl-marca h2{margin-top:56px}}
.rl-etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.rl-tipo{color:var(--muted);background:var(--paper)}
.rl-reto .rl-aviso-cuenta{color:var(--ink)}
.rl-entrar{justify-self:center;font-size:14px;font-weight:600}