/* Servidores de juego · v4 (BORRADOR, 4-oct-2026). Sólo lo propio de esta página: la
   estructura común sale de estilo-v4.css y la piel (Inter, píldoras, superficies) de
   v4-web.css, que se carga DESPUÉS de esta hoja — por eso algunas reglas van con más
   especificidad (.jg-…) en vez de pisar clases comunes. */

/* ── Aviso de borrador ───────────────────────────── */
.jg-borrador{position:relative;z-index:5;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;padding:9px var(--pad);background:rgba(245,158,11,.08);border-bottom:1px solid rgba(245,158,11,.22);font:400 13px/1.45 var(--disp);color:var(--tinta-2);text-align:center}
.jg-borrador b{font-weight:600;color:var(--ambar-tx)}
.jg-borrador .pt{width:7px;height:7px;border-radius:50%;background:var(--ambar);flex:none}
@media (max-width:560px){.jg-borrador span:not(.pt){display:none}.jg-borrador{font-size:12.5px}}

/* ── Hero: el mando está a la derecha del render ── */
.jg-hero .hero-ft{object-position:62% 50%}
.jg-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.25) 55%,transparent 80%);pointer-events:none}
.pildoras li.banderas{gap:6px}
.pildoras li.banderas .bandera{width:18px;height:13.5px}
.pildoras li.banderas span{margin-left:3px}
.jg-cinta .t svg{width:18px;height:18px;opacity:.75}
@media (max-width:860px){.jg-hero .hero-ft{object-position:72% 40%;opacity:.7}.jg-hero::before{background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.55) 60%)}}

/* ── 01 · Filtros ────────────────────────────────── */
.jg-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.jg-buscar{flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:12px;height:46px;padding:0 18px;border-radius:999px;background:var(--sup);color:var(--tinta-3);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.jg-buscar:focus-within{box-shadow:inset 0 0 0 1px var(--azul-claro)}
.jg-buscar svg{width:17px;height:17px;flex:none}
.jg-buscar input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--tinta);font:400 15px/1 var(--disp);outline:none}
.jg-buscar input::placeholder{color:var(--tinta-3)}
.jg-buscar input::-webkit-search-cancel-button{filter:invert(.6)}
.jg-chips{display:flex;flex-wrap:wrap;gap:8px}
.jg-chips .filtro{display:inline-flex;align-items:center;gap:7px;cursor:pointer;height:40px}
.jg-chips .filtro svg{width:15px;height:15px;flex:none;opacity:.8}

/* ── 01 · Rejilla de juegos ──────────────────────── */
.jg-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jg-tarjeta{position:relative;display:flex;flex-direction:column;min-height:300px;padding:22px 22px 18px;border-radius:var(--r-tarjeta);background:var(--sup);overflow:hidden;isolation:isolate;transition:background .2s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.jg-tarjeta:hover{background:var(--sup-2);transform:translateY(-3px);box-shadow:0 0 0 1px #2a2a2a,0 18px 40px -24px rgba(59,91,255,.45)}
.jg-tarjeta>*{position:relative;z-index:1}
.jg-tarjeta .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.jg-mono{display:inline-grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px;background:linear-gradient(145deg,#2a2a2a,#0d0d0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06),0 8px 20px -10px rgba(0,0,0,.9);font:700 20px/1 var(--disp);letter-spacing:-.04em!important;color:#fff;position:relative;overflow:hidden}
.jg-mono::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:80%;background:radial-gradient(closest-side,rgba(124,147,255,.45),transparent);opacity:.55;transition:opacity .25s}
.jg-tarjeta:hover .jg-mono::after{opacity:1}
.jg-tarjeta .et{border-radius:999px;padding:6px 10px;background:var(--azul-f);color:var(--azul-tx);font:600 12px/1 var(--disp);white-space:nowrap}
.jg-tarjeta .et.prox{background:var(--ambar-f);color:var(--ambar-tx)}
.jg-tarjeta h3{margin-top:22px;font:600 21px/1.2 var(--disp)}
.jg-tarjeta h3 a{color:inherit;text-decoration:none;outline:none}
.jg-tarjeta h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}   /* la tarjeta entera abre los planes */
.jg-tarjeta:has(.abrir:focus-visible){box-shadow:0 0 0 2px var(--azul-claro)}
.gen{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:400 13px/1.3 var(--disp);color:var(--tinta-3)}
.gen svg{width:14px;height:14px;flex:none}
.jg-tarjeta p{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.jg-tarjeta .pie{margin-top:auto;padding-top:18px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.jg-tarjeta .desde{font-size:13.5px;color:var(--tinta-3)}
.jg-tarjeta .desde b{font:600 19px/1 var(--disp);color:var(--tinta);letter-spacing:-.02em!important}
.jg-tarjeta .specs{grid-column:1;font-size:12.5px;color:var(--tinta-3);margin-top:4px}
.jg-tarjeta .ir{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:var(--sup-3);color:var(--tinta);transition:background .2s,transform .2s}
.jg-tarjeta .ir svg{width:15px;height:15px}
.jg-tarjeta:hover .ir{background:var(--azul);color:#fff;transform:translateX(2px)}
.jg-tarjeta.prox .jg-mono{opacity:.7}
.jg-tarjeta.prox:hover .ir{background:var(--sup-3);color:var(--tinta)}
.jg-tarjeta.oculta{display:none}
/* entrada escalonada al verlas (la pone v4-juegos.js) */
html.js .jg-tarjeta{opacity:0;transform:translateY(12px)}
html.js .jg-tarjeta.dentro{opacity:1;transform:none;transition:opacity .55s,transform .55s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .25s}
html.js .jg-tarjeta.dentro:hover{transform:translateY(-3px)}
.jg-vacio{margin-top:18px;padding:28px;border-radius:var(--r-tarjeta);background:var(--sup);text-align:center;color:var(--tinta-2)}
.jg-vacio a,.jg-nota a{color:var(--azul-tx)}
.jg-vacio.oculta{display:none}
.jg-nota{margin-top:18px;font-size:14px;color:var(--tinta-3)}

/* ── Diálogo con los planes ──────────────────────── */
.jg-dialogo{width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:var(--r-gran);background:#0c0c0c;color:var(--tinta);box-shadow:0 0 0 1px #262626,0 40px 120px -20px rgba(0,0,0,.9),0 0 80px -30px rgba(59,91,255,.35);overflow:auto;overscroll-behavior:contain}
.jg-dialogo::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jg-dialogo[open]{animation:jg-entra .32s cubic-bezier(.2,.7,.2,1)}
.jg-dialogo[open]::backdrop{animation:jg-fondo .3s ease}
@keyframes jg-entra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes jg-fondo{from{opacity:0}to{opacity:1}}
.jg-cerrar{position:sticky;top:14px;float:right;margin:14px 14px 0 0;z-index:3;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:var(--sup-3);color:var(--tinta);cursor:pointer;transition:background .15s}
.jg-cerrar:hover{background:#2c2c2c}
.jg-cerrar svg{width:18px;height:18px}
.jg-panel{padding:clamp(22px,3.4vw,40px)}
.jg-pcab{display:flex;gap:20px;align-items:flex-start;padding-right:44px}
.jg-pcab .jg-mono{width:64px;height:64px;border-radius:18px;font-size:25px}
.jg-pcab .gen em{font-style:normal;color:var(--ambar-tx)}
.jg-ptit{font:600 clamp(28px,3.4vw,40px)/1.08 var(--disp);letter-spacing:-.03em!important;margin-top:4px}
.jg-pcab p{margin-top:8px;color:var(--tinta-2);font-size:16px;max-width:60ch}
.jg-planes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.jg-planes.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.jg-plan{display:flex;flex-direction:column;padding:20px;border-radius:var(--r-tarjeta);background:var(--sup);border:1px solid transparent}
.jg-plan.rec{background:linear-gradient(180deg,rgba(59,91,255,.16),rgba(59,91,255,0) 60%),var(--sup);border-color:rgba(59,91,255,.55);box-shadow:0 0 0 1px rgba(59,91,255,.18),0 24px 60px -30px rgba(59,91,255,.45)}
.jg-plan .pt{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.jg-plan .pt b{font:600 17px/1.2 var(--disp)}
.jg-plan .badge{padding:5px 9px;font-size:11.5px}
.jg-plan .pr{margin-top:16px;padding-bottom:16px;border-bottom:1px solid #262626}
.jg-plan .pr b{display:block;font:600 34px/1 var(--disp);letter-spacing:-.03em!important;font-variant-numeric:tabular-nums}
.jg-plan .pr small{display:block;margin-top:6px;font-size:12.5px;color:var(--tinta-3)}
.jg-plan ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:11px}
.jg-plan li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline;font-size:14px;color:var(--tinta-3)}
.jg-plan li b{font-weight:500;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.jg-plan li i{grid-column:1/-1;height:3px;border-radius:3px;background:#262626;position:relative;overflow:hidden}
.jg-plan li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:3px;background:var(--tinta-3);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.jg-plan.rec li i::after{background:var(--azul-claro)}
.jg-panel.visto .jg-plan li i::after{transform:none}
.jg-plan .btn{margin-top:auto;width:100%}
.jg-pnota{margin-top:20px;font-size:13.5px;color:var(--tinta-3);line-height:1.55}
.jg-pnota .jg-dto{display:block;margin-top:6px;color:var(--tinta-2);font-weight:500}
@media (max-width:1100px){.jg-planes.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.jg-planes,.jg-planes.n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .jg-dialogo{width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .jg-dialogo[open]{animation:jg-sube .34s cubic-bezier(.2,.7,.2,1)}
  @keyframes jg-sube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  .jg-panel{padding:20px 16px 26px}
  .jg-pcab{gap:14px;padding-right:40px}
  .jg-pcab .jg-mono{width:52px;height:52px;font-size:20px;border-radius:15px}
  .jg-pcab p{font-size:15px}
  .jg-planes,.jg-planes.n5{grid-template-columns:1fr;gap:10px;margin-top:20px}
  .jg-plan{padding:16px}
  .jg-plan .pr{display:flex;align-items:baseline;gap:10px;margin-top:10px;padding-bottom:12px}
  .jg-plan .pr b{font-size:28px}
  .jg-plan .pr small{margin-top:0}
  .jg-plan ul{grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0 14px}
  .jg-cerrar{margin:10px 10px 0 0;top:10px}
}

/* ── 02 · Qué incluye ────────────────────────────── */
.jg-ico-g{width:46px;height:46px;margin-top:22px;color:var(--azul-claro)}
.jg-ico-g svg{width:100%;height:100%}
.jg-ubis{display:grid;gap:8px;margin-top:18px}
.jg-ubis span{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-caja);background:var(--sup-3)}
.jg-ubis .bandera{grid-row:1/3;width:24px;height:18px}
.jg-ubis b{font-weight:600;font-size:15.5px;line-height:1.2}
.jg-ubis small{font-size:12.5px;color:var(--tinta-3)}
.jg-term{white-space:pre-wrap;word-break:break-word}

/* ── Respónsive de la rejilla ────────────────────── */
@media (max-width:1180px){.jg-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.jg-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .jg-rejilla{grid-template-columns:1fr;gap:10px}
  .jg-tarjeta{min-height:0;padding:18px 18px 16px}
  .jg-tarjeta .top .jg-mono{width:44px;height:44px;border-radius:13px;font-size:17px}
  .jg-tarjeta h3{margin-top:14px}
  .jg-tarjeta p{margin-top:8px}
  .jg-tarjeta .pie{padding-top:14px}
  .jg-filtros{gap:10px}
  .jg-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none}
  .jg-chips::-webkit-scrollbar{display:none}
  .jg-chips .filtro{flex:none}
}

/* ── Logotipos oficiales (4-oct): escaparate oscuro arriba de cada tarjeta ── */
/* El logo va «contain» dentro de una caja fija: los hay apaisados (CS 1.6) y casi
   cuadrados (ARK, SCP), y así todas las tarjetas miden lo mismo. Las iniciales
   (.jg-mono) siguen valiendo dentro de la misma escena si falta la imagen. */
.jg-tarjeta .top.jg-escena{position:relative;display:grid;place-items:center;justify-content:stretch;height:138px;margin:-22px -22px 0;padding:22px 26px;
  background:radial-gradient(120% 90% at 50% 110%,rgba(59,91,255,.20),transparent 62%),linear-gradient(180deg,#141414,#0a0a0a);
  border-bottom:1px solid rgba(255,255,255,.06)}
.jg-tarjeta .top.jg-escena .et{position:absolute;top:14px;right:14px}
.jg-logo{display:block;max-width:78%;max-height:88px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.jg-tarjeta:hover .jg-logo{transform:scale(1.04)}
.jg-tarjeta.prox .jg-logo{opacity:.6;filter:grayscale(.6) drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.jg-tarjeta h3{margin-top:18px}
.jg-pcab .jg-escena{flex:none;display:grid;place-items:center;width:200px;height:116px;padding:16px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 110%,rgba(59,91,255,.22),transparent 62%),linear-gradient(180deg,#151515,#0a0a0a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.jg-pcab .jg-escena .jg-logo{max-width:100%;max-height:84px}
.jg-marcas{margin:22px 0 30px;font-size:12px;line-height:1.5;color:var(--tinta-3);text-align:center}
@media (max-width:560px){
  .jg-tarjeta .top.jg-escena{height:112px;margin:-18px -18px 0;padding:18px 22px}
  .jg-logo{max-height:70px}
  .jg-tarjeta h3{margin-top:14px}
  .jg-pcab{flex-direction:column;gap:12px}
  .jg-pcab .jg-escena{width:150px;height:84px;padding:12px;border-radius:15px}
  .jg-pcab .jg-escena .jg-logo{max-height:60px}
}
.jg-escena>.jg-mono{width:64px;height:64px;border-radius:18px;font-size:24px}