/* Pagina de iGaming: demos jugables arriba del todo y comparativa con el blockout. Prefijos nx-play y bo-. */
.nx-play{padding-top:34px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.nx-play h1{font:500 clamp(34px,5.2vw,64px)/1.05 Manrope,Arial,sans-serif;margin:8px 0 14px;max-width:900px}
.nx-play h1 b{color:var(--accent);font-weight:500}
.nx-play .rl-intro{max-width:640px;margin:0 0 22px}
.nx-play-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.nx-play-foot .nx-chips{margin:0}
.nx-play-foot .nx-cta{margin:0}

/* Comparativa blockout / final */
.bo-lead{max-width:720px;margin:0 0 26px;font-size:17px;line-height:1.7;color:var(--muted)}
.bo-stage{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:966/540;border-radius:14px;overflow:hidden;background:#0a0c0a;border:1px solid #ffffff2e;box-shadow:0 34px 80px -28px #000d;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bo-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bo-label{position:absolute;top:14px;z-index:2;padding:7px 12px;border-radius:20px;background:#0c120dd9;border:1px solid #ffffff33;color:#fff;font:700 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:.12em;pointer-events:none}
.bo-label.l{left:14px}
.bo-label.r{right:14px;background:var(--accent);border-color:var(--accent);color:#111}
.bo-tc{position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);padding:6px 12px;border-radius:20px;background:#0c120dd9;border:1px solid #ffffff2a;color:#cfd3c8;font:600 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:.1em;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.bo-tc b{color:var(--accent);font-weight:700}
.bo-handle{position:absolute;top:0;bottom:0;z-index:3;width:44px;margin-left:-22px;cursor:ew-resize;outline:0}
.bo-handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.bo-handle i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);color:#111;display:grid;place-items:center;font:800 15px/1 Manrope,Arial,sans-serif;font-style:normal;box-shadow:0 6px 22px #000a}
.bo-handle:focus-visible i{outline:3px solid #fff;outline-offset:2px}
.bo-hint{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,40px);padding:7px 13px;border-radius:20px;background:#0c120de6;border:1px solid #ffffff33;color:#fff;font:600 12px/1 'DM Sans',Arial,sans-serif;letter-spacing:.06em;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.bo-hint.off{opacity:0}
.bo-steps{max-width:1100px;margin:26px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bo-steps li{padding:18px 18px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:14px;line-height:1.55;color:var(--muted)}
.bo-steps b{display:block;margin-bottom:6px;color:var(--text);font:600 15px/1.2 Manrope,Arial,sans-serif}
.bo-steps b::before{content:attr(data-n);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:9px;border-radius:50%;background:var(--accent);color:#111;font:800 12px/1 Manrope,Arial,sans-serif}

@media(max-width:900px){
  .nx-play-foot{flex-direction:column;align-items:flex-start}
  .bo-steps{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nx-play{padding-top:22px}
  .bo-label{top:8px;font-size:9px;padding:5px 9px}
  .bo-label.l{left:8px}.bo-label.r{right:8px}
  .bo-tc{bottom:8px;font-size:8px;letter-spacing:.05em;padding:5px 9px}
  .bo-handle i{width:36px;height:36px;margin:-18px 0 0 -18px}
  .bo-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.bo-hint{transition:none}}