/* =============================================================================
   TORMENTA NEGRA OPS · la Guía (guia, guia-armas, guia-mapas, guia-trajes,
   guia-objetos)
   -----------------------------------------------------------------------------
   Va encima de juego.css y usa sus colores, marcos, botones y monedas. Aquí solo
   está lo propio de la Guía: la barra de secciones, los filtros, las fichas de
   arma / traje / objeto, la ventana de ficha completa y los mapas.

   Todo lleva el prefijo g- para no pisar nada de juego.css (allí .tienda,
   .evento, .objetos y .novedad son etiquetas: definirlas sueltas las rompería).

   Índice:
     1. Barra de secciones      6. Trajes
     2. Filtros y buscador      7. Objetos y munición
     3. Barras de estadística   8. Mapas y modos
     4. Armas                   9. Índice de la Guía
     5. Ficha completa (modal) 10. Móvil
   ========================================================================== */

/* Colores de rareza en una sola variable: la ficha pone --r según su rareza y
   todo lo demás (borde, brillo, etiqueta) sale de ahí. */
.g-r-normal { --r: #9aa1ad; --r-fondo: rgba(154,161,173,.14); }
.g-r-raro { --r: var(--raro); --r-fondo: rgba(79,156,255,.18); }
.g-r-epico { --r: var(--epico); --r-fondo: rgba(181,108,255,.2); }
.g-r-legendario { --r: var(--legendario); --r-fondo: rgba(255,161,46,.2); }
.g-r-mitico { --r: var(--mitico); --r-fondo: rgba(255,74,90,.22); }
.rar.normal { color: #9aa1ad; }

/* 1. BARRA DE SECCIONES ----------------------------------------------------------
   Debajo de la cabeza de página, pegada bajo la cabecera al bajar: así se salta
   de Armas a Trajes sin volver al menú. */
.g-secciones { position: sticky; top: var(--alto-cab); z-index: 40; margin: -56px 0 44px; background: rgba(9,10,12,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.g-secciones .env { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.g-secciones .env::-webkit-scrollbar { display: none; }
.g-secciones a { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 58px; padding: 0 18px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-2); transition: color .2s; }
.g-secciones a .ico { width: 18px; height: 18px; opacity: .7; }
.g-secciones a small { font-size: 12px; color: var(--texto-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.g-secciones a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--carmesi); transform: scaleX(0); transition: transform .25s; }
.g-secciones a:hover { color: #fff; }
.g-secciones a[aria-current="page"] { color: #fff; }
.g-secciones a[aria-current="page"]::after, .g-secciones a:hover::after { transform: scaleX(1); }
.g-secciones a[aria-current="page"] .ico { color: var(--carmesi-claro); opacity: 1; }

/* Cabeza oscura con una figura (el arma con fuego): la foto del mapa queda de fondo
   apagado para que la figura, que ya trae su propia luz, se lea sin pelearse con él. */
.g-cab-oscura::before { filter: brightness(.38) saturate(.55) blur(2px); }
.g-cab-oscura .env { position: relative; z-index: 1; }
.g-cab-oscura::after { background: radial-gradient(40% 60% at 72% 52%, rgba(255,110,20,.16), transparent 70%), linear-gradient(90deg, rgba(6,7,9,.94) 0%, rgba(6,7,9,.72) 38%, rgba(6,7,9,.2) 75%), linear-gradient(0deg, var(--carbon) 0%, rgba(13,15,18,.4) 40%, rgba(6,7,9,.5) 100%); }
.g-cab-figura { position: absolute; right: -5%; top: 50%; z-index: 0; width: min(74%, 1180px); transform: translateY(-46%); pointer-events: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)); }

/* Cifras grandes bajo el título de la cabeza. */
.g-cifras { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 26px; }
.g-cifras div { display: flex; flex-direction: column; }
.g-cifras b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-cifras span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); margin-top: 4px; }

/* 2. FILTROS Y BUSCADOR ------------------------------------------------------------ */
.g-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 18px; margin-bottom: 22px; }
.g-grupo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-grupo > span { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); flex: none; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; font-size: 14.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--linea-2); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: color .15s, background .15s, box-shadow .15s; }
.g-chip:hover { color: #fff; background: rgba(255,255,255,.07); }
.g-chip[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgba(217,31,43,.4), rgba(217,31,43,.18)); box-shadow: inset 0 0 0 1px rgba(255,61,72,.75); }
.g-chip .punto { width: 9px; height: 9px; transform: rotate(45deg); background: var(--r, var(--texto-3)); flex: none; }
.g-chip img { width: 20px; height: 20px; }
.g-chip small { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.g-chip[aria-pressed="true"] small { color: rgba(255,255,255,.7); }
.g-orden { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.g-select { height: 34px; padding: 0 30px 0 12px; font-size: 14.5px; font-weight: 700; color: #fff; background: #111317 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a9aeb8' stroke-width='2.4' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat; border: 1px solid var(--linea-2); border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.g-cuenta { font-size: 14px; color: var(--texto-3); letter-spacing: .06em; }
.g-cuenta b { color: #fff; }
.g-sin-resultados { grid-column: 1 / -1; }

/* Buscador de la Guía (en el índice). La lista de resultados tiene que poder salir por
   debajo de la cabeza y quedar encima de la barra de secciones: esa cabeza no recorta
   (y por eso no lleva el acercamiento de la foto, que sin recorte se saldría). */
.g-cab-buscador { overflow: visible; z-index: 45; }
.g-cab-buscador::before { animation: none; }
.g-buscador { position: relative; max-width: 620px; margin-top: 28px; }
.g-buscador .caja-b { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; background: rgba(8,9,11,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: box-shadow .2s; }
.g-buscador .caja-b:focus-within { box-shadow: inset 0 0 0 1px var(--carmesi-claro), 0 0 0 4px rgba(217,31,43,.18); }
.g-buscador .caja-b .ico { width: 22px; height: 22px; color: var(--texto-3); }
.g-buscador input { flex: 1; min-width: 0; height: 100%; font-size: 18px; font-weight: 600; background: none; border: 0; outline: 0; color: #fff; }
.g-buscador input::placeholder { color: var(--texto-3); }
.g-buscador kbd { font: 700 12px "Rajdhani", sans-serif; letter-spacing: .08em; color: var(--texto-3); padding: 3px 7px; box-shadow: inset 0 0 0 1px var(--linea-2); }
.g-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 420px; overflow-y: auto; background: #0e1014; border: 1px solid var(--linea-2); box-shadow: 0 24px 60px rgba(0,0,0,.7); }
.g-resultados[hidden] { display: none; }
.g-resultados a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid var(--linea); }
.g-resultados a:hover, .g-resultados a.activo { background: rgba(217,31,43,.1); }
.g-resultados .mini { width: 64px; height: 44px; object-fit: contain; background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }
.g-resultados .mini.retrato { object-fit: cover; object-position: 50% 20%; }
.g-resultados b { display: block; font-size: 17px; line-height: 1.1; }
.g-resultados small { font-size: 13px; color: var(--texto-3); letter-spacing: .04em; }
.g-resultados .seccion-r { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.g-resultados .nada { padding: 18px; color: var(--texto-2); font-size: 15px; }
.g-resultados mark { background: none; color: var(--oro); }

/* 3. BARRAS DE ESTADÍSTICA ---------------------------------------------------------
   Las de la ficha de arma del juego (0-100). Cada barra lleva su cifra; la
   rayita blanca marca la media de las doce armas para leerla de un vistazo. */
.g-barras { display: grid; gap: 7px; }
.g-barra { display: grid; grid-template-columns: 82px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.g-barra .riel { position: relative; height: 8px; background: rgba(255,255,255,.07); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.g-barra .lleno { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: linear-gradient(90deg, #8e1119, var(--carmesi) 60%, #ff5a4a); box-shadow: 0 0 12px rgba(217,31,43,.45); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.g-barra .media { position: absolute; top: -2px; bottom: -2px; left: calc(var(--m) * 1%); width: 2px; background: rgba(255,255,255,.55); }
.g-barra b { color: #fff; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
.g-barra.minimo .lleno { opacity: .55; }
.g-barra.minimo b { color: var(--texto-3); font-size: 12.5px; letter-spacing: .04em; }
.g-precio-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 0 2px; border-top: 1px solid var(--linea); }
.g-precio-linea > span:not(.chip) { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.g-precio-linea .chip { margin-left: 13px; }
.g-precio-linea em { font-style: normal; font-size: 14px; color: var(--texto-2); }
.g-precio-linea small { flex-basis: 100%; font-size: 13.5px; color: var(--texto-3); }
.g-barra.oro .lleno { background: linear-gradient(90deg, #7a5410, var(--oro)); box-shadow: 0 0 12px rgba(255,196,70,.35); }
.g-barra.verde .lleno { background: linear-gradient(90deg, #11663c, var(--cash)); box-shadow: 0 0 12px rgba(60,230,140,.3); }

/* 4. ARMAS -------------------------------------------------------------------------- */
.g-armas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-arma { position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; background: linear-gradient(180deg, #16181d, #0e1013); border: 1px solid var(--linea-2); transition: border-color .25s, transform .25s, box-shadow .25s; }
.g-arma::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--carmesi); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.g-arma:hover, .g-arma:focus-visible { border-color: rgba(217,31,43,.55); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.g-arma:hover::after { transform: scaleX(1); }
.g-arma .vitrina-a { position: relative; height: 190px; overflow: hidden; background: radial-gradient(60% 70% at 50% 60%, rgba(217,31,43,.14), transparent 70%), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.025) 39px 40px), linear-gradient(180deg, #0b0c0f, #121419); border-bottom: 1px solid var(--linea); }
.g-arma .vitrina-a::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,61,72,.55), transparent); }
.g-arma .vitrina-a img { position: absolute; inset: 18px 22px 30px; width: calc(100% - 44px); height: calc(100% - 48px); object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.65)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.g-arma:hover .vitrina-a img { transform: scale(1.05); }
.g-arma .sup { position: absolute; left: 14px; right: 14px; top: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-clase { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: #fff; background: var(--c, #555); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.g-clase.AR { --c: #c8161f; } .g-clase.SR { --c: #2f6fd6; } .g-clase.SMG { --c: #139655; } .g-clase.SG { --c: #b27a0c; } .g-clase.LMG { --c: #7a3fd0; } .g-clase.PST { --c: #5d626d; }
.g-nivel { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.g-nivel b { color: #fff; }
.g-salida { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cash); box-shadow: inset 0 0 0 1px rgba(60,230,140,.45); background: rgba(60,230,140,.07); }
.g-arma .cuerpo-a { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; flex: 1; }
.g-arma h3 { font-size: 27px; line-height: 1; text-transform: uppercase; }
.g-arma .modelo { font-size: 14px; color: var(--texto-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.g-datos-cortos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); padding-top: 12px; margin-top: auto; }
.g-datos-cortos div { display: flex; flex-direction: column; gap: 2px; padding-right: 6px; }
.g-datos-cortos div + div { padding-left: 10px; border-left: 1px solid var(--linea); }
.g-datos-cortos span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.g-datos-cortos b { font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ver { display: flex; align-items: center; justify-content: space-between; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.g-ver .ico { width: 16px; height: 16px; transition: transform .2s; }
.g-arma:hover .g-ver { color: #fff; }
.g-arma:hover .g-ver .ico { transform: translateX(4px); color: var(--carmesi-claro); }

/* Tabla comparativa: ordenable por columna. */
.g-tabla th button { display: inline-flex; align-items: center; gap: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.g-tabla th button:hover { color: #fff; }
.g-tabla th[aria-sort] button { color: #fff; }
.g-tabla th button::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; opacity: 0; }
.g-tabla th[aria-sort="ascending"] button::after { border-top-color: transparent; border-bottom-color: currentColor; margin: -4px 0 0; opacity: 1; }
.g-tabla th[aria-sort="descending"] button::after { opacity: 1; }
.g-tabla td.num, .g-tabla th.num { text-align: right; }
.g-tabla td .nom { display: flex; align-items: center; gap: 12px; }
.g-tabla td .nom img { width: 74px; height: 30px; object-fit: contain; flex: none; }
.g-tabla td .nom b { display: block; font-size: 16.5px; color: #fff; line-height: 1.1; }
.g-tabla td .nom small { font-size: 12.5px; color: var(--texto-3); letter-spacing: .06em; }
.g-tabla tbody tr { cursor: pointer; }
.g-celda-barra { display: inline-flex; align-items: center; gap: 8px; }
.g-celda-barra i { display: block; width: 46px; height: 5px; background: rgba(255,255,255,.08); position: relative; }
.g-celda-barra i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--carmesi); }

/* Skins de arma */
.g-skins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-skin { position: relative; display: flex; flex-direction: column; background: #0d0e12; border: 1px solid var(--linea-2); overflow: hidden; }
.g-skin::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--r); box-shadow: 0 0 18px 2px var(--r); z-index: 3; }
.g-skin .foto-s { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #07080a; }
.g-skin .foto-s img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.g-skin:hover .foto-s img { transform: scale(1.26); }
.g-skin .foto-s::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0d0e12 2%, transparent 45%), radial-gradient(80% 70% at 50% 50%, transparent 50%, rgba(0,0,0,.45)); }
.g-skin .fuego { position: absolute; right: 12px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd6a3; background: rgba(255,110,20,.18); box-shadow: inset 0 0 0 1px rgba(255,140,40,.55); }
.g-skin .cuerpo-s { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 18px; flex: 1; }
.g-skin h3 { font-size: 26px; line-height: 1; text-transform: uppercase; }
.g-skin p { font-size: 15.5px; color: var(--texto-2); line-height: 1.35; }
.g-bonos { display: flex; flex-wrap: wrap; gap: 6px; }
.g-bono { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 14.5px; font-weight: 700; color: #7ce38b; background: rgba(124,227,139,.08); box-shadow: inset 0 0 0 1px rgba(124,227,139,.3); font-variant-numeric: tabular-nums; }
.g-bono.malo { color: #ff8a7a; background: rgba(255,92,74,.08); box-shadow: inset 0 0 0 1px rgba(255,92,74,.3); }
.g-bono.neutro { color: var(--texto-2); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--linea-2); }
.g-precio-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.g-precio-fila .nota { font-size: 13px; color: var(--texto-3); letter-spacing: .06em; line-height: 1.25; }

/* 5. FICHA COMPLETA (ventana) ------------------------------------------------------- */
.g-modal { width: min(1120px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; color: var(--texto); background: linear-gradient(180deg, #15171c, #0c0d10); border: 1px solid var(--linea-2); box-shadow: 0 40px 120px rgba(0,0,0,.8); overflow: hidden; }
.g-modal::backdrop { background: rgba(3,3,5,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.g-modal[open] { display: flex; flex-direction: column; animation: g-abrir .28s cubic-bezier(.2,.7,.2,1); }
@keyframes g-abrir { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.g-modal .cab-modal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 0 22px; min-height: 56px; border-bottom: 1px solid var(--carmesi); background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 60%); }
.g-modal .cab-modal .navm { display: flex; gap: 4px; }
.g-modal .cab-modal button { width: 42px; height: 42px; display: grid; place-items: center; color: var(--texto-2); }
.g-modal .cab-modal button:hover { color: #fff; background: rgba(255,255,255,.06); }
.g-modal .cab-modal .ruta { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.g-modal .cuerpo-modal { overflow-y: auto; }
.g-ficha-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-bottom: 1px solid var(--linea); }
.g-ficha-foto { position: relative; min-height: 330px; background: radial-gradient(60% 60% at 50% 55%, rgba(217,31,43,.2), transparent 70%), linear-gradient(180deg, #0a0b0e, #111318); border-right: 1px solid var(--linea); overflow: hidden; }
.g-ficha-foto::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.03) 59px 60px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,255,255,.03) 59px 60px); }
.g-ficha-foto img { position: absolute; left: 50%; top: 50%; width: calc(var(--escala, 1) * 88%); max-height: 78%; object-fit: contain; transform: translate(-50%, -52%); filter: drop-shadow(0 26px 26px rgba(0,0,0,.7)); }
.g-ficha-foto .regla { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.g-ficha-foto .regla b { color: #fff; }
.g-ficha-info { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.g-ficha-info h2 { font-size: 46px; line-height: .95; text-transform: uppercase; }
.g-ficha-info .rol { font-size: 17px; line-height: 1.4; color: #d3d6dc; }
.g-ficha-bloques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-ficha-bloques > section { padding: 20px 24px 24px; border-right: 1px solid var(--linea); }
.g-ficha-bloques > section:last-child { border-right: 0; }
.g-ficha-bloques h3 { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--carmesi-claro); margin-bottom: 14px; }
.g-matar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-matar div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--linea); }
.g-matar span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.g-matar b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-matar b small { font-size: 13px; color: var(--texto-3); margin-left: 3px; font-weight: 600; }
.g-matar .cab b { color: var(--oro); }
.g-nota { font-size: 13px; color: var(--texto-3); line-height: 1.35; margin-top: 10px; }
/* Caída de daño: un dibujo del daño según la distancia, de 0 al alcance. */
.g-caida { position: relative; margin-top: 4px; }
.g-caida svg { display: block; width: 100%; height: 80px; overflow: visible; }
.g-caida .eje { position: relative; height: 16px; font-size: 12px; color: var(--texto-3); letter-spacing: .04em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-caida .eje span { position: absolute; top: 0; transform: translateX(-50%); }
.g-caida .eje span:first-child { transform: none; }
.g-caida .eje span:last-child { transform: translateX(-100%); }
.g-mira { display: flex; gap: 14px; align-items: flex-start; }
.g-mira .reticula { width: 76px; height: 76px; flex: none; border-radius: 50%; background: radial-gradient(circle, #1b2a22 0, #0b100d 70%); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 5px #2a2d33, 0 0 0 1px var(--linea-2); display: grid; place-items: center; color: #e33; }
.g-mira .reticula svg { width: 70%; height: 70%; }
.g-mira b { display: block; font-size: 20px; line-height: 1.1; }
.g-mira p { font-size: 14.5px; color: var(--texto-2); margin-top: 4px; line-height: 1.35; }

/* 6. TRAJES --------------------------------------------------------------------------- */
/* El escenario: a la izquierda la ficha del elegido, a la derecha los seis en fila. */
.g-escenario { position: relative; display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 540px; overflow: hidden; margin-bottom: 26px; border: 1px solid var(--linea-2); background: radial-gradient(45% 60% at 62% 72%, rgba(217,31,43,.25), transparent 70%), linear-gradient(180deg, #07080a, #0f1115 70%, #07080a); }
.g-escenario::after { content: ""; position: absolute; left: 380px; right: 4%; bottom: 46px; height: 2px; background: linear-gradient(90deg, transparent, var(--carmesi), transparent); box-shadow: 0 0 34px 8px rgba(217,31,43,.35); }
.g-escenario .lado-e { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 26px; background: linear-gradient(90deg, rgba(6,7,9,.9), rgba(6,7,9,.55)); border-right: 1px solid var(--linea); }
.g-escenario .rotulo-e b { display: block; font-size: 44px; line-height: .95; text-transform: uppercase; margin: 10px 0 10px; }
.g-escenario .rotulo-e p { font-size: 16px; color: var(--texto-2); line-height: 1.4; }
.g-escenario .rotulo-e .g-bonos { margin-top: 14px; }
.g-escenario .pie-e { display: grid; gap: 10px; margin-top: auto; }
.g-escenario .pie-e .bc { min-width: 0; }
.g-escenario .fila-p { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 20px 10px 38px; }
.g-escenario button { position: relative; display: block; height: 94%; margin: 0 -16px; transition: transform .35s, filter .35s; filter: brightness(.5) saturate(.8); }
.g-escenario button img { height: 100%; width: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.8)); }
.g-escenario button:hover { filter: brightness(.85); z-index: 2; }
.g-escenario button.activo { filter: brightness(1.08) drop-shadow(0 0 24px rgba(255,61,72,.35)); transform: translateY(-8px) scale(1.06); z-index: 3; }

.g-trajes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.g-traje { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #14161b, #0d0e11); border: 1px solid var(--linea-2); overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; }
.g-traje:hover { border-color: var(--r); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px var(--r); }
.g-traje .retrato { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1c24; }
.g-traje .retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .9s cubic-bezier(.2,.7,.2,1); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 99%); mask-image: linear-gradient(180deg, #000 62%, transparent 99%); }
/* Encuadre de cabeza y pecho: los retratos salen de fotos en pose en T, y con el
   busto entero los brazos abiertos quedaban cortados por los lados. */
.g-traje .retrato img { transform: scale(1.25); transform-origin: 50% 0; }
.g-traje:hover .retrato img { transform: scale(1.3); }
.g-traje .retrato::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 55% at 50% 100%, var(--r-fondo), transparent 70%); }
.g-traje .retrato::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--r); box-shadow: 0 0 18px 2px var(--r); opacity: .9; }
.g-traje .etiquetas-t { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; display: flex; justify-content: space-between; gap: 6px; }
.g-rareza { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(6,7,9,.7); box-shadow: inset 0 0 0 1px var(--r); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.g-rareza::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--r); }
.g-traje .cuerpo-t { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; flex: 1; }
.g-traje h3 { font-size: 23px; line-height: 1; text-transform: uppercase; }
.g-traje p { font-size: 14.5px; color: var(--texto-2); line-height: 1.33; }
.g-traje .g-barras { gap: 5px; }
.g-traje .g-barra { grid-template-columns: 74px minmax(0, 1fr) 26px; font-size: 12px; }
.g-traje .g-barra b { font-size: 13.5px; }
.g-traje .g-barra .riel { height: 6px; }
.g-traje .precios-t { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; }
.g-traje .precios-t .bc { min-width: 0; }
.g-gratis { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cash); box-shadow: inset 0 0 0 1px rgba(60,230,140,.35); background: rgba(60,230,140,.06); }

/* 7. OBJETOS Y MUNICIÓN ------------------------------------------------------------- */
.g-huecos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 26px; }
.g-huecos .dos { display: flex; gap: 12px; }
.g-huecos .hueco { width: 96px; height: 96px; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(217,31,43,.18), transparent), #0b0c0f; box-shadow: inset 0 0 0 1px rgba(255,61,72,.5); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.g-huecos .hueco img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.g-huecos h3 { font-size: 26px; text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.g-huecos p { color: var(--texto-2); font-size: 16px; line-height: 1.4; max-width: 720px; }
.g-objetos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.g-objeto { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #15171c, #0d0e11); border: 1px solid var(--linea-2); overflow: hidden; transition: border-color .25s, transform .25s; }
.g-objeto:hover { border-color: var(--r); transform: translateY(-3px); }
.g-objeto .foto-o { position: relative; height: 190px; display: grid; place-items: center; background: radial-gradient(55% 60% at 50% 55%, var(--r-fondo), transparent 72%), linear-gradient(180deg, #0a0b0e, #121419); border-bottom: 1px solid var(--linea); }
.g-objeto .foto-o img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0,0,0,.65)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.g-objeto:hover .foto-o img { transform: scale(1.08) rotate(-3deg); }
.g-objeto .foto-o .g-rareza { position: absolute; left: 12px; top: 12px; }
.g-objeto .cuerpo-o { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.g-objeto h3 { font-size: 24px; line-height: 1; text-transform: uppercase; }
.g-objeto .que { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); margin-top: 3px; }
.g-objeto p { font-size: 15px; color: var(--texto-2); line-height: 1.35; }
.g-efecto { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(90deg, rgba(217,31,43,.2), transparent); border-left: 3px solid var(--carmesi); }
.g-efecto .ico { width: 18px; height: 18px; color: var(--carmesi-claro); }
.g-objeto .precios-o, .g-bala .precios-o { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.g-objeto .precios-o { grid-template-columns: minmax(0, 1fr); }
.g-objeto .bc, .g-bala .bc { min-width: 0; }

.g-balas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-bala { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #15171c, #0d0e11); border: 1px solid var(--linea-2); overflow: hidden; }
.g-bala::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color); box-shadow: 0 0 20px 3px var(--color); }
.g-bala .foto-b { position: relative; height: 210px; background: radial-gradient(55% 65% at 50% 55%, color-mix(in srgb, var(--color) 28%, transparent), transparent 72%), #0b0c0f; display: grid; place-items: center; border-bottom: 1px solid var(--linea); }
.g-bala .foto-b img { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.7)); }
.g-bala .sigla { position: absolute; left: 16px; top: 12px; font-size: 54px; line-height: 1; font-weight: 700; color: var(--color); text-shadow: 0 0 24px color-mix(in srgb, var(--color) 60%, transparent); }
.g-bala .cuerpo-b { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.g-bala h3 { font-size: 26px; line-height: 1; text-transform: uppercase; }
.g-bala h3 small { display: block; font-size: 13px; letter-spacing: .12em; color: var(--texto-3); margin-top: 4px; }
.g-bala p { font-size: 15.5px; color: var(--texto-2); line-height: 1.38; }

/* 8. MAPAS Y MODOS ---------------------------------------------------------------------- */
.g-mapa { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--linea-2); background: linear-gradient(180deg, #14161b, #0d0e11); margin-bottom: 26px; scroll-margin-top: calc(var(--alto-cab) + 80px); }
.g-mapa:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.g-mapa:nth-child(even) .foto-m { order: 2; border-left: 1px solid var(--linea); border-right: 0; }
.g-mapa .foto-m { position: relative; min-height: 460px; overflow: hidden; border-right: 1px solid var(--linea); }
.g-mapa .foto-m > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.g-mapa:hover .foto-m > img { transform: scale(1.03); }
.g-mapa .foto-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,7,9,.7), transparent 40%); pointer-events: none; }
.g-mapa .aerea { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 34%; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 16px 40px rgba(0,0,0,.6); background: #000; }
.g-mapa .aerea img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.g-mapa .aerea span { position: absolute; left: 8px; top: 6px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; }
.g-mapa .num-m { position: absolute; left: 20px; bottom: 14px; z-index: 2; font-size: 96px; line-height: .8; font-weight: 700; color: rgba(255,255,255,.14); }
.g-mapa .info-m { display: flex; flex-direction: column; gap: 16px; padding: 28px 30px; }
.g-mapa h2 { font-size: 52px; line-height: .92; text-transform: uppercase; }
.g-mapa .desc { font-size: 17px; color: #d3d6dc; line-height: 1.5; }
.g-mapa .fichas-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.g-mapa .fichas-m div { padding: 12px 0; }
.g-mapa .fichas-m div + div { padding-left: 14px; border-left: 1px solid var(--linea); }
.g-mapa .fichas-m span { display: block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.g-mapa .fichas-m b { font-size: 20px; }
.g-mapa .consejo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(255,196,70,.06); border-left: 3px solid var(--oro); font-size: 15.5px; color: var(--oro-claro); line-height: 1.35; }
.g-mapa .consejo .ico { color: var(--oro); margin-top: 1px; }
.g-lista { list-style: none; display: grid; gap: 8px; }
.g-lista li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--texto-2); line-height: 1.35; }
.g-lista li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; background: var(--carmesi); transform: rotate(45deg); }
.g-modos-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.g-modos-mini span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-2); background: rgba(255,255,255,.03); }
.g-modos-mini .ico { width: 15px; height: 15px; color: var(--carmesi-claro); }

.g-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-modo { position: relative; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.g-modo .icono-m { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #e3222e, #8f0f18); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); box-shadow: 0 0 30px rgba(217,31,43,.4); }
.g-modo .icono-m .ico { width: 28px; height: 28px; }
.g-modo h3 { font-size: 30px; line-height: 1; text-transform: uppercase; }
.g-modo h3 small { display: block; font-size: 13px; letter-spacing: .16em; color: var(--texto-3); margin-top: 6px; }
.g-modo p { color: var(--texto-2); font-size: 16px; line-height: 1.4; }
.g-modo .datos-m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.g-modo .datos-m span { font-size: 13.5px; padding: 4px 9px; color: #dfe2e7; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--linea); }

/* 9. ÍNDICE DE LA GUÍA -------------------------------------------------------------------- */
.g-portal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.g-puerta { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 28px 30px; overflow: hidden; border: 1px solid var(--linea-2); background: #0b0c0f; transition: border-color .25s; }
.g-puerta > .fondo-p { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.g-puerta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.6) 48%, rgba(6,7,9,.1) 100%), linear-gradient(0deg, rgba(6,7,9,.9), transparent 55%); }
.g-puerta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--carmesi); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.g-puerta:hover { border-color: rgba(217,31,43,.6); }
.g-puerta:hover > .fondo-p { transform: scale(1.04); }
.g-puerta:hover::after { transform: scaleX(1); }
.g-puerta .figura { position: absolute; z-index: -1; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.7)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.g-puerta:hover .figura { transform: translateX(-10px); }
.g-puerta .numero { font-size: 15px; font-weight: 700; letter-spacing: .2em; color: var(--carmesi-claro); }
.g-puerta h2 { font-size: 58px; line-height: .92; text-transform: uppercase; margin: 8px 0 10px; }
.g-puerta p { max-width: 380px; color: #c9ccd3; font-size: 17px; line-height: 1.4; }
.g-puerta .cifras-p { display: flex; gap: 24px; margin-top: 16px; }
.g-puerta .cifras-p b { display: block; font-size: 30px; line-height: 1; }
.g-puerta .cifras-p span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.g-puerta .ir { position: absolute; right: 24px; top: 22px; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); background: rgba(6,7,9,.5); transition: background .2s; }
.g-puerta:hover .ir { background: var(--carmesi); box-shadow: none; }

.g-basico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.g-basico .marco { padding: 0; }
.g-monedas { display: grid; grid-template-columns: 1fr 1fr; }
.g-monedas > div { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; }
.g-monedas > div + div { border-left: 1px solid var(--linea); }
.g-monedas img { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.g-monedas h3 { font-size: 26px; line-height: 1; text-transform: uppercase; }
.g-monedas p { font-size: 15.5px; color: var(--texto-2); line-height: 1.4; margin-top: 6px; }
.g-monedas .se { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; }
.g-ejemplos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 22px 20px; border-top: 1px solid var(--linea); }
.g-ejemplos .leyenda { grid-column: 1 / -1; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.g-ejemplos div { display: grid; gap: 6px; }
.g-ejemplos small { font-size: 13px; color: var(--texto-2); letter-spacing: .06em; }
.g-equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 20px 22px; }
.g-equipo .hueco-e { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 124px; padding: 12px; background: #0b0c0f; box-shadow: inset 0 0 0 1px var(--linea-2); overflow: hidden; }
.g-equipo .hueco-e img { height: 54px; width: 100%; object-fit: contain; margin: 4px 0 6px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.g-equipo .hueco-e span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--carmesi-claro); }
.g-equipo .hueco-e b { font-size: 16.5px; line-height: 1.1; }
.g-equipo .hueco-e small { font-size: 13px; color: var(--texto-3); line-height: 1.25; }
.g-equipo-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px 20px; }
.g-rarezas { display: grid; gap: 8px; padding: 20px 22px; }
.g-rarezas div { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; background: linear-gradient(90deg, var(--r-fondo), transparent 70%); border-left: 3px solid var(--r); }
.g-rarezas b { font-size: 17px; text-transform: uppercase; letter-spacing: .08em; color: var(--r); }
.g-rarezas span { font-size: 14.5px; color: var(--texto-2); }
.g-rarezas em { font-style: normal; font-size: 14px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-cuerpo-zonas { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 22px; }
.g-maniqui { position: relative; width: 120px; height: 240px; }
.g-maniqui img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.85) brightness(.75) contrast(1.1) drop-shadow(0 0 1px rgba(255,90,100,.6)); }
.g-maniqui .marca { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 4px; transform: translate(-7px, -7px); }
.g-maniqui .marca i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--carmesi-claro); background: rgba(217,31,43,.35); box-shadow: 0 0 10px rgba(217,31,43,.7); }
.g-maniqui .marca b { font-size: 13px; line-height: 1; padding: 2px 5px; color: #fff; background: rgba(6,7,9,.85); border: 1px solid var(--linea-2); }
.g-maniqui .marca.oro i { border-color: var(--oro); background: rgba(255,196,70,.35); box-shadow: 0 0 12px rgba(255,196,70,.8); }
.g-maniqui .marca.oro b { color: var(--oro-claro); }
.g-cuerpo-zonas .zona { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.25); stroke-width: 1; }
.g-cuerpo-zonas .z-cab { fill: rgba(255,196,70,.55); stroke: var(--oro); }
.g-cuerpo-zonas .z-tor { fill: rgba(217,31,43,.45); stroke: var(--carmesi-claro); }
.g-cuerpo-zonas .z-bra { fill: rgba(217,31,43,.22); }
.g-cuerpo-zonas .z-pie { fill: rgba(217,31,43,.16); }
.g-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 34px 36px; border: 1px solid var(--linea-2); background: radial-gradient(60% 120% at 100% 50%, rgba(217,31,43,.28), transparent 60%), #0d0e12; }
.g-cta h2 { font-size: 42px; line-height: .95; text-transform: uppercase; }
.g-cta p { color: var(--texto-2); margin-top: 8px; font-size: 17px; }
.g-cta .botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Estado de carga y de error de la Guía */
.g-cargando { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-cargando div { height: 360px; }

/* 10. MÓVIL ------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .g-armas, .g-skins, .g-balas, .g-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-trajes, .g-objetos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-mapa, .g-mapa:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .g-mapa:nth-child(even) .foto-m { order: 0; border-left: 0; }
  .g-mapa .foto-m { border-right: 0; border-bottom: 1px solid var(--linea); min-height: 380px; }
  .g-ficha-bloques { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-ficha-bloques > section:nth-child(2) { border-right: 0; }
  .g-ficha-bloques > section:last-child { grid-column: 1 / -1; border-top: 1px solid var(--linea); }
  .g-basico { grid-template-columns: minmax(0, 1fr); }
  .g-escenario { grid-template-columns: 300px minmax(0, 1fr); height: 480px; }
  .g-escenario::after { left: 320px; }
  .g-escenario .rotulo-e b { font-size: 36px; }
}
@media (max-width: 760px) {
  .g-secciones { margin: -36px 0 28px; }
  .g-secciones a { height: 50px; padding: 0 12px; font-size: 14.5px; gap: 7px; }
  .g-secciones a small { display: none; }
  .g-cifras { gap: 8px 22px; margin-top: 18px; }
  .g-cifras b { font-size: 30px; }
  .g-herramientas { padding: 12px; gap: 12px; }
  .g-grupo { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .g-grupo .g-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .g-grupo .g-chips::-webkit-scrollbar { display: none; }
  .g-chip { flex: none; height: 32px; padding: 0 11px; font-size: 13.5px; }
  .g-orden { margin-left: 0; width: 100%; justify-content: space-between; }
  .g-armas, .g-skins, .g-balas, .g-modos, .g-portal { grid-template-columns: minmax(0, 1fr); }
  .g-trajes, .g-objetos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-traje h3 { font-size: 19px; }
  .g-traje p { display: none; }
  .g-traje .etiquetas-t .g-r-normal:not(:first-child) { display: none; }
  .g-traje .g-bono { height: 24px; padding: 0 7px; font-size: 12.5px; }
  .g-traje .cuerpo-t { padding: 10px 10px 12px; gap: 8px; }
  .g-traje .g-barra { grid-template-columns: 60px minmax(0, 1fr) 22px; font-size: 10.5px; gap: 6px; }
  .g-traje .bc.chico, .g-objeto .bc.chico, .g-bala .bc.chico { height: 42px; }
  .g-traje .bc.chico .bc-etq { font-size: 14px; padding: 0 4px 0 10px; }
  .g-traje .bc.chico .bc-pozo { font-size: 16px; padding: 0 10px 0 6px; gap: 4px; }
  .g-traje .bc.chico .bc-pozo img { width: 22px; height: 22px; }
  .g-objeto .foto-o { height: 150px; padding-top: 28px; }
  .g-objeto .foto-o img { width: 100px; height: 100px; }
  .g-objeto .foto-o .g-rareza { left: 8px; top: 8px; }
  .g-objeto .cuerpo-o { padding: 10px; gap: 8px; }
  .g-objeto h3 { font-size: 19px; }
  .g-objeto p { font-size: 13.5px; }
  .g-efecto { font-size: 13.5px; padding: 7px 9px; }
  .g-objeto .precios-o { grid-template-columns: minmax(0, 1fr); }
  .g-objeto .bc.chico .bc-etq, .g-bala .bc.chico .bc-etq { font-size: 14px; padding: 0 4px 0 10px; }
  .g-objeto .bc.chico .bc-pozo, .g-bala .bc.chico .bc-pozo { font-size: 16px; padding: 0 10px 0 6px; }
  .g-objeto .bc.chico .bc-pozo img, .g-bala .bc.chico .bc-pozo img { width: 22px; height: 22px; }
  .g-arma h3 { font-size: 24px; }
  .g-arma .vitrina-a { height: 170px; }
  .g-mapa .foto-m { min-height: 240px; }
  .g-mapa .aerea { width: 42%; right: 10px; bottom: 10px; }
  .g-mapa .num-m { font-size: 64px; }
  .g-mapa .info-m { padding: 20px 18px; }
  .g-mapa h2 { font-size: 38px; }
  .g-mapa .fichas-m b { font-size: 17px; }
  .g-modal { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border: 0; }
  .g-ficha-top { grid-template-columns: minmax(0, 1fr); }
  .g-ficha-foto .regla span:last-child { display: none; }
  .g-ficha-foto { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .g-ficha-info { padding: 18px; }
  .g-ficha-info h2 { font-size: 36px; }
  .g-ficha-bloques { grid-template-columns: minmax(0, 1fr); }
  .g-ficha-bloques > section { border-right: 0; border-top: 1px solid var(--linea); padding: 18px; }
  .g-ficha-bloques > section:first-child { border-top: 0; }
  .g-escenario { grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px auto; height: auto; }
  .g-escenario .fila-p img { height: 100%; }
  .g-escenario::after { left: 4%; bottom: auto; top: 270px; }
  .g-escenario .fila-p { grid-row: 1; padding: 14px 0 30px; overflow: hidden; }
  .g-escenario button { margin: 0 -20px; height: 96%; }
  .g-escenario .lado-e { grid-row: 2; border-right: 0; border-top: 1px solid var(--linea); padding: 18px 16px; background: rgba(6,7,9,.75); }
  .g-escenario .rotulo-e b { font-size: 30px; }
  .g-huecos { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  .g-huecos .hueco { width: 76px; height: 76px; }
  .g-puerta { min-height: 320px; padding: 22px 20px; }
  .g-puerta h2 { font-size: 44px; }
  .g-monedas { grid-template-columns: minmax(0, 1fr); }
  .g-ejemplos { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .g-monedas > div + div { border-left: 0; border-top: 1px solid var(--linea); }
  .g-monedas img { width: 58px; height: 58px; }
  .g-equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px; }
  .g-equipo .hueco-e { min-height: 0; padding: 10px 8px; }
  .g-equipo .hueco-e img { height: 40px; }
  .g-equipo .hueco-e b { font-size: 14.5px; }
  .g-equipo .hueco-e small { display: none; }
  .g-equipo-extra { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  .g-rarezas { padding: 16px; }
  .g-rarezas div { grid-template-columns: minmax(0, 1fr) auto; }
  .g-rarezas span { grid-column: 1 / -1; grid-row: 2; }
  .g-cuerpo-zonas { grid-template-columns: 90px minmax(0, 1fr); padding: 16px; gap: 14px; }
  .g-maniqui { width: 90px; height: 190px; }
  .g-cta { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .g-cta h2 { font-size: 32px; }
  .g-cargando { grid-template-columns: minmax(0, 1fr); }
  .g-buscador .caja-b { height: 52px; }
  .g-buscador kbd { display: none; }
  .g-resultados a { grid-template-columns: 52px minmax(0, 1fr); }
  .g-resultados a .seccion-r { display: none; }
}

/* Al llegar desde el buscador (#traje-…, #objeto-…): un destello en la ficha buscada. */
.g-resalta { animation: g-resalta 2.2s ease-out; }
@keyframes g-resalta { 0%, 30% { box-shadow: 0 0 0 2px var(--oro), 0 0 40px rgba(255,196,70,.45); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* La figura grande de la cabeza (el arma con fuego) solo cabe en pantallas anchas. */
@media (max-width: 1180px) { .solo-ancho { opacity: .35; } }
@media (max-width: 760px) { .solo-ancho { display: none; } }
.g-modal .cuerpo-modal:focus { outline: none; }