/* ═══════════════════════════════════════════════════════════════════
   ARCANOVA — estilos de la página principal (portada, tiendas y panel)

   Antes vivían dentro de index.php. Ahora van en este archivo aparte
   para que el navegador lo guarde y no lo vuelva a descargar en cada
   visita. index.php lo pide con su versión en el nombre
   (sitio.<número>.css → este archivo, por la regla del .htaccess):
   al subir uno nuevo, el número cambia solo y todos reciben el nuevo.
   ═══════════════════════════════════════════════════════════════════ */
:root{--bg:#0F172A;--s:#1E293B;--s2:#273548;--br:#334155;--tx:#E2E8F0;--mu:#94A3B8;--ac:#38BDF8;--gn:#10B981;--rd:#EF4444;--am:#F59E0B;--in:#6366F1;--pu:#A855F7;--r:10px;--rl:16px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);font-size:14px}
#app{display:flex;min-height:100vh}
.sb{width:220px;height:100vh;background:var(--s);border-right:1px solid var(--br);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;overflow-y:auto}
.sb-logo{padding:18px 16px;border-bottom:1px solid var(--br);font-weight:800;font-size:16px;color:var(--ac);
  display:flex;align-items:center;justify-content:center;text-align:center}
.sb-logo span{color:var(--tx)}
.sb-sec{padding:8px 0;border-bottom:1px solid var(--br)}
.sb-lbl{cursor:default;font-size:10px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:1px;padding:6px 16px 2px;display:flex;align-items:center;justify-content:space-between;user-select:none}
.sb-lbl:hover{color:var(--tx)}
.sb-lbl .sb-arrow{transition:transform .2s;font-size:11px}
.ni{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:var(--mu);font-size:13px;font-weight:500;border-left:3px solid transparent;transition:all .15s}
.ni:hover{color:var(--tx);background:var(--s2)}
.ni.active{color:var(--ac);background:rgba(56,189,248,.08);border-left-color:var(--ac)}
.ni .ic{width:18px;text-align:center;font-size:15px}
.sb-user{margin-top:auto;padding:14px 16px;border-top:1px solid var(--br);font-size:12px;color:var(--mu)}
.sb-user strong{display:block;color:var(--tx);font-size:13px}
.main{margin-left:0;flex:1;padding:24px;min-width:0}
.pg{display:none}.pg.active{display:block}
.tp{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.tp h1{font-size:20px;font-weight:700}
.tp .sub{font-size:13px;color:var(--mu);margin-top:2px}
.kpi-g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
/* Filas de 2, 3 o 5 tarjetas (las partidas con plata y gratis van en su propia fila) */
.kpi-g.kpi-2{grid-template-columns:repeat(2,1fr)}.kpi-g.kpi-3{grid-template-columns:repeat(3,1fr)}.kpi-g.kpi-5{grid-template-columns:repeat(5,1fr)}
.kpi{background:var(--s);border:1px solid var(--br);border-radius:var(--r);padding:16px}
.kpi-l{font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.7px}
.kpi-v{font-size:26px;font-weight:800;margin-top:6px}
.kpi-s{font-size:11px;color:var(--mu);margin-top:4px}
.pan{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);padding:20px;margin-bottom:16px}
.pan-t{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
/* Las tres opciones de castigo, una debajo de otra y bien separadas */
.mdm-op{display:flex;align-items:flex-start;gap:11px;cursor:pointer;background:var(--bg);
  border:2px solid var(--br);border-radius:12px;padding:12px 13px;transition:.15s}
.mdm-op:hover{border-color:var(--mu)}
.mdm-op.sel{border-color:var(--rd);background:rgba(239,68,68,.08)}
/* El escudito que sale al lado del nombre en el chat (solo lo ven los que moderan) */
.chat-mod{cursor:pointer;opacity:.5;font-size:11px;padding:0 3px;border-radius:5px;transition:.15s}
.chat-mod:hover{opacity:1;background:rgba(239,68,68,.18)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.fr{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.fr label{font-size:11px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.fr input,.fr select{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:9px 12px;color:var(--tx);font-family:'Inter',sans-serif;font-size:13px;width:100%;transition:border .15s}
.fr input:focus,.fr select:focus{outline:none;border-color:var(--ac)}
.fmt-grupo{font-size:10.5px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 4px}
.fmt-fila{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--br);border-radius:8px;margin-bottom:4px;background:var(--bg)}
.fmt-fila.on{border-color:rgba(56,189,248,.5)}
.fmt-fila label{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:12.5px;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--tx)}
.fmt-fila label small{color:var(--mu);font-weight:500}
.fmt-fila input[type=checkbox]{width:15px;height:15px;accent-color:var(--ac)}
.fmt-fila input[type=text]{width:150px;flex:none;padding:5px 8px;font-size:12px}
.fr select option{background:var(--s)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r);border:none;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.bp{background:var(--ac);color:#0F172A}.bp:hover{background:#0EA5E9}
.bg{background:var(--gn);color:#fff}.bg:hover{background:#059669}
.br2{background:var(--rd);color:#fff}.br2:hover{background:#DC2626}
.bgh{background:var(--s2);color:var(--tx);border:1px solid var(--br)}.bgh:hover{background:var(--br)}
.bam{background:var(--am);color:#0F172A}
.bsm{padding:5px 10px;font-size:12px}
.bfw{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:1px solid var(--br)}
td{padding:10px 12px;border-bottom:1px solid rgba(51,65,85,.5);font-size:13px}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.ba{background:rgba(245,158,11,.15);color:var(--am);border:1px solid rgba(245,158,11,.3)}
.bb{background:rgba(99,102,241,.15);color:var(--in);border:1px solid rgba(99,102,241,.3)}
.bc{background:rgba(168,85,247,.15);color:var(--pu);border:1px solid rgba(168,85,247,.3)}
.bg2{background:rgba(16,185,129,.15);color:var(--gn);border:1px solid rgba(16,185,129,.3)}
.br3{background:rgba(239,68,68,.15);color:var(--rd);border:1px solid rgba(239,68,68,.3)}
.bl{background:rgba(56,189,248,.15);color:var(--ac);border:1px solid rgba(56,189,248,.3)}
.al{padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ai{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.3);color:var(--ac)}
.aw{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--am)}
.ae{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--rd)}
.ag{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--gn)}
/* Las ~60 ventanas del sistema existen siempre (cerradas = transparentes). Antes TODAS llevaban
   el desenfoque de fondo aunque estuvieran cerradas: el navegador desenfocaba la pantalla entera
   unas 60 veces en cada cuadro y el panel y la portada iban a tirones. Ahora solo la ventana
   abierta desenfoca (al cerrarse lo conserva 0,2 s mientras se desvanece: se ve igual que antes). */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:opacity .2s,backdrop-filter 0s .2s}
.ov.open{opacity:1;pointer-events:all;backdrop-filter:blur(4px);transition:opacity .2s}
.mo{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);padding:24px;width:480px;max-width:96vw;
  max-height:90vh;overflow-y:auto;overscroll-behavior:contain;transform:translateY(16px);transition:transform .2s}
/* El título del modal queda fijo arriba al desplazarse */
.mo>.mot{position:sticky;top:-24px;background:var(--s);margin:-24px -24px 16px;padding:20px 24px 14px;z-index:3;
  border-bottom:1px solid var(--br)}
.ov.open .mo{transform:translateY(0)}
.mot{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.mc{cursor:pointer;color:var(--mu);font-size:18px}.mc:hover{color:var(--tx)}
/* ── Modo app (APK o app instalada): sin portada, solo entrar o crear cuenta ── */
html.modo-app #pg-inicio,html.modo-app #inicio-fabs,html.modo-app #btn-instalar,html.modo-app #guest-chat-box,html.modo-app .sb,html.modo-app #mv-topbar{display:none!important}
html.modo-app #mo-login{opacity:1!important;pointer-events:all!important;background:var(--bg);backdrop-filter:none;align-items:flex-start;overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 0 32px}
html.modo-app #mo-login .mo{transform:none;max-height:none;overflow:visible;width:420px}
html.modo-app #mo-login .mc{display:none}
/* Mientras se averigua si ya hay sesión, la app muestra solo su logo girando (nada de portada ni de formulario) */
html.app-cargando #mo-login{opacity:0!important;pointer-events:none!important}
html.app-cargando body::after{content:'';position:fixed;inset:0;z-index:99998;
  background:var(--lg-icono,none) 50% 50%/76px 76px no-repeat,radial-gradient(circle at 50% 50%,rgba(56,189,248,.22),rgba(56,189,248,0) 150px),linear-gradient(180deg,#0c1838,#050818)}
html.app-cargando body::before{content:'';position:fixed;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;z-index:99999;
  border-radius:50%;border:3px solid rgba(56,189,248,.14);border-top-color:#38BDF8;border-right-color:rgba(139,92,246,.85);animation:appGira .9s linear infinite}
@keyframes appGira{to{transform:rotate(360deg)}}
/* En la app no se pregunta: siempre queda recordada */
html.modo-app #lg-fila-recordar{display:none!important}
/* ── arcanova.pro/entrar: la pantalla de entrar sola, sin la página web detrás (en el navegador) ── */
html.modo-entrar #pg-inicio,html.modo-entrar #inicio-fabs,html.modo-entrar #btn-instalar,html.modo-entrar #guest-chat-box,html.modo-entrar .sb,html.modo-entrar #mv-topbar{display:none!important}
html.modo-entrar #mo-login{opacity:1!important;pointer-events:all!important;background:var(--bg);backdrop-filter:none;align-items:flex-start;overflow-y:auto;padding:max(28px,env(safe-area-inset-top)) 0 32px}
html.modo-entrar #mo-login .mo{transform:none;max-height:none;overflow:visible;width:420px}
html.modo-entrar #mo-login .mc{display:none}
html.modo-entrar #app-marca{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 18px;text-align:center}
/* La tarjeta de entrar: el título va justo al borde, con las esquinas redondeadas de la
   tarjeta (antes, en el teléfono, se salía 4 px por cada lado y arriba quedaba en punta) */
#mo-login .mo>.mot{border-radius:calc(var(--rl) - 1px) calc(var(--rl) - 1px) 0 0}
@media(max-width:900px){ #mo-login .mo>.mot{margin:-20px -20px 16px;top:-20px;padding:18px 20px 13px} }
#entrar-web-volver{display:none}
html.modo-entrar #entrar-web-volver{display:block;text-align:center;margin:18px auto 2px;font-size:13px;font-weight:600;color:var(--mu);text-decoration:none}
html.modo-entrar #entrar-web-volver:hover{color:var(--ac)}
#app-marca{display:none}
html.modo-app #app-marca{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 18px;text-align:center}
#app-marca img{height:56px;max-width:220px;object-fit:contain}
#app-marca b{font-size:22px;letter-spacing:2px}
#app-marca span{font-size:12.5px;color:var(--mu)}
/* ═══════════════════════════════════════════════════════════════════
   ENTRAR / CREAR CUENTA · diseño 3D (lote 48)
   "Debería salir el logo… un diseño bien profesional, con efectos 3D,
   algo bien elaborado, no eso tan simple… Aquí no somos básicos."
   · En la app (?app=1) y en arcanova.pro/entrar (html.lg-pantalla) es una
     pantalla completa: cielo con estrellas, el piso de luz que avanza hacia
     ti, piezas que flotan (cubo de cristal, moneda, ticket y gema), el
     emblema de la marca en 3D que se balancea solo con dos anillos de luz
     que lo orbitan, y la tarjeta de cristal con un borde de luz que gira.
   · En la página web (la ventanita encima) va la misma tarjeta, sin escena.
   · Todo se mueve solo (también en el teléfono) y casi todo con transform /
     opacity, que lo mueve la tarjeta gráfica sin trabar. El piso, las
     estrellas y las chispas van en un lienzo (canvas) a baja resolución.
     Con «reducir movimiento» del teléfono se queda quieto. En teléfonos
     sencillos (html.lg-ligero) se quitan el desenfoque y algunas piezas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La tarjeta (en todas partes: app, /entrar y la ventanita de la web) ── */
.lg-tarjeta{background:linear-gradient(165deg,#1a2640 0%,#121b2f 100%);border:1px solid rgba(148,163,184,.2);border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-tarjeta>.mot{background:#1a2640}
#mo-login .mo.lg-tarjeta>.mot,#mo-recuperar .mo.lg-tarjeta>.mot{border-radius:21px 21px 0 0}
#mo-login .lg-borde,#mo-login .lg-titulo,#mo-login>.lg-marca,#mo-login>.lg-sellos,#mo-login>.lg-escena{display:none}

/* Las dos pestañas: una pastilla de luz que se desliza */
#mo-login .lg-tabs{position:relative;display:flex;padding:5px;margin:0 0 18px;border-radius:15px;
  background:rgba(2,6,23,.5);border:1px solid rgba(148,163,184,.16);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
#mo-login .lg-tabs button{position:relative;z-index:1;flex:1;min-width:0;padding:11px 6px;border:none;border-radius:11px;background:transparent;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--mu);cursor:pointer;transition:color .25s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
#mo-login .lg-tabs button:hover{color:var(--tx)}
#mo-login .lg-tabs button.on{color:#06101f}
#mo-login .lg-tabs-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:11px;
  background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 45%,#818cf8 100%);
  box-shadow:0 6px 18px rgba(56,189,248,.35),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(30,58,138,.25);
  transition:transform .38s cubic-bezier(.25,.9,.3,1.15)}
#mo-login .lg-tabs[data-tab=registro] .lg-tabs-pill{transform:translateX(100%)}

/* Los campos: con su dibujito a la izquierda y brillo al escribir */
.lg-tarjeta .fr{gap:6px;margin-bottom:14px}
.lg-tarjeta .g2{column-gap:12px;row-gap:0}
.lg-tarjeta .fr label{font-size:11px;letter-spacing:.9px;color:#9fb1c9}
.lg-tarjeta .fr input,.lg-tarjeta .fr select{height:50px;padding:0 14px;border-radius:13px;font-size:16px;color:#f1f5f9;
  background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.22);box-shadow:inset 0 2px 6px rgba(0,0,0,.3);
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.lg-tarjeta .fr input:focus,.lg-tarjeta .fr select:focus{border-color:#38bdf8;background-color:rgba(2,6,23,.78);
  box-shadow:0 0 0 4px rgba(56,189,248,.16),inset 0 2px 6px rgba(0,0,0,.3)}
.lg-tarjeta .fr input::placeholder{color:#5b6b82}
.lg-tarjeta .fr input.lg-codigo{height:auto}
.lg-tarjeta .fr input[type=checkbox]{height:auto}
.lg-campo{position:relative}
.lg-campo>.lg-ico{position:absolute;left:14px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:#7dd3fc;opacity:.62;pointer-events:none;transition:opacity .2s,color .2s}
.lg-campo:focus-within>.lg-ico{opacity:1;color:#38bdf8}
.lg-tarjeta .fr .lg-campo>input,.lg-tarjeta .fr .lg-campo>select{padding-left:44px}
.lg-tarjeta .fr .lg-campo>input.lg-con-ojo{padding-right:50px}
.lg-ojo{position:absolute;right:4px;top:50%;width:42px;height:42px;margin-top:-21px;padding:0;border:none;border-radius:10px;background:transparent;
  color:#7f8ea6;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.lg-ojo:hover,.lg-ojo.on{color:#e2e8f0}
.lg-ojo svg{width:20px;height:20px}
.lg-ojo .no,.lg-ojo.on .si{display:none}
.lg-ojo.on .no{display:block}

/* El botón principal: en relieve (se hunde al tocarlo) y con un destello que pasa */
.lg-tarjeta .lg-boton{position:relative;overflow:hidden;isolation:isolate;min-height:54px;padding:12px 18px!important;margin-top:4px;border-radius:15px;
  font-size:16px;font-weight:800;letter-spacing:.3px;color:#fff;gap:10px;
  background:linear-gradient(90deg,#06b6d4 0%,#3b82f6 52%,#8b5cf6 100%);
  box-shadow:0 5px 0 #1e3a8a,0 14px 28px rgba(59,130,246,.36),inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .12s,box-shadow .12s,filter .2s;-webkit-tap-highlight-color:transparent}
.lg-tarjeta .lg-boton:hover{background:linear-gradient(90deg,#06b6d4 0%,#3b82f6 52%,#8b5cf6 100%);filter:brightness(1.08)}
.lg-tarjeta .lg-boton:active{transform:translateY(4px);box-shadow:0 1px 0 #1e3a8a,0 6px 14px rgba(59,130,246,.3),inset 0 1px 0 rgba(255,255,255,.45)}
.lg-tarjeta .lg-boton:disabled{opacity:.8;cursor:wait;transform:none}
.lg-tarjeta .lg-boton svg{width:20px;height:20px;flex:none;transition:transform .25s}
.lg-tarjeta .lg-boton:hover svg{transform:translateX(3px)}
.lg-tarjeta .lg-boton::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-35%;width:30%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  transform:translateX(0) skewX(-18deg);animation:lgDestello 4s ease-in-out 1.6s infinite}
@keyframes lgDestello{0%{transform:translateX(0) skewX(-18deg)}50%,100%{transform:translateX(560%) skewX(-18deg)}}
.lg-tarjeta .btn.bgh{background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.22);color:#cbd5e1;border-radius:12px;min-height:40px;justify-content:center}
.lg-tarjeta .btn.bgh:hover{background:rgba(148,163,184,.2);color:#fff}
.lg-olvido{text-align:center;margin-top:16px}
.lg-olvido span{font-size:13.5px;font-weight:600;color:#7dd3fc;cursor:pointer;border-bottom:1px dashed rgba(125,211,252,.45);padding-bottom:1px}
.lg-olvido span:hover{color:#bae6fd}
.lg-nota{font-size:11.5px;color:var(--mu);margin:-2px 0 12px}
/* (lote 51) Al crear la cuenta: mayor de 18 y acepta los términos, con sus enlaces */
.lg-legal{line-height:1.55}
.lg-legal b{color:#cbd5e1;font-weight:700}
.lg-legal a{color:#7dd3fc;font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(125,211,252,.45)}
.lg-legal a:hover{color:#bae6fd}
.lg-paso-cab{text-align:center;padding:4px 0 16px}
.lg-paso-ico{width:64px;height:64px;margin:0 auto 10px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#e0f2fe;
  background:linear-gradient(135deg,#06b6d4,#3b82f6 55%,#8b5cf6);box-shadow:0 10px 26px rgba(59,130,246,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.lg-paso-ico svg{width:32px;height:32px}
.lg-paso-tit{font-size:18px;font-weight:800;margin-bottom:6px;color:#f1f5f9}
.lg-paso-sub{font-size:13px;color:var(--mu);line-height:1.6}

/* ── Pantalla completa: la app (?app=1) y arcanova.pro/entrar ── */
html.lg-pantalla #mo-login{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 16px calc(env(safe-area-inset-bottom,0px) + 26px);
  background:#060b1d;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html.lg-pantalla #mo-login>:not(.lg-escena){position:relative;z-index:1;flex-shrink:0}
html.lg-pantalla #mo-login .mo{width:100%!important;max-width:420px;padding:22px 20px 20px;border-radius:24px;
  background:linear-gradient(160deg,rgba(30,43,70,.68),rgba(9,15,33,.76));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 34px 80px rgba(2,6,23,.72),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.1)}
html.lg-pantalla #mo-login .mo>.mot{display:none}
/* el borde de luz que da vueltas alrededor de la tarjeta */
html.lg-pantalla #mo-login .lg-borde{display:block;position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html.lg-pantalla #mo-login .lg-borde::before{content:'';position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;
  background:conic-gradient(from 0deg,rgba(56,189,248,0) 0deg,rgba(56,189,248,0) 195deg,rgba(34,211,238,.95) 250deg,rgba(139,92,246,.95) 292deg,rgba(249,115,22,.85) 322deg,rgba(249,115,22,0) 350deg);
  animation:lgGira 7s linear infinite}
html.lg-pantalla #mo-login .lg-titulo{display:block;text-align:center;margin:0 0 16px}
.lg-titulo b{display:block;font-size:21px;font-weight:800;letter-spacing:-.2px;color:#f1f5f9}
.lg-titulo span{display:block;font-size:13px;color:#94a3b8;margin-top:4px}
#mo-login[data-tab=login] .lg-titulo .t-registro,#mo-login[data-tab=registro] .lg-titulo .t-login{display:none}
html.lg-pantalla #entrar-web-volver{margin:16px auto 0;color:#94a3b8}

/* La marca: el emblema en 3D, el nombre con un brillo que pasa y el lema */
html.lg-pantalla #mo-login>.lg-marca{display:flex;flex-direction:column;align-items:center;margin:0 0 16px;text-align:center;perspective:700px}
.lg-emblema{--em:128px;position:relative;width:var(--em);height:var(--em);transform-style:preserve-3d;
  transform:rotateX(calc(var(--py,0) * -10deg)) rotateY(calc(var(--px,0) * 14deg))}
.lg-halo{position:absolute;inset:-8%;transform:translateZ(-80px) scale(1.18);pointer-events:none}
.lg-halo::before{content:'';position:absolute;inset:0;border-radius:50%;opacity:.42;filter:blur(22px);
  background:conic-gradient(from 0deg,#22d3ee,#3b82f6,#8b5cf6,#f97316,#22d3ee);animation:lgGira 9s linear infinite}
.lg-anillo{position:absolute;left:50%;top:50%;width:150%;height:150%;margin:-75% 0 0 -75%;border-radius:50%;pointer-events:none;
  border:2px solid rgba(103,232,249,.16);border-top-color:rgba(165,243,252,.95);border-right-color:rgba(103,232,249,.5);
  box-shadow:0 0 14px rgba(56,189,248,.22),inset 0 0 14px rgba(56,189,248,.16);animation:lgOrbita1 6s linear infinite}
.lg-anillo.r2{width:176%;height:176%;margin:-88% 0 0 -88%;border-color:rgba(196,181,253,.13);border-bottom-color:rgba(253,186,116,.9);border-left-color:rgba(196,181,253,.55);
  box-shadow:0 0 14px rgba(139,92,246,.2),inset 0 0 14px rgba(249,115,22,.12);animation:lgOrbita2 9s linear infinite}
.lg-anillo i{display:none}
@keyframes lgOrbita1{from{transform:rotateX(74deg) rotateY(-10deg) rotateZ(0)}to{transform:rotateX(74deg) rotateY(-10deg) rotateZ(360deg)}}
@keyframes lgOrbita2{from{transform:rotateX(66deg) rotateY(16deg) rotateZ(360deg)}to{transform:rotateX(66deg) rotateY(16deg) rotateZ(0)}}
.lg-emb3d{position:absolute;inset:0;transform-style:preserve-3d;animation:lgBalanceo 6.5s ease-in-out infinite}
.lg-emb3d img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none}
.lg-emb3d .lg-capa{transform:translateZ(calc(var(--i) * -1.5px));filter:brightness(.4) saturate(1.3)}
.lg-emb3d .lg-frente{transform:translateZ(.6px);filter:drop-shadow(0 0 12px rgba(56,189,248,.45))}
.lg-reflejo{position:absolute;inset:0;transform:translateZ(1.2px);pointer-events:none;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
  background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 46%,rgba(255,255,255,0) 60%) 100% 0/300% 100% no-repeat;
  animation:lgReflejo 5s ease-in-out 1.2s infinite}
@keyframes lgBalanceo{0%,100%{transform:translateY(0) rotateY(-26deg) rotateX(6deg)}50%{transform:translateY(-8px) rotateY(26deg) rotateX(-4deg)}}
@keyframes lgReflejo{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.lg-sombra{position:absolute;left:16%;right:16%;bottom:-18px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(56,189,248,.55),rgba(56,189,248,0));animation:lgSombra 6.5s ease-in-out infinite}
@keyframes lgSombra{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.78);opacity:.55}}
.lg-mono{position:absolute;inset:12%;display:flex;align-items:center;justify-content:center;border-radius:28%;
  font:800 calc(var(--em) * .48)/1 Inter,sans-serif;color:#fff;background:linear-gradient(135deg,#22d3ee,#3b82f6 55%,#8b5cf6);
  box-shadow:0 10px 30px rgba(59,130,246,.45),inset 0 2px 0 rgba(255,255,255,.4)}
.lg-wm{--wmh:40px;position:relative;margin-top:16px;height:var(--wmh);line-height:0}
.lg-wm img{height:100%;width:auto;max-width:min(260px,72vw);object-fit:contain;filter:drop-shadow(0 4px 14px rgba(14,165,233,.35))}
.lg-wm::after{content:'';position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--wm) center/contain no-repeat;mask:var(--wm) center/contain no-repeat;
  background:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.85) 48%,rgba(255,255,255,0) 60%) 100% 0/300% 100% no-repeat;
  animation:lgReflejo 5s ease-in-out 1.8s infinite}
.lg-wm-txt{margin-top:16px;font:800 32px/1 Inter,sans-serif;letter-spacing:4px;color:#38bdf8;
  background:linear-gradient(180deg,#a5f3fc,#38bdf8 55%,#2563eb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-lema{margin-top:10px;display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#7dd3fc}
.lg-lema i{width:4px;height:4px;border-radius:50%;background:#fb923c;box-shadow:0 0 8px #f97316}

/* Lo que se ofrece, debajo de la tarjeta */
html.lg-pantalla #mo-login>.lg-sellos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px;max-width:420px}
.lg-sellos span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:#cbd5e1;white-space:nowrap;
  background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lg-sellos svg{width:14px;height:14px;flex:none;color:#67e8f9}
.lg-sellos span:nth-child(2) svg{color:#fbbf24}
.lg-sellos span:nth-child(3) svg{color:#34d399}
@media (max-width:370px){ .lg-sellos{gap:5px} .lg-sellos span{padding:5px 8px;font-size:11px;gap:4px} .lg-sellos svg{width:13px;height:13px} }   /* (en 360 px caben los tres en una fila) */

/* ── La escena: cielo, piso de luz y piezas que flotan ── */
html.lg-pantalla #mo-login>.lg-escena{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(60% 42% at 10% 6%,rgba(34,211,238,.2),rgba(34,211,238,0) 70%),
    radial-gradient(55% 42% at 94% 16%,rgba(139,92,246,.24),rgba(139,92,246,0) 70%),
    radial-gradient(70% 45% at 28% 100%,rgba(249,115,22,.12),rgba(249,115,22,0) 70%),
    linear-gradient(180deg,#0c1838 0%,#0a1230 40%,#070c22 72%,#050818 100%)}
html.lg-pantalla.app-cargando #mo-login>.lg-escena{display:none}
.lg-lienzo{position:absolute;left:0;top:0;width:100%;height:100%}
.lg-sol{position:absolute;left:50%;top:var(--hz,170px);width:560px;height:300px;margin:-150px 0 0 -280px;
  background:radial-gradient(closest-side,rgba(56,189,248,.34),rgba(99,102,241,.14) 55%,rgba(99,102,241,0));animation:lgLatido 5s ease-in-out infinite}
@keyframes lgLatido{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.lg-horizonte{position:absolute;left:0;right:0;top:var(--hz,170px);height:2px;margin-top:-1px;
  background:linear-gradient(90deg,rgba(34,211,238,0),rgba(34,211,238,.9) 22%,rgba(167,139,250,.95) 50%,rgba(34,211,238,.9) 78%,rgba(34,211,238,0));
  box-shadow:0 0 18px 3px rgba(56,189,248,.42)}
.lg-obj{position:absolute;will-change:transform;
  translate:calc(var(--px,0) * var(--pz,10px) * -1) calc(var(--py,0) * var(--pz,10px) * -1)}
.lg-cubo{--pz:16px;right:max(14px,9vw);top:max(26px,calc(var(--hz,170px) - 132px));width:44px;height:44px;perspective:500px;animation:lgFlota 7s ease-in-out infinite}
.lg-cubo-in{position:absolute;inset:0;transform-style:preserve-3d;animation:lgCubo 14s linear infinite}
.lg-cubo-in b{position:absolute;inset:0;border:1.5px solid rgba(165,243,252,.75);border-radius:6px;
  background:linear-gradient(135deg,rgba(103,232,249,.24),rgba(99,102,241,.12));box-shadow:inset 0 0 14px rgba(56,189,248,.35),0 0 12px rgba(56,189,248,.22)}
.lg-cubo-in .f1{transform:translateZ(22px)}.lg-cubo-in .f2{transform:rotateY(90deg) translateZ(22px)}.lg-cubo-in .f3{transform:rotateY(180deg) translateZ(22px)}
.lg-cubo-in .f4{transform:rotateY(-90deg) translateZ(22px)}.lg-cubo-in .f5{transform:rotateX(90deg) translateZ(22px)}.lg-cubo-in .f6{transform:rotateX(-90deg) translateZ(22px)}
@keyframes lgCubo{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes lgFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.lg-moneda{--pz:22px;left:max(12px,8vw);top:max(40px,calc(var(--hz,170px) - 78px));width:40px;height:40px;perspective:400px;animation:lgFlota 6s ease-in-out -2s infinite}
.lg-moneda-in{position:absolute;inset:0;transform-style:preserve-3d;animation:lgMoneda 4.5s linear infinite}
.lg-moneda-in b{position:absolute;inset:0;border-radius:50%;background:#b45309;transform:translateZ(calc(var(--i) * -1.2px))}
.lg-moneda-in .cara{display:flex;align-items:center;justify-content:center;transform:translateZ(.6px);
  background:radial-gradient(circle at 34% 30%,#fff7d6 0%,#fde68a 18%,#fbbf24 45%,#d97706 80%,#92400e 100%);
  box-shadow:inset 0 0 0 2.5px rgba(255,251,235,.55),inset 0 -3px 6px rgba(120,53,15,.35),0 0 16px rgba(251,191,36,.45)}
.lg-moneda-in .cara svg{width:55%;height:55%;fill:#fffbeb}
.lg-moneda-in .cara.atras{transform:translateZ(-5.4px) rotateY(180deg)}   /* (la otra cara: dorada también, no el canto) */
@keyframes lgMoneda{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.lg-ticket{--pz:26px;left:max(-18px,calc(50% - 340px));top:calc(var(--hz,170px) + 30%);width:96px;
  filter:drop-shadow(0 10px 18px rgba(59,130,246,.35));animation:lgTicket 9s ease-in-out infinite}
.lg-ticket svg,.lg-gema svg{display:block;width:100%;height:auto}
@keyframes lgTicket{0%,100%{transform:translateY(0) rotate(-14deg) rotateY(-18deg)}50%{transform:translateY(-14px) rotate(-8deg) rotateY(24deg)}}
.lg-gema{--pz:30px;right:max(-8px,calc(50% - 330px));top:calc(var(--hz,170px) + 48%);width:46px;
  filter:drop-shadow(0 0 14px rgba(103,232,249,.45));animation:lgGema 8s ease-in-out -3s infinite}
@keyframes lgGema{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-16px) rotateY(180deg)}}
.lg-orbe{border-radius:50%;background:radial-gradient(circle,rgba(207,250,254,.95) 0,rgba(56,189,248,.5) 26%,rgba(56,189,248,0) 70%);
  animation:lgFlota 9s ease-in-out infinite}
.lg-orbe.o1{--pz:8px;width:18px;height:18px;left:22%;top:max(34px,calc(var(--hz,170px) - 150px));opacity:.7}
.lg-orbe.o2{--pz:12px;width:12px;height:12px;right:27%;top:calc(var(--hz,170px) - 34px);opacity:.6;animation-delay:-4s}
.lg-orbe.o3{--pz:34px;width:26px;height:26px;right:30%;bottom:4%;opacity:.5;animation-duration:11s;
  background:radial-gradient(circle,rgba(237,233,254,.95) 0,rgba(139,92,246,.5) 26%,rgba(139,92,246,0) 70%)}
@keyframes lgGira{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Cómo entra todo al abrir (cuando termina de saber si ya había sesión) */
html.lg-pantalla:not(.app-cargando) #mo-login .lg-emblema{animation:lgAparece .9s cubic-bezier(.2,.9,.25,1.2) .05s backwards}
html.lg-pantalla:not(.app-cargando) #mo-login .lg-wm,html.lg-pantalla:not(.app-cargando) #mo-login .lg-wm-txt{animation:lgSube .7s ease-out .25s backwards}
html.lg-pantalla:not(.app-cargando) #mo-login .lg-lema{animation:lgSube .7s ease-out .35s backwards}
html.lg-pantalla:not(.app-cargando) #mo-login .mo{animation:lgTarjeta .8s cubic-bezier(.2,.8,.2,1) .2s backwards}
html.lg-pantalla:not(.app-cargando) #mo-login>.lg-sellos{animation:lgSube .7s ease-out .55s backwards}
@keyframes lgAparece{from{opacity:0;transform:scale(.55) translateY(24px)}}
@keyframes lgSube{from{opacity:0;transform:translateY(12px)}}
@keyframes lgTarjeta{from{opacity:0;transform:perspective(900px) translateY(30px) rotateX(14deg)}}

/* Tamaños: teléfonos bajitos, computadoras y tabletas */
@media (max-height:700px),(max-width:359px){
  .lg-emblema{--em:100px}
  .lg-wm{--wmh:32px;margin-top:13px}
  html.lg-pantalla #mo-login .lg-titulo{display:none}
  html.lg-pantalla #mo-login>.lg-marca{margin-bottom:14px}
}
/* en el teléfono el ticket y la gema flotan abajo, en el piso (no asomados detrás de la tarjeta) */
@media (max-width:699px){
  .lg-ticket{left:5%;top:auto;bottom:6%;width:80px}
  .lg-gema{right:13%;top:auto;bottom:5%;width:40px}
}
@media (max-width:699px) and (max-height:760px){
  .lg-ticket,.lg-gema{display:none}
}
@media (min-width:700px){
  .lg-cubo{scale:1.35;top:max(48px,calc(var(--hz,170px) - 132px))}
  .lg-moneda{scale:1.3}
  .lg-ticket{width:120px}
  .lg-gema{width:58px}
}
/* computadoras bajitas (1366×768): que la tarjeta entera quepa sin bajar */
@media (min-width:700px) and (max-height:820px){
  .lg-emblema{--em:116px}
  .lg-wm{--wmh:38px;margin-top:14px}
  html.lg-pantalla #mo-login .lg-titulo{display:none}
  html.lg-pantalla #mo-login>.lg-marca{margin-bottom:14px}
}
@media (min-width:700px) and (min-height:821px){
  .lg-emblema{--em:140px}
  .lg-wm{--wmh:44px;margin-top:18px}
  html.lg-pantalla #mo-login .mo{padding:26px 26px 24px}
}
@media (min-width:700px) and (min-height:900px){
  .lg-emblema{--em:156px}
  .lg-wm{--wmh:48px;margin-top:20px}
  html.lg-pantalla #mo-login>.lg-marca{margin-top:auto}
  html.lg-pantalla #mo-login>:last-child{margin-bottom:auto}
}
/* Teléfonos sencillos: sin desenfoque y con menos piezas (que no se trabe) */
html.lg-ligero.lg-pantalla #mo-login .mo{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(26,38,64,.96),rgba(11,17,35,.97))}
html.lg-ligero .lg-sellos span{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lg-ligero .lg-ticket,html.lg-ligero .lg-gema,html.lg-ligero .lg-orbe{display:none}
html.lg-ligero .lg-halo::before{filter:blur(14px)}
/* «Reducir movimiento» en el teléfono: todo quieto */
@media (prefers-reduced-motion:reduce){
  #mo-login *,#mo-login *::before,#mo-login *::after{animation:none!important;transition:none!important}
}
.sin{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:8px 14px;color:var(--tx);font-family:'Inter',sans-serif;font-size:13px}
.sin:focus{outline:none;border-color:var(--ac)}
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--br)}
.tab{padding:9px 16px;cursor:pointer;font-size:13px;font-weight:500;color:var(--mu);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--ac);border-bottom-color:var(--ac)}
.cpb{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:14px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;white-space:pre-wrap;max-height:240px;overflow-y:auto}
.wh{background:linear-gradient(135deg,#0F2944,#0F172A);border:1px solid rgba(56,189,248,.2);border-radius:var(--rl);padding:28px;text-align:center;margin-bottom:18px}
.wh .wa{font-size:48px;font-weight:900;color:var(--gn);margin:8px 0}
.tc{border-radius:var(--r);padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px}
.tca{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3)}
.tcb{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3)}
.tcc{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3)}
.chat-tabs{display:flex;gap:10px;margin-bottom:14px}
.ctb{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r);border:2px solid var(--br);background:var(--s);color:var(--mu);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;flex:1;justify-content:center;transition:all .15s}
.ctA{border-color:var(--am);color:var(--am);background:rgba(245,158,11,.1)}
.ctB{border-color:var(--in);color:var(--in);background:rgba(99,102,241,.1)}
.ctC{border-color:var(--pu);color:var(--pu);background:rgba(168,85,247,.1)}
.chat-box{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);display:flex;flex-direction:column;height:calc(100vh - 290px);min-height:360px;position:relative;overflow:hidden}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--br);background:var(--s2)}
.ci{flex:1;background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:9px 14px;color:var(--tx);font-family:'Inter',sans-serif;font-size:13px}
.ci:focus{outline:none;border-color:var(--ac)}
.eb{font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;user-select:none}
.eb:hover{background:var(--br)}
.epk{position:absolute;bottom:64px;left:16px;background:var(--s2);border:1px solid var(--br);border-radius:var(--r);padding:10px;width:300px;line-height:2.4;font-size:20px;letter-spacing:4px;z-index:50;display:none}
.epk span{cursor:pointer;display:inline-block;transition:transform .1s}
.epk span:hover{transform:scale(1.3)}
.cm{display:flex;flex-direction:column;max-width:72%;animation:fu .2s ease}
.me{align-self:flex-end;align-items:flex-end}
.ot{align-self:flex-start;align-items:flex-start}
.sy{align-self:center;align-items:center;max-width:90%}
.mb2{padding:9px 14px;border-radius:14px;font-size:13px;line-height:1.5;word-break:break-word}
.me .mb2{background:var(--ac);color:#0F172A;border-bottom-right-radius:4px}
.ot .mb2{background:var(--s2);color:var(--tx);border-bottom-left-radius:4px}
.sy .mb2{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--gn);border-radius:10px;font-size:12px;text-align:center}
.mm2{font-size:11px;color:var(--mu);margin-top:3px;padding:0 4px}
.sol{background:linear-gradient(135deg,var(--s2),#1a1535);border:2px solid var(--in);border-radius:var(--rl);padding:16px;align-self:center;width:min(340px,90%);text-align:center}
.sol.ac2{border-color:var(--gn)}
.bat-panel{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;overflow-y:auto;padding:24px;display:none}
@keyframes pg{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
.rbt{display:none;align-items:center;gap:8px;background:var(--gn);color:#fff;border:none;border-radius:var(--r);padding:10px 18px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;cursor:pointer;animation:pg 1.8s infinite;margin-bottom:14px}
.rbt.show{display:flex}
.fab-g{position:fixed;bottom:28px;right:28px;display:none;flex-direction:column;gap:12px;z-index:200}
.fab-g.show{display:flex}
.fab{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;font-size:22px;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .15s}
.fab:hover{transform:scale(1.1)}
.sdr{position:fixed;right:0;bottom:0;width:360px;max-width:100vw;background:var(--s);border:1px solid var(--br);border-radius:var(--rl) var(--rl) 0 0;z-index:300;display:flex;flex-direction:column;transition:transform .25s;transform:translateY(100%)}
.sdr.open{transform:translateY(0)}
.shd{padding:12px 16px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;background:var(--in);border-radius:var(--rl) var(--rl) 0 0}
.smg{height:260px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.sba{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--br)}
.dep-opt{padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--br)}
.dep-opt:hover{background:var(--s2)}
.dep-opt:last-child{border-bottom:none}

/* Mensajes de jugadores en el top del ranking: fondo metálico animado */
:root{--metal-speed:5.5s}

/* ── Configuración en cuadros ──
   Las secciones se acomodan en rejilla sin tocar el HTML: la propia
   página pasa a ser la rejilla. Cerradas ocupan poco y caben varias
   por fila; al abrir una, se extiende a lo ancho para sus opciones. */
/* Cualquier contenedor con secciones desplegables se vuelve rejilla.
   La clase la pone el propio sistema al cargar (ver marcarRejillas), así
   funciona en todas las páginas actuales y en las que se agreguen después. */
.rejilla-acc{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px;align-items:start;align-content:start}
/* Una página que no está activa se oculta SIEMPRE, aunque sea rejilla.
   Sin esto, el display:grid le ganaba al display:none y se veían varias
   páginas encimadas: Configuración con Email Marketing y Notificaciones. */
.pg:not(.active).rejilla-acc{display:none}
/* Y la que sí está activa manda sobre cualquier display en línea */
.pg.active.rejilla-acc{display:grid}
/* Lo que no es una sección ocupa la fila entera */
.rejilla-acc>:not(.acc){grid-column:1/-1}
.acc{margin:0}

/* Cuadro cerrado: título con su ícono, nada más.
   ⚠️ Va tanto para los que cuelgan de la página como para los que están
      dentro de una rejilla (por ejemplo, dentro de unas pestañas). Antes
      solo valía para los primeros y los de dentro de pestañas se veían
      como cajones anchos, distintos de todo lo demás. */
.pg>.pan.acc:not(.abierto),
.rejilla-acc>.pan.acc:not(.abierto){padding:0;cursor:pointer;transition:transform .12s,border-color .12s}
.pg>.pan.acc:not(.abierto):hover,
.rejilla-acc>.pan.acc:not(.abierto):hover{transform:translateY(-2px);border-color:var(--ac)}
.pg>.pan.acc:not(.abierto)>.pan-t,
.rejilla-acc>.pan.acc:not(.abierto)>.pan-t{position:relative;margin:0;padding:18px 16px;
  flex-direction:column;align-items:flex-start;gap:8px;min-height:98px;justify-content:center;
  font-size:13px;line-height:1.35}
.pg>.pan.acc:not(.abierto)>.pan-t>span:first-child,
.rejilla-acc>.pan.acc:not(.abierto)>.pan-t>span:first-child{font-size:26px}
.pg>.pan.acc:not(.abierto)>.pan-t::after,
.rejilla-acc>.pan.acc:not(.abierto)>.pan-t::after{content:'▾';position:absolute;top:13px;right:14px;
  margin:0;font-size:12px;color:var(--mu)}
/* Una etiqueta de estado dentro de la cabecera no se pega al borde */
.pg>.pan.acc:not(.abierto)>.pan-t>.bdg,
.rejilla-acc>.pan.acc:not(.abierto)>.pan-t>.bdg{margin-left:0}

/* Cuadro abierto: toda la fila para él */
.pg>.pan.acc.abierto,
.rejilla-acc>.pan.acc.abierto{grid-column:1/-1}

@media(max-width:640px){
  .rejilla-acc{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
  .pg>.pan.acc:not(.abierto)>.pan-t,
  .rejilla-acc>.pan.acc:not(.abierto)>.pan-t{min-height:86px;padding:13px 11px;font-size:12px}
  .pg>.pan.acc:not(.abierto)>.pan-t>span:first-child,
  .rejilla-acc>.pan.acc:not(.abierto)>.pan-t>span:first-child{font-size:22px}
}

/* ── Lanzador de partida ── */
.jg-config{display:flex;align-items:center;gap:13px;background:var(--bg);
  border:1px solid var(--br);border-radius:13px;padding:15px;cursor:pointer;
  transition:border-color .15s,transform .12s}
.jg-config:hover{border-color:var(--ac);transform:translateY(-1px)}
.jg-rec{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.jg-rec-item{display:flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--br);border-radius:12px;padding:10px 13px;cursor:pointer;
  transition:all .14s;min-width:0}
.jg-rec-item:hover{border-color:var(--ac);transform:translateY(-2px)}
/* Opciones dentro de configurar partida */
.cp-op{display:flex;align-items:center;gap:13px;background:var(--bg);
  border:1px solid var(--br);border-radius:13px;padding:14px;cursor:pointer;
  margin-bottom:9px;transition:all .14s}
.cp-op:hover{border-color:var(--ac);transform:translateY(-1px)}
.cp-op.bloqueada{opacity:.45;cursor:not-allowed}
.cp-op.bloqueada:hover{border-color:var(--br);transform:none}
.cp-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.cp-juego{background:var(--bg);border:1px solid var(--br);border-radius:12px;
  padding:14px 10px;text-align:center;cursor:pointer;transition:all .14s}
.cp-juego:hover{border-color:var(--ac);transform:translateY(-2px)}
.cp-mod{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
  border:1px solid var(--br);border-radius:20px;padding:8px 14px;cursor:pointer;
  font-size:12.5px;transition:all .14s;margin:0 6px 6px 0}
.cp-mod:hover{border-color:var(--ac);background:rgba(56,189,248,.1)}

/* Sello de juego oficial: late suave en verde */
.sello-oficial{display:inline-flex;align-items:center;gap:4px;background:rgba(16,185,129,.16);
  border:1px solid var(--gn);color:var(--gn);border-radius:20px;padding:3px 9px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  animation:latirSello 1.8s ease-in-out infinite}
@keyframes latirSello{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45);opacity:1}
  50%{box-shadow:0 0 0 5px rgba(16,185,129,0);opacity:.82}
}

/* Puntito verde de "en línea" en el chat de vendedores */
.punto-activo{width:9px;height:9px;border-radius:50%;background:var(--gn);
  display:inline-block;flex-shrink:0;box-shadow:0 0 0 3px rgba(16,185,129,.2);
  animation:latido 2s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}
.fila-activo{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;transition:background .12s}
.fila-activo:hover{background:var(--bg)}
@media(max-width:900px){
  /* En pantallas chicas, los conectados van arriba y en horizontal */
  #vc-columnas{grid-template-columns:1fr !important}
  #vc-columnas>.pan:last-child{height:auto !important;min-height:0 !important;order:-1}
  #vc-activos{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 10px 10px}
  .fila-activo{flex-direction:column;gap:4px;min-width:64px;text-align:center}
  .fila-activo .nombre-activo{font-size:10.5px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Diseños personalizados: el texto escala junto con la imagen */
#dis-lienzo>div, .lienzo-diseno{container-type:inline-size}

/* Avisos flotantes (invitaciones, menciones, casos resueltos) */
#avisos-flotantes{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;
  flex-direction:column;gap:8px;max-width:330px;pointer-events:none}
.aviso-flotante{display:flex;gap:10px;align-items:flex-start;background:var(--s);
  border:1px solid var(--ac);border-left:4px solid var(--ac);border-radius:12px;padding:12px 13px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);pointer-events:auto;
  animation:entrarAviso .28s ease;transition:opacity .3s,transform .3s}
@keyframes entrarAviso{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  #avisos-flotantes{left:12px;right:12px;bottom:84px;max-width:none}
}

/* Acordeón de Configuración: un panel abierto a la vez */
.acc>.pan-t{cursor:pointer;user-select:none;margin-bottom:0}
.acc>.pan-t::after{content:'▾';margin-left:auto;font-size:13px;color:var(--mu);transition:transform .2s}
.acc.abierto>.pan-t::after{transform:rotate(180deg)}
.acc-cuerpo{display:none;padding-top:14px}
.acc.abierto .acc-cuerpo{display:block}

/* Globito de mensajes sin leer en el menú */
.ni{position:relative}
.sb-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:var(--rd);color:#fff;
  font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:none;
  align-items:center;justify-content:center;padding:0 5px;line-height:1;box-shadow:0 2px 6px rgba(239,68,68,.5)}
.sb-badge.on{display:flex}

/* Aviso obligatorio del tutorial: flecha apuntando al botón */
@keyframes rebotarFlecha{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.flecha-tutorial{position:absolute;top:100%;right:0;margin-top:6px;z-index:200;text-align:center;
  animation:rebotarFlecha 1.4s ease-in-out infinite;pointer-events:none}
.flecha-tutorial-punta{font-size:22px;color:var(--pu);line-height:1;margin-bottom:-2px;filter:drop-shadow(0 -2px 3px rgba(0,0,0,.25))}
.flecha-tutorial-globo{background:var(--pu);color:#fff;font-size:12px;font-weight:700;line-height:1.4;
  padding:9px 14px;border-radius:12px;white-space:nowrap;box-shadow:0 6px 18px rgba(168,85,247,.45)}
@media(max-width:640px){
  .flecha-tutorial{right:auto;left:50%;transform:translateX(-50%)}
  .flecha-tutorial-globo{white-space:normal;max-width:180px}
}
@keyframes metalShine{0%{background-position:-160% 0}100%{background-position:160% 0}}
.msg-metal{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.msg-metal::before{content:'';position:absolute;inset:0;background-size:250% 100%;
  animation-name:metalShine;animation-timing-function:linear;animation-iteration-count:infinite;
  animation-duration:var(--metal-speed);pointer-events:none}
.msg-oro{background:linear-gradient(135deg,#7a5b12,#4d3a0c)}
.msg-oro::before{background-image:linear-gradient(100deg,transparent 0%,rgba(255,246,176,.85) 45%,rgba(255,224,102,.95) 50%,rgba(255,246,176,.85) 55%,transparent 100%)}
.msg-plata{background:linear-gradient(135deg,#5b6470,#33393f)}
.msg-plata::before{background-image:linear-gradient(100deg,transparent 0%,rgba(244,246,248,.85) 45%,rgba(223,227,232,.95) 50%,rgba(244,246,248,.85) 55%,transparent 100%)}
.msg-cobre{background:linear-gradient(135deg,#6b3d1d,#40230f)}
.msg-cobre::before{background-image:linear-gradient(100deg,transparent 0%,rgba(240,168,117,.85) 45%,rgba(232,147,90,.95) 50%,rgba(240,168,117,.85) 55%,transparent 100%)}
.nombre-oro{background:linear-gradient(90deg,#FBBF24,#FEF3C7,#FBBF24);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation-name:metalShine;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--metal-speed)}
.nombre-plata{background:linear-gradient(90deg,#CBD5E1,#F8FAFC,#CBD5E1);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation-name:metalShine;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--metal-speed)}
.nombre-cobre{background:linear-gradient(90deg,#D97706,#FDBA74,#D97706);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation-name:metalShine;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--metal-speed)}

/* Categorías dentro del menú */
.sb-grupo{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mu);
  padding:14px 20px 6px;opacity:.65;display:flex;align-items:center;gap:8px}
.sb-grupo::after{content:'';flex:1;height:1px;background:var(--br)}

/* Grupos desplegables del menú: solo uno abierto a la vez */
.sb-grupo{cursor:pointer;user-select:none;transition:color .12s}
.sb-grupo:hover{color:var(--tx)}
.sb-gr-flecha{font-size:11px;transition:transform .2s;flex-shrink:0;margin-left:2px}
.sb-gr-emo{font-size:12px;margin-right:5px;flex-shrink:0;filter:grayscale(.15)}
/* Botoncito para abrir todas las opciones de una sección */
.sb-ver-btn{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:11px;
  background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(168,85,247,.12));
  border:1px solid rgba(56,189,248,.3);color:var(--tx);text-decoration:none;
  transition:all .15s;cursor:pointer}
.sb-ver-btn:hover{border-color:var(--ac);transform:translateY(-1px)}

.sb-todo{margin-left:auto;cursor:pointer;font-size:13px;color:var(--mu);
  padding:1px 5px;border-radius:6px;transition:all .15s;user-select:none;line-height:1}
.sb-todo:hover{color:var(--tx);background:rgba(255,255,255,.08)}
.sb-todo.activo{color:var(--ac);background:rgba(56,189,248,.15)}
.sb-gr.abierto>.sb-grupo .sb-gr-emo{filter:none}
/* La rayita que separaba estorbaba ahora que hay emoji y flecha */
.sb-grupo::after{display:none}
.sb-gr.abierto>.sb-grupo{color:var(--ac)}
.sb-gr.abierto>.sb-grupo .sb-gr-flecha{transform:rotate(180deg)}
.sb-gr-items{display:none}
.sb-gr.abierto>.sb-gr-items{display:block}
/* El globito de mensajes sin leer se ve aunque el grupo esté cerrado */
.sb-gr:not(.abierto)>.sb-grupo .sb-gr-aviso{display:inline-flex}
.sb-gr-aviso{display:none;background:var(--rd);color:#fff;font-size:9.5px;font-weight:800;
  min-width:16px;height:16px;border-radius:8px;align-items:center;justify-content:center;padding:0 4px;margin-left:4px}
#sb-items-admin > .sb-grupo:first-child,
#sb-items-jugador > .sb-grupo:first-child,
#sb-items-vendedor > .sb-grupo:first-child{padding-top:6px}
/* Botones de los datos de juego en el chat de batalla */
.btn-cp{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:inherit;
  border-radius:8px;padding:7px 11px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .1s;white-space:nowrap}
.btn-cp:hover{background:rgba(255,255,255,.28)}
.btn-cp:active{transform:scale(.96)}
.btn-cp-abrir{background:rgba(16,185,129,.85);border-color:rgba(16,185,129,.9);color:#fff}
.btn-cp-abrir:hover{background:rgba(16,185,129,1)}
/* Selector de juego */
.ej-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:320px;overflow-y:auto;padding:2px}
.ej-item{background:var(--s2);border:2px solid transparent;border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.ej-item:hover{transform:translateY(-3px);border-color:var(--br)}
.ej-item.sel{border-color:var(--ac);background:rgba(56,189,248,.12)}
.ej-img{width:52px;height:52px;border-radius:12px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--bg);overflow:hidden}
.ej-img img{width:100%;height:100%;object-fit:cover}
.ej-nombre{font-size:12px;font-weight:700;line-height:1.3;word-break:break-word}
/* Panel de retos disponibles */
.jugar-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:stretch}
.retos-panel{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);display:flex;flex-direction:column;overflow:hidden;height:calc(100vh - 290px);min-height:360px}
.retos-cab{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--br);background:var(--s2)}
.retos-lista{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.reto-fila{border-radius:12px;padding:12px 14px;cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid transparent}
.reto-fila:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.reto-fila.rA{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4)}
.reto-fila.rB{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.4)}
.reto-fila.rC{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.4)}
.reto-fila.propio{opacity:.75;border-style:dashed}
.reto-tk{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.reto-user{font-weight:800;font-size:14px;margin:3px 0}
.reto-premio{font-size:16px;font-weight:900}
@media(max-width:980px){.jugar-grid{grid-template-columns:1fr}.retos-panel{height:auto;max-height:340px}}
.tk-caja{border-radius:12px;padding:14px 8px;text-align:center;transition:transform .15s}
.tk-caja:hover{transform:translateY(-2px)}
.tk-letra{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;opacity:.85}
.tk-num{font-size:30px;font-weight:900;line-height:1.1;margin-top:4px;letter-spacing:1px}
@keyframes girar{to{transform:rotate(360deg)}}
.circulo-carga{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:girar .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes escPunto{0%,60%,100%{opacity:.25}30%{opacity:1}}
.esc-punto{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ac);margin-right:3px;animation:escPunto 1.2s infinite}
.esc-punto:nth-child(2){animation-delay:.2s}.esc-punto:nth-child(3){animation-delay:.4s}
/* ═══ LANDING PAGE ═══ */
.ld{background:#070d1a;color:var(--tx);position:relative}
.ld-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Círculo de luz: antes era un círculo sólido con filter:blur(90px) moviéndose sin parar, y el
   navegador tenía que volver a desenfocarlo en cada cuadro. Ahora es un degradado que imita ese
   desenfoque (centro lleno, mitad de fuerza en el borde original, se apaga a 1,7 veces el tamaño):
   se ve igual y moverlo no cuesta nada. El 1,7 va dentro de la animación (en teléfono no hay
   animación y sigue su propio degradado, igual que antes). */
.ld-blob{position:absolute;border-radius:50%;background:radial-gradient(circle closest-side,var(--blob,#38BDF8) 22%,58%,transparent);opacity:.35;pointer-events:none;animation:ldBlob 14s ease-in-out infinite alternate;will-change:transform}
@keyframes ldBlob{0%{transform:translate(0,0) scale(1.7)}100%{transform:translate(60px,-40px) scale(2.125)}}
@keyframes ldFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ldGlow{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.55),0 10px 30px rgba(56,189,248,.25)}50%{box-shadow:0 0 0 14px rgba(56,189,248,0),0 10px 40px rgba(56,189,248,.45)}}
@keyframes ldShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes ldPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.ld-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:16px 40px;background:rgba(7,13,26,.75);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.ld-hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px 60px}
.ld-grad{background:linear-gradient(90deg,#38BDF8,#A855F7,#F59E0B,#38BDF8);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ldShimmer 5s linear infinite}
.ld-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#38BDF8,#6366F1);color:#fff;border:none;border-radius:14px;padding:16px 34px;font-family:'Inter',sans-serif;font-size:16px;font-weight:800;cursor:pointer;animation:ldGlow 2.6s ease-in-out infinite;transition:transform .2s}
.ld-cta:hover{transform:translateY(-3px) scale(1.03)}
.ld-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);color:var(--tx);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 28px;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s}
.ld-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.ld-sec{position:relative;padding:90px 24px;max-width:1140px;margin:0 auto}
.ld-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ac);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);padding:6px 14px;border-radius:30px;margin-bottom:16px}
.ld-h2{font-size:clamp(26px,4vw,42px);font-weight:900;line-height:1.15;margin-bottom:14px}
.ld-p{font-size:16px;color:var(--mu);line-height:1.8;max-width:720px}
.ld-grid{display:grid;gap:18px}
.ld-card{background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.9));border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:26px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.ld-card::before{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.12),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.ld-card:hover{transform:translateY(-8px);border-color:rgba(56,189,248,.35);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.ld-card:hover::before{opacity:1}
.ld-ico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.25)}
.ld-card h3{font-size:17px;font-weight:800;margin-bottom:8px}
.ld-card p{font-size:14px;color:var(--mu);line-height:1.7}
.ld-tk{border-radius:20px;padding:26px 30px;text-align:center;min-width:170px;transition:transform .25s;position:relative;overflow:hidden}
.ld-tk:hover{transform:translateY(-8px) scale(1.03)}
.ld-step{display:flex;gap:18px;align-items:flex-start}
.ld-num{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#6366F1);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;color:#fff;box-shadow:0 8px 20px rgba(56,189,248,.35)}
.ld-prod{background:var(--s);border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.ld-prod:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.4)}
.ld-prod-img{height:150px;background:linear-gradient(135deg,#1E293B,#0F172A);display:flex;align-items:center;justify-content:center;font-size:52px;overflow:hidden}
.ld-prod-img img{width:100%;height:100%;object-fit:cover}
.ld-stat{text-align:center;padding:24px}
.ld-stat .n{font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1}
.ld-stat .l{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}
.ld-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--gn);padding:8px 16px;border-radius:30px;font-size:13px;font-weight:700}
.ld-dot{width:8px;height:8px;border-radius:50%;background:var(--gn);animation:ldPulseDot 1.6s infinite}
.ld-reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.ld-reveal.in{opacity:1;transform:translateY(0)}
.ld-reveal.d1{transition-delay:.1s}.ld-reveal.d2{transition-delay:.2s}.ld-reveal.d3{transition-delay:.3s}.ld-reveal.d4{transition-delay:.4s}
.ld-marq{overflow:hidden;white-space:nowrap;width:100%;max-width:100%;contain:inline-size;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0;background:rgba(255,255,255,.02)}
.ld-marq span{display:inline-block;padding:0 34px;font-weight:700;color:var(--mu);font-size:14px}
@keyframes ldMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ld-marq-track{display:inline-block;animation:ldMarq 34s linear infinite}
.ld-footer{border-top:1px solid rgba(255,255,255,.06);padding:40px 24px;text-align:center;color:var(--mu);font-size:13px}
/* Menú del sitio en la barra del inicio */
.ld-menu{display:flex;gap:6px;align-items:center}
.ld-menu-item{padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--mu);
  cursor:pointer;transition:all .15s;white-space:nowrap}
.ld-menu-item:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.ld-menu-item.activo{color:var(--ac);background:rgba(56,189,248,.12)}

@media(max-width:820px){.ld-nav{padding:14px 18px}.ld-sec{padding:60px 18px}}
@media(max-width:760px){
  /* En pantalla angosta el menú pasa debajo del logo, en su propia fila */
  .ld-nav{flex-wrap:wrap}
  .ld-menu{order:3;width:100%;justify-content:center;gap:4px;margin-top:4px;
    border-top:1px solid rgba(255,255,255,.06);padding-top:8px}
  .ld-menu-item{padding:7px 11px;font-size:12.5px}
}

/* Carrusel 3D de videos: el del centro de frente, los de al lado
   girados e inclinados hacia atrás, como una vitrina */
.ld-carrusel{position:relative;max-width:920px;margin:0 auto;height:340px;
  perspective:1400px;overflow:hidden}
.ld-car-track{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d}
.ld-car-item{position:absolute;width:min(72vw,560px);aspect-ratio:16/9;border-radius:18px;
  overflow:hidden;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.55);
  transition:transform .6s cubic-bezier(.22,.9,.3,1), opacity .6s, filter .6s;
  border:1px solid rgba(255,255,255,.12)}
.ld-car-item img{width:100%;height:100%;object-fit:cover;display:block}
.ld-car-item .ld-car-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);transition:background .2s}
.ld-car-item:hover .ld-car-play{background:rgba(0,0,0,.15)}
.ld-car-play span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#0B1220;
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.ld-car-item.centro{transform:translateX(0) translateZ(0) rotateY(0deg) scale(1);z-index:5;opacity:1;filter:none}
.ld-car-item.izq1{transform:translateX(-58%) translateZ(-180px) rotateY(38deg) scale(.82);z-index:4;opacity:.85;filter:brightness(.6)}
.ld-car-item.der1{transform:translateX(58%) translateZ(-180px) rotateY(-38deg) scale(.82);z-index:4;opacity:.85;filter:brightness(.6)}
.ld-car-item.izq2{transform:translateX(-98%) translateZ(-340px) rotateY(46deg) scale(.66);z-index:3;opacity:0;filter:brightness(.4)}
.ld-car-item.der2{transform:translateX(98%) translateZ(-340px) rotateY(-46deg) scale(.66);z-index:3;opacity:0;filter:brightness(.4)}
.ld-car-item.oculto{opacity:0;pointer-events:none;transform:translateX(0) translateZ(-500px) scale(.5)}
.ld-car-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:none;transition:background .15s}
.ld-car-flecha:hover{background:rgba(255,255,255,.18)}
.ld-car-flecha.izq{left:6px}
.ld-car-flecha.der{right:6px}
.ld-car-puntos{display:flex;gap:8px;justify-content:center;margin-top:18px}
.ld-car-punto{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:all .2s}
.ld-car-punto.activo{background:var(--ac);width:22px;border-radius:5px}
/* Tablets: quedan entre los dos tamaños, necesitan su propio ajuste
   o los videos de los lados se salen por el borde. */
@media(min-width:641px) and (max-width:900px){
  .ld-carrusel{height:300px}
  .ld-car-item{width:58vw}
  .ld-car-item.izq1{transform:translateX(-46%) translateZ(-160px) rotateY(36deg) scale(.74)}
  .ld-car-item.der1{transform:translateX(46%) translateZ(-160px) rotateY(-36deg) scale(.74)}
}

@media(max-width:640px){
  /* En teléfono el video central se hace más angosto y los de los lados
     se acercan, para que se asomen dentro de la pantalla y no queden
     cortados contra el borde. */
  .ld-carrusel{height:240px}
  .ld-car-item{width:64vw}
  .ld-car-item.izq1{transform:translateX(-44%) translateZ(-150px) rotateY(34deg) scale(.7)}
  .ld-car-item.der1{transform:translateX(44%) translateZ(-150px) rotateY(-34deg) scale(.7)}
  .ld-car-flecha{width:36px;height:36px;font-size:16px}
  .ld-car-play span{width:48px;height:48px;font-size:17px}
}
/* TIENDA VISUAL */
.store-layout{display:grid;grid-template-columns:200px 1fr;gap:20px}
.store-cats-left{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);padding:16px;height:fit-content;position:sticky;top:24px}
.store-cat-link{display:block;padding:7px 10px;border-radius:var(--r);cursor:pointer;font-size:13px;color:var(--mu);transition:all .15s}
.store-cat-link:hover{background:var(--s2);color:var(--tx)}
.store-cat-link.active{background:rgba(56,189,248,.1);color:var(--ac);font-weight:600}
.store-top-cats{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.store-top-cat{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:70px}
.store-top-cat .icon-wrap{width:52px;height:52px;border-radius:50%;background:var(--s2);border:2px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .15s}
.store-top-cat.active .icon-wrap{border-color:var(--ac);background:rgba(56,189,248,.1)}
.store-top-cat .cat-lbl{font-size:11px;font-weight:600;color:var(--mu);text-align:center}
.store-top-cat.active .cat-lbl{color:var(--ac)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod-list-wrap{display:flex;flex-direction:column;gap:10px}
.prod-card{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.prod-card:hover{border-color:var(--ac)}
.prod-card-img{height:160px;background:var(--s2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.prod-card-img img{width:100%;height:100%;object-fit:cover}
.prod-card-body{padding:14px;flex:1;display:flex;flex-direction:column}
.prod-list-card{background:var(--s);border:1px solid var(--br);border-radius:var(--r);display:flex;align-items:center;gap:14px;padding:12px;transition:border-color .15s}
.prod-list-card:hover{border-color:var(--ac)}
.prod-list-img{width:60px;height:60px;border-radius:8px;background:var(--s2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.view-toggle{display:flex;gap:4px}
.vt-btn{background:var(--s2);border:1px solid var(--br);border-radius:var(--r);padding:6px 10px;cursor:pointer;color:var(--mu);font-size:16px;transition:all .15s}
.vt-btn.active{background:var(--ac);color:#0F172A;border-color:var(--ac)}
/* LOGIN SCREEN */
.login-box{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);padding:40px;width:380px;max-width:96vw;text-align:center}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sep{height:1px;background:var(--br);margin:14px 0}
.fx{display:flex;align-items:center;gap:10px}
.fe{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}
.mo2{font-family:'JetBrains Mono',monospace}
.c-ac{color:var(--ac)}.c-gn{color:var(--gn)}.c-am{color:var(--am)}.c-pu{color:var(--pu)}.c-rd{color:var(--rd)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--br);border-radius:3px}

/* ═══════════════════════════════════════════════
   TELÉFONO — nada de esto afecta al escritorio
   ═══════════════════════════════════════════════ */
#mv-topbar{display:none}
#mv-fondo{display:none}

@media(max-width:900px){
  /* Barra superior fija con el botón de menú */
  #mv-topbar{display:flex;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;
    padding:0 14px;background:var(--s);border-bottom:1px solid var(--br);z-index:120}
  #mv-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--br);background:var(--s2);
    color:var(--tx);font-size:20px;cursor:pointer;flex-shrink:0;line-height:1}
  .mv-logo{font-size:17px;font-weight:900;color:var(--ac)}
  .mv-logo span{color:var(--tx)}

  /* Fondo oscuro al abrir el menú */
  #mv-fondo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:110;
    opacity:0;pointer-events:none;transition:opacity .25s}
  #mv-fondo.abierto{opacity:1;pointer-events:auto}

  /* El menú se desliza desde la izquierda en vez de ocupar espacio fijo */
  .sb{width:270px;max-width:82vw;transform:translateX(-100%);transition:transform .28s ease;
    z-index:130;box-shadow:6px 0 30px rgba(0,0,0,.5)}
  .sb.abierto{transform:translateX(0)}

  /* El contenido ocupa TODO el ancho */
  .main{margin-left:0 !important;padding:70px 14px 30px}

  /* Encabezados: título arriba, botones abajo */
  .tp{flex-direction:column;align-items:stretch;gap:12px}
  .tp h1{font-size:22px}
  .tp>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
  .tp button,.tp .btn{flex:1;justify-content:center;min-width:120px}

  /* Todas las rejillas pasan a una sola columna */
  .kpi-g{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-g.kpi-2,.kpi-g.kpi-3,.kpi-g.kpi-5{grid-template-columns:1fr 1fr}
  .g2,.g3,.jugar-grid{grid-template-columns:1fr !important;gap:12px}
  /* Estas son tarjetas pequeñas: se quedan en fila aunque sea teléfono */
  .g3.compacta{grid-template-columns:repeat(3,1fr) !important;gap:8px}
  .g3.compacta > div{padding:12px 6px}
  .g3.compacta .kpi-v,.g3.compacta [data-num]{font-size:20px}
  .prod-grid{grid-template-columns:1fr 1fr !important}
  .kpi{padding:14px}
  .kpi-v{font-size:22px}
  .pan{padding:16px}

  /* Tablas: se deslizan de lado sin romper la página */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
  .tw table{min-width:620px}
  th,td{padding:9px 10px;font-size:12px;white-space:nowrap}

  /* Ventanas emergentes a pantalla casi completa */
  .mo{width:94vw !important;max-width:94vw;max-height:88vh;overflow-y:auto;padding:20px}
  .mot{font-size:16px}

  /* Chat */
  /* Los tres tickets caben en pantalla, en columna cada uno */
  .chat-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;overflow:visible;padding-bottom:0}
  .ctb{flex-shrink:1;min-width:0;padding:10px 6px;display:flex;flex-direction:column;
    align-items:center;gap:3px;text-align:center;font-size:12.5px;line-height:1.25}
  .ctb .tk-precio{font-size:10.5px;opacity:.85}
  .chat-box{height:calc(100vh - 250px);min-height:340px}
  .chat-msgs{padding:12px}
  .cm{max-width:88%}
  .chat-bar{flex-wrap:wrap;gap:8px;padding:10px}
  .chat-bar .eb{order:1;flex-shrink:0;font-size:22px}
  .chat-bar .ci{order:2;flex:1;min-width:0}
  /* Enviar: verde y bien visible, al lado del campo */
  .chat-bar .bgh{order:3;flex-shrink:0;background:linear-gradient(135deg,var(--gn),#0EA46F);
    color:#fff;border:none;font-weight:700;padding:11px 18px;box-shadow:0 3px 10px rgba(16,185,129,.32)}
  .chat-bar .bgh:active{transform:scale(.97)}
  .chat-bar .bg{order:4;flex:1 1 100%;padding:12px;font-size:14px}  /* Jugar Ahora, abajo y ancho completo */
  /* El encabezado siempre en dos líneas */
  .tp>div:first-child{display:block}
  .tp .sub{display:block;margin-top:4px}
  .retos-panel{height:auto;max-height:400px}

  /* Panel de batalla */
  .bat-panel{padding:14px}
  .bat-panel .g2{grid-template-columns:1fr !important}

  /* Tienda */
  .store-top-cats{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .store-top-cat{flex-shrink:0}
  .store-layout{grid-template-columns:1fr !important}
  .store-side{display:none}
  .ld-prod-img{height:120px}

  /* Tickets del panel de control */
  .tk-num{font-size:24px}
  .tk-caja{padding:11px 5px}

  /* Botones flotantes: tamaño cómodo y bien separados del borde */
  #inicio-fabs{bottom:20px;right:14px;gap:10px}
  #inicio-fabs button{width:54px;height:54px;font-size:23px}
  #guest-chat-box{bottom:88px;right:12px;left:12px;width:auto}
  .fab-g{bottom:20px;right:14px;gap:10px}
  .fab-g .fab{width:54px;height:54px;font-size:23px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
  /* Dejamos aire al final de cada página para que no tapen contenido */
  .main{padding-bottom:96px}

  /* Landing */
  /* Las tres páginas públicas que viven en este archivo se tratan igual:
     portada, tienda de juegos y tienda de streaming. Antes solo la portada
     llevaba este margen y las dos tiendas se salían 10px por cada lado. */
  #pg-inicio,#pg-cat-juegos,#pg-cat-streaming{margin:-70px -14px -30px !important;overflow-x:hidden}
  .ld{overflow-x:hidden;max-width:100vw}
  .ld-bg{max-width:100vw}
  /* En teléfonos, NADA de filter:blur ni animación en los fondos.
     Muchos Android no logran desenfocar un círculo tan grande y lo
     pintan sólido: quedaba un círculo morado enorme arriba a la derecha,
     y el intento de animarlo hacía que toda la página parpadeara.
     Un degradado radial se ve igual y no cuesta nada dibujarlo. */
  .ld-blob{
    max-width:70vw;max-height:70vw;
    filter:none !important;
    animation:none !important;
    will-change:auto;
    opacity:.28;
    background:radial-gradient(circle at center, var(--blob, #38BDF8) 0%, transparent 68%) !important;
  }
  /* Sin desenfoque de fondo en la barra: al hacer scroll en teléfono
     obliga a repintar todo lo que hay debajo y parpadea. Fondo sólido. */
  .ld-nav{padding:12px 14px;flex-wrap:wrap;gap:8px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,13,26,.96)}
  .ov,.ov.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.78)}
  /* Animaciones continuas que repintan toda la pantalla: fuera en teléfono.
     El botón mantiene su sombra fija y el título su degradado, sin moverse. */
  /* El degradado del texto SÍ se anima: solo repinta unas letras, es barato.
     Lo que pesaba de verdad eran los círculos borrosos, y esos siguen fijos. */
  .ld-cta{box-shadow:0 10px 30px rgba(56,189,248,.35)}
  .ld-blob,.ld-marq-track{animation-play-state:running}
  .ld-nav>div:last-child{display:flex;gap:8px;width:100%}
  .ld-nav button{flex:1;font-size:12px;padding:9px 10px}
  .ld-hero{padding:48px 16px 40px;min-height:auto}
  .ld-sec{padding:48px 16px}
  .ld-grid{grid-template-columns:1fr !important}
  .ld-tk{min-width:0;width:100%;padding:18px}
  .ld-cta,.ld-ghost{width:100%;justify-content:center}
  .ld-stat .n{font-size:30px}

  /* Formularios cómodos para el dedo (evita el zoom de iPhone) */
  .fr input,.fr select,.ci,input[type=text],input[type=number],input[type=email],input[type=password],textarea{font-size:16px !important}
  .btn{padding:11px 16px}
  .bsm{padding:8px 12px;font-size:12px}

  /* Selector de juegos */
  .ej-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));max-height:46vh}

  /* Avisos: el texto fluye como párrafo, no en columnas */
  .al{display:block;line-height:1.6}
  .al strong{display:inline}

  /* Notificaciones */
  #toast-wrap>div{max-width:88vw !important;padding:22px 24px !important;font-size:15px !important}
}

/* Teléfonos pequeños */
/* ═══════════════════════════════════════════════
   CUALQUIER PANTALLA TÁCTIL, SIN IMPORTAR EL ANCHO

   Cuando alguien pone el navegador del teléfono en "modo computadora",
   el navegador dice que la pantalla es ancha (980px o más) y las reglas
   de teléfono dejan de aplicar. Pero el teléfono sigue siendo el mismo:
   vuelven el desenfoque y las animaciones, y con ellas el parpadeo.

   Estas reglas se activan por el TIPO de dispositivo (dedo en vez de
   ratón), así que valen igual en modo teléfono y en modo computadora.
   ═══════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse){
  .ld-blob{
    filter:none !important;
    animation:none !important;
    will-change:auto !important;
    opacity:.28 !important;
    background:radial-gradient(circle at center, var(--blob,#38BDF8) 0%, transparent 68%) !important;
  }
  .ld-nav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(7,13,26,.96) !important}
  .ov{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  /* Los degradados de texto quedan animados también en el teléfono: mover
     el color de unas letras cuesta muy poco. Lo único que apagamos es el
     halo pulsante del botón, que sí repinta un área grande. */
  .ld-cta{animation:none !important;box-shadow:0 10px 30px rgba(56,189,248,.35)}
}

@media(max-width:400px){
  .kpi-g{grid-template-columns:1fr}
  .kpi-g.kpi-2,.kpi-g.kpi-3,.kpi-g.kpi-5{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr !important}
  .g3{grid-template-columns:1fr 1fr !important}
  .g3.compacta{grid-template-columns:repeat(3,1fr) !important}
}

/* ═══════════════════════════════════════════════
   REVISIÓN VISUAL EN TELÉFONO
   Medido en pantalla de 375px sobre el sitio real.
   Cada bloque arregla una cosa concreta y nada más.
   Si algo no gusta, se borra ese bloque y todo vuelve
   a como estaba.
   ═══════════════════════════════════════════════ */

@media(max-width:760px){
  /* ── 1. Las explicaciones largas, una por fila ──
     Las tarjetas van de dos en dos en teléfono. Donde el párrafo
     es largo, media columna deja el texto en una o dos palabras por
     línea, como una escalera. Estas secciones pasan a una por fila:
     se leen en dos o tres líneas y ocupan menos alto.
     Las tiendas de juegos y de pantallas NO se tocan: siguen de
     tres por fila y de dos en dos, como estaban. */
  #pg-jugadores .jv-cards,#pg-jugadores .jv-steps,
  #pg-ser-vendedor .jv-cards,#pg-ser-vendedor .jv-fuentes,#pg-ser-vendedor .jv-lista,
  #pg-torneos .jv-cards,#pg-torneos .to-liga-como{grid-template-columns:1fr !important}

  /* ── 2. Botones cómodos para el dedo ──
     Los de comprar medían 25px de alto y los del menú 30px. Solo
     cambia la altura mínima: mismo color, misma letra, mismo ancho. */
  #pg-inicio .btn,#pg-cat-juegos .btn,#pg-cat-streaming .btn,
  #pg-jugadores .btn,#pg-ser-vendedor .btn,#pg-torneos .btn{min-height:44px}
  .ld-menu-item{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:640px){
  /* ── 3. Las tarjetas de ticket no cortan la última línea ──
     Tenían alto fijo de 120px y el ticket C se quedaba sin
     "el que más conviene". Ahora crecen lo justo. */
  #pg-jugadores .jv-tk3{height:auto;min-height:100%}

  /* ── 4. Las cuatro cifras de la liga, debajo del control ──
     Compartían fila con el selector de participantes y quedaban en
     155px: las etiquetas se montaban unas sobre otras. */
  #pg-torneos .to-liga-top{flex-direction:column;align-items:stretch}
  #pg-torneos .to-liga-kpis{width:100%}
  #pg-torneos .to-liga-kpis div{flex:1 1 calc(50% - 4px);min-width:0}
}

/* ═══════════════════════════════════════════════
   LA CABECERA DE LAS DOS TIENDAS
   Las tres promesas, los filtros en forma de pastilla
   y el contador con su lucecita de "en vivo".
   Los filtros ya existían pero nadie les había escrito
   el estilo: por eso salía el icono encima del texto.
   ═══════════════════════════════════════════════ */

/* Las tres promesas de debajo del título */
.store-promesas{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 4px}
.store-promesa{display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--s2);border:1px solid var(--br);color:var(--tx);white-space:nowrap}
.store-promesa.gn{color:#34D399;border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.08)}
.store-promesa.ac{color:#38BDF8;border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.08)}
.store-promesa.am{color:#FBBF24;border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.08)}

/* Los filtros de arriba, en pastillas */
.store-top-cats{display:flex;flex-wrap:wrap;gap:9px}
.store-cat{display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--mu);
  background:var(--s2);border:1px solid var(--br);transition:all .15s;
  min-height:44px;box-sizing:border-box}
.store-cat:hover{color:var(--tx);border-color:rgba(56,189,248,.35)}
.store-cat.active{color:var(--ac);background:rgba(56,189,248,.12);
  border-color:rgba(56,189,248,.45)}
.store-cat-ic{font-size:16px;line-height:1;flex:none}

/* El contador, con la lucecita verde que late */
.store-conteo-fila{display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:14px}
.store-vivo{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;color:#34D399;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3)}
.store-vivo i{width:7px;height:7px;border-radius:50%;background:#34D399;
  flex:none;animation:store-late 1.8s ease-in-out infinite}
@keyframes store-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

@media(max-width:760px){
  .store-promesa{font-size:11.5px;padding:7px 12px}
  .store-cat{font-size:12.5px;padding:9px 13px}
}

/* ═══════════════════════════════════════════════
   EL BOTÓN FLOTANTE DE WHATSAPP
   Lleva el logo en 3D dando vueltas. Va sin círculo
   de fondo: la propia figura ya tiene su forma y su
   sombra, y así se ve como un objeto suelto.
   ═══════════════════════════════════════════════ */
/* Va con #inicio-fabs delante a propósito: más abajo hay una regla
   "#inicio-fabs button{width:54px}" para teléfono que, si no, le ganaba
   y dejaba este botón más chico que el del chat (ese lleva los 58px
   escritos en su propia etiqueta). Así los dos quedan iguales. */
#inicio-fabs .fab-wa{width:58px;height:58px;padding:0;border:none;background:none;
  cursor:pointer;line-height:0;font-size:24px;transition:transform .2s;
  filter:drop-shadow(0 6px 14px rgba(37,211,102,.45))}
#inicio-fabs .fab-wa img{width:58px;height:58px;display:block;object-fit:contain}
/* Si la persona pidió al sistema que no haya animaciones, la dejamos quieta */
@media(prefers-reduced-motion:reduce){
  .fab-wa{filter:drop-shadow(0 4px 10px rgba(37,211,102,.35))}
}

/* La ventanita del chat se abría encima de los dos botones y tapaba
   justo el de cerrarla. La subimos por encima del grupo:
   28 de borde + 58+58 de los botones + 12 de separación = 156 → 166. */
#guest-chat-box{bottom:166px !important}
@media(max-width:760px){
  /* En teléfono los botones miden 54 y el borde es 20: 20+54+54+10 = 138 → 150 */
  #guest-chat-box{bottom:150px !important;max-height:calc(100vh - 170px);overflow:auto}
}

/* ═══ INICIO NUEVO ═══
   Todo lo de aquí abajo vive dentro de #pg-inicio a propósito.
   El diseño usa nombres muy comunes (.card, .step, .prod, .stat)
   que ya existen en el panel y en la tienda; encerrados así,
   no se salen de la portada. Las animaciones llevan nin- delante
   por lo mismo. */
#pg-inicio{--bg:#070D1A}
#pg-inicio .ld{position:relative;background:var(--bg);overflow-x:hidden;max-width:100vw}
#pg-inicio .ld-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#pg-inicio .ld-blob{position:absolute;border-radius:50%;background:radial-gradient(circle closest-side,var(--blob,#38BDF8) 22%,58%,transparent);opacity:.32;animation:nin-ldBlob 14s ease-in-out infinite alternate;will-change:transform}
@keyframes nin-ldBlob{0%{transform:translate(0,0) scale(1.7)}100%{transform:translate(60px,-40px) scale(2.125)}}
#pg-inicio .stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
#pg-inicio button{font-family:inherit}
#pg-inicio h1, #pg-inicio h2, #pg-inicio h3, #pg-inicio h4{text-wrap:balance}
#pg-inicio .ld-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 40px;background:rgba(7,13,26,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
#pg-inicio .logo{font-size:21px;font-weight:900;letter-spacing:1.5px;cursor:pointer;background:linear-gradient(90deg,#38BDF8,#7DD3FC 45%,#38BDF8);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
#pg-inicio .ld-menu{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
#pg-inicio .ld-menu-item{padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--mu);cursor:pointer;transition:.15s;white-space:nowrap;text-decoration:none}
#pg-inicio .ld-menu-item:hover{color:var(--tx);background:rgba(255,255,255,.06)}
#pg-inicio .ld-menu-item.activo{color:var(--ac);background:rgba(56,189,248,.12)}
#pg-inicio .nav-acc{display:flex;gap:10px;align-items:center}
#pg-inicio .ld-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#38BDF8,#6366F1);color:#fff;border:0;border-radius:14px;padding:16px 34px;font-size:16px;font-weight:800;cursor:pointer;animation:nin-ldGlow 2.6s ease-in-out infinite;transition:transform .2s;text-decoration:none}
#pg-inicio .ld-cta:hover{transform:translateY(-3px) scale(1.03)}
#pg-inicio .ld-cta.sm{padding:10px 20px;font-size:13px;animation:none;border-radius:12px}
#pg-inicio .ld-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.05);color:var(--tx);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 28px;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none}
#pg-inicio .ld-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
#pg-inicio .ld-ghost.sm{padding:10px 18px;font-size:13px;border-radius:12px}
@keyframes nin-ldGlow{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.55),0 10px 30px rgba(56,189,248,.25)}50%{box-shadow:0 0 0 14px rgba(56,189,248,0),0 10px 40px rgba(56,189,248,.45)}}
#pg-inicio .ld-cta:focus-visible, #pg-inicio .ld-ghost:focus-visible, #pg-inicio .ld-menu-item:focus-visible{outline:2px solid #7DD3FC;outline-offset:3px}
#pg-inicio .ld-sec{position:relative;z-index:1;padding:90px 24px;max-width:1140px;margin:0 auto}
#pg-inicio .ld-kicker{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ac);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);padding:6px 14px;border-radius:30px;margin-bottom:16px}
#pg-inicio .ld-kicker.am{color:#FDE68A;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35)}
#pg-inicio .ld-kicker.gn{color:#6EE7B7;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35)}
#pg-inicio .ld-kicker.pu{color:#D8B4FE;background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.35)}
#pg-inicio .ld-h2{font-size:clamp(26px,4vw,42px);font-weight:900;line-height:1.15;margin-bottom:14px;letter-spacing:-.5px}
#pg-inicio .ld-p{font-size:16px;color:var(--mu);line-height:1.8;max-width:720px}
#pg-inicio .ld-grad{background:linear-gradient(90deg,#38BDF8,#A855F7,#F59E0B,#38BDF8);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nin-ldShimmer 5s linear infinite}
@keyframes nin-ldShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
#pg-inicio .center{text-align:center}
#pg-inicio .center .ld-p{margin-left:auto;margin-right:auto}
#pg-inicio .sec-tit{margin-bottom:34px}
#pg-inicio .ld-reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s ease}
#pg-inicio .ld-reveal.in{opacity:1;transform:none}
#pg-inicio .ld-reveal.d1{transition-delay:.08s}
#pg-inicio .ld-reveal.d2{transition-delay:.16s}
#pg-inicio .ld-reveal.d3{transition-delay:.24s}
#pg-inicio .ld-reveal.d4{transition-delay:.32s}
#pg-inicio .ld-reveal.d5{transition-delay:.4s}
#pg-inicio .ld-reveal.in.listo, #pg-inicio .ld-reveal.in:hover{transition-delay:0s}
@keyframes nin-jvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes nin-jvFloatS{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes nin-jvCoin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes nin-jvSheen{0%{transform:translateX(-140%) skewX(-18deg)}60%,100%{transform:translateX(160%) skewX(-18deg)}}
@keyframes nin-jvPulse{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.45)}60%{box-shadow:0 0 0 16px rgba(56,189,248,0)}}
@keyframes nin-jvBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes nin-jvRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes nin-jvChip{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1;transform:translate(-50%,-14px) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(.9)}}
#pg-inicio .hero-wrap{position:relative;overflow:hidden;z-index:1}
#pg-inicio .hero{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px 24px 44px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
#pg-inicio .hero h1{font-size:clamp(38px,5.8vw,74px);font-weight:900;line-height:1.02;letter-spacing:-1.5px;margin:12px 0 18px}
#pg-inicio .hero .ld-p{font-size:17px;margin-bottom:12px}
#pg-inicio .hero .sub{font-size:15px;color:var(--tx);font-weight:600;opacity:.9;margin-bottom:26px}
#pg-inicio .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
#pg-inicio .badges{display:flex;gap:8px;flex-wrap:wrap}
#pg-inicio .badge{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:30px;font-size:12.5px;font-weight:700;color:var(--tx);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
#pg-inicio .badge i{font-style:normal;font-size:14px}
#pg-inicio .stage{position:relative;height:480px;perspective:1300px;perspective-origin:50% 45%}
#pg-inicio .stage-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.8,.2,1);will-change:transform}
#pg-inicio .glow{position:absolute;left:50%;top:55%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(168,85,247,.28),rgba(56,189,248,.14) 45%,transparent 70%);filter:blur(30px);transform:translateZ(-200px)}
/* Los emojis que flotan sin parar (espadas, copas, diana) llevan la sombra como text-shadow y no como
   filter:drop-shadow: se ve igual, pero el filtro obligaba a recalcular la sombra en cada cuadro. */
#pg-inicio .sword{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;display:grid;place-items:center;font-size:96px;line-height:1;transform:translateZ(20px);text-shadow:0 24px 34px rgba(56,189,248,.35);animation:nin-jvFloat 5s ease-in-out infinite}
#pg-inicio .sword::before{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(56,189,248,.35);box-shadow:0 0 30px rgba(56,189,248,.15),inset 0 0 30px rgba(56,189,248,.08);animation:nin-jvRing 3s ease-out infinite}
#pg-inicio .tkpos{position:absolute;left:50%;top:50%;width:236px;height:142px;margin:-71px 0 0 -118px;transform-style:preserve-3d}
#pg-inicio .tkpos.a{transform:translate3d(-158px,-118px,-130px) rotateY(26deg) rotateX(6deg)}
#pg-inicio .tkpos.b{transform:translate3d(158px,-92px,-70px) rotateY(-24deg) rotateX(4deg)}
#pg-inicio .tkpos.c{transform:translate3d(0,124px,90px) rotateY(-5deg) rotateX(9deg)}
#pg-inicio .tk3{position:relative;width:100%;height:100%;border-radius:22px;padding:16px 18px;overflow:hidden;background:linear-gradient(150deg,rgba(30,41,59,.96),rgba(15,23,42,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);animation:nin-jvFloat 6s ease-in-out infinite}
#pg-inicio .tkpos.a .tk3{animation-delay:-1s;border-color:rgba(245,158,11,.5);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(245,158,11,.16)}
#pg-inicio .tkpos.b .tk3{animation-delay:-3s;border-color:rgba(99,102,241,.55);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 40px rgba(99,102,241,.18)}
#pg-inicio .tkpos.c .tk3{animation-delay:-2s;border-color:rgba(168,85,247,.65);box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 60px rgba(168,85,247,.25)}
#pg-inicio .tk3::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%);animation:nin-jvSheen 6s ease-in-out infinite}
#pg-inicio .tkpos.b .tk3::after{animation-delay:1.8s}
#pg-inicio .tkpos.c .tk3::after{animation-delay:3.4s}
#pg-inicio .tk3 .k{font-size:10.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--mu);display:flex;justify-content:space-between;align-items:center;gap:8px}
#pg-inicio .tk3 .k b{font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:20px;white-space:nowrap}
#pg-inicio .tkpos.a .k b{background:rgba(245,158,11,.18);color:var(--am)}
#pg-inicio .tkpos.b .k b{background:rgba(99,102,241,.2);color:#A5B4FC}
#pg-inicio .tkpos.c .k b{background:rgba(168,85,247,.22);color:#D8B4FE}
#pg-inicio .tk3 .v{font-size:36px;font-weight:900;letter-spacing:-1px;line-height:1;margin:12px 0 6px;font-variant-numeric:tabular-nums}
#pg-inicio .tkpos.a .v{color:var(--am)}
#pg-inicio .tkpos.b .v{color:#A5B4FC}
#pg-inicio .tkpos.c .v{color:#D8B4FE}
#pg-inicio .tk3 .s{font-size:12.5px;color:var(--mu)}
#pg-inicio .tk3 .ent{display:none}
#pg-inicio .tk3 .chip{position:absolute;right:18px;bottom:16px;width:34px;height:24px;border-radius:6px;background:linear-gradient(135deg,#f5d77a,#c9962a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
#pg-inicio .tk3 .chip::before{content:'';position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.3);border-radius:3px}
#pg-inicio .coin{position:absolute;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:22px;color:#5b3a06;background:radial-gradient(circle at 35% 30%,#fff2b8 0%,#f7c948 38%,#d99a1b 70%,#8a5a0b 100%);box-shadow:0 14px 28px rgba(245,158,11,.35),inset 0 -5px 8px rgba(0,0,0,.28),inset 0 4px 6px rgba(255,255,255,.55);animation:nin-jvCoin 5s linear infinite;transform-style:preserve-3d}
#pg-inicio .coin.c1{left:5%;top:56%;transform:translateZ(90px)}
#pg-inicio .coin.c2{right:6%;top:60%;width:44px;height:44px;font-size:18px;animation-duration:7s;animation-delay:-2s}
#pg-inicio .coin.c3{left:14%;bottom:4%;width:38px;height:38px;font-size:15px;animation-duration:6s;animation-delay:-4s}
#pg-inicio .pill3{position:absolute;left:50%;top:4%;translate:-50% 0 120px;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 16px;border-radius:30px;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.5);color:#6EE7B7;font-weight:800;font-size:13.5px;box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 24px rgba(16,185,129,.2);animation:nin-jvFloatS 4s ease-in-out infinite}
#pg-inicio .pill3 .dot{width:9px;height:9px;border-radius:50%;background:var(--gn);box-shadow:0 0 0 4px rgba(16,185,129,.25);animation:nin-jvBlink 1.6s infinite}
#pg-inicio .pill3 b{color:#fff}
#pg-inicio .chips{position:absolute;inset:0;pointer-events:none;z-index:6}
#pg-inicio .chip-f{position:absolute;padding:4px 9px;border-radius:20px;font-size:11.5px;font-weight:900;color:#6EE7B7;background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.55);white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.4);opacity:0;animation:nin-jvChip 2.8s ease-out forwards}
#pg-inicio .stats{max-width:1140px;margin:-6px auto 0;padding:0 24px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
#pg-inicio .stat{position:relative;overflow:hidden;text-align:center;padding:22px 16px;border-radius:20px;background:linear-gradient(160deg,rgba(30,41,59,.85),rgba(15,23,42,.9));border:1px solid rgba(255,255,255,.07)}
#pg-inicio .stat::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ac),var(--pu))}
#pg-inicio .stat .n{font-size:clamp(28px,3.4vw,40px);font-weight:900;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#pg-inicio .stat .l{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:1.4px;margin-top:8px;font-weight:700}
#pg-inicio .stat .n.ac{color:var(--ac)}
#pg-inicio .stat .n.gn{color:var(--gn)}
#pg-inicio .stat .n.am{color:var(--am)}
#pg-inicio .stat .n.pu{color:#D8B4FE}
#pg-inicio .marq{position:relative;z-index:1;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:14px 0;background:rgba(255,255,255,.02)}
#pg-inicio .marq-track{display:inline-block;animation:nin-ldMarq 40s linear infinite}
#pg-inicio .marq span{display:inline-block;padding:0 28px;font-weight:700;color:var(--mu);font-size:13.5px}
#pg-inicio .marq span b{color:var(--tx)}
@keyframes nin-ldMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
#pg-inicio .caminos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1400px}
#pg-inicio .camino{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:26px;background:linear-gradient(160deg,rgba(30,41,59,.95),rgba(15,23,42,.97));border:1px solid rgba(255,255,255,.08);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;transform-style:preserve-3d;text-decoration:none;color:inherit}
#pg-inicio .camino::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),var(--cg,rgba(56,189,248,.16)),transparent 45%)}
#pg-inicio .camino.j{--cg:rgba(56,189,248,.18);--cb:rgba(56,189,248,.55)}
#pg-inicio .camino.t{--cg:rgba(245,158,11,.18);--cb:rgba(245,158,11,.55)}
#pg-inicio .camino.v{--cg:rgba(16,185,129,.18);--cb:rgba(16,185,129,.55)}
#pg-inicio .camino:hover{border-color:var(--cb);box-shadow:0 30px 60px rgba(0,0,0,.5)}
#pg-inicio .camino>*{position:relative}
#pg-inicio .camino .viz{height:150px;margin-bottom:14px;position:relative;perspective:800px}
#pg-inicio .camino h3{font-size:22px;font-weight:900;letter-spacing:-.3px;margin-bottom:8px}
#pg-inicio .camino p{font-size:13.5px;color:var(--mu);line-height:1.7;flex:1}
#pg-inicio .camino .num{margin:14px 0 4px;font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
#pg-inicio .camino.j .num{color:var(--ac)}
#pg-inicio .camino.t .num{color:#FDE68A}
#pg-inicio .camino.v .num{color:#6EE7B7}
#pg-inicio .camino .num small{display:block;font-size:12px;font-weight:700;color:var(--mu);letter-spacing:0;margin-top:6px}
#pg-inicio .camino .ir{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:800;color:var(--tx);padding:11px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:.2s;align-self:flex-start}
#pg-inicio .camino:hover .ir{background:rgba(255,255,255,.1);transform:translateX(4px)}
#pg-inicio .mini-tk{position:absolute;left:50%;top:50%;width:118px;height:70px;margin:-35px 0 0 -59px;border-radius:12px;padding:9px 11px;background:linear-gradient(150deg,rgba(30,41,59,.98),rgba(15,23,42,1));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 30px rgba(0,0,0,.5);animation:nin-jvFloatS 5s ease-in-out infinite}
#pg-inicio .mini-tk .k{font-size:8.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mu)}
#pg-inicio .mini-tk .v{font-size:20px;font-weight:900;letter-spacing:-.5px;line-height:1;margin-top:5px;font-variant-numeric:tabular-nums}
#pg-inicio .mini-tk.a{translate:-58px -26px;rotate:-9deg;border-color:rgba(245,158,11,.5)}
#pg-inicio .mini-tk.a .v{color:var(--am)}
#pg-inicio .mini-tk.b{translate:58px -16px;rotate:8deg;border-color:rgba(99,102,241,.55);animation-delay:-2s}
#pg-inicio .mini-tk.b .v{color:#A5B4FC}
#pg-inicio .mini-tk.c{translate:0 30px;rotate:-2deg;border-color:rgba(168,85,247,.6);animation-delay:-3.5s;box-shadow:0 18px 30px rgba(0,0,0,.5),0 0 30px rgba(168,85,247,.25)}
#pg-inicio .mini-tk.c .v{color:#D8B4FE}
#pg-inicio .mini-podio{position:absolute;left:50%;bottom:6px;transform:translateX(-50%) rotateX(8deg);display:flex;align-items:flex-end;gap:7px;transform-style:preserve-3d}
#pg-inicio .ped{width:52px;--h:52px;position:relative}
#pg-inicio .ped .f{height:var(--h);border-radius:8px 8px 4px 4px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-size:20px;font-weight:900;background:linear-gradient(180deg,rgba(51,65,85,.95),rgba(15,23,42,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 30px rgba(0,0,0,.5);color:#E2E8F0}
#pg-inicio .ped.p1{--h:84px;width:60px}
#pg-inicio .ped.p3{--h:40px}
#pg-inicio .ped.p1 .f{background:linear-gradient(180deg,rgba(120,80,10,.9),rgba(60,38,6,.98));border-color:rgba(251,191,36,.6);box-shadow:0 18px 30px rgba(0,0,0,.5),0 0 30px rgba(245,158,11,.3);color:#FDE68A}
#pg-inicio .ped.p3 .f{background:linear-gradient(180deg,rgba(120,60,20,.7),rgba(40,22,10,.98));border-color:rgba(251,146,60,.4);color:#FDBA74}
#pg-inicio .ped .cup{position:absolute;left:50%;bottom:calc(var(--h) + 8px);translate:-50% 0;font-size:24px;line-height:1;text-shadow:0 8px 14px rgba(0,0,0,.5);animation:nin-jvFloatS 4s ease-in-out infinite}
#pg-inicio .ped.p1 .cup{font-size:34px;text-shadow:0 0 16px rgba(253,224,71,.6)}
#pg-inicio .ped.p2 .cup{animation-delay:-1.4s}
#pg-inicio .ped.p3 .cup{animation-delay:-2.8s}
#pg-inicio .vsorb{position:absolute;right:8%;top:6%;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#FDE68A;background:radial-gradient(circle at 35% 30%,#1f2937,#050810 70%);border:2px solid rgba(245,158,11,.8);box-shadow:0 0 20px rgba(245,158,11,.45);animation:nin-jvFloatS 4.6s ease-in-out infinite;text-shadow:0 0 10px rgba(253,224,71,.7)}
#pg-inicio .mini-net{position:absolute;inset:0;perspective:700px}
#pg-inicio .ring{position:absolute;left:50%;top:52%;border-radius:50%;border:1.5px solid rgba(16,185,129,.4);box-shadow:0 0 20px rgba(16,185,129,.15),inset 0 0 20px rgba(16,185,129,.06)}
#pg-inicio .ring.r1{width:150px;height:64px;margin:-32px 0 0 -75px}
#pg-inicio .ring.r2{width:240px;height:110px;margin:-55px 0 0 -120px;border-color:rgba(56,189,248,.3)}
#pg-inicio .node{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:linear-gradient(160deg,#1E293B,#0F172A);border:2px solid rgba(16,185,129,.7);box-shadow:0 10px 20px rgba(0,0,0,.5),0 0 12px rgba(16,185,129,.3);animation:nin-jvFloatS 4s ease-in-out infinite}
#pg-inicio .node.b{border-color:rgba(56,189,248,.7);box-shadow:0 10px 20px rgba(0,0,0,.5),0 0 12px rgba(56,189,248,.3)}
#pg-inicio .node:nth-child(2n){animation-delay:-1.3s}
#pg-inicio .node:nth-child(3n){animation-delay:-2.6s}
#pg-inicio .netchip{position:absolute;padding:3px 8px;border-radius:20px;font-size:10.5px;font-weight:900;color:#6EE7B7;background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.55);white-space:nowrap;opacity:0;animation:nin-jvChip 3s ease-out infinite}
#pg-inicio .netchip.b{color:#7DD3FC;background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.55);animation-delay:-1s}
#pg-inicio .netchip.p{color:#D8B4FE;background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.55);animation-delay:-2s}
#pg-inicio .tu{position:absolute;left:50%;top:52%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:radial-gradient(circle at 35% 30%,#3b4b63,#0f172a 70%);border:2px solid var(--gn);box-shadow:0 16px 30px rgba(0,0,0,.6),0 0 30px rgba(16,185,129,.35);animation:nin-jvFloatS 5s ease-in-out infinite}
#pg-inicio .tu::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(16,185,129,.5);animation:nin-jvRing 2.6s ease-out infinite}
#pg-inicio .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#pg-inicio .steps::before{content:'';position:absolute;left:11%;right:11%;top:24px;height:2px;background:linear-gradient(90deg,var(--ac),var(--in),var(--pu),var(--am));opacity:.55;z-index:0}
#pg-inicio .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
#pg-inicio .step .num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#6366F1);display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff;border:3px solid #070d1a;animation:nin-jvPulse 3s ease-in-out infinite}
#pg-inicio .step:nth-child(2) .num{animation-delay:.5s}
#pg-inicio .step:nth-child(3) .num{animation-delay:1s}
#pg-inicio .step:nth-child(4) .num{animation-delay:1.5s}
#pg-inicio .step .box{margin-top:16px;width:100%;padding:20px 14px;border-radius:18px;background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.9));border:1px solid rgba(255,255,255,.07);transition:transform .25s,border-color .25s,box-shadow .25s;flex:1}
#pg-inicio .step:hover .box{transform:translateY(-8px);border-color:rgba(56,189,248,.4);box-shadow:0 20px 40px rgba(0,0,0,.4)}
#pg-inicio .step .ic{font-size:30px;margin-bottom:8px;filter:drop-shadow(0 8px 14px rgba(56,189,248,.25))}
#pg-inicio .step h4{font-size:15px;font-weight:800;margin-bottom:6px}
#pg-inicio .step p{font-size:13px;color:var(--mu);line-height:1.6}
#pg-inicio .step .tag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gn);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);padding:3px 9px;border-radius:20px}
#pg-inicio .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#pg-inicio .card{position:relative;overflow:hidden;padding:24px;border-radius:20px;background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.92));border:1px solid rgba(255,255,255,.07);transition:transform .25s,border-color .25s,box-shadow .25s}
#pg-inicio .card::before{content:'';position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.12),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
#pg-inicio .card:hover{transform:translateY(-8px);border-color:rgba(56,189,248,.35);box-shadow:0 22px 50px rgba(0,0,0,.45)}
#pg-inicio .card:hover::before{opacity:1}
#pg-inicio .card .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:25px;margin-bottom:14px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22)}
#pg-inicio .card.gn .ic{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28)}
#pg-inicio .card.pu .ic{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.3)}
#pg-inicio .card.am .ic{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}
#pg-inicio .card h4{font-size:16px;font-weight:800;margin-bottom:8px}
#pg-inicio .card p{font-size:13.5px;color:var(--mu);line-height:1.7}
/* (lote 51) Reglas claras: los términos, el juego limpio y las reglas de los juegos (tres enlaces de verdad).
   En la computadora, tres al lado; en el teléfono, una debajo de la otra, cada una en su fila (nunca una sola colgando). */
#pg-inicio .reglas3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#pg-inicio .regla{position:relative;overflow:hidden;height:100%;display:flex;align-items:flex-start;gap:14px;padding:20px;border-radius:20px;text-decoration:none;color:var(--tx);
  background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.92));border:1px solid rgba(255,255,255,.07);transition:transform .3s,border-color .3s,box-shadow .3s}
#pg-inicio .regla::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.13),transparent 42%);opacity:0;transition:opacity .3s}
#pg-inicio .regla>*{position:relative}
#pg-inicio .regla:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.35);box-shadow:0 22px 50px rgba(0,0,0,.45)}
#pg-inicio .regla:hover::before{opacity:1;animation:nin-jvGlowMove 9s ease-in-out infinite}
#pg-inicio .regla .ic{flex:0 0 48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:23px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22)}
#pg-inicio .regla.gn .ic{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28)}
#pg-inicio .regla.am .ic{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}
#pg-inicio .regla .tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
#pg-inicio .regla b{font-size:16px;font-weight:800;color:#f1f5f9;line-height:1.3}
#pg-inicio .regla small{font-size:13.5px;color:var(--mu);line-height:1.6}
#pg-inicio .regla .fl{flex:0 0 auto;align-self:center;font-size:20px;font-weight:800;color:var(--ac);transition:transform .3s}
#pg-inicio .regla:hover .fl{transform:translateX(4px)}
@media(max-width:1000px){#pg-inicio .reglas3{grid-template-columns:1fr;max-width:640px;margin:0 auto}}
@media(max-width:760px){
  #pg-inicio .reglas3{gap:10px}
  #pg-inicio .regla{padding:14px;border-radius:16px;gap:12px;align-items:center}
  #pg-inicio .regla .ic{flex-basis:42px;height:42px;font-size:20px;border-radius:12px}
  #pg-inicio .regla b{font-size:14.5px}
  #pg-inicio .regla small{font-size:12px;line-height:1.5}
}
/* (en el teléfono no hay «pasar el mouse»: el brillo se mueve solo) */
@media (hover:none) and (pointer:coarse){#pg-inicio .regla::before{opacity:1;animation:nin-jvGlowMove 9s ease-in-out infinite}}
#pg-inicio .tienda{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#pg-inicio .tbox{position:relative;overflow:hidden;padding:24px;border-radius:26px;background:linear-gradient(160deg,rgba(15,23,42,.96),rgba(7,13,26,.98));border:1px solid rgba(255,255,255,.08)}
#pg-inicio .tbox::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at 100% 0%,var(--tg,rgba(168,85,247,.16)),transparent 50%)}
#pg-inicio .tbox.g{--tg:rgba(56,189,248,.16)}
#pg-inicio .tbox>*{position:relative}
#pg-inicio .tbox .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#pg-inicio .tbox h3{font-size:20px;font-weight:900;letter-spacing:-.3px}
#pg-inicio .tbox .cab p{font-size:13px;color:var(--mu);margin-top:4px}
#pg-inicio .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#pg-inicio .prod{border-radius:16px;overflow:hidden;background:var(--s);border:1px solid rgba(255,255,255,.07);transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
#pg-inicio .prod:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.4)}
#pg-inicio .prod .img{aspect-ratio:1;display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:-1px;background:var(--pb,#111);color:var(--pc,#fff)}
#pg-inicio .prod .img.game{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;padding:8px;line-height:1.3;background:linear-gradient(160deg,#1E293B,#0F172A);color:#7DD3FC;text-shadow:0 2px 12px rgba(56,189,248,.6)}
#pg-inicio .prod .in{padding:9px 10px 10px;display:flex;flex-direction:column;gap:3px}
#pg-inicio .prod .nm{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pg-inicio .prod .dt{font-size:10.5px;color:var(--mu)}
#pg-inicio .prod .pr{font-size:15px;font-weight:900;color:var(--ac);margin-top:2px;font-variant-numeric:tabular-nums}
#pg-inicio .prod .pr s{font-size:10.5px;color:var(--mu);font-weight:600;margin-left:5px}
#pg-inicio .prod .off{display:inline-block;font-size:9.5px;font-weight:800;color:#6EE7B7;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);padding:2px 6px;border-radius:20px;align-self:flex-start}
#pg-inicio .tbox .foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:16px}
#pg-inicio .tbox .chipsl{display:flex;gap:6px;flex-wrap:wrap}
#pg-inicio .tbox .chipsl span{font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--tx)}
#pg-inicio .video{position:relative;max-width:860px;margin:0 auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b1220;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.55);cursor:pointer}
#pg-inicio .video .tapa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,rgba(56,189,248,.18),rgba(7,13,26,.9) 70%)}
#pg-inicio .video .play{width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#6366F1);display:grid;place-items:center;font-size:30px;color:#fff;box-shadow:0 20px 40px rgba(56,189,248,.4);animation:nin-jvPulse 2.4s infinite;transition:transform .2s}
#pg-inicio .video:hover .play{transform:scale(1.08)}
#pg-inicio .video .tapa b{font-size:16px;font-weight:800}
#pg-inicio .video .tapa span{font-size:13px;color:var(--mu)}
#pg-inicio .video .tks{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:10px}
#pg-inicio .video .tks span{padding:7px 12px;border-radius:12px;font-size:12.5px;font-weight:800;background:rgba(15,23,42,.85);border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
#pg-inicio .video .tks span.a{color:var(--am)}
#pg-inicio .video .tks span.b{color:#A5B4FC}
#pg-inicio .video .tks span.c{color:#D8B4FE}
#pg-inicio .puntos{display:flex;gap:8px;justify-content:center;margin-top:18px}
#pg-inicio .puntos i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
#pg-inicio .puntos i.on{background:var(--ac);width:22px;border-radius:5px}
#pg-inicio .cta-box{position:relative;overflow:hidden;padding:52px 32px;text-align:center;border-radius:28px;border:1px solid rgba(56,189,248,.3);background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(168,85,247,.14))}
#pg-inicio .cta-box::before{content:'';position:absolute;inset:0;background:radial-gradient(700px circle at 20% 0%,rgba(56,189,248,.2),transparent 50%),radial-gradient(600px circle at 90% 100%,rgba(168,85,247,.22),transparent 50%);pointer-events:none}
#pg-inicio .cta-box>*{position:relative}
#pg-inicio .cta-box .ic{font-size:54px;line-height:1;margin-bottom:10px;text-shadow:0 14px 22px rgba(168,85,247,.4);animation:nin-jvFloat 5s ease-in-out infinite;display:inline-block}
#pg-inicio .cta-box h3{font-size:clamp(24px,3.6vw,38px);font-weight:900;margin-bottom:10px;letter-spacing:-.5px;line-height:1.15}
#pg-inicio .cta-box p{color:var(--mu);font-size:15px;line-height:1.7;max-width:560px;margin:0 auto 24px}
#pg-inicio .cta-box .ctas{justify-content:center;margin-bottom:0}
#pg-inicio .dos{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
#pg-inicio .vend{position:relative;overflow:hidden;padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.92));border:1px solid rgba(16,185,129,.3)}
#pg-inicio .vend::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at 0% 0%,rgba(16,185,129,.16),transparent 50%)}
#pg-inicio .vend>*{position:relative}
#pg-inicio .vend h3{font-size:22px;font-weight:900;margin-bottom:8px;letter-spacing:-.3px}
#pg-inicio .vend p{font-size:14px;color:var(--mu);line-height:1.7;margin-bottom:16px}
#pg-inicio .vend .acc{display:flex;gap:10px;flex-wrap:wrap}
#pg-inicio .app{position:relative;overflow:hidden;padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(15,23,42,.92));border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
#pg-inicio .app h3{font-size:20px;font-weight:900;margin-bottom:6px}
#pg-inicio .app p{font-size:13.5px;color:var(--mu);line-height:1.6;margin-bottom:16px;flex:1}
#pg-inicio .app .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pg-inicio .dl{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(16,185,129,.4);background:rgba(16,185,129,.08);cursor:pointer;color:var(--tx);text-decoration:none;transition:.2s;min-height:44px}
#pg-inicio .dl:hover{transform:translateY(-2px);background:rgba(16,185,129,.14)}
#pg-inicio .dl.off{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);opacity:.7;cursor:default}
#pg-inicio .dl .i{font-size:22px}
#pg-inicio .dl small{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mu)}
#pg-inicio .dl b{font-size:14px}
#pg-inicio .app .nota{font-size:11.5px;color:var(--mu);margin-top:12px;line-height:1.5}
#pg-inicio .footer{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.06);padding:40px 24px;text-align:center;color:var(--mu);font-size:13px}
#pg-inicio .footer .logo{display:inline-block;margin-bottom:10px}
#pg-inicio .footer .links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:8px 0 12px}
#pg-inicio .footer .links a{color:var(--mu);text-decoration:none;font-weight:600}
#pg-inicio .footer .links a:hover{color:var(--tx)}
#pg-inicio .footer .redes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:4px 0 16px}
#pg-inicio .footer .redes a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--br);border-radius:30px;color:var(--tx);text-decoration:none;font-weight:700;font-size:13px;background:rgba(255,255,255,.03);transition:transform .15s,border-color .15s}
#pg-inicio .footer .redes a:hover{transform:translateY(-2px);border-color:var(--ac)}
#pg-inicio .footer .redes:empty{display:none}
@media(min-width:761px) and (max-width:1180px){
#pg-inicio .ld-nav{flex-wrap:wrap;row-gap:6px}
#pg-inicio .ld-menu{order:3;width:100%;border-top:1px solid rgba(255,255,255,.06);padding-top:8px;margin-top:4px}
#pg-inicio .ld-menu-item{padding:8px 12px;font-size:13px}
}
@media(max-width:1000px){
#pg-inicio .hero{grid-template-columns:1fr;gap:20px;padding-top:44px}
#pg-inicio .stage{height:400px}
#pg-inicio .caminos{grid-template-columns:1fr}
#pg-inicio .steps{grid-template-columns:repeat(2,1fr)}
#pg-inicio .steps::before{display:none}
#pg-inicio .cards{grid-template-columns:repeat(2,1fr)}
#pg-inicio .tienda{grid-template-columns:1fr}
#pg-inicio .dos{grid-template-columns:1fr}
#pg-inicio .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
#pg-inicio .ld-nav{padding:12px 16px}
#pg-inicio .ld-sec{padding:60px 16px}
}
@media(max-width:760px){
#pg-inicio .ld-nav{flex-wrap:wrap;gap:8px;backdrop-filter:none;background:rgba(7,13,26,.96)}
#pg-inicio .ld-menu{order:3;width:100%;gap:4px;border-top:1px solid rgba(255,255,255,.06);padding-top:8px;row-gap:4px}
#pg-inicio .ld-menu-item{padding:7px 11px;font-size:12.5px;display:inline-flex;align-items:center;min-height:44px}
#pg-inicio .nav-acc{width:100%}
#pg-inicio .nav-acc .ld-cta, #pg-inicio .nav-acc .ld-ghost{flex:1;min-height:44px;padding:0 12px;font-size:12.5px}
#pg-inicio .ld-sec{padding-top:30px;padding-bottom:30px}
#pg-inicio .ld-h2{font-size:22px;line-height:1.18}
#pg-inicio .ld-cta, #pg-inicio .ld-ghost, #pg-inicio .camino .ir, #pg-inicio .dl{min-height:44px;padding-top:0;padding-bottom:0}
#pg-inicio .ctas .ld-cta, #pg-inicio .ctas .ld-ghost{width:100%}
}
@media(max-width:640px){
#pg-inicio .hero{padding:34px 16px 30px}
#pg-inicio .hero h1{font-size:clamp(30px,9vw,42px)}
#pg-inicio .stage{height:340px;perspective:1000px}
#pg-inicio .sword{width:140px;height:140px;margin:-70px 0 0 -70px;font-size:70px}
#pg-inicio .tkpos{width:176px;height:108px;margin:-54px 0 0 -88px}
#pg-inicio .tkpos.a{transform:translate3d(-72px,-86px,-150px) rotateY(22deg) rotateX(6deg)}
#pg-inicio .tkpos.b{transform:translate3d(72px,-52px,-70px) rotateY(-20deg) rotateX(4deg)}
#pg-inicio .tkpos.c{transform:translate3d(0,100px,50px) rotateY(-4deg) rotateX(8deg)}
#pg-inicio .tk3{padding:12px 14px}
#pg-inicio .tk3 .v{font-size:26px;margin:8px 0 4px}
#pg-inicio .tk3 .s{font-size:11px}
#pg-inicio .pill3{font-size:11.5px;padding:7px 11px;translate:-50% 0;top:0}
#pg-inicio .pill3 .acr{display:none}
#pg-inicio .tk3 .conv{display:none}
#pg-inicio .tk3 .k b{display:none}
#pg-inicio .tk3 .ent{display:inline}
#pg-inicio .tk3 .s{padding-right:34px}
#pg-inicio .coin.c1{left:1%;top:22%;width:42px;height:42px;font-size:16px}
#pg-inicio .coin.c2{right:1%}
#pg-inicio .glow{width:300px;height:300px;margin:-150px 0 0 -150px}
#pg-inicio .stats{gap:10px;padding:0 16px 30px}
#pg-inicio .stat{padding:16px 10px}
#pg-inicio .steps, #pg-inicio .cards{grid-template-columns:1fr}
#pg-inicio .prods{grid-template-columns:repeat(2,1fr)}
#pg-inicio .cta-box{padding:36px 18px}
#pg-inicio .app .btns{grid-template-columns:1fr}
#pg-inicio .marq span{padding:0 18px}
}
@property --mx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:50%}
@keyframes nin-jvSway{0%,100%{transform:perspective(900px) rotateY(-6deg) rotateX(2.5deg) translateY(0)}50%{transform:perspective(900px) rotateY(6deg) rotateX(-2.5deg) translateY(-6px)}}
@keyframes nin-jvSwayStage{0%,100%{transform:rotateY(-10deg) rotateX(4deg)}50%{transform:rotateY(10deg) rotateX(-4deg)}}
@keyframes nin-jvGlowMove{0%,100%{--mx:18%;--my:12%}50%{--mx:82%;--my:70%}}
@media (hover:none) and (pointer:coarse){
#pg-inicio .stage-in{animation:nin-jvSwayStage 12s ease-in-out infinite}
#pg-inicio .camino.in{animation:nin-jvSway 8s ease-in-out infinite,nin-jvGlowMove 8s ease-in-out infinite}
#pg-inicio .camino.in:nth-child(2){animation-delay:-2.6s,-2.6s}
#pg-inicio .camino.in:nth-child(3){animation-delay:-5.2s,-5.2s}
#pg-inicio .card::before{opacity:1;animation:nin-jvGlowMove 9s ease-in-out infinite}
#pg-inicio .ld-blob{filter:none;opacity:.28;background:radial-gradient(circle at center,var(--blob,#38BDF8) 0%,transparent 68%)!important}
#pg-inicio .glow{filter:none;opacity:.5}
#pg-inicio .badge{backdrop-filter:none}
#pg-inicio .tk3::after{display:none}
#pg-inicio .stars{opacity:.6}
#pg-inicio .ld-nav{backdrop-filter:none;background:rgba(7,13,26,.96)}
#pg-inicio .ld-cta{animation:none;box-shadow:0 10px 30px rgba(56,189,248,.35)}
}
@media (prefers-reduced-motion:reduce){
#pg-inicio .ld-reveal{opacity:1;transform:none}
}
#pg-inicio .prod .img{position:relative}
#pg-inicio .prod .img img{width:100%;height:100%;object-fit:cover}
#pg-inicio .prod .in .btn{margin-top:6px;width:100%}
#pg-inicio .prods:empty{display:none}
#pg-inicio .prod .cta{margin-top:6px;border:0;border-radius:10px;padding:7px 0;width:100%;font-size:11.5px;font-weight:800;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#38BDF8,#6366F1);color:#fff}
#pg-inicio .prod .cta:hover{filter:brightness(1.1)}
#pg-inicio .vacio{grid-column:1/-1;text-align:center;padding:28px;color:var(--mu);font-size:13px;border:1px dashed rgba(255,255,255,.1);border-radius:16px}
#pg-inicio .camino, #pg-inicio .footer .links a, #pg-inicio .ld-ghost[onclick]{cursor:pointer}
#pg-inicio .tks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
#pg-inicio .tks span{padding:7px 12px;border-radius:12px;font-size:12.5px;font-weight:800;background:rgba(15,23,42,.85);border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
#pg-inicio .tks span.a{color:var(--am)}
#pg-inicio .tks span.b{color:#A5B4FC}
#pg-inicio .tks span.c{color:#D8B4FE}

/* ═══ HERRAMIENTAS DE LOS VENDEDORES ═══
   La vitrina de lo que tiene cada vendedor en su panel (Diseños y
   Streamers), en el inicio y en la página de Vendedores. Los dibujos
   son de puro CSS (sin imágenes que cargar) y se escalan con su caja. */
.herr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.herr-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:20px 22px 22px;border-radius:26px;background:linear-gradient(160deg,rgba(30,41,59,.95),rgba(15,23,42,.97));border:1px solid rgba(255,255,255,.08);transition:border-color .35s,box-shadow .35s}
.herr-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at 100% 0%,var(--hg),transparent 55%)}
.herr-card.h-dis{--hg:rgba(168,85,247,.2);--hb:rgba(168,85,247,.5)}
.herr-card.h-str{--hg:rgba(254,44,85,.17);--hb:rgba(254,44,85,.5)}
.herr-card:hover{border-color:var(--hb);box-shadow:0 26px 56px rgba(0,0,0,.45)}
.herr-card>*{position:relative}
.herr-card h3{font-size:22px;font-weight:900;letter-spacing:-.3px;margin:0 0 8px}
.herr-card>p{font-size:14px;color:var(--mu);line-height:1.7;margin:0 0 14px}
.herr-pts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.herr-pts li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--mu);line-height:1.6;text-align:left}
.herr-pts li i{flex:none;font-style:normal;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.herr-pts li b{color:var(--tx)}
.herr-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.herr-chips span{font-size:11px;font-weight:800;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--tx);white-space:nowrap}
.herr-mas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.herr-mas>div{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);text-align:left}
.herr-mas .h-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28)}
.herr-mas b{display:block;font-size:14px;color:var(--tx)}
.herr-mas small{display:block;font-size:12px;color:var(--mu);line-height:1.45;margin-top:2px}
.herr-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* El dibujo de arriba de cada tarjeta */
.herr-viz{position:relative;overflow:hidden;aspect-ratio:2.2;margin-bottom:18px;border-radius:18px;container-type:inline-size;
  background:radial-gradient(circle at 20% 0%,rgba(56,189,248,.1),transparent 55%),linear-gradient(180deg,#0B1428,#070D1A);border:1px solid rgba(255,255,255,.07)}
.herr-viz::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:6% 13.2%}
.herr-viz .h-etq{position:absolute;z-index:3;font-size:10px;font-size:clamp(8px,2.1cqw,11px);font-weight:800;padding:.35em .8em;border-radius:20px;white-space:nowrap;color:#fff;background:rgba(7,13,26,.92);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* Diseños: un afiche «ya hecho» y el editor libre */
.herr-post{position:absolute;left:8%;top:7%;width:27%;aspect-ratio:4/5;border-radius:3.2cqw;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.55);transform:rotate(-4deg);
  background:radial-gradient(circle at 80% 10%,rgba(245,158,11,.55),transparent 45%),linear-gradient(160deg,#6D28D9,#312E81 55%,#0F172A);border:1px solid rgba(255,255,255,.22);
  display:flex;flex-direction:column;align-items:center;padding:7% 6% 0;text-align:center;color:#fff}
.herr-post .h-lg{font-weight:900;letter-spacing:.2em;font-size:7px;font-size:1.5cqw;color:#7DD3FC}
.herr-post .h-big{margin-top:9%;font-weight:900;line-height:.95;font-size:21px;font-size:4.5cqw;white-space:nowrap;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.herr-post .h-tk{display:flex;gap:5%;margin-top:9%;width:100%;justify-content:center}
.herr-post .h-tk i{font-style:normal;font-weight:900;font-size:8px;font-size:1.7cqw;padding:.25em .6em;border-radius:.5em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.herr-post .h-tk i:nth-child(1){color:#FDE68A}.herr-post .h-tk i:nth-child(2){color:#A5B4FC}.herr-post .h-tk i:nth-child(3){color:#F0ABFC}
.herr-post .h-tu{position:absolute;left:6%;right:6%;bottom:6%;font-size:7px;font-size:1.55cqw;font-weight:800;padding:.5em .4em;border-radius:.8em;background:rgba(16,185,129,.22);border:1px dashed #6EE7B7;color:#D1FAE5;white-space:nowrap;overflow:hidden}
.herr-ed{position:absolute;left:41%;top:7%;width:52%;height:73%;border-radius:3cqw;overflow:hidden;background:#0F172A;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.5);display:flex}
.herr-ed .h-barra{flex:none;width:12%;display:flex;flex-direction:column;align-items:center;gap:6%;padding-top:5%;background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.08)}
.herr-ed .h-barra i{font-style:normal;width:68%;aspect-ratio:1;border-radius:22%;display:grid;place-items:center;font-size:9px;font-size:1.8cqw;font-weight:900;color:#CBD5E1;background:rgba(255,255,255,.06)}
.herr-ed .h-barra i.h-on{background:rgba(168,85,247,.35);color:#fff;outline:1px solid rgba(216,180,254,.7)}
.herr-ed .h-lienzo{position:relative;flex:1;margin:5%;border-radius:2cqw;overflow:hidden;
  background:radial-gradient(circle at 70% 35%,rgba(56,189,248,.5),transparent 42%),radial-gradient(circle at 20% 90%,rgba(245,158,11,.4),transparent 45%),linear-gradient(135deg,#1E3A8A,#6D28D9)}
.herr-ed .h-foto{position:absolute;right:6%;bottom:0;width:42%;aspect-ratio:1;display:grid;place-items:end center;font-size:34px;font-size:9cqw;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.herr-ed .h-txt{position:absolute;left:7%;top:12%;max-width:58%;font-weight:900;color:#fff;font-size:12px;font-size:2.9cqw;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.herr-ed .h-txt small{display:block;margin-top:.35em;font-size:.55em;font-weight:800;color:#FDE68A;letter-spacing:.06em}
.herr-ed .h-sel{position:absolute;left:5%;top:9%;width:57%;height:36%;border:1px dashed rgba(255,255,255,.85);border-radius:3px}
.herr-ed .h-sel::before,.herr-ed .h-sel::after{content:'';position:absolute;width:5px;height:5px;background:#fff;border-radius:1px}
.herr-ed .h-sel::before{left:-3px;top:-3px}.herr-ed .h-sel::after{right:-3px;bottom:-3px}
.herr-ed .h-qr{position:absolute;left:7%;bottom:9%;width:17%;aspect-ratio:1;border-radius:3px;background:#fff;padding:2%;
  background-image:linear-gradient(90deg,#0F172A 50%,transparent 50%),linear-gradient(#0F172A 50%,transparent 50%);background-size:28% 28%;background-origin:content-box;box-shadow:0 0 0 2px #fff}
.herr-ed .h-qr::before{content:'';position:absolute;left:8%;top:8%;width:30%;height:30%;border:2px solid #0F172A;background:#fff;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px #0F172A}

/* Streamers: la pantalla de PC (16:9) y la del teléfono (9:16) */
.herr-pc{position:absolute;left:5%;top:6%;width:61%;aspect-ratio:16/9;border-radius:2.2cqw;overflow:hidden;background:#050A16;border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.herr-pc .h-juego{position:absolute;left:2.5%;top:15%;width:64%;height:62%;border-radius:1.2cqw;overflow:hidden;
  background:radial-gradient(circle at 30% 70%,rgba(34,197,94,.55),transparent 40%),radial-gradient(circle at 75% 30%,rgba(250,204,21,.45),transparent 38%),linear-gradient(160deg,#0EA5E9,#1E3A8A 60%,#0B1024);
  outline:1px dashed rgba(255,255,255,.55);outline-offset:-3px;display:grid;place-items:center}
.herr-pc .h-juego span{font-size:9px;font-size:1.9cqw;font-weight:800;color:#fff;background:rgba(0,0,0,.45);padding:.3em .8em;border-radius:1em;white-space:nowrap}
.herr-pc .h-cab{position:absolute;left:2.5%;top:3%;right:2.5%;height:9%;display:flex;align-items:center;gap:2%}
.herr-vivo{display:inline-flex;align-items:center;gap:.35em;font-size:8px;font-size:1.55cqw;font-weight:900;color:#fff;background:#E11D48;padding:.25em .6em;border-radius:.4em;letter-spacing:.05em;white-space:nowrap}
.herr-vivo i{width:.55em;height:.55em;border-radius:50%;background:#fff;animation:ldPulseDot 1.6s infinite}
.herr-pc .h-usr{font-size:9px;font-size:1.8cqw;font-weight:900;color:#67E8F9;white-space:nowrap}
.herr-pc .h-lg{margin-left:auto;font-size:7px;font-size:1.45cqw;font-weight:900;letter-spacing:.18em;color:#7DD3FC}
.herr-pc .h-lado{position:absolute;right:2.5%;top:15%;width:28%;height:62%;display:flex;flex-direction:column;gap:6%}
.herr-pc .h-tarj{flex:1;border-radius:1.2cqw;padding:7% 8%;display:flex;flex-direction:column;justify-content:center;gap:8%;text-align:center}
.herr-pc .h-tarj.h-oro{background:linear-gradient(160deg,rgba(245,158,11,.28),rgba(245,158,11,.08));border:1px solid rgba(253,230,138,.5)}
.herr-pc .h-tarj.h-rosa{background:linear-gradient(160deg,rgba(254,44,85,.3),rgba(254,44,85,.08));border:1px solid rgba(253,164,175,.5)}
.herr-pc .h-tarj b{font-size:8px;font-size:1.55cqw;font-weight:900;color:#fff;line-height:1.1}
.herr-pc .h-tarj small{font-size:7px;font-size:1.3cqw;font-weight:800;color:#0F172A;background:#FDE68A;border-radius:.6em;padding:.3em .2em;white-space:nowrap;overflow:hidden}
.herr-pc .h-tarj.h-rosa small{background:#FE2C55;color:#fff}
.herr-pc .h-franja{position:absolute;left:2.5%;right:2.5%;bottom:4%;height:14%;border-radius:1.2cqw;display:flex;align-items:center;justify-content:center;gap:.4em;font-size:9px;font-size:1.75cqw;font-weight:800;color:#fff;
  background:linear-gradient(90deg,rgba(56,189,248,.35),rgba(168,85,247,.35));border:1px solid rgba(125,211,252,.45);white-space:nowrap}
.herr-pc .h-franja b{font-weight:900;letter-spacing:.14em;color:#7DD3FC}
.herr-tel{position:absolute;z-index:2;right:9%;top:4%;height:77%;aspect-ratio:9/16;border-radius:3.2cqw;overflow:hidden;background:#050A16;border:2px solid rgba(255,255,255,.22);box-shadow:0 16px 40px rgba(0,0,0,.6);transform:rotate(3deg)}
.herr-tel .herr-vivo{position:absolute;left:7%;top:4%;font-size:6px;font-size:1.25cqw}
.herr-tel .h-hueco{position:absolute;left:7%;right:7%;top:14%;height:44%;border-radius:1.4cqw;display:grid;place-items:center;font-size:14px;font-size:3.4cqw;
  background:radial-gradient(circle at 60% 40%,rgba(250,204,21,.5),transparent 45%),linear-gradient(160deg,#F43F5E,#7C3AED);outline:1px dashed rgba(255,255,255,.6);outline-offset:-3px}
.herr-tel .h-gana{position:absolute;left:7%;right:7%;top:62%;text-align:center;font-size:7px;font-size:1.5cqw;font-weight:900;color:#FDE68A;line-height:1.1}
.herr-tel .h-franja{position:absolute;left:7%;right:7%;bottom:5%;height:14%;border-radius:1.2cqw;display:grid;place-items:center;font-size:6px;font-size:1.25cqw;font-weight:900;letter-spacing:.1em;color:#fff;background:linear-gradient(90deg,#0EA5E9,#7C3AED)}

/* Las etiquetas de cada dibujo, debajo de él */
.herr-viz .h-etq.h-e1,.herr-viz .h-etq.h-e2{bottom:4.5%;transform:translateX(-50%)}
.herr-viz.h-dis .h-etq.h-e1{left:21.5%}
.herr-viz.h-dis .h-etq.h-e2{left:67%}
.herr-viz.h-str .h-etq.h-e1{left:35.5%}
.herr-viz.h-str .h-etq.h-e2{left:80.5%}

@media(max-width:1000px){.herr-grid{grid-template-columns:1fr}.herr-mas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .herr-card{padding:16px 16px 18px;border-radius:22px}
  .herr-card h3{font-size:19px}
  .herr-mas{gap:10px}
  .herr-mas>div{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 13px}
  .herr-mas .h-ic{width:36px;height:36px;font-size:17px}
  .herr-acc .ld-cta,.herr-acc .ld-ghost{width:100%}
}
@media (prefers-reduced-motion:reduce){.herr-vivo i{animation:none}}

/* ═══ LA PÁGINA PÚBLICA EN EL TELÉFONO ═══
   1) La barra de arriba: un botón ☰ a la izquierda, el logo en el
      centro, y el menú (con Crear cuenta e Iniciar sesión adentro) se
      despliega al tocar el ☰. Vale para TODAS las barras .ld-nav
      (inicio, juegos, streaming, torneos, jugadores, vendedores); el
      botón lo pone armarMenuTelefono() al cargar.
   2) "Hecho para jugadores de verdad": seis tarjetas de dos en dos
      (tres filas), con letra más chica y sin cortar palabras.
   3) La vitrina de juegos y pantallas: descripción recortada con
      "ver más", y las tarjetas abren la ficha completa. */
.ld-hamb{display:none}
@media(max-width:760px){
  .ld-nav.ld-nav-hamb{
    display:grid !important;grid-template-columns:44px 1fr 44px !important;
    align-items:center !important;gap:6px 8px !important;padding:8px 10px !important;
    flex-wrap:nowrap !important}
  .ld-nav.ld-nav-hamb .ld-hamb{
    display:inline-flex !important;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);color:var(--tx);font-size:22px;line-height:1;cursor:pointer;
    font-family:inherit;padding:0;grid-column:1;grid-row:1}
  .ld-nav.ld-nav-hamb.abierto .ld-hamb{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.5);color:var(--ac)}
  .ld-nav.ld-nav-hamb .ld-nav-logo{
    grid-column:2;grid-row:1;justify-self:center !important;text-align:center;
    font-size:20px !important;margin:0 !important;width:auto !important}
  .ld-nav.ld-nav-hamb .ld-nav-logo.logo{font-size:19px !important;letter-spacing:1px}
  /* El menú y los botones de cuenta: escondidos hasta que se toca el ☰ */
  .ld-nav.ld-nav-hamb .ld-menu,
  .ld-nav.ld-nav-hamb .ld-nav-acc{display:none !important;grid-column:1 / -1 !important;width:100% !important;order:0 !important;margin:0 !important}
  .ld-nav.ld-nav-hamb.abierto .ld-menu{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:2px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;padding:8px 0 4px !important;margin-top:4px !important}
  .ld-nav.ld-nav-hamb.abierto .ld-menu-item{
    display:flex !important;align-items:center;min-height:44px !important;padding:10px 12px !important;
    font-size:15px !important;border-radius:10px;justify-content:flex-start}
  .ld-nav.ld-nav-hamb.abierto .ld-nav-acc{
    display:flex !important;flex-direction:column !important;gap:8px !important;
    padding:6px 0 8px !important;border-top:1px solid rgba(255,255,255,.08) !important;margin-top:4px !important}
  .ld-nav.ld-nav-hamb.abierto .ld-nav-acc button,
  .ld-nav.ld-nav-hamb.abierto .ld-nav-acc .ld-cta,
  .ld-nav.ld-nav-hamb.abierto .ld-nav-acc .ld-ghost{width:100% !important;flex:none !important;min-height:46px !important;justify-content:center;font-size:14px !important;padding:0 14px !important;animation:none}
  .ld-nav.ld-nav-hamb .ld-nav-acc #ld-live{display:none !important}

  /* Hecho para jugadores de verdad: de dos en dos */
  #pg-inicio .cards{grid-template-columns:1fr 1fr !important;gap:10px !important}
  #pg-inicio .card{padding:14px 12px !important;border-radius:16px !important;min-width:0}
  #pg-inicio .card .ic{width:38px !important;height:38px !important;font-size:19px !important;border-radius:12px !important;margin-bottom:9px !important}
  #pg-inicio .card h4{font-size:13px !important;line-height:1.25 !important;margin-bottom:5px !important;overflow-wrap:break-word;word-break:normal;hyphens:none}
  #pg-inicio .card p{font-size:11.5px !important;line-height:1.5 !important;overflow-wrap:break-word;word-break:normal;hyphens:none}

  /* La vitrina de la portada: la descripción no se come la tarjeta */
  #pg-inicio .prod .dt{font-size:10.5px;line-height:1.4}
}
#pg-inicio .prod .dt .vermas{color:var(--ac);font-weight:800;cursor:pointer;white-space:nowrap}
#pg-inicio .prod .dt .vermas:hover{text-decoration:underline}
#pg-inicio .tbox .cab .ld-ghost.todo{white-space:nowrap}

/* ═══ LA PORTADA ORDENADA EN EL TELÉFONO ═══
   Con sus palabras: "en el teléfono se ve feo, todo desorganizado". Lo
   que se veía torcido o amontonado en una pantalla angosta:
    · los tres tickets de arriba flotaban en 3D, encimados y cortados
      contra el borde, con monedas y espadas sueltas encima;
    · las tarjetas de "Tres formas de ganar" se mecían torcidas todo el
      tiempo (el efecto 3D pensado para el ratón);
    · los 4 pasos ocupaban una pantalla entera cada dos;
    · el video quedaba chiquito, con mucho hueco;
    · los enlaces del pie se partían sin orden y los botones flotantes
      tapaban las últimas líneas.
   Solo cambia en teléfonos (hasta 760 px): la computadora queda igual, y
   no se quita ningún texto (la entrada de cada ticket pasa a su etiqueta
   de arriba; solo se esconden los adornos que flotaban). */
/* Teléfonos de 360 px: la etiqueta «ENTRADA $3.50» se salía 3-4 px de su ticket */
@media(max-width:380px){
  #pg-inicio .tkpos .tk3 .k b{font-size:8.5px !important;letter-spacing:.2px !important;padding:3px 5px !important}
}
@media(max-width:760px){
  /* Los tres tickets: en fila, derechos y completos (sin 3D ni monedas sueltas) */
  #pg-inicio .hero{gap:14px !important}
  #pg-inicio .stage{height:auto !important;perspective:none !important}
  #pg-inicio .stage-in{position:relative !important;inset:auto !important;transform:none !important;animation:none !important;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:46px}
  #pg-inicio .stage .glow, #pg-inicio .stage .sword, #pg-inicio .stage .coin, #pg-inicio .stage .chips{display:none !important}
  #pg-inicio .pill3{position:absolute !important;top:0 !important;left:50% !important;translate:-50% 0 !important;animation:none !important;
    font-size:12px !important;padding:7px 12px !important;max-width:100%}
  #pg-inicio .tkpos{position:relative !important;left:auto !important;top:auto !important;width:auto !important;height:auto !important;
    margin:0 !important;transform:none !important;min-width:0}
  #pg-inicio .tk3{height:100% !important;padding:12px 8px !important;border-radius:16px !important;text-align:center;animation:none !important;
    display:flex;flex-direction:column;align-items:center}
  #pg-inicio .tk3::after, #pg-inicio .tk3 .chip, #pg-inicio .tk3 .ent, #pg-inicio .tk3 .conv{display:none !important}
  #pg-inicio .tk3 .k{flex-direction:column;justify-content:center;gap:6px;font-size:9.5px !important;letter-spacing:1.4px !important}
  #pg-inicio .tk3 .k b{display:inline-block !important;font-size:9px !important;letter-spacing:.4px !important;padding:3px 7px !important}
  #pg-inicio .tk3 .v{font-size:23px !important;margin:8px 0 4px !important}
  #pg-inicio .tk3 .s{font-size:10.5px !important;line-height:1.35;padding-right:0 !important}

  /* "Tres formas de ganar": derechas y quietas (se mecían torcidas) */
  #pg-inicio .camino, #pg-inicio .camino.in{animation:nin-jvGlowMove 8s ease-in-out infinite !important;transform:none !important}
  #pg-inicio .camino{padding:20px 18px 18px !important;border-radius:22px !important}
  #pg-inicio .camino .viz{height:128px !important;margin-bottom:10px !important}

  /* Los 4 pasos: una lista con su línea de tiempo, número a la izquierda */
  #pg-inicio .steps{grid-template-columns:1fr !important;gap:12px !important}
  #pg-inicio .steps::before{display:none !important}
  /* La línea va de un número al siguiente (y se acaba en el paso 4) */
  #pg-inicio .step:not(:last-child)::after{content:'';position:absolute;left:19px;top:50px;bottom:-22px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--ac),var(--in));opacity:.6;pointer-events:none}
  #pg-inicio .step:nth-child(2)::after{background:linear-gradient(180deg,var(--in),var(--pu))}
  #pg-inicio .step:nth-child(3)::after{background:linear-gradient(180deg,var(--pu),var(--am))}
  #pg-inicio .step:hover .box{transform:none}
  #pg-inicio .step{flex-direction:row !important;align-items:flex-start !important;text-align:left !important;gap:12px;padding:0 !important}
  #pg-inicio .step .num{width:40px !important;height:40px !important;font-size:16px !important;flex:none;margin-top:10px}
  #pg-inicio .step .box{margin-top:0 !important;padding:14px !important;border-radius:16px !important;
    display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left}
  #pg-inicio .step .ic{grid-row:1 / span 3;font-size:24px !important;margin:0 !important;line-height:1.2}
  #pg-inicio .step h4{grid-column:2;font-size:14.5px !important;margin-bottom:4px !important}
  #pg-inicio .step p{grid-column:2;font-size:12.5px !important;line-height:1.55 !important}
  #pg-inicio .step .tag{grid-column:2;justify-self:start;margin-top:8px !important}

  /* La tienda: un poco más de espacio para las tarjetas */
  #pg-inicio .tbox{padding:16px !important;border-radius:22px !important}
  #pg-inicio .tbox .cab{margin-bottom:12px !important}

  /* El video: a lo ancho de la pantalla, sin los de los lados asomándose */
  #pg-inicio .ld-carrusel{height:calc(86vw * 9 / 16 + 14px) !important;perspective:none !important}
  #pg-inicio .ld-car-item{width:86vw !important}
  #pg-inicio .ld-car-item.izq1, #pg-inicio .ld-car-item.der1, #pg-inicio .ld-car-item.izq2, #pg-inicio .ld-car-item.der2{opacity:0 !important;pointer-events:none}
  #pg-inicio .ld-car-flecha{width:34px !important;height:34px !important;background:rgba(7,13,26,.72) !important}
  #pg-inicio .ld-car-flecha.izq{left:calc(7vw + 8px) !important}
  #pg-inicio .ld-car-flecha.der{right:calc(7vw + 8px) !important}
  #pg-inicio .tks{gap:6px !important}
  #pg-inicio .tks span{font-size:11.5px !important;padding:6px 9px !important}

  /* El cierre y los recuadros de vendedores y app */
  #pg-inicio .cta-box h3{font-size:22px !important}
  #pg-inicio .vend, #pg-inicio .app{padding:20px 18px !important;border-radius:20px !important}
  #pg-inicio .vend .acc{flex-direction:column}
  #pg-inicio .vend .acc button{width:100%}

  /* El pie: los enlaces en cuadrícula, y espacio abajo para que los
     botones flotantes (chat y WhatsApp) no tapen las últimas líneas */
  #pg-inicio .footer{padding:30px 16px 110px !important}
  #pg-inicio .footer .links{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px !important;margin:12px 0 !important}
  #pg-inicio .footer .redes + .links{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pg-inicio .footer .links a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 6px;border-radius:10px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12.5px;line-height:1.25;text-align:center}
}


/* ═══ PANEL AL DÍA ═══
   Repaso visual y de organización del panel. Todo lo de aquí abajo son
   estilos: no quita ni un botón ni mueve contenido. Si algún día quieres
   volver al aspecto anterior, se borra este bloque y ya. */

/* ── El menú: cada rol en su recuadro de color ──
   Admin en cian, Gerente en ámbar, Vendedor en morado. La idea es
   distinguir de un vistazo qué opción pertenece a qué, sin tener que
   leer el rótulo. */
.sb{padding-bottom:6px}
.sb .rol{
  position:relative;margin:10px 10px 0;padding:0 0 6px;
  border:1px solid var(--rol-b);border-radius:14px;
  background:var(--rol-f);border-bottom:1px solid var(--rol-b);
}
.sb .rol-admin   {--rol-b:rgba(56,189,248,.38);--rol-f:rgba(56,189,248,.045);--rol-c:#38BDF8}
.sb .rol-gerente {--rol-b:rgba(245,158,11,.40);--rol-f:rgba(245,158,11,.05); --rol-c:#F59E0B}
.sb .rol-vendedor{--rol-b:rgba(168,85,247,.40);--rol-f:rgba(168,85,247,.05); --rol-c:#A855F7}

.sb .rol>.sb-lbl{
  color:var(--rol-c);font-size:10px;letter-spacing:1.4px;
  padding:9px 13px 8px;margin-bottom:2px;
  border-bottom:1px solid var(--rol-b);
}
.sb .rol>.sb-lbl::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--rol-c);margin-right:7px;flex:none;
  box-shadow:0 0 8px var(--rol-b);
}
.sb .rol>.sb-lbl:hover{color:var(--rol-c);filter:brightness(1.18)}
.sb .rol .sb-todo{color:var(--rol-c);opacity:.75}
.sb .rol .sb-todo:hover{opacity:1}

/* La opción abierta se marca con el color de SU rol, no siempre en cian */
.sb .rol .ni.active{
  color:var(--rol-c);background:var(--rol-f);
  border-left-color:var(--rol-c);
  box-shadow:inset 0 0 0 1px var(--rol-b);
}
.sb .rol .ni{padding-left:14px}
.sb .rol .sb-grupo{padding-left:13px}
.sb .rol .sb-gr-items .ni{padding-left:22px}

/* ── El buscador del menú ── */
.sb-buscar{position:relative;margin:12px 10px 2px}
.sb-buscar input{
  width:100%;background:var(--bg);border:1px solid var(--br);border-radius:10px;
  color:var(--tx);font-family:'Inter',sans-serif;font-size:12.5px;
  padding:8px 26px 8px 30px;transition:border-color .15s;
}
.sb-buscar input::placeholder{color:var(--mu)}
.sb-buscar input:focus{outline:none;border-color:var(--ac)}
.sb-buscar::before{
  content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:11px;opacity:.65;pointer-events:none;
}
.sb-buscar-x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--mu);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s;
}
.sb-buscar:hover .sb-buscar-x,.sb-buscar input:focus+.sb-buscar-x{opacity:.8}
.sb-buscar-nada{
  margin:10px 14px;padding:10px 12px;border-radius:10px;
  border:1px dashed var(--br);color:var(--mu);
  font-size:12px;text-align:center;
}
.oculto-busca{display:none !important}
/* Mientras busca, los grupos se abren solos: si no, habría que adivinar
   en cuál estaba guardada la opción que salió en la lista */
.sb.buscando .sb-gr-items{display:block}
.sb.buscando .sb-gr-flecha{opacity:.3}

/* ── La cabecera de cada página, igual en todas ── */
.main .tp{
  align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--br);
}
.main .tp h1{font-size:22px;letter-spacing:-.4px;line-height:1.2}
.main .tp .sub{margin-top:3px;line-height:1.45}
/* Los botones de la cabecera, siempre juntos a la derecha */
.main .tp>.btn,.main .tp>div:last-child:not(:first-child){flex:none}

/* ── Las tarjetas ── */
.main .pan{border-radius:16px;padding:20px 22px}
.main .pan-t{
  font-size:14.5px;letter-spacing:-.15px;
  padding-bottom:11px;margin-bottom:15px;
  border-bottom:1px solid rgba(148,163,184,.13);
}
/* Una tarjeta que ya trae su propio borde de color no necesita la raya */
.main .pan.acc:not(.abierto)>.pan-t{border-bottom:0;padding-bottom:0}
.pan-ancho{grid-column:1/-1;order:9}
/* Dentro de la rejilla, los márgenes sueltos de cada tarjeta (mb8, mt16)
   descuadraban la fila: una quedaba más abajo que sus vecinas. */
.rejilla-acc>.acc{margin:0}

/* ── Los cuadros de ajustes ──
   Cerrados: el ícono, el nombre y una línea que dice qué hacen. Antes
   había que abrirlos uno por uno para saber qué había dentro. */
.pan-d{
  display:block;font-size:11.5px;font-weight:400;line-height:1.5;
  color:var(--mu);margin-top:2px;
}
.pg>.pan.acc.abierto .pan-d,
.rejilla-acc>.pan.acc.abierto .pan-d{display:none}
.pg>.pan.acc:not(.abierto)>.pan-t,
.rejilla-acc>.pan.acc:not(.abierto)>.pan-t{min-height:112px;gap:6px;padding:16px 15px}
.pg>.pan.acc:not(.abierto):hover,
.rejilla-acc>.pan.acc:not(.abierto):hover{border-color:var(--ac);
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pg>.pan.acc.abierto,
.rejilla-acc>.pan.acc.abierto{border-color:rgba(56,189,248,.4)}
.pg>.pan.acc.abierto>.pan-t,
.rejilla-acc>.pan.acc.abierto>.pan-t{color:var(--ac)}

/* El rótulo de cada tema, dentro de las páginas de ajustes */
.grupo-aj{
  grid-column:1/-1;font-size:10.5px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mu);
  padding:6px 0 9px;margin-top:6px;border-bottom:1px solid var(--br);
}
.grupo-aj:first-of-type{margin-top:0}

/* ── Las tablas: que se lean ── */
.main th{
  font-size:10.5px;letter-spacing:.8px;padding:9px 12px;
  border-bottom:1px solid rgba(148,163,184,.28);
  background:rgba(148,163,184,.04);
  position:sticky;top:0;z-index:1;
}
.main th:first-child{border-top-left-radius:9px}
.main th:last-child{border-top-right-radius:9px}
.main td{font-size:13px;vertical-align:middle}
/* Los números en columna, alineados: así se comparan de un vistazo */
.main td{font-variant-numeric:tabular-nums}
.main tr:hover td{background:rgba(56,189,248,.045)}
.main .tw{border-radius:12px;border:1px solid var(--br);background:var(--bg)}
.main .pan .tw{background:transparent}

/* ── Los números grandes de arriba ── */
.main .kpi{border-radius:14px;padding:16px 17px;transition:border-color .15s}
.main .kpi:hover{border-color:rgba(56,189,248,.35)}
.main .kpi-l{font-size:10.5px;letter-spacing:1.1px}
.main .kpi-v{font-size:27px;letter-spacing:-.8px;font-variant-numeric:tabular-nums}

/* ── Los botones ── */
.main .btn{border-radius:10px;letter-spacing:-.1px}
.main .btn:not(:disabled):hover{transform:translateY(-1px)}
.main .btn:not(:disabled):active{transform:none}
.main .btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sb .ni:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}

/* ── Las pestañas ── */
.main .tabs{gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--br);margin-bottom:16px}
.main .tab{border-radius:9px 9px 0 0}

/* ── Los campos ── */
.main .fr label{font-size:10.5px;letter-spacing:.7px}
.main .fr input:focus,.main .fr select:focus,.main .fr textarea:focus{
  border-color:var(--ac);box-shadow:0 0 0 3px rgba(56,189,248,.12);
}

/* ── En tableta (761 a 900 px): el título arriba a la izquierda y los botones abajo,
      como en el teléfono. Antes el título se iba a la derecha en todas las páginas. ── */
@media(min-width:761px) and (max-width:900px){
  .main .tp{align-items:stretch}
}
/* ── En teléfono ── */
@media(max-width:760px){
  .sb .rol{margin:8px 8px 0;border-radius:12px}
  .main .tp{align-items:flex-start;flex-direction:column;gap:12px}
  .main .tp>.btn,.main .tp>div:last-child:not(:first-child){width:100%}
  .main .pan{padding:16px 15px}
  .main th{position:static}
}
@media(prefers-reduced-motion:reduce){
  .main .btn:hover,.pg>.pan.acc:not(.abierto):hover{transform:none}
}

/* ── Mi Gerencia: los cuatro datos de sus propios jugadores ── */
.g4-mg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
/* El QR del vendedor: vista previa a la izquierda, opciones a la derecha */
.qr-arm{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.qr-vista{background:repeating-conic-gradient(#cbd5e1 0 25%,#f8fafc 0 50%) 0 0/20px 20px;border:1px solid var(--br);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center}
.qr-vista canvas{width:100%;max-width:226px;height:auto;display:block;image-rendering:pixelated}
.qr-muestras{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.qr-muestra{width:26px;height:26px;border-radius:50%;border:2px solid var(--br);cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.qr-muestra.activa{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
.qr-aviso{font-size:12px;line-height:1.5;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--bg);color:var(--mu)}
.qr-aviso.mal{color:var(--am);border:1px solid rgba(251,191,36,.35)}
@media(max-width:640px){.qr-arm{grid-template-columns:1fr}.qr-vista canvas{max-width:200px}}

.mg-dato{background:var(--bg);border:1px solid var(--br);border-radius:12px;padding:13px 14px}
.mg-et{font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mu)}
.mg-nu{font-size:22px;font-weight:900;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.mg-pie{font-size:11.5px;color:var(--mu);line-height:1.45}
/* Ocho números caben en dos filas de cuatro */
#pg-vend-panel .kpi-g{grid-template-columns:repeat(4,minmax(0,1fr))}
.main tfoot td{border-bottom:0;background:rgba(148,163,184,.05)}
@media(max-width:900px){
  .g4-mg{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pg-vend-panel .kpi-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .g4-mg{grid-template-columns:1fr}
}

/* ── El botón de Tutorial, dentro de cada menú de rol ── */
.sb-guia{
  display:flex;align-items:center;gap:9px;margin:2px 12px 8px;padding:9px 11px;
  border-radius:11px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;
  color:var(--tx);background:rgba(255,255,255,.04);
  border:1px solid var(--rol-b,var(--br));transition:.15s;
}
.sb-guia:hover{background:var(--rol-f,rgba(255,255,255,.07));border-color:var(--rol-c,var(--ac))}
.sb-guia:focus-visible{outline:2px solid var(--rol-c,var(--ac));outline-offset:2px}
.sb-guia-ic{font-size:15px;line-height:1}
.sb-guia-ir{margin-left:auto;color:var(--rol-c,var(--mu));font-size:15px}

/* ── La capa que oscurece y el foco ── */
.gu-capa{position:fixed;inset:0;z-index:2000;display:none}
.gu-capa.on{display:block}
.gu-foco{
  position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(2,6,16,.84), 0 0 0 3px var(--ac), 0 0 30px rgba(56,189,248,.5);
  transition:top .38s cubic-bezier(.2,.8,.2,1),left .38s cubic-bezier(.2,.8,.2,1),
             width .38s cubic-bezier(.2,.8,.2,1),height .38s cubic-bezier(.2,.8,.2,1);
}
.gu-globo{
  position:fixed;width:380px;max-width:calc(100vw - 32px);
  background:var(--s);border:1px solid rgba(56,189,248,.45);border-radius:18px;
  padding:18px 20px 16px;box-shadow:0 24px 60px rgba(0,0,0,.65);
  transition:top .38s cubic-bezier(.2,.8,.2,1),left .38s cubic-bezier(.2,.8,.2,1);
}
.gu-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gu-num{font-size:11px;font-weight:700;color:var(--ac);letter-spacing:.6px;white-space:nowrap}
.gu-barra{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.gu-barra i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#38BDF8,#A855F7);transition:width .35s}
.gu-tit{font-size:16.5px;font-weight:800;line-height:1.3;margin-bottom:7px;letter-spacing:-.2px}
.gu-txt{font-size:13.5px;color:var(--mu);line-height:1.65}
.gu-pie{display:flex;align-items:center;gap:8px;margin-top:16px}
@media(max-width:760px){
  .gu-globo{width:calc(100vw - 32px);left:16px !important}
}
@media(prefers-reduced-motion:reduce){
  .gu-foco,.gu-globo{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   EVENTOS · la sección pública
   Con sus palabras: "más bonito, más profesional, más llamativo, con
   efectos 3D, algo que diga WOOOW". El lenguaje es el de sus videos
   (estilo Aurora): cielo con auroras y estrellas en 3D, títulos
   gigantes con degradado, la tarjeta de la fecha flotando en 3D, la
   cuenta regresiva en fichas de cristal, el podio con barras metálicas
   y la cinta de datos que corre abajo.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes evxDeriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.12)}100%{transform:translate(-40px,30px) scale(.95)}}
@keyframes evxFlota{0%,100%{transform:var(--t,none) translateY(0)}50%{transform:var(--t,none) translateY(-14px)}}
@keyframes evxSheen{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(220%) skewX(-18deg)}}
@keyframes evxAnillo{0%{transform:rotateX(72deg) rotateZ(0)}100%{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes evxLatido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes evxTic{0%{transform:translateY(-10px);opacity:.15}100%{transform:none;opacity:1}}
@keyframes evxBarra{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes evxRayas{0%{background-position:0 0}100%{background-position:28px 0}}
@keyframes evxMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes evxCrece{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes evxSube{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@keyframes evxCorazon{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1;transform:translateY(-14px) scale(1)}100%{opacity:0;transform:translateY(-110px) scale(.9)}}
@keyframes evxBrillo{0%,100%{filter:drop-shadow(0 0 10px rgba(245,158,11,.35))}50%{filter:drop-shadow(0 0 28px rgba(245,158,11,.75))}}
@keyframes evxGiro{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ── El cielo: auroras y estrellas ── */
.evx{position:relative;overflow:hidden;isolation:isolate}
.evx-cielo{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.evx-cielo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(56,189,248,.12),transparent 55%),linear-gradient(180deg,transparent 60%,rgba(2,6,23,.8))}
.evx-aurora{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 68%);opacity:.55;filter:blur(40px);animation:evxDeriva 20s ease-in-out infinite alternate;will-change:transform}
.evx-estrellas{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.evx-cont{position:relative;z-index:1}

/* ── Texto ── */
.evx-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;color:var(--ac)}
.evx-kicker::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ac),var(--pu))}
.evx-h1{font-size:clamp(36px,5.2vw,64px);font-weight:900;line-height:1.02;letter-spacing:-2.2px;margin:14px 0 14px}
.evx-h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.08;letter-spacing:-1.2px;margin:12px 0 8px}
.evx-grad{background:linear-gradient(92deg,#7DD3FC 0%,#A78BFA 48%,#F472B6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.evx-grad.verde{background:linear-gradient(92deg,#34D399,#22D3EE);-webkit-background-clip:text;background-clip:text}
.evx-grad.fuego{background:linear-gradient(92deg,#F472B6,#FB923C);-webkit-background-clip:text;background-clip:text}
.evx-grad.oro{background:linear-gradient(180deg,#FDE68A,#F59E0B);-webkit-background-clip:text;background-clip:text}
.evx-sub{font-size:16.5px;line-height:1.65;color:var(--mu);max-width:560px}
.evx-sub b{color:var(--tx)}
.evx-sec{padding-top:26px;padding-bottom:34px}
.evx-sec-cab{margin-bottom:22px}
.evx-sec-cab p{color:var(--mu);font-size:14.5px;line-height:1.6;margin-top:6px;max-width:620px}

/* ── Chips ── */
.ev-chips{display:flex;gap:8px;flex-wrap:wrap}
.ev-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.2px;color:var(--tx);white-space:nowrap;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(6px)}
.ev-chip.gratis{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.45);color:#6EE7B7;box-shadow:0 0 18px rgba(16,185,129,.18)}
.ev-chip.vivo{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);color:#FCA5A5;box-shadow:0 0 22px rgba(239,68,68,.35)}
.ev-chip.lleno{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.45);color:#FCD34D}
.ev-chip.fin{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.3);color:var(--mu)}
.ev-chip.oro{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:#FCD34D}
.ev-punto{width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 10px #EF4444;animation:evxLatido 1.3s infinite}

/* ── Botones ── */
.evx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 32px;border-radius:16px;border:0;cursor:pointer;font-family:inherit;font-weight:900;font-size:16.5px;letter-spacing:-.2px;color:#0B1120;text-decoration:none;overflow:hidden;background:linear-gradient(92deg,#FDE68A,#F59E0B 55%,#F97316);box-shadow:0 16px 36px rgba(249,115,22,.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
.evx-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 24px 48px rgba(249,115,22,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.evx-btn:active{transform:translateY(1px)}
.evx-btn::after{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-18deg);animation:evxSheen 3.4s ease-in-out infinite;pointer-events:none}
.evx-btn.azul{background:linear-gradient(92deg,#38BDF8,#6366F1 60%,#A855F7);color:#fff;box-shadow:0 16px 36px rgba(99,102,241,.42)}
.evx-btn.fantasma{background:rgba(255,255,255,.06);color:var(--tx);border:1px solid rgba(255,255,255,.16);box-shadow:none;backdrop-filter:blur(6px)}
.evx-btn.fantasma::after{display:none}
.evx-btn.chico{padding:12px 20px;font-size:14px;border-radius:13px}

/* ── El escenario 3D de la fecha ── */
.evx-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:22px 0 8px}
.evx-escena{position:relative;height:440px;perspective:1300px;perspective-origin:50% 42%}
.evx-escena-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.evx-anillo{position:absolute;left:50%;top:52%;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;border:1px solid rgba(56,189,248,.35);box-shadow:inset 0 0 90px rgba(56,189,248,.12),0 0 70px rgba(168,85,247,.16);transform:rotateX(72deg);animation:evxAnillo 16s linear infinite}
.evx-anillo.b{width:520px;height:520px;margin:-260px 0 0 -260px;border-color:rgba(168,85,247,.22);animation-duration:26s;animation-direction:reverse}
.evx-anillo i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#7DD3FC;box-shadow:0 0 16px #38BDF8}
.evx-fecha{--t:translateZ(70px) rotateY(-9deg) rotateX(5deg);position:absolute;left:50%;top:50%;width:256px;margin:-158px 0 0 -128px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1E2A4A,#0B1224);border:1px solid rgba(255,255,255,.16);box-shadow:0 46px 90px rgba(0,0,0,.65),0 0 70px rgba(236,72,153,.2),inset 0 1px 0 rgba(255,255,255,.12);animation:evxFlota 6.5s ease-in-out infinite;transform:var(--t)}
.evx-fecha .cab{background:linear-gradient(90deg,#EC4899,#EF4444);padding:12px 10px;text-align:center;font-size:12px;font-weight:900;letter-spacing:2.6px;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.evx-fecha .dia{font-size:122px;font-weight:900;line-height:1;letter-spacing:-7px;text-align:center;margin:12px 0 0;color:#F8FAFC;text-shadow:0 12px 30px rgba(0,0,0,.45)}
.evx-fecha .mes{text-align:center;font-size:27px;font-weight:900;letter-spacing:-.5px;color:#F472B6;margin-top:-6px}
.evx-fecha .hora{margin:14px 14px 16px;background:rgba(2,6,23,.6);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;text-align:center;font-size:21px;font-weight:900;letter-spacing:-.3px;display:flex;align-items:center;justify-content:center;gap:8px}
.evx-fecha .hora small{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--mu);text-transform:uppercase}
.evx-flot{position:absolute;border-radius:16px;padding:11px 15px;background:rgba(15,23,42,.9);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);box-shadow:0 22px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);font-weight:900;font-size:17px;letter-spacing:-.3px;white-space:nowrap;animation:evxFlota 5.4s ease-in-out infinite;transform:var(--t)}
.evx-flot small{display:block;font-size:9.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mu);margin-top:2px}
.evx-flot.a{--t:translateZ(120px);left:-4px;top:54px;animation-delay:-1.6s;color:#6EE7B7}
.evx-flot.b{--t:translateZ(95px);right:-8px;top:118px;animation-delay:-3.1s;color:#FCD34D}
.evx-flot.c{--t:translateZ(130px);left:14px;bottom:34px;animation-delay:-2.3s;color:#7DD3FC}
.evx-flot.d{--t:translateZ(150px);right:10px;bottom:10px;animation-delay:-4s;color:#F9A8D4}
.evx-flot .e{font-size:20px;margin-right:6px}
.evx-luz{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.28),rgba(168,85,247,.16) 45%,transparent 70%);filter:blur(24px);transform:translateZ(-40px)}

/* ── La cuenta regresiva: fichas de cristal ── */
.ev-reloj{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:540px}
.ev-caja{position:relative;border-radius:20px;padding:20px 6px 15px;text-align:center;background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(2,6,23,.92));border:1px solid rgba(255,255,255,.13);box-shadow:0 22px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);overflow:hidden}
.ev-caja::before{content:'';position:absolute;left:10px;right:10px;top:50%;height:1px;background:rgba(255,255,255,.09)}
.ev-caja::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 60px at 50% 0%,rgba(56,189,248,.18),transparent 70%);pointer-events:none}
.ev-caja b{display:block;font-size:46px;font-weight:900;line-height:1;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#FFFFFF,#93C5FD);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.ev-caja b.tic{animation:evxTic .35s ease}
.ev-caja span{display:block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--mu)}

/* ── Los cupos ── */
.ev-cupos{position:relative;border-radius:22px;padding:18px 20px;background:linear-gradient(180deg,rgba(30,41,59,.75),rgba(2,6,23,.75));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.ev-num{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;line-height:1}
.ev-barra{position:relative;height:14px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 9px;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.ev-barra i{position:relative;display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#F59E0B,#EF4444,#EC4899,#F59E0B);background-size:200% 100%;animation:evxBarra 3.5s linear infinite;box-shadow:0 0 18px rgba(239,68,68,.55);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ev-barra i::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 7px,transparent 7px 14px);background-size:28px 100%;animation:evxRayas .9s linear infinite}
.ev-cupos.casi .ev-barra i{background:linear-gradient(90deg,#EF4444,#EC4899,#EF4444);background-size:200% 100%}
.ev-cupos.lleno .ev-barra i{background:linear-gradient(90deg,#64748B,#94A3B8);animation:none;box-shadow:none}

/* ── La cinta que corre ── */
.evx-marq{overflow:hidden;margin:26px 0 0;padding:13px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.45);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.evx-marq-track{display:flex;gap:44px;width:max-content;animation:evxMarq 28s linear infinite;white-space:nowrap}
.evx-marq-track span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:var(--tx)}
.evx-marq-track span i{font-style:normal;color:var(--mu);font-weight:700}
.evx-marq:hover .evx-marq-track{animation-play-state:paused}

/* ── Tarjetas de cristal (la lista) ── */
.ev-card{position:relative;border-radius:24px;overflow:hidden;cursor:pointer;background:linear-gradient(180deg,rgba(30,41,59,.72),rgba(15,23,42,.92));border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;display:flex;flex-direction:column;transform-style:preserve-3d}
.ev-card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.18),transparent 45%)}
.ev-card:hover{border-color:rgba(56,189,248,.5);box-shadow:0 36px 70px rgba(0,0,0,.55),0 0 50px rgba(56,189,248,.16)}
.ev-card:hover::before{opacity:1}
.ev-card.pasado{filter:saturate(.7)}
.ev-card .tapa{position:relative;height:156px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 25% 30%,rgba(56,189,248,.35),transparent 55%),radial-gradient(circle at 78% 72%,rgba(168,85,247,.45),transparent 55%),#0B1224}
.ev-card .tapa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ev-card:hover .tapa img{transform:scale(1.06)}
.ev-card .tapa .halo{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.4),transparent 70%);filter:blur(12px)}
.ev-card .tapa .emo{position:relative;font-size:64px;filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));animation:evxFlota 5s ease-in-out infinite}
.ev-card .tapa .estado{position:absolute;left:12px;top:12px;z-index:1}
.ev-card .cuerpo{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.ev-fecha-caja{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;border-radius:16px;padding:8px 10px;background:linear-gradient(180deg,#EC4899,#8B5CF6);box-shadow:0 12px 26px rgba(236,72,153,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.ev-fecha-caja b{font-size:25px;font-weight:900;line-height:1;color:#fff}
.ev-fecha-caja span{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.8px;margin-top:3px}
.ev-card .ir{margin-top:auto;padding-top:8px;color:var(--ac);font-size:13px;font-weight:900;display:flex;align-items:center;gap:6px}
.ev-card .ir::after{content:'›';font-size:18px;transition:transform .2s}
.ev-card:hover .ir::after{transform:translateX(4px)}

/* ── Cristal genérico ── */
.evx-vidrio{position:relative;border-radius:24px;padding:26px 28px;background:linear-gradient(180deg,rgba(30,41,59,.62),rgba(15,23,42,.85));border:1px solid rgba(255,255,255,.11);box-shadow:0 24px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.evx-vidrio.brillo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--mx,30%) var(--my,20%),rgba(56,189,248,.12),transparent 50%)}

/* ── El podio metálico ── */
.ev-podio{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;align-items:end;max-width:700px;margin:0 auto;perspective:1000px}
.ev-lugar{text-align:center;transform-style:preserve-3d;animation:evxSube .8s ease both}
.ev-lugar.dos{animation-delay:.1s}.ev-lugar.tres{animation-delay:.2s}
.ev-lugar .m{font-size:46px;line-height:1;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));animation:evxFlota 4.2s ease-in-out infinite;display:inline-block}
.ev-lugar.uno .m{font-size:58px;animation-delay:-1s}
.ev-lugar .v{font-size:36px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin:8px 0 12px;color:#F8FAFC}
.ev-lugar.uno .v{font-size:52px;background:linear-gradient(180deg,#FDE68A,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent;animation:evxBrillo 2.6s ease-in-out infinite}
.ev-lugar .p{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mu)}
.ev-lugar .bloque{position:relative;border-radius:18px 18px 8px 8px;overflow:hidden;margin-top:10px;transform-origin:bottom;animation:evxCrece 1.1s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 30px 50px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.55)}
.ev-lugar .bloque::before{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);animation:evxSheen 4.2s ease-in-out infinite}
.ev-lugar .bloque .et{position:absolute;left:0;right:0;top:15px;text-align:center;font-size:13px;font-weight:900;color:#0B1120;letter-spacing:.2px}
.ev-lugar .bloque .det{position:absolute;left:8px;right:8px;top:36px;text-align:center;font-size:10.5px;font-weight:700;color:rgba(11,17,32,.75);line-height:1.3}
.ev-lugar .bloque .gan{position:absolute;left:6px;right:6px;bottom:12px;text-align:center;font-size:12px;font-weight:900;color:#0B1120;background:rgba(255,255,255,.55);border-radius:10px;padding:5px 6px;margin:0 4px}
.ev-lugar.uno .bloque{height:200px;background:linear-gradient(180deg,#FDE68A 0%,#F59E0B 50%,#B45309 100%);animation-delay:.05s}
.ev-lugar.dos .bloque{height:138px;background:linear-gradient(180deg,#F8FAFC 0%,#94A3B8 55%,#475569 100%);animation-delay:.2s}
.ev-lugar.dos .bloque::before{animation-delay:1.3s}
.ev-lugar.tres .bloque{height:104px;background:linear-gradient(180deg,#FDBA74 0%,#C2410C 55%,#7C2D12 100%);animation-delay:.35s}
.ev-lugar.tres .bloque::before{animation-delay:2.4s}
.ev-lugar.tres .bloque .det,.ev-lugar.dos .bloque .det{display:none}
.evx-premios-mas{max-width:700px;margin:16px auto 0;display:grid;gap:8px}

/* ── Pasos, reglas, redes ── */
.evx-paso{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 20px 20px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(30,41,59,.6),rgba(15,23,42,.85));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 36px rgba(0,0,0,.35);transition:transform .2s,border-color .2s}
.evx-paso:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.45)}
.evx-paso .n{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#0B1120;background:linear-gradient(135deg,#7DD3FC,#A78BFA);box-shadow:0 10px 22px rgba(99,102,241,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.evx-paso h4{font-size:15.5px;font-weight:900;margin:2px 0 5px}
.evx-paso p{font-size:13.5px;color:var(--mu);line-height:1.6}
.ev-regla{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);font-size:14.5px;line-height:1.6;color:var(--tx);transition:background .2s,border-color .2s}
.ev-regla:hover{background:rgba(56,189,248,.06);border-color:rgba(56,189,248,.3)}
.ev-regla i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(168,85,247,.28));border:1px solid rgba(56,189,248,.4);color:#BAE6FD;font-size:11.5px;font-weight:900;font-style:normal;display:flex;align-items:center;justify-content:center;margin-top:2px}
.evx-reglas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ev-redes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ev-red{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:19px 16px;border-radius:18px;font-weight:900;font-size:15.5px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.45);transition:transform .14s,box-shadow .14s;transform:translateY(0)}
.ev-red::after{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-18deg);animation:evxSheen 5s ease-in-out infinite}
.ev-red:hover{transform:translateY(-4px);box-shadow:0 12px 0 rgba(0,0,0,.35),0 30px 50px rgba(0,0,0,.5)}
.ev-red:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.35),0 10px 20px rgba(0,0,0,.4)}
.ev-red.tiktok{background:linear-gradient(135deg,#25F4EE,#0F172A 50%,#FE2C55)}
.ev-red.instagram{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.ev-red.facebook{background:linear-gradient(135deg,#1877F2,#0B5FCC)}
.ev-red.youtube{background:linear-gradient(135deg,#FF0000,#B91C1C)}
.ev-red.twitch{background:linear-gradient(135deg,#9146FF,#6441A5)}

/* ── La pantalla «EN VIVO» ── */
.evx-live{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:radial-gradient(circle at 50% 65%,rgba(168,85,247,.4),transparent 58%),radial-gradient(circle at 20% 20%,rgba(56,189,248,.25),transparent 50%),#070B18;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.evx-live .badge{position:absolute;left:16px;top:14px;background:#EF4444;color:#fff;font-weight:900;font-size:12px;letter-spacing:1.6px;padding:7px 13px;border-radius:999px;display:flex;align-items:center;gap:7px;box-shadow:0 0 24px rgba(239,68,68,.7)}
.evx-live .badge i{width:8px;height:8px;border-radius:50%;background:#fff;animation:evxLatido 1.2s infinite}
.evx-live .ojos{position:absolute;right:16px;top:14px;background:rgba(2,6,23,.7);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:12px;padding:6px 11px;border-radius:999px}
.evx-live .centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));animation:evxFlota 5s ease-in-out infinite}
.evx-live .chat{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:5px}
.evx-live .chat span{background:rgba(2,6,23,.6);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 11px;font-size:11.5px;color:#E2E8F0;width:max-content;backdrop-filter:blur(4px)}
.evx-live .corazones{position:absolute;right:22px;bottom:14px;width:40px;height:160px;pointer-events:none}
.evx-live .corazones b{position:absolute;bottom:0;left:0;font-size:22px;animation:evxCorazon 2.8s ease-in infinite;opacity:0}
.evx-live .corazones b:nth-child(2){animation-delay:.9s;left:12px}
.evx-live .corazones b:nth-child(3){animation-delay:1.8s;left:-8px}
.evx-live .corazones b:nth-child(4){animation-delay:2.3s;left:6px}

/* ── El estado de la inscripción ── */
.evx-estado{border-radius:22px;padding:24px 26px;text-align:center;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(30,41,59,.7),rgba(15,23,42,.9));box-shadow:0 22px 44px rgba(0,0,0,.4)}
.evx-estado.ok{border-color:rgba(16,185,129,.5);box-shadow:0 22px 44px rgba(0,0,0,.4),0 0 50px rgba(16,185,129,.18)}
.evx-estado.lleno{border-color:rgba(245,158,11,.5);box-shadow:0 22px 44px rgba(0,0,0,.4),0 0 50px rgba(245,158,11,.16)}
.evx-estado .t{font-size:22px;font-weight:900;letter-spacing:-.4px;margin-bottom:6px}
.evx-estado p{font-size:14px;color:var(--mu);line-height:1.65}

/* ── El panel de eventos: tarjetas con la misma cara que la página ── */
.adm-ev{position:relative;border-radius:22px;overflow:hidden;background:var(--s);border:1px solid var(--br);box-shadow:0 14px 34px rgba(0,0,0,.35);transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.adm-ev:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.45);box-shadow:0 22px 44px rgba(0,0,0,.45)}
.adm-ev .tapa{position:relative;height:104px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 25% 30%,rgba(56,189,248,.35),transparent 55%),radial-gradient(circle at 78% 72%,rgba(168,85,247,.45),transparent 55%),#0B1224}
.adm-ev .tapa img{width:100%;height:100%;object-fit:cover;display:block}
.adm-ev .tapa .emo{font-size:46px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
/* 🧪 Simulacro: todo lo suyo va en ámbar, para que nunca se confunda con un torneo de verdad */
.adm-ev.sim{border-color:rgba(245,158,11,.55)}
.adm-ev.sim .tapa{background:repeating-linear-gradient(135deg,rgba(245,158,11,.16) 0 14px,rgba(245,158,11,.05) 14px 28px),#1A1305}
.sim-bdg{background:rgba(245,158,11,.16)!important;color:#FBBF24!important;border:1px solid rgba(245,158,11,.45)!important}
.sim-caja{border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.08);border-radius:14px;padding:12px 14px;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sim-caja>span{flex:1;min-width:240px;font-size:13px;line-height:1.55}
.sim-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:9px;border:1px dashed rgba(245,158,11,.7);background:rgba(245,158,11,.1);color:#FBBF24;font:800 11.5px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.sim-btn:hover{background:rgba(245,158,11,.2)}
.sim-btn:disabled{opacity:.5;cursor:default}
.sim-fila{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sim-n{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sim-n button{min-width:52px;height:36px;border-radius:10px;border:1px solid var(--br);background:var(--s2);color:var(--tx);font:800 13.5px Inter,sans-serif;cursor:pointer}
.sim-n button.on{background:rgba(245,158,11,.18);border-color:#F59E0B;color:#FBBF24}
.sim-sec{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mu);margin:16px 0 8px}
.sim-op{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--br);border-radius:11px;margin-bottom:6px;cursor:pointer;font-size:13.5px;line-height:1.45}
.sim-op input{margin-top:3px;accent-color:#F59E0B}
.sim-op small{display:block;color:var(--mu);font-size:12px}
#sim-cuerpo select,#sim-cuerpo input[type=number]{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:9px 12px;color:var(--tx);font:600 13.5px Inter,sans-serif;outline:none}
#sim-cuerpo input[type=number]{height:36px;padding:0 10px}
#sim-cuerpo select:focus,#sim-cuerpo input[type=number]:focus{border-color:#F59E0B}
.sim-pie{position:sticky;bottom:-24px;margin:14px -24px -24px;padding:12px 24px 20px;background:linear-gradient(to bottom,transparent,var(--s) 28%);z-index:2}
/* Los buscadores y filtros de 📊 Datos del evento, oscuros como el resto del panel */
#evd-cuerpo select,#evd-cuerpo input[type=search]{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:8px 12px;color:var(--tx);font:500 13px Inter,sans-serif;outline:none}
#evd-cuerpo select:focus,#evd-cuerpo input[type=search]:focus{border-color:var(--ac)}
/* Las preguntas («¿seguro?», «escribe…») salen siempre por encima, también sobre el 🎥 modo en vivo
   (el modo en vivo esconde todo lo demás de la página, menos estas dos) */
#mo-confirmar,#mo-pedir{z-index:9700}
/* ✅ Verificar la participación */
.vpa-caja{border:1px solid rgba(16,185,129,.4);background:rgba(16,185,129,.06);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.vpa-caja.abierta{border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.07)}
.vpa-caja.gris{border-color:var(--br);background:var(--s2)}
.vpa-t{font-size:14.5px;font-weight:900;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vpa-s{font-size:12.5px;color:var(--mu);line-height:1.6;margin-top:4px}
.vpa-vivo{display:inline-flex;align-items:center;gap:6px;font:800 10.5px Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#FBBF24;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.45);border-radius:999px;padding:3px 9px}
.vpa-vivo i{width:7px;height:7px;border-radius:50%;background:#F59E0B;animation:vpaLatido 1.2s infinite}
@keyframes vpaLatido{0%,100%{opacity:1}50%{opacity:.25}}
.vpa-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px;margin:12px 0 10px}
.vpa-cifras>div{background:var(--s);border:1px solid var(--br);border-radius:12px;padding:10px 12px}
.vpa-cifras b{display:block;font-size:26px;font-weight:900;line-height:1.1}
.vpa-cifras span{font-size:11.5px;color:var(--mu);font-weight:700}
.vpa-cifras .si b{color:var(--gn)}.vpa-cifras .no b{color:var(--rd)}.vpa-cifras .visto b{color:#FBBF24}.vpa-cifras .pend b{color:var(--mu)}
.vpa-barra{height:10px;border-radius:999px;background:var(--s);border:1px solid var(--br);overflow:hidden;display:flex;margin:2px 0 8px}
.vpa-barra i{display:block;height:100%;transition:width .4s}
.vpa-si-no{font-size:13px;line-height:1.6;margin:6px 0 2px}
.vpa-grupo{margin-top:9px}
.vpa-grupo>b{font-size:12px;color:var(--mu);font-weight:800}
.vpa-lista{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.vpa-lista span{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--s);border:1px solid var(--br)}
.vpa-chip{font-size:11.5px;font-weight:800;white-space:nowrap}
.vpa-bdg{background:rgba(245,158,11,.15)!important;color:#FBBF24!important;border:1px solid rgba(245,158,11,.45)!important;cursor:pointer}
.evv-envivo.sim{background:#B45309;box-shadow:0 0 22px rgba(245,158,11,.55)}
.adm-ev .tapa .est{position:absolute;left:10px;top:10px;font-size:11px;font-weight:900;letter-spacing:.4px;padding:5px 10px;border-radius:999px;background:rgba(2,6,23,.75);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.adm-ev .tapa .fecha{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;align-items:center;min-width:48px;border-radius:12px;padding:5px 8px;background:linear-gradient(180deg,#EC4899,#8B5CF6);box-shadow:0 8px 18px rgba(236,72,153,.35)}
.adm-ev .tapa .fecha b{font-size:18px;font-weight:900;line-height:1;color:#fff}
.adm-ev .tapa .fecha span{font-size:9px;font-weight:800;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.adm-ev .cuerpo{padding:14px 16px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.adm-ev .barra{height:10px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.adm-ev .barra i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#F59E0B,#EF4444,#EC4899);transition:width .6s}
.adm-ev .barra.lleno i{background:linear-gradient(90deg,#64748B,#94A3B8)}
/* ── Diseños del vendedor: los dos caminos ── */
.vdis-caminos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 12px}
.vdis-camino{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;min-height:236px;padding:26px 24px;border-radius:24px;border:1px solid rgba(255,255,255,.16);cursor:pointer;color:#fff;font-family:'Inter',sans-serif;transition:transform .18s,box-shadow .18s;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.vdis-camino.crear{background:radial-gradient(120% 100% at 0% 0%,#EC4899 0%,rgba(236,72,153,0) 55%),radial-gradient(120% 100% at 100% 100%,#6366F1 0%,rgba(99,102,241,0) 60%),linear-gradient(135deg,#7C3AED,#1E1B4B)}
.vdis-camino.hechos{background:radial-gradient(120% 100% at 100% 0%,#22D3EE 0%,rgba(34,211,238,0) 55%),radial-gradient(120% 100% at 0% 100%,#10B981 0%,rgba(16,185,129,0) 60%),linear-gradient(135deg,#0EA5E9,#0F172A)}
.vdis-camino:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(0,0,0,.45)}
.vdis-camino:focus-visible{outline:3px solid #FDE68A;outline-offset:3px}
.vdis-camino::after{content:'';position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.vdis-camino .ic{font-size:46px;line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.vdis-camino .t{font-size:21px;font-weight:900;letter-spacing:-.3px;line-height:1.2}
.vdis-camino .s{font-size:13px;line-height:1.55;color:rgba(255,255,255,.86);max-width:380px}
.vdis-camino .ir{margin-top:auto;display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.38);font-weight:800;font-size:13px}
.vdis-camino.cargando{opacity:.8;cursor:progress}
.vdis-nota{font-size:12.5px;color:var(--mu);margin-bottom:10px}
/* 🕘 El historial de descargas */
.vdis-hist{margin-top:14px}
.vdis-hist .pan-d{display:block;font-size:12px;font-weight:500;color:var(--mu);margin-top:3px;letter-spacing:0;text-transform:none}
.vdis-hist-vacio{padding:18px 6px;text-align:center;color:var(--mu);font-size:13px}
.vdis-hist-it{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px;border-radius:14px;border:1px solid var(--br);background:var(--bg)}
.vdis-hist-it+.vdis-hist-it{margin-top:8px}
.vdis-hist-it .img{width:72px;height:72px;border-radius:10px;overflow:hidden;background:#0B1224;display:block;border:1px solid var(--br)}
.vdis-hist-it .img img{width:100%;height:100%;object-fit:cover;display:block}
.vdis-hist-it .dat{min-width:0;display:flex;flex-direction:column;gap:3px}
.vdis-hist-it .dat b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdis-hist-it .dat small{font-size:12px;color:var(--mu)}
.vdis-hist-it .dias{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 14px;border-radius:12px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);white-space:nowrap;text-align:center}
.vdis-hist-it .dias b{font-size:13px;color:#6EE7B7}
.vdis-hist-it .dias small{font-size:11px;color:var(--mu)}
.vdis-hist-it .dias.ambar{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4)}
.vdis-hist-it .dias.ambar b{color:#FCD34D}
.vdis-hist-it .dias.rojo{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.45)}
.vdis-hist-it .dias.rojo b{color:#FCA5A5}
.vdis-hist-it .acc{display:flex;gap:6px;justify-content:flex-end}
.vdis-hist-it .acc .btn{white-space:nowrap;text-decoration:none}
.vdis-hist-borrar:hover{border-color:var(--rd)!important;color:#FCA5A5!important}
@media(max-width:760px){
  .vdis-hist .pan-t{flex-wrap:wrap;row-gap:2px}
  .vdis-hist .pan-t .pan-d{flex-basis:100%}
  .vdis-hist-it{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"img dat" "dias dias" "acc acc";gap:10px}
  .vdis-hist-it .img{grid-area:img;width:64px;height:64px}
  .vdis-hist-it .dat{grid-area:dat}
  .vdis-hist-it .dias{grid-area:dias;flex-direction:row;justify-content:space-between;gap:8px}
  .vdis-hist-it .acc{grid-area:acc;display:grid;grid-template-columns:1fr 1fr}
  .vdis-hist-it .acc .btn{justify-content:center;min-height:40px}
}
@media(max-width:700px){.vdis-caminos{grid-template-columns:1fr;gap:12px}.vdis-camino{min-height:176px;padding:22px 20px}.vdis-camino .t{font-size:19px}.vdis-camino .ic{font-size:38px}}
/* ── 🎥 Streamers: las pantallas para sus lives ── */
.str-plats{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.str-plat{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:1px solid var(--br);background:var(--s);color:var(--tx);font:800 14px Inter,sans-serif;cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .15s}
.str-plat:hover{transform:translateY(-1px);border-color:var(--c)}
.str-plat.activa{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset,0 8px 22px rgba(0,0,0,.25)}
.str-plat .ic{font-size:17px;line-height:1}
.str-plat .pr{font-size:10px;font-weight:800;color:var(--mu);border:1px solid var(--br);border-radius:999px;padding:1px 7px}
.str-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.str-yo .fr{margin-bottom:12px}
.str-arroba{display:flex;align-items:center;border:1px solid var(--br);border-radius:var(--r);background:var(--bg);overflow:hidden}
.str-arroba>span{padding:0 4px 0 12px;color:var(--mu);font-weight:800}
.str-arroba input{border:0!important;background:transparent!important;padding-left:2px!important;flex:1;min-width:0;box-shadow:none!important}
.str-arroba.mal{border-color:var(--rd)}
.str-u-guardar{flex:none;margin:4px;height:32px;padding:0 12px;border-radius:9px;border:1px solid transparent;background:linear-gradient(135deg,#38BDF8,#6366F1);color:#fff;font:800 12.5px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.str-u-guardar:disabled{opacity:.45;cursor:default}
.str-u-guardar.ok{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.45);color:#6EE7B7;opacity:1}
.str-ayuda{font-size:11.5px;color:var(--mu);margin-top:5px;line-height:1.45}
.str-ayuda.mal{color:var(--rd)}
.str-codigo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--br);font-size:13px}
.str-codigo b{font:900 16px 'Exo 2',Inter,sans-serif;letter-spacing:1px;color:var(--am)}
.str-check{display:flex!important;align-items:center;gap:8px;font-size:13px!important;cursor:pointer;margin-top:8px;text-transform:none!important;letter-spacing:0!important;font-weight:600!important}
.str-check input{width:16px;height:16px;accent-color:var(--ac)}
.str-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.str-cat-b{padding:7px 13px;border-radius:999px;border:1px solid var(--br);background:var(--s2);color:var(--tx);font:700 12.5px Inter,sans-serif;cursor:pointer}
.str-cat-b.activa{border-color:var(--ac);background:rgba(56,189,248,.14)}
.str-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px}
.str-card{display:flex;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--br);background:var(--s)}
.str-prev{flex:0 0 auto;width:171px;height:304px;border-radius:14px;overflow:hidden;background:#070D1A;border:1px solid var(--br);position:relative}
.str-prev iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.str-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px}
.str-etq{font-size:11px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:1px}
.str-t{font-size:17px;font-weight:900;line-height:1.25}
.str-d{font-size:13px;color:var(--mu);line-height:1.55}
.str-medida{font-size:12px;color:var(--mu)}
.str-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.str-como ol{margin:6px 0 0 20px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.55}
.str-pronto{text-align:center;padding:40px 20px}
.str-pronto .ic{font-size:44px;line-height:1}
.str-pronto .t{font-size:18px;font-weight:900;margin:10px 0 6px}
.str-pronto .s{color:var(--mu);font-size:13.5px;max-width:560px;margin:0 auto 16px;line-height:1.65}
.str-pronto .s b{color:var(--tx)}
.str-pronto .b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.str-plat.pronto{opacity:.62}
.str-plat.pronto.activa,.str-plat.pronto:hover{opacity:1}
.str-plat.pronto .pr{color:#FDE68A;border-color:rgba(253,230,138,.45)}
.str-obs-nota{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:2px;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--mu);background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.28)}
.str-obs-nota .ic{font-size:16px;line-height:1}
.str-obs-nota b{color:var(--tx)}
/* En el teléfono, las siete en dos columnas (con «Próximamente» ya no cabían de a dos y quedaban una debajo de otra) */
@media(max-width:560px){
  .str-plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .str-plat{flex-wrap:wrap;row-gap:4px;padding:10px 12px;font-size:13.5px;min-width:0}
  .str-plat .pr{font-size:9.5px;padding:1px 6px}
  .str-obs-nota{grid-column:1/-1}
}
.str-formato{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.str-fmt{flex:1 1 240px;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid var(--br);background:var(--s);color:var(--tx);cursor:pointer;text-align:left;font:700 13.5px Inter,sans-serif;transition:border-color .15s,box-shadow .15s}
.str-fmt .ic{font-size:24px;line-height:1}
.str-fmt small{display:block;font-size:11.5px;font-weight:600;color:var(--mu);margin-top:3px;line-height:1.35}
.str-fmt:hover{border-color:var(--ac)}
.str-fmt.activa{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset;background:rgba(56,189,248,.10)}
.str-lista.h{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.str-card.h{flex-direction:column}
.str-card.h .str-prev{width:100%;height:auto;aspect-ratio:16/9}
.str-juego{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:14px;border:1px solid var(--br);background:var(--bg);color:var(--tx);cursor:pointer;text-align:left;font:inherit}
.str-juego:hover{border-color:var(--ac)}
.str-juego.vacio{border-style:dashed}
.str-jmini,.stj-img,.stj-pimg{position:relative;flex:none;aspect-ratio:16/9;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,hsl(var(--t,200),70%,28%),hsl(calc(var(--t,200) + 50),80%,14%))}
.str-jmini{width:96px;font-size:26px}
.stj-img{width:100%;font-size:34px}
.stj-pimg{width:88px;font-size:24px}
.str-jmini img,.stj-img img,.stj-pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.str-juego-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.str-juego-t b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.str-juego-t small{font-size:12px;color:var(--mu)}
.str-juego-fl{font-size:22px;color:var(--mu)}
.str-quitar{background:none;border:0;color:var(--mu);font:600 12px Inter,sans-serif;cursor:pointer;margin-top:5px;padding:0}
.str-quitar:hover{color:var(--rd)}
.str-aviso-j{font-size:12.5px;color:var(--am);line-height:1.45}
.str-claves{margin:6px 0 0 18px;display:flex;flex-direction:column;gap:5px;font-size:13px;list-style:disc}
.stj-barra{display:flex;gap:8px;margin-bottom:10px}
.stj-barra input{flex:1;min-width:0}
.stj-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.stj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stj-j{position:relative;border:1px solid var(--br);border-radius:14px;padding:6px;background:var(--s2);cursor:pointer;transition:border-color .12s,transform .12s}
.stj-j:hover{border-color:var(--ac);transform:translateY(-1px)}
.stj-j.elegido{border-color:var(--gn);box-shadow:0 0 0 1px var(--gn) inset}
.stj-n{font-size:13px;font-weight:800;margin-top:6px;line-height:1.25}
.stj-pl{font-size:11px;color:var(--mu);margin-top:2px}
.stj-adm{position:absolute;top:10px;right:10px;display:flex;gap:4px}
.stj-adm button{border:0;border-radius:8px;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;padding:3px 6px;font-size:13px}
.stj-ped{display:flex;flex-direction:column;gap:8px}
.stj-p{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--br);border-radius:14px;background:var(--s2);flex-wrap:wrap}
.stj-pt{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px}
.stj-pt b{font-size:14px}
.stj-pt small{font-size:12px;color:var(--mu)}
.stj-pv{font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;background:rgba(56,189,248,.14)}
.stj-ya{font-size:12.5px;color:var(--gn);font-weight:700}
.stj-vacio{text-align:center;padding:30px;color:var(--mu)}
.stj-nota{font-size:12px;color:var(--mu);margin-top:10px;line-height:1.5}
.stp-plats{display:flex;gap:8px;flex-wrap:wrap}
.stp-plats label{display:flex!important;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--br);border-radius:12px;cursor:pointer;
  font-size:13px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;margin:0!important}
.stp-plats input{width:15px;height:15px;accent-color:var(--ac)}
.stp-foto{position:relative;width:100%;aspect-ratio:16/9;border:1px dashed var(--br);border-radius:14px;display:flex;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;overflow:hidden;color:var(--mu);font-weight:700;font-size:14px;line-height:1.5}
.stp-foto small{font-weight:600;font-size:11.5px}
.stp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stp-foto .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
@media(max-width:1100px){.str-grid{grid-template-columns:1fr}}
@media(max-width:560px){.str-lista{grid-template-columns:1fr}.str-card{flex-direction:column;align-items:center}.str-prev{width:216px;height:384px}.str-info{width:100%}
  .str-lista.h{grid-template-columns:1fr}.str-card.h{align-items:stretch}.str-card.h .str-prev{width:100%;height:auto}}
/* ── Diseños del admin: los fondos (las cuatro medidas) ── */
.dfo-medidas{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 14px}
.dfo-slot{display:flex;flex-direction:column;align-items:center;gap:5px}
.dfo-caja{position:relative;height:150px;border:2px dashed var(--br);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:var(--bg);color:var(--mu);font-size:12px;font-weight:700;text-align:center;transition:border-color .15s}
.dfo-caja:hover{border-color:var(--ac)}
.dfo-caja img{width:100%;height:100%;object-fit:cover;display:block}
.dfo-caja.nueva{border-style:solid;border-color:var(--gn)}
.dfo-caja .x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(2,6,23,.8);color:#fff;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:12px}
.dfo-n{font-size:12px;font-weight:800}
.dfo-m{font-size:11px;color:var(--mu);margin-top:-4px}
.dfo-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--br)}
.dfo-minis{display:flex;gap:6px;align-items:flex-end}
.dfo-minis div{height:54px;border-radius:6px;overflow:hidden;background:var(--bg);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--mu)}
.dfo-minis img{width:100%;height:100%;object-fit:cover;display:block}
/* ── Formulario del evento: lo opcional, plegado ── */
.ev-opcional{border:1px dashed var(--br);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;background:rgba(255,255,255,.015)}
.ev-opcional>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--tx);list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-opcional>summary::-webkit-details-marker{display:none}
.ev-opcional>summary::after{content:'▾';margin-left:auto;color:var(--mu);transition:transform .2s}
.ev-opcional[open]>summary::after{transform:rotate(180deg)}
.ev-opcional>summary span{font-weight:500;color:var(--mu);font-size:12px}
/* ── 📊 Datos del evento ── */
.evd-mo{width:980px}
.evd-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px}
.evd-tabs{flex-wrap:wrap}
.evd-tabs .tab{font-weight:700}
.evd-pinta{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--rd);color:#fff;font-size:11px;font-weight:900}
.evd-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.evd-cifras>div{background:linear-gradient(180deg,rgba(30,41,59,.7),rgba(15,23,42,.9));border:1px solid var(--br);border-radius:16px;padding:14px 10px;text-align:center}
.evd-cifras>div.alerta{border-color:rgba(239,68,68,.55);box-shadow:0 0 0 1px rgba(239,68,68,.2),0 10px 24px rgba(239,68,68,.12)}
.evd-cifras b{display:block;font-size:26px;font-weight:900;letter-spacing:-.5px;line-height:1.15}
.evd-cifras b small{font-size:15px;color:var(--mu);font-weight:800}
.evd-cifras span{font-size:10.5px;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:1px}
.evd-caja{border:1px solid var(--br);border-radius:16px;padding:14px 16px;margin-bottom:14px;background:rgba(255,255,255,.02)}
.evd-caja-t{font-size:14px;font-weight:900;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.evd-nota{font-size:12.5px;color:var(--mu);line-height:1.55}
.evd-rondas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.evd-ronda{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;border:1px solid var(--br);background:var(--s2);color:var(--tx);font:700 12.5px Inter,sans-serif;cursor:pointer;transition:border-color .15s,transform .12s}
.evd-ronda:not([disabled]):hover{transform:translateY(-1px);border-color:var(--c)}
.evd-ronda[disabled]{cursor:default;opacity:.85}
.evd-ronda i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.evd-ronda b{font-size:11.5px;color:#FCD34D}
.evd-ronda.auto{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.1)}
.evd-ronda.auto b{color:var(--gn)}
.evd-campeon{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;margin-bottom:10px;font-size:34px;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(236,72,153,.12));border:1px solid rgba(245,158,11,.5)}
.evd-campeon b{display:block;font-size:20px;color:#FCD34D}
.evd-campeon span{font-size:12.5px;color:var(--mu)}
.evd-vacio{text-align:center;padding:30px 16px}
.evd-rchips{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:thin;cursor:grab}
.evd-rchips.arrastrando{cursor:grabbing;user-select:none}
.evd-rchips.arrastrando .evd-rchip{pointer-events:none}
.evd-rchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--br);background:var(--s2);color:var(--tx);font:700 12px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.evd-rchip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.evd-rchip em{font-style:normal;color:var(--mu);font-weight:800}
.evd-rchip.activa{border-color:var(--c);background:rgba(255,255,255,.09);box-shadow:0 0 0 1px var(--c) inset}
.evd-p{display:flex;gap:10px;border:1px solid var(--br);border-radius:14px;padding:10px 12px;margin-bottom:8px;background:rgba(255,255,255,.015)}
.evd-p.conflicto{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.06)}
.evd-p.esperando{border-color:rgba(245,158,11,.45)}
.evd-p.cerrado{opacity:.86}
.evd-p.pase{color:var(--mu);font-size:13px;align-items:center}
.evd-p .n{flex:0 0 auto;font-size:11px;font-weight:900;color:var(--mu);padding-top:3px;min-width:34px}
.evd-p .cuerpo{flex:1;min-width:0}
.evd-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start}
.evd-vs .vs{font-size:11px;font-weight:900;color:var(--mu);padding-top:10px}
.evd-jug{border-radius:10px;padding:7px 10px;background:var(--s2);border:1px solid transparent;min-width:0}
.evd-jug .nom{font-weight:800;font-size:13.5px;word-break:break-all}
.evd-jug .sub{font-size:11px;color:var(--mu);margin-top:1px}
.evd-jug.gano{border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.1)}
.evd-jug.perdio{opacity:.6}
.evd-jug.vacio{color:var(--mu);font-size:12px;font-style:italic;display:flex;align-items:center;min-height:40px}
.evd-rep{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;color:var(--mu)}
.evd-rep.si{color:var(--gn)}.evd-rep.no{color:#FCA5A5}
.evd-cap{display:block;margin-top:6px;width:88px;height:62px;object-fit:cover;border-radius:8px;border:1px solid var(--br);cursor:zoom-in}
.evd-pie{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:8px}
.evd-chat-lista{height:320px;overflow-y:auto;border:1px solid var(--br);border-radius:12px;padding:10px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.evd-msg{max-width:85%;align-self:flex-start;background:var(--s2);border-radius:12px 12px 12px 4px;padding:7px 10px;font-size:13px;line-height:1.45;word-wrap:break-word}
.evd-msg.mio{align-self:flex-end;background:rgba(56,189,248,.16);border-radius:12px 12px 4px 12px}
.evd-msg b{display:block;font-size:11px;color:var(--ac);margin-bottom:1px}
.evd-msg small{display:block;font-size:10px;color:var(--mu);margin-top:2px}
.evd-sol{border:1px solid var(--br);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.evd-sol.pendiente{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.05)}
.evd-sol.cancelado{opacity:.7}
.evd-cobro{margin-top:10px;border-radius:10px;background:var(--bg);border:1px solid var(--br);padding:10px 12px;font-size:12.5px}
.evd-cobro>div{display:flex;gap:10px;justify-content:space-between;padding:2px 0}
.evd-cobro>div span{color:var(--mu)}
@media(max-width:700px){
  .evd-vs{grid-template-columns:1fr}
  .evd-vs .vs{padding:0;text-align:center}
  .evd-p .n{min-width:26px}
}
/* ── Formulario del evento: qué rondas marcan los jugadores y cuáles el moderador ── */
.ev-rondas-caja{border:1px solid var(--br);border-radius:var(--r);padding:12px 14px;margin:-4px 0 14px;background:rgba(255,255,255,.02)}
.ev-rondas-t{font-size:13.5px;font-weight:800;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ev-rondas-t span{font-weight:500;color:var(--mu);font-size:12px}
.ev-rondas-n{font-size:12px;color:var(--mu);line-height:1.5;margin-top:8px}

/* ══ 🎥 MODO EN VIVO DEL TORNEO (para transmitir) ══ */
html.evv-abierto,html.evv-abierto body{overflow:hidden!important}
/* Lo de atrás no se dibuja mientras tanto: la pantalla va fluida aunque el computador esté transmitiendo */
html.evv-abierto body>*:not(#evv):not(#toast-wrap):not(#mo-confirmar):not(#mo-pedir){visibility:hidden!important}
.btn.evv-btn{background:linear-gradient(135deg,#E11D48,#DB2777);color:#fff;border:0;box-shadow:0 6px 16px rgba(225,29,72,.3)}
.btn.evv-btn:hover{filter:brightness(1.08)}
.evv{position:fixed;inset:0;z-index:9600;display:flex;flex-direction:column;color:#E2E8F0;font-family:Inter,system-ui,sans-serif;overflow:hidden;
  background:radial-gradient(70% 60% at 0% 0%,rgba(124,58,237,.3),transparent 62%),radial-gradient(70% 60% at 100% 100%,rgba(236,72,153,.2),transparent 62%),linear-gradient(160deg,#0B1022,#05070F 60%,#0B0716)}
.evv[hidden]{display:none!important}
.evv button{font-family:inherit}
.evv kbd{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);font:800 10.5px ui-monospace,monospace;vertical-align:1px}
.evv-cab{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:9px 16px;min-height:60px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(4,6,14,.6)}
.evv-marca{font:900 17px 'Exo 2',Inter,sans-serif;letter-spacing:3px;white-space:nowrap;background:linear-gradient(90deg,#38BDF8,#A78BFA,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent}
.evv-tit{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;line-height:1.25}
.evv-tit b{font:900 17px 'Exo 2',Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evv-tit span{font-size:12px;font-weight:700;color:#94A3B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evv-envivo{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#E11D48;color:#fff;font:900 11.5px Inter,sans-serif;letter-spacing:1.6px;box-shadow:0 0 22px rgba(225,29,72,.55)}
.evv-envivo i{width:8px;height:8px;border-radius:50%;background:#fff;animation:evvLate 1.2s ease-in-out infinite}
@keyframes evvLate{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
.evv-cifras{margin-left:auto;display:flex;gap:8px}
.evv-cifras>div{padding:5px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:center;line-height:1.15;white-space:nowrap}
.evv-cifras b{display:block;font:900 17px 'Exo 2',Inter,sans-serif;color:#FDE68A}
.evv-cifras b small{font-size:12px;color:#94A3B8}
.evv-cifras span{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#94A3B8}
.evv-acc{flex:0 0 auto;display:flex;gap:6px}
.evv-acc button{height:38px;min-width:38px;padding:0 11px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(15,23,42,.85);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.evv-acc button:hover{border-color:#38BDF8;background:rgba(56,189,248,.18)}
.evv-acc .evv-salir{font-size:13px;background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.5)}
.evv-acc .evv-salir:hover{background:rgba(239,68,68,.3);border-color:#F87171}
/* 🧪 ⏸/▶️ los resultados que salen solos en el simulacro: en pausa se pinta en ámbar */
.evv-acc #evv-sim-auto.pausa{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.7)}
.evv-cuerpo{flex:1;min-height:0;display:flex;gap:14px;padding:12px 14px 14px}
/* Izquierda: el teléfono */
.evv-tel{flex:0 0 auto;width:360px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}
.evv.sin-tel .evv-tel{display:none}
.evv-marco{position:relative;flex:0 0 auto;width:100%;height:100%;border-radius:34px;background:linear-gradient(150deg,#273449,#0B1020 55%,#1B1233);border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.04)}
.evv-pantalla{position:absolute;inset:9px;border-radius:26px;overflow:hidden;background:#000}
.evv-pantalla video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.evv-marco.rellenar .evv-pantalla video{object-fit:cover}
.evv-tel-vacio{position:absolute;inset:9px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:20px 16px;text-align:center;overflow:auto;
  background:radial-gradient(90% 60% at 50% 0%,rgba(56,189,248,.16),transparent 70%),linear-gradient(180deg,#0E1528,#070A14)}
.evv-tel-vacio[hidden]{display:none}
.evv-tel-vacio .ic{font-size:44px;line-height:1}
.evv-tel-vacio .t{font:900 17px 'Exo 2',Inter,sans-serif}
.evv-tel-vacio .s{font-size:12.2px;line-height:1.55;color:#94A3B8}
.evv-tel-vacio .s b{color:#E2E8F0}
.evv-tel-barra{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%}
.evv-tel-barra[hidden]{display:none}
.evv-tel-barra button,.evv-tel-barra select{height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(15,23,42,.85);color:#E2E8F0;font:700 12px Inter,sans-serif;cursor:pointer;max-width:100%}
.evv-tel-barra button:hover{border-color:#38BDF8}
/* Botones */
.evv-votar{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:13px;padding:11px 16px;font:900 14px Inter,sans-serif;color:#fff;cursor:pointer;background:linear-gradient(135deg,#10B981,#059669);box-shadow:0 8px 20px rgba(16,185,129,.32);transition:transform .12s,filter .15s}
.evv-votar:hover{transform:translateY(-1px);filter:brightness(1.08)}
.evv-votar:active{transform:scale(.97)}
.evv-votar[disabled]{opacity:.35;cursor:default;transform:none;filter:none}
.evv-sec{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:13px;padding:10px 14px;font:800 13px Inter,sans-serif;color:#E2E8F0;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18)}
.evv-sec:hover{border-color:#38BDF8;background:rgba(56,189,248,.14)}
.evv-link{background:none;border:0;color:#94A3B8;font:700 12px Inter,sans-serif;cursor:pointer;text-decoration:underline;padding:4px}
.evv-mini{height:32px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(15,23,42,.85);color:#E2E8F0;font:800 12.5px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.evv-mini:hover{border-color:#38BDF8;background:rgba(56,189,248,.16)}
.evv-confirma{display:flex;gap:6px;align-items:stretch}
.evv-si{flex:1;border:0;border-radius:13px;padding:11px 14px;font:900 14px Inter,sans-serif;color:#422006;cursor:pointer;background:linear-gradient(135deg,#FDE047,#F59E0B);animation:evvPide 1s ease-in-out infinite}
@keyframes evvPide{0%,100%{box-shadow:0 0 0 3px rgba(253,224,71,.25),0 10px 24px rgba(245,158,11,.35)}50%{box-shadow:0 0 0 7px rgba(253,224,71,.12),0 10px 30px rgba(245,158,11,.5)}}
.evv-no{border-radius:13px;padding:0 14px;border:1px solid rgba(255,255,255,.2);background:rgba(15,23,42,.85);color:#fff;font:900 15px Inter,sans-serif;cursor:pointer}
/* Derecha: la pirámide y la partida en juego */
.evv-der{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.evv-arriba{flex:0 0 auto;display:flex;gap:10px;align-items:center}
/* La fila de rondas: si no caben todas, se mueve con la rueda del ratón, arrastrándola o con las
   flechas ‹ › (salen del lado donde hay más) y el borde se desvanece para que se note que sigue.
   position:relative: así la cuenta para centrar la ronda activa se hace desde la fila. */
.evv-rondas-caja{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.evv-rondas{position:relative;flex:1;min-width:0;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px;cursor:grab}
.evv-rondas::-webkit-scrollbar{display:none}
.evv-rondas.arrastrando{cursor:grabbing;user-select:none}
.evv-rondas.arrastrando .evv-rchip{pointer-events:none}
.evv-rflecha{position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-15px;display:none;align-items:center;justify-content:center;padding:0 0 2px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(15,23,42,.97);color:#E2E8F0;font:900 18px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.evv-rflecha:hover{border-color:#38BDF8;color:#fff;background:#0B1B33}
.evv-rflecha.izq{left:-3px}
.evv-rflecha.der{right:-3px}
.evv-rondas-caja.hay-izq .evv-rflecha.izq,.evv-rondas-caja.hay-der .evv-rflecha.der{display:inline-flex}
.evv-rondas-caja.hay-izq .evv-rondas{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px);mask-image:linear-gradient(90deg,transparent 0,#000 46px)}
.evv-rondas-caja.hay-der .evv-rondas{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent 100%)}
.evv-rondas-caja.hay-izq.hay-der .evv-rondas{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%)}
.evv-rchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#E2E8F0;font:800 12px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.evv-rchip i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.evv-rchip em{font-style:normal;color:#94A3B8}
.evv-rchip.activa{border-color:var(--c);background:rgba(255,255,255,.12);box-shadow:0 0 0 1px var(--c) inset}
.evv-rchip.lista{opacity:.62}
.evv-rchip.activa.lista{opacity:1}
.evv-pinta{display:inline-block;padding:1px 7px;border-radius:999px;background:#EF4444;color:#fff;font-size:10.5px;font-weight:900}
.evv-buscar input{width:200px;height:34px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(15,23,42,.85);color:#E2E8F0;font:600 13px Inter,sans-serif;outline:none}
.evv-buscar input:focus{border-color:#38BDF8}
.evv-pir{position:relative;flex:1;min-height:180px}
/* La vista de la derecha: 🔺 Pirámide o 📋 Posiciones */
.evv-vista{flex:0 0 auto;display:flex;padding:3px;border-radius:13px;background:rgba(15,23,42,.85);border:1px solid rgba(255,255,255,.14)}
.evv-vista button{height:30px;padding:0 12px;border:0;border-radius:10px;background:none;color:#94A3B8;font:800 12.5px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.evv-vista button:hover{color:#E2E8F0}
.evv-vista button.activa{background:linear-gradient(135deg,#38BDF8,#6366F1);color:#fff;box-shadow:0 4px 14px rgba(56,189,248,.3)}
/* 📋 Posiciones: una capa encima de la pirámide (la pirámide no se mueve) */
.evv-pos{position:absolute;inset:0;z-index:5;overflow:auto;scrollbar-width:thin;padding:16px 18px 20px;border-radius:20px;box-sizing:border-box;
  background:radial-gradient(80% 60% at 100% 0%,rgba(56,189,248,.1),transparent 60%),linear-gradient(180deg,#0F1528,#060914);border:1px solid rgba(255,255,255,.1)}
.evv-pos[hidden]{display:none}
.evv-pos-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.evv-pos-cab .t{font:900 22px 'Exo 2',Inter,sans-serif;display:flex;align-items:baseline;gap:10px;min-width:0}
.evv-pos-cab .t span{font:700 13px Inter,sans-serif;color:#94A3B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evv-pos-cifras{margin-left:auto;display:flex;gap:8px}
.evv-pos-cifras span{padding:5px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:800 10px Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#94A3B8;text-align:center;line-height:1.2}
.evv-pos-cifras b{display:block;font:900 18px 'Exo 2',Inter,sans-serif;color:#FDE68A;letter-spacing:0}
.evv-pos-podio{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px;align-items:end;margin-bottom:16px}
.evv-pos-p>button,.evv-pos-p>div{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 10px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#E2E8F0;font-family:inherit;cursor:pointer;text-align:center}
.evv-pos-p>div{cursor:default;opacity:.75}
.evv-pos-p .med{font-size:30px;line-height:1}
.evv-pos-p small{font:900 10.5px Inter,sans-serif;letter-spacing:1.4px;color:#94A3B8}
.evv-pos-p b{font:900 18px 'Exo 2',Inter,sans-serif;word-break:break-all;line-height:1.15}
.evv-pos-p em{font-style:normal;font-weight:900;font-size:13px;color:#FCD34D}
.evv-pos-p.p1>button{padding:20px 12px;border-color:rgba(253,224,71,.6);background:linear-gradient(180deg,rgba(253,224,71,.18),rgba(245,158,11,.06));box-shadow:0 0 30px rgba(245,158,11,.22)}
.evv-pos-p.p1 .med{font-size:44px;filter:drop-shadow(0 0 16px rgba(253,224,71,.6))}
.evv-pos-p.p1 b{font-size:clamp(20px,2vw,28px);background:linear-gradient(180deg,#FEF3C7,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent}
.evv-pos-p.p2>button{border-color:rgba(203,213,225,.45)}
.evv-pos-p.p3>button,.evv-pos-p.p3>div{border-color:rgba(217,119,6,.5)}
.evv-pos-sec{margin-top:14px}
.evv-pos-st{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:14px}
.evv-pos-st .pu{padding:4px 11px;border-radius:999px;background:rgba(168,85,247,.16);border:1px solid rgba(216,180,254,.4);color:#E9D5FF;font:900 12px Inter,sans-serif;white-space:nowrap}
.evv-pos-st .pu.vivo{background:rgba(16,185,129,.16);border-color:rgba(110,231,183,.45);color:#A7F3D0}
.evv-pos-st b{font:900 15px 'Exo 2',Inter,sans-serif}
.evv-pos-st .mo{font-weight:900;color:#FCD34D;font-size:13px}
.evv-pos-st em{margin-left:auto;font-style:normal;font-weight:900;color:#94A3B8;font-size:12.5px}
.evv-pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
.evv-pj{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#E2E8F0;font-family:inherit;cursor:pointer}
.evv-pj:hover{border-color:#38BDF8;background:rgba(56,189,248,.1)}
.evv-pj b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:30px}
.evv-pj small{font-size:11.5px;font-weight:600;color:#94A3B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evv-pj .pu{position:absolute;right:8px;top:7px;font:900 11px Inter,sans-serif;color:#FDE68A}
.evv-pj.vivo{border-color:rgba(110,231,183,.35);background:rgba(16,185,129,.07)}
.evv-pj.vivo small{color:#A7F3D0}
.evv-pj.juega{border-color:#F472B6;box-shadow:0 0 0 1px #F472B6 inset,0 0 18px rgba(244,114,182,.35)}
.evv-pj.fuera b{color:#CBD5E1}
.evv-pj.brilla{animation:evvBrilla 2.4s ease-out 1}
@keyframes evvBrilla{0%,40%{box-shadow:0 0 0 3px #FDE047,0 0 26px rgba(253,224,71,.7);border-color:#FDE047}100%{box-shadow:none}}
.evv-pos-vacio{height:100%;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#94A3B8}
.evv-pos-vacio .ic{font-size:40px}
.evv-pos-vacio b{font:900 17px 'Exo 2',Inter,sans-serif;color:#E2E8F0}
.evv-pir .evp{height:100%!important;border-radius:20px;touch-action:none}
.evv-pir .evp [data-evp-acc="pantalla"],.evv-pir .evp [data-evp-acc="yo"],.evv-pir .evp-salir{display:none!important}
.evv-banner{position:absolute;left:50%;top:16px;z-index:6;transform:translate(-50%,-14px) scale(.96);opacity:0;pointer-events:none;max-width:calc(100% - 40px);box-sizing:border-box;
  padding:12px 24px;border-radius:999px;font:900 clamp(16px,1.6vw,24px) 'Exo 2',Inter,sans-serif;color:#422006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(135deg,#FDE68A,#F59E0B);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 40px rgba(253,224,71,.35);transition:opacity .35s,transform .35s}
.evv-banner.ver{opacity:1;transform:translate(-50%,0) scale(1)}
.evv-partida{flex:0 0 auto;min-height:224px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-content:start;gap:10px 14px;padding:12px 14px;border-radius:20px;background:linear-gradient(180deg,rgba(30,41,59,.78),rgba(15,23,42,.94));border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.evv-partida.una{grid-template-columns:minmax(0,1fr)}
.evv-principal{min-width:0}
.evv-p-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:#CBD5E1}
.evv-p-cab b{font:900 16px 'Exo 2',Inter,sans-serif;color:#fff}
.evv-p-k{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#E11D48;color:#fff;font:900 10.5px Inter,sans-serif;letter-spacing:1.4px}
.evv-p-k i{width:7px;height:7px;border-radius:50%;background:#fff;animation:evvLate 1.1s ease-in-out infinite}
.evv-p-k.ok{background:#059669}
.evv-p-k.ok i{animation:none}
.evv-p-modo{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:11.5px;font-weight:800}
.evv-vs{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:10px;align-items:stretch}
.evv-vs-c{display:grid;place-items:center}
.evv-vs-c b{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:900 17px 'Exo 2',Inter,sans-serif;color:#fff;background:linear-gradient(135deg,#F472B6,#FB923C);box-shadow:0 10px 26px rgba(244,114,182,.45),0 0 0 3px rgba(255,255,255,.12)}
.evv-j{position:relative;display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:18px;min-width:0;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);transition:border-color .2s,box-shadow .2s,opacity .3s,filter .3s}
.evv-j.der{flex-direction:row-reverse;text-align:right}
.evv-j .av{flex:0 0 auto;width:68px;height:68px;border-radius:50%;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.evv-j .av svg{width:100%;height:100%;display:block}
.evv-j .dat{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.evv-j.der .dat{align-items:flex-end}
.evv-j .nom{font:900 clamp(17px,1.45vw,25px) 'Exo 2',Inter,sans-serif;line-height:1.15;word-break:break-all;color:#fff}
.evv-j .nom.largo{font-size:clamp(15px,1.2vw,22px)}
.evv-j .nom.mlargo{font-size:clamp(13px,1vw,19px)}
.evv-j .sub{font-size:12px;font-weight:700;color:#94A3B8}
.evv-j .sub b{color:#E2E8F0}
.evv-j.armado{border-color:#FDE047;box-shadow:0 0 0 2px rgba(253,224,71,.35),0 0 36px rgba(253,224,71,.2)}
.evv-j.gano{border-color:#FBBF24;background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(245,158,11,.06));box-shadow:0 0 36px rgba(251,191,36,.22)}
.evv-j.perdio{opacity:.42;filter:grayscale(.8)}
.evv-sello{position:absolute;top:-10px;left:14px;padding:3px 10px;border-radius:999px;font:900 10.5px Inter,sans-serif;letter-spacing:1.2px}
.evv-j.der .evv-sello{left:auto;right:14px}
.evv-sello.g{background:linear-gradient(135deg,#FDE047,#F59E0B);color:#422006}
.evv-sello.p{background:#334155;color:#CBD5E1}
.evv-rep{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.evv-rep.si{color:#6EE7B7;border-color:rgba(16,185,129,.45)}
.evv-rep.no{color:#FCA5A5;border-color:rgba(239,68,68,.45)}
.evv-cap{border:0;background:none;color:#93C5FD;font:800 12px Inter,sans-serif;cursor:pointer;padding:0;text-decoration:underline}
.evv-guardando{font:800 13px Inter,sans-serif;color:#FDE68A}
.evv-resultado{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border-radius:14px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);font-size:13.5px;font-weight:700}
.evv-resultado b{color:#6EE7B7}
.evv-resultado.corr{background:rgba(253,224,71,.08);border-color:rgba(253,224,71,.4)}
.evv-nada,.evv-sorteo,.evv-campeon{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:6px 4px}
.evv-nada .ic,.evv-sorteo .ic{font-size:40px;line-height:1}
.evv-nada b,.evv-sorteo .t{display:block;font:900 18px 'Exo 2',Inter,sans-serif;color:#fff}
.evv-nada span,.evv-sorteo .s{display:block;font-size:13px;color:#94A3B8;line-height:1.5;max-width:560px}
.evv-vpa{flex-basis:100%;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.45);color:#FDE68A;font-size:13px;line-height:1.55}
.evv-vpa>span{flex:1;min-width:240px}
.evv-campeon .copa{font-size:54px;line-height:1;filter:drop-shadow(0 0 22px rgba(253,224,71,.6))}
.evv-campeon .k{font:900 12px Inter,sans-serif;letter-spacing:3px;color:#FDE68A}
.evv-campeon .nom{font:900 clamp(24px,2.4vw,38px) 'Exo 2',Inter,sans-serif;background:linear-gradient(180deg,#FEF3C7,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;word-break:break-all}
.evv-campeon .m{font-size:14px;font-weight:800;color:#FCD34D;margin-top:2px}
.evv-podio{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto;align-items:center}
.evv-podio>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:800}
.evv-cola{min-width:0;display:flex;flex-direction:column;gap:5px;border-left:1px solid rgba(255,255,255,.08);padding-left:14px;max-height:190px;overflow:auto;scrollbar-width:thin}
.evv-cola-t{font:900 10.5px Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:#94A3B8;margin-bottom:2px;display:flex;justify-content:space-between;gap:6px}
.evv-cola-t span{color:#FDE68A}
.evv-cola button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#E2E8F0;font:700 12.5px Inter,sans-serif;cursor:pointer}
.evv-cola button:hover{border-color:#38BDF8;background:rgba(56,189,248,.12)}
.evv-cola button .n{color:#94A3B8;font-weight:900;min-width:28px}
.evv-cola button .vs{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evv-cola button .vs i{font-style:normal;color:#F472B6;font-weight:900;margin:0 5px}
.evv-cola-v{font-size:12px;color:#94A3B8;padding:4px 2px}
.evv-cinta{grid-column:1/-1;display:flex;align-items:center;gap:8px;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);padding-top:9px;font-size:12.5px}
.evv-cinta .k{flex:0 0 auto;font:900 10.5px Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:#94A3B8}
.evv-cinta button{flex:0 0 auto;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#CBD5E1;border-radius:999px;padding:5px 11px;font:700 12px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.evv-cinta button b{color:#FDE68A}
.evv-cinta button i{font-style:normal;color:#94A3B8}
/* Ajustes, la captura en grande y los avisos */
.evv-ajustes{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.7);backdrop-filter:blur(4px)}
.evv-ajustes[hidden]{display:none}
.evv-aj{width:min(660px,92vw);max-height:86vh;overflow:auto;padding:20px 22px;border-radius:22px;background:linear-gradient(180deg,#131C31,#0B1122);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.evv-aj-t{display:flex;align-items:center;gap:10px;font:900 18px 'Exo 2',Inter,sans-serif;margin-bottom:6px}
.evv-aj-t button{margin-left:auto}
.evv-aj-sec{font:900 12px Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:#FDE68A;margin:16px 0 6px}
.evv-aj-nota{font-size:12.5px;color:#94A3B8;line-height:1.55}
.evv-aj-nota b{color:#E2E8F0}
.evv-aj-rondas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.evv-aj-rondas button{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#E2E8F0;font:800 12.5px Inter,sans-serif;cursor:pointer}
.evv-aj-rondas button i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.evv-aj-rondas button b{font-size:11.5px;color:#FCD34D}
.evv-aj-rondas button.auto{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.12)}
.evv-aj-rondas button.auto b{color:#6EE7B7}
.evv-atajos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px 14px;font-size:12.5px;color:#CBD5E1}
.evv-atajos kbd{margin:0 5px 0 0}
.evv-foto{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.88);cursor:zoom-out}
.evv-foto[hidden]{display:none}
.evv-foto img{max-width:92vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.evv-aviso{position:absolute;right:18px;bottom:18px;z-index:40;max-width:min(460px,90vw);padding:12px 16px;border-radius:14px;font:800 13.5px Inter,sans-serif;line-height:1.45;background:rgba(15,23,42,.96);border:1px solid rgba(56,189,248,.5);box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.evv-aviso.ver{opacity:1;transform:none;pointer-events:auto}
.evv-aviso.mal{border-color:rgba(239,68,68,.6);color:#FECACA}
.evv-aviso button{margin-left:8px}
/* Pantallas más bajitas (1366×768 y parecidas) */
@media (max-height:820px){
  .evv-cab{min-height:52px;padding:6px 14px}
  .evv-cifras b{font-size:15px}
  .evv-cuerpo{gap:12px;padding:10px 12px 12px}
  .evv-partida{padding:10px 12px;gap:8px 12px;min-height:196px}
  .evv-p-cab{margin-bottom:9px}
  .evv-j{padding:10px 12px;gap:10px}
  .evv-j .av{width:52px;height:52px}
  .evv-votar,.evv-si{padding:9px 13px;font-size:13px}
  .evv-cola{max-height:150px}
  .evv-vs-c b{width:46px;height:46px;font-size:15px}
}
@media (max-width:1280px){
  .evv-partida{grid-template-columns:minmax(0,1fr) 230px}
  .evv-cifras>div:nth-child(3){display:none}
  .evv-buscar input{width:150px}
}
@media (max-width:980px){
  .evv-cuerpo{flex-direction:column;overflow:auto}
  .evv-tel{width:100%!important}
  .evv-marco{width:auto!important;height:420px!important;aspect-ratio:9/19.5}
  .evv-partida,.evv-partida.una{grid-template-columns:1fr}
  .evv-cola{border-left:0;padding-left:0;max-height:none}
  .evv-pir{flex:0 0 auto;height:440px}
  .evv-cifras,.evv-marca{display:none}
}
@media (max-width:640px){
  .evv-vs{grid-template-columns:1fr;gap:6px}
  .evv-vs-c b{width:40px;height:40px;margin:0 auto}
  .evv-j.der{flex-direction:row;text-align:left}
  .evv-j.der .dat{align-items:flex-start}
  .evv-arriba{flex-wrap:wrap}
  /* Arriba: Pirámide/Posiciones y el buscador; debajo, la fila de rondas a todo lo ancho
     (antes quedaba apretada al lado, con espacio para una sola ronda) */
  .evv-buscar{flex:1 1 120px;min-width:0;order:1}
  .evv-buscar input{width:100%}
  .evv-rondas-caja{flex:1 1 100%;order:2}
  .evv-envivo{display:none}
  /* El título arriba (a todo lo ancho) y los botones debajo: con los botones del simulacro no
     quedaba lugar para el nombre del torneo */
  .evv-cab{flex-wrap:wrap;row-gap:6px}
  .evv-tit{flex:1 1 100%}
  .evv-acc{flex:1 1 100%;justify-content:flex-end}
}

/* ── Aparición al hacer scroll ── */
.evx-rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.evx-rev.in{opacity:1;transform:none}
.evx-rev.d1{transition-delay:.08s}.evx-rev.d2{transition-delay:.16s}.evx-rev.d3{transition-delay:.24s}.evx-rev.d4{transition-delay:.32s}

/* (la pirámide del torneo trae sus estilos en evento-piramide.js) */
/* ── El cierre ── */
.evx-cierre{position:relative;overflow:hidden;border-radius:28px;padding:44px 30px;text-align:center;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(168,85,247,.18) 50%,rgba(236,72,153,.16));border:1px solid rgba(168,85,247,.35);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.evx-cierre::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(56,189,248,.14),transparent 30%,rgba(236,72,153,.14),transparent 60%);animation:evxGiro 14s linear infinite;pointer-events:none}
.evx-cierre>*{position:relative}

@media(max-width:900px){
  /* Igual que las demás páginas públicas: a todo lo ancho, sin los 14px de aire del panel */
  #pg-eventos,#pg-evento{margin:-70px -14px -30px !important;overflow-x:hidden}
  /* En teléfonos, NADA de filter:blur ni animación en los fondos (muchos
     Android pintan el círculo sólido o hacen parpadear la página) */
  .evx-aurora{filter:none !important;animation:none !important;will-change:auto;opacity:.38;max-width:90vw;max-height:90vw}
  .evx-vidrio,.ev-cupos,.evx-flot,.evx-marq{backdrop-filter:none}
  .evx-hero{grid-template-columns:1fr;gap:18px}
  .evx-escena{height:360px;order:-1}
  .evx-anillo{width:300px;height:300px;margin:-150px 0 0 -150px}
  .evx-anillo.b{width:420px;height:420px;margin:-210px 0 0 -210px}
  .evx-reglas{grid-template-columns:1fr}
}
@media(max-width:760px){
  .evx-h1{letter-spacing:-1.4px}
  .evx-escena{height:330px}
  .evx-fecha{width:210px;margin:-138px 0 0 -105px;--t:translateZ(40px) rotateY(-6deg) rotateX(4deg)}
  .evx-fecha .dia{font-size:96px;letter-spacing:-5px}
  .evx-fecha .mes{font-size:22px}
  .evx-fecha .hora{font-size:18px;margin:10px 12px 14px}
  .evx-fecha .hora small{display:none}
  .evx-flot{font-size:14px;padding:9px 12px}
  .evx-flot.a{left:0;top:112px;--t:translateZ(70px)}.evx-flot.b{right:0;top:96px;--t:translateZ(60px)}.evx-flot.c{left:6px;bottom:22px;--t:translateZ(80px)}.evx-flot.d{right:6px;bottom:0;--t:translateZ(70px)}
  .ev-reloj{gap:8px;max-width:none}
  .ev-caja{padding:15px 4px 12px;border-radius:15px}
  .ev-caja b{font-size:30px;letter-spacing:-1.5px}
  .ev-caja span{font-size:8.5px;letter-spacing:1px}
  .ev-num{font-size:28px}
  .ev-podio{gap:9px}
  .ev-lugar .m{font-size:34px}.ev-lugar.uno .m{font-size:42px}
  .ev-lugar .v{font-size:24px}.ev-lugar.uno .v{font-size:34px}
  .ev-lugar.uno .bloque{height:150px}.ev-lugar.dos .bloque{height:104px}.ev-lugar.tres .bloque{height:80px}
  .ev-lugar .bloque .et{font-size:11px;top:12px}
  .evx-vidrio{padding:20px 18px;border-radius:20px}
  .evx-btn{padding:15px 24px;font-size:15.5px;width:100%}
  .evx-cierre{padding:32px 20px}
  .evx-live .centro{font-size:68px}
}
@media(prefers-reduced-motion:reduce){
  .evx-aurora,.evx-anillo,.evx-fecha,.evx-flot,.evx-btn::after,.ev-barra i,.ev-barra i::after,.evx-marq-track,.ev-lugar,.ev-lugar .m,.ev-lugar .bloque,.ev-lugar .bloque::before,.ev-red::after,.evx-live .centro,.evx-live .corazones b,.evx-cierre::before,.ev-card .tapa .emo{animation:none !important}
  .evx-rev{opacity:1;transform:none}
}


/* ═══════════════════════════════════════════════
   CLIENTES DE STREAMING (panel): activos, pendientes por pago y cancelados
   ═══════════════════════════════════════════════ */
.cs-kpis .cs-kpi{cursor:pointer;transition:border-color .15s,transform .12s}
.cs-kpis .cs-kpi:hover{border-color:var(--ac);transform:translateY(-1px)}
.cs-kpis .kpi-s b{color:var(--am)}
.cs-tabs .tab{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cs-tabs .tab b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--s2);color:var(--tx);font-size:11px;font-weight:800}
.cs-tabs .tab.active b{background:rgba(56,189,248,.18);color:var(--ac)}
.cs-filtros{display:grid;grid-template-columns:minmax(0,1fr) 210px 170px;gap:8px;margin-bottom:10px}
.cs-filtros input,.cs-filtros select{background:var(--bg);border:1px solid var(--br);border-radius:var(--r);padding:9px 12px;color:var(--tx);
  font-family:'Inter',sans-serif;font-size:13px;width:100%;min-width:0}
.cs-filtros input:focus,.cs-filtros select:focus{outline:none;border-color:var(--ac)}
.cs-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cs-chip{display:inline-flex;align-items:center;gap:6px;background:var(--s);border:1px solid var(--br);color:var(--mu);border-radius:20px;
  padding:6px 12px;font:600 12px 'Inter',sans-serif;cursor:pointer;transition:all .14s}
.cs-chip b{color:var(--tx);font-weight:800}
.cs-chip:hover:not(:disabled){border-color:var(--ac);color:var(--tx)}
.cs-chip.on{background:rgba(56,189,248,.14);border-color:var(--ac);color:var(--ac)}
.cs-chip.on b{color:var(--ac)}
.cs-chip:disabled{opacity:.45;cursor:default}
.cs-explica{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--mu);line-height:1.55;margin-bottom:12px}
.cs-explica>span{flex:1;min-width:220px}
.cs-explica b{color:var(--tx)}
.cs-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:12px;align-items:start}
.cs-vacio{grid-column:1/-1;text-align:center;color:var(--mu);padding:36px 12px;font-size:13px;background:var(--s);border:1px dashed var(--br);border-radius:var(--rl)}
.cs-mas{grid-column:1/-1;text-align:center;padding:4px 0 10px}
.cs-card{background:var(--s);border:1px solid var(--br);border-radius:var(--rl);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;
  border-top:3px solid var(--gn)}
.cs-card.pendiente{border-top-color:var(--rd)}
.cs-card.cancelado{border-top-color:#64748B}
.cs-cab{display:flex;gap:11px;align-items:flex-start;min-width:0}
.cs-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font:800 16px 'Inter',sans-serif;color:#0F172A;
  background:linear-gradient(135deg,var(--ac),var(--pu))}
.cs-card.pendiente .cs-av{background:linear-gradient(135deg,#F87171,#F59E0B)}
.cs-card.cancelado .cs-av{background:linear-gradient(135deg,#94A3B8,#475569);color:#fff}
.cs-quien{flex:1;min-width:0}
.cs-nom{font-size:14.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.cs-nom span{font-size:12px;font-weight:600;color:var(--mu)}
.cs-datos{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.cs-dato{background:none;border:none;padding:0;color:var(--tx);font:500 12.5px 'Inter',sans-serif;cursor:pointer;text-align:left;overflow-wrap:anywhere;min-width:0}
.cs-dato:hover{color:var(--ac)}
.cs-dato.cs-sin{color:var(--mu);cursor:default}
.cs-otros{font-size:11.5px;color:var(--mu);margin-top:4px;line-height:1.55;overflow-wrap:anywhere}
.cs-otros a{color:var(--ac);text-decoration:none}
.cs-ctas{display:flex;flex-direction:column;gap:7px}
.cs-cta{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;background:var(--bg);border:1px solid var(--br);border-radius:12px;
  padding:10px 11px;border-left:3px solid var(--gn);min-width:0}
.cs-cta.pronto{border-left-color:var(--am)}
.cs-cta.venc{border-left-color:var(--rd)}
.cs-cta.canc{border-left-color:#64748B}
.cs-cta.esp{border-left-color:var(--ac)}
.cs-cta-c{flex:1;min-width:0}
.cs-cta-t{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;font-size:13px;line-height:1.35}
.cs-cta-t>b{overflow-wrap:anywhere}
.cs-est{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:800;white-space:nowrap;
  background:rgba(16,185,129,.14);color:var(--gn);border:1px solid rgba(16,185,129,.3)}
.cs-est.pronto{background:rgba(245,158,11,.14);color:var(--am);border-color:rgba(245,158,11,.35)}
.cs-est.venc{background:rgba(239,68,68,.14);color:#F87171;border-color:rgba(239,68,68,.35)}
.cs-est.canc{background:rgba(100,116,139,.18);color:#CBD5E1;border-color:rgba(148,163,184,.3)}
.cs-est.esp{background:rgba(56,189,248,.14);color:var(--ac);border-color:rgba(56,189,248,.3)}
.cs-cta-s{font-size:11.5px;color:var(--mu);margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
.cs-cta-s b{color:var(--tx)}
.cs-cta-a{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.cs-cta-a .btn{justify-content:center;white-space:nowrap}
.cs-tambien{font-size:11.5px;color:var(--mu)}
.cs-ult{font-size:11.5px;color:var(--mu);line-height:1.5;padding-top:8px;border-top:1px dashed var(--br);overflow-wrap:anywhere}
.cs-acc{display:flex;flex-wrap:wrap;gap:6px}
.cs-acc .btn{text-decoration:none;justify-content:center}
.cs-opciones{display:flex;flex-wrap:wrap;gap:6px}
.cs-opciones button{background:var(--bg);border:1px solid var(--br);color:var(--tx);border-radius:20px;padding:7px 12px;font:600 12px 'Inter',sans-serif;cursor:pointer}
.cs-opciones button.on{background:rgba(56,189,248,.16);border-color:var(--ac);color:var(--ac)}
.cs-hist{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow-y:auto}
.cs-h{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--br);font-size:12.5px;line-height:1.45}
.cs-h:last-child{border-bottom:none}
.cs-h-i{width:22px;flex-shrink:0;text-align:center}
.cs-h-f{font-size:11px;color:var(--mu);margin-top:1px}
@media(max-width:900px){
  .cs-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .cs-tabs .tab{flex-direction:column;justify-content:flex-start;text-align:center;white-space:normal;padding:8px 4px;font-size:12px;line-height:1.25;gap:4px}
  .cs-tabs .tab>span{min-height:2.5em;display:flex;align-items:center;justify-content:center}
  .cs-filtros{grid-template-columns:1fr 1fr}
  .cs-filtros input{grid-column:1/-1}
  /* tableta: dos tarjetas por fila; los botones de cada pantalla, debajo */
  .cs-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-cta{flex-direction:column}
  .cs-cta-a{flex-direction:row;flex-wrap:wrap;width:100%}
  .cs-cta-a .btn{flex:1 1 140px}
  .cs-acc .btn,.cs-cta-a .btn{min-height:40px}
}
@media(max-width:640px){
  .cs-lista{grid-template-columns:1fr}
  .cs-kpis{grid-template-columns:1fr 1fr !important;gap:8px}
  .cs-kpis .kpi{padding:11px 12px}
  .cs-kpis .kpi-v{font-size:22px;margin-top:3px}
  .cs-kpis .kpi-s{font-size:10.5px;line-height:1.4}
  .cs-kpis .kpi-l{font-size:10px;letter-spacing:.4px}
  .cs-cta{flex-direction:column}
  .cs-cta-a{flex-direction:row;flex-wrap:wrap;width:100%}
  .cs-cta-a .btn{flex:1 1 140px}
  .cs-acc{display:grid;grid-template-columns:1fr 1fr}
  .cs-acc .btn{min-width:0;width:100%;padding-left:8px;padding-right:8px}
  .cs-acc .ancho,.cs-acc .cs-anotar{grid-column:1/-1}
  .cs-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px 10px;padding:0 14px 4px}
  .cs-chip{flex-shrink:0}
  .cs-filtros input,.cs-filtros select{font-size:16px}
}