/* Composición: barra superior, mosaico de portada (última edición grande + 5 titulares), lista de ediciones
   anteriores, botón de más y franja de redes. Fondo: foto de portada que se degrada en cuero oscuro con textura de piedra. */
:root {
  --leather: #3a3430;
  --bar: rgba(26, 22, 20, .92);
  --panel: #1b100a;
  --gold: #ffb30f;
  --gold-soft: #e6a21d;
  --cream: #f1e3c8;
  --muted: #c8b394;
  --line: #3d3733;
  --red: #c4281c;
  --alianza: #5f93de;
  --horda: #d8402e;
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-title: "Archivo", "Open Sans", system-ui, sans-serif;
  /* Aquí irá tu foto de portada, por ejemplo: --foto: url("portada.jpg"); */
  --foto: url("g-dcda79df.webp");
  color-scheme: dark;
}
/* cuero oscuro con textura de piedra */
.bg-leather {
  background-color: var(--leather);
  background-image: url("g-76e32b3a.svg"), url("g-bcf170ec.svg");
  background-size: 512px 512px, 300px 300px;
  background-blend-mode: multiply;
}
/* foto de portada que se degrada hacia el cuero */
.bg-hero {
  bottom: auto; height: max(900px, 60vw);
  background-image: url("g-af051d5e.jpg"), url("g-6b2cf5a9.svg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 48%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 48%, transparent 100%);
}
.hv-kick { margin: 16px 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ffd890; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.hv-title { margin: 0 0 8px; font-family: var(--font-title); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; text-transform: uppercase; color: #fff4dc; text-shadow: 0 2px 12px rgba(0,0,0,.8); text-wrap: balance; }
.art { max-width: none; margin-top: 8px; }
.art-meta { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.art-meta .t { color: var(--muted); }
.art-title { margin: 0 0 22px; font-family: var(--font-title); font-weight: 900; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; color: #fff4dc; text-shadow: 0 2px 14px rgba(0,0,0,.6); text-wrap: balance; }
.art-lede { text-align: justify; margin: 0 0 30px; font-size: 1.15rem; line-height: 1.6; color: #eadcc0; }
.art-img { max-width: 100%; margin: 0 0 34px; }
.art-img .vthumb { width: 100%; }
.art-fig { width: 62%; margin: 8px auto 34px; }
.art-fig .vthumb { width: 100%; }
.art-fig figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .art-fig { width: 100%; } }
.art-body p { text-align: justify; margin: 0 0 20px; font-size: 1.05rem; line-height: 1.75; color: #eadcc0; }
.art-body h2 { margin: 34px 0 14px; font-family: var(--font-title); font-weight: 800; font-size: 1.4rem; color: var(--gold); }
.art-back { display: inline-block; margin: 14px 0 0; font-weight: 700; font-size: 14px; color: var(--gold); text-decoration: none; }
.art-back:hover { text-decoration: underline; }
.art-more { margin: 70px 0 120px; }
.art-more h2 { margin: 0 0 22px; font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; color: #fff4dc; }
/* ===== Guías de bandas y mazmorras: filas con nombre a la izquierda e imagen que se funde a la derecha ===== */
.ipanel { margin-top: 22px; padding: 14px; border-radius: 14px; background: rgba(14, 15, 20, .82); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.irow { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  min-height: 62px; padding: 10px 16px; border-radius: 10px; text-decoration: none; color: #fff4dc; background: #1a1c23;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: transform .2s, box-shadow .2s; }
.irow .ir-img { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 52%;
  background: var(--img, var(--art)) var(--pos, center) / var(--zoom, 260%) auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 30%, #000 70%);
  filter: saturate(1.1) brightness(.95); transition: transform .5s cubic-bezier(.2,.8,.3,1), filter .3s; }
.irow b { position: relative; font-family: var(--font-title); font-weight: 700; font-size: 16px; line-height: 1.2; max-width: 62%; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.irow .meta { display: flex; flex-wrap: wrap; gap: 6px; max-width: 62%; }
.irow .meta span { padding: 2px 8px; border-radius: 99px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--k) 70%, #fff); background: color-mix(in srgb, var(--k) 14%, rgba(0,0,0,.4)); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); }
.irow:hover, .irow:focus-visible { transform: translateY(-2px); outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 70%, transparent), 0 10px 22px rgba(0, 0, 0, .5), 0 0 16px color-mix(in srgb, var(--k) 25%, transparent); }
.irow:hover .ir-img, .irow:focus-visible .ir-img { transform: scale(1.08); filter: saturate(1.25) brightness(1.05); }
.irow:nth-child(8n+1) { --pos: 8% 35%; }
.irow:nth-child(8n+2) { --pos: 72% 22%; }
.irow:nth-child(8n+3) { --pos: 40% 70%; }
.irow:nth-child(8n+4) { --pos: 95% 60%; }
.irow:nth-child(8n+5) { --pos: 55% 40%; }
.irow:nth-child(8n+6) { --pos: 20% 85%; }
.irow:nth-child(8n+7) { --pos: 85% 90%; }
.irow:nth-child(8n) { --pos: 30% 15%; }
@media (max-width: 640px) { .igrid { grid-template-columns: minmax(0, 1fr); } .ipanel { padding: 10px; } }
a.chip{text-decoration:none}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:28px}
.cat-head .cat-logo{height:130px;width:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.cat-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cat-jump a{padding:10px 18px;border:1px solid rgba(230,162,29,.55);border-radius:4px;background:rgba(0,0,0,.6);color:#f4e9d4;font-weight:700;font-size:14px;text-decoration:none}
.cat-jump a:hover{background:var(--gold);color:#1d1107}
.nsec{margin-top:64px;scroll-margin-top:110px}
.nsec:first-of-type{margin-top:52px}
.nsec-head{display:flex;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;gap:6px 22px;margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid rgba(230,162,29,.35)}
.nsec-head h2{margin:0;font-family:var(--font-title);font-weight:800;font-size:1.6rem;color:#fff4dc;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.nsec-head p{margin:0;font-size:14px;color:var(--muted)}
.nsec .nlist{border-top:0}
.gh{margin:0 0 22px;font-family:var(--font-title);font-weight:800;font-size:1.6rem;color:#fff4dc;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.chips5 .chip b{font-size:16.5px}
.chips5 .chip span{font-size:13.5px}
.chips5 .chip { position: relative;  overflow: visible; isolation: isolate; }
.chips5 .chip > b, .chips5 .chip > span { position: relative; z-index: 2; }
.chips5 .chip.has-logo > b, .chips5 .chip.has-logo > span { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.9); }
.chips5 .chip.has-logo > span { color: #e6d6b8; }
.chips5 .clogo { position: absolute; z-index: 1; left: 50%; top: 50%; height: 80%; width: auto; max-width: 80%; object-fit: contain; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: transform .28s cubic-bezier(.2,.9,.3,1.3), opacity .2s, filter .2s; pointer-events: none; filter: saturate(.8); }
.chips5 .chip.has-logo:hover, .chips5 .chip.has-logo:focus-visible { z-index: 5; }
.chips5 .chip.has-logo:hover .clogo, .chips5 .chip.has-logo:focus-visible .clogo { opacity: 1; filter: saturate(1) drop-shadow(0 8px 10px rgba(0,0,0,.7)); transform: translate(-50%, -62%) scale(var(--ls, 2.19)); }
.chips5 .chip.has-logo:hover > b, .chips5 .chip.has-logo:hover > span { opacity: 0; transition: opacity .15s; }
.chips5 .chip.has-logo[aria-pressed="true"] { background: rgba(230,162,29,.28); color: #fff4dc; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.chips5 .chip.has-logo[aria-pressed="true"] > span { color: #fff4dc; }
.chips5 .chip[data-f=classic] { --ls: 1.44; }
.chips5 .chip[data-f=hardcore] { --ls: 2.30; }
@media (hover: none) { .chips5 .chip.has-logo:hover > b, .chips5 .chip.has-logo:hover > span { opacity: 1; } }
.chips5{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.chips5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.chips5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:700px){.board{grid-template-columns:minmax(0,1fr)}}
.tile2:last-child:nth-child(3n+1){grid-column:1/-1}
.tile2:last-child:nth-child(3n+2){grid-column:span 2}
.tile2{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;padding:16px 18px;min-height:76px;background:rgba(0,0,0,.6);border:1px solid rgba(230,162,29,.55);border-radius:4px;text-decoration:none;color:#f4e9d4;transition:transform .2s,background .2s,box-shadow .2s}
.tile2 i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(230,162,29,.7);background:rgba(230,162,29,.12);font-style:normal;font-family:var(--font-title);font-weight:800;font-size:19px;color:var(--gold)}
.tile2 .cicon.sq{border-radius:5px;border:1px solid rgba(0,0,0,.7)}
.tile2 .cicon{flex:none;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));transition:transform .2s}
.tile2:hover .cicon{transform:scale(1.18) rotate(-4deg)}
.tile2 b{display:block;font-weight:700;font-size:16px}
.tile2 span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.tile2:hover,.tile2:focus-visible{transform:translateY(-3px);background:rgba(230,162,29,.16);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 1px var(--gold) inset}
.tile2:hover i{background:var(--gold);color:#1d1107}
.tile2[style]{background:color-mix(in srgb,var(--c) 48%,rgba(0,0,0,.55));border-color:var(--c)}
.tile2[style] i{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.tile2[style]:hover,.tile2[style]:focus-visible{background:var(--c);color:#14100a;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.tile2[style]:hover i{background:rgba(0,0,0,.18);border-color:#14100a;color:#14100a}
/* Profesiones: 3 columnas; las 2 últimas, centradas debajo y con el mismo ancho */
#profesiones .tile2{grid-column:auto}
@media (min-width:701px){
#profesiones .board{grid-template-columns:repeat(6,minmax(0,1fr))}
#profesiones .tile2{grid-column:span 2}
#profesiones .tile2:nth-child(13){grid-column:2 / span 2}
#profesiones .tile2:nth-child(14){grid-column:4 / span 2}
}
/* Portada de la guía: espacio para una imagen (usa --foto en :root o pon background en .gcover) con título y descripción integrados */
.phead .gcover{position:relative;margin-top:6px;min-height:323px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 36px 32px;overflow:hidden;background-color:#120c08;background-image:linear-gradient(135deg,var(--acc-bg,#0a0a0a) 0%,#000 75%);background-repeat:no-repeat;clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);box-shadow:0 26px 50px rgba(0,0,0,.5)}
.phead .gcover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,4,3,.94) 0,rgba(6,4,3,.78) 30%,rgba(6,4,3,.28) 55%,transparent 75%),linear-gradient(0deg,rgba(6,4,3,.85) 0,rgba(6,4,3,.25) 38%,transparent 62%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.phead .gcover>*{position:relative;z-index:2}
.phead .gcover>.gart{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.phead .gart::before{content:"";position:absolute;inset:-70px;background:var(--foto,none) center/cover no-repeat;filter:blur(38px) saturate(1.35) brightness(.6);opacity:.95;transform:scale(1.05)}
.phead .gart::after{content:"";position:absolute;top:0;bottom:0;right:-5%;width:62%;background:var(--foto,none) 50% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 46%),linear-gradient(180deg,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 46%),linear-gradient(180deg,#000 80%,transparent);mask-composite:intersect;animation:gartDrift 26s ease-in-out infinite alternate;transform-origin:62% 50%}
@keyframes gartDrift{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.phead .gart::after{animation:none}}
.phead .gcover::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--acc,var(--gold)),var(--acc2,var(--acc,var(--gold))) 45%,transparent 75%)}
.phead .gcover-hint{position:absolute;top:16px;right:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,240,210,.55);border:1px dashed rgba(255,240,210,.35);padding:4px 8px;border-radius:3px}
.phead .gtag{display:inline-block;align-self:flex-start;margin-bottom:14px;padding:5px 11px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-ink,#1d1107);background:linear-gradient(90deg,var(--acc,var(--gold)),var(--acc2,var(--acc,var(--gold))));clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.phead .gcover .ptitle{margin:0 0 12px;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1;color:#fff4dc;text-shadow:0 3px 22px rgba(0,0,0,.75)}
.phead .gcover .pdesc{margin:0;max-width:58ch;font-size:16px;line-height:1.55;color:#f3e6cb;padding-left:14px;border-left:3px solid var(--acc,var(--gold));text-shadow:0 1px 10px rgba(0,0,0,.8)}
@media (max-width:600px){.phead .gcover{min-height:340px;padding:26px 22px 24px}.phead .gcover::before{background:linear-gradient(0deg,rgba(6,4,3,.96) 0,rgba(6,4,3,.82) 34%,rgba(6,4,3,.2) 62%,transparent 80%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}.phead .gart::after{left:0;right:0;top:0;bottom:auto;width:auto;height:62%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-over;mask-composite:add}.phead .gcover .pdesc{font-size:15px}}