/* =============================================================================
   PORTADA de /juego. Lo común (cabecera, botones, monedas, marcos) está en
   juego.css; aquí va solo lo que tiene la portada: el póster a todo lo ancho
   con su franja (propuesta A) y el portal con noticias, cuenta y ranking, y las
   secciones de mapas, trajes, armas y tienda (propuesta B).
   ========================================================================== */

/* ------------------------------------------------------------ PÓSTER */
.poster { position: relative; height: 100svh; min-height: 700px; max-height: 1180px; overflow: hidden; isolation: isolate; background: #05060a; }
.poster-foto { position: absolute; inset: -2%; z-index: -4; will-change: transform; }
.poster-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: acercar 22s ease-out both; }
.poster::before { /* degradados: el logo se lee a la izquierda y la foto se funde con la página abajo */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,5,8,.93) 0%, rgba(4,5,8,.74) 24%, rgba(4,5,8,.22) 47%, rgba(4,5,8,0) 60%),
    linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,.8) 11%, rgba(13,15,18,0) 34%),
    linear-gradient(180deg, rgba(4,4,6,.6) 0%, rgba(4,4,6,0) 18%);
}
.niebla { position: absolute; left: -20%; right: -20%; bottom: 6%; height: 45%; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.niebla i { position: absolute; inset: 0; background: radial-gradient(50% 40% at 30% 70%, rgba(120,140,190,.28), transparent 70%), radial-gradient(40% 35% at 75% 80%, rgba(210,40,60,.22), transparent 70%); filter: blur(20px); animation: niebla 26s ease-in-out infinite alternate; }
.niebla i:nth-child(2) { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .7; transform: scaleX(-1); }
@keyframes niebla { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.luz-roja { position: absolute; right: 0; bottom: 0; width: 60%; height: 55%; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 70% 90%, rgba(217,25,43,.26), transparent 70%); animation: latir 5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes latir { 50% { opacity: .55; } }
.brasas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.brasas i {
  position: absolute; bottom: -12px; width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #ffae3a 35%, rgba(255,70,20,.9) 60%, rgba(255,40,10,0) 72%);
  box-shadow: 0 0 8px 2px rgba(255,110,30,.6); opacity: 0; animation: subir var(--d) linear var(--r) infinite;
}
@keyframes subir {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  8% { opacity: var(--o); }
  50% { transform: translate(calc(var(--dx) * .5), calc(var(--h, 900px) * -.5)) scale(.85); }
  85% { opacity: calc(var(--o) * .6); }
  100% { transform: translate(var(--dx), calc(var(--h, 900px) * -1)) scale(.4); opacity: 0; }
}
.poster-contenido { position: absolute; inset: 0 0 132px 0; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
.poster-contenido .arriba { display: flex; flex-direction: column; align-items: flex-start; }
.temporada { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--oro-claro); margin-bottom: 22px; }
.temporada::before { content: ""; width: 44px; height: 2px; background: var(--carmesi); }
/* El logo grande: TORMENTA NEGRA en metal cepillado y, debajo, OPS en carmesí
   inclinado entre dos filos (el mismo estilo que tenía el logo de antes). */
.logo-grande { display: inline-flex; flex-direction: column; align-items: flex-start; filter: drop-shadow(0 10px 30px rgba(0,0,0,.8)); }
.logo-fila { display: flex; align-items: flex-end; line-height: .8; }
.logo-op {
  font-size: 92px; font-weight: 700; letter-spacing: .01em; line-height: .8; padding-top: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eceef2 30%, #a9adb7 49%, #54575f 51%, #9ea2ab 70%, #f4f5f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.65));
}
.logo-7 {
  font-size: 176px; font-weight: 700; line-height: .72; margin-left: 2px; transform: skewX(-9deg); transform-origin: bottom;
  background: linear-gradient(180deg, #ff6a6f 0%, #ff2433 40%, #b50c19 58%, #e0192a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255,30,50,.45));
}
.logo-tn { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 12px; font-size: 56px; font-weight: 700; letter-spacing: .5em; line-height: 1; padding-left: 4px; }
.logo-tn::before, .logo-tn::after { content: ""; flex: 1; height: 2px; min-width: 24px; background: linear-gradient(90deg, transparent, var(--carmesi)); }
.logo-tn::after { background: linear-gradient(90deg, var(--carmesi), transparent); }
.logo-tn span {
  margin-right: -.5em; transform: skewX(-9deg);
  background: linear-gradient(180deg, #ff6a6f 0%, #ff2433 40%, #b50c19 58%, #e0192a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255,30,50,.45));
}
.lema { margin-top: 26px; max-width: 540px; font-size: 22px; line-height: 1.35; color: #d9d9de; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.lema b { color: #fff; }
.llamadas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.llamadas .btn-grande { height: 66px; }
.ya-cuenta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 30px; margin-top: 20px; font-size: 16.5px; color: var(--texto-2); }
.ya-cuenta .chip { margin-left: 16px; }

/* Franja de abajo: evento con cuenta atrás, servidores y última noticia. */
.franja { position: absolute; left: 0; right: 0; bottom: 26px; }
.franja-caja {
  display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; min-height: 88px;
  background: rgba(10,10,14,.64); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--linea-2); border-top: 2px solid var(--carmesi); box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.franja-celda { display: flex; align-items: center; gap: 16px; padding: 12px 24px; min-width: 0; transition: background .2s; }
.franja-celda + .franja-celda { border-left: 1px solid var(--linea); }
a.franja-celda:hover { background: rgba(217,31,43,.08); }
.franja-celda .txt { min-width: 0; flex: 1; }
.franja-celda small { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-celda strong { display: block; font-size: 19px; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-celda > img { width: 56px; height: 56px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.franja-celda .flechita { width: 18px; height: 18px; color: var(--carmesi-claro); flex: none; transition: transform .2s; }
a.franja-celda:hover .flechita { transform: translateX(3px); }
.franja .esqueleto { height: 16px; width: 70%; display: block; margin-top: 6px; }

/* ------------------------------------------------------------ PORTAL (noticias + columna) */
.portal { position: relative; padding-top: 34px; }
/* Las dos columnas acaban a la vez: el panel de noticias crece hasta la altura del
   lateral (antes quedaba un hueco debajo de las noticias). */
.rejilla-portal { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: stretch; }
.principal > .noticias { flex: 1; display: flex; flex-direction: column; }
.principal > .noticias > .cuerpo { flex: 1; }
.principal { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.lateral { display: flex; flex-direction: column; gap: 22px; }

/* Cartel del Pase de Temporada (encima de los accesos rápidos). */
.cartel-pase { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 18px 26px; min-height: 150px; padding: 22px 26px; border: 1px solid rgba(255,106,31,.55); background: #120d0a; transition: border-color .2s, transform .2s; }
.cartel-pase:hover { border-color: #ff6a1f; transform: translateY(-2px); }
.cartel-pase > .img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .7; transition: transform .6s; }
.cartel-pase:hover > .img { transform: scale(1.04); }
.cartel-pase::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(10,6,4,.95) 30%, rgba(10,6,4,.55) 65%, rgba(10,6,4,.2)); }
.cartel-pase .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cartel-pase small { font-size: 13.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ffb067; }
.cartel-pase b { font-size: 40px; line-height: 1; text-transform: uppercase; margin: 4px 0 6px; background: linear-gradient(180deg, #fff3d6 0%, #ffc070 35%, #ff6a1f 65%, #c2260b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cartel-pase .txt > span { font-size: 16px; color: var(--texto-2); max-width: 480px; }
.cartel-pase .btn { flex: none; }
@media (max-width: 760px) {
  .cartel-pase { flex-direction: column; align-items: flex-start; padding: 18px; }
  .cartel-pase b { font-size: 32px; }
}

/* Accesos rápidos */
.accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.acceso { position: relative; isolation: isolate; height: 140px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; border: 1px solid var(--linea-2); background: #101216; transition: border-color .2s, transform .2s; }
.acceso:hover { border-color: var(--carmesi); transform: translateY(-2px); }
.acceso > .img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s, transform .6s; }
.acceso:hover > .img { opacity: .8; transform: scale(1.05); }
.acceso::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.93) 30%, rgba(8,9,11,.2)); }
.acceso .icono { position: absolute; top: 14px; left: 18px; width: 32px; height: 32px; color: var(--carmesi-claro); }
.acceso .icono img { width: 40px; height: 40px; margin: -4px; }
.acceso b { font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.acceso small { font-size: 14px; color: var(--texto-2); margin-top: 3px; }
.acceso .ir { position: absolute; right: 16px; bottom: 16px; width: 18px; height: 18px; color: var(--texto-2); transition: transform .2s, color .2s; }
.acceso:hover .ir { transform: translateX(3px); color: #fff; }

/* Noticias */
.filtros { display: flex; gap: 2px; flex-wrap: wrap; }
.filtros button { height: 30px; padding: 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.filtros button:hover { color: #fff; }
.filtros button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 -2px 0 var(--carmesi); }
.noticias .cuerpo { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 470px; }
.destacada { position: relative; isolation: isolate; display: block; min-height: 470px; overflow: hidden; border-right: 1px solid var(--linea); }
.destacada > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transform-origin: var(--p, 50% 50%); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.destacada:hover > img { transform: scale(1.36); }
.destacada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,7,9,.97) 10%, rgba(6,7,9,.35) 55%, transparent); }
.destacada .info { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.destacada h3 { font-size: 31px; line-height: 1.02; text-transform: uppercase; margin: 10px 0 8px; }
.destacada p { font-size: 16.5px; color: var(--texto-2); }
.destacada .leer { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.destacada .leer .ico { width: 16px; height: 16px; color: var(--carmesi-claro); transition: transform .2s; }
.destacada:hover .leer .ico { transform: translateX(3px); }
.lista-not { display: flex; flex-direction: column; }
.nota { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--linea); transition: background .2s; }
.nota:last-child { border-bottom: 0; }
.nota:hover { background: rgba(255,255,255,.03); }
.nota .foto { position: relative; width: 132px; height: 80px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea-2); background: #0b0c0f; }
/* Las fotos del menú son pantallas enteras: en miniatura se acerca lo que importa (--p y --z vienen de la noticia). */
.nota .foto > img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transform-origin: var(--p, 50% 50%); transition: transform .6s; }
.nota:hover .foto > img { transform: scale(calc(var(--z, 1) * 1.08)); }
.nota h4 { font-size: 17.5px; line-height: 1.1; text-transform: uppercase; margin: 7px 0 3px; }
.nota p { font-size: 14.5px; color: var(--texto-3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota:hover h4 { color: #fff; }
.meta-nota { display: flex; align-items: center; gap: 10px; }
/* Foto compuesta con las tres cajas de munición (cuando la noticia trae «cajas»). */
.escenita { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 60%, rgba(255,196,70,.18), transparent 70%), linear-gradient(180deg, #121419, #07080a); display: flex; align-items: center; justify-content: center; }
.escenita img { width: 36%; height: auto; margin: 0 -4%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); }
.escenita img:nth-child(2) { width: 42%; z-index: 1; }
.destacada .escenita img { width: 30%; }
.noticias-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-3); }
.noticias-pie a { white-space: nowrap; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); display: inline-flex; gap: 6px; align-items: center; }
.noticias-pie a:hover { color: #fff; }
.noticias-pie .ico { width: 15px; height: 15px; }

/* Columna: la cuenta */
.cuenta-caja .formulario { gap: 10px; }
.cuenta-caja .campo input { height: 46px; }
.registro-caja { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--texto-2); }
.registro-caja a { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--oro); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.registro-caja a:hover { color: var(--oro-claro); }
.registro-caja .ico { width: 15px; height: 15px; }
.crear-grande { display: grid; gap: 10px; }
.con-sesion { display: grid; gap: 16px; }
.quien-soy { display: flex; align-items: center; gap: 14px; }
.quien-soy .avatar { width: 52px; height: 52px; font-size: 26px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.quien-soy b { display: block; font-size: 22px; line-height: 1.05; }
.quien-soy small { display: block; font-size: 14px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.con-sesion .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.con-sesion .dos .btn { padding: 0 10px; }

/* Columna: el saldo */
.saldo .chips { display: flex; gap: 12px; margin-bottom: 16px; padding-left: 13px; }
.saldo .chips .chip { flex: 1; justify-content: flex-end; }
.monedas-leyenda { display: grid; gap: 10px; margin-bottom: 18px; }
.monedas-leyenda div { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--texto-2); line-height: 1.28; }
.monedas-leyenda img { width: 32px; height: 32px; flex: none; }
.monedas-leyenda .o b { color: var(--oro-titulo); } .monedas-leyenda .c b { color: var(--cash-titulo); }

/* Columna: el ranking (próximamente) */
.ranking-prox { position: relative; overflow: hidden; }
.fantasma { padding: 6px 0; opacity: .5; filter: blur(1.5px); -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%); mask-image: linear-gradient(180deg, #000 10%, transparent 92%); }
.fantasma li { display: grid; grid-template-columns: 26px 24px 1fr 52px; align-items: center; gap: 10px; height: 40px; padding: 0 16px; list-style: none; border-bottom: 1px solid rgba(255,255,255,.04); }
.fantasma li i { display: block; height: 9px; background: rgba(255,255,255,.12); }
.fantasma li i:nth-child(1) { width: 14px; height: 14px; background: rgba(255,196,70,.4); }
.fantasma li i:nth-child(2) { height: 14px; background: rgba(255,255,255,.18); }
.ranking-prox .encima { position: absolute; inset: 49px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 22px; text-align: center; background: radial-gradient(70% 60% at 50% 42%, rgba(9,9,12,.55), rgba(9,9,12,.92) 75%); }
.ranking-prox .insignia { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%); filter: saturate(1.1) drop-shadow(0 0 20px rgba(255,140,40,.4)); }
.ranking-prox h3 { font-size: 24px; line-height: 1; text-transform: uppercase; }
.ranking-prox p { font-size: 14.5px; color: var(--texto-2); line-height: 1.35; max-width: 290px; }

/* ------------------------------------------------------------ MAPAS Y MODOS */
.mapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mapa { min-height: 520px; }
/* Las fotos de los mapas son de partida y de día (08/10/2026): sin el filtro que aclaraba las de noche. */
.mapa .num { position: absolute; top: 18px; left: 22px; font-size: 15px; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.8); }
.mapa .texto { padding: 26px; }
.mapa h3 { font-size: 38px; line-height: .95; margin: 0; }
.mapa .tipo { font-size: 14px; color: var(--carmesi-claro); letter-spacing: .16em; text-transform: uppercase; margin-top: 8px; }
.mapa p { color: #c4c8cf; margin: 10px 0 0; }
.modos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--linea-2); background: rgba(13,15,18,.85); }
.modo { padding: 20px 18px; border-right: 1px solid var(--linea); }
.modo:last-child { border-right: 0; }
.modo .ico { width: 30px; height: 30px; color: var(--carmesi-claro); margin-bottom: 10px; }
.modo b { display: block; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.modo small { display: block; font-size: 14px; color: var(--texto-3); margin-top: 5px; line-height: 1.3; }
.nota-sala { margin-top: 12px; font-size: 14px; color: var(--texto-3); letter-spacing: .04em; }

/* ------------------------------------------------------------ TRAJES (vitrina) */
.trajes-sec::before { content: ""; position: absolute; inset: 60px 0 -40px; z-index: -1; pointer-events: none; background: radial-gradient(700px 420px at 64% 62%, rgba(217,31,43,.2), transparent 70%), linear-gradient(180deg, transparent, rgba(0,0,0,.5) 30%, rgba(0,0,0,.5) 70%, transparent); }
.vitrina { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 26px; align-items: stretch; }
.ficha { padding: 26px 26px 24px; display: flex; flex-direction: column; }
.ficha .rar { font-size: 14px; }
.ficha h3 { font-size: 48px; line-height: .95; text-transform: uppercase; margin: 6px 0 10px; }
.ficha > p { color: var(--texto-2); font-size: 16.5px; }
.bonos { margin: 20px 0; display: grid; gap: 12px; }
.bono { display: grid; grid-template-columns: 116px 1fr 56px; align-items: center; gap: 12px; font-size: 15px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.bono .pista { height: 6px; background: rgba(255,255,255,.08); position: relative; }
.bono .pista i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--carmesi-oscuro), var(--carmesi-claro)); box-shadow: 0 0 10px rgba(255,61,72,.5); transition: width .5s; }
.bono b { color: #fff; text-align: right; font-size: 17px; }
.ficha .lista-datos { margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--linea); }
.alquiler { display: grid; gap: 12px; margin-top: auto; }
.alquiler .nota-alquiler { font-size: 13.5px; color: var(--texto-3); line-height: 1.35; }
.escenario { position: relative; min-height: 600px; overflow: hidden; border: 1px solid var(--linea-2); background: radial-gradient(60% 55% at 50% 72%, rgba(255,255,255,.07), transparent 70%), linear-gradient(180deg, #0b0c10 0%, #050608 100%); }
.escenario .luz { position: absolute; left: 50%; top: -10%; width: 70%; height: 80%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.escenario .piso { position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; background: radial-gradient(50% 60% at 50% 20%, rgba(217,31,43,.28), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 90px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px); transform: perspective(500px) rotateX(60deg); transform-origin: bottom; }
.fila-trajes { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; align-items: flex-end; }
.fig-traje { position: relative; height: 480px; margin: 0 -10px; flex: none; cursor: pointer; filter: brightness(.5) saturate(.8); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s; }
.fig-traje img { height: 100%; width: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.75)); }
.fig-traje:hover { filter: brightness(.8); }
.fig-traje.activo { filter: none; transform: scale(1.12); }
.fig-traje .reflejo { position: absolute; left: 0; right: 0; top: 100%; height: 40%; overflow: hidden; opacity: .16; transform: scaleY(-1); -webkit-mask-image: linear-gradient(0deg, #000, transparent 60%); mask-image: linear-gradient(0deg, #000, transparent 60%); pointer-events: none; }
.fig-traje .reflejo img { height: 250%; filter: blur(2px); }
.nombres-trajes { position: absolute; left: 0; right: 0; top: 18px; z-index: 12; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 16px; }
.nombres-trajes button { height: 32px; padding: 0 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nombres-trajes button:hover { color: #fff; }
.nombres-trajes button[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 1px var(--carmesi), inset 0 -2px 0 var(--carmesi); }
.con-oro { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; }
.con-oro .txt { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--texto-2); }
.con-oro .txt img { width: 44px; height: 44px; flex: none; }
.con-oro .txt b { color: #fff; }
.con-oro ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.con-oro li { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #d6d9df; }
.con-oro li .chip { margin-left: 16px; }

/* ------------------------------------------------------------ ARMAS Y SKINS */
.armeria { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; }
.expositor { position: relative; min-height: 540px; overflow: hidden; border: 1px solid var(--linea-2); background: radial-gradient(55% 60% at 50% 50%, var(--brillo, rgba(255,80,160,.22)), transparent 70%), linear-gradient(180deg, #0c0d11, #050507); transition: background .5s; }
.expositor::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 74px; height: 2px; background: linear-gradient(90deg, transparent, var(--carmesi), transparent); box-shadow: 0 0 30px 6px rgba(217,31,43,.35); }
.expositor .arma-grande { position: absolute; left: 50%; top: 50%; width: 94%; height: 80%; object-fit: contain; transform: translate(-50%, -52%) scale(1.14); filter: drop-shadow(0 40px 40px rgba(0,0,0,.7)); transition: opacity .35s; }
.expositor .rotulo { position: absolute; left: 28px; top: 24px; }
.expositor .rotulo b { display: block; font-size: 42px; line-height: 1; text-transform: uppercase; margin-top: 4px; }
.expositor .rotulo small { font-size: 15px; color: var(--texto-2); letter-spacing: .14em; text-transform: uppercase; }
.expositor .pie-expo { position: absolute; left: 28px; right: 28px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; color: var(--texto-2); letter-spacing: .06em; text-transform: uppercase; }
.expositor .pie-expo b { color: #fff; }
.selector-skin { display: flex; flex-direction: column; gap: 10px; }
.opcion-skin { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--linea-2); background: rgba(18,20,25,.9); text-align: left; transition: border-color .2s, background .2s; }
.opcion-skin:hover { border-color: rgba(255,255,255,.28); }
.opcion-skin[aria-pressed="true"] { border-color: var(--carmesi); background: linear-gradient(90deg, rgba(217,31,43,.16), rgba(18,20,25,.9)); }
.opcion-skin .mini { height: 66px; background: #07080a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.opcion-skin .mini img { width: 125%; max-width: none; }
.opcion-skin b { display: block; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.opcion-skin .linea-precio { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--texto-3); }
.tabla-skins { padding: 14px 16px; }
.tabla-skins h4 { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; }
.tabla-skins ul { list-style: none; display: grid; gap: 7px; }
.tabla-skins li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 15px; color: var(--texto-2); }
.tabla-skins li i { width: 14px; height: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.tabla-skins li .bono-s { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.tabla-skins li .precio-s { color: #fff; display: flex; align-items: center; gap: 4px; min-width: 62px; justify-content: flex-end; }
.tabla-skins li .precio-s img { width: 18px; height: 18px; }

/* ------------------------------------------------------------ TIENDA DE CASH */
.escaparate { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; }
.recarga { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 38px 40px; min-height: 380px; background: radial-gradient(60% 70% at 78% 50%, rgba(60,230,140,.20), transparent 70%), linear-gradient(135deg, #131820, #090b0e); border: 1px solid rgba(60,230,140,.25); }
.recarga .gemas { position: absolute; right: -10px; top: 50%; width: 330px; height: 330px; transform: translateY(-50%); z-index: -1; }
.recarga .gemas img { position: absolute; filter: drop-shadow(0 18px 20px rgba(0,0,0,.6)); }
.recarga .gemas img:nth-child(1) { width: 190px; left: 70px; top: 60px; animation: flotar 6s ease-in-out infinite; }
.recarga .gemas img:nth-child(2) { width: 120px; left: 10px; top: 170px; transform: rotate(-16deg); opacity: .9; animation: flotar 7s ease-in-out -2s infinite; }
.recarga .gemas img:nth-child(3) { width: 104px; left: 210px; top: 10px; transform: rotate(14deg); opacity: .85; animation: flotar 8s ease-in-out -4s infinite; }
@keyframes flotar { 50% { translate: 0 -10px; } }
.recarga h3 { font-size: 44px; line-height: .95; text-transform: uppercase; max-width: 380px; }
.recarga h3 em { font-style: normal; color: var(--cash-titulo); }
.recarga p { margin: 14px 0 26px; max-width: 360px; color: var(--texto-2); font-size: 17px; }
.recarga .bc { width: 330px; max-width: 100%; }
.recarga .pequeno { margin-top: 14px; font-size: 14px; color: var(--texto-3); }
.monedas-dos { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.moneda-exp { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.moneda-exp img { width: 112px; height: 112px; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.moneda-exp h3 { font-size: 30px; line-height: 1; text-transform: uppercase; }
.moneda-exp.o h3 { color: var(--oro-titulo); } .moneda-exp.c h3 { color: var(--cash-titulo); }
.moneda-exp p { font-size: 16px; color: var(--texto-2); margin-top: 6px; line-height: 1.38; }
.que-compras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.compra { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 18px; border: 1px solid var(--linea-2); background: linear-gradient(180deg, #16181e, #0c0e11); transition: border-color .2s, transform .2s; }
.compra:hover { border-color: var(--oro); transform: translateY(-3px); }
.compra > img { position: absolute; z-index: -1; right: 5%; top: 4%; height: 62%; width: auto; max-width: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.6)); transition: transform .5s; }
.compra:hover > img { transform: scale(1.05) rotate(-2deg); }
.compra > img.ancha { height: auto; width: 100%; right: -14%; top: -8%; }
/* El traje de medio cuerpo y grande: de cuerpo entero en una tarjeta de 230 px
   salía diminuto y pegado al borde. */
.compra > img.figura { height: 190%; top: -5%; right: 10%; }
.compra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,11,14,.96) 20%, rgba(10,11,14,.1) 70%); }
.compra b { font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.compra small { display: block; font-size: 14px; color: var(--texto-2); margin: 4px 0 10px; }
.compra .desde { display: flex; align-items: center; gap: 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.compra .desde .chip { margin-left: 16px; }
.objetos-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 44px 0 14px; }
.objetos-cab h3 { font-size: 30px; text-transform: uppercase; line-height: 1; }
.objetos-cab p { color: var(--texto-3); font-size: 15px; margin-top: 6px; }
.rejilla-objetos { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; }
.objeto { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 12px; text-align: center; background: linear-gradient(180deg, #1a1d23, #101216); border: 1px solid var(--linea); border-bottom: 2px solid var(--c, var(--linea)); transition: border-color .2s, transform .2s; }
.objeto:hover { border-color: var(--oro); transform: translateY(-3px); }
.objeto.raro { --c: rgba(79,156,255,.6); } .objeto.epico { --c: rgba(181,108,255,.6); }
.objeto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
/* Nombre y descripción con sitio para dos líneas y el precio siempre abajo: con
   «Última Venganza» (dos líneas) la fila se descuadraba. */
.objeto b { font-size: 13.5px; line-height: 1.08; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.objeto small { font-size: 12px; color: var(--texto-3); line-height: 1.15; min-height: 2.35em; }
.objeto .chip { margin-top: auto; }
.objeto small + .chip { margin-top: auto; }
.objeto > small { margin-bottom: 8px; }
.saldo .saldo-nota { font-size: 14.5px; color: var(--texto-2); line-height: 1.35; margin: 0 0 16px; }

/* ------------------------------------------------------------ LLAMADA FINAL */
.portada .pie { margin-top: 0; }
.llamada { position: relative; isolation: isolate; overflow: hidden; margin-top: 110px; border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2); }
.llamada > picture img, .llamada > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.llamada::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.86) 42%, rgba(8,9,11,.35) 78%, rgba(8,9,11,.55)), linear-gradient(0deg, rgba(8,9,11,.6), transparent 40%); }
.llamada .env { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 48px; align-items: center; padding: 84px 0; }
.llamada h2 { font-size: 62px; line-height: .93; text-transform: uppercase; margin: 12px 0 14px; }
.llamada .lead { font-size: 19px; color: #c4c8cf; max-width: 540px; }
.llamada .botones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; max-width: 660px; list-style: none; }
.paso { padding: 14px 16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--linea-2); }
.paso i { font-style: normal; font-size: 34px; font-weight: 700; line-height: 1; color: var(--carmesi-claro); }
.paso b { display: block; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.paso small { font-size: 14px; color: var(--texto-3); line-height: 1.3; display: block; margin-top: 2px; }
.una-cuenta ul { list-style: none; display: grid; gap: 0; }
.una-cuenta li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.una-cuenta li:last-child { border-bottom: 0; }
.una-cuenta li .ico { width: 28px; height: 28px; color: var(--carmesi-claro); margin-top: 2px; }
.una-cuenta li b { display: block; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.una-cuenta li span { font-size: 15px; color: var(--texto-2); line-height: 1.35; }

/* ------------------------------------------------------------ ADAPTACIÓN */
@media (max-width: 1360px) {
  .rejilla-objetos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .logo-op { font-size: 80px; } .logo-tn { font-size: 48px; }
}
@media (max-width: 1180px) {
  .rejilla-portal { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: grid; grid-template-columns: 1fr 1fr; }
  .lateral .ranking-prox { grid-column: 1 / -1; }
  .vitrina, .armeria, .escaparate { grid-template-columns: minmax(0, 1fr); }
  .mapas { grid-template-columns: 1fr 1fr; }
  .modos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modo:nth-child(3) { border-right: 0; }
  .modo:nth-child(-n+3) { border-bottom: 1px solid var(--linea); }
  .que-compras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llamada .env { grid-template-columns: minmax(0, 1fr); }
  .franja-caja { grid-template-columns: 1.5fr 1fr; }
  .franja-celda.noticia { display: none; }
}
@media (max-width: 760px) {
  /* Póster: la foto vertical, el logo arriba y los botones abajo, centrado. */
  .poster { height: auto; min-height: 0; max-height: none; }
  .poster-foto { position: relative; inset: auto; height: min(178vw, 820px); }
  .poster-foto img { object-position: 50% 42%; }
  .poster::before { background: linear-gradient(180deg, rgba(4,5,8,.8) 0%, rgba(4,5,8,.2) 16%, rgba(4,5,8,0) 34%, rgba(13,15,18,0) 45%, rgba(13,15,18,.9) 62%, var(--carbon) 72%); }
  .poster-contenido { position: absolute; inset: 0 0 auto 0; padding: 78px 0 0; justify-content: flex-start; text-align: center; }
  .poster-contenido .arriba { align-items: center; }
  .temporada { font-size: 12px; letter-spacing: .24em; margin-bottom: 10px; }
  .temporada::before { width: 22px; }
  .logo-grande { align-items: center; }
  .logo-op { font-size: 42px; }
  .logo-tn { font-size: 30px; letter-spacing: .5em; margin-top: 6px; gap: 12px; }
  .lema { display: none; }
  .poster-contenido .abajo { position: absolute; top: calc(min(178vw, 820px) - 206px); left: var(--gutter); right: var(--gutter); }
  .llamadas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; }
  .llamadas .sombra-roja, .llamadas .btn { width: 100%; }
  .llamadas .btn-grande { height: 56px; font-size: 19px; }
  .ya-cuenta { justify-content: center; margin-top: 12px; font-size: 15.5px; }
  .brasas { height: min(178vw, 820px); bottom: auto; }
  .franja { position: relative; bottom: auto; margin-top: 8px; }
  .franja-caja { grid-template-columns: 1fr; }
  .franja-celda.noticia { display: flex; }
  .franja-celda + .franja-celda { border-left: 0; border-top: 1px solid var(--linea); }
  .franja-celda { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .franja-celda > img { width: 44px; height: 44px; }
  .franja-celda strong { font-size: 17.5px; }
  .franja-celda.evento .cuenta-atras { width: 100%; }
  .franja-celda.evento .cuenta-atras span { flex: 1; }
  .portal { padding-top: 22px; }
  .accesos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acceso { height: 108px; padding: 12px 14px; }
  .acceso b { font-size: 18px; }
  .acceso small { font-size: 13px; }
  .acceso .icono { top: 12px; left: 14px; }
  .lateral { display: flex; }
  .noticias .cab-panel { flex-wrap: wrap; padding: 10px 14px; }
  .noticias .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .destacada { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .destacada h3 { font-size: 25px; }
  .nota { grid-template-columns: 104px minmax(0, 1fr); padding: 12px 14px; }
  .nota .foto { width: 104px; height: 68px; }
  .mapas { grid-template-columns: minmax(0, 1fr); }
  .mapa { min-height: 440px; }
  .mapa h3 { font-size: 38px; }
  .modos { grid-template-columns: 1fr 1fr; }
  .modo { border-right: 0 !important; border-bottom: 1px solid var(--linea); padding: 16px 14px; }
  .modo:nth-child(odd) { border-right: 1px solid var(--linea) !important; }
  .ficha { padding: 22px 18px; }
  .ficha h3 { font-size: 38px; }
  .bono { grid-template-columns: 96px 1fr 52px; }
  .escenario { min-height: 470px; }
  .fig-traje { height: 330px; margin: 0 -8px; }
  .fig-traje.lejos { display: none; }
  .nombres-trajes { top: 12px; gap: 5px; }
  .nombres-trajes button { height: 28px; font-size: 12.5px; padding: 0 8px; }
  .fila-trajes { bottom: 22px; }
  .expositor { min-height: 320px; }
  .expositor .rotulo { left: 18px; top: 16px; }
  .expositor .rotulo b { font-size: 28px; }
  .expositor .pie-expo { left: 18px; right: 18px; bottom: 12px; font-size: 13px; }
  .expositor::before { bottom: 44px; }
  .opcion-skin { grid-template-columns: 96px minmax(0, 1fr); }
  .tabla-skins li { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .tabla-skins li .bono-s { grid-column: 2 / 4; grid-row: 2; margin-top: -4px; }
  .recarga { padding: 28px 20px 30px; min-height: 0; }
  .recarga .gemas { width: 200px; height: 200px; right: -30px; top: 16px; transform: none; opacity: .55; }
  .recarga .gemas img:nth-child(1) { width: 120px; left: 40px; top: 30px; }
  .recarga .gemas img:nth-child(2) { width: 76px; left: 0; top: 100px; }
  .recarga .gemas img:nth-child(3) { width: 66px; left: 130px; top: 0; }
  .recarga h3 { font-size: 34px; }
  .recarga .bc { width: 100%; }
  .moneda-exp { padding: 18px; gap: 14px; }
  .moneda-exp img { width: 78px; height: 78px; }
  .moneda-exp h3 { font-size: 24px; }
  .que-compras { gap: 10px; }
  .compra { min-height: 190px; padding: 14px; }
  .compra b { font-size: 17px; }
  .compra > img { height: 50%; top: 2%; right: 2%; opacity: .9; }
  .compra > img.ancha { width: 110%; top: -6%; right: -30%; }
  .compra > img.figura { height: 170%; top: -4%; right: 4%; }
  .compra .desde .sufijo { display: none; }
  .expositor .pie-expo > span:last-child { display: none; }
  .noticias-pie #cuantasNoticias { display: none; }
  .noticias-pie { justify-content: flex-end; }
  .recarga .gemas { opacity: .3; top: -20px; right: -50px; }
  .recarga h3, .recarga p { position: relative; }
  .objetos-cab { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* En el móvil la caja de entrar y la del Cash repetían lo que ya está en la
     cabecera (ENTRAR, CREAR CUENTA y el Cash con su «+»): la página medía 13.500 px. */
  .lateral .cuenta-caja, .lateral .saldo { display: none; }
  .mapa { min-height: 360px; }
  .rejilla-objetos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .llamada { margin-top: 80px; }
  .llamada .env { padding: 56px 0; gap: 30px; }
  .llamada h2 { font-size: 42px; }
  .llamada .botones .btn { width: 100%; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ LO NUEVO (08/10/2026) ============================
   Capturas del juego en rejilla: la de la bomba, grande; las demás, de dos en dos. */
.novedades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nov { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.nov img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--carbon); }
.nov figcaption { padding: 14px 16px 16px; display: grid; gap: 6px; }
.nov figcaption b { font-family: "Rajdhani", sans-serif; font-size: 21px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.nov figcaption span { color: var(--texto-2); font-size: 15px; line-height: 1.45; }
.nov-grande { grid-column: span 2; grid-row: span 2; }
.nov-grande figcaption b { font-size: 26px; }
.nov-grande figcaption span { font-size: 16px; }
.nov-monedas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; color: var(--texto-2); font-size: 16px; }
.nov-monedas img { width: 28px; height: 28px; object-fit: contain; }
.nov-monedas > span { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; }
.nov-monedas b { color: var(--texto); }
@media (max-width: 1180px) {
  .novedades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nov-grande { grid-row: auto; }
}
@media (max-width: 760px) {
  .novedades { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nov-grande { grid-column: auto; }
  .nov figcaption b, .nov-grande figcaption b { font-size: 20px; }
}