/* Debajo Roleplay — identidad propia: expediente noir. Carmesí del logo, hueso y latón; riel lateral en vez de menú superior. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Inter:wght@400;500;600&display=swap');
:root {
  --rojo: #ff2c2c;
  --rojo-vivo: #ff2c2c;
  --rojo-oscuro: #6e1418;
  --laton: #c9a25a;
  --hueso: #efe6dc;
  --fondo: #0b0809;
  --fondo-2: #120c0d;
  --panel: #1a1112;
  --borde: #33191b;
  --texto: #efe6dc;
  --texto-2: #b3a39f;
  --discord: #5865f2;
  --riel: 88px;
  --titulo: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --ficha: 'Special Elite', 'Courier New', monospace;
  --cuerpo: 'Inter', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-left: var(--riel); background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); line-height: 1.55; }
body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--rojo-vivo); }
img { max-width: 100%; }
::selection { background: var(--rojo); color: #fff; }

/* ---------- riel de navegación ---------- */
.nav { position: fixed; inset: 0 auto 0 0; width: var(--riel); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0;
  background: linear-gradient(180deg, #100a0b, #0b0809); border-right: 1px solid var(--borde); }
.nav-logo img { width: 62px; display: block; transition: transform .3s; }
.nav-logo:hover img { transform: rotate(-6deg) scale(1.08); }
.nav-links { display: flex; flex-direction: column; gap: 2px; margin: auto 0; }
.nav-links a { writing-mode: vertical-rl; transform: rotate(180deg); padding: 16px 10px; color: var(--texto-2); text-decoration: none; font: 400 13px var(--ficha); letter-spacing: .18em; text-transform: uppercase; border-right: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover { color: var(--hueso); border-color: var(--rojo); }
.nav-cuenta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nav-cuenta img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--laton); }
.nav-cuenta .nombre { display: none; }
.nav-cuenta .btn { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 9px; font: 400 12px var(--ficha); letter-spacing: .14em; text-transform: uppercase; border-radius: 6px; }
.nav-menu { display: none; }

/* ---------- botones ---------- */
.btn { display: inline-block; padding: 11px 22px; border: 2px solid transparent; border-radius: 4px; font: 600 14px var(--cuerpo); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.btn:hover { transform: translate(-2px, -2px); }
.btn-grande { padding: 15px 32px; font-size: 16px; }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { filter: brightness(1.15); }
.btn-borde { background: #ff2c2c1f; color: var(--hueso); box-shadow: inset 0 0 0 2px var(--rojo); }
.btn-borde:hover { background: var(--rojo); }
.btn-laton { background: var(--laton); color: #1a1112; }
.btn-discord { background: var(--discord); color: #fff; }
.btn-gris { background: #2a1c1d; color: var(--texto); }
.nav .btn { clip-path: none; }
.nav .btn:hover { transform: rotate(180deg); }

/* ---------- portada ---------- */
.hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; padding: 60px clamp(24px, 5vw, 80px); overflow: hidden; }
.hero-fondo { position: absolute; inset: -40px; background: url(../img/fondo.png) center 18% / cover; filter: blur(16px) saturate(1.05) brightness(.42); transform: scale(1.12); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #0b0809 8%, #0b080900 55%), linear-gradient(#0b080900 60%, #0b0809); }
.hero-palabra { position: absolute; z-index: 1; left: -1vw; bottom: -6vw; font: 400 31vw/0.8 var(--titulo); color: transparent; -webkit-text-stroke: 2px #ff2c2c38; letter-spacing: -.01em; user-select: none; pointer-events: none; }
.hero-texto, .hero-escudo { position: relative; z-index: 3; }
.sello { display: inline-block; font: 400 13px var(--ficha); letter-spacing: .22em; color: var(--laton); border: 1px solid #c9a25a66; padding: 6px 12px; transform: rotate(-2deg); margin-bottom: 18px; }
.hero h1 { font: 400 clamp(44px, 7vw, 104px)/.92 var(--titulo); letter-spacing: .01em; margin: 0 0 18px; text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--rojo-vivo); }
.lema { font-size: clamp(16px, 1.5vw, 19px); color: var(--texto-2); max-width: 46ch; margin: 0 0 26px; }
.hero-botones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-escudo { display: grid; place-items: center; }
.hero-logo { width: min(440px, 80%); animation: flotar 7s ease-in-out infinite; filter: drop-shadow(0 0 46px #ff2c2caa); cursor: grab; transition: transform .2s; }
@keyframes flotar { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -14px; rotate: 1.5deg; } }

.placa { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; background: #120c0de6; border: 1px solid var(--borde); border-left: 4px solid #6b5a58; font: 400 14px var(--ficha); letter-spacing: .1em; text-transform: uppercase; margin-left: 4px; }
.placa b { font: 400 22px var(--titulo); letter-spacing: .04em; }
.estado-punto { width: 11px; height: 11px; border-radius: 50%; background: #8a7a7a; }
.placa.en-linea { border-left-color: #35d07f; }
.placa.en-linea .estado-punto { background: #35d07f; animation: pulso 1.8s infinite; }
.placa.apagado { border-left-color: var(--rojo-vivo); }
.placa.apagado .estado-punto { background: var(--rojo-vivo); }
@keyframes pulso { from { box-shadow: 0 0 0 0 #35d07f99; } to { box-shadow: 0 0 0 12px #35d07f00; } }

.brasas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brasas i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ff7a3c; box-shadow: 0 0 8px 2px #ff5a3caa; opacity: 0; animation: subir linear infinite; }
@keyframes subir { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }

/* ---------- secciones ---------- */
.seccion { padding: 96px clamp(24px, 5vw, 80px); max-width: 1320px; }
.seccion-oscura { max-width: none; background: var(--fondo-2); border-block: 1px solid var(--borde); }
.cabecera { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 34px; }
.cabecera .num { font: 400 15px var(--ficha); color: var(--laton); letter-spacing: .2em; }
.seccion h2 { font: 400 clamp(34px, 5vw, 68px)/.95 var(--titulo); text-transform: uppercase; margin: 0; }
.seccion h2 em { font-style: normal; color: var(--rojo-vivo); }
.cabecera p { color: var(--texto-2); margin: 0; max-width: 52ch; }
.vacio { color: var(--texto-2); grid-column: 1 / -1; }
.centro { text-align: center; }

/* buscador de normas */
.buscador { position: relative; max-width: 760px; }
.buscador input { width: 100%; padding: 20px 22px 20px 58px; background: #0b0809; border: 2px solid var(--borde); color: var(--hueso); font: 400 20px var(--ficha); outline: none; transition: border-color .2s; }
.buscador input:focus { border-color: var(--rojo); }
.buscador::before { content: '?'; position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--rojo); font: 400 20px var(--titulo); clip-path: polygon(0 0, 100% 0, 50% 100%); padding-bottom: 8px; }
.sugerencias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sugerencias button { background: none; border: 1px dashed #6b5a58; color: var(--texto-2); padding: 6px 12px; font: 400 13px var(--ficha); cursor: pointer; }
.sugerencias button:hover { color: var(--hueso); border-color: var(--rojo); }
.resultados { display: grid; gap: 12px; margin-top: 22px; max-width: 900px; }
.resultado { display: block; background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--rojo); padding: 16px 20px; text-decoration: none; color: var(--texto); transition: transform .15s, border-color .15s; }
.resultado:hover { transform: translateX(6px); border-color: var(--rojo); }
.resultado small { font: 400 12px var(--ficha); letter-spacing: .16em; color: var(--laton); text-transform: uppercase; }
.resultado b { display: block; font: 400 21px var(--titulo); letter-spacing: .03em; margin: 2px 0 6px; }
.resultado p { margin: 0; color: var(--texto-2); font-size: 15px; }
.resultado mark { background: #ff2c2c55; color: var(--hueso); padding: 0 2px; }

/* elige tu camino */
.caminos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--borde); }
.camino { position: relative; text-align: left; background: var(--panel); border: 0; border-right: 1px solid var(--borde); color: var(--texto); padding: 26px 22px 30px; cursor: pointer; overflow: hidden; transition: background .25s; font-family: inherit; }
.camino:last-child { border-right: 0; }
.camino::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; background: var(--rojo); opacity: .12; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: opacity .25s, transform .25s; }
.camino small { font: 400 12px var(--ficha); letter-spacing: .2em; color: var(--laton); }
.camino b { display: block; font: 400 30px/1 var(--titulo); text-transform: uppercase; margin: 8px 0 8px; }
.camino span { color: var(--texto-2); font-size: 14px; }
.camino:hover, .camino.activo { background: #23130f; }
.camino.activo { box-shadow: inset 0 -4px 0 var(--rojo); }
.camino.activo::after, .camino:hover::after { opacity: .5; transform: scale(1.2); }
.camino-detalle { border: 1px solid var(--borde); border-top: 0; background: linear-gradient(180deg, #1c1011, var(--fondo-2)); padding: 32px clamp(20px, 3vw, 40px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; }
.camino-detalle h3 { font: 400 30px var(--titulo); text-transform: uppercase; margin: 0 0 10px; }
.camino-detalle p { color: var(--texto-2); margin: 0 0 14px; }
.lista-ficha { list-style: none; margin: 0; padding: 0; }
.lista-ficha li { padding: 10px 0 10px 26px; border-bottom: 1px dashed var(--borde); position: relative; }
.lista-ficha li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 10px; background: var(--rojo); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lista-ficha li b { color: var(--hueso); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* planificador de golpes */
.golpes { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--borde); }
.golpes-lista { display: flex; flex-direction: column; border-right: 1px solid var(--borde); }
.golpes-lista button { text-align: left; background: var(--panel); border: 0; border-bottom: 1px solid var(--borde); color: var(--texto-2); padding: 20px 22px; font: 400 22px var(--titulo); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.golpes-lista button small { display: block; font: 400 12px var(--ficha); letter-spacing: .14em; color: var(--laton); }
.golpes-lista button.activo { background: var(--rojo); color: #fff; }
.golpes-lista button.activo small { color: #ffe1c2; }
.golpe-plan { padding: 30px clamp(20px, 3vw, 40px); background: var(--fondo-2); }
.golpe-plan h3 { font: 400 34px var(--titulo); text-transform: uppercase; margin: 0 0 4px; }
.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0; }
.medidor { border: 1px solid var(--borde); padding: 14px 16px; background: #0b0809; }
.medidor small { font: 400 11px var(--ficha); letter-spacing: .16em; color: var(--texto-2); text-transform: uppercase; display: block; }
.medidor b { font: 400 40px/1 var(--titulo); color: var(--hueso); }
.medidor.clave b { color: var(--rojo-vivo); }
.deslizador { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; }
.deslizador input { flex: 1; accent-color: var(--rojo); height: 30px; }
.armas { display: flex; gap: 8px; flex-wrap: wrap; }
.armas span { padding: 6px 12px; border: 1px solid var(--borde); font: 400 13px var(--ficha); letter-spacing: .08em; }
.armas span.si { border-color: #35d07f66; color: #9be8bf; }
.armas span.no { color: #6b5a58; text-decoration: line-through; }
.nota-golpe { color: var(--texto-2); font-size: 14px; margin-top: 18px; }

/* pulso de la ciudad */
.pulso { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid var(--borde); margin-bottom: 44px; }
.pulso div { padding: 22px; border-right: 1px solid var(--borde); background: var(--panel); }
.pulso small { font: 400 12px var(--ficha); letter-spacing: .16em; color: var(--laton); text-transform: uppercase; display: block; }
.pulso b { font: 400 52px/1.05 var(--titulo); }
.pulso .servicio b { font-size: 26px; }
.columnas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
.columnas h3 { font: 400 26px var(--titulo); text-transform: uppercase; margin: 0 0 16px; }
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.miembro { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--borde); padding: 10px 12px; }
.miembro img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--laton); object-fit: cover; }
.miembro b { display: block; font-size: 14px; line-height: 1.2; }
.miembro span { color: var(--rojo-vivo); font: 400 11px var(--ficha); letter-spacing: .1em; text-transform: uppercase; }
.noticias { display: grid; gap: 14px; }
.noticia { background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--laton); padding: 16px 20px; }
.noticia time { font: 400 12px var(--ficha); letter-spacing: .14em; color: var(--laton); text-transform: uppercase; }
.noticia p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.noticia img { margin-top: 12px; max-height: 340px; }

/* cómo entrar: línea de tiempo */
.linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: paso; }
.linea article { position: relative; padding: 30px 26px 26px; border-top: 3px solid var(--borde); }
.linea article::before { counter-increment: paso; content: '0' counter(paso); position: absolute; top: -26px; left: 24px; background: var(--fondo); padding: 0 12px; font: 400 44px/1 var(--titulo); color: var(--rojo-vivo); }
.linea article:hover { border-top-color: var(--rojo); }
.linea h3 { font: 400 26px var(--titulo); text-transform: uppercase; margin: 14px 0 8px; }
.linea p { color: var(--texto-2); margin: 0 0 16px; }

/* ---------- páginas interiores ---------- */
.pagina { max-width: 900px; margin: 0 auto; padding: 70px 28px 90px; }
.pagina h1 { font: 400 clamp(40px, 6vw, 76px)/.95 var(--titulo); text-transform: uppercase; margin: 0 0 8px; }
.pagina h2 { font: 400 30px var(--titulo); text-transform: uppercase; color: var(--rojo-vivo); margin: 42px 0 10px; scroll-margin-top: 20px; }
.sub { color: var(--laton); font: 400 13px var(--ficha); letter-spacing: .22em; margin: 0 0 22px; text-transform: uppercase; }
.pagina li { margin-bottom: 8px; color: var(--texto-2); }
.pagina li b { color: var(--texto); }
.normativa h3 { font: 400 22px var(--titulo); letter-spacing: .03em; margin: 30px 0 8px; padding-left: 14px; border-left: 4px solid var(--rojo); scroll-margin-top: 20px; }
.normativa h4 { font: 400 15px var(--ficha); letter-spacing: .1em; text-transform: uppercase; color: var(--laton); margin: 24px 0 6px; }
.normativa p { color: var(--texto-2); margin: 0 0 10px; }
.normativa :target { animation: destello 2.4s; }
@keyframes destello { 0%, 60% { background: #ff2c2c40; } 100% { background: none; } }
.pestanas { display: flex; flex-wrap: wrap; gap: 0; margin: 16px 0 10px; }
.pestanas a { padding: 10px 22px; border: 1px solid var(--borde); margin-right: -1px; background: var(--panel); color: var(--texto-2); font: 400 13px var(--ficha); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.pestanas a.activa, .pestanas a:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.tabla { border-collapse: collapse; margin: 12px 0 18px; min-width: 280px; }
.tabla th, .tabla td { border: 1px solid var(--borde); padding: 9px 16px; text-align: left; }
.tabla th { background: var(--panel); font: 400 12px var(--ficha); letter-spacing: .14em; text-transform: uppercase; color: var(--laton); }
.tabla td:last-child { font: 400 20px var(--titulo); color: var(--rojo-vivo); }
.aviso { background: #ff2c2c1a; border: 1px solid var(--rojo-oscuro); border-left: 4px solid var(--rojo); padding: 14px 18px; margin: 18px 0; }
.caja { background: var(--panel); border: 1px solid var(--borde); padding: 26px; margin: 18px 0; }
.caja h3 { margin: 0 0 12px; font: 400 26px var(--titulo); text-transform: uppercase; }
.campo { display: block; margin: 0 0 16px; }
.campo span { display: block; font: 400 12px var(--ficha); letter-spacing: .14em; text-transform: uppercase; color: var(--laton); margin-bottom: 6px; }
.campo input, .campo textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--borde); background: #0b0809; color: var(--texto); font: 15px var(--cuerpo); outline: none; }
.campo input:focus, .campo textarea:focus { border-color: var(--rojo); }
.campo textarea { min-height: 120px; resize: vertical; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dato { background: #0b0809; border: 1px solid var(--borde); padding: 14px 16px; }
.dato small { color: var(--texto-2); display: block; font: 400 11px var(--ficha); letter-spacing: .14em; text-transform: uppercase; }
.dato b { font: 400 24px var(--titulo); letter-spacing: .02em; }
.ok { color: #35d07f; } .mal { color: var(--rojo-vivo); }

/* examen: una pregunta por pantalla */
.progreso { display: flex; gap: 5px; margin: 6px 0 26px; }
.progreso i { flex: 1; height: 10px; background: var(--borde); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%); transition: background .2s; }
.progreso i.hecha { background: var(--rojo); }
.progreso i.actual { background: var(--laton); }
.escena { border: 1px solid var(--borde); background: var(--panel); padding: 30px clamp(18px, 3vw, 36px); animation: entrar .25s; }
@keyframes entrar { from { opacity: 0; transform: translateX(18px); } }
.escena small { font: 400 12px var(--ficha); letter-spacing: .2em; color: var(--laton); }
.escena h3 { font: 600 clamp(19px, 2.2vw, 24px)/1.35 var(--cuerpo); margin: 10px 0 22px; }
.opcion { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 15px 18px; margin: 8px 0; background: #0b0809; border: 1px solid var(--borde); color: var(--texto); font: 15px var(--cuerpo); cursor: pointer; transition: border-color .15s, transform .15s; }
.opcion kbd { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #6b5a58; font: 400 15px var(--titulo); color: var(--laton); }
.opcion:hover { border-color: var(--rojo); transform: translateX(4px); }
.opcion.elegida { border-color: var(--rojo); background: #ff2c2c22; }
.opcion.elegida kbd { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.examen-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.examen-pie span { font: 400 13px var(--ficha); color: var(--texto-2); letter-spacing: .08em; }

/* panel: documento de identidad */
.dpi { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 22px; max-width: 640px; padding: 22px 24px; margin: 22px 0 10px; color: #23181a; background: linear-gradient(135deg, #efe6dc, #d9cbbb); border-radius: 14px; box-shadow: 0 18px 50px #000a; overflow: hidden; transform: rotate(-1deg); transition: transform .3s; }
.dpi:hover { transform: rotate(0) scale(1.01); }
.dpi::before { content: 'DEBAJO'; position: absolute; right: -10px; bottom: -34px; font: 400 130px/1 var(--titulo); color: #ff2c2c1c; }
.dpi::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; background: repeating-linear-gradient(90deg, var(--rojo) 0 26px, #23181a 26px 52px); }
.dpi-foto { width: 150px; height: 180px; background: #23181a center / cover; border: 3px solid #23181a; display: grid; place-items: center; font: 400 70px var(--titulo); color: #efe6dc; margin-top: 12px; }
.dpi-datos { position: relative; z-index: 1; padding-top: 12px; }
.dpi-datos small { display: block; font: 400 10px var(--ficha); letter-spacing: .18em; text-transform: uppercase; color: #7a5a55; margin-top: 8px; }
.dpi-datos b { font: 400 17px var(--ficha); }
.dpi-datos .nombre { font: 400 34px/1 var(--titulo); text-transform: uppercase; color: #23181a; }
.dpi-cabeza { font: 400 11px var(--ficha); letter-spacing: .2em; color: var(--rojo-oscuro); }
.dpi-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }

/* ---------- páginas con datos del juego ---------- */
.pagina.ancha { max-width: 1240px; }
.entrada { color: var(--texto-2); font-size: 17px; max-width: 60ch; margin: 0 0 26px; }
.dos-col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }
.dos-col .buscador { margin-bottom: 8px; }
.articulo { display: flex; justify-content: space-between; gap: 18px; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde); color: var(--texto); padding: 13px 16px; margin: 6px 0; cursor: pointer; font-family: inherit; transition: border-color .15s, transform .15s; }
.articulo:hover { border-left-color: var(--rojo); transform: translateX(4px); }
.articulo b { display: block; font-size: 15px; }
.articulo i { font-style: normal; color: var(--texto-2); font-size: 14px; }
.pena { text-align: right; flex: none; }
.pena b { font: 400 22px var(--titulo); color: var(--rojo-vivo); }
.pena small { display: block; font: 400 12px var(--ficha); color: var(--laton); letter-spacing: .08em; }
.hoja { position: sticky; top: 20px; background: linear-gradient(135deg, #efe6dc, #d9cbbb); color: #23181a; padding: 24px; box-shadow: 0 18px 50px #000a; transform: rotate(.6deg); }
.hoja .sello { color: var(--rojo-oscuro); border-color: #6e141866; }
.hoja .vacio, .hoja li { color: #4a3936; }
.hoja .lista-ficha li { border-bottom-color: #23181a33; padding-right: 26px; font: 400 14px var(--ficha); }
.hoja .quitar { position: absolute; right: 0; top: 6px; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--rojo-oscuro); }
.hoja .medidor { background: #23181a; border: 0; }
.hoja .medidor small { color: #b3a39f; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.filtros input, .filtros select { padding: 12px 14px; background: #0b0809; border: 1px solid var(--borde); color: var(--texto); font: 15px var(--cuerpo); outline: none; }
.filtros input { flex: 1; min-width: 200px; }
.filtros input:focus, .filtros select:focus { border-color: var(--rojo); }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.coche { background: var(--panel); border: 1px solid var(--borde); padding: 16px 18px; transition: border-color .15s, transform .15s; }
.coche:hover { border-color: var(--rojo); transform: translateY(-3px); }
.coche small { font: 400 11px var(--ficha); letter-spacing: .14em; text-transform: uppercase; color: var(--laton); }
.coche h3 { font: 400 22px/1.05 var(--titulo); text-transform: uppercase; margin: 6px 0 8px; }
.coche > b { display: block; font: 400 26px var(--titulo); color: var(--rojo-vivo); }
.coche p { color: var(--texto-2); font-size: 14px; margin: 0 0 8px; }
.coche .btn { margin-top: 12px; padding: 8px 14px; font-size: 13px; }
.coche.con-foto { padding-top: 0; overflow: hidden; }
.coche-foto { display: block; width: calc(100% + 36px); max-width: none; margin: 0 -18px 12px; aspect-ratio: 16 / 9; object-fit: contain; padding: 6px 10px 0; background: radial-gradient(ellipse at 50% 85%, #ff2c2c26, #0b0809 70%); transition: transform .35s; }
.coche.con-foto:hover .coche-foto { transform: scale(1.07); }
.catalogo:has(.con-foto) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.barra { height: 6px; background: var(--borde); margin: 10px 0 5px; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--rojo), var(--laton)); }
.muro { display: grid; gap: 12px; }
.post { background: var(--panel); border: 1px solid var(--borde); padding: 16px 18px; }
.post-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.post-cab img, .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--laton); }
.avatar { display: grid; place-items: center; background: var(--rojo); font: 400 20px var(--titulo); }
.post small { color: var(--texto-2); font-size: 13px; display: block; }
.post p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* en el muro, fotos y vídeos van recortados en cuadrado (como en Instagram); la foto entera se ve en su página propia */
.post-img { display: block; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; margin-bottom: 8px; background: #0b0809; }
a.post-enlace { display: block; max-width: 420px; }
.post.oculta { opacity: .55; border-style: dashed; }
.post-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-pie span { display: flex; gap: 14px; }
.enlace { background: none; border: 0; padding: 0; color: var(--texto-2); font: 400 12px var(--ficha); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.enlace:hover { color: var(--rojo-vivo); }
.post.suelto { margin: 18px 0; }
.post.suelto .post-img { width: auto; max-width: 100%; max-height: 70vh; aspect-ratio: auto; object-fit: contain; }
.tabla.ancha { width: 100%; }
.tabla.ancha td:last-child { font: inherit; color: inherit; }
.tabla.ancha td:first-child { font: 400 18px var(--titulo); color: var(--laton); }
.tabla small { color: var(--texto-2); font-size: 11px; }
.puertas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--borde); }
.puerta { position: relative; display: block; padding: 28px 24px 30px; background: var(--panel); border-right: 1px solid var(--borde); color: var(--texto); text-decoration: none; overflow: hidden; transition: background .25s; }
.puerta:last-child { border-right: 0; }
.puerta:hover { background: #23130f; }
.puerta small { font: 400 12px var(--ficha); letter-spacing: .18em; color: var(--laton); text-transform: uppercase; }
.puerta b { display: block; font: 400 54px/1 var(--titulo); color: var(--rojo-vivo); margin: 10px 0 2px; }
.puerta h3 { font: 400 26px/1 var(--titulo); text-transform: uppercase; margin: 0 0 8px; }
.puerta p { color: var(--texto-2); font-size: 14px; margin: 0; }
.puerta::after { content: '→'; position: absolute; right: 20px; top: 22px; font-size: 22px; color: var(--rojo); transition: transform .25s; }
.puerta:hover::after { transform: translateX(6px); }
.cuenta-atras { font-variant-numeric: tabular-nums; }

/* ---------- la guía: mapa postal ---------- */
.barrios { position: absolute; left: 0; top: 0; width: 6144px; height: 9216px; pointer-events: none; }
.barrios polygon { fill: #ff2c2c17; stroke: #ff2c2c; stroke-width: 2; vector-effect: non-scaling-stroke; }
.barrios text { fill: #efe6dccc; font: 400 34px var(--titulo); text-anchor: middle; paint-order: stroke; stroke: #0b0809; stroke-width: 7px; letter-spacing: 1px; }
.capas { margin: 16px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.capas label { display: flex; align-items: center; gap: 10px; font: 400 13px var(--ficha); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); cursor: pointer; }
.capas input { accent-color: var(--rojo); width: 16px; height: 16px; }
.pin.casa span { background: var(--laton); color: #1a1112; }
.pin.casa::after { background: var(--laton); }
.cuerpo-guia { overflow: hidden; }
.guia { display: grid; grid-template-columns: 340px 1fr; height: 100vh; }
.guia-lista { overflow-y: auto; padding: 28px 24px 30px; border-right: 1px solid var(--borde); background: var(--fondo-2); }
.guia-lista h1 { font: 400 40px/.95 var(--titulo); text-transform: uppercase; margin: 0 0 12px; }
.guia-lista h1 em { font-style: normal; color: var(--rojo-vivo); }
.guia-lista p { color: var(--texto-2); font-size: 14px; margin: 0 0 8px; }
.guia-lista h3 { font: 400 12px var(--ficha); letter-spacing: .2em; text-transform: uppercase; color: var(--laton); margin: 22px 0 6px; }
.lugar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent; color: var(--texto); padding: 9px 10px; font: 15px var(--cuerpo); cursor: pointer; }
.lugar kbd { flex: none; min-width: 44px; text-align: center; padding: 3px 6px; border: 1px solid var(--borde); font: 400 15px var(--titulo); color: var(--rojo-vivo); letter-spacing: .04em; }
.lugar:hover, .lugar.activo { background: var(--panel); border-left-color: var(--rojo); }
.lugar.activo kbd { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.guia-mapa { position: relative; overflow: hidden; background: #0b1622; cursor: grab; touch-action: none; user-select: none; }
.guia-mapa.arrastrando { cursor: grabbing; }
.mapa-lienzo { position: absolute; left: 0; top: 0; width: 6144px; height: 9216px; transform-origin: 0 0; will-change: transform; }
.mapa-lienzo img { position: absolute; display: block; max-width: none; pointer-events: none; }
.pin { position: absolute; z-index: 2; transform: translate(-50%, -100%) scale(var(--inv, 1)); transform-origin: 50% 100%; background: none; border: 0; padding: 0 0 12px; cursor: pointer; }
.pin span { display: block; padding: 4px 9px; background: var(--rojo); color: #fff; font: 400 16px var(--titulo); letter-spacing: .05em; box-shadow: 0 4px 14px #000a; }
.pin::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 14px; height: 12px; translate: -50% 0; background: var(--rojo); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pin:hover span, .pin.activo span { background: var(--hueso); color: #1a1112; }
.pin:hover::after, .pin.activo::after { background: var(--hueso); }
.pin.activo { z-index: 3; }
.mapa-botones { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.mapa-botones button { width: 42px; height: 42px; background: var(--panel); border: 1px solid var(--borde); color: var(--hueso); font: 400 22px var(--titulo); cursor: pointer; }
.mapa-botones button:hover { background: var(--rojo); border-color: var(--rojo); }
.guia-ficha { position: absolute; left: 18px; top: 18px; width: min(360px, calc(100% - 36px)); background: #120c0df2; border: 1px solid var(--borde); border-top: 4px solid var(--rojo); padding: 20px 22px; cursor: default; backdrop-filter: blur(6px); animation: entrar .25s; }
.guia-ficha small { font: 400 12px var(--ficha); letter-spacing: .16em; text-transform: uppercase; color: var(--laton); }
.guia-ficha h2 { font: 400 32px/1 var(--titulo); text-transform: uppercase; margin: 6px 0 8px; }
.guia-ficha p { color: var(--texto-2); margin: 0 0 6px; font-size: 15px; }
.guia-ficha .pista { margin-top: 14px; font-size: 13px; }
.guia-ficha .cerrar { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: var(--texto-2); font-size: 24px; cursor: pointer; }
@media (max-width: 900px) {
  .guia { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 64px); }
  .guia-lista { padding: 14px 16px 10px; border-right: 0; border-bottom: 1px solid var(--borde); overflow: hidden; min-width: 0; }
  .capas { flex-direction: row; gap: 18px; margin: 4px 0 10px; }
  .dos-col > * { min-width: 0; }
  .tabla.ancha { display: block; overflow-x: auto; }
  .pagina { padding: 46px 20px 70px; }
  .guia-lista h1 { font-size: 26px; margin: 0 0 8px; }
  .guia-lista .sello, .guia-lista p, .guia-lista h3 { display: none; }
  #guiaLugares { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .lugar { flex: none; width: auto; border: 1px solid var(--borde); border-left-width: 1px; padding: 6px 10px; font-size: 13px; }
  .guia-ficha { left: 10px; top: auto; bottom: 10px; width: calc(100% - 74px); max-height: 60%; overflow-y: auto; }
}

/* ---------- pie ---------- */
.pie { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px clamp(24px, 5vw, 80px); border-top: 1px solid var(--borde); color: var(--texto-2); font-size: 13px; }
.pie img { height: 62px; }
.pie-links { display: flex; gap: 22px; }
.pie-links a { color: var(--texto); text-decoration: none; font: 400 13px var(--ficha); letter-spacing: .14em; text-transform: uppercase; }
.pie-links a:hover { color: var(--rojo-vivo); }
.pie p { margin: 0 0 0 auto; }

/* ---------- móvil: el riel pasa a barra inferior ---------- */
@media (max-width: 900px) {
  body { padding-left: 0; padding-bottom: 64px; }
  .nav { inset: auto 0 0 0; width: auto; height: 64px; flex-direction: row; padding: 0 10px; border-right: 0; border-top: 1px solid var(--borde); }
  .nav-logo img { width: 46px; }
  .nav-links { flex-direction: row; margin: 0 auto; overflow-x: auto; }
  .nav-links a, .nav-cuenta .btn { writing-mode: horizontal-tb; transform: none; padding: 10px 9px; font-size: 11px; letter-spacing: .1em; border-right: 0; }
  .nav .btn:hover { transform: none; }
  .nav-cuenta { flex-direction: row; }
  .nav-cuenta img { width: 36px; height: 36px; }
  .hero { grid-template-columns: 1fr; text-align: left; padding: 40px 22px 60px; min-height: auto; }
  .hero-escudo { order: -1; }
  .hero-logo { width: min(260px, 70%); }
  .caminos { grid-template-columns: 1fr 1fr; }
  .camino { border-bottom: 1px solid var(--borde); }
  .camino-detalle, .columnas, .golpes, .dos-col { grid-template-columns: 1fr; }
  .puertas { grid-template-columns: 1fr 1fr; }
  .puerta { border-bottom: 1px solid var(--borde); }
  .hoja { position: static; }
  .golpes-lista { flex-direction: row; overflow-x: auto; border-right: 0; }
  .golpes-lista button { flex: none; font-size: 17px; padding: 14px 16px; }
  .linea { grid-template-columns: 1fr; gap: 34px; }
  .seccion { padding: 64px 20px; }
  .dpi { grid-template-columns: 1fr; }
  .pie p { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-logo, .brasas i, .estado-punto, .escena { animation: none !important; } }