/* 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;
  /* ===== PLANTILLA DE FONDO =====
     --fondo:       imagen de cabecera; se funde hacia abajo con el color y la textura de piedra.
                    Ejemplo: --fondo: url("fondo-mago.jpg");
     --fondo-color: color al que se degrada la imagen (lleva encima la textura de piedra y las grietas).
     --fondo-pos:   encuadre de la imagen (center top, center 30%, ...). */
  --fondo: none;
  --fondo-color: #3a3430;
  --fondo-pos: center top;
  --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: none;
  color-scheme: dark;
}
/* cuero oscuro con textura de piedra */
.bg-leather {
  background-color: var(--fondo-color);
  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: var(--fondo);
  background-size: cover;
  background-position: var(--fondo-pos);
  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; }
.art-toc { margin: 0 0 34px; padding: 18px 24px; background: rgba(0,0,0,.45); border: 1px solid rgba(230,162,29,.35); border-radius: 4px; }
.art-toc p { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.art-toc ol { margin: 0; padding-left: 22px; color: #eadcc0; line-height: 1.9; }
.art-tip { margin: 0 0 22px; padding: 16px 20px; background: rgba(230,162,29,.1); border-left: 3px solid var(--gold); text-align: justify; color: #eadcc0; line-height: 1.65; }
.art-tip b { color: var(--gold); margin-right: 6px; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
/* ===== Guía de mazmorra o banda: índice y enemigos fijos a un lado, marcando la sección que se está leyendo ===== */
.ig-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.ig-sec { scroll-margin-top: 110px; }
.ig-boss { scroll-margin-top: 110px; margin: 0 0 30px; padding: 20px 22px 6px; border-radius: 12px; background: rgba(14, 15, 20, .6); border: 1px solid rgba(255, 255, 255, .06); }
.ig-bhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ig-bhead h3 { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; color: #fff4dc; }
.ig-bnum { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(230, 162, 29, .15); color: var(--gold); font-family: var(--font-mono); font-weight: 700; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(230, 162, 29, .45); }
.ig-bimg { margin-bottom: 16px; aspect-ratio: 21 / 8 !important; }
.ig-roles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ig-roles li { display: flex; gap: 10px; align-items: baseline; color: #eadcc0; line-height: 1.6; }
.ig-roles b { flex: none; min-width: 74px; padding: 1px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.r-tank { color: #8fb8ff; background: rgba(80, 130, 230, .15); }
.r-heal { color: #8ff0a4; background: rgba(60, 200, 100, .14); }
.r-dps { color: #ff9a8f; background: rgba(230, 80, 70, .15); }
.ig-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.ig-facts div { padding: 12px 14px; border-radius: 10px; background: rgba(14, 15, 20, .6); border: 1px solid rgba(255, 255, 255, .06); }
.ig-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ig-facts dd { margin: 4px 0 0; font-weight: 700; color: #fff4dc; }
.ig-more { padding-bottom: 8px; }
.ig-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ig-tbl thead th { padding: 0 12px 6px; text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6f7581; background: rgba(17, 18, 23, .98); }
.ig-tbl th:last-child, .ig-tbl td:last-child { text-align: right; white-space: nowrap; }
.ig-tbl td { padding: 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.ig-tbl td a { display: block; padding: 7px 12px; border-radius: 0; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #b9bfca; }
.ig-tbl td:last-child { padding-right: 12px; font-family: var(--font-mono); font-size: 11px; color: #7d8592; }
.ig-tbl tr:hover td a { color: #fff; background: none; }
.ig-tbl tr:hover td { background: rgba(255, 255, 255, .04); }
.ig-tbl tr.cur td a { color: var(--gold); }
.ig-tbl tr.cur td:first-child a::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.ig-scroll { max-height: 180px; overflow: auto; scrollbar-width: thin; }
/* columna lateral */
.ig-side { position: sticky; top: 100px; display: grid; gap: 14px; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; }
.ig-box { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: rgba(17, 18, 23, .92); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.ig-label { margin: 4px 12px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ig-box a { position: relative; display: block; padding: 8px 14px; border-radius: 9px; text-decoration: none; font-family: var(--font-title); font-weight: 600; font-size: 15px; line-height: 1.3; color: #9aa1ad; transition: color .2s, background .25s; }
.ig-box a:hover { color: #e6e9ee; background: rgba(255, 255, 255, .04); }
.ig-box a.on { color: #fff; font-weight: 700; background: #22252e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ig-box a.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--gold); }
@media (max-width: 960px) {
  .ig-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ig-side { order: -1; position: static; max-height: none; grid-template-columns: 1fr 1fr; }
  .ig-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ig-side { grid-template-columns: minmax(0, 1fr); } .ig-box a { font-size: 14px; padding: 8px 12px; } }
.ig-photo { position: relative; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse at 50% 60%, rgba(120, 90, 200, .28), rgba(8, 8, 14, .85) 70%); border: 1px solid rgba(255,255,255,.06); }
.ig-photo img { position: absolute; inset: 0; margin: 0 auto!important; height: 94%!important; width: 100%!important; object-fit: contain; display: block; mix-blend-mode: normal!important; top: auto!important; bottom: 0!important; object-position: 50% 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.ig-lore { font-style: italic; color: #cbbd9f; border-left: 2px solid rgba(230,162,29,.5); padding-left: 14px; }
.ig-boss h4 { font-family: inherit; font-weight: 800; font-size: 1.05rem; margin: 22px 0 10px; color: #fff4dc; letter-spacing: .02em; }
.ig-bul { margin: 0 0 14px; padding-left: 20px; color: #eadcc0; line-height: 1.6; }
.ig-bul li { margin: 4px 0; }
.ig-roles > li { align-items: flex-start; }
.ig-roles > li > div { flex: 1; min-width: 0; }
.ig-roles .ig-bul li { display: list-item; }
.ig-roles .ig-bul { padding-left: 18px; }
.ig-roles li > div p, .ig-roles li > div .ig-bul { margin: 0 0 6px; }
.sp { color: #ffd479; font-weight: 600; }
.ig-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-modes span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #eadcc0; }
.ig-det { margin: 18px 0 6px; border-radius: 10px; background: rgba(10, 10, 16, .55); border: 1px solid rgba(255,255,255,.07); }
.ig-det > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: #fff4dc; list-style: none; }
.ig-det > summary::-webkit-details-marker { display: none; }
.ig-det > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--gold); transition: transform .2s; }
.ig-det[open] > summary::before { transform: rotate(90deg); }
.ig-abil { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; gap: 10px; }
.ig-abil.sub { padding: 8px 0 0 18px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 11px; }
.ab-h { display: flex; align-items: center; gap: 8px; }
.ab-h b { color: #ffe7b0; }
.ab-t p { margin: 4px 0 0; font-size: .94rem; color: #d8cbb0; }
.ab-t .ig-bul { margin: 4px 0 0; font-size: .94rem; }
.ig-ico { width: 24px; height: 24px; border-radius: 5px; border: 1px solid rgba(0,0,0,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.12); flex: none; }
.ig-loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ig-loot .lt { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(10,10,16,.55); border: 1px solid rgba(255,255,255,.06); }
.ig-loot .lt .ig-ico { width: 34px; height: 34px; }
.ig-loot b { display: block; font-size: .92rem; line-height: 1.25; }
.ig-loot span { font-size: .8rem; color: var(--muted); }
.q-epic b { color: #c78bff; }
.q-rare b { color: #5aa2ff; }
.q-uncommon b { color: #4fd36a; }
.q-legendary b { color: #ff9a2e; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .86rem; color: #ffe7b0; background: rgba(255, 212, 121, .08); border: 1px solid rgba(255, 212, 121, .18); }
.ab-chip .ig-ico { width: 18px; height: 18px; }
.ig-src { font-size: .82rem; color: var(--muted); margin-top: 26px; }
@media (max-width: 700px) { .ig-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* dificultades y retratos */
.ig-difs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.ig-difs.en-jefes{position:sticky;top:92px;z-index:5;margin:0 0 18px;padding:8px;border-radius:12px;background:rgba(8,8,14,.88);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.07)}
.ig-dif{flex:1 1 auto;min-width:96px;padding:8px 14px;border-radius:9px;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;color:#d9ccb0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .15s,border-color .15s,color .15s}
.ig-dif:hover{border-color:rgba(255,201,77,.5);color:#fff4dc}
.ig-dif.on{color:#1b1206;background:var(--dc,#ffb30f);border-color:var(--dc,#ffb30f);box-shadow:0 0 14px color-mix(in srgb,var(--dc,#ffb30f) 45%,transparent)}
.ig-dif.d-lfr{--dc:#3ddc84}
.ig-dif.d-normal{--dc:#4aa3ff}
.ig-dif.d-heroic{--dc:#b65cff}
.ig-dif.d-mythic{--dc:#ff8000}
.ig-dif.d-mythic_keystone{--dc:#ffc533}
a.ab-chip,.ab-h a.ab-n{text-decoration:none;color:inherit}
.ab-h a.ab-n:hover b,a.ab-chip:hover{color:#fff}
a.ab-chip:hover{border-color:rgba(255,212,121,.45)}
.ig-loot a.lt{text-decoration:none;color:inherit}
.ig-loot a.lt:hover{border-color:rgba(255,201,77,.4)}
@media (max-width:640px){.ig-difs.en-jefes{gap:4px;padding:5px}.ig-dif{min-width:0;flex:1 1 0;padding:7px 4px;font-size:.8rem}.ig-dif .lg{display:none}}
.ig-mis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ig-mis-col{border-radius:10px;background:rgba(14,15,20,.6);border:1px solid rgba(255,255,255,.06);padding:14px 16px}
.ig-mis-col h3{margin:0 0 10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.ig-mis-col.ali h3{color:#6fa8ff}
.ig-mis-col.hor h3{color:#ff6b5a}
.ig-mis-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ig-mis-col li{display:flex;flex-direction:column;padding:8px 10px;border-radius:7px;background:rgba(0,0,0,.35);border-left:3px solid rgba(255,255,255,.12);line-height:1.35}
.ig-mis-col.ali li{border-left-color:rgba(80,140,255,.6)}
.ig-mis-col.hor li{border-left-color:rgba(230,80,70,.6)}
.ig-mis-col li a{color:#ffe7b0;font-weight:700;text-decoration:none}
.ig-mis-col li a:hover{text-decoration:underline}
.ig-mis-col li small{color:var(--muted);font-size:.82rem}
.ig-mis-col li .amb{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,212,121,.12);color:#ffd479;vertical-align:1px}
.ig-mis-col li .pt{color:#c9b58c;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.ig-mis-src{font-size:.8rem;color:var(--muted);margin-top:10px}
.ig-vecinas{margin-top:56px}
.ig-vecinas h2{font-family:var(--font-title,inherit);font-weight:800;font-size:1.6rem;color:#fff4dc;margin:0 0 16px}
.ig-vec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ig-vec{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:rgba(14,15,20,.65);border:1px solid rgba(255,255,255,.07);text-decoration:none;color:#eadcc0;transition:transform .15s,border-color .15s}
.ig-vec:hover{transform:translateY(-2px);border-color:rgba(255,201,77,.5)}
.ig-vec b{color:#fff4dc;font-size:.95rem;line-height:1.25}
.ig-vec small{color:var(--muted);font-size:.8rem}
.ig-vec.ant,.ig-vec.sig{border-color:rgba(255,201,77,.75);background:linear-gradient(180deg,rgba(255,179,15,.16),rgba(14,15,20,.75));box-shadow:0 0 0 1px rgba(255,201,77,.25),0 8px 22px rgba(0,0,0,.4)}
.ig-vec.act{opacity:.55;pointer-events:none}
.ig-vec-tag{align-self:flex-start;margin-bottom:4px;padding:1px 8px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#ffb30f;color:#1b1206}
.ig-vec.act .ig-vec-tag{background:rgba(255,255,255,.15);color:#fff}
.ig-mis.una{grid-template-columns:1fr}
.ig-mis-col[hidden]{display:none}
.ig-mis.una ul{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.ig-mis{grid-template-columns:1fr}.ig-mis.una ul{grid-template-columns:1fr}}