/* GENERADO por tools/fluid.py desde src/css/type-1win.css — no editar aquí */
/* Tipografía y escala como 1win (Inter variable).
 * Fuente: Inter variable (100–900). Respaldo: Poppins → fuente del sistema.
 * Técnica: tokens de tamaño fijos (px) con un valor para móvil y otro para
 * escritorio, que cambian en 1024 px (ajustes finos en 768 y 1440). Sin
 * tamaños fluidos: igual que su sistema de diseño exportado de Figma. */

:root {
    --reserved-fonts: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif;
    --font-body: 'Inter', var(--reserved-fonts);
    --font-display: 'Inter', var(--reserved-fonts);

    /* Escala 1win (móvil) — tamaño / alto de línea */
    --t-caption-xs: max(10px, calc(var(--u) * 10));  --lh-caption-xs: calc(var(--u) * 14);
    --t-caption-s: max(10px, calc(var(--u) * 12));   --lh-caption-s: calc(var(--u) * 16);
    --t-body: max(10px, calc(var(--u) * 14));        --lh-body: calc(var(--u) * 20);
    --t-body-l: max(10px, calc(var(--u) * 16));      --lh-body-l: calc(var(--u) * 22);   /* display-body */
    --t-title-xs: max(10px, calc(var(--u) * 20));    --lh-title-xs: calc(var(--u) * 26);
    --t-title-s: max(10px, calc(var(--u) * 22));     --lh-title-s: calc(var(--u) * 28);
    --t-title-m: max(10px, calc(var(--u) * 28));     --lh-title-m: calc(var(--u) * 34);  /* display-m móvil */
    --t-display: max(10px, calc(var(--u) * 24));     --lh-display: calc(var(--u) * 28);  /* títulos de página (móvil) */

    /* Los tokens que ya usa el frontend apuntan a esta escala */
    --fs-xs: var(--t-caption-s);
    --fs-sm: var(--t-body);
    --fs-md: var(--t-body);
    --fs-lg: var(--t-body-l);
    --fs-xl: var(--t-title-s);
    --fs-2xl: var(--t-title-m);
    --fs-display: var(--t-display);
}
/* Tablet: títulos un paso arriba */
@media (min-width: 768px) {
    :root { --fs-lg: var(--t-title-xs); --fs-xl: max(10px, calc(var(--u) * 24)); }
}
/* Escritorio (1024 px): valores "desktop" de 1win */
@media (min-width: 1024px) {
    :root {
        --t-title-m: max(10px, calc(var(--u) * 44)); --lh-title-m: calc(var(--u) * 48);   /* display-m desktop */
        --t-display: max(10px, calc(var(--u) * 40)); --lh-display: calc(var(--u) * 44);   /* títulos de página (PC) */
        --fs-lg: var(--t-title-xs);
        --fs-xl: max(10px, calc(var(--u) * 28));
        --fs-2xl: max(10px, calc(var(--u) * 44));
    }
}
@media (min-width: 1440px) { :root { --t-body-l: max(10px, calc(var(--u) * 16)); } }

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: 0; font-optical-sizing: auto; }
h1, h2, h3, h4, .page-title, .sb-title, .row__title, .auth__title, .sheet__title, .gp__title { font-family: var(--font-display); letter-spacing: 0; }
.page-title, .sb-title { line-height: var(--lh-display); font-weight: 800; }
.row__title { line-height: var(--lh-body-l); font-weight: 700; }
@media (min-width: 1024px) { .row__title { line-height: var(--lh-title-xs); } }
/* Inter: cifras de ancho fijo en todo lo numérico (cuotas, saldos, montos) */
.odd b, .balance__amount, .money__val, .bs-odd, .bs-total b, .bs-win b, .dep-amt input, .bs-stake input, .ev__when, .evd__time, .evd__score, .tk__odd, .timer b, .count, .bell__count {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* Pesos como 1win: 400 texto, 600 etiquetas, 700–800 títulos */
.side-link, .sb-tab, .chip, .tabs__item, .btn { font-weight: 600; }
.game__title { font-size: var(--t-caption-s); line-height: var(--lh-caption-s); font-weight: 600; }
.game__vendor, .lg__head .lg__country, .ev__when small, .bs-item__top, .mkt__name small { font-size: var(--t-caption-xs); line-height: var(--lh-caption-xs); }
input, select, textarea, button { font-family: inherit; }

/* Títulos de módulo: pequeños y sin mayúsculas (la sección ya se ve en pestañas y menú).
 * Deportes no lleva título: arranca con sus pestañas. */
.sb-title { display: none; }
.page-title { font-size: max(10px, calc(var(--u) * 20)); line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; font-stretch: normal; }
.page-sub { font-size: max(10px, calc(var(--u) * 14)); margin-top: calc(var(--u) * 2); }
@media (min-width: 992px) { .sb-head .sb-bar { margin-left: 0; } }

/* Módulos: se quita el título grande; quedan la ruta ("Inicio › Slots") y el subtítulo */
.page-head .page-title { display: none; }
.page-head .crumbs { margin-bottom: calc(var(--u) * 4); }
.page-head { margin-bottom: calc(var(--u) * 12); }

/* ===== Carruseles: títulos, flechas y cards (PC y teléfono) ===== */
.row__title { flex: 1; min-width: 0; }
.row__badge { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary); }
.row__badge .row__ico { color: #fff; }
.row__title > span:last-child, .row__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__link { display: inline-flex; align-items: center; min-width: 0; color: inherit; }
.row__link:hover { color: inherit; opacity: .9; }
.row__chev { flex: none; color: var(--muted); }
.row__tools .arrow { border: 0; }
.row__tools .arrow[data-scroll="-1"] { background: var(--surface); color: var(--text-2); }
.row__tools .arrow[data-scroll="1"] { background: var(--surface-2); color: #fff; }
.row__tools .arrow.is-off { color: var(--muted); opacity: .45; cursor: default; }
:root[data-theme="light"] .row__tools .arrow[data-scroll="1"] { color: var(--text); }
/* Nombres de juego solo en el Top */
.row:not(.row--top) .rail > .game .game__meta { display: none; }
.rail > .game .game__media img { object-fit: cover; }

/* ---- PC ---- */
@media (min-width: 1024px) {
    .page--home .row { margin-top: calc(var(--u) * 40); }
    .page--home .row:first-of-type { margin-top: calc(var(--u) * 28); }
    .row__head { min-height: calc(var(--u) * 32); gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 16); }
    .row__title { gap: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 24)); font-weight: 600; letter-spacing: 0; }
    .row__badge { width: calc(var(--u) * 32); height: calc(var(--u) * 32); } .row__badge .row__ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
    .row__link { gap: calc(var(--u) * 12); } .row__chev { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
    .row__tools { gap: calc(var(--u) * 4); } .row__tools .arrow { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 8); }
    .rail:has(> .game) { --gap: calc(var(--u) * 6); gap: calc(var(--u) * 6); }
    .rail > .game .game__media { border-radius: calc(var(--u) * 12); }
    .row:not(.row--top):not(.row--wide) .rail > .game .game__media { aspect-ratio: 0.73; }
    .row--wide .rail:has(> .game) { --cols: 4; } .row--wide .rail > .game .game__media { aspect-ratio: 16 / 9; }
    .row--top .rail:has(> .game) { --cols: 5; }
    /* Pestaña del proveedor arriba al centro */
    .rail > .game .game__badge { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); max-width: 90%; opacity: 1; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 0 0 calc(var(--u) * 8) calc(var(--u) * 8);
        background: rgba(18, 22, 28, .85); color: #e6e9ed; font-size: max(10px, calc(var(--u) * 10)); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---- Teléfono y tablet ---- */
@media (max-width: 1023px) {
    .page--home .row { margin-top: calc(var(--u) * 28); }
    .page--home .row:first-of-type { margin-top: calc(var(--u) * 20); }
    .row__head { min-height: calc(var(--u) * 28); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 12); }
    .row__title { gap: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 18)); font-weight: 700; }
    .row__badge { width: calc(var(--u) * 24); height: calc(var(--u) * 24); } .row__badge .row__ico { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
    .row__link { gap: calc(var(--u) * 6); } .row__chev { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
    .row__tools { display: flex; gap: calc(var(--u) * 4); } .row__tools .arrow { display: grid; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 8); }
    .rail:has(> .game) { --gap: calc(var(--u) * 7); gap: calc(var(--u) * 7); margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
    .row:not(.row--top):not(.row--wide) .rail:has(> .game) { --cols: 3.3; }
    .row:not(.row--top):not(.row--wide) .rail > .game .game__media { aspect-ratio: 0.71; }
    .row--wide .rail:has(> .game) { --cols: 2.2; } .row--wide .rail > .game .game__media { aspect-ratio: 16 / 9; }
    .row--top .rail:has(> .game) { --cols: 2.4; }
    .rail > .game .game__badge { opacity: 1; }
    /* Accesos rápidos: chips (propuesta A) */
    .page--home .qnav { display: flex; gap: calc(var(--u) * 6); overflow-x: auto; scrollbar-width: none; grid-template-columns: none; margin-top: calc(var(--u) * 14); }
    .page--home .qnav::-webkit-scrollbar { display: none; }
    .page--home .qnav .qnav__item { flex: 0 0 auto; width: auto; min-width: calc(var(--u) * 96); max-width: none; justify-content: center; flex-direction: row; align-items: center; gap: calc(var(--u) * 6);
        height: calc(var(--u) * 40); min-height: 0; padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 20); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
    .page--home .qnav .qnav__ico { width: calc(var(--u) * 16); height: calc(var(--u) * 16); background: none; border-radius: 0; }
    .page--home .qnav .qnav__ico .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--primary); }
    .page--home .qnav .qnav__txt { min-width: auto; overflow: visible; }
    .page--home .qnav .qnav__txt small { display: none; }
    .page--home .qnav .qnav__txt b { font-size: max(10px, calc(var(--u) * 13)); font-weight: 700; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
}

/* ===== Inicio en teléfono: ritmo de 1win (23 px entre bloques) ===== */
@media (max-width: 1023px) {
    .page--home .hero { margin-top: calc(var(--u) * 8); }                                              /* encabezado → banner: 23 px */
    .page--home .hero__main { margin-inline: 1px; aspect-ratio: 410 / 198 !important; height: auto !important; } /* 15 px de margen; 410 × 198 */
    .page--home .bshort { margin-top: calc(var(--u) * 7); grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr); gap: calc(var(--u) * 7); } /* 23 px; 282 / 120 */
    .page--home .bshort__card { height: calc(var(--u) * 96); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
    .page--home .bshort__txt b { font-size: max(10px, calc(var(--u) * 17)); }
    .page--home .bshort__art--coupon { width: calc(var(--u) * 78); }
    .page--home .qnav { margin-top: calc(var(--u) * 3); }                                              /* tarjetas → botones: 23 px */
    .page--home .qnav .qnav__item { height: calc(var(--u) * 34); }
    .page--home [data-slot="body"] > .row:first-child { margin-top: calc(var(--u) * 3); }              /* botones → primer carrusel: 23 px */
}
/* ===== Carruseles en teléfono: cards completas (sin la que asoma), título con más aire ===== */
@media (max-width: 767px) {
    .row__head { min-height: calc(var(--u) * 32); margin-bottom: calc(var(--u) * 14); }
    .row__tools .arrow { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
    .rail:has(> .game) { margin-right: 0; padding-right: 0; --gap: calc(var(--u) * 7); gap: calc(var(--u) * 7); }
    .row:not(.row--top):not(.row--wide) .rail:has(> .game) { --cols: 3; }
    .row:not(.row--top):not(.row--wide) .rail > .game .game__media { aspect-ratio: 0.74; }
    .row--wide .rail:has(> .game) { --cols: 2; }
    .row--top .rail:has(> .game) { --cols: 3; }
    .row--top .rail > .game.game--ranked { grid-template-columns: .3fr 1fr; }
    .row--top .rail > .game .game__rank { font-size: max(10px, calc(var(--u) * 64)); margin-right: calc(var(--u) * -12); position: relative; z-index: 0; }
    .row--top .rail > .game .game__hit { position: relative; z-index: 1; }
    .row--top .rail > .game .game__media { aspect-ratio: 0.74; }
}

/* ===== PC: títulos de carrusel como 1win (18 px, ícono de 20 px sin círculo) y Top vertical ===== */
@media (min-width: 1024px) {
    .row__head { margin-bottom: calc(var(--u) * 12); gap: calc(var(--u) * 10); }
    .row__title { font-size: max(10px, calc(var(--u) * 18)); font-weight: 600; gap: calc(var(--u) * 8); }
    .row__badge { width: auto; height: auto; background: none; }
    .row__badge .row__ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--primary); }
    .row__link { gap: calc(var(--u) * 6); }
    .row__chev { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
    .row--top .rail > .game .game__media { aspect-ratio: 0.73; }
}
@media (min-width: 1600px) { .row--top .rail:has(> .game) { --cols: 6; } }   /* Top del mismo tamaño que el resto en pantallas anchas */

/* ===== Ilustraciones de "Canjea tu código" (cupón) y "Bonos" (regalo) ===== */
.promo-art, .hcta__art img, .dpromo__art img { display: block; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 14) rgba(0, 0, 0, .35)); }
.bshort__art--coupon { transform: translateY(-50%); width: calc(var(--u) * 96); height: calc(var(--u) * 72); }
.bshort__art--coupon .promo-art { width: 100%; height: 100%; }
.bshort__art--gift { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.bshort__art--gift .promo-art { width: 100%; height: 100%; }
.dpromo__art { width: calc(var(--u) * 40); height: calc(var(--u) * 34); }
.dpromo__art img { width: 100%; height: 100%; }
@media (min-width: 1024px) {
    .hcta__art { display: flex; align-items: flex-end; justify-content: flex-end; }
    .hcta__art img { width: auto; height: 74%; max-width: 100%; margin: auto 0 0 auto; }
}
.page--home .bshort__art--coupon { width: calc(var(--u) * 96); height: calc(var(--u) * 72); }   /* mismo tamaño que la previsualización aprobada */
.dmenu .dpromo__art, .drawer .dpromo__art, .sidebar .dpromo__art { width: calc(var(--u) * 40); height: calc(var(--u) * 34); }

/* ===== Íconos de menú (set HOTBET) y títulos del teléfono sin círculo ===== */
.ic--m { fill: currentColor; stroke: none; }
@media (max-width: 1023px) {
    .row__title { gap: calc(var(--u) * 8); }
    .row__badge { width: auto; height: auto; background: none; }
    .row__badge .row__ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--primary); }
}

/* Encabezado de carrusel: altura mínima (no fija) para que crezca si los botones
   (Slots · Casino en vivo · Crash) bajan a una segunda línea; si no entran, se deslizan. */
.row__head .chips--inline { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.row__head .chips--inline::-webkit-scrollbar { display: none; }
.row__head .chips--inline .chip { flex: none; }

/* ===== Slots, Casino en vivo y Crash: misma separación entre carruseles que el inicio ===== */
.page--catalog [data-slot="featured"] .row ~ .row { margin-top: calc(var(--u) * 28); }
@media (min-width: 1024px) { .page--catalog [data-slot="featured"] .row ~ .row { margin-top: calc(var(--u) * 40); } }

/* ===== Grilla de Slots, Casino en vivo y Crash (proveedor y "Todos los juegos"):
   misma tarjeta que el carrusel alto del inicio (columnas, separación y proporción) ===== */
.grid.grid--rail { grid-template-columns: repeat(var(--gcols, 3), minmax(0, 1fr)) !important; column-gap: var(--ggap, calc(var(--u) * 6)); row-gap: calc(var(--u) * 12); }
.grid--rail > .game .game__media { aspect-ratio: 0.73; border-radius: calc(var(--u) * 12); }
.grid--rail > .game .game__media img { object-fit: cover; }
.grid--rail > .game .game__meta { display: none; }
.grid-section { position: relative; }
@media (min-width: 1024px) {
    .grid--rail > .game .game__badge { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); max-width: 90%; opacity: 1; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 0 0 calc(var(--u) * 8) calc(var(--u) * 8);
        background: rgba(18, 22, 28, .85); color: #e6e9ed; font-size: max(10px, calc(var(--u) * 10)); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 1023px) {
    .grid.grid--rail { row-gap: calc(var(--u) * 8); }
    .grid--rail > .game .game__media { aspect-ratio: 0.71; }
    .grid--rail > .game .game__badge { opacity: 1; }
}
@media (max-width: 767px) { .grid--rail > .game .game__media { aspect-ratio: 0.74; } }

/* Botones en forma de píldora, como los accesos del inicio (Slots · En vivo · Deportes · Crash):
   categorías, proveedores, botón "Proveedores", buscadores y pestañas; flechas circulares. */
.chip, .pchip, .toolbar__prov, .searchbox, .stabs, .stabs__b, .sprov__c { border-radius: calc(var(--u) * 999); }
.sprov__logo { border-radius: 50%; }
.arrow, .row__tools .arrow { border-radius: 50%; }
@media (max-width: 991px) { .row__tools .arrow { border-radius: 50%; } }
@media (min-width: 992px) { .row__tools .arrow { border-radius: 50%; } }
.search-layer__bar .btn { border-radius: calc(var(--u) * 999); }

/* Chips de proveedor: solo el logo, más grande (el nombre queda oculto para la vista,
   pero lo leen los lectores de pantalla y aparece como tooltip). */
.pchip.pchip--logo { position: relative; min-width: calc(var(--u) * 116); padding: 0 calc(var(--u) * 16); }   /* relative: el nombre oculto queda dentro del chip (si no, ensancha la página) */
.pchip.pchip--logo img { max-height: calc(var(--u) * 30); max-width: calc(var(--u) * 120); }
.pchip.pchip--logo .pchip__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .pchip.pchip--logo { min-width: calc(var(--u) * 104); padding: 0 calc(var(--u) * 14); } .pchip.pchip--logo img { max-height: calc(var(--u) * 28); max-width: calc(var(--u) * 108); } }

/* ===== Toda la página en forma de píldora: botones y campos (las tarjetas y paneles
   conservan sus esquinas; las cuotas de deportes también). ===== */
.btn, .btn--lg, .btn--sm, .sheet__foot .btn--lg, .dep-ok .btn, .auth__cta .btn,
.dmenu .dacc .drawer__auth .btn, .bcard__btn, .supm__btn, .boost__btn,
.seg, .seg__btn, .field__box, .cur-chip, .pill, .cur-pill,
.dep-quick button, .dep-pay, .dep-copy, .dep-amt, .dep-sel { border-radius: calc(var(--u) * 999); }

/* ================= Saldo del encabezado estilo 1win (sin línea de "Bono") =================
   PC: moneda + flecha arriba y saldo abajo, sin marco; luego "Depositar", campana y cuenta.
   Teléfono: una píldora con [símbolo · saldo · flecha] y la billetera verde pegada. */
.hbal { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.balance.balance--pill { display: flex; align-items: center; gap: calc(var(--u) * 8); min-height: 0; padding: 0; border: 0; background: none; border-radius: calc(var(--u) * 999); line-height: 1.15; }
.balance--pill .balance__sym { display: none; }
.balance--pill .balance__chevm { display: none; }
.balance--pill .balance__txt { display: flex; flex-direction: column; align-items: flex-end; }
.balance--pill .balance__cur { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); font-style: normal; font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; color: var(--muted); }
.balance--pill .balance__cur .balance__chev { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--muted); }
.balance--pill .balance__amount { font-size: max(10px, calc(var(--u) * 15)); font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.balance--pill:hover .balance__amount { color: var(--text); }
.balance--pill:hover .balance__cur, .balance--pill:hover .balance__chev { color: var(--text-2); }

@media (max-width: 991px) {
    .hbal { gap: 0; height: calc(var(--u) * 40); padding-left: calc(var(--u) * 5); border-radius: calc(var(--u) * 999); background: var(--surface-2, var(--surface)); }
    .balance.balance--pill { height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 8) 0 0; gap: calc(var(--u) * 7); }
    .balance--pill .balance__sym { display: grid; place-items: center; min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 999);
        background: var(--primary); color: var(--on-primary, #fff); font-size: max(10px, calc(var(--u) * 12)); font-weight: 800; letter-spacing: -.02em; }
    .balance--pill .balance__cur { display: none; }
    .balance--pill .balance__amount { font-size: max(10px, calc(var(--u) * 15)); }
    .balance--pill .balance__chevm { display: block; width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--muted); }
    .hbal .topbar__deposit.hbal__dep { width: calc(var(--u) * 50); height: calc(var(--u) * 40) !important; padding: 0 !important; border-radius: calc(var(--u) * 999); }
    .hbal .topbar__deposit.hbal__dep .ic { display: block; width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
    .hbal .topbar__deposit.hbal__dep span { display: none; }
}
@media (max-width: 991px) {
    .hbal { background: rgba(255, 255, 255, .08); }
    :root[data-theme="light"] .hbal { background: rgba(0, 0, 0, .06); }
}

/* Submenú de secciones (como 1win: Lobby · Casino en vivo · Juegos rápidos) */
.secnav { display: inline-flex; gap: calc(var(--u) * 4); max-width: 100%; margin: calc(var(--u) * 4) 0 calc(var(--u) * 14); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 999);
    background: rgba(255, 255, 255, .06); overflow-x: auto; scrollbar-width: none; }
.secnav::-webkit-scrollbar { display: none; }
.secnav__a { flex: none; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 999);
    color: var(--text-2); font-size: max(10px, calc(var(--u) * 14)); font-weight: 700; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s; }
.secnav__a:hover { color: var(--text); }
.secnav__a.is-on { background: var(--primary); color: var(--on-primary, #fff); }
:root[data-theme="light"] .secnav { background: rgba(0, 0, 0, .06); }
@media (max-width: 767px) {
    .secnav { display: flex; width: 100%; }
    .secnav__a { flex: 1 1 auto; height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 14.5)); }
}
@media (min-width: 768px) { .secnav { align-self: flex-start; width: max-content; } }

/* Encabezado sin barra marcada (como 1win): mismo fondo que la página, sin línea ni sombra.
   Sigue fijo arriba; el fondo es sólido para que el contenido pase por debajo sin verse. */
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: none; }
@media (max-width: 991px) { .topbar { background: var(--bg); } }

/* Secciones (Slots · Casino en vivo · Crash): sin la franja "Inicio › Slots / subtítulo".
   La reemplaza el submenú de secciones. El título queda oculto para SEO y lectores de pantalla. */
.page--catalog .page-head .crumbs, .page--catalog .page-head .page-sub { display: none; }
.page--catalog .page-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Final del pie (como 1win): "Instala la app" + "Soporte 24/7" =====
   Teléfono: una debajo de la otra (primero la app). PC: lado a lado, en formato compacto. */
.ft__cards { display: grid; gap: calc(var(--u) * 12); margin: 0 0 calc(var(--u) * 22); }
.ft__cards .supm { margin: 0; }
@media (min-width: 768px) {
    .ft__cards { grid-template-columns: 1fr 1fr; }
    /* Soporte también en PC (antes solo en el teléfono), mismo diseño gris y compacto */
    .ft__cards .supm { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-height: calc(var(--u) * 132); padding: calc(var(--u) * 18);
        border-radius: calc(var(--u) * 18); background: linear-gradient(135deg, #23262c 0%, #16181c 100%); border: 1px solid rgba(255, 255, 255, .22); isolation: isolate; }
    .ft__cards .supm__img { position: absolute; top: 0; right: 0; height: 100%; max-width: 46%; object-fit: cover; object-position: right top; z-index: -1;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
    .ft__cards .supm__hd { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 18)); font-weight: 800; color: #fff; }
    .ft__cards .supm__hd em { font-style: normal; font-size: max(10px, calc(var(--u) * 12)); font-weight: 800; padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 999); background: linear-gradient(180deg, #5a5f69, #41454d); color: #fff; }
    .ft__cards .supm p { margin: calc(var(--u) * 6) 0 calc(var(--u) * 14); max-width: 55%; font-size: max(10px, calc(var(--u) * 13)); color: rgba(255, 255, 255, .72); }
    .ft__cards .supm__btn { margin-top: auto; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 20); border-radius: calc(var(--u) * 999);
        background: linear-gradient(180deg, #5a5f69 0%, #3b3f47 100%); color: #fff; font-size: max(10px, calc(var(--u) * 14.5)); font-weight: 700; }
    .ft__cards .supm__btn i { position: static; transform: none; width: auto; height: auto; }
    .ft__cards .supm__btn i .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
}

/* Tarjeta "Instala la app" (diseño fino, como 1win): la imagen del teléfono sobresale del banner. */
.ft__cards { margin-top: calc(var(--u) * 44); }
.appc { position: relative; isolation: isolate; min-height: calc(var(--u) * 118); padding: calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 18); color: #fff; overflow: visible;
    background: radial-gradient(90% 120% at 80% 10%, rgba(196, 140, 255, .55) 0%, rgba(196, 140, 255, 0) 60%),
                linear-gradient(120deg, #6B25E8 0%, #8A3BF6 55%, #6A2BE0 100%);
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(106, 37, 232, .22); }
.appc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.appc__txt { position: relative; z-index: 2; max-width: 52%; }
.appc__hd { font-size: max(10px, calc(var(--u) * 17)); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.appc p { margin: calc(var(--u) * 5) 0 0; font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.appc__img { position: absolute; z-index: 1; right: calc(var(--u) * 16); bottom: 0; height: calc(var(--u) * 158); width: auto; pointer-events: none;
    filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(0, 0, 0, .35)); }
.appc__btn { position: absolute; z-index: 3; right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7);
    height: calc(var(--u) * 38); min-width: calc(var(--u) * 132); padding: 0 calc(var(--u) * 18); border: 0; border-radius: calc(var(--u) * 999); background: #fff; color: #111; font-size: max(10px, calc(var(--u) * 14)); font-weight: 700;
    cursor: pointer; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 0, 0, .22); }
.appc__btn .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.appc__btn:hover { background: #f4efff; }
@media (min-width: 768px) {
    .appc { min-height: calc(var(--u) * 132); padding: calc(var(--u) * 18) calc(var(--u) * 20); }
    .appc__txt { max-width: 46%; }
    .appc__hd { font-size: max(10px, calc(var(--u) * 16)); }
    .appc__img { right: 22%; height: calc(var(--u) * 170); }
    .appc__btn { left: calc(var(--u) * 20); right: auto; bottom: calc(var(--u) * 16); min-width: 42%; }
}
@media (min-width: 768px) { .appc__img { right: 20%; height: calc(var(--u) * 196); } .ft__cards { margin-top: calc(var(--u) * 64); } }

/* Imagen "por la mitad" (como 1win): sobresale arriba y se corta en el borde inferior de la tarjeta. */
.appc__art { position: absolute; z-index: 1; right: calc(var(--u) * 6); top: calc(var(--u) * -42); bottom: 0; width: calc(var(--u) * 190); overflow: hidden; pointer-events: none;
    border-bottom-right-radius: calc(var(--u) * 18); }
.appc__art .appc__img { position: absolute; top: 0; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); height: calc(var(--u) * 290); width: auto;
    filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(0, 0, 0, .35)); }
.appc__txt { max-width: 50%; }
@media (min-width: 768px) {
    .appc__art { right: 18%; top: calc(var(--u) * -54); width: calc(var(--u) * 260); border-bottom-right-radius: 0; }
    .appc__art .appc__img { height: calc(var(--u) * 380); }
}

/* Imagen ya cortada a la mitad (teléfono + regalo): apoyada en el borde inferior, sobresale arriba. */
.appc__art { top: auto; bottom: 0; right: calc(var(--u) * 8); width: auto; overflow: visible; border-radius: 0; }
.appc__art .appc__img { position: static; display: block; transform: none; height: calc(var(--u) * 150); width: auto; }
.appc__txt { max-width: 42%; }
@media (min-width: 768px) {
    .appc__art { right: 16%; }
    .appc__art .appc__img { height: calc(var(--u) * 196); }
    .appc__txt { max-width: 44%; }
}
@media (max-width: 767px) { .appc__art .appc__img { height: calc(var(--u) * 166); } .appc__txt { max-width: 39%; } }

/* Tarjeta de la app en gris plateado (igual a la de Soporte) e imagen más chica. */
.appc { background: linear-gradient(135deg, #2a2d34 0%, #1b1d22 55%, #15171b 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); }
.appc::after { display: none; }
.appc p { color: rgba(255, 255, 255, .72); }
.appc__art .appc__img { height: calc(var(--u) * 132); }
@media (max-width: 767px) { .appc__art .appc__img { height: calc(var(--u) * 132); } .appc__txt { max-width: 46%; } }
@media (min-width: 768px) { .appc__art .appc__img { height: calc(var(--u) * 158); } .appc__art { right: 18%; } }

/* Programa VIP: columnas propias del carrusel de niveles (el carrusel de juegos usa 5-7 en PC) */
.rail.vip-rail { --cols: 1.22; }
@media (min-width: 520px) { .rail.vip-rail { --cols: 2.2; } }
@media (min-width: 992px) { .rail.vip-rail { --cols: 3; } }
@media (min-width: 1400px) { .rail.vip-rail { --cols: 3.3; } }
/* Soporte primero y la app después: espacio para la imagen que sobresale de la tarjeta de la app */
@media (max-width: 767px) { .ft__cards .supm + .appc { margin-top: calc(var(--u) * 12); } }

/* Teléfono · Slots (y demás secciones): logos de proveedores más grandes en la fila */
@media (max-width: 767px) {
    .pchip.pchip--logo { height: calc(var(--u) * 54) !important; min-width: calc(var(--u) * 132); padding: 0 calc(var(--u) * 16); }
    .pchip.pchip--logo img { max-height: calc(var(--u) * 36); max-width: calc(var(--u) * 124); }
}

/* ===== Buscador · pestaña Proveedores (como 1win): tarjeta con logo centrado y el nombre abajo =====
   2 columnas en el teléfono, 3 en PC. Los grupos (Recomendados, 0-9, A…) como etiquetas. */
.sprov__h { display: inline-flex; align-items: center; margin: calc(var(--u) * 4) 0 calc(var(--u) * 10); padding: calc(var(--u) * 3) calc(var(--u) * 11); border-radius: calc(var(--u) * 999);
    background: rgba(255, 255, 255, .08); color: var(--text-2); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; letter-spacing: 0; text-transform: none; }
.sprov__h::before, .sprov__h::after { display: none; }
.sprov__grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 8); }
.sprov__c, .sprov__c.sprov__c--logo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 7);
    height: calc(var(--u) * 76); padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 9); border-radius: calc(var(--u) * 14); background: var(--surface-2); border: 1px solid rgba(255, 255, 255, .06); text-align: center; }
.sprov__c:hover { border-color: rgba(var(--primary-rgb), .5); }
.sprov__c .sprov__logo, .sprov__c--logo .sprov__logo { position: relative; flex: none; width: 72%; height: calc(var(--u) * 28); border-radius: 0; background: none; display: grid; place-items: center; }
.sprov__c .sprov__logo img, .sprov__c--logo .sprov__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sprov__c .sprov__logo b { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); font-size: max(10px, calc(var(--u) * 13)); }
.sprov__c .sprov__logo img + b { display: none; }
.sprov__c .sprov__n, .sprov__c--logo .sprov__n { position: static; width: auto; height: auto; overflow: hidden; clip: auto; max-width: 100%;
    font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 600; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.sprov__c--skel { height: calc(var(--u) * 76); border-radius: calc(var(--u) * 14); }
@media (min-width: 768px) { .sprov__grid { grid-template-columns: repeat(3, 1fr); } .sprov__c, .sprov__c.sprov__c--logo { height: calc(var(--u) * 72); } }
:root[data-theme="light"] .sprov__c { border-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .sprov__h { background: rgba(0, 0, 0, .06); }

/* Encabezado "Buscar" + X: solo en PC (en el teléfono queda el botón "Cerrar") */
.search-layer__head { display: none; }
@media (min-width: 992px) {
    .search-layer__panel { width: min(calc(var(--u) * 640), 92vw); max-height: 84vh; margin: 7vh auto 0; padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 22); border-radius: calc(var(--u) * 22);
        transform: translateY(calc(var(--u) * 10)) scale(.98); box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(0, 0, 0, .45); }
    .search-layer.is-open .search-layer__panel { transform: none; }
    .search-layer__head { display: flex; align-items: center; justify-content: space-between; }
    .search-layer__head h2 { font-size: max(10px, calc(var(--u) * 22)); font-weight: 800; color: var(--text); }
    .search-layer__x { display: grid; place-items: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text-2); cursor: pointer; }
    .search-layer__x:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
    .search-layer__x .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
    .search-layer__bar .btn[data-close] { display: none; }
    .search-layer .stabs { width: 100%; }
    .search-layer .stabs__b { flex: 1; justify-content: center; }
}
@media (min-width: 992px) { .search-layer .grid.grid--search { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Teléfono: la lupa del encabezado como botón circular visible (antes, solo el dibujo sin fondo) */
@media (max-width: 991px) {
    .topbar .topbar__search { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--text); }
    .topbar .topbar__search .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
    .topbar .topbar__search:active { background: rgba(255, 255, 255, .16); }
    :root[data-theme="light"] .topbar .topbar__search { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .12); }
}
/* Lupa con el color de la moneda (naranja en ARS, rosa en VES…) */
@media (max-width: 991px) {
    .topbar .topbar__search { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--primary); }
    .topbar .topbar__search:active { background: color-mix(in srgb, var(--primary) 24%, transparent); }
    :root[data-theme="light"] .topbar .topbar__search { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
}

/* ===== Teléfono · SOLO en el inicio: barra de búsqueda fina arriba de todo (como Mercado Libre) =====
   Segunda fila del encabezado fijo: píldora blanca, lupa gris y "Buscar en HOTBET" (abre el buscador
   en Proveedores, sin teclado). En el inicio reemplaza a la lupa redonda; en las demás páginas queda
   la lupa redonda de color y el encabezado con su altura normal. */
.topbar__sbar { display: none; }
@media (max-width: 991px) {
    html.route-home { --topbar-h: calc(var(--u) * 102); }
    html.route-home .topbar { flex-wrap: wrap; align-content: flex-start; row-gap: calc(var(--u) * 10); padding-top: calc(calc(var(--u) * 10) + var(--safe-top)); padding-bottom: calc(var(--u) * 8); }
    html.route-home .topbar > :not(.topbar__sbar) { height: calc(var(--u) * 40); }
    html.route-home .topbar__sbar { order: 99; flex: 0 0 100%; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); border: 0; border-radius: calc(var(--u) * 999);
        background: #fff; color: #8a8a8a; font-size: max(10px, calc(var(--u) * 14.5)); font-weight: 500; text-align: left; cursor: pointer; box-shadow: 0 1px calc(var(--u) * 2) rgba(0, 0, 0, .15); }
    .topbar__sbar .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; color: #8a8a8a; }
    .topbar__sbar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .topbar__sbar:active { background: #f1f1f1; }
    :root[data-theme="light"].route-home .topbar__sbar { border: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
}
/* Imagen nueva de descarga (teléfono + regalo azul, más cuadrada): un poco más alta */
.appc__art .appc__img { height: calc(var(--u) * 150); }
@media (max-width: 767px) { .appc__art .appc__img { height: calc(var(--u) * 150); } .appc__txt { max-width: 44%; } }
@media (min-width: 768px) { .appc__art .appc__img { height: calc(var(--u) * 176); } }
@media (max-width: 767px) { .ft__cards .supm + .appc { margin-top: calc(var(--u) * 20); } }
/* Teléfono: el botón "Instalar" va a la izquierda, debajo del texto (no tapa el regalo) */
@media (max-width: 767px) {
    .appc .appc__txt { max-width: 50%; }
    .appc .appc__btn { position: relative; right: auto; bottom: auto; left: auto; z-index: 3; margin-top: calc(var(--u) * 12); min-width: 0; height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 16); }
    .appc { flex-direction: column; align-items: flex-start; }
    .appc__art .appc__img { height: calc(var(--u) * 164); }
}
@media (max-width: 767px) { .appc .appc__txt { max-width: 44%; } }
/* Teléfono: tarjeta de descarga más baja y el teléfono sobresaliendo bien por arriba */
@media (max-width: 767px) {
    .appc { min-height: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12); }
    .appc .appc__hd { font-size: max(10px, calc(var(--u) * 15)); line-height: 1.2; }
    .appc p { margin-top: calc(var(--u) * 3); font-size: max(10px, calc(var(--u) * 12)); line-height: 1.3; }
    .appc .appc__btn { margin-top: calc(var(--u) * 9); height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 14); font-size: max(10px, calc(var(--u) * 13.5)); }
    .appc .appc__btn .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
    .appc__art .appc__img { height: calc(var(--u) * 184); }
    .ft__cards .supm + .appc { margin-top: calc(var(--u) * 58); }
}
/* Soporte · teléfono: la chica apenas separada del borde (la foto trae aire extra para PC) */
@media (max-width: 767px) { .supm .supm__img { top: calc(var(--u) * -17); } }

/* Teléfono con sesión: campanita al lado del saldo (avisa mensajes, bonos y giros nuevos) */
@media (max-width: 991px) {
    .topbar .bell { display: block; flex: none; }
    .topbar .bell__btn { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text); display: grid; place-items: center; }
    .topbar .bell__btn .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
    .topbar .bell__count { top: calc(var(--u) * -2); right: calc(var(--u) * -2); }
    .topbar .bell__menu { position: fixed; top: calc(var(--topbar-h) + var(--safe-top) + calc(var(--u) * 4)); right: calc(var(--u) * 10); left: auto; width: min(calc(var(--u) * 300), calc(100vw - calc(var(--u) * 20))); }
    :root[data-theme="light"] .topbar .bell__btn { background: rgba(0, 0, 0, .05); }
}
/* Teléfono con sesión: encabezado más compacto para que entre la campanita */
@media (max-width: 991px) {
    .topbar { column-gap: calc(var(--u) * 8); }
    .topbar .topbar__brand .logo-img { max-width: calc(var(--u) * 104); max-height: calc(var(--u) * 30); }
    .topbar .topbar__right { gap: calc(var(--u) * 8); }
    .hbal .topbar__deposit.hbal__dep { width: calc(var(--u) * 44); }
    .balance--pill .balance__amount { font-size: max(10px, calc(var(--u) * 14.5)); }
}
@media (max-width: 400px) { .balance--pill .balance__chevm { display: none; } .balance.balance--pill { padding-right: calc(var(--u) * 10); } }
@media (max-width: 350px) { .balance--pill .balance__sym { display: none; } .hbal { padding-left: calc(var(--u) * 12); } .topbar .topbar__brand .logo-img { max-width: calc(var(--u) * 92); } }
/* Teléfono angosto con sesión: la campanita ocupa el lugar de la lupa (fuera del inicio no entran las dos) */
@media (max-width: 359px) { .topbar.topbar--auth .topbar__search { display: none; } }
@media (max-width: 991px) { .topbar .topbar__brand { flex: none; } }
/* Página Bonos: la sección "Mis bonos" no se ensancha más que la pantalla; las pestañas se deslizan si no entran */
.bgrid > * { min-width: 0; }
.page--bonos .seg.seg--page { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.page--bonos .seg.seg--page::-webkit-scrollbar { display: none; }
.page--bonos .seg.seg--page .seg__btn { flex: none; }

/* Teléfono con sesión: botón claro/oscuro al lado de la campanita; en pantallas chicas el logo pasa
   a ser solo la llamita para que entre todo. */
.topbar__flame { display: none; }
@media (max-width: 991px) {
    .topbar.topbar--auth .topbar__theme { display: grid; place-items: center; order: 9; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%;
        background: rgba(255, 255, 255, .08); border: 0; color: var(--text); }
    .topbar.topbar--auth .topbar__theme .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
    :root[data-theme="light"] .topbar.topbar--auth .topbar__theme { background: rgba(0, 0, 0, .05); }
    .topbar .bell { order: 8; }
}
@media (max-width: 430px) {
    .topbar.topbar--auth .topbar__brand .logo-img, .topbar.topbar--auth .topbar__brand .logo-fallback { display: none; }
    .topbar.topbar--auth .topbar__flame { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 34); color: var(--primary); }
    .topbar.topbar--auth .topbar__flame svg { width: 100%; height: 100%; }
}
@media (max-width: 991px) { html.route-home .topbar .topbar__right { margin-left: auto; } }
@media (max-width: 359px) { .topbar.topbar--auth .topbar__right { margin-left: auto; } }
/* Página Bonos: columna con "Mis bonos" y "Giros gratis" */
.bcol { display: flex; flex-direction: column; gap: calc(var(--u) * 26); min-width: 0; }

/* Página Bonos: apenas más aire en todo */
.page--bonos { gap: calc(var(--u) * 34); }
.page--bonos .bgrid { gap: calc(var(--u) * 34); }
.page--bonos .bcol { gap: calc(var(--u) * 34); }
.page--bonos .bsec__head { margin-bottom: calc(var(--u) * 14); }
.page--bonos .bsec__title { margin-bottom: calc(var(--u) * 4); }
.page--bonos .bsec__sub { margin-bottom: calc(var(--u) * 14); }
.page--bonos .seg.seg--page { margin-bottom: calc(var(--u) * 16); }
.page--bonos .bonus-grid { gap: calc(var(--u) * 14); }
.page--bonos .bonus { padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 16); }
.page--bonos .bonus > * + * { margin-top: calc(var(--u) * 10); }
.page--bonos .table-cards { gap: calc(var(--u) * 12); }
.page--bonos .trow { padding: calc(var(--u) * 16) calc(var(--u) * 16); row-gap: calc(var(--u) * 10); }
.page--bonos .faq, .page--bonos .bfaq { gap: calc(var(--u) * 12); }
.page--bonos details { margin-bottom: calc(var(--u) * 10); }
/* Promociones: la imagen subida desde el ADMIN siempre con las puntas redondeadas.
   El marco toma la forma real de la imagen, así el redondeo cae en sus esquinas visibles. */
.bcard img.bcard__art { width: auto; height: auto; max-width: calc(var(--u) * 140); max-height: calc(var(--u) * 100); object-fit: contain; border-radius: calc(var(--u) * 14); overflow: hidden; }
.promo-detail__img { border-radius: calc(var(--u) * 14); overflow: hidden; }
/* Saldo disponible (encabezado y menú lateral): tipografía 600 */
.balance__amount, .balance--pill .balance__amount, .balance--rb .balance__amount { font-weight: 600; }
/* Mensaje sin bonos: dos botones lado a lado (canal y casilla de mensajes) */
.state__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 4); }
/* Promociones: el carrusel solo se desplaza de costado; el scroll vertical queda para la página */
.bcar { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
@media (min-width: 768px) { .bcar { overflow: visible; } }
/* Página Bonos: sin la franja "Inicio › Bonos / Promociones, bonos de bienvenida y códigos"
   (el título queda oculto para SEO y lectores); en el teléfono, promociones más compactas para
   que "Mis bonos" (Canjear bono y pestañas) se vea sin hacer scroll. */
.page--bonos .page-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bono activo: "Bases y condiciones" como interruptor con flecha, cerrado al entrar */
.bonus__terms { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: calc(var(--u) * 10); }
.bonus__terms summary { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); list-style: none; cursor: pointer;
    font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 700; color: var(--text-2); user-select: none; }
.bonus__terms summary::-webkit-details-marker { display: none; }
.bonus__chev { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text); transition: transform .2s; }
.bonus__chev .ic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.bonus__terms[open] .bonus__chev { transform: rotate(180deg); }
.bonus__terms-body { margin-top: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 13)); line-height: 1.45; color: var(--muted); }
.bonus__terms-body b { display: block; margin-bottom: calc(var(--u) * 4); color: var(--text-2); }
.bonus__terms-body p { white-space: pre-line; }
:root[data-theme="light"] .bonus__terms { border-top-color: rgba(0, 0, 0, .08); }

/* Teléfono, fuera del inicio: lupa más chica y sin contorno (no empuja a los demás íconos) */
@media (max-width: 991px) {
    .topbar .topbar__search { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border: 0; background: color-mix(in srgb, var(--primary) 14%, transparent); }
    .topbar .topbar__search .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
}
.bonus__terms .bonus__dl { margin: calc(var(--u) * 10) 0 0; }
.bonus__terms .bonus__dl + .bonus__terms-body { margin-top: calc(var(--u) * 12); padding-top: calc(var(--u) * 10); border-top: 1px dashed rgba(255, 255, 255, .08); }

/* Página Bonos, en PC y teléfono: una sola columna y bien ordenada:
   promociones → Mis bonos → Giros gratis → Preguntas frecuentes (al final, a lo ancho). */
.page--bonos .bgrid { display: flex; flex-direction: column; gap: calc(var(--u) * 34); grid-template-columns: none; }
.page--bonos .bgrid > .bcol { order: 1; }
.page--bonos .bgrid > .bsec:not([data-mine]):not([data-fs]) { order: 2; }
@media (min-width: 768px) {
    .page--bonos .bonus-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 320), 1fr)); }
    .page--bonos .seg.seg--page { display: inline-flex; width: auto; }
}
.page--bonos .bgrid { align-items: stretch; }
.page--bonos .bgrid > * { width: 100%; }

/* PC · Promociones: todas en una fila, estiradas a lo ancho; si no entran, la fila se desliza de costado
   (ninguna baja a otra línea). En el teléfono siguen como carrusel. */
@media (min-width: 768px) {
    .page--bonos .bcar { display: flex; grid-template-columns: none; gap: calc(var(--u) * 16); overflow-x: auto; overflow-y: hidden; padding: calc(var(--u) * 44) calc(var(--u) * 2) calc(var(--u) * 10);
        scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
    .page--bonos .bcar::-webkit-scrollbar { display: block; height: calc(var(--u) * 6); }
    .page--bonos .bcar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: calc(var(--u) * 999); }
    .page--bonos .bcar > .bcard { flex: 1 0 calc(var(--u) * 280); min-width: calc(var(--u) * 280); }
}

/* Mis bonos en PC: cada bono es una tarjeta larga a lo ancho (una debajo de la otra, nunca en grilla):
   izquierda nombre/estado y monto · centro barra y apostado · derecha Cancelar · abajo detalles. */
@media (min-width: 768px) {
    .bonus-grid, .page--bonos .bonus-grid { grid-template-columns: 1fr; }
    .bonus { display: grid; grid-template-columns: minmax(calc(var(--u) * 200), 1fr) minmax(calc(var(--u) * 240), 1.6fr) auto; column-gap: calc(var(--u) * 28); row-gap: calc(var(--u) * 8); align-items: center;
        grid-template-areas: "head bar act" "amt meta act" "terms terms terms"; }
    .bonus > * + *, .page--bonos .bonus > * + * { margin-top: 0; }
    .bonus > header { grid-area: head; }
    .bonus > .bonus__amount { grid-area: amt; }
    .bonus > .level__bar { grid-area: bar; }
    .bonus > .bonus__meta { grid-area: meta; }
    .bonus > [data-cancel] { grid-area: act; width: auto; padding: 0 calc(var(--u) * 18); white-space: nowrap; }
    .bonus > .bonus__terms { grid-area: terms; margin-top: calc(var(--u) * 6); }
}

/* Registro: mientras carga, barras con el ancho de los campos (no un bloque oscuro a media columna) */
.reg-skel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: calc(var(--u) * 12); width: 100%; }
.reg-skel .skel { display: block; width: 100%; height: calc(var(--u) * 48); border-radius: calc(var(--u) * 999); }
.reg-skel .skel:nth-child(4) { width: 60%; height: calc(var(--u) * 20); border-radius: calc(var(--u) * 8); }
/* Registro en el teléfono con el teclado abierto: más lugar para los campos y el botón no los tapa */
.auth.is-typing .auth__band { display: none; }
.auth.is-typing .auth__cta { position: static; margin-top: calc(var(--u) * 8); box-shadow: none; }
.auth.is-typing .social, .auth.is-typing .auth__sub { display: none; }

/* Mi cuenta → Referidos: más aire entre bloques y dentro de cada uno */
.ref-page { display: flex; flex-direction: column; gap: calc(var(--u) * 22); }
.ref-page .ref-card { padding: calc(var(--u) * 22); gap: calc(var(--u) * 22); }
.ref-page .ref-card > div > .muted { margin-bottom: calc(var(--u) * 4); }
.ref-page .ref-link { gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.ref-page .ref-link input { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 999); font-size: max(10px, calc(var(--u) * 14.5)); }
.ref-page .ref-link .btn { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 18); }
.ref-page .ref-code { gap: calc(var(--u) * 12) calc(var(--u) * 12); align-items: flex-end; }
.ref-page .ref-code .field__label { margin-bottom: calc(var(--u) * 6); }
.ref-page .ref-code .btn { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 18); }
.ref-page .ref-code .switch { flex-basis: 100%; margin-top: calc(var(--u) * 4); }
.ref-page .money-cards { gap: calc(var(--u) * 16); }
.ref-page .money { padding: calc(var(--u) * 20) calc(var(--u) * 22); gap: calc(var(--u) * 12); }
.ref-page .money .btn { margin-top: calc(var(--u) * 6); height: calc(var(--u) * 46); }
.ref-page .money small.muted { margin-top: calc(var(--u) * 2); line-height: 1.4; }
.ref-page .notice { margin: 0; }
.ref-page .row__title.section-gap { margin: calc(var(--u) * 6) 0 0; }
.ref-page .table-cards { gap: calc(var(--u) * 12); }
.ref-page .trow { padding: calc(var(--u) * 16); }
/* Referidos: cada botón en la misma línea que su campo (enlace + Copiar, código + Guardar) */
.ref-page .ref-link { flex-wrap: wrap; }
.ref-page .ref-link input { flex: 1 1 0; min-width: 0; }
.ref-page .ref-link [data-copy] { flex: none; }
.ref-page .ref-link [data-share] { flex: 1 1 100%; }
.ref-page .ref-code { flex-wrap: wrap; }
.ref-page .ref-code .field { flex: 1 1 0; min-width: 0; }
.ref-page .ref-code > .btn { flex: none; }
/* Referidos: banner "Asóciate con nosotros" arriba de todo */
.ref-banner { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 580; border-radius: calc(var(--u) * 18); background: var(--surface); object-fit: cover; }
@media (min-width: 768px) { .ref-banner { max-width: calc(var(--u) * 820); } }

/* ===== Sección Referidos (/referidos/) ===== */
.page--referidos { display: flex; flex-direction: column; gap: calc(var(--u) * 26); }
.page--referidos .page-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.page--referidos [data-ref-body] { display: flex; flex-direction: column; gap: calc(var(--u) * 26); }
.ref-step__ico { width: calc(var(--u) * 60); height: calc(var(--u) * 60); border-radius: calc(var(--u) * 18); background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.ref-step__ico .ic { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.ref-cta { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 24) calc(var(--u) * 20); border-radius: calc(var(--u) * 20); text-align: center;
    background: linear-gradient(135deg, #262930 0%, #181a1f 60%, #14161a 100%); border: 1px solid rgba(255, 255, 255, .12); }
.ref-cta__t { font-size: max(10px, calc(var(--u) * 15)); font-weight: 700; color: var(--text); }
.ref-cta__acts { display: flex; flex-direction: column; gap: calc(var(--u) * 10); width: 100%; max-width: calc(var(--u) * 420); }
.ref-cta__acts .btn { width: 100%; }
@media (min-width: 768px) { .ref-cta__acts { flex-direction: row; max-width: calc(var(--u) * 620); } }
/* Referidos: en PC el banner ancho ocupa todo el ancho */
.ref-banner-wrap { display: block; }
@media (min-width: 768px) { .ref-banner { max-width: none; aspect-ratio: 2160 / 824; } }

/* Pestañas de secciones de arriba (PC): solo íconos en TODAS las pantallas, también las grandes
   (el nombre queda como tooltip y para lectores de pantalla). Mismo estilo que el modo compacto. */
@media (min-width: 992px) {
    .hseg { gap: calc(var(--u) * 2); }
    .hseg .hseg__tab { padding: 0 calc(var(--u) * 10); }
    .hseg .hseg__tab span { display: none; }
    .hseg .hseg__tab .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
}

/* PC: botón claro/oscuro arriba, en el encabezado (entre la campanita y el avatar; sin sesión, junto a
   "Iniciar sesión"). Sigue también en el "⋮" del menú. */
@media (min-width: 992px) {
    .topbar .topbar__theme { display: grid; place-items: center; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%;
        background: rgba(255, 255, 255, .06); color: var(--text-2); }
    .topbar .topbar__theme:hover { color: var(--text); background: rgba(255, 255, 255, .12); }
    .topbar .topbar__theme .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
    :root[data-theme="light"] .topbar .topbar__theme { background: rgba(0, 0, 0, .05); }
    .topbar__right > .hbal { order: 1; }
    .topbar__right > .bell { order: 2; }
    .topbar__right > .topbar__theme { order: 3; }
    .topbar__right > .account { order: 4; }
}

/* ===== Tema claro: las tarjetas de fondo oscuro fijo mantienen el texto claro =====
   (VIP: hero, progreso, niveles y pasos · pie: Soporte e "Instala la app" · Referidos: pasos y botones).
   Sin esto, en el tema claro el texto quedaba negro sobre fondo oscuro y no se leía. */
:root[data-theme="light"] :is(.vip-hero, .vip-prog, .vipc, .vip-steps, .ft__cards .supm, .appc, .ref-cta) {
    --text: #FFFFFF; --text-2: rgba(255, 255, 255, .74); --muted: rgba(255, 255, 255, .58); --line: rgba(255, 255, 255, .12);
    --surface-2: rgba(255, 255, 255, .08); color: #FFFFFF; color-scheme: dark;
}
:root[data-theme="light"] :is(.vip-hero, .vip-prog, .vipc, .vip-steps, .ref-cta) .btn--ghost { border-color: rgba(255, 255, 255, .28); color: #FFFFFF; }
:root[data-theme="light"] :is(.vip-hero, .vip-prog, .vipc, .vip-steps, .ref-cta) .btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }

/* ===== Mi cuenta: más aire en todas las pestañas (como Referidos) ===== */
.page--account { gap: calc(var(--u) * 22); }
.page--account > [data-body] { display: flex; flex-direction: column; gap: calc(var(--u) * 22); }
.page--account > [data-body] > * { margin-top: 0; margin-bottom: 0; }
/* Tarjetas de saldo (Saldo real, Saldo de bono, Moneda) */
.page--account .money-cards { gap: calc(var(--u) * 16); }
.page--account .money { padding: calc(var(--u) * 20) calc(var(--u) * 22); gap: calc(var(--u) * 12); }
.page--account .money__lbl { margin-bottom: calc(var(--u) * 2); }
.page--account .money .btn { margin-top: calc(var(--u) * 6); height: calc(var(--u) * 46); }
/* Accesos rápidos (Retirar, Mi nivel, Torneos, Referidos) */
.page--account .quick { gap: calc(var(--u) * 14); }
.page--account .quick__item { padding: calc(var(--u) * 18); gap: calc(var(--u) * 6); }
.page--account .quick__item .ic { margin-bottom: calc(var(--u) * 8); }
/* Mensajes y listas de la cuenta */
.page--account .inbox { gap: calc(var(--u) * 12); }
.page--account .table-cards { gap: calc(var(--u) * 12); }
.page--account .trow { padding: calc(var(--u) * 16); }
.page--account .seg.seg--page { margin-bottom: calc(var(--u) * 4); }

/* Pie: frase, dos líneas de beneficios debajo de las redes y texto legal fijo */
.ft__perks { list-style: none; margin: calc(var(--u) * 4) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.ft__perks li { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 600; color: var(--text); }
.ft__perks .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); padding: calc(var(--u) * 2); border-radius: 50%; background: #22c55e; color: #fff; flex: none; }
.ft__legal { gap: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 11.5)); line-height: 1.6; }
.ft__legal .ft__op { font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 600; color: var(--text-2); }
.ft__legal .ft__copy { color: var(--text-2); }
.ft__legal a { color: var(--primary); text-decoration: underline; text-underline-offset: calc(var(--u) * 2); }

/* Referidos con el teléfono de costado (pantalla baja): el banner no pasa de la mitad del alto */
@media (orientation: landscape) and (max-height: 500px) {
    .ref-banner { width: auto; max-width: 100%; max-height: 48svh; margin: 0 auto; }
}

/* Ganadores x50+: brillo dorado FIJO (sin latido). Antes animaba box-shadow y repintaba toda la cinta
   de ganadores en cada cuadro, lo que trababa el deslizamiento en teléfonos. Se mantiene el borde y el brillo. */
.rail--winners .winner--n3 { animation: none; box-shadow: 0 0 0 1px rgba(245, 200, 76, .7), 0 0 calc(var(--u) * 18) rgba(245, 200, 76, .42); }

/* Rendimiento: la etiqueta del proveedor sobre cada tarjeta tenía desenfoque (backdrop-filter): cada una
   era una capa aparte (84 en el inicio) que el teléfono reorganizaba en cada cuadro al deslizar.
   Sin desenfoque y con el fondo un poco más sólido se ve igual. */
.game__badge { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(18, 22, 28, .9) !important; }

/* Referidos · modelos de afiliación (mismo estilo que las tarjetas de niveles) */
.affc .vipc__head { min-height: calc(var(--u) * 56); }
.affc__img--pct { display: grid; place-items: center; width: calc(var(--u) * 84); height: calc(var(--u) * 84); border-radius: calc(var(--u) * 22); color: var(--primary);
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--primary) 10%, transparent)); }
.affc__img--pct svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.affc__desc { position: relative; z-index: 2; margin-top: calc(var(--u) * 2); font-size: max(10px, calc(var(--u) * 14)); line-height: 1.45; color: var(--text); padding-right: calc(var(--u) * 6); }
.aff-cta { align-items: center; text-align: center; gap: calc(var(--u) * 10); }
.aff-cta p { font-size: max(10px, calc(var(--u) * 14)); line-height: 1.5; color: var(--text-2); max-width: calc(var(--u) * 640); }
.aff-cta .aff-cta__lead { font-size: max(10px, calc(var(--u) * 16)); font-weight: 800; color: var(--text); }
.aff-cta .aff-cta__q { font-weight: 700; color: var(--text); }
.aff-cta__btn { margin-top: calc(var(--u) * 6); width: 100%; max-width: calc(var(--u) * 420); gap: calc(var(--u) * 8); letter-spacing: .3px; }
.aff-cta__btn[aria-disabled="true"] { opacity: .85; }
:root[data-theme="light"] .aff-cta { --text: #FFFFFF; --text-2: rgba(255, 255, 255, .74); color: #fff; }
@media (max-width: 480px) {
    .aff-cta__btn { font-size: max(10px, calc(var(--u) * 14)); letter-spacing: 0; white-space: normal; line-height: 1.25; min-height: calc(var(--u) * 52); height: auto; padding: calc(var(--u) * 10) calc(var(--u) * 16); text-align: center; }
    .aff-cta__btn .ic { flex: none; }
}
/* Modelos de afiliación: cupón dorado con el % (en el teléfono se deslizan de costado, como los niveles) */
.affc__img { width: calc(var(--u) * 112); height: auto; object-fit: contain; }

/* Tarjetas de juegos al deslizar con el dedo: sin "temblor".
   · (El efecto de achicarse al presionar la tarjeta se mantiene.)
   · La imagen ya no está agrandada 1 % (se reescalaba en cada cuadro); el agrandado queda solo
     al pasar el mouse en PC. Fundido de carga más corto. */
.game__media img { transform: none; transition: opacity .18s; }
@media (hover: hover) and (pointer: fine) {
    .game__media img { transition: opacity .18s, transform .25s var(--ease); }
}
.game__media img.is-instant { transition: none; }
/* Cinta de ganadores: detenida mientras está fuera de pantalla */
.rail--cinta.is-fuera .wtrack { animation-play-state: paused; }

/* Tema claro: los logos de proveedores (muchos son blancos, p. ej. Pragmatic) pasan a oscuro para que se vean.
   invert + hue-rotate: el blanco queda negro y los colores conservan su tono. */
:root[data-theme="light"] :is(.pchip img, .sprov__logo img, .ft__prov img) { filter: invert(1) hue-rotate(180deg); }

/* Teléfono: SIN lupa en el encabezado (en todas las páginas). Se busca con la barra "Buscar en HOTBET"
   del inicio y con los buscadores de cada sección. El grupo de la derecha queda pegado al borde. */
@media (max-width: 991px) {
    .topbar .topbar__search { display: none !important; }
    .topbar .topbar__right { margin-left: auto; }
}

/* Teléfono SIN sesión: también el botón claro/oscuro (después de "Registro"). */
@media (max-width: 991px) {
    .topbar:not(.topbar--auth) .topbar__theme { display: grid; place-items: center; order: 9; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%;
        background: rgba(255, 255, 255, .08); border: 0; color: var(--text); }
    .topbar:not(.topbar--auth) .topbar__theme .ic { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
    :root[data-theme="light"] .topbar:not(.topbar--auth) .topbar__theme { background: rgba(0, 0, 0, .05); }
}

/* ===== Mi cuenta → Datos personales ===== */
.datos { display: grid; gap: calc(var(--u) * 22); }
@media (min-width: 992px) { .datos { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .datos > .dcard:first-child { grid-row: span 2; } }
.dcard { display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 22); border-radius: calc(var(--u) * 18); background: var(--surface); border: 1px solid var(--line); }
.dcard__t { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 17)); font-weight: 800; color: var(--text); }
.dcard__t .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--primary); }
.dform { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.dform__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
@media (max-width: 380px) { .dform__row { grid-template-columns: 1fr; } }
.dform .field { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.dform .field__label, .dcard .field__label { font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 600; color: var(--text-2); }
.dform .field__box { width: 100%; height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: var(--surface-2, rgba(255, 255, 255, .06)); border: 1px solid var(--line); color: var(--text); font-size: max(10px, calc(var(--u) * 15)); }
.dform .field__box:focus { outline: none; border-color: var(--primary); }
.dcard .field--ro { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .03); border: 1px dashed var(--line); }
.dcard .field--ro b { font-size: max(10px, calc(var(--u) * 15)); color: var(--text); word-break: break-all; }
.dcard small.muted { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: max(10px, calc(var(--u) * 12.5)); }
.dcard small.muted .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.dform__nota { margin-top: calc(var(--u) * -6); }
.field__pw { position: relative; display: block; }
.field__pw .field__box { padding-right: calc(var(--u) * 46); }
.field__pw .field__eye { position: absolute; right: calc(var(--u) * 6); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 36); height: calc(var(--u) * 36); display: grid; place-items: center; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.field__pw .field__eye .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.dreglas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 12); }
.dreglas li { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: max(10px, calc(var(--u) * 12.5)); color: var(--muted); }
.dreglas .ic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); padding: 1px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: transparent; }
.dreglas li.is-ok { color: var(--text); }
.dreglas li.is-ok .ic { background: #22c55e; color: #fff; }
:root[data-theme="light"] .dcard .field--ro { background: rgba(0, 0, 0, .02); }
:root[data-theme="light"] .dreglas .ic { background: rgba(0, 0, 0, .08); }

/* Slots, Casino en vivo y Crash (solo teléfono): barra larga "Buscar en HOTBET" debajo de las pestañas de
   sección, igual que en el inicio; se ocultan el buscador de la sección y el botón "Proveedores" (este queda
   visible solo si hay un proveedor elegido, para poder quitarlo). */
.sbar2 { display: none; }
@media (max-width: 991px) {
    /* Dos buscadores blancos, mitad y mitad: "Buscar juego" y "Buscar proveedor" (estilo de la barra del inicio). */
    .page--catalog .sbar2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin: calc(var(--u) * 2) 0 calc(var(--u) * 6); }
    .page--catalog .sbar2__b { display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 12); border: 0; border-radius: calc(var(--u) * 999);
        background: #fff; color: #8a8a8a; font-size: max(10px, calc(var(--u) * 14)); font-weight: 500; text-align: left; box-shadow: 0 1px calc(var(--u) * 2) rgba(0, 0, 0, .15); cursor: pointer; }
    .page--catalog .sbar2__b .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; color: #8a8a8a; }
    .page--catalog .sbar2__b span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .page--catalog .sbar2__b:active { background: #f1f1f1; }
    :root[data-theme="light"] .page--catalog .sbar2__b { border: 1px solid rgba(0, 0, 0, .12); box-shadow: none; }
    .page--catalog .toolbar .searchbox, .page--catalog .toolbar .toolbar__cancel { display: none; }
    .page--catalog .toolbar .toolbar__prov:not(.is-on) { display: none; }
}
/* Buscador: proveedores que coinciden con lo escrito, arriba de los juegos */
.sres-provs { margin-bottom: calc(var(--u) * 14); }
.sres-provs__h { font-size: max(10px, calc(var(--u) * 13)); font-weight: 700; color: var(--text-2); margin: 0 0 calc(var(--u) * 8); }
.sres-provs .sprov__g { margin: 0; }

/* PC, tema oscuro: la lupa del encabezado con fondo blanco (como las barras blancas de búsqueda). */
@media (min-width: 992px) {
    :root:not([data-theme="light"]) .topbar .topbar__search { background: #fff; border-color: #fff; color: #6b6b6b; }
    :root:not([data-theme="light"]) .topbar .topbar__search .ic { color: #6b6b6b; }
    :root:not([data-theme="light"]) .topbar .topbar__search:hover { background: #f1f1f1; border-color: #f1f1f1; }
}

/* PC, tema oscuro: buscador de Slots / Casino en vivo / Crash y botón "Proveedores" con fondo blanco
   (igual que la lupa del encabezado). Se mantienen el borde de color al escribir y el estado elegido. */
@media (min-width: 992px) {
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox { background: #fff; border-color: #fff; color: #6b6b6b; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox .ic { color: #8a8a8a; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox input { color: #1a1a1a; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox input::placeholder { color: #8a8a8a; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox:focus-within { border-color: rgba(var(--primary-rgb), .9); }
    :root:not([data-theme="light"]) .page--catalog .toolbar .searchbox__clear { color: #6b6b6b; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .toolbar__prov { background: #fff; border-color: #fff; color: #1a1a1a; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .toolbar__prov .ic { color: #6b6b6b; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .toolbar__prov:hover { background: #f1f1f1; }
    :root:not([data-theme="light"]) .page--catalog .toolbar .toolbar__prov.is-on { background: #fff; border-color: var(--primary); color: #1a1a1a; }
}
/* Datos personales: fecha en tres selectores (Día · Mes · Año) */
.dfecha { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * 8); }
.dfecha .field__box { padding: 0 calc(var(--u) * 10); min-width: 0; }
/* Datos personales: etiqueta "Requiere completarse" en los campos que faltan */
.dreq { display: inline-flex; align-items: center; margin-left: calc(var(--u) * 6); padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: calc(var(--u) * 999); font-size: max(10px, calc(var(--u) * 11)); font-weight: 700;
    color: #fff; background: var(--primary); vertical-align: middle; }

/* ===== Perfil (Mi cuenta): estética limpia ===== */
.page--account { gap: calc(var(--u) * 18); }
.pf-title { font-size: max(10px, calc(var(--u) * 22)); font-weight: 800; margin: calc(var(--u) * 2) 0 0; color: var(--text); }
.page--account .tabs { display: flex; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 999); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.page--account .tabs::-webkit-scrollbar { display: none; }
.page--account .tabs__item { flex: 1 0 auto; justify-content: center; height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 999); border: 0; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.page--account .tabs__item.is-on { background: var(--primary); color: #fff; }
.page--account .tabs__item.is-on .ic { color: #fff; }
.page--account .tabs__item::after { display: none !important; }
.pf { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }

.pf-hola { margin: 0; font-size: max(10px, calc(var(--u) * 20)); color: var(--text); }
.pf-hola b { font-weight: 800; }
.pf-icon-btn { width: calc(var(--u) * 36); height: calc(var(--u) * 36); display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--text); cursor: pointer; }
.pf-icon-btn .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.pf-icon-btn.is-girando .ic { animation: pfGira .8s linear infinite; }
@keyframes pfGira { to { transform: rotate(360deg); } }
.pf-bal { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 18); background: var(--bg, #14161a); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0, 0, 0, .25); }
.pf-bal__ic { width: calc(var(--u) * 44); height: calc(var(--u) * 44); display: grid; place-items: center; border-radius: 50%; margin-bottom: calc(var(--u) * 10);
    background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.pf-bal__ic .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.pf-bal__row { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.pf-bal__val { font-size: max(10px, calc(var(--u) * 28)); font-weight: 800; color: var(--text); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.pf-ojo { width: calc(var(--u) * 32); height: calc(var(--u) * 32); display: grid; place-items: center; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.pf-ojo .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.pf-bal__lbl { font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
.pf-bal__extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 6) calc(var(--u) * 14); margin-top: calc(var(--u) * 12); padding-top: calc(var(--u) * 12); border-top: 1px solid var(--line); font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
.pf-bal__extra b { color: var(--text); font-weight: 700; }
.pf-link { border: 0; background: none; padding: 0 0 0 calc(var(--u) * 4); color: var(--primary); font-weight: 700; font-size: max(10px, calc(var(--u) * 13)); cursor: pointer; }
.pf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.pf-btn { height: calc(var(--u) * 46); border: 0; border-radius: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 14)); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; }
.pf-btn--dark { background: #0f1115; color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.pf-btn--green { background: var(--success, #22c55e); color: #fff; }
.pf-btn:active { transform: scale(.98); }
.pf-h2 { margin: calc(var(--u) * 6) 0 0; font-size: max(10px, calc(var(--u) * 18)); font-weight: 800; color: var(--text); }
.pf-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 16) calc(var(--u) * 8); padding: calc(var(--u) * 18) calc(var(--u) * 10); border-radius: calc(var(--u) * 22); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 768px) { .pf-acts { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pf-act { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); border: 0; background: none; padding: 0; color: var(--text); text-decoration: none; cursor: pointer; text-align: center; }
.pf-act__ic { position: relative; width: calc(var(--u) * 54); height: calc(var(--u) * 54); display: grid; place-items: center; border-radius: 50%;
    background: var(--bg, #14161a); color: var(--primary); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0, 0, 0, .22); }
.pf-act__ic .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.pf-act__n { position: absolute; top: calc(var(--u) * -2); right: calc(var(--u) * -2); min-width: calc(var(--u) * 18); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 999); background: var(--primary); color: #fff; font-size: max(10px, calc(var(--u) * 11)); font-weight: 800; display: grid; place-items: center; }
.pf-act__t { font-size: max(10px, calc(var(--u) * 12)); font-weight: 600; line-height: 1.25; color: var(--text); }
.pf-act:active .pf-act__ic { transform: scale(.95); }
/* Mensajes y Datos personales: mismas tarjetas limpias */
.page--account .msg { border: 0; border-radius: calc(var(--u) * 16); background: var(--surface); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, .14); }
.page--account .dcard { border: 0; border-radius: calc(var(--u) * 22); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, .14); }
.page--account .dcard .field--ro { border-style: solid; border-color: transparent; background: var(--bg, #14161a); }
/* Tema claro (como las referencias): fondo gris claro, tarjetas blancas con sombra suave */
:root[data-theme="light"] .page--account .tabs { background: #fff; border-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .pf-acts, :root[data-theme="light"] .page--account .dcard,
:root[data-theme="light"] .page--account .msg { background: #fff; border-color: rgba(0, 0, 0, .05); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(20, 30, 50, .06); }
:root[data-theme="light"] .pf-bal { background: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(20, 30, 50, .10); }
:root[data-theme="light"] .pf-act__ic { background: #fff; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(20, 30, 50, .10); }
:root[data-theme="light"] .pf-icon-btn { background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .pf-btn--dark { background: #161a22; border-color: #161a22; }
:root[data-theme="light"] .page--account .dcard .field--ro { background: #f4f6f9; }

/* Pestañas del perfil en el teléfono: sin íconos y más compactas, para que entren las tres */
@media (max-width: 480px) {
    .page--account .tabs__item { padding: 0 calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 14)); gap: calc(var(--u) * 6); }
    .page--account .tabs__item > .ic { display: none; }
}

/* Datos personales: título afuera de la tarjeta (como la referencia) */
.dbloque { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.dbloque .pf-h2 { margin: 0 calc(var(--u) * 2); }
@media (min-width: 992px) { .datos { align-items: start; } .datos > .dbloque:first-child { grid-row: auto; } }

/* ===== Área de cuenta (como Betano): menú propio, tarjeta de saldo, tarjetas con ilustración y accesos ===== */
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 16); position: relative; }
.acc-main { min-width: 0; }
.acc-top { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 14); }
.acc-title { margin: 0; font-size: max(10px, calc(var(--u) * 22)); font-weight: 800; color: var(--text); }
.acc-burger { width: calc(var(--u) * 40); height: calc(var(--u) * 40); display: grid; place-items: center; border: 0; border-radius: calc(var(--u) * 12); background: var(--surface); color: var(--text); cursor: pointer; }
.acc-burger .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
/* Menú de la cuenta */
.acc-nav { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 18) calc(var(--u) * 14); border-radius: calc(var(--u) * 22); background: var(--surface); }
.acc-nav__head { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 6); border-bottom: 1px solid var(--line); }
.acc-nav__av { flex: none; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; }
.acc-nav__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acc-nav__who b { color: var(--text); font-size: max(10px, calc(var(--u) * 15)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-nav__who small { color: var(--text-2); font-size: max(10px, calc(var(--u) * 12)); }
.acc-nav__x { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer; }
.acc-nav__list { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.acc-nav__it { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 999); color: var(--text); font-weight: 700; font-size: max(10px, calc(var(--u) * 15)); text-decoration: none; }
.acc-nav__it .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--primary); flex: none; }
.acc-nav__it:hover { background: rgba(255, 255, 255, .05); }
.acc-nav__it.is-on { background: var(--primary); color: #fff; }
.acc-nav__it.is-on .ic { color: #fff; }
.acc-nav__it i { margin-left: auto; font-style: normal; }
.acc-nav__it.is-on .count { background: #fff; color: var(--primary); }
.acc-nav__out { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 4); border: 0; background: none; color: var(--text-2); font-weight: 600; font-size: max(10px, calc(var(--u) * 14)); cursor: pointer; }
.acc-nav__out .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
@media (max-width: 991px) {
    .acc-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1300; width: min(84vw, calc(var(--u) * 320)); border-radius: 0 calc(var(--u) * 22) calc(var(--u) * 22) 0;
        padding: calc(env(safe-area-inset-top, 0px) + calc(var(--u) * 16)) calc(var(--u) * 14) calc(env(safe-area-inset-bottom, 0px) + calc(var(--u) * 16)); transform: translateX(-105%); transition: transform .25s var(--ease, ease);
        box-shadow: calc(var(--u) * 8) 0 calc(var(--u) * 30) rgba(0, 0, 0, .35); overflow-y: auto; }
    .acc.is-open .acc-nav { transform: none; }
    .acc-veil { position: fixed; inset: 0; z-index: 1299; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .acc.is-open .acc-veil { opacity: 1; pointer-events: auto; }
    .acc-side { display: none; }
}
@media (min-width: 992px) {
    .acc { grid-template-columns: calc(var(--u) * 250) minmax(0, 1fr); align-items: start; gap: calc(var(--u) * 24); }
    .acc.acc--resumen { grid-template-columns: calc(var(--u) * 250) minmax(0, 1fr) calc(var(--u) * 118); }
    .acc-nav { position: sticky; top: calc(var(--u) * 84); min-height: min(calc(var(--u) * 560), calc(100vh - calc(var(--u) * 110))); }
    .acc-burger, .acc-nav__x, .acc-veil { display: none; }
    .acc-side { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 24); padding-top: calc(var(--u) * 58); }
    .acc-side .pf-act__t { font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 700; }
    .acc-acts-m { display: none !important; }
}
/* Tarjeta grande: saludo + saldo, borde derecho del color de la moneda y patrón de triángulos */
.acc-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 18) calc(var(--u) * 16); border-radius: calc(var(--u) * 22); background: var(--surface); }
.acc-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: var(--primary); opacity: .85; pointer-events: none;
    -webkit-mask: url("../img/promo/triangulos.svg") right top / 100% 100% no-repeat; mask: url("../img/promo/triangulos.svg") right top / 100% 100% no-repeat; }
.acc-hero > * { position: relative; }
.acc-hero__l { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); }
.acc-upd { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) 0; border: 0; background: none; color: var(--text-2); font-weight: 600; font-size: max(10px, calc(var(--u) * 14)); cursor: pointer; }
.acc-upd .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.acc-upd.is-girando .ic { animation: pfGira .8s linear infinite; }
.acc-hero__r { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.acc-hero__r .pf-btns { margin-top: 0; }
@media (min-width: 992px) {
    .acc-hero { flex-direction: row; align-items: stretch; min-height: calc(var(--u) * 270); padding: calc(var(--u) * 28) calc(var(--u) * 40) calc(var(--u) * 28) calc(var(--u) * 30); }
    .acc-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--u) * 14); background: var(--primary); }
    .acc-hero::before { width: 50%; }
    .acc-hero__l { flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; }
    .acc-hero__l .pf-hola { font-size: max(10px, calc(var(--u) * 24)); }
    .acc-hero__r { width: min(calc(var(--u) * 400), 52%); }
}
/* Tarjetas "Mis bonos" y "Mi nivel" con ilustración */
.acc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 4); }
@media (min-width: 768px) { .acc-cards { grid-template-columns: 1fr 1fr; } }
.acc-blk { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.acc-blk .pf-h2 { margin: 0 calc(var(--u) * 2); }
.acc-card { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 14); min-height: calc(var(--u) * 160); padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 14) 0; overflow: hidden; border-radius: calc(var(--u) * 20); background: var(--surface); color: var(--text); text-decoration: none; }
.acc-card__art { position: relative; flex: 0 0 42%; align-self: stretch; display: grid; place-items: center; }
.acc-card__art::before { content: ""; position: absolute; inset: 0; background: var(--text); opacity: .08; transform: scaleX(-1);
    -webkit-mask: url("../img/promo/triangulos.svg") left top / 100% 100% no-repeat; mask: url("../img/promo/triangulos.svg") left top / 100% 100% no-repeat; }
.acc-card__art img { position: relative; width: 82%; max-width: calc(var(--u) * 150); height: auto; filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 16) rgba(0, 0, 0, .35)); }
.acc-card__body { display: flex; flex-direction: column; gap: calc(var(--u) * 3); flex: 1; min-width: 0; }
.acc-card__lbl { font-size: max(10px, calc(var(--u) * 12.5)); font-weight: 600; color: var(--text-2); }
.acc-card__big { font-size: max(10px, calc(var(--u) * 21)); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.acc-card__sub { font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
.acc-card__cta { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 8); color: var(--primary); font-weight: 700; font-size: max(10px, calc(var(--u) * 13.5)); }
.acc-card__cta .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.acc-bar { display: block; height: calc(var(--u) * 6); margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); border-radius: calc(var(--u) * 99); background: rgba(255, 255, 255, .1); overflow: hidden; }
.acc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .6s ease; }
.acc-acts-m { margin-top: calc(var(--u) * 4); }
/* Tema claro (como las referencias) */
:root[data-theme="light"] .acc-nav, :root[data-theme="light"] .acc-hero, :root[data-theme="light"] .acc-card, :root[data-theme="light"] .acc-burger { background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 14) rgba(20, 30, 50, .07); }
:root[data-theme="light"] .acc-nav__it:hover { background: rgba(0, 0, 0, .04); }
:root[data-theme="light"] .acc-nav__x { background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .acc-bar { background: rgba(0, 0, 0, .08); }
:root[data-theme="light"] .acc-card__art img { filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 16) rgba(20, 30, 50, .18)); }
/* Área de cuenta: sin panel de fondo (las tarjetas se recortan sobre el fondo del sitio, como la referencia) */
.page--account.acc { background: transparent; padding: 0; border-radius: 0; box-shadow: none; border: 0; }
/* Teléfono: accesos rápidos sin recuadro, compactos, justo debajo de Retiro / Depósito */
.acc-acts-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 6); margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); padding: 0; background: none; border: 0; box-shadow: none; }
.acc-acts-m .pf-act { gap: calc(var(--u) * 6); }
.acc-acts-m .pf-act__ic { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.acc-acts-m .pf-act__ic .ic { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.acc-acts-m .pf-act__t { font-size: max(10px, calc(var(--u) * 11.5)); }
/* Menú de la cuenta: @usuario y el ID por separado */
.acc-nav__who { gap: calc(var(--u) * 2); }
.acc-nav__id { align-self: flex-start; margin-top: calc(var(--u) * 3); padding: 1px calc(var(--u) * 8); border-radius: calc(var(--u) * 999); font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; color: var(--text-2); background: rgba(255, 255, 255, .07); }
:root[data-theme="light"] .acc-nav__id { background: rgba(0, 0, 0, .05); }
/* Datos personales en un solo formulario */
.datos.datos--uno { display: block; }
@media (min-width: 992px) { .datos.datos--uno .dbloque { max-width: calc(var(--u) * 680); } }
.dclave { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 8); padding-top: calc(var(--u) * 16); border-top: 1px solid var(--line); }
.dclave span { font-size: max(10px, calc(var(--u) * 15)); font-weight: 800; color: var(--text); }
.dclave small { font-size: max(10px, calc(var(--u) * 12.5)); }
/* Teléfono: el menú de la cuenta cerrado queda oculto de verdad (no se enfoca ni cuenta como contenido fuera de pantalla) */
@media (max-width: 991px) {
    .acc-nav { display: none; transform: none; transition: none; }
    .acc.is-open .acc-nav { display: flex; animation: accNavEntra .25s var(--ease, ease) both; }
}
@keyframes accNavEntra { from { transform: translateX(-105%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc.is-open .acc-nav { animation: none; } }
/* Datos personales: confirmar el correo nuevo con el código de 6 dígitos */
.dverif { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.dverif__t { display: flex; align-items: center; gap: calc(var(--u) * 8); margin: 0; font-size: max(10px, calc(var(--u) * 14)); color: var(--text); }
.dverif__t .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--primary); flex: none; }
.dverif__t b { word-break: break-all; }
.dverif__s { margin: 0; font-size: max(10px, calc(var(--u) * 12.5)); color: var(--text-2); }
.dverif__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 8); }
.dverif__in { letter-spacing: calc(var(--u) * 4); font-weight: 700; text-align: center; }
.dverif__row .btn { height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 18); }
.dverif__re { align-self: flex-start; padding: 0; }
.dverif__re:disabled { color: var(--text-2); cursor: default; }
.dverif__t { display: block; line-height: 1.45; }
.dverif__t .ic { display: inline-block; vertical-align: calc(var(--u) * -3); margin-right: calc(var(--u) * 6); }
.dverif__in { letter-spacing: 0; text-align: left; font-weight: 500; }
.dverif__in:not(:placeholder-shown) { letter-spacing: calc(var(--u) * 6); text-align: center; font-weight: 800; }

/* Torneos: si la imagen no es ancha (cuadrada o vertical), se muestra ENTERA sobre un fondo desenfocado de sí misma,
   en lugar de recortarla para llenar la tarjeta (carrusel de Torneos y bloque del inicio). */
.tcard__hero.is-encaja, .tw__top.is-encaja { overflow: hidden; }
.tcard__hero.is-encaja::before, .tw__top.is-encaja::before { content: ""; position: absolute; inset: calc(var(--u) * -12); z-index: 0;
    background: var(--tfondo) center / cover no-repeat; filter: blur(calc(var(--u) * 16)) saturate(1.1); opacity: .65; }
.tcard__hero.is-encaja img { position: relative; z-index: 0; object-fit: contain; }
.tw__top.is-encaja .tw__art { z-index: 0; object-fit: contain; object-position: center; }
.tcard__hero.is-encaja > :not(img) { position: relative; z-index: 1; }
.tw__top.is-encaja > :not(img):not(.tw__fade) { position: relative; z-index: 1; }
.tcard__hero.is-encaja .tcard__badges, .tcard__hero.is-encaja .tcard__title { position: absolute; }
/* Detalle del torneo: banner más alto en PC (no una franja finita) y encaje automático como las tarjetas */
@media (min-width: 992px) { .thero { min-height: calc(var(--u) * 280); display: flex; align-items: flex-end; } }
.thero.is-encaja::before { content: ""; position: absolute; inset: calc(var(--u) * -12); z-index: 0; background: var(--tfondo) center / cover no-repeat; filter: blur(calc(var(--u) * 16)) saturate(1.1); opacity: .65; }
.thero.is-encaja img { object-fit: contain; z-index: 0; }
.thero.is-encaja::after { z-index: 0; }

/* Torneos · tarjeta: SIEMPRE 16:9 (antes la imagen definía la altura y una cuadrada la volvía cuadrada).
   Con un banner 1280×720 queda exacta; si la imagen no es ancha, se ve entera sobre su fondo desenfocado. */
.tcard__hero { overflow: hidden; }
.tcard__hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tcard__hero.is-encaja img { position: absolute; }
/* Torneos · detalle: el banner ENTERO a la derecha sobre un fondo desenfocado de sí mismo (en PC el encabezado es
   muy ancho y un 16:9 se recortaba arriba y abajo); el texto queda a la izquierda. */
.thero.thero--img::before { content: ""; position: absolute; inset: calc(var(--u) * -16); z-index: 0; background: var(--tfondo) center / cover no-repeat; filter: blur(calc(var(--u) * 18)) saturate(1.1); opacity: .7; }
.thero.thero--img img { z-index: 0; object-fit: contain; object-position: right center; }
.thero.thero--img::after { z-index: 0; }
.thero.thero--img .thero__txt { z-index: 1; }
/* Detalle de torneo en el teléfono: el banner llena el encabezado (con 16:9 casi no se recorta) y el degradado deja
   leer el nombre; el banner entero a la derecha con fondo desenfocado queda solo para pantallas anchas. */
@media (max-width: 767px) {
    .thero.thero--img::before { display: none; }
    .thero.thero--img img { object-fit: cover; object-position: center; }
}
/* Torneos: estado "Inscripto" al instante */
.tcard__ok { color: #22c55e; border-color: rgba(34, 197, 94, .45); gap: calc(var(--u) * 6); }
.tcard__ok .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

/* Depósito por transferencia (ARS): "Abrir Mercado Pago" (copia el CBU/CVU y abre la app en Transferencias) */

/* Depósito: el CBU/CVU (22 dígitos) entra en una línea en el teléfono */

/* ===== Depósito ARS con Mercado Pago (estilo checkout): monto, CVU/CBU, pie fijo y hoja "CVU/CBU copiado" ===== */

/* pie: Mercado Pago principal + "Ya transferí" */
.sheet__foot:has([data-mp]) { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }

/* hoja "CVU/CBU copiado" */

/* ===================== Depósito: flujo nuevo ===================== */
/* Paso 1: grilla de logos */

/* Paso 2: documento + importe */

/* Paso 2b: cargando */

/* Paso 3: página de pago */

/* pie de la página de pago */

/* Paso 4: aviso enviado */

/* Teléfono: la página de pago y el aviso en BLANCO y AMARILLO (como la referencia), en cualquier tema */

/* Depósito · transferencia bancaria (como la referencia): pasos, "Copiar detalles bancarios", reloj de espera */

 

/* ===================== Depósito: SIEMPRE CLARO (todos los pasos, teléfono y PC, cualquier tema) ===================== */

/* ===== Página de pago blanca y amarilla (como la referencia), para todos los métodos ===== */

 

/* Página final del depósito: "Recibimos tu aviso" + círculo girando "Verificando el estado" (pasa a check al acreditarse) */

/* Transferencia bancaria (ARS): "Ya transferí" es la acción principal → verde */

/* ===== Depósito ARS · Mercado Pago (como la referencia): blanco, tarjeta con bordes azules y barra amarilla fija ===== */

 

/* barra amarilla fija abajo */

/* Logo oficial de Mercado Pago en la barra amarilla y en la hoja */

/* ID de pago (arriba) */

/* Ventana "Instrucciones para transferir" (centrada, como la referencia) */

/* La ventana abre con el CBU/alias YA copiado: se ve "✓ Copiado" */

/* Mercado Pago: desplegable "Instrucciones de pago" (reemplaza ATENCIÓN) */

/* Grilla de métodos: logos de marca (Mercado Pago, Transferencia, Binance) */

.dep-tile__logo img[src*="metodo-binance"], .dep-logo img[src*="metodo-binance"] { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.dep-logo img[src*="metodo-binance"] { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }

/* Bonos: más aire entre Giros gratis y Preguntas frecuentes */
.bsec--faq { margin-top: calc(var(--u) * 28); padding-top: calc(var(--u) * 24); border-top: 1px solid var(--line); }
@media (min-width: 992px) { .bsec--faq { margin-top: calc(var(--u) * 40); padding-top: calc(var(--u) * 32); } }
/* Bonos: Preguntas frecuentes un poco más chicas */
.bsec--faq .bsec__title { font-size: max(10px, calc(var(--u) * 17)); }
.bsec--faq .faq { gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); }
.bsec--faq .faq__item { border-radius: calc(var(--u) * 13); }
.bsec--faq .faq__item summary { padding: calc(var(--u) * 11) calc(var(--u) * 14); font-size: max(10px, calc(var(--u) * 13.5)); }
.bsec--faq .faq__item summary .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.bsec--faq .faq__item p { font-size: max(10px, calc(var(--u) * 13)); padding: 0 calc(var(--u) * 14) calc(var(--u) * 12); margin: 0; }

/* ===================== DEPÓSITO (de nuevo dentro del CSS principal: sin archivo aparte que pueda fallar) ===================== */
/* Estilos del depósito: se cargan solo al abrir la ventana de depósito (features/deposit.js). */
.dep-mp__btn { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); width: 100%; height: calc(var(--u) * 52); border: 0; border-radius: calc(var(--u) * 14);
    background: #009EE3; color: #fff; font-size: max(10px, calc(var(--u) * 16)); font-weight: 800; cursor: pointer; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 158, 227, .35); }
.dep-mp__btn .ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.dep-mp__btn:active { transform: scale(.98); }
.dep-mp__fb { margin: calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 13)); line-height: 1.45; color: var(--text);
    background: rgba(0, 158, 227, .12); border: 1px solid rgba(0, 158, 227, .35); }
@media (max-width: 480px) {
.dep-big b { font-size: clamp(max(10px, calc(var(--u) * 12.5)), 3.75vw, max(10px, calc(var(--u) * 17))); letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
}
.mp-head { display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 2); }
.mp-head__monto { font-size: max(10px, calc(var(--u) * 30)); font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.mp-head__aviso { display: flex; align-items: center; gap: calc(var(--u) * 8); margin: 0; padding: calc(var(--u) * 9) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2);
    background: rgba(255, 196, 0, .10); border: 1px solid rgba(255, 196, 0, .28); }
.mp-head__aviso .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #ffc400; flex: none; }
.mp-head__aviso b { color: #ffc400; }
.mp-card { display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: var(--surface-2, rgba(255, 255, 255, .05)); border: 1px solid var(--line); }
.mp-card__row { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.mp-card__row > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mp-card__row small { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.mp-card__row b { font-size: max(10px, calc(var(--u) * 15.5)); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mp-card__ic { flex: none; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 10); display: grid; place-items: center; background: rgba(0, 158, 227, .14); color: #009EE3; }
.mp-card__ic .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.mp-card__copy { flex: none; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 10); display: grid; place-items: center; border: 0; background: rgba(0, 158, 227, .14); color: #009EE3; cursor: pointer; }
.mp-card__copy .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.mp-card__copy.is-copied { background: rgba(34, 197, 94, .18); color: #22c55e; }
.dep-pay--mp { gap: calc(var(--u) * 14); }
.mp-ya { height: calc(var(--u) * 46); }
.dep-mp__btn .ic { order: 2; }
.mp-hoja { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
.mp-hoja__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: mpVelo .2s ease both; }
@keyframes mpSube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mpVelo { from { opacity: 0; } to { opacity: 1; } }
:root[data-theme="light"] .mp-card { background: #f4f6f9; border-color: rgba(0, 0, 0, .06); }
.mp-card__row b.mp-cbu { font-size: clamp(max(10px, calc(var(--u) * 12.5)), 3.7vw, max(10px, calc(var(--u) * 16))); letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
.dep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 10); }
@media (min-width: 992px) {
.dep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dep-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 112); padding: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 12);
    border-radius: calc(var(--u) * 16); background: var(--surface-2, rgba(255, 255, 255, .05)); border: calc(var(--u) * 1.5) solid var(--line); color: var(--text); cursor: pointer; text-align: center; }
.dep-tile.is-on { border-color: var(--primary); }
.dep-tile__logo { height: calc(var(--u) * 40); display: grid; place-items: center; }
.dep-tile__logo img { max-height: calc(var(--u) * 40); max-width: calc(var(--u) * 120); object-fit: contain; }
.dep-tile__logo .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: var(--primary); }
.dep-tile__name { font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 700; line-height: 1.2; }
.dep-tile .dep-tag { font-size: max(10px, calc(var(--u) * 10.5)); }
.dep-tile__last { position: absolute; top: -1px; right: calc(var(--u) * 10); padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 0 0 calc(var(--u) * 8) calc(var(--u) * 8); background: var(--primary); color: #fff; font-size: max(10px, calc(var(--u) * 10)); font-weight: 800; }
.dep-info { display: flex; gap: calc(var(--u) * 8); margin: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 12.5)); line-height: 1.4; color: var(--text-2);
    background: rgba(0, 158, 227, .08); border: 1px solid rgba(0, 158, 227, .25); }
.dep-info .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; color: #009EE3; margin-top: 1px; }
.dep-f { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.dep-f .dep-amt { margin: 0; }
.dep-rango { margin: calc(var(--u) * -4) calc(var(--u) * 2) 0; font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.dep-quick--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.dep-quick--3 button { white-space: nowrap; font-size: max(10px, calc(var(--u) * 13.5)); }
.dep-go { background: #22c55e; border-color: #22c55e; color: #fff; }
.pg-carga { min-height: calc(var(--u) * 300); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 10); text-align: center; }
.pg-carga b { font-size: max(10px, calc(var(--u) * 17)); color: var(--text); }
.pg-carga small { font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
.pg-carga__spin { width: calc(var(--u) * 54); height: calc(var(--u) * 54); border-radius: 50%; border: calc(var(--u) * 4) solid rgba(34, 197, 94, .2); border-top-color: #22c55e; animation: pgGira .8s linear infinite; }
.pg-carga.is-ok .pg-carga__spin { animation: none; border-color: #22c55e; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat; }
@keyframes pgGira { to { transform: rotate(360deg); } }
.pg { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.pg-row { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) 0; border-bottom: 1px solid var(--line); }
.pg-row:last-child { border-bottom: 0; }
.pg-row > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pg-row small { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.pg-row b { font-size: max(10px, calc(var(--u) * 16)); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pg-copy { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 9); display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .08); color: var(--text-2); cursor: pointer; }
.pg-copy .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.pg-copy.is-copied { background: rgba(34, 197, 94, .18); color: #22c55e; }
.pg-ref summary { cursor: pointer; font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); padding: calc(var(--u) * 4) calc(var(--u) * 2); }
.pg-ref .field { margin-top: calc(var(--u) * 8); }
.pg-mp__logo { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.pg-mp__logo svg { width: calc(var(--u) * 34); height: calc(var(--u) * 24); }
.pg-mp__logo b { font-size: max(10px, calc(var(--u) * 11)); line-height: .95; font-weight: 800; color: #2d3277; text-align: left; letter-spacing: -.2px; }
.pg-cancel { display: block; text-align: center; padding: calc(var(--u) * 6); border: 0; background: none; font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none; }
.pg-ok { align-items: center; text-align: center; padding-top: calc(var(--u) * 8); }
.pg-ok h3 { margin: calc(var(--u) * 6) 0 0; font-size: max(10px, calc(var(--u) * 20)); color: var(--text); }
.pg-ok__monto { margin: 0; font-size: max(10px, calc(var(--u) * 26)); font-weight: 800; color: var(--text); }
.pg-ok__met { margin: calc(var(--u) * -6) 0 calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
.pg-ok__sm { margin: 0; font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); }
@media (max-width: 991px) {
.modal__sheet:has(.pg), .modal__sheet:has(.pg-carga) { background: #f4f5f7; color: #1b1f2a; }
.modal__sheet:has(.pg) .sheet__head, .modal__sheet:has(.pg-carga) .sheet__head { background: #f4f5f7; color: #1b1f2a; }
.modal__sheet:has(.pg) .sheet__title, .modal__sheet:has(.pg-carga) .sheet__title { color: #1b1f2a; }
.modal__sheet:has(.pg) .icon-btn, .modal__sheet:has(.pg-carga) .icon-btn { background: #fff; color: #1b1f2a; }
.modal__sheet:has(.pg) .sheet__foot { background: #f4f5f7; border-top-color: rgba(0, 0, 0, .06); }
.pg, .pg-carga { --text: #1b1f2a; --text-2: #6b7280; --line: rgba(0, 0, 0, .07); }
.pg-copy { background: #f1f3f6; color: #6b7280; }
.modal__sheet:has(.pg-ok) .sheet__foot [data-close] { background: #22c55e; color: #fff; }
.modal__sheet:has(.pg) .dep-up { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1b1f2a; }
.modal__sheet:has(.pg) .field__box { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1b1f2a; }
.modal__sheet:has(.pg) .field__box input { color: #1b1f2a; }
}
.pg-row--ic { gap: calc(var(--u) * 12); }
.pg-ic { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--text-2); }
.pg-ic .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.pg-row--ic:last-child .pg-ic { background: #4f8cff; }
.modal__sheet.sheet--dep {
    --surface: #ffffff; --surface-2: #ffffff; --bg: #f4f5f7; --text: #1b1f2a; --text-2: #6b7280; --muted: #9aa1ad; --line: rgba(0, 0, 0, .08);
    background: #f4f5f7; color: #1b1f2a; color-scheme: light;
}
.sheet--dep .sheet__head, .sheet--dep .sheet__foot { background: #f4f5f7; color: #1b1f2a; border-color: rgba(0, 0, 0, .06); }
.sheet--dep .sheet__title { color: #1b1f2a; }
.sheet--dep .icon-btn { background: #fff; color: #1b1f2a; box-shadow: 0 1px calc(var(--u) * 4) rgba(0, 0, 0, .08); }
.sheet--dep .cur-pill { background: #fff; color: #1b1f2a; border-color: rgba(0, 0, 0, .1); }
.sheet--dep .dep-bal { background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(20, 30, 50, .06); color: #1b1f2a; }
.sheet--dep .dep-bal small, .sheet--dep .dep-lbl, .sheet--dep .dep-hint { color: #6b7280; }
.sheet--dep .dep-bal b { color: #1b1f2a; }
.sheet--dep .dep-tile, .sheet--dep .pg-card, .sheet--dep .pg-linea, .sheet--dep .dep-sel {
    background: #fff; border-color: rgba(0, 0, 0, .06); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(20, 30, 50, .06); }
.sheet--dep .dep-tile.is-on { border-color: var(--primary); }
.sheet--dep .dep-tile__name, .sheet--dep .dep-sel b { color: #1b1f2a; }
.sheet--dep .dep-tag { background: rgba(34, 197, 94, .12); color: #15803d; }
.sheet--dep .dep-tag--muted { background: #eef0f3; color: #4b5563; }
.sheet--dep .dep-tag--off { background: #fee2e2; color: #b91c1c; }
.sheet--dep .field__label { color: #374151; }
.sheet--dep .field__box, .sheet--dep .dep-amt { background: #fff; border-color: rgba(0, 0, 0, .12); color: #1b1f2a; }
.sheet--dep .field__box input, .sheet--dep .dep-amt input { color: #1b1f2a; }
.sheet--dep .field__box .ic, .sheet--dep .dep-amt > span { color: #6b7280; }
.sheet--dep .dep-quick button { background: #fff; border: 1px solid rgba(0, 0, 0, .1); color: #1b1f2a; }
.sheet--dep .dep-quick button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.sheet--dep .dep-info { background: #eaf6fd; border-color: #bfe6fb; color: #35506b; }
.sheet--dep .pg-copy { background: #f1f3f6; color: #6b7280; }
.sheet--dep .pg-ic { background: #e9ecf1; color: #4b5563; }
.sheet--dep .sheet__foot [data-close] { background: #22c55e; color: #fff; border: 0; }
.sheet--dep .sheet__head [data-close] { background: #fff; color: #1b1f2a; }
.sheet--dep .dep-up { background: #fff; border-color: rgba(0, 0, 0, .14); color: #1b1f2a; }
.sheet--dep .form__error { color: #b91c1c; }
.sheet--dep .dep-steps i { background: #dfe2e7; }
.sheet--dep .dep-steps i.on { background: var(--primary); }
.sheet--dep .dep-change { color: var(--primary); }
.modal__sheet.sheet--dep:has(.pg--sp) { background: #e4e3e8; }
.sheet--dep:has(.pg--sp) .sheet__head, .sheet--dep:has(.pg--sp) .sheet__foot { background: #e4e3e8; }
.pg--sp { gap: calc(var(--u) * 12); }
.sp-prog { display: flex; flex-direction: column; gap: calc(var(--u) * 8); text-align: center; }
.sp-prog p { margin: 0; font-size: max(10px, calc(var(--u) * 15)); color: #7a7a85; }
.sp-prog p b { color: #1b1f2a; }
.sp-bar { height: calc(var(--u) * 6); border-radius: calc(var(--u) * 999); background: #a9a8b0; overflow: hidden; }
.sp-bar i { display: block; width: 50%; height: 100%; background: #eef06a; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); }
.sp-met { display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .55); }
.sp-met img { height: calc(var(--u) * 22); max-width: calc(var(--u) * 80); object-fit: contain; }
.sp-met b { font-size: max(10px, calc(var(--u) * 14)); color: #3a3a45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-timer { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 7) calc(var(--u) * 16); border-radius: calc(var(--u) * 999); background: #fff; color: #111; font-variant-numeric: tabular-nums; }
.sp-timer .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sp-timer b { font-size: max(10px, calc(var(--u) * 17)); font-weight: 700; }
.sp-timer.is-poco b { color: #d97706; }
.sp-timer.is-fin b { color: #dc2626; }
.sp-pasos { margin: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 32); border-radius: calc(var(--u) * 16); background: rgba(255, 255, 255, .6); display: flex; flex-direction: column; gap: calc(var(--u) * 3); font-size: max(10px, calc(var(--u) * 13.5)); line-height: 1.45; color: #3a3a45; }
.sp-card { border-radius: calc(var(--u) * 26); overflow: hidden; background: #efeff3; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.sp-card__head { display: flex; flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 14) calc(var(--u) * 22) calc(var(--u) * 12); background: #fff; }
.sp-card__head small { font-size: max(10px, calc(var(--u) * 14)); color: #7a7a85; }
.sp-card__head b { font-size: max(10px, calc(var(--u) * 18)); font-weight: 500; color: #111; }
.sp-card__body { display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 18); }
.sp-qr { width: calc(var(--u) * 180); height: calc(var(--u) * 180); object-fit: contain; align-self: center; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 6); background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(0, 0, 0, .06); margin-bottom: calc(var(--u) * 6); }
.sp-row { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.sp-row > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-row small { font-size: max(10px, calc(var(--u) * 14)); color: #7a7a85; }
.sp-row b { font-size: max(10px, calc(var(--u) * 21)); font-weight: 700; color: #111; line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sp-row--cbu b { font-size: clamp(max(10px, calc(var(--u) * 14)), 4.6vw, max(10px, calc(var(--u) * 21))); white-space: nowrap; overflow-wrap: normal; letter-spacing: 0; }
.sp-copy { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; border: 0; background: none; color: #a3a3ad; cursor: pointer; border-radius: calc(var(--u) * 8); }
.sp-copy svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.sp-copy.is-copied { color: #16a34a; background: rgba(22, 163, 74, .1); }
.sp-mp { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); width: 100%; height: calc(var(--u) * 52); margin-top: calc(var(--u) * 10); border: 0; border-radius: calc(var(--u) * 999);
    background: #f2f56f; color: #4f8a1f; font-size: max(10px, calc(var(--u) * 17)); font-weight: 600; cursor: pointer; }
.sp-mp:active { transform: scale(.98); }
.sp-mp__logo { width: calc(var(--u) * 42); height: calc(var(--u) * 28); }
.sp-pagado { width: 100%; height: calc(var(--u) * 52); border: 0; border-radius: calc(var(--u) * 999); background: #efeff3; color: #111; font-size: max(10px, calc(var(--u) * 17)); font-weight: 500; cursor: pointer; }
.sp-pagado:disabled { opacity: .6; }
.sheet--dep:has(.pg--sp) .pg-cancel { color: #7a7a85; font-size: max(10px, calc(var(--u) * 15)); font-weight: 500; }
.sheet--dep:has(.pg--sp) .sheet__foot { display: flex; flex-direction: column; gap: calc(var(--u) * 6); border-top: 0; }
.sheet--dep:has(.pg--sp) .pg-ref summary { color: #7a7a85; }
.sheet--dep:has(.pg--sp) .dep-mp__fb { background: #fffbd1; border-color: #eef06a; color: #3a3a45; }
.pg-ok { gap: calc(var(--u) * 6); padding-top: calc(var(--u) * 10); }
.pg-ok h3 { margin: 0; font-size: max(10px, calc(var(--u) * 21)); }
.pg-estado { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); width: 100%; margin: calc(var(--u) * 14) 0 calc(var(--u) * 6); padding: calc(var(--u) * 28) calc(var(--u) * 18); border-radius: calc(var(--u) * 22); background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(20, 30, 50, .06); text-align: center; }
.pg-estado__spin { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: 50%; border: calc(var(--u) * 6) solid rgba(79, 140, 255, .18); border-top-color: #4f8cff; animation: pgGira .9s linear infinite; display: grid; place-items: center; }
.pg-estado b { font-size: max(10px, calc(var(--u) * 18)); color: #1b1f2a; }
.pg-estado small { font-size: max(10px, calc(var(--u) * 14)); color: #6b7280; line-height: 1.45; max-width: calc(var(--u) * 280); }
.pg-estado.is-ok .pg-estado__spin { animation: none; border: 0; background: #22c55e; color: #fff; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(34, 197, 94, .35); }
.pg-estado.is-ok .pg-estado__spin .ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.pg-estado.is-ok b { color: #15803d; }
.sp-pagado--ok { background: #22c55e; color: #fff; font-weight: 700; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(34, 197, 94, .3); }
.modal__sheet.sheet--dep:has(.pg--mp2) { background: #f9f9fb; }
.sheet--dep:has(.pg--mp2) .sheet__head { background: #f9f9fb; }
.pg--mp2 { gap: calc(var(--u) * 14); }
.mp2-top { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 8); }
.mp2-logo { height: calc(var(--u) * 34); max-width: calc(var(--u) * 160); object-fit: contain; }
.mp2-cur { padding: calc(var(--u) * 4) calc(var(--u) * 14); border-radius: calc(var(--u) * 10); background: #4a90e2; color: #fff; font-size: max(10px, calc(var(--u) * 15)); font-weight: 800; letter-spacing: .3px; }
.mp2-paga { margin: 0; font-size: max(10px, calc(var(--u) * 17)); color: #7b7b85; }
.mp2-paga b { color: #3f86e0; font-weight: 600; }
.mp2-card { display: flex; flex-direction: column; padding: calc(var(--u) * 6) calc(var(--u) * 22); border-radius: calc(var(--u) * 20); background: #fff;
    border-top: calc(var(--u) * 10) solid #4a90e2; border-bottom: calc(var(--u) * 10) solid #4a90e2; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 18) rgba(20, 30, 50, .08); }
.mp2-card .sp-row { padding: calc(var(--u) * 12) 0; border-bottom: 1px solid #ececf1; }
.mp2-card .sp-row:last-child { border-bottom: 0; }
.mp2-card .sp-row small { font-size: max(10px, calc(var(--u) * 14)); color: #7b7b85; }
.mp2-card .sp-row b { font-size: max(10px, calc(var(--u) * 18)); font-weight: 700; color: #111; }
.mp2-card .sp-row--cbu b { font-size: clamp(max(10px, calc(var(--u) * 14)), 4.3vw, max(10px, calc(var(--u) * 18))); }
.mp2-card .sp-copy { color: #6b6b75; }
.mp2-tiempo { display: flex; align-items: center; justify-content: space-between; font-size: max(10px, calc(var(--u) * 15)); color: #7b7b85; }
.mp2-reloj { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); color: #111; font-variant-numeric: tabular-nums; }
.mp2-reloj .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.mp2-reloj b { font-size: max(10px, calc(var(--u) * 19)); font-weight: 700; }
.mp2-reloj.is-poco b { color: #d97706; }
.mp2-reloj.is-fin b { color: #dc2626; }
.mp2-aviso { margin: 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 14); background: #fcf4d0; border: 1px solid #f3dc8a; font-size: max(10px, calc(var(--u) * 14.5)); line-height: 1.45; color: #2b2b33; }
.mp2-ya { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); width: 100%; height: calc(var(--u) * 60); border: 0; border-radius: calc(var(--u) * 16); background: #3f91e5; color: #fff; font-size: max(10px, calc(var(--u) * 18)); font-weight: 600; cursor: pointer; }
.mp2-ya .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); padding: calc(var(--u) * 2); border-radius: 50%; background: rgba(255, 255, 255, .25); }
.mp2-ya:disabled { opacity: .7; }
.sheet--dep:has(.pg--mp2) .sheet__foot { padding: 0; background: #f8d84a; border: 0; }
.mp2-barra { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); width: 100%; height: calc(var(--u) * 64); padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 0; background: #f8d84a; color: #1b1f2a; font-size: max(10px, calc(var(--u) * 18)); font-weight: 600; cursor: pointer; }
.mp2-barra .sp-mp__logo { width: calc(var(--u) * 40); height: calc(var(--u) * 27); }
.mp2-barra:active { background: #f2cf34; }
.mp2-aviso b { font-weight: 700; color: #1b1f2a; }
.mp2-aviso span { display: block; margin-top: calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 13)); color: #5b5b66; }
.mp2-barra .sp-mp__logo, .sp-mp .sp-mp__logo { width: calc(var(--u) * 34); height: calc(var(--u) * 34); object-fit: contain; }
.mp2-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: calc(var(--u) * 10); }
.mp2-top__l { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 8); }
.mp2-id, .sp-id { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 13.5)); color: #7b7b85; white-space: nowrap; }
.mp2-id { margin-top: calc(var(--u) * 30); }
.mp2-id b, .sp-id b { color: #111; font-weight: 700; letter-spacing: .2px; }
.mp2-id .sp-copy, .sp-id .sp-copy { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.mp2-id .sp-copy svg, .sp-id .sp-copy svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.sp-id { align-self: flex-end; }
.mp-modal { align-items: center; padding: calc(var(--u) * 20); }
.mp-modal .mp-hoja__velo { background: rgba(0, 0, 0, .42); }
.mp-modal__box { position: relative; width: min(100%, calc(var(--u) * 470)); display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 22);
    border-radius: calc(var(--u) * 26); background: #fff; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, .25); animation: mpEntra .2s ease both; }
@keyframes mpEntra { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-modal__x { position: absolute; top: calc(var(--u) * 18); right: calc(var(--u) * 18); width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; border: 0; background: none; color: #6b6b75; cursor: pointer; }
.mp-modal__x .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.mp-modal__t { margin: calc(var(--u) * 14) 0 calc(var(--u) * 6); text-align: center; font-size: max(10px, calc(var(--u) * 21)); font-weight: 600; color: #111; }
.mp-modal__lbl { margin: 0; font-size: max(10px, calc(var(--u) * 15)); color: #7b7b85; }
.mp-modal__cbu { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16); border-radius: calc(var(--u) * 14); background: #f2f2f6; }
.mp-modal__cbu b { flex: 1; min-width: 0; font-size: clamp(max(10px, calc(var(--u) * 15)), 4.6vw, max(10px, calc(var(--u) * 19))); font-weight: 600; color: #111; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-modal__copy { flex: none; width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; border: 0; background: none; color: #3a3a45; cursor: pointer; border-radius: calc(var(--u) * 8); }
.mp-modal__copy svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.mp-modal__copy.is-copied { color: #16a34a; background: rgba(22, 163, 74, .1); }
.mp-modal__abrir { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); width: 100%; height: calc(var(--u) * 64); border: 0; border-radius: calc(var(--u) * 14);
    background: #4faee4; color: #fff; font-size: max(10px, calc(var(--u) * 19)); font-weight: 600; cursor: pointer; }
.mp-modal__abrir img { width: calc(var(--u) * 96); height: auto; }
.mp-modal__abrir:active { filter: brightness(.95); }
.mp-modal__cuenta { margin: 0; text-align: center; font-size: max(10px, calc(var(--u) * 14)); color: #a1a1aa; }
.mp-modal .dep-mp__fb { margin: 0; }
.mp-modal__box { padding: calc(var(--u) * 28) calc(var(--u) * 20) calc(var(--u) * 20); }
.mp-modal__cbu b { font-size: clamp(max(10px, calc(var(--u) * 13)), 4.1vw, max(10px, calc(var(--u) * 19))); overflow: visible; text-overflow: clip; letter-spacing: 0; }
.mp-modal__copy.is-copied { width: auto; padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 4); display: inline-flex; align-items: center; color: #16a34a; background: rgba(22, 163, 74, .1); font-size: max(10px, calc(var(--u) * 13)); font-weight: 700; }
.mp-modal__copy .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.mp-modal__copy.is-ok { width: calc(var(--u) * 34); padding: 0; color: #16a34a; background: none; }
.mp2-inst { border: 1px solid #e3e3ea; border-radius: calc(var(--u) * 16); background: #f6f6f9; }
.mp2-inst summary { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 16) calc(var(--u) * 18); cursor: pointer; list-style: none; }
.mp2-inst summary::-webkit-details-marker { display: none; }
.mp2-inst summary .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: #7b7b85; flex: none; }
.mp2-inst summary span { flex: 1; text-align: center; font-size: max(10px, calc(var(--u) * 16)); font-weight: 700; color: #1b1f2a; }
.mp2-inst__flecha { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-right: calc(var(--u) * 2) solid #7b7b85; border-bottom: calc(var(--u) * 2) solid #7b7b85; transform: rotate(45deg) translateY(calc(var(--u) * -3)); transition: transform .2s; flex: none; margin-right: calc(var(--u) * 4); }
.mp2-inst[open] .mp2-inst__flecha { transform: rotate(-135deg) translate(calc(var(--u) * -2), -1px); }
.mp2-inst__lista { list-style: none; margin: 0; padding: 0 calc(var(--u) * 18) calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.mp2-inst__lista li { display: flex; align-items: flex-start; gap: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 15)); line-height: 1.4; color: #2b2b33; }
.mp2-inst__lista svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; color: #7b7b85; margin-top: 1px; }
.mp2-inst__n { width: calc(var(--u) * 14); flex: none; color: #9a9aa3; font-variant-numeric: tabular-nums; }
.mp2-inst__mp { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; margin-top: 1px; object-fit: contain; }
.mp2-inst__lista b { font-weight: 700; color: #111; }
.dep-tile__logo--marca { height: calc(var(--u) * 54); }
.dep-tile__logo--marca img { max-height: calc(var(--u) * 54); max-width: calc(var(--u) * 140); }
.dep-tile__logo img[src*="metodo-binance"] { max-height: calc(var(--u) * 40); }
.sheet--dep .dep-logo img[src*="metodo-"] { object-fit: contain; }
.dep-tile__logo--marca { height: calc(var(--u) * 60); }
.dep-tile__logo--marca img { max-height: calc(var(--u) * 60); max-width: calc(var(--u) * 150); }
.dep-tile__logo--marca img { height: calc(var(--u) * 42); width: auto; max-width: calc(var(--u) * 150); object-fit: contain; }

/* ===== Transferencia (teléfono): datos compactos y comprobante a la vista sin desplazar ===== */
.pg--sp { gap: calc(var(--u) * 8); }
.sp-prog { gap: calc(var(--u) * 5); }
.sp-prog p { font-size: max(10px, calc(var(--u) * 13)); }
.sp-bar { height: calc(var(--u) * 4); }
.sp-top { margin-top: calc(var(--u) * 2); }
.sp-top .sp-id { align-self: center; }
.sp-timer { padding: calc(var(--u) * 5) calc(var(--u) * 12); gap: calc(var(--u) * 6); }
.sp-timer .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.sp-timer b { font-size: max(10px, calc(var(--u) * 15)); }
.sp-pasos { padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 28); gap: 1px; font-size: max(10px, calc(var(--u) * 12.5)); line-height: 1.4; border-radius: calc(var(--u) * 12); }
.sp-card { border-radius: calc(var(--u) * 20); }
.sp-card__head { padding: calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * 7); gap: 0; }
.sp-card__head small { font-size: max(10px, calc(var(--u) * 11)); }
.sp-card__head b { font-size: max(10px, calc(var(--u) * 15)); font-weight: 600; }
.sp-card__body { padding: calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * 10); gap: calc(var(--u) * 2); }
.sp-row { gap: calc(var(--u) * 8); }
.sp-row small { font-size: max(10px, calc(var(--u) * 12)); }
.sp-row b { font-size: max(10px, calc(var(--u) * 16)); line-height: 1.25; }
.sp-row--dest b { font-size: max(10px, calc(var(--u) * 16)); font-weight: 600; }
.sp-row--monto b { font-size: max(10px, calc(var(--u) * 21)); font-weight: 700; }
.sp-row--cbu small { font-weight: 600; color: #5b5b66; }
.sp-row--cbu b { font-size: clamp(max(10px, calc(var(--u) * 16)), 5.4vw, max(10px, calc(var(--u) * 23))); font-weight: 800; letter-spacing: 0; }
.sp-copy { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.sp-copy svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.pg--sp .pg-form { gap: calc(var(--u) * 6); }
.pg--sp .dep-lbl { margin: calc(var(--u) * 2) 0 0; }
.pg--sp .dep-up { min-height: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); }
.pg--sp .pg-ref summary { padding: calc(var(--u) * 2); font-size: max(10px, calc(var(--u) * 12.5)); }
.sheet--dep:has(.pg--sp) .sheet__foot { gap: calc(var(--u) * 2); }
.sp-pagado { height: calc(var(--u) * 48); font-size: max(10px, calc(var(--u) * 16)); }
.sheet--dep:has(.pg--sp) .pg-cancel { padding: calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 14)); }
/* Pantalla de pago en el teléfono: la ventana usa casi todo el alto, así el comprobante entra sin desplazar */
@media (max-width: 991px) {
    .modal__sheet.sheet--dep:has(.pg--sp) { max-height: calc(100svh - calc(var(--u) * 12)); }
}
@media (max-width: 991px) and (max-height: 760px) {
    .sp-prog p { display: none; }
    .sp-pasos { font-size: max(10px, calc(var(--u) * 12)); line-height: 1.32; padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 26); }
    .sp-card__head { padding: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 5); }
    .sp-card__body { padding: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 8); }
    .sp-row--monto b { font-size: max(10px, calc(var(--u) * 19)); }
    .pg--sp { gap: calc(var(--u) * 6); }
    .sheet--dep:has(.pg--sp) .sheet__head { padding-top: calc(var(--u) * 6); padding-bottom: calc(var(--u) * 4); }
}

/* ===== Mercado Pago (teléfono): destinatario más chico, orden nuevo y barra que late ===== */
.mp2-card .sp-row--dest b { font-size: max(10px, calc(var(--u) * 15.5)); font-weight: 600; }
.mp2-card .sp-row--cbu b { font-size: clamp(max(10px, calc(var(--u) * 16)), 4.9vw, max(10px, calc(var(--u) * 20))); font-weight: 800; }
.mp2-card .sp-row--monto b { font-size: max(10px, calc(var(--u) * 18)); }
.mp2-card .sp-row { padding: calc(var(--u) * 9) 0; }
.pg--mp2 { gap: calc(var(--u) * 11); }
.pg--mp2 .pg-form { gap: calc(var(--u) * 6); }
.pg--mp2 .dep-up { padding: calc(var(--u) * 10) calc(var(--u) * 12); }
.mp2-aviso { padding: calc(var(--u) * 10) calc(var(--u) * 14); font-size: max(10px, calc(var(--u) * 13.5)); }
/* brillo que late en "Pagar en Mercado Pago" (se detiene al tocarla; sin movimiento si el sistema lo pide) */
.mp2-barra { position: relative; overflow: hidden; }
.mp2-barra::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 140% at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
    opacity: 0; animation: mpLate 2.2s ease-in-out infinite; }
.mp2-barra > * { position: relative; }
.mp2-barra.ya-tocado::before { animation: none; opacity: 0; }
@keyframes mpLate { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mp2-barra::before { animation: none; } }
/* el brillo va DETRÁS del texto y del logo (no los aclara) */
.mp2-barra { isolation: isolate; }
.mp2-barra::before { z-index: -1; background: radial-gradient(90% 160% at 50% 50%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 65%); }
/* Pedido de comprobante a los 2 minutos sin acreditarse */
.pg-comp { display: flex; flex-direction: column; gap: calc(var(--u) * 8); width: 100%; margin-top: calc(var(--u) * 4); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: #fffbe6; border: 1px solid #ffe58f; text-align: left; }
.pg-comp__t { margin: 0; font-size: max(10px, calc(var(--u) * 14)); line-height: 1.4; color: #3a3a45; }
.pg-comp__t b { color: #1b1f2a; }
.pg-comp .dep-up { background: #fff; padding: calc(var(--u) * 10) calc(var(--u) * 12); }
.pg-comp__ok { display: flex; align-items: center; gap: calc(var(--u) * 8); margin: 0; font-size: max(10px, calc(var(--u) * 14)); font-weight: 600; color: #15803d; }
.pg-comp__ok .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

/* ===== Titular de la cuenta (por única vez) ===== */
.tit-card { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(20, 30, 50, .06); }
.tit-card__ic { flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; display: grid; place-items: center; background: rgba(34, 197, 94, .12); color: #16a34a; }
.tit-card__ic .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.tit-card__d { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tit-card__d small { font-size: max(10px, calc(var(--u) * 11.5)); color: #6b7280; }
.tit-card__d b { font-size: max(10px, calc(var(--u) * 15.5)); color: #1b1f2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tit-card__d span { font-size: max(10px, calc(var(--u) * 12.5)); color: #6b7280; font-variant-numeric: tabular-nums; }
.tit-card__ok { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 999); background: rgba(34, 197, 94, .12); color: #15803d; font-size: max(10px, calc(var(--u) * 11.5)); font-weight: 700; }
.tit-card__ok .ic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.tit-link { align-self: flex-start; margin-top: calc(var(--u) * -4); padding: calc(var(--u) * 2) calc(var(--u) * 2); border: 0; background: none; color: var(--primary); font-size: max(10px, calc(var(--u) * 13)); font-weight: 600; text-decoration: underline; text-underline-offset: calc(var(--u) * 3); cursor: pointer; }
.tit-nota { display: flex; gap: calc(var(--u) * 8); margin: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 12.5)); line-height: 1.4; color: #35506b; background: #eef7ee; border: 1px solid #cdeacd; }
.tit-nota .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; color: #16a34a; margin-top: 1px; }
.tit-nota b { color: #1b1f2a; }
.tit-nota--otro { background: #fff7e6; border-color: #ffe0a3; color: #5b4a2a; }
.tit-nota--otro .ic { color: #d97706; }
.tit-nota > span { flex: 1; min-width: 0; }
.tit-link { display: block; text-align: left; margin-top: calc(var(--u) * -2); }
.tit-doc-aviso { display: block; margin-top: calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 12)); line-height: 1.35; color: #92400e; }

/* ===== Mercado Pago: pasos 1 (franja amarilla) y 2 (He pagado); instrucciones chicas arriba ===== */
.mp2-paso { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); width: 100%; height: calc(var(--u) * 58); border: 0; border-radius: calc(var(--u) * 16); font-size: max(10px, calc(var(--u) * 17)); font-weight: 600; cursor: pointer; }
.mp2-paso--mp { background: #f8d84a; color: #1b1f2a; padding-bottom: 0; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(248, 216, 74, .35); }
.mp2-paso--mp .sp-mp__logo { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.mp2-n { position: absolute; left: calc(var(--u) * 14); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; display: grid; place-items: center;
    font-size: max(10px, calc(var(--u) * 14)); font-weight: 800; background: rgba(0, 0, 0, .12); color: #1b1f2a; }
.mp2-ya .mp2-n { background: rgba(255, 255, 255, .28); color: #fff; }
.mp2-ya.mp2-paso { height: calc(var(--u) * 58); }
.mp2-inst--chico { border-radius: calc(var(--u) * 12); }
.mp2-inst--chico summary { padding: calc(var(--u) * 9) calc(var(--u) * 12); gap: calc(var(--u) * 8); }
.mp2-inst--chico summary .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.mp2-inst--chico summary span { font-size: max(10px, calc(var(--u) * 13.5)); font-weight: 600; text-align: left; }
.mp2-inst--chico .mp2-inst__lista { padding: 0 calc(var(--u) * 12) calc(var(--u) * 12); gap: calc(var(--u) * 9); }
.mp2-inst--chico .mp2-inst__lista li { font-size: max(10px, calc(var(--u) * 13)); }
/* Mercado Pago: abajo, solo un borde amarillo (sin botón) */
.sheet--dep:has(.pg--mp2) .sheet__foot { padding: 0; background: #f8d84a; border: 0; min-height: 0; }
.mp2-borde { display: block; height: calc(calc(var(--u) * 10) + env(safe-area-inset-bottom, 0px)); background: #f8d84a; }
/* Escritorio: instrucciones siempre abiertas (sin flecha ni cursor de desplegable) */
.mp2-inst--fija summary { cursor: default; }
.mp2-inst--fija .mp2-inst__flecha { display: none; }
/* Nota solo para computadora (debajo de los pasos 1 y 2) */
.mp2-pc-nota { display: none; }
@media (min-width: 992px) {
    .mp2-pc-nota { display: flex; align-items: flex-start; gap: calc(var(--u) * 10); margin: calc(var(--u) * -2) calc(var(--u) * 2) 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: #f1f5fb; border: 1px solid #dbe5f3; font-size: max(10px, calc(var(--u) * 13)); line-height: 1.45; color: #3a4556; }
    .mp2-pc-nota svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; color: #3f86e0; margin-top: 1px; }
    .mp2-pc-nota b { color: #1b1f2a; }
}

/* Burbuja de chat de soporte (Whaticket): se arrastra con el dedo y se pega al borde */
.hb-chat { position: fixed; z-index: 9000; width: calc(var(--u) * 56); height: calc(var(--u) * 56); border: 0; border-radius: 50%; padding: 0;
    display: grid; place-items: center; color: #fff; background: var(--hb-chat, #3956FF); cursor: pointer;
    box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .28); touch-action: none; user-select: none; -webkit-user-select: none;
    transition: left .25s ease, right .25s ease, bottom .25s ease, transform .15s ease; }
.hb-chat svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); pointer-events: none; }
.hb-chat:active { transform: scale(.94); }
.hb-chat.is-arrastrando { transition: none; transform: scale(1.08); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, .35); }
.hb-chat[hidden] { display: none; }
.hb-chat--img { background: transparent; }   /* el avatar ya trae su propio círculo */
.hb-chat--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; -webkit-user-drag: none; }

/* Etiqueta "Soporte · respondemos en ~X min" junto a la burbuja (del lado de adentro de la pantalla) */
.hb-chat__aviso { position: absolute; top: 50%; left: calc(100% + calc(var(--u) * 10)); transform: translateY(-50%) scale(.92); transform-origin: left center;
    white-space: nowrap; padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: #fff; color: #1b1f2a; font-size: max(10px, calc(var(--u) * 13)); font-weight: 500;
    box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.hb-chat__aviso b { font-weight: 700; color: var(--hb-chat, #3956FF); }
.hb-chat.lado-der .hb-chat__aviso { left: auto; right: calc(100% + calc(var(--u) * 10)); transform-origin: right center; }
.hb-chat.con-aviso .hb-chat__aviso { opacity: 1; transform: translateY(-50%) scale(1); }
.hb-chat.is-arrastrando .hb-chat__aviso { opacity: 0; }

/* Botones flotantes de WhatsApp / Telegram (solo si el backend los trae y no hay burbuja de chat) */
.hb-flot { position: fixed; right: calc(var(--u) * 14); bottom: calc(var(--u) * 24); z-index: 8900; display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.hb-flot[hidden] { display: none; }
.hb-flot__btn { width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .28); transition: transform .15s ease; }
.hb-flot__btn:active { transform: scale(.94); }
.hb-flot__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .hb-flot { bottom: calc(var(--u) * 84); } }

/* Pie: licencia CGA y sello Certria (solo si el backend los trae) */
.ft__cert { display: inline-flex; align-items: center; }
.ft__cert[hidden] { display: none; }
.ft__cert img { max-width: calc(var(--u) * 120); height: auto; display: block; }
.ft__cert [id^="xcm-"] { min-width: calc(var(--u) * 64); }

/* Burbuja de soporte con mensajes sin leer: late (anillo que crece y se desvanece) y muestra el contador */
.hb-chat__badge { position: absolute; top: calc(var(--u) * -3); right: calc(var(--u) * -3); min-width: calc(var(--u) * 20); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 10);
    background: #ff2d2d; color: #fff; font: 700 calc(var(--u) * 12)/calc(var(--u) * 20) Inter, system-ui, sans-serif; text-align: center;
    box-shadow: 0 0 0 calc(var(--u) * 2) #fff; pointer-events: none; }
.hb-chat.con-mensaje::before { content: ''; position: absolute; inset: calc(var(--u) * -2); border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(255, 73, 0, .75); animation: hbLatido 1.6s ease-out infinite; }
@keyframes hbLatido { 0% { box-shadow: 0 0 0 0 rgba(255, 73, 0, .75); } 70% { box-shadow: 0 0 0 calc(var(--u) * 16) rgba(255, 73, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 73, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hb-chat.con-mensaje::before { animation: none; box-shadow: 0 0 0 calc(var(--u) * 4) rgba(255, 73, 0, .85); } }

/* Tawk: sus marcos (botón, cartel "En línea", ventana) quedan invisibles hasta que el sitio toma el control (sin destello) */
html:not(.hb-tawk-listo) iframe[title^="chat widget" i] { visibility: hidden !important; opacity: 0 !important; }


/* ---------- Carrusel ancho, doble y doble con 1 (como el diseño de referencia) ----------
   Tarjetas horizontales (2:1), 6 por fila en PC, nombre y proveedor debajo. Las portadas cuadradas o verticales se
   ven ENTERAS y centradas sobre su propia imagen desenfocada (data-tencaja → .is-encaja); las horizontales llenan.
   Doble: dos filas. Doble con 1: el primer juego grande (2 columnas × 2 filas) y el resto en dos filas al lado.
   Prioritario (!important) solo para estas tres variantes: hay reglas generales de carruseles más específicas. */
.row--wide .rail, .row--double .rail, .row--double1 .rail { --cols: 6 !important; }
.row--double .rail, .row--double1 .rail { grid-template-rows: auto auto !important; }
.row--double1 .rail { grid-auto-flow: column dense !important; }
.row--wide .game__media, .row--double .game__media, .row--double1 .game__media { aspect-ratio: 2 / 1 !important; }
.row--double1 .game--grande { grid-row: span 2; grid-column: span 2; align-self: stretch !important; display: flex; flex-direction: column; }
/* El grande ocupa EXACTAMENTE el alto de las dos filas: el alto lo ponen las tarjetas normales y su imagen se estira. */
.row--double1 .game--grande .game__hit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.row--double1 .rail > .game--grande .game__media { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; align-self: stretch; aspect-ratio: auto !important; }
.row--double1 .rail > .game--grande .game__media img { position: absolute !important; inset: 0; width: 100%; height: 100%; }   /* no empuja el alto */
.game__media.is-encaja { isolation: isolate; }
.game__media.is-encaja .game__fallback { display: none; }   /* el nombre de respaldo no se asoma por los costados */
.game__media.is-encaja::before { content: ""; position: absolute; inset: calc(var(--u) * -10); z-index: 0;
    background: var(--tfondo) center / cover no-repeat; filter: blur(calc(var(--u) * 14)) brightness(.62) saturate(1.15); }
.rail > .game .game__media.is-encaja img, .game__media.is-encaja img { position: relative; z-index: 0; object-fit: contain !important; transform: none !important; }
/* Como el diseño: nombre y proveedor DEBAJO de la tarjeta; sin la etiqueta del proveedor sobre la imagen */
.row--wide .rail > .game .game__meta, .row--double .rail > .game .game__meta, .row--double1 .rail > .game .game__meta { display: block !important; padding: calc(var(--u) * 8) calc(var(--u) * 2) calc(var(--u) * 2); }
.row--wide .rail > .game .game__badge, .row--double .rail > .game .game__badge, .row--double1 .rail > .game .game__badge { display: none; }
.row--wide .game__title, .row--double .game__title, .row--double1 .game__title { font-size: max(10px, calc(var(--u) * 13)); font-weight: 600; color: var(--text, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.row--wide .game__vendor, .row--double .game__vendor, .row--double1 .game__vendor { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2, rgba(255, 255, 255, .55));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: calc(var(--u) * 2) 0 0; }
@media (max-width: 1365px) { .row--wide .rail, .row--double .rail, .row--double1 .rail { --cols: 5 !important; } }
@media (max-width: 1199px) { .row--wide .rail, .row--double .rail, .row--double1 .rail { --cols: 4 !important; } }
@media (max-width: 991px) {
    .row--wide .rail, .row--double .rail, .row--double1 .rail { --cols: 2.3 !important; }
    .row--double1 .game--grande { grid-column: span 1; }   /* en el teléfono: una columna, alto de dos filas */
}


/* Teléfono: encabezado que no entra en una fila (logo ancho + saldo largo): modo compacto, en cualquier tema.
   La llamita en vez del logo, sin el botón de tema (sigue en el menú) y el saldo apenas más chico. */
@media (max-width: 991px) {
    .topbar.topbar--apretado .topbar__brand .logo-img, .topbar.topbar--apretado .topbar__brand .logo-fallback { display: none !important; }
    .topbar.topbar--apretado .topbar__flame { display: grid !important; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 34); color: var(--primary); }
    .topbar.topbar--apretado .topbar__flame svg { width: 100%; height: 100%; }
    .topbar.topbar--apretado .topbar__theme { display: none !important; }
    .topbar.topbar--apretado .balance--pill .balance__amount { font-size: max(10px, calc(var(--u) * 13)); }
    /* Último recurso: el saldo se corta con "…" antes que empujar la pantalla */
    .topbar .topbar__right, .topbar .hbal, .topbar .balance, .topbar .balance__txt { min-width: 0; }
    .topbar .balance--pill .balance__amount { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Teléfono con sesión: el logo ocupa el MISMO lugar en los dos temas (como el claro: ~60 × 22 px como máximo), sea cual
   sea la imagen que mande el backend para cada tema. Así logo, saldo, depósito, campana y tema entran en una fila. */
@media (max-width: 991px) {
    .topbar.topbar--auth .topbar__brand .logo-img { max-width: calc(var(--u) * 60) !important; max-height: calc(var(--u) * 22) !important; width: auto; height: auto; object-fit: contain; }
}

/* ---------- Mi cuenta · Movimientos de la billetera ---------- */
.mov { display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.mov-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 10); }
.mov-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.mov-chip { height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 999); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: max(10px, calc(var(--u) * 14)); cursor: pointer; }
.mov-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.mov-fechas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--u) * 8); }
.mov-fechas[hidden] { display: none; }
.mov-fechas label { display: flex; flex-direction: column; gap: calc(var(--u) * 4); font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.mov-fechas input { height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 10); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.mov-cat { margin-left: auto; }
.mov-cat select { height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 34) 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 10); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; }
.mov-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 10); }
.mov-tot:empty { display: none; }
.mov-tot__it { padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: var(--surface); display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.mov-tot__it small { color: var(--text-2); font-size: max(10px, calc(var(--u) * 12)); }
.mov-tot__it b { font-size: max(10px, calc(var(--u) * 16)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov .is-in { color: var(--ok, #22C55E); }
.mov .is-out { color: var(--danger, #FF4D4F); }
.mov-lista { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.mov-it { display: grid; grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: var(--surface); }
.mov-it__ic { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 12); display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.mov-it__ic.is-in { background: rgba(34, 197, 94, .14); }
.mov-it__ic.is-out { background: rgba(255, 77, 79, .12); }
.mov-it__ic .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.mov-it__txt { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.mov-it__txt b { font-size: max(10px, calc(var(--u) * 15)); color: var(--text); }
.mov-it__desc { font-size: max(10px, calc(var(--u) * 13)); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-it__txt small, .mov-it__monto small { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.mov-it__monto { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 2); text-align: right; }
.mov-it__monto b { font-size: max(10px, calc(var(--u) * 15)); white-space: nowrap; }
.mov-it__mon { font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; margin-left: calc(var(--u) * 4); }
.mov-pag { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); font-size: max(10px, calc(var(--u) * 14)); color: var(--text-2); }
.mov-pag:empty { display: none; }
:root[data-theme="light"] .mov-chip:not(.is-on), :root[data-theme="light"] .mov-tot__it, :root[data-theme="light"] .mov-it,
:root[data-theme="light"] .mov-fechas input, :root[data-theme="light"] .mov-cat select { background: #fff; }
:root[data-theme="light"] .mov-tot__it, :root[data-theme="light"] .mov-it { box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(20, 30, 50, .06); }
:root[data-theme="light"] .mov-it__ic { background: rgba(0, 0, 0, .04); }
@media (max-width: 767px) {
    .mov-cat { margin-left: 0; width: 100%; }
    .mov-cat select { width: 100%; }
    .mov-tot { gap: calc(var(--u) * 8); }
    .mov-tot__it { padding: calc(var(--u) * 10) calc(var(--u) * 12); }
    .mov-tot__it b { font-size: max(10px, calc(var(--u) * 12.5)); letter-spacing: -.2px; }
    .mov-it { grid-template-columns: calc(var(--u) * 36) minmax(0, 1fr) auto; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); }
    .mov-it__ic { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
    .mov-it__ref { display: none; }   /* en el teléfono, sin el número de movimiento (sigue en PC) */
    .mov-it__monto b { font-size: max(10px, calc(var(--u) * 14)); }
}

/* ---------- Verificar identidad (KYC) · datos que faltan para retirar ---------- */
.kyc { display: flex; flex-direction: column; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--surface); margin-bottom: calc(var(--u) * 16); border: 1px solid var(--line); }
.kyc__head { display: flex; gap: calc(var(--u) * 12); align-items: flex-start; }
.kyc__head b { display: block; font-size: max(10px, calc(var(--u) * 16)); color: var(--text); margin-bottom: calc(var(--u) * 2); }
.kyc__head p { margin: 0; font-size: max(10px, calc(var(--u) * 14)); line-height: 1.45; color: var(--text-2); }
.kyc__ic { flex: 0 0 auto; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 12); display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--primary); }
.kyc__ic .ic { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.kyc--approved .kyc__ic { background: rgba(34, 197, 94, .14); color: var(--ok, #22C55E); }
.kyc--pending .kyc__ic { background: rgba(245, 158, 11, .14); color: #F59E0B; }
.kyc--rejected { border-color: rgba(255, 77, 79, .45); }
.kyc--rejected .kyc__ic { background: rgba(255, 77, 79, .12); color: var(--danger, #FF4D4F); }
.kyc__motivo { display: block; margin-top: calc(var(--u) * 4); color: var(--danger, #FF4D4F); font-weight: 600; }
.kyc__sub { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.kyc__btns, .kyc__acc { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.kyc__btns[hidden], .kyc__prev[hidden], .kyc__bar[hidden] { display: none; }
.kyc__btns label { cursor: pointer; }
.kyc__nota { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
.kyc__prev { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.kyc__prev img { width: 100%; max-width: calc(var(--u) * 360); max-height: calc(var(--u) * 240); object-fit: contain; border-radius: calc(var(--u) * 12); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.kyc__bar { height: calc(var(--u) * 6); max-width: calc(var(--u) * 360); border-radius: calc(var(--u) * 6); background: rgba(255, 255, 255, .1); overflow: hidden; }
.kyc__bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.kyc--error p { margin: 0; color: var(--text-2); }
.dalerta { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: rgba(255, 77, 79, .12); color: var(--danger, #FF4D4F); font-weight: 600; font-size: max(10px, calc(var(--u) * 14)); }
.dalerta[hidden] { display: none; }
.dalerta .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: 0 0 auto; }
.field.is-falta .field__label { color: var(--danger, #FF4D4F); }
.field.is-falta .field__box, .field.is-falta input, .field.is-falta select { border-color: var(--danger, #FF4D4F) !important; box-shadow: 0 0 0 1px var(--danger, #FF4D4F); }
.field--ro small a, .dsoporte { color: var(--primary); text-decoration: underline; font-weight: 600; }
.wd-acc { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.form__error .wd-acc .btn { text-decoration: none; }
.wd-dni { display: flex; align-items: center; gap: calc(var(--u) * 6); margin: 0; font-size: max(10px, calc(var(--u) * 13)); }
.wd-dni .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: 0 0 auto; }
.wd-kyc { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.wd-kyc .kyc { margin-bottom: 0; }
:root[data-theme="light"] .kyc { background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 12) rgba(20, 30, 50, .06); }
:root[data-theme="light"] .kyc__ic { background: rgba(0, 0, 0, .04); }
:root[data-theme="light"] .kyc__bar { background: rgba(0, 0, 0, .08); }
:root[data-theme="light"] .kyc__prev img { background: #f4f4f5; }