/* 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: #58c4ff;
  --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: luminosity; }
/* 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%);
}
.bg-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 22%, rgba(0, 0, 0, .12) 78%, rgba(0, 0, 0, .55)), linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)); }
.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; }
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))}}
.fwrap{margin-top:8px}
.fbar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;align-items:flex-end;padding:0 0 14px}
.fgrp{display:flex;flex-direction:column;align-items:center;gap:6px}
.fgrp>label,.fgrp>span.fl{font-weight:700;font-size:14px;color:#f4e9d4;text-shadow:0 1px 4px #000}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:10px;min-width:130px;height:44px;padding:0 10px;background:rgba(10,8,6,.88);border:1px solid rgba(230,162,29,.45);border-radius:6px;color:#f4e9d4;font:700 15px var(--font-body);cursor:pointer;text-align:left}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--gold)}
.dd-btn .ic{width:24px;height:24px;object-fit:contain;flex:none}
.dd-btn .dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 12px var(--font-body);color:#14100a;background:var(--c,#e6a21d)}
.dd-btn .lb{flex:1;white-space:nowrap;color:var(--c,#f4e9d4)}
.dd-btn .ch{width:12px;height:12px;flex:none;transition:transform .2s}
.dd.open .ch{transform:rotate(180deg)}
.dd.plain .dd-btn .lb{color:#f4e9d4}
.dd-menu{position:absolute;z-index:40;left:0;top:calc(100% + 6px);min-width:100%;max-height:340px;overflow:auto;margin:0;padding:6px;list-style:none;background:rgba(10,8,6,.97);border:1px solid var(--gold);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.dd-menu[hidden]{display:none}
.dd-menu li button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;background:none;border:0;border-radius:4px;color:#f4e9d4;font:600 15px var(--font-body);cursor:pointer;text-align:left;white-space:nowrap}
.dd-menu li button:hover,.dd-menu li button[aria-selected="true"]{background:rgba(255,179,15,.14)}
.dd-menu .ic{width:22px;height:22px;object-fit:contain}
.dd-menu .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--font-body);color:#14100a;background:var(--c,#e6a21d);flex:none}
.seg{display:flex;height:44px;border:1px solid rgba(230,162,29,.45);border-radius:6px;overflow:hidden;background:rgba(10,8,6,.88)}
.seg button{padding:0 14px;border:0;background:none;color:var(--muted);font:700 16px var(--font-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1d1107}
.ftabs{display:flex;flex-wrap:wrap;justify-content:center;background:rgba(10,8,6,.9);border:1px solid rgba(230,162,29,.35);border-radius:4px 4px 0 0;overflow:hidden}
.ftabs button{display:flex;align-items:center;gap:7px;padding:13px 13px;border:0;background:none;color:#f4e9d4;font:700 14.5px var(--font-body);cursor:pointer}
.ftabs button svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ftabs button:hover{background:rgba(255,179,15,.1)}
.ftabs button[aria-selected="true"]{background:var(--gold);color:#1d1107}
.ftabs button[aria-selected="true"] svg{stroke:#1d1107}
.fjump{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:10px;background:rgba(10,8,6,.9);border:1px solid rgba(230,162,29,.35);border-top:0;border-radius:0 0 4px 4px}
.fjump b{font-size:14px;color:#f4e9d4}
.fjump a{padding:6px 14px;background:rgba(255,255,255,.07);border-radius:3px;color:#f4e9d4;text-decoration:none;font-weight:600;font-size:14px}
.fjump a:hover{background:var(--gold);color:#1d1107}
.fh1{margin:34px 0 12px;font-family:var(--font-title);font-weight:900;font-size:clamp(1.7rem,3.6vw,2.4rem);color:#fff4dc;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.fh1 .cc{color:var(--c)}
.fh2{margin:46px 0 12px;font-family:var(--font-title);font-weight:900;font-size:clamp(1.4rem,2.8vw,1.9rem);color:#fff4dc}
.fh2 .cc{color:var(--c)}
.fp{margin:0 0 14px;line-height:1.7;color:#eadcc0;text-align:justify}
.fp .cc{color:var(--c)}
.fmeta{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 6px;font-size:14px;color:var(--muted)}
.fmeta b{color:#f4e9d4}
.stats{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:14px 10px;margin:34px 0 10px}
.stat{text-align:center;min-width:130px;flex:1 1 130px;max-width:210px}
.stat .bx{display:grid;place-items:center;height:64px;border:1px solid rgba(0,0,0,.6);font:900 26px var(--font-body);letter-spacing:.02em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.stat .vl{display:inline-block;margin-top:-10px;padding:3px 18px;background:#14110f;border:1px solid #4b4540;border-radius:8px;font-weight:700;color:#f4e9d4;position:relative}
.gt{align-self:center;font:900 44px var(--font-body);color:#cfc8bf;padding:0 2px;margin-bottom:18px}
.cards{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.card2{flex:1 1 170px;padding:14px 18px;text-align:center;background:rgba(10,8,6,.85);border:1px solid rgba(230,162,29,.3);border-radius:4px}
.card2 span{display:block;font-weight:700;color:#f4e9d4}
.card2 b{display:block;margin-top:2px;font:900 34px var(--font-body);color:#ff8a00}
.card2.btn2{background:linear-gradient(135deg,#7a1fb5,#5a1590);border-color:#a050e0}
.card2.btn2 b{font-size:20px;color:#fff}
.tal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tal>div{min-height:200px;padding:16px;background:linear-gradient(180deg,rgba(60,10,16,.7),rgba(10,8,6,.9));border:1px solid rgba(230,162,29,.3);border-radius:4px}
.tal h3{margin:0 0 4px;font:900 22px var(--font-body);letter-spacing:.08em;color:var(--c)}
.tal p{margin:0;color:var(--muted);font-size:14px}
@media (max-width:700px){.tal{grid-template-columns:1fr}.dd-btn{min-width:150px}}
.fpanel[hidden]{display:none}
.fph{margin-top:40px;padding:60px 20px;text-align:center;background:rgba(10,8,6,.75);border:1px dashed rgba(230,162,29,.45);border-radius:4px;color:var(--muted)}
.fph b{display:block;margin-bottom:6px;font-size:20px;color:#f4e9d4}