/* GENERADO por tools/fluid.py desde src/css/shell.css — no editar aquí */
/* HOTBET V2 — shell: sidebar, header, navegación inferior, menú móvil, footer. */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh;
    background: linear-gradient(90deg, var(--sidebar) var(--sidebar-w), transparent 0); }
.app__col { display: flex; flex-direction: column; min-width: 0; }
#main { flex: 1; min-width: 0; padding: calc(var(--u) * 4) var(--pad) calc(var(--u) * 32); }

/* ---------- Sidebar ---------- */
.sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--sidebar); padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 16);
    display: flex; flex-direction: column; gap: calc(var(--u) * 4); scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar__brand { display: flex; align-items: center; height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 6); margin-bottom: calc(var(--u) * 14); }
.sidebar__brand .logo-img { max-height: calc(var(--u) * 44); max-width: calc(var(--u) * 200); width: auto; }
.side-nav { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.side-link {
    position: relative; display: flex; align-items: center; gap: calc(var(--u) * 14); width: 100%;
    height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 16); border-radius: var(--r-sm);
    font-size: max(10px, calc(var(--u) * 16)); font-weight: 500; color: var(--text-2); text-align: left;
    transition: background-color .15s, color .15s;
}
.side-link .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: #BDBDBD; }
.side-link:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.side-link.is-active {
    color: var(--text); font-weight: 700;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), .22), rgba(var(--primary-rgb), .05));
}
.side-link.is-active::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: var(--side-active, var(--nav-active)); }
.side-link.is-active .ic { color: var(--side-active, var(--nav-active)); }
.side-sep { height: 1px; background: var(--line); margin: calc(var(--u) * 14) calc(var(--u) * 8); }
.join-card {
    margin-top: auto; padding: calc(var(--u) * 18); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    display: grid; grid-template-columns: calc(var(--u) * 48) 1fr; column-gap: calc(var(--u) * 12); align-items: center;
}
.join-card__mark { grid-row: span 2; color: var(--primary); width: calc(var(--u) * 44); }
.join-card__title { font-weight: 700; font-size: max(10px, calc(var(--u) * 16)); }
.join-card__text { color: var(--muted); font-size: max(10px, calc(var(--u) * 14)); }
.join-card .btn { grid-column: 1 / -1; margin-top: calc(var(--u) * 16); }
.side-nav + .join-card, .side-sep + .join-card { margin-top: auto; }
.sidebar__collapse {
    align-self: flex-end; margin-top: calc(var(--u) * 12); width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%;
    display: grid; place-items: center; color: var(--muted); background: var(--surface);
}
.sidebar__collapse .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); transition: transform .2s; }

/* Sidebar compacta */
.sidebar-collapsed { --sidebar-w: calc(var(--u) * 84); }
.sidebar-collapsed .sidebar .side-link { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar .side-link__label, .sidebar-collapsed .join-card { display: none; }
.sidebar-collapsed .sidebar__brand { justify-content: center; padding: 0; overflow: hidden; }
.sidebar-collapsed .sidebar__brand .logo-img { max-width: calc(var(--u) * 52); object-fit: cover; object-position: left; }
.sidebar-collapsed .sidebar__collapse { align-self: center; }
.sidebar-collapsed .sidebar__collapse .ic { transform: rotate(180deg); }
.sidebar-collapsed .logo-fallback span { display: none; }

/* ---------- Logo ---------- */
.logo-img { height: auto; }
.logo-fallback { display: inline-flex; align-items: flex-end; gap: calc(var(--u) * 2); font-weight: 900; font-size: max(10px, calc(var(--u) * 30)); letter-spacing: -.03em; line-height: 1; }
.logo-fallback .flame-mark { width: calc(var(--u) * 26); height: calc(var(--u) * 30); color: var(--primary); }
.logo-skel { display: block; width: calc(var(--u) * 150); height: calc(var(--u) * 36); }

/* ---------- Header ---------- */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: calc(var(--u) * 16);
    height: var(--topbar-h); padding: 0 var(--pad);
    background: var(--header);
    background: color-mix(in srgb, var(--header) 92%, transparent);
    -webkit-backdrop-filter: blur(calc(var(--u) * 10)); backdrop-filter: blur(calc(var(--u) * 10));
}
.topbar__brand { display: none; }
.topbar__search {
    display: flex; align-items: center; gap: calc(var(--u) * 12); flex: 0 1 calc(var(--u) * 420); min-width: 0;
    height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 16); border-radius: var(--r);
    background: var(--search-bg); border: 1px solid var(--search-border);
    color: var(--muted); font-size: max(10px, calc(var(--u) * 15)); text-align: left;
}
.topbar__search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar__search:hover { border-color: rgba(255, 255, 255, .14); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 12); }
.topbar__rg { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); margin-right: calc(var(--u) * 8); color: var(--text-2); font-size: max(10px, calc(var(--u) * 13)); white-space: nowrap; }
.topbar__rg .ic { color: var(--gold); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.topbar__right .btn { height: calc(var(--u) * 44); min-width: calc(var(--u) * 150); }

.balance {
    display: grid; grid-template-columns: auto auto; column-gap: calc(var(--u) * 10); align-items: baseline;
    padding: calc(var(--u) * 6) calc(var(--u) * 14); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
    line-height: 1.2;
}
.balance__cur { font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); font-weight: 700; }
.balance__amount { font-weight: 800; font-size: max(10px, calc(var(--u) * 16)); font-variant-numeric: tabular-nums; }
.balance__bono { grid-column: 1 / -1; font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); }
.balance__bono b { color: var(--primary); font-weight: 700; }
.account { position: relative; }
.avatar {
    width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; display: grid; place-items: center;
    border: calc(var(--u) * 2) solid var(--primary); font-weight: 800; font-size: max(10px, calc(var(--u) * 14)); background: var(--surface);
}
.account__menu {
    position: absolute; right: 0; top: calc(100% + calc(var(--u) * 10)); min-width: calc(var(--u) * 220); padding: calc(var(--u) * 12);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0, 0, 0, .45); z-index: 40;
}
.account__name { font-weight: 700; }
.account__user { color: var(--muted); font-size: max(10px, calc(var(--u) * 13)); margin-bottom: calc(var(--u) * 8); }
.account__item { display: flex; align-items: center; gap: calc(var(--u) * 10); width: 100%; padding: calc(var(--u) * 10); border-radius: var(--r-sm); color: var(--text-2); }
.account__item:hover { background: rgba(255, 255, 255, .05); color: var(--text); }

/* ---------- Footer ---------- */
.footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 14) calc(var(--u) * 28);
    padding: calc(var(--u) * 18) var(--pad); background: var(--footer); color: var(--muted); font-size: max(10px, calc(var(--u) * 13));
    border-top: 1px solid var(--line);
}
.footer__brand { display: flex; align-items: center; gap: calc(var(--u) * 16); }
.footer__brand .logo-img { max-height: calc(var(--u) * 28); width: auto; }
.footer__brand .logo-fallback { font-size: max(10px, calc(var(--u) * 22)); }
.footer__claim { color: var(--text-2); }
.footer__rg { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); }
.badge-18 { display: inline-grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; border: calc(var(--u) * 1.5) solid currentColor; font-size: max(10px, calc(var(--u) * 11)); font-weight: 800; }
.footer__cert { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.footer__cert img { height: calc(var(--u) * 32); width: auto; }
.footer__link:hover { color: var(--text); }
.footer__social { display: flex; gap: calc(var(--u) * 4); }
.footer__copy { margin-left: auto; }

/* ---------- Navegación inferior + menú móvil ---------- */
.tabbar { display: none; }
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__panel {
    position: absolute; inset: 0 auto 0 0; width: min(72vw, calc(var(--u) * 248));
    padding: calc(calc(var(--u) * 12) + var(--safe-top)) calc(var(--u) * 10) calc(calc(var(--u) * 16) + var(--safe-bottom));
    background: var(--sidebar); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .22s var(--ease);
    display: flex; flex-direction: column; gap: 0;
}
.drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .22s; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { z-index: 1; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin: 0 calc(var(--u) * 4) calc(var(--u) * 12); }
.drawer__brand .logo-img { max-height: calc(var(--u) * 30); width: auto; }
.drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.drawer__auth .btn { padding: 0 calc(var(--u) * 10); }
.drawer .balance { margin-bottom: calc(var(--u) * 10); grid-template-columns: 1fr; }

/* ---------- Responsive ---------- */
@media (max-width: 1365px) {
    .topbar__rg { display: none; }
}
@media (max-width: 1199px) {
    :root { --sidebar-w: calc(var(--u) * 84); }
    .sidebar .side-link { justify-content: center; padding: 0; }
    .sidebar .side-link__label, .join-card, .sidebar__collapse { display: none; }
    .sidebar__brand { justify-content: center; padding: 0; overflow: hidden; }
    .sidebar__brand .logo-img { max-width: calc(var(--u) * 52); object-fit: cover; object-position: left; }
    .sidebar .logo-fallback span { display: none; }
}
@media (max-width: 991px) {
    :root { --pad: calc(var(--u) * 14); --topbar-h: calc(var(--u) * 60); }
    .app { grid-template-columns: minmax(0, 1fr); background: none; }
    .sidebar { display: none; }
    .topbar { gap: calc(var(--u) * 10); padding-top: var(--safe-top); height: calc(var(--topbar-h) + var(--safe-top)); background: var(--header); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .topbar__brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
    .topbar__brand .logo-img { max-height: calc(var(--u) * 34); max-width: calc(var(--u) * 132); width: auto; }
    .topbar__brand .logo-fallback { font-size: max(10px, calc(var(--u) * 24)); }
    .topbar__search { order: 2; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0; justify-content: center; border-radius: 50%; background: transparent; border: 0; color: var(--text-2); }
    .topbar__search span { display: none; }
    .topbar__right { order: 3; margin-left: 0; gap: calc(var(--u) * 8); }
    .topbar__search { margin-left: auto; }
    .topbar__right .btn { min-width: 0; height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 13)); }
    .balance--compact { grid-template-columns: auto; padding: calc(var(--u) * 4) calc(var(--u) * 12); line-height: 1.15; }
    .balance--compact .balance__amount { white-space: nowrap; }
    .balance--compact .balance__amount { font-size: max(10px, calc(var(--u) * 14)); }
    .balance--compact .balance__bono { font-size: max(10px, calc(var(--u) * 11)); }
    .avatar { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
    #main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + calc(var(--u) * 24)); }
    .footer { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + calc(var(--u) * 18)); flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 12); }
    .footer__copy { margin-left: 0; }

    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
        background: var(--bottom-nav); border-top: 1px solid var(--nav-line, var(--line));
    }
    .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); min-width: 0; color: var(--nav-muted, var(--muted)); font-size: max(10px, calc(var(--u) * 11)); font-weight: 500; }
    .tab .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); padding: calc(var(--u) * 3) calc(var(--u) * 14); box-sizing: content-box; border-radius: calc(var(--u) * 14); transition: background-color .2s; }
    .tab__label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 calc(var(--u) * 2); }
    .tab.is-active { color: var(--nav-active); font-weight: 800; }
    .tab.is-active .ic { background: var(--nav-pill); }
}

/* Con el teclado del teléfono abierto, el menú inferior y la barra del boleto
 * se ocultan (en iPhone subían y quedaban flotando sobre el contenido). */
@media (max-width: 991px) {
    html.kb-open .tabbar, html.kb-open .bs-bar, html.kb-open .inst-bar { display: none !important; }
}

/* ===== Menú móvil al estilo 1win (V2.15.1) ===== */
.ic--f { fill: currentColor; stroke: none; }
.drawer__panel { padding-top: calc(calc(var(--u) * 10) + var(--safe-top)); }
/* Sesión: avatar + texto + flecha, sin caja */
.dlogin { display: flex; align-items: center; gap: calc(var(--u) * 12); width: 100%; height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 6); border: 0; background: none; color: var(--text); text-align: left; font-size: max(10px, calc(var(--u) * 17)); font-weight: 400; }
.dlogin__av { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.dlogin__av .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.dlogin__t { flex: 1; }
.dlogin > .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--muted); }
.dacc { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 2); }
/* Divisor fino con poco margen */
.dsep { height: 1px; margin: calc(var(--u) * 6) calc(var(--u) * 8); background: var(--line); flex: none; }
/* Ítems: 34 px, Inter 400, íconos grises en contenedor fijo */
.dnav { display: flex; flex-direction: column; }
.dlink { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 8); border: 0; border-radius: calc(var(--u) * 10); background: none;
    color: var(--text); font-size: max(10px, calc(var(--u) * 15)); font-weight: 400; text-align: left; white-space: nowrap; }
.dlink__ico { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: none; display: grid; place-items: center; color: var(--muted); }
.dlink__ico .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.dlink__ico .ic--img { object-fit: contain; }
.dlink__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dlink:active { background: var(--surface-2); }
.dlink.is-active { background: rgba(var(--primary-rgb), .12); }
.dlink.is-active .dlink__ico { color: var(--side-active, var(--primary)); }
/* Bloque inferior: instalar la app (especial) y tema */
.dfoot { margin-top: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding-top: calc(var(--u) * 12); }
.dapp { display: flex; align-items: center; gap: calc(var(--u) * 12); width: 100%; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 14); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; }
.dapp__ic { width: calc(var(--u) * 40); height: calc(var(--u) * 40); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 12); background: var(--primary); color: var(--on-primary); }
.dapp__ic .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.dapp__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.dapp__t b { font-size: max(10px, calc(var(--u) * 14)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dapp__t small { font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); line-height: 1.3; }
.dapp > .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--muted); }
.dtools { display: flex; gap: calc(var(--u) * 6); }
.dtool { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: max(10px, calc(var(--u) * 13)); font-weight: 400; }
.dtool .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--muted); }
/* Cerrar: fuera del panel, sobre el fondo oscuro */
.drawer__x { position: absolute; z-index: 2; top: calc(calc(var(--u) * 14) + var(--safe-top)); right: calc(var(--u) * 14); width: calc(var(--u) * 40); height: calc(var(--u) * 40); display: grid; place-items: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; opacity: 0; transition: opacity .2s; }
.drawer.is-open .drawer__x { opacity: 1; }
.drawer__x .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }

/* Tarjeta de bonos bajo la sesión (como "Free money" de 1win) */
.dpromo { position: relative; display: flex; align-items: center; height: calc(var(--u) * 50); margin: calc(var(--u) * 4) 0 calc(var(--u) * 4); padding: 0 calc(var(--u) * 12); overflow: hidden; border-radius: calc(var(--u) * 14);
    background: linear-gradient(100deg, rgba(var(--primary-rgb), .30), rgba(var(--primary-rgb), .10) 70%), var(--surface-2); border: 1px solid rgba(255, 255, 255, .06); color: var(--text); }
.dpromo__t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.dpromo__t b { font-size: max(10px, calc(var(--u) * 13)); font-weight: 600; line-height: 1.15; }
.dpromo__t small { font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); line-height: 1.15; }
.dpromo__art { position: absolute; right: calc(var(--u) * 8); top: 50%; transform: translateY(-50%) rotate(-10deg); color: rgba(255, 255, 255, .95); filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0, 0, 0, .3)); }
.dpromo__art .ic { width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: var(--primary); }
/* Grupos que se despliegan (Casino, Deportes) */
.dgrp__btn { width: 100%; }
.dgrp__btn > .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.dgrp.is-open .dgrp__btn > .ic { transform: rotate(180deg); }
.dgrp__list { display: none; flex-direction: column; padding: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
.dgrp.is-open .dgrp__list { display: flex; }
.dsub { display: flex; align-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 44); border-radius: calc(var(--u) * 10); color: var(--muted); font-size: max(10px, calc(var(--u) * 14)); font-weight: 400; }
.dsub.is-active { color: var(--text); }
.dsub:active { background: var(--surface-2); }
/* Marca de la app en el bloque de instalación */
.dapp__ic .flame-mark { width: calc(var(--u) * 22); height: calc(var(--u) * 24); }
.dapp__ic { background: #111; border: 1px solid rgba(255, 255, 255, .12); }
/* Fila de redes, tema e idioma */
.dtools { position: relative; align-items: center; }
.dtool--sq { flex: none; width: calc(var(--u) * 32); height: calc(var(--u) * 36); padding: 0; justify-content: center; border-radius: calc(var(--u) * 10); }
.dtool--sq .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--text); }
.dtool--lang { margin-left: auto; flex: none; height: calc(var(--u) * 36); gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 13)); font-weight: 500; color: var(--text); }
.dtool--lang > .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.dflag { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; border-radius: 50%; background: #999; }
.dflag--es { background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); }
.dlang { position: absolute; right: 0; bottom: calc(var(--u) * 46); z-index: 3; min-width: calc(var(--u) * 150); padding: calc(var(--u) * 6); border-radius: calc(var(--u) * 12); background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .4); }
.dlang__item { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 14)); color: var(--text); }
.dlang__item .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin-left: auto; color: var(--primary); }
/* Soporte al pie, como 1win */
.dsep--full { margin: calc(var(--u) * 8) calc(var(--u) * -10); }
.dsupport { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 6); color: var(--text); font-size: max(10px, calc(var(--u) * 15)); font-weight: 400; }
.dsupport__ic { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 12); background: var(--surface); color: var(--text); }
.dsupport__ic .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.dsupport > span:nth-child(2) { flex: 1; }
.dsupport b { padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 999); background: var(--primary); color: var(--on-primary); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; }

/* Contadores (como 1win) */
.dbadge { margin-left: auto; min-width: calc(var(--u) * 22); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 7); display: grid; place-items: center; border-radius: calc(var(--u) * 999); background: var(--primary); color: var(--on-primary); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; }
.dlink { width: 100%; }

/* "⋮": resto de redes del backend */
.dpop { position: absolute; left: 0; bottom: calc(var(--u) * 46); z-index: 3; min-width: calc(var(--u) * 170); padding: calc(var(--u) * 6); border-radius: calc(var(--u) * 12); background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .4); }
.dpop[hidden] { display: none; }
.dpop__item { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 8); color: var(--text); font-size: max(10px, calc(var(--u) * 14)); }
.dpop__item .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.dpop__item:active { background: var(--surface-3); }
.dpop__sep { height: 1px; margin: calc(var(--u) * 4) calc(var(--u) * 6); background: var(--line); }
button.dpop__item { width: 100%; border: 0; background: none; text-align: left; }

/* ===== Menú móvil: medidas de la referencia de 1win (escala 390 px) ===== */
.drawer__panel { width: min(72vw, calc(var(--u) * 248)); padding: calc(calc(var(--u) * 8) + var(--safe-top)) calc(var(--u) * 14) calc(calc(var(--u) * 10) + var(--safe-bottom)); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.dmenu .dlogin { height: calc(var(--u) * 56); padding: 0; gap: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 17)); }
.dmenu .dlogin__av { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.dmenu .dpromo { height: calc(var(--u) * 48); margin: calc(var(--u) * 2) 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 13); }
.dmenu .dsep { margin: calc(var(--u) * 6) 0; }
.dmenu .dsep--full { margin: calc(var(--u) * 6) calc(var(--u) * -14); }
/* La lista hace scroll y se desvanece abajo; el pie queda fijo */
.dmenu .dscroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(var(--u) * -14); padding: calc(var(--u) * 4) calc(var(--u) * 14) calc(var(--u) * 16); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - calc(var(--u) * 30)), transparent); mask-image: linear-gradient(#000 calc(100% - calc(var(--u) * 30)), transparent); }
.dmenu .dscroll::-webkit-scrollbar { display: none; }
.dmenu .dlink { height: calc(var(--u) * 35); padding: 0 calc(var(--u) * 6); gap: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 15)); }
.dmenu .dlink__ico { width: calc(var(--u) * 24); }
.dmenu .dlink__ico .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.dmenu .dsub { padding-left: calc(var(--u) * 38); height: calc(var(--u) * 32); }
.dmenu .dfoot { margin-top: 0; padding-top: calc(var(--u) * 6); gap: calc(var(--u) * 8); }
.dmenu .dapp { padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 13); background: var(--surface-2); border: 0; }
.dmenu .dapp__ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 11); }
.dmenu .dapp__t b { font-size: max(10px, calc(var(--u) * 14)); }
.dmenu .dapp__t small { font-size: max(10px, calc(var(--u) * 12.5)); }
.dmenu .dtools { gap: calc(var(--u) * 6); }
.dmenu .dtool { background: var(--surface-2); border: 0; }
.dmenu .dtool--sq { width: calc(var(--u) * 31); height: calc(var(--u) * 31); border-radius: calc(var(--u) * 8); }
.dmenu .dtool--sq .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.dmenu .dtool--lang { height: calc(var(--u) * 31); border-radius: calc(var(--u) * 9); padding: 0 calc(var(--u) * 8); }
.dmenu .dsupport { height: calc(var(--u) * 40); padding: 0; }
.dmenu .dsupport__ic { width: calc(var(--u) * 31); height: calc(var(--u) * 31); border-radius: calc(var(--u) * 9); background: var(--surface-2); }
.dmenu .dsupport__ic .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.drawer__x { width: calc(var(--u) * 30); height: calc(var(--u) * 30); top: calc(calc(var(--u) * 14) + var(--safe-top)); right: calc(var(--u) * 14); }
.drawer__x .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.dmenu .dlink { font-size: max(10px, calc(var(--u) * 14)); }
.dmenu .dlogin { font-size: max(10px, calc(var(--u) * 15.5)); }
.dmenu .dsub { font-size: max(10px, calc(var(--u) * 13.5)); }
.dmenu .dsupport { font-size: max(10px, calc(var(--u) * 14.5)); }
/* Con sesión: saldo y botones compactos, con aire hasta la tarjeta Bonos */
.dmenu .dacc { gap: calc(var(--u) * 8); padding: calc(var(--u) * 2) 0 0; }
.dmenu .dacc .balance { min-height: 0; padding: calc(var(--u) * 7) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); }
.dmenu .dacc .drawer__auth { margin: 0; gap: calc(var(--u) * 8); }
.dmenu .dacc .drawer__auth .btn { height: calc(var(--u) * 38); min-height: 0; font-size: max(10px, calc(var(--u) * 14)); border-radius: calc(var(--u) * 11); }
.dmenu .dacc + .dpromo { margin-top: calc(var(--u) * 10); }
/* Menú móvil: Inter 400 en todo el menú, sin excepciones */
.dmenu, .dmenu * { font-weight: 400 !important; }
/* Tarjeta Bonos del menú: metálica, como la de 1win */
.dmenu .dpromo, .sidebar .dpromo {
    position: relative; border: 1px solid rgba(255, 255, 255, .22); color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 48%, rgba(0, 0, 0, .06) 100%),
        linear-gradient(100deg, #3E4E45 0%, #5E6E63 38%, #93A096 72%, #BFC8BD 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0, 0, 0, .28);
}
.dmenu .dpromo__t small, .sidebar .dpromo__t small { color: rgba(255, 255, 255, .82); }
.dmenu .dpromo__art .ic, .sidebar .dpromo__art .ic { color: #F4F6F2; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0, 0, 0, .35)); }

/* ================= PC (≥ 992 px): igual a la referencia de 1win =================
 * Solo computadora: en teléfono y tablet no cambia nada. */
.hseg, .hcta, .sidebar__toggle { display: none; }
@media (min-width: 992px) {
    /* Menú lateral de arriba abajo; el logo va arriba del contenido */
    .sidebar__brand, .sidebar__collapse, .sidebar .join-card { display: none; }
    .topbar__back { display: none; }
    .topbar { gap: calc(var(--u) * 14); }
    .topbar__brand { display: flex; align-items: center; flex: none; margin-right: calc(var(--u) * 14); }
    .topbar__brand .logo-img { max-height: calc(var(--u) * 38); width: auto; }
    /* Pestañas con ícono y texto */
    .hseg { display: flex; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 14); background: var(--surface); flex: none; }
    .hseg__tab { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 10); color: var(--text); font-size: max(10px, calc(var(--u) * 15)); font-weight: 500; }
    .hseg__tab .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--muted); }
    .hseg__tab:hover { background: var(--surface-2); }
    .hseg__tab.is-on { background: var(--primary); color: var(--on-primary); }
    .hseg__tab.is-on .ic { color: var(--on-primary); }
    /* Derecha: lupa redonda; el tema pasa al "⋮" del menú */
    .topbar__search { margin-left: auto; flex: none; width: calc(var(--u) * 46); min-width: 0; height: calc(var(--u) * 46); padding: 0; border-radius: 50%; justify-content: center; }
    .topbar__search > span, .topbar__search kbd { display: none; }
    .topbar__right { margin-left: 0; }
    .topbar__rg, .topbar__theme { display: none; }
    .topbar .btn--primary { background: linear-gradient(180deg, #1FD16A, #12A950); border-color: transparent; color: #fff; }
    /* Botón « para contraer el menú, en el borde */
    .sidebar__toggle { position: fixed; z-index: 70; top: calc(var(--u) * 118); left: calc(var(--sidebar-w) - calc(var(--u) * 17)); width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center;
        border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
    .sidebar__toggle .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
    .sidebar-collapsed .sidebar__toggle .ic { transform: rotate(180deg); }
    .sidebar .dpromo__art img { width: calc(var(--u) * 50); height: auto; display: block; transform: rotate(-8deg); }
    /* Banner a la izquierda y dos tarjetas horizontales apiladas a la derecha */
    .hero:has(.hcta) { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: calc(var(--u) * 14); align-items: stretch; }
    .hero:has(.hcta) .hero__main { grid-row: 1 / span 2; }
    .hero:has(.hcta) .hero__side, .hero:has(.hcta) .bshort { display: none; }
    .hcta { position: relative; display: flex; align-items: flex-start; min-height: 0; padding: calc(var(--u) * 20) calc(var(--u) * 22); border-radius: calc(var(--u) * 18); overflow: hidden; color: #fff;
        border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0, 0, 0, .28); }
    .hcta__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
    .hcta__txt b { font-size: max(10px, calc(var(--u) * 17)); font-weight: 600; }
    .hcta__txt small { font-size: max(10px, calc(var(--u) * 14)); line-height: 1.35; color: rgba(255, 255, 255, .82); }
    /* Metales tomados de 1win: champaña (Free money) y acero azulado (Bonos) */
    .hcta--code { background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(100deg, #CEB395 0%, #BCA286 30%, #AA9277 60%, #89735D 100%); }
    .hcta--bonus { background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(165deg, #354352 0%, #4C6278 40%, #687F96 75%, #8A9CAD 100%); }
    .hcta__art { position: absolute; right: calc(var(--u) * 10); bottom: calc(var(--u) * 4); width: 40%; }
    .hcta__art--coupon { bottom: calc(var(--u) * 10); width: 44%; }
    .hcta__art img { display: block; width: 100%; height: auto; }
    .hcta:hover { filter: brightness(1.05); }
    .hero__nav { opacity: 1; }
    /* Sin la fila de accesos (ya están en las pestañas) */
    [data-slot="quick"] { display: none; }
    /* Filas: "Ver todos" en lugar de flechas cuando hay destino; tarjetas algo más altas */
    .row__tools:has(.row__more) .arrow { display: none; }
    .row:not(.row--wide):not(.row--top) .rail .game__media { aspect-ratio: 9 / 10; }
    /* Menú contraído: solo íconos */
    .sidebar-collapsed .sidebar.dmenu { padding-left: calc(var(--u) * 10); padding-right: calc(var(--u) * 10); }
    .sidebar-collapsed .sidebar .dlink, .sidebar-collapsed .sidebar .dlogin { justify-content: center; padding: 0; }
    .sidebar-collapsed .sidebar .dlink__label, .sidebar-collapsed .sidebar .dgrp__btn > .ic, .sidebar-collapsed .sidebar .dgrp__list,
    .sidebar-collapsed .sidebar .dbadge, .sidebar-collapsed .sidebar .dlogin__t, .sidebar-collapsed .sidebar .dlogin > .ic,
    .sidebar-collapsed .sidebar .dpromo__t, .sidebar-collapsed .sidebar .dapp__t, .sidebar-collapsed .sidebar .dapp > .ic,
    .sidebar-collapsed .sidebar .dtools, .sidebar-collapsed .sidebar .dsupport > span:nth-child(2), .sidebar-collapsed .sidebar .dsupport b { display: none; }
    .sidebar-collapsed .sidebar .dpromo { justify-content: center; padding: 0; }
    .sidebar-collapsed .sidebar .dpromo__art { position: static; transform: none; }
    .sidebar-collapsed .sidebar .dapp { justify-content: center; padding: calc(var(--u) * 8); }
    .sidebar-collapsed .sidebar .dsupport { justify-content: center; }
    .sidebar-collapsed .sidebar .dsep--full { margin-left: calc(var(--u) * -10); margin-right: calc(var(--u) * -10); }
}

/* PC: el menú lateral usa el mismo diseño que el del teléfono (.dmenu) */
@media (min-width: 992px) {
    .sidebar.dmenu { gap: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12); overflow: hidden; display: flex; flex-direction: column; }
    .sidebar.dmenu .dsep--full { margin: calc(var(--u) * 6) calc(var(--u) * -14); }
}

/* PC: el menú lateral usa el mismo diseño que el del teléfono (.dmenu) */
@media (min-width: 992px) {
    .sidebar.dmenu { gap: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10); overflow: hidden; display: flex; flex-direction: column; }
}

/* PC: menú lateral con íconos y texto más grandes (el del teléfono no cambia) */
@media (min-width: 992px) {
    .sidebar.dmenu .dlink { height: calc(var(--u) * 40); font-size: max(10px, calc(var(--u) * 15)); gap: calc(var(--u) * 12); }
    .sidebar.dmenu .dlink__ico { width: calc(var(--u) * 28); }
    .sidebar.dmenu .dlink__ico .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
    .sidebar.dmenu .dsub { height: calc(var(--u) * 36); font-size: max(10px, calc(var(--u) * 14.5)); padding-left: calc(var(--u) * 48); }
    .sidebar.dmenu .dlogin { font-size: max(10px, calc(var(--u) * 16)); }
    .sidebar.dmenu .dlogin__av { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
    .sidebar.dmenu .dlogin__av .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
    .sidebar.dmenu .dtool--sq { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
    .sidebar.dmenu .dtool--sq .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
    .sidebar.dmenu .dsupport { font-size: max(10px, calc(var(--u) * 15)); }
    .sidebar.dmenu .dsupport__ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
    .sidebar.dmenu .dsupport__ic .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
    .sidebar.dmenu .dbadge { min-width: calc(var(--u) * 24); height: calc(var(--u) * 22); font-size: max(10px, calc(var(--u) * 12.5)); }
}

/* PC: pestañas del encabezado; sin espacio quedan solo con ícono */
@media (min-width: 992px) {
    .hseg__tab { white-space: nowrap; }
    .topbar__right, .topbar__brand { flex: none; }
    .hseg.is-compact .hseg__tab { padding: 0 calc(var(--u) * 12); }
    .hseg.is-compact .hseg__tab span { display: none; }
    .hseg.is-compact .hseg__tab .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
}

/* PC: tarjetas del banner que mantienen la proporción de sus ilustraciones */
@media (min-width: 992px) {
    .hcta__art { position: absolute; right: calc(var(--u) * 12); bottom: calc(var(--u) * 8); top: auto; left: auto; width: auto; height: 78%; max-width: 48%; display: flex; align-items: flex-end; justify-content: flex-end; }
    .hcta__art--coupon { height: 70%; bottom: calc(var(--u) * 12); width: auto; }
    .hcta__art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
    /* Banner bajo: tarjetas lado a lado, verticales, ilustración centrada abajo (como 1win) */
    .hero.hero--row:has(.hcta) { grid-template-columns: minmax(0, 2.3fr) minmax(0, .66fr) minmax(0, .66fr); grid-template-rows: 1fr; }
    .hero.hero--row:has(.hcta) .hero__main { grid-row: auto; }
    .hero--row .hcta { flex-direction: column; padding: calc(var(--u) * 16); }
    .hero--row .hcta__txt b { font-size: max(10px, calc(var(--u) * 16)); }
    .hero--row .hcta__txt small { font-size: max(10px, calc(var(--u) * 13)); }
    .hero--row .hcta__art { left: 50%; right: auto; bottom: calc(var(--u) * 10); height: 46%; max-width: 86%; justify-content: center; transform: translateX(-50%); }
    .hero--row .hcta__art--coupon { height: 40%; bottom: calc(var(--u) * 14); }
}
@media (min-width: 992px) { .topbar.is-tight .topbar__search { display: none; } }
@media (min-width: 992px) and (max-width: 1100px) { .topbar.topbar--auth .topbar__search { display: none; } }
@media (min-width: 992px) { .hseg.is-compact { gap: calc(var(--u) * 2); } .hseg.is-compact .hseg__tab { padding: 0 calc(var(--u) * 10); } }

/* ===== PC: pestañas del encabezado con las medidas de 1win ===== */
@media (min-width: 992px) {
    .topbar__brand { margin-right: calc(var(--u) * 4); }
    .hseg { gap: 0; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 12); }
    .hseg__tab { position: relative; height: calc(var(--u) * 37); padding: 0 calc(var(--u) * 14); gap: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 14)); font-weight: 600; border-radius: calc(var(--u) * 9); }
    .hseg__tab .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
    /* líneas divisorias finas entre pestañas (no junto a la activa) */
    .hseg__tab + .hseg__tab::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: 1px; background: var(--line); }
    .hseg__tab.is-on::before, .hseg__tab.is-on + .hseg__tab::before { display: none; }
    .hseg.is-compact .hseg__tab { padding: 0 calc(var(--u) * 11); }
}

/* ===== PC: banner principal con la proporción exacta de 1win =====
 * 1win (1920 px): banner 1045 × 396 (2,64 : 1). desktop-small (1024–1439): banner 57,52 %
 * y tarjetas lado a lado; desktop-medium (≥ 1440): banner 67 % y tarjetas apiladas. */
@media (min-width: 1024px) {
    .hero:has(.hcta) { gap: calc(var(--u) * 16); }
    .hero:has(.hcta) .hero__main { aspect-ratio: 1045 / 396 !important; }
    .hero.hero--row:has(.hcta) { grid-template-columns: 57.52% minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
}
@media (min-width: 1440px) {
    .hero:has(.hcta) { grid-template-columns: 67% minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
    .hero:has(.hcta) .hero__main { grid-row: 1 / span 2; }
}

/* ===== PC: márgenes, encabezado y banner con las medidas exactas de 1win (1920 px) =====
 * Encabezado 67 px con márgenes de 48 px; contenido a 48 px de cada lado y el banner
 * 24 px bajo el encabezado; banner 1036 × 396 (2,616 : 1) al 67 %; tarjetas de 494 px. */
@media (min-width: 1024px) {
    .topbar { height: calc(var(--u) * 67); padding-left: calc(var(--u) * 48); padding-right: calc(var(--u) * 48); }
    #main { padding-top: calc(var(--u) * 24); padding-left: calc(var(--u) * 48); padding-right: calc(var(--u) * 48); }
    .hero:has(.hcta) .hero__main { aspect-ratio: 1036 / 396 !important; }
}

/* ===== PC por debajo de 1440 px (desktop-small de 1win) ===== */
@media (min-width: 992px) {
    .sidebar-collapsed { --sidebar-w: calc(var(--u) * 64); }
    .sidebar-collapsed .sidebar.dmenu { padding-left: calc(var(--u) * 8); padding-right: calc(var(--u) * 8); }
    .sidebar-collapsed .sidebar .dpromo__art img { width: calc(var(--u) * 34); }
    .sidebar-collapsed .sidebar .dsep--full { margin-left: calc(var(--u) * -8); margin-right: calc(var(--u) * -8); }
}
@media (min-width: 1024px) {
    /* Banner siempre al 67 % (como 1win); por debajo de 1440 px las tarjetas van lado a lado */
    .hero.hero--row:has(.hcta) { grid-template-columns: 67% minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 12); }
}
@media (min-width: 1024px) {
    /* Tarjetas lado a lado: ilustración grande en la mitad inferior (como el auto y el regalo de 1win) */
    .hero--row .hcta__art { width: 84%; height: auto; max-width: none; bottom: calc(var(--u) * 8); }
    .hero--row .hcta__art--coupon { width: 80%; bottom: calc(var(--u) * 18); }
    .hero--row .hcta__art img { width: 100%; height: auto; max-height: none; }
}

/* Saldo del encabezado: real arriba y "Bono" abajo (siempre visible) */
.balance.balance--rb { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: calc(var(--u) * 44); padding: calc(var(--u) * 5) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.balance--rb .balance__real { display: flex; align-items: center; gap: calc(var(--u) * 6); white-space: nowrap; }
.balance--rb .balance__cur { font-style: normal; font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; color: var(--muted); }
.balance--rb .balance__amount { font-size: max(10px, calc(var(--u) * 15)); font-weight: 800; }
.balance--rb .balance__bono { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: max(10px, calc(var(--u) * 12)); color: var(--muted); white-space: nowrap; }
.balance--rb .balance__bono b { color: var(--primary); font-weight: 700; }
.balance--rb .balance__gift { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--primary); flex: none; }
@media (max-width: 991px) {
    .balance.balance--rb { padding: calc(var(--u) * 4) calc(var(--u) * 9); }
    .balance--rb .balance__amount { font-size: max(10px, calc(var(--u) * 13)); }
    .balance--rb .balance__bono { font-size: max(10px, calc(var(--u) * 11)); }
}

/* ===== Soporte en el pie (solo teléfono, versión gris: combina con cualquier tema) ===== */
.supm { display: none; }
@media (max-width: 767px) {
    .supm { position: relative; overflow: hidden; margin: 0 0 calc(var(--u) * 20); border-radius: calc(var(--u) * 18); min-height: calc(var(--u) * 168); padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 14);
        background: linear-gradient(135deg, #23262c 0%, #16181c 100%); border: 1px solid rgba(255, 255, 255, .22);
        box-shadow: 0 0 calc(var(--u) * 26) rgba(255, 255, 255, .06), inset 0 0 calc(var(--u) * 22) rgba(255, 255, 255, .06); isolation: isolate; display: flex; flex-direction: column; }
    .supm__img { position: absolute; top: 0; right: 0; height: calc(100% - calc(var(--u) * 22)); max-width: 64%; object-fit: cover; object-position: right top; z-index: -1;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 58%, transparent 100%); -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 58%, transparent 100%); mask-composite: intersect; }
    .supm__hd { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 19)); font-weight: 800; color: #fff; }
    .supm__hd em { font-style: normal; font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 800; padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 9); background: linear-gradient(180deg, #5a5f69, #41454d); color: #fff; }
    .supm p { margin: calc(var(--u) * 5) 0 0; max-width: 56%; font-size: max(10px, calc(var(--u) * 13)); line-height: 1.35; color: rgba(255, 255, 255, .72); }
    .supm__btn { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 46); border-radius: calc(var(--u) * 12);
        background: linear-gradient(180deg, #5a5f69 0%, #3b3f47 100%); color: #fff; font-size: max(10px, calc(var(--u) * 15)); font-weight: 700; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .25); }
    .supm__btn:hover { color: #fff; }
    .supm__btn i { position: absolute; right: calc(var(--u) * 10); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; display: grid; place-items: center; }
    .supm__btn i .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
}