/* ═══════════════════════════════════════════════════════════ SoulsGuides — MURO · Capa BASE (compartida por todas las subpáginas con el lenguaje "La Vigilia / El Muro"). Contiene: tokens, reset temático, grano, portada y barra de mando. Las rejillas/fichas viven en muro-catalogo.css; los planificadores en muro-forja.css; las guías en muro-guia.css. Se activa con la clase `muro` en . ═══════════════════════════════════════════════════════════ */ :root{ --bg:#08060f; --bg2:#110d1c; --bg3:#1c1530; --crim:#c94a4a; --crim-l:#e06868; --crim-d:#8a2e2e; --viol:#9b59b6; --amber:#d4a050; --amber-l:#e8b86a; --muro-text:#9898b4; --muro-text-l:#e4e0ec; --muro-white:#f0ecf4; /* Tripletas RGB (coma-separadas) para rgba(var(--x-rgb), alpha). Por defecto tema Khazan (carmesí). Cada juego las sobreescribe en su body .page-*.muro para re-tematizar bordes, sombras y velos sin duplicar reglas. */ --crim-rgb:201,74,74; --crim-l-rgb:224,104,104; --crim-d-rgb:138,46,46; --amber-rgb:212,160,80; --amber-l-rgb:232,184,106; --viol-rgb:155,89,182; --viol-l-rgb:187,125,212; --bg-rgb:8,6,15; --bg-deep-rgb:4,3,9; --bg2-rgb:17,13,28; --bg3-rgb:28,21,48; --muro-text-rgb:152,152,180; --ff-muro:'Cinzel',serif; --ff-muro-d:'Cinzel Decorative',serif; --muro-ease:cubic-bezier(.19,1,.22,1); /* Brasas flotantes — tripletas "R G B" separadas por comas (las lee muro-fx.js). Re-tematizable por juego sobreescribiendo esta variable en el body. */ --muro-embers:201 74 74, 224 104 104, 212 160 80, 232 184 106, 155 89 182; /* Margen para anuncios / carriles laterales; lo fija cada página */ --shell:0px; } /* ─── Reset temático (acotado a la página Muro) ─── */ body.muro{ background:var(--bg); color:var(--muro-text); font-family:var(--ff-muro); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } body.muro img{display:block;max-width:100%} body.muro ::selection{background:rgba(var(--crim-rgb),.4);color:var(--muro-white)} /* ─── Brasas flotantes (canvas inyectado por muro-fx.js) ─── Sustituyen al antiguo grano fílmico: una capa de partículas de ambiente por detrás del contenido. El grano global (.grain) se oculta en las páginas Muro para no duplicar textura. */ .muro-embers{position:fixed;inset:0;z-index:0;pointer-events:none} body.muro .grain{display:none} body.muro #main-content{position:relative;z-index:1} /* Con la ficha abierta, el main sube por encima de la navbar (.hd z 100): el modal es pantalla completa de verdad y el título ya no queda cortado bajo la barra. */ body.muro.muro-ficha-open #main-content{z-index:120} /* ═══════════ PORTADA ═══════════ */ .cover{position:relative;padding:104px 0 34px;text-align:center;overflow:hidden} .cover::before{content:'';position:absolute;inset:0;background: radial-gradient(ellipse 70% 90% at 50% -10%,rgba(var(--crim-rgb),.14),transparent 60%), radial-gradient(ellipse 44% 60% at 50% 0%,rgba(var(--viol-rgb),.08),transparent 70%)} .crumbs{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:30px} .crumbs a{color:inherit;text-decoration:none;transition:color .3s} .crumbs a:hover{color:var(--crim-l)} .crumbs .sep{color:var(--crim-d)} .crumbs .cur{color:var(--muro-white)} .cover .sm{position:relative;display:block;font-size:11px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--crim-l);margin-bottom:12px} .cover h1{position:relative;font-family:var(--ff-muro-d);font-weight:900;font-size:clamp(40px,7vw,86px);line-height:.95;color:var(--muro-white);text-shadow:0 0 70px rgba(var(--crim-rgb),.5)} .cover h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px rgba(var(--crim-rgb),.9)} .cover .orn{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;margin-top:22px} .cover .orn i{width:7px;height:7px;background:var(--crim);transform:rotate(45deg);box-shadow:0 0 10px rgba(var(--crim-rgb),.9)} .cover .orn::before,.cover .orn::after{content:'';height:1px;width:min(150px,20vw);background:linear-gradient(90deg,transparent,rgba(var(--crim-rgb),.55))} .cover .orn::after{background:linear-gradient(270deg,transparent,rgba(var(--crim-rgb),.55))} .cover p{position:relative;max-width:56ch;margin:18px auto 0;font-size:13.5px;line-height:1.8;color:var(--muro-text)} /* ═══════════ BARRA DE MANDO (búsqueda + segmentos/filtros) ═══════════ */ .command{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(var(--bg-rgb),.97),rgba(var(--bg-rgb),.9));backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--crim-rgb),.16)} .cmd-in{width:min(1420px,95vw);margin:0 auto;display:flex;align-items:center;gap:16px;padding:13px 0;flex-wrap:wrap} .seg{display:flex;border:1px solid rgba(var(--crim-rgb),.2)} .seg button{font-family:var(--ff-muro);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muro-text); background:transparent;border:0;border-right:1px solid rgba(var(--crim-rgb),.14);padding:11px 17px;cursor:pointer;transition:all .3s} .seg button:last-child{border-right:0} .seg button:hover{color:var(--muro-text-l)} .seg button.on{background:rgba(var(--crim-rgb),.16);color:var(--muro-white)} .cmd-search{position:relative;flex:1;min-width:170px;max-width:400px} .cmd-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--crim-d)} .cmd-search input{width:100%;background:rgba(var(--bg3-rgb),.5);border:1px solid rgba(var(--crim-rgb),.2);color:var(--muro-white); font-family:var(--ff-muro);font-size:13px;letter-spacing:.04em;padding:11px 13px 11px 40px;outline:none;transition:border-color .3s,box-shadow .3s} .cmd-search input:focus{border-color:rgba(var(--crim-rgb),.55);box-shadow:0 0 22px rgba(var(--crim-rgb),.14)} .cmd-count{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap} .cmd-count b{color:var(--amber);font-size:13px} .cmd-note{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muro-text)} .cmd-note b{color:var(--amber-l)} @media(max-width:860px){ .cover{padding:84px 0 26px} .cmd-note{display:none} } /* ── CTA de cierre (compartido: catálogos y guías) ── */ .gcta{max-width:880px;margin:0 auto 90px;padding:0 20px;text-align:center} .gcta a{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-muro);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--muro-white);border:1px solid rgba(var(--crim-rgb),.4);background:rgba(var(--crim-rgb),.08);padding:14px 26px;transition:all .3s} .gcta a:hover{background:rgba(var(--crim-rgb),.18);border-color:var(--crim-l);box-shadow:0 0 24px rgba(var(--crim-rgb),.25)}