/* THE PRISON · la web · estilo «Luces de patio» (r645-web, 24-10-2026).
 * Sale de la maqueta aprobada (web v2, propuesta 2 elegida el 23-10-2026): la misma mirada que el HUD
 * 2026 del juego (ámbar del mono, vidrio, Barlow Condensed para títulos y cifras, Barlow Semi Condensed
 * para leer). Las letras son las del juego (public/fonts, OFL); placas, chapas, medallas y emblemas,
 * los del juego (public/ui/arte2026). La barra y el pie que comparten la web y la guía viven aparte, en
 * barra.css. Al final, el recuento de «la fachada encendida» (propuesta 5, elegida por el dueño el
 * 24-10-2026) y la pared de SE BUSCA. */
@font-face { font-family: 'Barlow C'; src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow C'; src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow S'; src: url('/fonts/BarlowSemiCondensed-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow S'; src: url('/fonts/BarlowSemiCondensed-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --fondo: #0b0d10; --fondo-2: #11151a; --fondo-3: #171c22;
  --vidrio: rgba(18, 22, 28, .8); --vidrio-alto: rgba(26, 31, 39, .9); --hueco: rgba(255,255,255,.04);
  --borde: rgba(255,255,255,.08); --borde-2: rgba(255,255,255,.16);
  --texto: #eceef1; --texto-2: #b5bcc6; --texto-3: #8b939e;
  --ambar: #f29a2e; --ambar-2: #ffb85c; --ambar-sombra: rgba(242,154,46,.35); --tinta-boton: #1b1004;
  --verde: #4fd18b; --rojo: #ff5b4d; --azul: #5aa9ff;
  --r0: #d9c48a; --r1: #5ac85a; --r2: #4aa3ff; --r3: #b46cff; --r4: #ff9b2e;
  --papel: #e6d4ad; --papel-2: #cdb685; --tinta-papel: #2b1d10; --tinta-roja: #8a2219;
  --tiza: #f1efe6; --pizarra: #26392f;
  --f-tit: 'Barlow C', 'Arial Narrow', sans-serif;
  --f-txt: 'Barlow S', 'Segoe UI', system-ui, sans-serif;
  --ancho: 1280px; --lado: 32px; --radio: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.55 var(--f-txt); min-height: 100vh;
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(242,154,46,.07), transparent 60%); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, .enlace { color: var(--ambar-2); text-decoration: underline; text-decoration-color: rgba(255,184,92,.4); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ambar-2); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, .cond { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; line-height: 1.02; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.ancho { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--lado); }
.ancho > *, .dos > *, .tres > * { min-width: 0; }
.oculto-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── barra de la maqueta y barra del sitio ───────────────────────────────── */
.btn { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; min-height: 46px; border-radius: 4px; white-space: nowrap; transition: transform .12s, box-shadow .12s, background .12s; border: 0; cursor: pointer; }
.btn.prim { background: linear-gradient(180deg, var(--ambar-2), var(--ambar)); color: var(--tinta-boton); box-shadow: 0 6px 24px var(--ambar-sombra); }
.btn.prim:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(242,154,46,.45); }
.btn.sec { border: 1px solid var(--borde-2); color: var(--texto); background: rgba(255,255,255,.04); }
.btn.sec:hover { background: rgba(255,255,255,.08); }
.btn.peq { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 4px 10px; border-radius: 3px; background: rgba(255,255,255,.07); color: var(--texto-2); border: 1px solid var(--borde); white-space: nowrap; }
button.chip, a.chip { cursor: pointer; min-height: 32px; }
button.chip[aria-pressed="true"], a.chip.on { color: var(--tinta-boton); background: var(--ambar); border-color: transparent; }
.chip.ok { color: var(--verde); border-color: rgba(79,209,139,.35); background: rgba(79,209,139,.08); }
.chip.ej { color: var(--tinta-boton); background: var(--ambar); border-color: transparent; }
.chip.ambar { color: var(--ambar-2); border-color: rgba(242,154,46,.4); background: rgba(242,154,46,.08); }
.chip.rojo { color: #ffb3aa; border-color: rgba(255,91,77,.4); background: rgba(255,91,77,.1); }
.ej-sello { font-family: var(--f-tit); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-boton); background: var(--ambar); border-radius: 2px; padding: 1px 6px; vertical-align: 2px; }
.vivo-p { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; animation: latido 2s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(79,209,139,.55); } 70% { box-shadow: 0 0 0 9px rgba(79,209,139,0); } 100% { box-shadow: 0 0 0 0 rgba(79,209,139,0); } }
.panel { background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--radio); }
.panel-p { padding: 20px 22px; }
.kicker { font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 14px; color: var(--ambar); }
.sec-t { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 64px 0 18px; flex-wrap: wrap; }
.sec-t h2 { font-size: 34px; }
.sec-t p { margin: 4px 0 0; color: var(--texto-3); font-size: 15px; }
.sec-t .der { color: var(--texto-2); font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; }
.titulo-panel { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; color: var(--texto-2); padding: 16px 18px 6px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.nota { color: var(--texto-3); font-size: 14px; margin: 10px 0 0; }
.dos { display: grid; grid-template-columns: 1.65fr 1fr; gap: 22px; align-items: start; }
.dos.iguales { grid-template-columns: 1fr 1fr; }
.dos.ficha { grid-template-columns: 1fr 1.25fr; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pila { display: grid; gap: 22px; align-content: start; }
.dos > *, .pila > * { min-width: 0; }
.migas { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--texto-3); padding: 18px 0 0; }
.migas a { color: var(--texto-2); } .migas a:hover { color: var(--texto); }
.migas span[aria-hidden] { opacity: .5; }
.aviso-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 80; background: var(--vidrio-alto); border: 1px solid var(--borde-2); border-radius: 6px; padding: 12px 18px; font-size: 15px; max-width: min(92vw, 520px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.aviso-toast.ver { opacity: 1; transform: translate(-50%, 0); }
.tooltip { position: fixed; z-index: 50; pointer-events: none; background: #1a1e24; border: 1px solid var(--borde-2); padding: 6px 10px; border-radius: 4px; font-size: 13px; color: var(--texto); opacity: 0; transition: opacity .1s; }

/* ── cabeceras de sección (guía, cárceles) ───────────────────────────────── */
.cab { position: relative; overflow: hidden; border-bottom: 1px solid var(--borde); isolation: isolate; }
.cab > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: -2; }
.cab::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fondo) 22%, rgba(11,13,16,.6) 65%, rgba(11,13,16,.3)), linear-gradient(0deg, var(--fondo), transparent 55%); }
.cab .ancho { padding-top: 56px; padding-bottom: 44px; }
.cab h1 { font-size: 64px; margin: 10px 0 12px; }
.cab p.sub { color: var(--texto-2); font-size: 19px; max-width: 36em; margin: 0 0 22px; }
.buscar { display: flex; align-items: center; gap: 12px; max-width: 720px; height: 58px; padding: 0 18px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--borde-2); }
.buscar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--texto); font: 18px var(--f-txt); }
.buscar kbd { font: 13px var(--f-tit); color: var(--texto-3); border: 1px solid var(--borde-2); border-radius: 3px; padding: 1px 7px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips .chip, .var-tabs .chip, .robar-chips .chip { white-space: normal; text-align: left; }

/* sub-barra de la guía */
.subbarra { border-bottom: 1px solid var(--borde); background: rgba(11,13,16,.6); }
.subbarra .ancho { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subbarra .ancho::-webkit-scrollbar { display: none; }
.subbarra a, .saltos a { flex: none; }
.subbarra a { font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-size: 14px; color: var(--texto-3); padding: 13px 12px 11px; white-space: nowrap; border-bottom: 2px solid transparent; }
.subbarra a:hover { color: var(--texto); }
.subbarra a.on { color: var(--texto); border-color: var(--ambar); }

/* ── objetos: casilla con el brillo de su rareza ─────────────────────────── */
.ico { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
.casilla { --c: var(--r0); flex: none; display: grid; place-items: center; border-radius: 5px; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), rgba(10,12,15,.4)); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); }
.casilla .ico { width: 92%; height: 92%; }
.casilla.s { width: 54px; height: 38px; } .casilla.m { width: 90px; height: 64px; } .casilla.g { width: 220px; height: 156px; border-radius: 8px; }
.rb0, .r0 { --c: var(--r0); } .rb1, .r1 { --c: var(--r1); } .rb2, .r2 { --c: var(--r2); } .rb3, .r3 { --c: var(--r3); } .rb4, .r4 { --c: var(--r4); }
b.r1, h1.r1, span.r1 { color: var(--r1); } b.r2, h1.r2, span.r2 { color: var(--r2); } b.r3, h1.r3, span.r3 { color: var(--r3); } b.r4, h1.r4, span.r4 { color: var(--r4); }
.retrato { flex: none; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: #1a1f26; border: 1px solid var(--borde-2); font-family: var(--f-tit); color: var(--texto-3); }
.retrato.s { width: 44px; height: 44px; font-size: 20px; } .retrato.m { width: 64px; height: 64px; font-size: 26px; } .retrato.g { width: 168px; height: 168px; font-size: 60px; border-radius: 8px; }
.vias { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.via { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-3); border: 1px solid var(--borde); border-radius: 3px; padding: 1px 6px; }
.via svg, .ic { width: 15px; height: 15px; flex: none; }
.prob { display: grid; justify-items: end; gap: 2px; min-width: 128px; text-align: right; }
.prob b { font-family: var(--f-tit); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.prob small { color: var(--texto-3); font-size: 12.5px; }
.barra-p { width: 110px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra-p i { display: block; height: 100%; background: var(--ambar); border-radius: 3px; }
.lista { display: grid; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 8px; border-top: 1px solid var(--borde); border-radius: 4px; }
.lista > .fila:first-child { border-top: 0; }
a.fila:hover { background: var(--hueco); }
.fila .q { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fila .t { min-width: 0; display: grid; }
.fila .t b { font-weight: 500; line-height: 1.25; }
.fila .t small { color: var(--texto-3); font-size: 13.5px; line-height: 1.35; }
.fila .d { flex: none; text-align: right; }
.cant { font-family: var(--f-tit); font-size: 22px; }

/* catálogo */
.cat { display: grid; grid-template-columns: 270px 1fr; gap: 26px; align-items: start; margin-top: 26px; }
.filtros { position: sticky; top: 84px; display: grid; gap: 18px; padding: 18px; }
.filtros label, .filtros .et { font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--texto-2); display: block; margin-bottom: 7px; }
.campo { width: 100%; height: 42px; border-radius: 4px; border: 1px solid var(--borde-2); background: rgba(255,255,255,.05); color: var(--texto); font: 16px var(--f-txt); padding: 0 10px; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%); background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
select.campo option { background: var(--fondo-2); }
.rango { display: flex; gap: 8px; align-items: center; } .rango .campo { width: 0; flex: 1; }
.cat-cab { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; }
.cuenta { font-family: var(--f-tit); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.puestos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tarjeta { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 6px; background: var(--vidrio); border: 1px solid var(--borde); transition: border-color .15s, transform .15s; }
.tarjeta:hover { border-color: rgba(242,154,46,.5); transform: translateY(-1px); }
.tarjeta .t { min-width: 0; display: grid; gap: 3px; }
.tarjeta b { line-height: 1.2; font-weight: 500; }
.tarjeta small { color: var(--texto-3); font-size: 13.5px; }
.mas { display: flex; justify-content: center; margin-top: 20px; }
.boton-filtros { display: none; }
.hoja-fondo { display: none; }

/* fichas (objeto, preso, misión) */
.ficha-cab { position: relative; overflow: hidden; border-bottom: 1px solid var(--borde); isolation: isolate; }
.ficha-cab > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; z-index: -2; filter: saturate(.8); }
.ficha-cab::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fondo) 10%, rgba(11,13,16,.55) 70%, rgba(11,13,16,.35)), linear-gradient(0deg, var(--fondo) 2%, transparent 60%); }
.ficha-cab .ancho { display: flex; gap: 30px; align-items: center; padding-top: 30px; padding-bottom: 36px; }
.ficha-cab h1 { font-size: 56px; margin: 6px 0 12px; }
.ficha-cab .sub { color: var(--texto-2); margin: 10px 0 0; max-width: 40em; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.dato { background: var(--hueco); border: 1px solid var(--borde); border-radius: 5px; padding: 10px 12px; }
.dato small { display: block; color: var(--texto-3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-tit); font-weight: 600; }
.dato b { font-family: var(--f-tit); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.panel h2 { font-size: 22px; letter-spacing: .06em; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.panel h2 .cuenta-p { margin-left: auto; font-size: 15px; color: var(--texto-3); }
.renglones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.renglones li { padding: 8px 12px; border-radius: 4px; background: rgba(79,209,139,.06); border-left: 3px solid var(--verde); font-weight: 500; }
.renglones li .cond { color: var(--texto-3); font-weight: 400; }
.fuente + .fuente { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--borde-2); }
.fuente h3 { font-size: 17px; letter-spacing: .1em; color: var(--texto-2); display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fuente h3 .n { margin-left: auto; color: var(--texto-3); font-size: 14px; }
.lo-facil { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 6px; border: 1px solid rgba(242,154,46,.45); background: linear-gradient(90deg, rgba(242,154,46,.14), rgba(242,154,46,.03)); margin-bottom: 18px; }
.lo-facil b.grande { white-space: nowrap; font-family: var(--f-tit); font-size: 40px; line-height: 1; color: var(--ambar-2); }
.lo-facil .t { min-width: 0; }
.lo-facil small { color: var(--texto-2); display: block; }
.cita { margin: 0; padding: 14px 18px; border-left: 3px solid var(--ambar); background: var(--hueco); border-radius: 0 6px 6px 0; color: var(--texto-2); font-style: italic; }
.cadena { display: flex; gap: 0; align-items: stretch; overflow-x: auto; padding-bottom: 6px; }
.cadena a, .cadena span.paso { flex: 1 0 180px; padding: 12px 14px; border: 1px solid var(--borde); background: var(--hueco); position: relative; }
.cadena a + a, .cadena a + span, .cadena span + a { border-left: 0; }
.cadena .paso.on { background: rgba(242,154,46,.12); border-color: rgba(242,154,46,.5); }
.cadena small { display: block; color: var(--texto-3); font-size: 12.5px; font-family: var(--f-tit); text-transform: uppercase; letter-spacing: .1em; }
.cadena b { font-weight: 500; line-height: 1.25; display: block; }

/* qué hago a mi nivel */
.selector { padding: 22px 24px; display: grid; gap: 18px; }
.delitos-sel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.delitos-sel button { min-height: 52px; border-radius: 5px; border: 1px solid var(--borde-2); background: var(--hueco); cursor: pointer; text-align: left; padding: 8px 12px; display: grid; }
.delitos-sel button b { font-family: var(--f-tit); font-size: 17px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.delitos-sel button small { color: var(--texto-3); font-size: 12px; font-family: var(--f-tit); letter-spacing: .14em; }
.delitos-sel button[aria-pressed="true"] { border-color: var(--ambar); background: rgba(242,154,46,.16); box-shadow: inset 0 0 0 1px var(--ambar); }
.nivel-sel { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.nivel-sel .chapa { width: 40px; height: 82px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.nivel-sel output { font-family: var(--f-tit); font-size: 48px; font-weight: 700; line-height: 1; min-width: 3.2ch; text-align: right; }
.nivel-sel .pasos { display: flex; gap: 6px; }
input[type="range"] { width: 100%; accent-color: var(--ambar); height: 32px; }
.pegar-zona { margin-top: 16px; }
.pegar-zona:first-child { margin-top: 0; }
.pegar-zona h3 { font-size: 15px; letter-spacing: .1em; color: var(--texto-2); display: flex; gap: 10px; align-items: center; }
.pegar-zona h3 img { width: 64px; height: 36px; object-fit: cover; border-radius: 3px; }
.franja { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 8px 0 4px; }
.franja i { display: block; }

/* ── portada (inicio) ────────────────────────────────────────────────────── */
.heroe { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.heroe > video, .heroe > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
@media (prefers-reduced-motion: reduce) { .heroe > video { display: none; } .vivo-p { animation: none; } }
.heroe::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,13,16,.92) 0%, rgba(11,13,16,.55) 45%, rgba(11,13,16,.1) 75%), linear-gradient(0deg, var(--fondo) 2%, transparent 40%); }
.heroe .ancho { width: 100%; padding-bottom: 72px; }
.heroe .marca { width: min(500px, 90%); filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); margin-top: 14px; }
.heroe .lema { font-size: 22px; color: var(--texto-2); max-width: 30em; margin: 18px 0 30px; }
.acc { display: flex; gap: 14px; flex-wrap: wrap; }
.franja-viva { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 15px; color: var(--texto-2); flex-wrap: wrap; }
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: -20px; position: relative; z-index: 3; }
.puerta { position: relative; min-height: 470px; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); display: flex; align-items: flex-end; isolation: isolate; }
.puerta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.puerta:hover > img { transform: scale(1.04); }
.puerta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,10,12,.96) 20%, rgba(8,10,12,.4) 62%, rgba(8,10,12,.12)); }
.puerta .dentro { padding: 32px; width: 100%; }
.puerta h3 { font-size: 46px; margin: 8px 0 10px; }
.puerta p { color: var(--texto-2); margin: 0 0 20px; max-width: 30em; }
.mini-cifras { display: flex; gap: 26px; margin-bottom: 22px; flex-wrap: wrap; }
.mini-cifras b { display: block; font-family: var(--f-tit); font-size: 34px; line-height: 1; }
.mini-cifras small { color: var(--texto-3); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.rasgos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rasgo { position: relative; min-height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); display: flex; align-items: flex-end; isolation: isolate; padding: 20px; }
.rasgo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rasgo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,10,12,.95) 22%, rgba(8,10,12,.2) 70%); }
.rasgo h3 { font-size: 26px; } .rasgo p { margin: 6px 0 0; color: var(--texto-2); font-size: 15px; }
.noticias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.noticia { overflow: hidden; }
.noticia .img { aspect-ratio: 16/8; position: relative; overflow: hidden; }
.noticia .img img { width: 100%; height: 100%; object-fit: cover; }
.noticia .img .emb { position: absolute; right: 14px; bottom: -14px; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.noticia .t { padding: 18px 22px 22px; }
.noticia h3 { font-size: 24px; margin: 8px 0 8px; }
.noticia p { color: var(--texto-2); margin: 0; font-size: 16px; }

/* ── portada de la guía ──────────────────────────────────────────────────── */
.empieza { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.banda-grande { position: relative; min-height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); display: flex; align-items: flex-end; isolation: isolate; padding: 30px; }
.banda-grande > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.banda-grande:hover > img.fondo { transform: scale(1.04); }
.banda-grande::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,10,12,.95) 25%, rgba(8,10,12,.4) 75%), linear-gradient(0deg, rgba(8,10,12,.7), transparent 50%); }
.banda-grande:hover { border-color: rgba(242,154,46,.55); }
.banda-grande h3 { font-size: 40px; margin: 6px 0 8px; }
.banda-grande p { color: var(--texto-2); margin: 0 0 16px; max-width: 26em; }
.banda-grande .chapas-fila { position: absolute; right: 24px; top: 22px; display: flex; }
.chapas-fila img { width: 34px; height: 68px; object-fit: contain; margin-left: -6px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 18px; grid-auto-flow: dense; }
.tile { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: rgba(242,154,46,.55); transform: translateY(-2px); }
.tile > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.tile:hover > img.fondo { transform: scale(1.05); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,10,12,.95) 14%, rgba(8,10,12,.35) 62%, rgba(8,10,12,.05)); }
.tile.g { grid-column: span 2; grid-row: span 2; } .tile.h { grid-column: span 2; } .tile.v { grid-row: span 2; }
.tile h3 { font-size: 30px; } .tile.g h3 { font-size: 48px; }
.tile .cifra { font-family: var(--f-tit); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--ambar); text-transform: uppercase; margin-bottom: 4px; }
.tile p { margin: 8px 0 0; color: var(--texto-2); font-size: 15.5px; line-height: 1.45; }
.tile .ir { position: absolute; right: 18px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid var(--borde-2); display: grid; place-items: center; color: var(--texto-2); font-size: 20px; }
.vitrina { position: absolute; left: 24px; right: 24px; top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vitrina .casilla, .vitrina .casilla.g { width: auto; height: auto; aspect-ratio: 180/128; }
.caras-fila { position: absolute; right: 64px; top: 18px; display: flex; }
.caras-fila img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fondo); margin-left: -12px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.medallas-fila { display: flex; gap: 4px; margin-top: 10px; } .medallas-fila img { width: 46px; height: 46px; }
.delitos-tira { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.delitos-tira a { padding: 14px; border-radius: 6px; background: var(--vidrio); border: 1px solid var(--borde); font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; display: flex; flex-direction: column; gap: 2px; min-height: 64px; }
.delitos-tira a small { font-family: var(--f-txt); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto-3); font-size: 13px; }
.delitos-tira a:hover { border-color: var(--ambar); }

/* ── cárceles ────────────────────────────────────────────────────────────── */
.carcel-tarjeta { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde-2); background: var(--fondo-2); }
.carcel-tarjeta .img { position: relative; min-height: 420px; }
.carcel-tarjeta .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carcel-tarjeta .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--fondo-2)), linear-gradient(0deg, rgba(11,13,16,.75), transparent 45%); }
.carcel-tarjeta .img .tit { position: absolute; left: 30px; bottom: 26px; z-index: 2; }
.carcel-tarjeta .img h2 { font-size: 80px; text-shadow: 0 8px 40px rgba(0,0,0,.6); }
.carcel-tarjeta .datos-c { padding: 28px 30px; display: grid; gap: 16px; align-content: start; }
.par { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.par span { color: var(--texto-3); }
.par b { font-family: var(--f-tit); font-size: 22px; text-align: right; }
.hueco-futuro { margin-top: 22px; border: 2px dashed var(--borde-2); border-radius: 10px; padding: 34px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; color: var(--texto-3); }
.hueco-futuro .candado { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--borde-2); display: grid; place-items: center; font-family: var(--f-tit); font-size: 30px; }
.hueco-futuro h3 { color: var(--texto-2); font-size: 26px; margin-bottom: 4px; }
.que-hay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.que-hay .panel { padding: 18px; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.que-hay img { width: 56px; height: 56px; object-fit: contain; }
.que-hay b { font-family: var(--f-tit); font-size: 19px; text-transform: uppercase; display: block; line-height: 1.1; }
.que-hay small { color: var(--texto-3); font-size: 13.5px; }

/* ── ALCATRAZ: piezas comunes a las cuatro versiones ─────────────────────── */
.heroe-c { position: relative; min-height: 540px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.heroe-c > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.heroe-c::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--fondo) 4%, rgba(11,13,16,.35) 55%, rgba(11,13,16,.2)), linear-gradient(90deg, rgba(11,13,16,.85), transparent 60%); }
.heroe-c .ancho { width: 100%; padding-bottom: 40px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.heroe-c h1 { font-size: 104px; letter-spacing: .03em; text-shadow: 0 8px 40px rgba(0,0,0,.6); }
.contador { text-align: right; }
.contador b { font-family: var(--f-tit); font-size: 96px; line-height: .9; display: block; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.contador small { font-family: var(--f-tit); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-2); font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.contador .rec { margin-top: 8px; color: var(--texto-3); font-size: 14px; }
.ticker { border-block: 1px solid var(--borde); background: rgba(255,255,255,.025); overflow: hidden; white-space: nowrap; font-size: 15px; color: var(--texto-2); }
.ticker .in { display: inline-flex; gap: 46px; padding: 11px 0; animation: correr 60s linear infinite; }
.ticker .in span::before { content: '◆'; color: var(--ambar); margin-right: 12px; font-size: 10px; vertical-align: 2px; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .in { animation: none; } }
.saltos { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20; background: rgba(11,13,16,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.saltos .ancho { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.saltos .ancho::-webkit-scrollbar { display: none; }
.saltos a { font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-size: 14px; color: var(--texto-3); padding: 12px 12px 10px; white-space: nowrap; }
.saltos a:hover { color: var(--texto); }
[id^="s-"] { scroll-margin-top: 130px; }
.hoy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.hoy .panel { padding: 16px 18px; }
.hoy b { font-family: var(--f-tit); font-size: 36px; line-height: 1; display: block; }
.hoy small { color: var(--texto-3); font-size: 13.5px; line-height: 1.3; display: block; margin-top: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; color: var(--texto-3); font: 600 15px var(--f-tit); text-transform: uppercase; letter-spacing: .1em; padding: 16px 13px 14px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 48px; }
.tabs button[aria-selected="true"] { color: var(--texto); border-color: var(--ambar); }
.clasif { padding: 22px 24px 18px; }
.clasif .expl { color: var(--texto-3); font-size: 14px; margin: 0 0 18px; }
.podio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 18px; }
.podio .p { text-align: center; padding: 16px 10px 12px; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); border: 1px solid var(--borde); position: relative; }
.podio .p.uno { padding-top: 26px; border-color: rgba(242,154,46,.45); background: linear-gradient(180deg, rgba(242,154,46,.14), rgba(242,154,46,.02)); }
.podio .chapa { width: 38px; height: 76px; object-fit: contain; margin: 0 auto 8px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.placa { position: relative; min-height: 54px; display: grid; place-items: center; background-size: 100% 100%; background-repeat: no-repeat; }
.placa span { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: .04em; color: #f6e9cf; text-shadow: 0 1px 2px #000; padding: 0 30px; line-height: 1.05; }
.placa.oro { background-image: url('/ui/arte2026/placas/oro.webp'); } .placa.plata { background-image: url('/ui/arte2026/placas/plata.webp'); } .placa.bronce { background-image: url('/ui/arte2026/placas/bronce.webp'); }
.podio .v { font-family: var(--f-tit); font-size: 30px; margin-top: 6px; }
.podio .d { color: var(--texto-3); font-size: 13.5px; }
.podio .pos { position: absolute; left: 12px; top: 8px; font-family: var(--f-tit); font-size: 22px; color: var(--texto-3); }
.filas { list-style: none; margin: 0; padding: 0; }
.filas li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--borde); }
.filas li .pos { font-family: var(--f-tit); color: var(--texto-3); font-size: 18px; }
.filas li .n { font-weight: 500; min-width: 0; }
.filas li .n small { display: block; color: var(--texto-3); font-size: 13.5px; font-weight: 400; }
.filas li .v { font-family: var(--f-tit); font-size: 22px; font-variant-numeric: tabular-nums; }
.filas li.banda { grid-template-columns: 34px 44px 1fr auto; }
.filas li.banda img { width: 40px; height: 40px; object-fit: contain; }
.clan-semana { overflow: hidden; text-align: center; position: relative; }
.clan-semana .bandera { position: relative; margin: 0 auto; width: 210px; padding: 26px 0 40px; background: linear-gradient(180deg, #5b1813, #3a0f0c); clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); box-shadow: inset 0 0 0 3px rgba(242,154,46,.5); }
.clan-semana .bandera img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.clan-semana .barra-sup { height: 10px; background: linear-gradient(90deg, #8a6a3c, #e6c27a, #8a6a3c); margin: 22px auto 0; width: 250px; border-radius: 4px; }
.clan-semana h3 { font-size: 30px; margin: 16px 18px 4px; }
.clan-semana p { color: var(--texto-2); margin: 0 22px 22px; font-size: 15px; }
.guerra { padding: 16px 18px; }
.guerra + .guerra { border-top: 1px solid var(--borde); }
.guerra .ladov { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.guerra img { width: 34px; height: 34px; object-fit: contain; }
.guerra .m { font-family: var(--f-tit); font-size: 30px; font-variant-numeric: tabular-nums; }
.guerra .bar { display: flex; gap: 2px; height: 6px; margin: 10px 0 6px; }
.guerra .bar i { border-radius: 3px; display: block; }
.guerra small { color: var(--texto-3); font-size: 13px; }
.muro { padding: 12px 18px 18px; }
.muro .pl { min-height: 46px; background: url('/ui/arte2026/placas/oro.webp') center/100% 100% no-repeat; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 17%; margin-top: 6px; font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; color: #f6e9cf; text-shadow: 0 1px 2px #000; font-size: 15px; gap: 8px; }
.muro .pl small { font-weight: 600; color: var(--r0); font-size: 12.5px; }
.muro-ancho .muro { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 16px; }
.tile.n4 { grid-column: 1 / -1; }
.por-delito { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.por-delito .panel { padding: 14px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
.por-delito img { width: 30px; height: 60px; object-fit: contain; }
.por-delito small { color: var(--ambar); font-family: var(--f-tit); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; display: block; }
.por-delito b { display: block; font-weight: 500; line-height: 1.15; }
.por-delito .nv { color: var(--texto-3); font-size: 13px; }
.maestros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.maestro { padding: 18px 16px; text-align: center; }
.maestro img { width: 92px; height: 92px; margin: 0 auto 8px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.maestro small { display: block; color: var(--ambar); font-family: var(--f-tit); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.maestro b { display: block; font-family: var(--f-tit); font-size: 22px; text-transform: uppercase; line-height: 1.05; margin: 4px 0; }
.maestro span { color: var(--texto-3); font-size: 13.5px; }
.cazados { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cazado { overflow: hidden; }
.cazado .img { aspect-ratio: 1; position: relative; }
.cazado .img img { width: 100%; height: 100%; object-fit: cover; }
.cazado .img .r { position: absolute; left: 10px; top: 8px; font-family: var(--f-tit); font-size: 26px; text-shadow: 0 2px 6px #000; }
.cazado .t { padding: 12px 14px 14px; }
.cazado .t b { font-family: var(--f-tit); font-size: 17px; text-transform: uppercase; display: block; line-height: 1.1; min-height: 2.2em; }
.cazado .t small { color: var(--texto-3); font-size: 13px; }
.cazado .v { font-family: var(--f-tit); font-size: 26px; color: var(--ambar); margin-top: 4px; }
.barrita { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: 6px; }
.barrita i { display: block; height: 100%; background: var(--ambar); border-radius: 0 2px 2px 0; }
.jefes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jefe { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 16px; }
.jefe .ret { width: 110px; height: 110px; border-radius: 6px; object-fit: cover; border: 1px solid var(--borde-2); }
.jefe .ret.med { object-fit: contain; background: radial-gradient(#2a2016, #0e0b08); padding: 10px; }
.jefe b { font-family: var(--f-tit); font-size: 44px; line-height: 1; display: block; color: var(--rojo); }
.jefe h3 { font-size: 22px; }
.jefe small { color: var(--texto-3); font-size: 13.5px; }
.mercado { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mercado .it { padding: 14px 14px 16px; }
.mercado .it .vis { aspect-ratio: 180/128; border-radius: 6px; display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.mercado .it .vis img { width: 86%; filter: drop-shadow(0 5px 8px rgba(0,0,0,.6)); }
.mercado .it b { display: block; margin-top: 10px; font-weight: 500; line-height: 1.2; min-height: 2.4em; }
.mercado .it .u { font-family: var(--f-tit); font-size: 24px; }
.mercado .it small { color: var(--texto-3); font-size: 13.5px; display: block; }
.mercado .it .rz { font-family: var(--f-tit); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.caro { margin-top: 16px; display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 16px 20px; }
.caro .vis { aspect-ratio: 180/128; border-radius: 6px; background: radial-gradient(closest-side, rgba(255,155,46,.35), transparent); border: 1px solid rgba(255,155,46,.5); display: grid; place-items: center; }
.caro .vis img { width: 90%; }
.caro b { font-family: var(--f-tit); font-size: 40px; color: var(--r4); }
.graficas { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
.graficas .panel { padding: 20px 22px; }
.graficas h3 { font-size: 22px; }
.graficas .expl { color: var(--texto-3); font-size: 14px; margin: 4px 0 16px; }
.barras { display: grid; grid-template-columns: 140px 1fr 42px; gap: 8px 12px; align-items: center; font-size: 15px; }
.barras .pista { height: 14px; position: relative; background: rgba(255,255,255,.04); border-radius: 0 4px 4px 0; }
.barras .pista i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ambar); border-radius: 0 4px 4px 0; opacity: .9; }
.barras b { font-family: var(--f-tit); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calor { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; font-size: 12px; color: var(--texto-3); }
.calor .c { aspect-ratio: 1; border-radius: 2px; }
.calor .h { text-align: center; overflow: hidden; }
.leyenda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); margin-top: 12px; }
.leyenda i { width: 130px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #1c1f24, var(--ambar)); }
.records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.records .panel { padding: 20px 22px; }
.records small { color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-tit); font-weight: 600; font-size: 13px; }
.records b { display: block; font-family: var(--f-tit); font-size: 40px; margin: 4px 0 2px; }
.records p { margin: 0; color: var(--texto-2); font-size: 15px; }
.novatos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.novato { padding: 16px; display: grid; gap: 4px; }
.novato .top { display: flex; justify-content: space-between; align-items: start; }
.novato .top img { width: 28px; height: 56px; object-fit: contain; }
.novato b.nv { font-family: var(--f-tit); font-size: 40px; line-height: 1; }
.novato .n { font-weight: 500; }
.novato small { color: var(--texto-3); font-size: 13.5px; }
.carrera { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); margin-top: 6px; overflow: hidden; }
.carrera i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--ambar)); }

/* ── teléfono ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hoy { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dos, .dos.iguales, .dos.ficha { grid-template-columns: 1fr; }
  .cazados, .mercado, .por-delito { grid-template-columns: repeat(3, minmax(0, 1fr)); } .delitos-tira { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .maestros, .novatos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rasgos, .que-hay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tres { grid-template-columns: 1fr 1fr; }
  .carcel-tarjeta { grid-template-columns: 1fr; } .carcel-tarjeta .img::after { background: linear-gradient(0deg, var(--fondo-2) 2%, transparent 50%); }
  .cat { grid-template-columns: 1fr; }
  .filtros { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 82vh; overflow: auto; border-radius: 14px 14px 0 0; transform: translateY(105%); transition: transform .22s; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fondo-3); }
  .filtros.abierta { transform: none; }
  .hoja-fondo.abierta { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); }
  .boton-filtros { display: inline-flex; }
  .delitos-sel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --lado: 16px; }
  body { font-size: 16px; }
  .saltos { top: calc(54px + env(safe-area-inset-top, 0px)); }
  .heroe { min-height: 580px; } .heroe .lema { font-size: 18px; } .heroe::after { background: linear-gradient(0deg, var(--fondo) 6%, rgba(11,13,16,.7) 55%, rgba(11,13,16,.35)); }
  .heroe .ancho { padding-bottom: 54px; }
  .puertas, .noticias, .graficas, .records, .jefes, .empieza, .rasgos, .que-hay, .tres { grid-template-columns: 1fr; }
  .puerta { min-height: 400px; } .puerta h3 { font-size: 36px; } .puerta .dentro { padding: 22px; }
  .cab h1 { font-size: 40px; } .cab .ancho { padding-top: 34px; padding-bottom: 30px; } .cab p.sub { font-size: 17px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 230px; } .tile.g, .tile.h, .tile.n4 { grid-column: auto; } .tile.g { grid-row: span 2; } .tile.v { grid-row: span 1; }
  .tile.g h3 { font-size: 36px; } .vitrina { top: 22px; left: 18px; right: 18px; gap: 8px; }
  .delitos-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda-grande { padding: 22px; min-height: 260px; } .banda-grande h3 { font-size: 32px; }
  .heroe-c { min-height: 500px; } .heroe-c .ancho { grid-template-columns: 1fr; } .heroe-c h1 { font-size: 62px; } .contador { text-align: left; } .contador b { font-size: 72px; }
  .hoy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .podio { gap: 8px; } .placa span { font-size: 13px; padding: 0 16px; } .podio .v { font-size: 22px; } .podio .chapa { width: 28px; height: 56px; }
  .clasif { padding: 16px 14px 12px; }
  .cazados, .mercado { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .por-delito { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maestros, .novatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jefe { grid-template-columns: 84px 1fr; } .jefe .ret { width: 84px; height: 84px; }
  .barras { grid-template-columns: 112px 1fr 38px; font-size: 14px; }
  .calor { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; font-size: 9px; }
  .calor .h:nth-child(odd) { visibility: hidden; }
  .sec-t h2 { font-size: 28px; } .sec-t { margin-top: 48px; }
  .caro { grid-template-columns: 100px 1fr; } .caro b { font-size: 28px; }
  .ficha-cab .ancho { flex-direction: column; align-items: flex-start; gap: 16px; } .ficha-cab h1 { font-size: 36px; }
  .casilla.g { width: 160px; height: 114px; } .retrato.g { width: 120px; height: 120px; }
  .fila { align-items: flex-start; } .prob { min-width: 92px; } .barra-p { width: 80px; } .prob b { font-size: 19px; }
  .rejilla { grid-template-columns: 1fr; }
  .carcel-tarjeta .img { min-height: 300px; } .carcel-tarjeta .img h2 { font-size: 56px; } .carcel-tarjeta .datos-c { padding: 20px; }
  .hueco-futuro { grid-template-columns: 1fr; padding: 22px; }
  .delitos-sel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .delitos-sel button { padding: 8px; } .delitos-sel button b { font-size: 15px; }
  .nivel-sel { grid-template-columns: auto 1fr; } .nivel-sel .pasos { grid-column: 1 / -1; }
  .muro-ancho .muro { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .lo-facil { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── ALCATRAZ · versión B: el recuento («la fachada encendida») y la pared de SE BUSCA ── */
.recuento { position: relative; isolation: isolate; overflow: hidden; padding: 26px 0 46px; }
.recuento > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -3; opacity: .28; filter: blur(2px) saturate(.7); }
.recuento::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 55% at 50% 0%, rgba(255,190,110,.20), transparent 70%), linear-gradient(0deg, var(--fondo) 3%, rgba(11,13,16,.6) 40%, rgba(11,13,16,.75)); }
.recuento .tit-c { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.recuento h1 { font-size: 64px; }
.lampara { width: 120px; height: 14px; margin: 0 auto -2px; border-radius: 0 0 60px 60px; background: linear-gradient(180deg, #2a2a2a, #111); box-shadow: 0 6px 40px 10px rgba(255,190,110,.35); position: relative; z-index: 2; }
/* EL RECUENTO (propuesta 5 · «la fachada encendida»): en vez de la pizarra, un panel de vidrio como los
   del resto de la web con la fachada del módulo de noche dibujada en CSS. Cada ventana encendida es un
   preso dentro ahora; las apagadas, lo que falta hasta el récord. Mismo ámbar, mismas Barlow y la misma
   luz de farol que el resto de páginas. */
.fachada { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(20,24,30,.86), rgba(13,16,20,.9)); border-color: var(--borde-2); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.fachada::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 70% at 28% 0%, rgba(242,154,46,.10), transparent 70%); }
.fa-cab { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 26px 0; }
.fa-cab > div { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.fa-fecha { color: var(--texto-3); font-size: 15px; }
.fa-cuerpo { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.fa-izq { padding: 6px 26px 22px; min-width: 0; }
.fa-cifra { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; margin-bottom: 16px; }
.fa-cifra > b { grid-row: 1 / 3; font-family: var(--f-tit); font-weight: 700; font-size: 112px; line-height: .82; color: var(--ambar-2); text-shadow: 0 0 34px rgba(242,154,46,.45); letter-spacing: -.01em; }
.fa-cifra > span:not(.fa-rec) { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 22px; line-height: 1.05; }
.fa-rec { color: var(--texto-2); font-size: 15px; padding-bottom: 6px; }
.fa-rec b { font-family: var(--f-tit); font-size: 20px; color: var(--texto); }
/* la fachada */
.fa-modulo { margin: 0; --hueco-v: 1fr; }
.fa-tejado { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 -6px; background: linear-gradient(180deg, #2a2f36, #1b1f25); border: 1px solid rgba(255,255,255,.07); border-bottom-color: rgba(0,0,0,.5); border-radius: 3px 3px 0 0; }
.fa-rotulo { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .3em; font-size: 12.5px; color: #c9cfd6; text-shadow: 0 0 8px rgba(255,190,110,.35); white-space: nowrap; }
.fa-farol { width: 22px; height: 7px; border-radius: 0 0 11px 11px; background: #ffe2a8; box-shadow: 0 0 10px 3px rgba(255,190,110,.75), 0 10px 40px 14px rgba(255,170,70,.18); }
.fa-muro { position: relative; overflow: hidden; padding: 14px 16px 0;
  background:
    radial-gradient(38% 90% at 33% -8%, rgba(255,186,105,.15), transparent 70%),
    radial-gradient(38% 90% at 67% -8%, rgba(255,186,105,.15), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px),
    radial-gradient(120% 60% at 50% 110%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(180deg, #2a2724, #1d1c1d 55%, #15171a);
  border-inline: 1px solid rgba(255,255,255,.06); }
.fa-ventanas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: clamp(3px, .7vw, 10px); row-gap: clamp(8px, 1.05vw, 15px); }
.fa-v { display: block; aspect-ratio: 3 / 4; border-radius: 2px 2px 0 0; background: #0c0f13; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 3px 0 -1px rgba(190,178,160,.22), 0 7px 6px -2px rgba(0,0,0,.55); position: relative; }
.fa-v::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 28%, rgba(0,0,0,.55) 28% 36%); }
.fa-v.on { background: linear-gradient(180deg, #ffd796, #ef9f45 62%, #b86a25); border-color: rgba(255,214,150,.45); box-shadow: 0 0 7px rgba(255,170,70,.45), 0 0 18px rgba(242,154,46,.14), 0 3px 0 -1px rgba(255,214,160,.35), 0 7px 6px -2px rgba(0,0,0,.55); }
.fa-v.on.t2 { filter: brightness(.78) saturate(.9); }
.fa-v.on.t3 { background: linear-gradient(180deg, #ffe7bd, #f4b765 62%, #c47f36); }
.fa-v.on.tv { background: linear-gradient(180deg, #f1ead9, #c8bfae 60%, #8d8576); border-color: rgba(235,225,205,.45); box-shadow: 0 0 7px rgba(230,220,200,.35), 0 3px 0 -1px rgba(255,214,160,.3), 0 7px 6px -2px rgba(0,0,0,.55); }
.fa-porton { grid-column: span 2; display: block; align-self: end; position: relative; height: calc(100% + 6px); border-radius: 3px 3px 0 0; background: repeating-linear-gradient(90deg, #0a0c0f 0 3px, #2d333b 3px 5px); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
.fa-porton span { position: absolute; left: 50%; top: -9px; width: 10px; height: 4px; margin-left: -5px; border-radius: 0 0 5px 5px; background: #ffe2a8; box-shadow: 0 0 8px 2px rgba(255,190,110,.7), 0 8px 26px 8px rgba(255,170,70,.16); }
.fa-lluvia { position: absolute; inset: 0; pointer-events: none; opacity: .55; background: repeating-linear-gradient(104deg, transparent 0 9px, rgba(190,210,235,.07) 9px 10px, transparent 10px 23px); background-size: 120px 120px; animation: fa-llueve 1.1s linear infinite; }
@keyframes fa-llueve { from { background-position: 0 0; } to { background-position: -30px 120px; } }
.fa-suelo { height: 18px; margin: 0 -6px; background: radial-gradient(30% 120% at 33% 0%, rgba(255,186,105,.20), transparent 70%), radial-gradient(30% 120% at 67% 0%, rgba(255,186,105,.20), transparent 70%), radial-gradient(12% 140% at 50% 0%, rgba(255,186,105,.25), transparent 70%), repeating-linear-gradient(90deg, rgba(255,190,110,.06) 0 6px, transparent 6px 15px), linear-gradient(180deg, #23282f, #0e1114); border-top: 2px solid #2f353d; border-radius: 0 0 3px 3px; }
.fa-v.tv { animation: fa-tele 9s steps(1, end) infinite; }
.fa-v.tv:nth-of-type(2n) { animation-delay: -3s; } .fa-v.tv:nth-of-type(3n) { animation-delay: -6s; animation-duration: 11s; }
@keyframes fa-tele { 0%, 86%, 100% { filter: none; } 89% { filter: brightness(.82); } 93% { filter: brightness(1.06); } }
@media (prefers-reduced-motion: reduce) { .fa-lluvia, .fa-v.tv { animation: none; } }
.fa-ley { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; margin: 12px 0 0; color: var(--texto-2); font-size: 14.5px; }
.fa-ley span { display: inline-flex; align-items: center; gap: 8px; }
.fa-ley .fa-v { width: 12px; flex: none; }
.fa-ley .fa-pct { margin-left: auto; font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ambar-2); }
/* lo de hoy, a la derecha */
.fa-der { padding: 6px 26px 22px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-width: 0; }
.fa-t { font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; color: var(--texto-2); padding: 4px 0 6px; }
.fa-filas { list-style: none; margin: 0; padding: 0; }
.fa-filas li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--borde); }
.fa-filas li:first-child { border-top: 0; }
.fa-filas li span { color: var(--texto-2); font-size: 16px; }
.fa-filas li b { font-family: var(--f-tit); font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; }
.fa-pie { margin-top: auto; padding-top: 12px; display: flex; gap: 12px; align-items: stretch; }
.fa-pie small { display: block; font-family: var(--f-tit); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--texto-3); }
.fa-clan { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 5px; border: 1px solid rgba(242,154,46,.4); background: linear-gradient(90deg, rgba(242,154,46,.14), rgba(242,154,46,.03)); }
.fa-clan img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.fa-clan b { display: block; font-family: var(--f-tit); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 20px; line-height: 1.05; color: var(--ambar-2); }
.fa-jefes { flex: none; padding: 10px 14px; border-radius: 5px; border: 1px solid var(--borde); background: var(--hueco); text-align: right; }
.fa-jefes b { font-family: var(--f-tit); font-weight: 700; font-size: 26px; line-height: 1.05; }
@media (max-width: 1100px) {
  .fa-cuerpo { grid-template-columns: 1fr; }
  .fa-der { border-left: 0; border-top: 1px solid var(--borde); padding-top: 14px; }
  .fa-filas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .fa-filas li:nth-child(2) { border-top: 0; }
}

/* La pared de SE BUSCA */
.pared { position: relative; border-radius: 10px; padding: 46px 40px 40px; background: radial-gradient(70% 60% at 50% 0%, rgba(255,190,110,.13), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px), linear-gradient(180deg, #1b1d20, #121417); border: 1px solid var(--borde); overflow: hidden; }
.pared .lampara { position: absolute; left: 50%; top: 0; margin: 0 0 0 -60px; }
.carteles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: start; }
.cartel-busca { position: relative; color: var(--tinta-papel); text-align: center; padding: 22px 22px 24px; background: radial-gradient(ellipse at center, transparent 50%, rgba(110,70,25,.32)), repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0 1px, transparent 1px 4px), var(--papel); clip-path: polygon(0 1%, 9% 0, 23% 1.2%, 41% .2%, 58% 1%, 77% 0, 92% 1.3%, 100% .4%, 99.4% 22%, 100% 47%, 99.2% 74%, 100% 99%, 85% 100%, 62% 98.9%, 38% 100%, 18% 98.8%, 0 100%, .7% 70%, 0 41%, .8% 18%); }
.cartel-m { filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); position: relative; }
.cartel-m::before { content: ''; position: absolute; z-index: 2; left: 50%; top: -12px; width: 96px; height: 26px; margin-left: -48px; background: rgba(232,222,196,.55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cartel-m.r1 { transform: rotate(-1.4deg); } .cartel-m.r2 { transform: rotate(.9deg) translateY(10px); } .cartel-m.r3 { transform: rotate(-.5deg) translateY(4px); }
.cartel-busca .tit { font-family: var(--f-tit); font-weight: 700; font-size: 58px; line-height: .92; letter-spacing: .03em; border-block: 3px double var(--tinta-papel); padding: 6px 0 4px; }
.cartel-busca .sub { font-family: var(--f-tit); font-weight: 600; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; margin: 8px 0 12px; }
.cartel-busca .foto { position: relative; height: 196px; border: 3px solid var(--tinta-papel); background: repeating-linear-gradient(180deg, transparent 0 19px, rgba(43,29,16,.28) 19px 20px), #d8c296; overflow: hidden; }
.cartel-busca .foto .alturas { position: absolute; left: 6px; top: 0; bottom: 0; display: grid; align-content: space-between; font: 600 10px var(--f-tit); opacity: .6; padding: 4px 0; text-align: left; }
.cartel-busca .foto svg { position: absolute; left: 50%; bottom: -2px; height: 86%; transform: translateX(-50%); opacity: .88; }
.cartel-busca .foto .chapa { position: absolute; right: 10px; top: 10px; width: 26px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.cartel-busca .foto .placa-n { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #1d1a17; color: #f3ead6; font: 700 13px var(--f-tit); letter-spacing: .14em; padding: 5px 10px; border-radius: 2px; white-space: nowrap; }
.cartel-busca .nom { font-family: var(--f-tit); font-weight: 700; font-size: 34px; text-transform: uppercase; line-height: 1; margin-top: 14px; }
.cartel-busca .del { font-size: 15px; margin-top: 4px; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cartel-busca .del img { width: 22px; height: 22px; object-fit: contain; }
.cartel-busca .recomp { margin-top: 12px; border-top: 2px solid rgba(43,29,16,.5); padding-top: 10px; }
.cartel-busca .recomp small { font: 600 12px var(--f-tit); letter-spacing: .3em; text-transform: uppercase; display: block; }
.cartel-busca .recomp b { font-family: var(--f-tit); font-weight: 700; font-size: 30px; color: var(--tinta-roja); text-transform: uppercase; line-height: 1.05; display: block; }
.sello-rojo { position: absolute; right: -8px; top: -10px; z-index: 3; font: 700 15px var(--f-tit); letter-spacing: .14em; color: #a3271c; border: 3px solid #a3271c; padding: 3px 8px; transform: rotate(12deg); background: rgba(230,212,173,.4); opacity: .9; }
.tambien { margin-top: 30px; }
.desliza { display: none; margin: 0; text-align: center; color: var(--texto-3); font: 600 13px var(--f-tit); letter-spacing: .12em; text-transform: uppercase; }
.tambien .filas li .v { color: var(--ambar-2); }
@media (max-width: 1100px) { .carteles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .cartel-busca .tit { font-size: 44px; } }
@media (max-width: 760px) {
  .recuento h1 { font-size: 44px; }
  /* el recuento en el teléfono: la fachada se queda entera (24 ventanas por planta, más pequeñas) */
  .fa-cab { padding: 14px 14px 0; } .fa-fecha { font-size: 13.5px; }
  .fa-izq { padding: 4px 14px 16px; } .fa-der { padding: 12px 14px 16px; }
  .fa-cifra { column-gap: 12px; } .fa-cifra > b { font-size: 84px; } .fa-cifra > span:not(.fa-rec) { font-size: 18px; } .fa-rec { font-size: 13.5px; padding-bottom: 2px; } .fa-rec b { font-size: 17px; }
  .fa-tejado { height: 24px; gap: 10px; margin: 0 -3px; } .fa-rotulo { font-size: 12px; letter-spacing: .16em; } .fa-farol { width: 16px; height: 5px; }
  .fa-muro { padding: 10px 7px 0; } .fa-suelo { height: 12px; margin: 0 -3px; }
  .fa-ventanas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 6px; row-gap: 8px; } .fa-v { aspect-ratio: 5 / 6; }
  .fa-ley { font-size: 13.5px; gap: 4px 14px; } .fa-ley .fa-pct { margin-left: 0; }
  .fa-filas { grid-template-columns: 1fr; } .fa-filas li:nth-child(2) { border-top: 1px solid var(--borde); }
  .fa-filas li span { font-size: 15px; } .fa-filas li b { font-size: 23px; }
  .fa-clan b { font-size: 18px; } .fa-jefes b { font-size: 22px; }

  .pared { padding: 34px 16px 24px; margin-inline: calc(var(--lado) * -1); border-radius: 0; border-inline: 0; }
  /* En el teléfono los tres carteles van en fila y se pasan con el dedo: apilados ocupaban casi dos mil
     píxeles de alto antes de llegar a lo demás. Se asoma el siguiente para que se vea que hay más. */
  .carteles { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -20px -16px 0; padding: 24px 16px 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .carteles::-webkit-scrollbar { display: none; }
  .cartel-m { flex: 0 0 84%; scroll-snap-align: center; }
  .cartel-m.r2, .cartel-m.r3 { transform: rotate(.6deg); }
  .desliza { display: block; }
  .cartel-busca .tit { font-size: 52px; }
}

/* ── LO QUE AÑADE EL SERVIDOR (r645-web, tramo B): la página llega entera y sin JavaScript se lee ── */
/* Las pestañas son anclas: sin JS cada clasificación se ve seguida, con su título; con JS (html.js), una. */
.tabs a { display: inline-flex; align-items: center; color: var(--texto-3); font: 600 15px var(--f-tit); text-transform: uppercase; letter-spacing: .1em; padding: 16px 13px 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 48px; box-sizing: border-box; }
.tabs a[aria-selected="true"] { color: var(--texto); border-color: var(--ambar); }
.tabs a:hover { color: var(--texto); }
.tab-t { font-size: 22px; margin: 0 0 6px; }
html.js [data-tabs] .clasif:not(.on) { display: none; }
html.js [data-tabs] .tab-t { display: none; }
.clasif + .clasif { border-top: 1px solid var(--borde); }
html.js [data-tabs] .clasif + .clasif { border-top: 0; }
.podio .p.vacio-p { visibility: hidden; }
.vacio { color: var(--texto-3); font-style: italic; margin: 0; }
/* La fachada: dos dibujos (24 ventanas por planta en el ordenador, 12 en el teléfono) para que se vea
   bien sin depender del JavaScript; las que sobran del récord en la planta de arriba son pared. */
.fa-ventanas.fa-pc { grid-template-columns: repeat(24, minmax(0, 1fr)); }
.fa-ventanas.fa-tel { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fa-v.fa-tapiada { visibility: hidden; }
@media (max-width: 640px) { .fa-ventanas.fa-pc { display: none; } .fa-ventanas.fa-tel { display: grid; } }
/* SE BUSCA: el sello de CAZADO, los intocables de la semana pasada y la pared vacía. */
.sello-cazado { position: absolute; left: 50%; top: 42%; z-index: 4; transform: translate(-50%, -50%) rotate(-14deg); font: 700 40px/1 var(--f-tit); letter-spacing: .12em; text-transform: uppercase; color: #a3271c; border: 5px solid #a3271c; padding: 6px 16px 4px; border-radius: 4px; background: rgba(230,212,173,.35); mix-blend-mode: multiply; white-space: nowrap; pointer-events: none; }
.cartel-busca.cazado .foto svg { opacity: .55; }
.intocables { margin: 22px 0 0; text-align: center; color: var(--ambar-2); font: 600 17px var(--f-tit); letter-spacing: .06em; text-transform: uppercase; }
.sin-carteles { max-width: 640px; margin: 0 auto; text-align: center; }
.sin-carteles b { font-family: var(--f-tit); font-size: 26px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.sin-carteles p { margin: 0; color: var(--texto-2); }
/* Lo que no tiene dibujo: su inicial. */
.cazado .img .ini, .jefe .ret.ini { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(#2a2016, #0e0b08); font: 700 64px var(--f-tit); color: var(--texto-3); }
.jefe .ret.ini { width: 110px; height: 110px; border-radius: 6px; font-size: 48px; border: 1px solid var(--borde-2); }
.mercado .it { --c: #8b939e; }
.mercado .it .vis img.px, .caro .vis img.px { image-rendering: pixelated; width: 64%; }
.pie-datos { margin-top: 44px; text-align: center; }
.que-hay .panel { color: inherit; }
@media (max-width: 640px) {
  .jefe .ret.ini { width: 84px; height: 84px; }
  .sello-cazado { font-size: 32px; }
  .tabs a { padding: 14px 10px 12px; font-size: 14px; }
}
/* El muro de la fama con muchos: en filas de placas y el resto plegado. */
.muro-ancho .muro, .muro-mas .muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-template-rows: none; grid-auto-flow: row; column-gap: 14px; }
.muro .pl { padding: 0 15%; }
.muro-mas summary { cursor: pointer; margin: 0 18px 4px; color: var(--ambar-2); font: 600 14px var(--f-tit); letter-spacing: .1em; text-transform: uppercase; min-height: 40px; display: flex; align-items: center; }
.muro-mas .muro { padding-top: 0; }
/* Un «todavía nadie» ocupa toda la fila de la rejilla. */
.cazados > .vacio, .mercado > .vacio, .novatos > .vacio, .por-delito > .vacio, .records > .vacio { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .tambien .titulo-panel { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tambien .titulo-panel span:last-child { font-size: 12px; color: var(--texto-3); }
}
.chip.chip-hora { gap: 0; }

/* ── /novedades (tramo C): el parte publicado, actualización a actualización ──────────────────── */
.nov-cab .ancho { padding-bottom: 36px; }
.nov-pag { color: var(--texto-3); font-size: .6em; letter-spacing: .04em; }
.nov-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-top: 32px; margin-bottom: 64px; }
.nov-lista { display: grid; gap: 28px; min-width: 0; }
.nov-act { padding: 0; overflow: hidden; scroll-margin-top: 90px; }
.nov-act-cab { border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, rgba(242,154,46,.06), transparent); }
.nov-portada img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.nov-act-tit { padding: 22px 26px 18px; }
.nov-act-tit h2 { font-size: 38px; margin: 8px 0 6px; }
.nov-act-tit h2 a:hover { color: var(--ambar-2); }
.nov-lema { color: var(--texto-2); margin: 0 0 10px; font-size: 18px; }
.nov-cuentas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: var(--texto-2); }
.nov-cuentas li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: 1px; }
.nov-cuentas b { color: var(--texto); }
.nov-sec { padding: 6px 26px 4px; }
.nov-sec + .nov-sec { border-top: 1px solid var(--borde); }
.nov-sec-t { font-size: 22px; margin: 18px 0 4px; color: var(--ambar-2); }
.nov-sec-t .num { color: var(--texto-3); font-size: .7em; margin-left: 6px; }
.nov-ent { padding: 16px 0 18px; scroll-margin-top: 90px; }
.nov-ent + .nov-ent { border-top: 1px dashed var(--borde); }
.nov-ent:target { background: rgba(242,154,46,.06); box-shadow: -26px 0 0 rgba(242,154,46,.06), 26px 0 0 rgba(242,154,46,.06); }
.nov-ent.destacado h4 { color: var(--ambar-2); }
.nov-ent-cab { display: flex; align-items: center; gap: 10px; }
.nov-chapa { font-family: var(--f-tit); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); border: 1px solid var(--c); border-radius: 3px; padding: 1px 8px; }
.nov-ancla { color: var(--texto-3); font-family: var(--f-tit); font-size: 15px; padding: 2px 6px; opacity: .6; }
.nov-ancla:hover, .nov-ancla:focus-visible { color: var(--ambar-2); opacity: 1; }
.nov-ent h4 { font-family: var(--f-tit); font-weight: 700; font-size: 23px; letter-spacing: .01em; line-height: 1.15; margin: 8px 0 8px; text-transform: none; }
.nov-ent p { margin: 0 0 8px; color: var(--texto-2); }
.nov-ent ul { margin: 0 0 10px; padding-left: 22px; color: var(--texto-2); }
.nov-ent li { margin: 3px 0; }
.nov-fotos { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.nov-fotos.n2 { --n: 2; } .nov-fotos.n3 { --n: 3; }
.nov-foto { margin: 0; }
.nov-foto img { width: auto; max-width: 100%; height: auto; max-height: 460px; margin-inline: auto; border-radius: 4px; border: 1px solid var(--borde); background: var(--fondo-2); }
.nov-foto figcaption { color: var(--texto-3); font-size: 14px; margin-top: 6px; }
.nov-ad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nov-ad figcaption { grid-column: 1 / -1; }
.nov-foto-lado { position: relative; display: block; }
.nov-rot { position: absolute; left: 8px; top: 8px; font-family: var(--f-tit); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: rgba(11,13,16,.85); color: var(--texto); padding: 2px 8px; border-radius: 2px; }
.nov-indice { padding: 18px 18px 12px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; }
.nov-indice h2 { font-size: 18px; margin: 0 0 10px; color: var(--ambar-2); }
.nov-indice ol { list-style: none; margin: 0; padding: 0; }
.nov-indice li a { display: block; padding: 7px 8px; border-radius: 4px; }
.nov-indice li a:hover { background: var(--hueco); }
.nov-indice li.aqui a { border-left: 2px solid var(--ambar); padding-left: 10px; }
.nov-indice b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; }
.nov-indice small { color: var(--texto-3); font-size: 13px; }
.nov-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 4px; }
.nov-nums { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nov-nums a, .nov-nums b, .nov-nums span { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; border-radius: 4px; font-family: var(--f-tit); font-weight: 600; }
.nov-nums a { border: 1px solid var(--borde-2); }
.nov-nums a:hover { background: rgba(255,255,255,.08); }
.nov-nums b { background: var(--ambar); color: var(--tinta-boton); }
@media (max-width: 1100px) {
  .nov-rejilla { grid-template-columns: minmax(0, 1fr); }
  .nov-indice { position: static; max-height: none; order: 2; }
}
@media (max-width: 640px) {
  .nov-act-tit { padding: 18px 16px 14px; }
  .nov-act-tit h2 { font-size: 30px; }
  .nov-sec { padding: 4px 16px 2px; }
  .nov-ent h4 { font-size: 20px; }
  .nov-ent:target { box-shadow: -16px 0 0 rgba(242,154,46,.06), 16px 0 0 rgba(242,154,46,.06); }
  .nov-fotos.n2, .nov-fotos.n3 { --n: 1; }
  .nov-ad { grid-template-columns: 1fr; }
}

/* ══ NADA SE SALE DE SU CAJA (revisión del 24-10-2026) ═══════════════════════════════════════════
 * Con los datos de producción, a 360 y 390 px el podio y «el mejor de cada delito» se salían de su
 * panel (un nick de 12 letras en mayúsculas, el máximo al crear personaje, ya no cabía) y daban scroll
 * lateral; con los de 24 letras que se pueden poner al renombrar, también en el ordenador (el tercer
 * cartel de SE BUSCA, fuera de la pantalla). Las rejillas van con minmax(0, …) (arriba) y los textos
 * pueden partirse por cualquier sitio y encoger la letra. */
.podio .p, .por-delito .panel, .por-delito .panel > div, .maestro, .novato, .cazado, .cazado .t, .mercado .it, .cartel-m, .cartel-busca, .filas li .n, .fa-clan > span, .clasif { min-width: 0; }
.placa span, .cartel-busca .nom, .por-delito b, .maestro b, .novato .n, .filas li .n, .fa-clan b, .cazado .t b, .mercado .it b, .muro .pl span, .jefe h3 { overflow-wrap: anywhere; word-break: normal; }
.placa span { max-width: 100%; font-size: clamp(11px, 0.55vw + 8px, 16px); padding: 0 clamp(10px, 2vw, 30px); }
.cartel-busca .nom { font-size: clamp(20px, 1.6vw + 12px, 34px); }
.clasif-nota { margin: 4px 6px 0; color: var(--texto-3); }
@media (max-width: 640px) { .placa span { font-size: clamp(10.5px, 1.2vw + 7px, 13px); padding: 0 10px; } }
.filas li { grid-template-columns: 34px minmax(0, 1fr) auto; } .filas li.banda { grid-template-columns: 34px 44px minmax(0, 1fr) auto; }
.por-delito .panel { grid-template-columns: 30px minmax(0, 1fr); } .jefe { grid-template-columns: 110px minmax(0, 1fr); }
@media (max-width: 640px) { .jefe { grid-template-columns: 84px minmax(0, 1fr); } }
/* En el teléfono, los doce de un nick en mayúsculas (el máximo al crear personaje) caben en una línea en
   la placa del podio y en «el mejor de cada delito»; los de 24 (renombrados) se parten. */
@media (max-width: 640px) { .placa span { font-size: clamp(9px, 2.45vw, 13px); padding: 0 5px; letter-spacing: 0; } }
@media (max-width: 420px) { .por-delito .panel { padding: 12px 10px; gap: 8px; } .por-delito b { font-size: 14px; } }