/* GENERADO por tools/fluid.py desde src/css/pro.css — no editar aquí */
/* HOTBET V2.3 — capa de acabado profesional (referencia 1win). */

/* ---------- Tarjeta de juego ---------- */
.game__media { isolation: isolate; box-shadow: 0 0 0 1px var(--line) inset; }
.game__fallback {
    position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: calc(var(--u) * 10); text-align: center;
    font-weight: 800; font-size: max(10px, calc(var(--u) * 13)); line-height: 1.15; color: rgba(255, 255, 255, .85);
    background: radial-gradient(120% 90% at 30% 10%, rgba(var(--primary-rgb), .45), transparent 60%), linear-gradient(160deg, #2a2a2a, #121212);
}
.game__media img { position: relative; z-index: 1; }
.game__media img.is-broken { display: none; }
.game__play {
    position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--u) * 46); height: calc(var(--u) * 46); margin: calc(var(--u) * -23) 0 0 calc(var(--u) * -23);
    display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--on-primary);
    box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(var(--primary-rgb), .45); opacity: 0; transform: scale(.8); transition: opacity .18s, transform .18s var(--ease);
}
.game__play svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin-left: calc(var(--u) * 2); }
.game__badge {
    position: absolute; z-index: 2; left: calc(var(--u) * 6); bottom: calc(var(--u) * 6); max-width: calc(100% - calc(var(--u) * 12)); padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: calc(var(--u) * 6);
    background: rgba(0, 0, 0, .62); color: #fff; font-size: max(10px, calc(var(--u) * 10)); font-weight: 700; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .18s;
    -webkit-backdrop-filter: blur(calc(var(--u) * 4)); backdrop-filter: blur(calc(var(--u) * 4));
}
.game__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .18s; }
@media (hover: hover) {
    .game__hit:hover .game__play, .game__hit:focus-visible .game__play { opacity: 1; transform: none; }
    .game__hit:hover .game__badge, .game__hit:hover .game__media::after { opacity: 1; }
    .game__hit:hover .game__media { box-shadow: 0 0 0 calc(var(--u) * 2) var(--primary), 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(0, 0, 0, .45); transform: translateY(calc(var(--u) * -2)); }
    .game__media { transition: transform .18s var(--ease), box-shadow .18s; }
}
.game__vendor { display: none; }
.game__title { font-weight: 600; }
@media (hover: none) { .game__badge { opacity: 1; } }

/* ---------- Accesos rápidos ---------- */
.qnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 170), 1fr)); gap: calc(var(--u) * 10); }
.qnav__item {
    display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: var(--r); text-align: left;
    background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s var(--ease);
}
.qnav__item:hover { border-color: rgba(var(--primary-rgb), .55); transform: translateY(-1px); }
.qnav__ico { width: calc(var(--u) * 40); height: calc(var(--u) * 40); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 10); background: rgba(var(--primary-rgb), .14); color: var(--primary); }
.qnav__txt { display: flex; flex-direction: column; min-width: 0; }
.qnav__txt b { font-size: max(10px, calc(var(--u) * 14)); }
.qnav__txt small { font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qnav__item--cta { background: linear-gradient(135deg, rgba(var(--primary-rgb), .22), var(--surface) 70%); border-color: rgba(var(--primary-rgb), .4); }
.qnav__item--cta .qnav__ico { background: var(--primary); color: var(--on-primary); }
@media (max-width: 991px) {
    .qnav { display: flex; gap: calc(var(--uw) * 10) ; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 calc(var(--uw) * 14) ; }
    .qnav::-webkit-scrollbar { display: none; }
.qnav { max-width: 100%; overscroll-behavior-inline: contain; }
    .qnav__item { flex: none; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); width: calc(var(--uw) * 84) ; padding: calc(var(--u) * 10) calc(var(--u) * 6); text-align: center; }
    .qnav__txt small { display: none; }
    .qnav__txt b { font-size: max(10px, calc(var(--u) * 12)); }
}

/* ---------- Encabezados de fila ---------- */
.row__title { font-size: max(10px, calc(var(--u) * 20)); font-weight: 800; letter-spacing: -.015em; }
.row__more { display: inline-flex; align-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 16); background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: max(10px, calc(var(--u) * 13)); }
.row__more:hover { border-color: rgba(var(--primary-rgb), .55); }

/* ---------- Footer ---------- */
.footer { display: block; padding: 0; border-top: 1px solid var(--line); }
.ft { max-width: calc(var(--u) * 1680); padding: calc(var(--u) * 32) var(--pad) calc(var(--u) * 24); display: flex; flex-direction: column; gap: calc(var(--u) * 24); }
.ft__top { display: grid; grid-template-columns: minmax(calc(var(--u) * 220), 1fr) 3fr; gap: calc(var(--u) * 32); }
.ft__brand { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.ft__brand .logo-img { max-height: calc(var(--u) * 36); width: auto; align-self: flex-start; }
.ft__claim { color: var(--text-2); }
.ft__social { display: flex; gap: calc(var(--u) * 6); }
.ft__social .icon-btn { background: var(--surface); }
.ft__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 150), 1fr)); gap: calc(var(--u) * 24); }
.ft__col { display: flex; flex-direction: column; gap: calc(var(--u) * 9); }
.ft__col h4 { margin: 0 0 calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 13)); font-weight: 800; color: var(--text); letter-spacing: .01em; }
.ft__col a { color: var(--muted); font-size: max(10px, calc(var(--u) * 14)); }
.ft__col a:hover { color: var(--text); }
.ft__providers { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 10) calc(var(--u) * 18); padding: calc(var(--u) * 18) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ft__prov { display: grid; place-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 6); opacity: .6; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.ft__prov:hover { opacity: 1; filter: none; }
.ft__prov img { max-height: calc(var(--u) * 26); max-width: calc(var(--u) * 96); width: auto; object-fit: contain; }
.ft__trust { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 14) calc(var(--u) * 22); color: var(--muted); font-size: max(10px, calc(var(--u) * 13)); }
.ft__logo { display: inline-grid; place-items: center; }
.ft__logo img { max-height: calc(var(--u) * 44); max-width: calc(var(--u) * 120); width: auto; }
.ft__logo--18 img { max-height: calc(var(--u) * 36); }
.ft__regs { display: inline-flex; flex-wrap: wrap; gap: calc(var(--u) * 14); align-items: center; }
.ft__cert { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); }
.ft__cert .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--ok); }
.ft__rg { flex-basis: 100%; }
.ft__legal { display: flex; flex-direction: column; gap: calc(var(--u) * 8); color: var(--muted); font-size: max(10px, calc(var(--u) * 12)); line-height: 1.55; }
.ft__msg p { margin: 0 0 calc(var(--u) * 6); max-width: 110ch; }
.ft__copy { color: var(--text-2); }
@media (max-width: 991px) {
    .ft { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + calc(var(--u) * 24)); }
    .ft__top { grid-template-columns: 1fr; gap: calc(var(--u) * 20); }
    .ft__cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Páginas legales ---------- */
.doc { max-width: calc(var(--u) * 860); padding: calc(var(--u) * 24); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.doc__title { font-size: clamp(max(10px, calc(var(--u) * 24)), 3vw, max(10px, calc(var(--u) * 34))); font-weight: 900; margin-bottom: calc(var(--u) * 14); }
.doc__body { line-height: 1.65; }
.doc__body a { color: var(--primary); text-decoration: underline; }
.doc__body table { width: 100%; border-collapse: collapse; margin: calc(var(--u) * 12) 0; }
.doc__body td, .doc__body th { padding: calc(var(--u) * 8); border: 1px solid var(--line); text-align: left; }

/* ---------- Detalles de acabado general ---------- */
.hero__main, .promo-card { box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .25); }
.pchip { transition: border-color .15s, transform .15s var(--ease); }
.pchip:hover { transform: translateY(-1px); }
.topbar__search kbd { margin-left: auto; padding: 1px calc(var(--u) * 7); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); font: 600 calc(var(--u) * 12) var(--font-body); color: var(--muted); }
@media (max-width: 991px) { .topbar__search kbd { display: none; } }

/* Ajustes: accesos rápidos en una sola fila y saldo sin cortes */
.qnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(calc(var(--u) * 150), 1fr); overflow-x: auto; scrollbar-width: none; }
.qnav::-webkit-scrollbar { display: none; }
.qnav__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balance__amount { white-space: nowrap; }
@media (max-width: 991px) { .qnav { display: flex; } }