/* ==================================================================
   SALA — lobby de maquinas, estilo pantalla de casino.
   Archivo aparte: no toca el CSS del panel.
   ================================================================== */
@import url('supercash-fonts.css');

/* Nada se selecciona ni se arrastra con el mouse (lobby y maquinas),
   como una pantalla de casino. Solo se puede escribir/seleccionar en campos. */
html, body, body *{-webkit-user-select:none !important; user-select:none !important;
  -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
input, textarea, select, [contenteditable="true"]{-webkit-user-select:text !important; user-select:text !important}
::selection{background:transparent; color:inherit}
input::selection, textarea::selection{background:#3b6cff; color:#fff}

#lobby{
  --gx-azul:#1230a3; --gx-azul2:#0a1a66; --gx-azul3:#061048; --gx-borde:#3656e0;
  --gx-oro:#ffc92e; --gx-oro2:#ff9d00; --gx-piso:#15161c;
  --gx-disp:'Big Shoulders Display','Arial Narrow','Roboto Condensed',sans-serif;
  --gx-tit:'Bungee','Big Shoulders Display',Impact,sans-serif;
  position:fixed; inset:0; z-index:50;
  display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto;
  color:#eef1f8; font:14px/1.4 "Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(900px 380px at 50% 110px, #2c3048 0%, transparent 70%),
    repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 7px),
    var(--gx-piso);
}
#lobby[hidden]{display:none}
body.lobby-abierto{overflow:hidden}

/* ---------- 1. jackpot ---------- */
.gx-jp{padding:7px clamp(10px,2vw,22px); background:linear-gradient(#000,#0b0b10); border-bottom:1px solid #000}
.gx-jp .jpb{justify-content:safe center}

/* ---------- 2. pestanas de fabricante ---------- */
.gx-tabs{display:flex; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(180deg,#2446d6,var(--gx-azul) 45%,var(--gx-azul2)); border-bottom:2px solid #000}
.gx-tabs::-webkit-scrollbar{display:none}
.gx-tab{flex:1 0 auto; min-width:max-content; height:44px; padding:0 18px; cursor:pointer;
  border:0; border-right:2px solid #0008; box-shadow:inset -1px 0 0 #ffffff22, inset 0 1px 0 #ffffff33;
  background:transparent; color:#fff; font:900 clamp(15px,1.4vw,21px)/1 var(--gx-disp); letter-spacing:.04em;
  text-shadow:0 2px 0 #0009; position:relative}
.gx-tab i{font:700 11px/1 ui-monospace,Consolas,monospace; font-style:normal; color:#ffffff99; margin-left:6px; letter-spacing:0}
.gx-tab:hover{background:#ffffff14}
.gx-tab[aria-pressed="true"]{color:var(--gx-oro)}
.gx-tab[aria-pressed="true"]::after{content:''; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--gx-oro); box-shadow:0 0 10px var(--gx-oro)}
.gx-tab:disabled{opacity:.4; cursor:default}

/* ---------- 3. categorias ---------- */
.gx-cats{display:flex; align-items:center; gap:7px; padding:8px clamp(10px,2vw,22px); overflow-x:auto; scrollbar-width:none;
  background:#0d0e13; border-bottom:1px solid #000}
.gx-cats::-webkit-scrollbar{display:none}
.gx-chip{flex:0 0 auto; height:28px; padding:0 12px; border-radius:99px; cursor:pointer;
  background:#1d2030; border:1px solid #2f3450; color:#c9cfe2; font:600 12.5px/1 "Segoe UI",sans-serif}
.gx-chip i{font-style:normal; color:#8088a6; margin-left:5px; font:600 11px/1 ui-monospace,Consolas,monospace}
.gx-chip[aria-pressed="true"]{background:var(--gx-oro); border-color:var(--gx-oro); color:#231600}
.gx-chip[aria-pressed="true"] i{color:#231600aa}
.gx-cuenta{margin-left:auto; flex:0 0 auto; font:700 12px/1 ui-monospace,Consolas,monospace; color:#8088a6; padding-left:10px}

/* ---------- 4. escenario ---------- */
.gx-stage{position:relative; display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:0; padding:4px clamp(8px,1.5vw,18px) 6px}
.gx-marca{flex:0 0 auto; text-align:center; padding:6px 0 10px; position:relative}
.gx-marca b{display:inline-block; font:900 clamp(34px,4.4vw,64px)/.9 var(--gx-disp); letter-spacing:.06em;
  background:linear-gradient(180deg,#fffbe0 0%,#ffe95c 36%,#ffc400 52%,#fff07a 70%,#d99a00 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px #4a2c00; filter:drop-shadow(0 4px 0 #000b) drop-shadow(0 0 18px #ffd00060)}
.gx-marca b span{margin-left:.22em;
  background:linear-gradient(180deg,#ffe0dc 0%,#ff4a3d 38%,#d90d0d 55%,#ff5a4a 78%,#7a0000 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1.5px #3a0000}
/* marca en la cabecera del panel: SUPER amarillo, CASH rojo */
header .brand{color:#ffd21f; font-weight:900; letter-spacing:.06em; text-shadow:0 0 10px #ffc40055}
header .brand span{color:#ff2b2b; margin-left:.25em; text-shadow:0 0 10px #ff2b2b66}
.gx-marca small{display:block; margin-top:4px; font:800 12px/1 var(--gx-disp); letter-spacing:.5em; color:#b9bfd6; text-transform:uppercase}
.gx-marca::before{content:''; position:absolute; left:50%; top:50%; width:min(560px,80%); height:70px; translate:-50% -50%;
  background:radial-gradient(circle,#ff4a3d 1px,transparent 1.6px) 0 0/23px 17px,
             radial-gradient(circle,#ffd45a 1px,transparent 1.6px) 9px 7px/31px 21px;
  mask:radial-gradient(closest-side,#000 30%,transparent); opacity:.55; pointer-events:none}
.gx-fila{flex:1 1 auto; min-height:0; display:flex; align-items:center; gap:clamp(6px,1vw,14px)}
.gx-flecha{flex:0 0 auto; align-self:center; position:relative; display:grid; place-items:center;
  width:clamp(40px,4.4vw,68px); height:clamp(130px,34vh,270px); border:0; padding:0; cursor:pointer;
  background:linear-gradient(90deg,#08146b,#2b55ff 45%,#1535c9 60%,#08146b);
  filter:drop-shadow(0 8px 14px #000c); transition:filter .15s, transform .15s}
.gx-flecha::before{content:''; position:absolute; inset:3px; background:linear-gradient(180deg,#ffffff55,transparent 40%,#0004);
  clip-path:inherit; pointer-events:none}
.gx-flecha.izq{clip-path:polygon(0 50%,100% 0,100% 100%)}
.gx-flecha.der{clip-path:polygon(0 0,100% 50%,0 100%)}
.gx-flecha.izq{clip-path:polygon(0 18%,100% 0,100% 100%,0 82%); border-radius:0 14px 14px 0}
.gx-flecha.der{clip-path:polygon(0 0,100% 18%,100% 82%,0 100%); border-radius:14px 0 0 14px}
.gx-flecha svg{position:relative; width:62%; height:auto; overflow:visible}
.gx-flecha path{fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 0 #000a) drop-shadow(0 0 6px #7fb2ff)}
.gx-flecha path + path{stroke:#ffd23f; filter:drop-shadow(0 2px 0 #000a) drop-shadow(0 0 6px #ffb200)}
.gx-flecha.der svg{transform:scaleX(-1)}
.gx-flecha:hover{filter:drop-shadow(0 8px 14px #000c) brightness(1.2)}
.gx-flecha:active{transform:scale(.96)}
.gx-flecha:disabled{opacity:.28; cursor:default; filter:grayscale(.7)}
.gx-grid{flex:1 1 auto; min-width:0; align-self:stretch; display:grid; align-content:center;
  gap:var(--gx-gap,14px); grid-template-columns:repeat(var(--gx-cols,5),minmax(0,1fr))}
.gx-grid.entra-izq{animation:gx-desde-der .28s ease both}
.gx-grid.entra-der{animation:gx-desde-izq .28s ease both}
@keyframes gx-desde-der{from{opacity:0; transform:translateX(34px)}}
@keyframes gx-desde-izq{from{opacity:0; transform:translateX(-34px)}}
.gx-pager{flex:0 0 auto; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding:10px 0 2px}
.gx-pag{min-width:34px; height:28px; padding:0 6px; border-radius:5px; cursor:pointer;
  border:1px solid #000; background:linear-gradient(180deg,#2a4ce8,var(--gx-azul2)); color:#fff;
  font:900 17px/1 var(--gx-disp); box-shadow:inset 0 1px 0 #ffffff44}
.gx-pag[aria-current="page"]{background:linear-gradient(180deg,#ffe07a,var(--gx-oro2)); color:#231600; box-shadow:0 0 12px #ffb20088}
.gx-pag.puntos{background:none; border:0; box-shadow:none; cursor:default; color:#8088a6}

/* ---------- la portada ---------- */
.gx-card{position:relative; aspect-ratio:2.35/1; border-radius:7px; overflow:hidden;
  box-shadow:0 0 0 2px #000, 0 8px 18px #000b; transition:transform .16s ease, box-shadow .16s ease}
.gx-card:hover,.gx-card:focus-within{transform:scale(1.035); z-index:2;
  box-shadow:0 0 0 2px var(--gx-oro), 0 0 22px #ffb20066, 0 12px 26px #000d}
.gx-open{position:absolute; inset:0; width:100%; border:0; padding:0; cursor:pointer; background:none; color:inherit; font:inherit}
.gx-open:focus-visible{outline:3px solid var(--gx-oro); outline-offset:-3px}
.gx-arte{position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(120% 150% at 50% 115%, var(--t1) 0%, var(--t2) 40%, var(--t3) 88%)}
.gx-arte::before{content:''; position:absolute; inset:0; pointer-events:none}
.gx-arte::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#ffffff26 0%,transparent 38%,transparent 70%,#0006 100%)}
.gx-cover-fondo{position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; filter:blur(14px) brightness(.55) saturate(1.2)}
.gx-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 10px #000a)}
.gx-syms{position:absolute; inset:0}
.gx-sym{position:absolute; bottom:-6%; height:88%; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 4px 6px #000a)}
.gx-sym.a{left:-3%; transform:rotate(-8deg)}
.gx-sym.b{right:-3%; transform:rotate(7deg)}
.gx-sym .art{width:100%; height:100%; display:block}
.gx-sym img.art{object-fit:contain}
.gx-sym .emo{font-size:calc(var(--gx-h,120px) * .62); line-height:1}
.gx-sym .card-r{font:800 calc(var(--gx-h,120px) * .66)/1 Georgia,serif; color:var(--c); text-shadow:0 3px 0 #000a, 0 0 18px var(--c)}
.gx-sym .fb{font:900 calc(var(--gx-h,120px) * .2)/1 "Segoe UI",sans-serif; color:#0d1220; background:var(--c);
  padding:.35em .45em; border-radius:10px}
.gx-tit{position:absolute; inset:0 17%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font:400 var(--gx-fs,26px)/.98 var(--gx-tit); text-transform:uppercase; letter-spacing:.01em;
  pointer-events:none}
.gx-tit span{display:block; max-width:100%;
  background:var(--tt, linear-gradient(180deg,#fffbe0 0%,#ffe066 40%,#e08a00 55%,#ffd452 78%,#a05a00 100%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:calc(var(--gx-fs,26px) * .055) var(--ts,#3a1700);
  filter:drop-shadow(0 3px 0 #000c) drop-shadow(0 0 8px #0008)}
.gx-card.con-portada .gx-tit{display:none}
.gx-info{position:absolute; left:0; right:0; bottom:0; padding:5px 8px; display:flex; justify-content:space-between; gap:6px;
  font:700 11px/1.2 ui-monospace,Consolas,monospace; color:#ffe9a8; background:linear-gradient(transparent,#000d 45%);
  transform:translateY(101%); transition:transform .16s ease; pointer-events:none}
.gx-info span:last-child{color:#cfd6ea; text-align:right}
.gx-card:hover .gx-info,.gx-card:focus-within .gx-info{transform:none}
.gx-fav{position:absolute; top:4px; right:4px; z-index:3; width:28px; height:26px; border-radius:6px; cursor:pointer;
  border:0; background:#0009; color:#ffffff99; font-size:16px; line-height:1; opacity:0; transition:opacity .15s}
.gx-card:hover .gx-fav,.gx-card:focus-within .gx-fav,.gx-fav[aria-pressed="true"]{opacity:1}
.gx-fav[aria-pressed="true"]{color:#ffd23f; text-shadow:0 0 8px #ffb200}
.gx-marcas{position:absolute; top:5px; left:5px; z-index:3; display:flex; gap:4px; pointer-events:none}
.gx-marcas b{font:900 10px/1 var(--gx-disp); letter-spacing:.12em; padding:4px 6px; border-radius:4px; color:#231600; background:var(--gx-oro)}
.gx-marcas b.prov{color:#fff; background:var(--pc,#444)}
.gx-card.abriendo{opacity:.55; pointer-events:none}
.gx-card.actual{box-shadow:0 0 0 3px var(--gx-oro), 0 8px 18px #000b}

/* temas: tres colores y una capa de dibujo cada uno (todo generado, sin imagenes) */
.tm-fuego{--t1:#ffe45c; --t2:#ff5a00; --t3:#6b000c}
.tm-fuego .gx-arte::before{background:
  radial-gradient(40% 70% at 12% 110%, #ffb300cc, transparent 70%),
  radial-gradient(35% 80% at 38% 115%, #ff6a00cc, transparent 70%),
  radial-gradient(40% 75% at 64% 112%, #ffcc00b3, transparent 70%),
  radial-gradient(35% 85% at 90% 115%, #ff4d00cc, transparent 70%)}
.tm-egipto{--t1:#fff0b3; --t2:#d29a35; --t3:#4a2805;
  --tt:linear-gradient(180deg,#fff 0%,#ffe9a1 35%,#c4861b 55%,#fff0b8 75%,#8a5205 100%)}
.tm-egipto .gx-arte::before{opacity:.22; background:
  repeating-linear-gradient(90deg,#3a1d00 0 2px,transparent 2px 22px),
  repeating-linear-gradient(0deg,#3a1d00 0 2px,transparent 2px 26px)}
.tm-joyas{--t1:#f0d8ff; --t2:#7b3fe4; --t3:#150638;
  --tt:linear-gradient(180deg,#ffffff 0%,#e3d2ff 40%,#8e6bd8 55%,#f2e9ff 78%,#5a3aa8 100%); --ts:#1c0b48}
.tm-joyas .gx-arte::before{opacity:.35; background:
  conic-gradient(from 15deg at 50% 50%, #fff3 0 12deg, transparent 12deg 40deg, #fff2 40deg 52deg, transparent 52deg 95deg,
                 #fff3 95deg 110deg, transparent 110deg 170deg, #fff2 170deg 185deg, transparent 185deg 250deg,
                 #fff3 250deg 262deg, transparent 262deg 320deg, #fff2 320deg 334deg, transparent 334deg)}
.tm-mar{--t1:#a8f5ff; --t2:#1492d6; --t3:#051f45;
  --tt:linear-gradient(180deg,#ffffff 0%,#d8f6ff 40%,#5ab4e0 55%,#e9fbff 78%,#1f6f9e 100%); --ts:#032040}
.tm-mar .gx-arte::before{background:
  radial-gradient(60% 22% at 25% 100%, #ffffff40, transparent 70%),
  radial-gradient(60% 18% at 75% 96%, #ffffff33, transparent 70%),
  repeating-radial-gradient(circle at 50% 160%, transparent 0 18px, #ffffff14 18px 20px)}
.tm-frutas{--t1:#f4ff9a; --t2:#3fb52a; --t3:#0b3a10}
.tm-frutas .gx-arte::before, .tm-trebol .gx-arte::before, .tm-dados .gx-arte::before{opacity:.28;
  background:repeating-conic-gradient(from 0deg at 50% 118%, #fff 0 7deg, transparent 7deg 16deg)}
.tm-magia{--t1:#ffd6f4; --t2:#a044d6; --t3:#0e0833;
  --tt:linear-gradient(180deg,#ffffff 0%,#ffe0f6 38%,#d27ad0 55%,#fff1fb 78%,#7a2c8a 100%); --ts:#2a0636}
.tm-magia .gx-arte::before{background:
  radial-gradient(circle,#fff 1px,transparent 1.8px) 0 0/27px 23px,
  radial-gradient(circle,#ffe39a 1px,transparent 1.8px) 11px 9px/41px 31px; opacity:.6}
.tm-noche{--t1:#6ff6ff; --t2:#2a1e7a; --t3:#07051c;
  --tt:linear-gradient(180deg,#ffffff,#9ffbff 45%,#2de2ff 60%,#eaffff); --ts:#0a0540}
.tm-noche .gx-arte::before{opacity:.45; background:
  repeating-linear-gradient(90deg,#ff3fb455 0 1px,transparent 1px 26px),
  repeating-linear-gradient(0deg,#2de2ff44 0 1px,transparent 1px 20px)}
.tm-noche .gx-tit span{filter:drop-shadow(0 0 6px #2de2ff) drop-shadow(0 3px 0 #000c)}
.tm-trebol{--t1:#fff4a8; --t2:#23a24a; --t3:#06301a}
.tm-dados{--t1:#ffffff; --t2:#e2203d; --t3:#3a040e;
  --tt:linear-gradient(180deg,#ffffff 0%,#ffffff 45%,#ffd1d8 60%,#ffffff); --ts:#5a0010}
.tm-fiesta{--t1:#eaf8ff; --t2:#3b8fe0; --t3:#0a1c3f;
  --tt:linear-gradient(180deg,#ffffff 0%,#e5f4ff 40%,#8fbbe6 55%,#ffffff 78%,#3f6ea0 100%); --ts:#0a1c3f}
.tm-fiesta .gx-arte::before{background:radial-gradient(circle,#fff 1.2px,transparent 2px) 0 0/19px 21px; opacity:.5}
.tm-bestias{--t1:#ffe2a8; --t2:#b86a1e; --t3:#241004}
.tm-bestias .gx-arte::before{opacity:.25; background:repeating-conic-gradient(from 0deg at 50% 118%, #fff 0 5deg, transparent 5deg 13deg)}
.tm-keno{--t1:#c3e6ff; --t2:#2a6fe0; --t3:#071940;
  --tt:linear-gradient(180deg,#ffffff,#ffffff 45%,#bfe3ff 60%,#ffffff); --ts:#061640}
.tm-keno .gx-arte::before{background:
  radial-gradient(circle at 30% 30%,#fff 0 3px,#ffd23f 4px 11px,transparent 12px) 0 0/48px 44px,
  radial-gradient(circle at 30% 30%,#fff 0 3px,#ff4f6d 4px 11px,transparent 12px) 24px 22px/48px 44px; opacity:.55}
.tm-base{--t1:color-mix(in srgb,var(--pc,#555) 40%,#fff); --t2:var(--pc,#555); --t3:#08090f}
.tm-base .gx-arte::before{opacity:.22; background:repeating-conic-gradient(from 0deg at 50% 118%, #fff 0 6deg, transparent 6deg 15deg)}

/* ---------- 5. barra de abajo ---------- */
.gx-bottom{display:flex; align-items:stretch; gap:10px; padding:8px clamp(10px,2vw,22px);
  background:linear-gradient(180deg,#2446d6,var(--gx-azul) 30%,var(--gx-azul3)); border-top:2px solid #000;
  box-shadow:inset 0 1px 0 #ffffff44}
.gx-saldo{display:flex; flex-direction:column; justify-content:center; min-width:150px}
.gx-saldo small{font:900 clamp(18px,1.8vw,26px)/1 var(--gx-disp); letter-spacing:.06em; color:var(--gx-oro); text-shadow:0 2px 0 #0009}
.gx-saldo b{margin-top:3px; padding:4px 12px; border-radius:6px; background:#050a24; border:1px solid #000;
  font:800 clamp(18px,1.9vw,26px)/1 var(--gx-disp); letter-spacing:.08em; font-variant-numeric:tabular-nums; color:#fff}
.gx-esp{flex:1 1 auto}
.gx-quien{display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:4px}
.gx-user{height:34px; min-width:190px; max-width:260px; border-radius:8px; padding:0 10px; cursor:pointer;
  background:#050a24; border:1px solid #000; color:var(--gx-oro); font:900 17px/1 var(--gx-disp); letter-spacing:.04em}
.gx-reloj{font:900 clamp(20px,2vw,28px)/1 var(--gx-disp); color:var(--gx-oro); letter-spacing:.06em; text-shadow:0 2px 0 #0009;
  font-variant-numeric:tabular-nums; align-self:center}
.gx-buscar{align-self:center; position:relative}
.gx-buscar input{height:40px; width:clamp(150px,16vw,240px); border-radius:8px; padding:0 12px 0 34px;
  background:#050a24; border:1px solid #000; color:#fff; font:800 18px/1 var(--gx-disp); letter-spacing:.03em}
.gx-buscar input::placeholder{color:#ffffffaa}
.gx-buscar svg{position:absolute; left:10px; top:50%; translate:0 -50%; width:17px; height:17px; color:#ffffffaa}
.gx-volver{align-self:center; height:44px; padding:0 22px; border-radius:8px; cursor:pointer; border:1px solid #000;
  background:linear-gradient(180deg,#3b62ff,var(--gx-azul2)); color:#fff; box-shadow:inset 0 1px 0 #ffffff55;
  font:900 20px/1 var(--gx-disp); letter-spacing:.08em; text-transform:uppercase}
.gx-volver[hidden]{display:none}

/* ---------- vacios y avisos ---------- */
.gx-vacio{grid-column:1/-1; text-align:center; padding:30px 10px; color:#c6ccdc}
.gx-vacio h3{margin:0 0 6px; font:900 28px/1.1 var(--gx-disp); letter-spacing:.03em; text-transform:uppercase; color:#fff}
.gx-vacio p{margin:0 0 14px; color:#8b94ad}
.gx-vacio button{height:40px; padding:0 18px; border-radius:8px; border:0; cursor:pointer;
  background:var(--gx-oro); color:#231600; font:900 16px/1 var(--gx-disp); letter-spacing:.06em}
.lb-toast{position:fixed; left:50%; bottom:92px; translate:-50% 0; z-index:60; max-width:min(560px,92vw);
  padding:11px 16px; border-radius:10px; background:#1d2334; border:1px solid #ff5d5d66; color:#ffd9d9; font-size:13px;
  box-shadow:0 12px 30px #000a; transition:opacity .2s, translate .2s}
.lb-toast[hidden]{display:block; opacity:0; translate:-50% 12px; pointer-events:none}

/* boton para volver a la sala desde el panel */
#btnSala{height:32px; padding:0 13px; border-radius:8px; cursor:pointer; margin-left:10px;
  background:linear-gradient(180deg,#3b62ff,#0a1a66); border:1px solid #000; color:#fff;
  font:900 15px/1 'Big Shoulders Display','Arial Narrow',sans-serif; letter-spacing:.12em; text-transform:uppercase}
#btnSala:hover{filter:brightness(1.15)}

#lobby :focus-visible, #btnSala:focus-visible{outline:2px solid var(--gx-oro,#ffc92e); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .gx-card, .gx-card:hover{transition:none; transform:none}
  .gx-grid.entra-izq, .gx-grid.entra-der{animation:none}
}
@media (max-width:700px){
  .gx-marca{padding:2px 0 6px} .gx-marca small{display:none}
  .gx-flecha{width:30px; height:110px}
  .gx-bottom{flex-wrap:wrap; gap:8px}
  .gx-saldo{min-width:0}
  .gx-esp{display:none}
  .gx-buscar{order:5; flex:1 1 100%} .gx-buscar input{width:100%}
  .gx-reloj{display:none}
  .gx-user{min-width:0}
}