/* 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: none;
  color-scheme: dark;
}
/* cuero oscuro con textura de piedra */
.bg-leather { background-color: #2c3a52; 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%);
}
/* Página principal de guías: fondo en azul oscuro (se tiñe el cuero, la piedra y la ilustración) */
html { background: #050b17; }
.bg::after { content: ""; position: absolute; inset: 0; background: #1f3256; mix-blend-mode: color; }
.bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(4, 10, 24, .38); }
.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; }
/* ===== Carrusel de guías populares (mismo componente que el de noticias): entra una por la izquierda cada 4 s y empuja al resto a la derecha ===== */
.ncar { --gap: 28px; --per: 3; position: relative; }
.ncar-vp { overflow: hidden; margin: -6px -16px -14px; padding: 6px 16px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); touch-action: pan-y; }
.ncar-track { display: flex; gap: var(--gap); will-change: transform; transition: transform .85s cubic-bezier(.65, 0, .2, 1); }
.ncar-card { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); }
.ncar .vthumb { position: relative; }
.ncar .vthumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 196, 80, .38) 48%, rgba(255, 240, 200, .5) 50%, rgba(255, 196, 80, .38) 52%, transparent 70%); transform: translateX(-110%); }
.ncar-card.enter { animation: ncarIn .9s cubic-bezier(.2, .7, .2, 1) both; }
.ncar-card.enter .vthumb { animation: ncarGlow 1.6s ease-out both; }
.ncar-card.enter .vthumb::after { animation: ncarShine 1.1s .35s ease-out both; }
.ncar-card.enter .kick { animation: ncarKick .7s .25s ease-out both; }
@keyframes ncarIn { from { opacity: 0; filter: blur(8px) brightness(1.8) sepia(.6); } to { opacity: 1; filter: none; } }
@keyframes ncarGlow { 0%, 30% { box-shadow: 0 0 0 1px var(--gold) inset, 0 0 34px rgba(255, 179, 15, .45); } 100% { box-shadow: 0 0 0 1px rgba(255, 215, 150, .12) inset, 0 8px 22px rgba(0,0,0,.4); } }
@keyframes ncarShine { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } }
@keyframes ncarKick { from { letter-spacing: .5em; opacity: 0; } to { letter-spacing: .14em; opacity: 1; } }
.ncar { container-type: inline-size; padding-inline: 58px; }
.ncar-btn { position: absolute; z-index: 3; top: calc((100cqw - var(--gap) * (var(--per) - 1)) / var(--per) * 9 / 32); translate: 0 -50%;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--gold-soft); background: rgba(14, 12, 11, .82); color: var(--gold); cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 6px 18px rgba(0,0,0,.55); transition: background .15s, color .15s, scale .15s; }
.ncar-btn:hover { background: var(--gold); color: #1d1107; scale: 1.08; }
.ncar-btn svg { width: 18px; height: 18px; }
.ncar-prev { left: 0; }
.ncar-next { right: 0; }
/* con sitio a los lados: tarjetas a todo el ancho y flechas fuera de los márgenes */
@media (min-width: 1240px) { .ncar { padding-inline: 0; } .ncar-prev { left: -60px; } .ncar-next { right: -60px; } }
@media (max-width: 900px) { .ncar { --per: 2; --gap: 22px; } }
@media (max-width: 560px) { .ncar { --per: 1; padding-inline: 46px; } .ncar-btn { width: 36px; height: 36px; } .ncar-btn svg { width: 15px; height: 15px; }  }
@media (prefers-reduced-motion: reduce) { .ncar-track { transition: none; } .ncar-card.enter, .ncar-card.enter .vthumb, .ncar-card.enter .vthumb::after, .ncar-card.enter .kick { animation: none; } }
.ncar-rank { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px 4px 9px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: #1d1107;
  background: var(--gold); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pbody .gh-pop { margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(230,162,29,.28); }
.pbody .gh-last { margin-top: 72px; }
/* ===== Portales de cada versión: ilustración de su portada, logo grande y su color ===== */
.gportals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.gportal { --k: #d9a441; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 200px; padding: 14px 14px 16px; border-radius: 12px; text-decoration: none; color: #fff4dc; text-align: center;
  border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); background: #0a0d14;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5); transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, border-color .3s; }
.gportal::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 3; background: linear-gradient(90deg, transparent, var(--k), transparent); opacity: .85; }
.gportal::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 12, .15) 0%, rgba(5, 7, 12, .35) 45%, rgba(5, 7, 12, .92) 100%),
              radial-gradient(ellipse 80% 55% at 50% 100%, color-mix(in srgb, var(--k) 35%, transparent), transparent 70%); transition: opacity .3s; }
.gp-art { position: absolute; inset: 0; z-index: 0; background: var(--art) var(--pos, left center) / auto 300% no-repeat; filter: saturate(.85) brightness(.7) blur(1.5px); transform: scale(1.06);
  transition: transform .6s cubic-bezier(.2, .8, .3, 1), filter .4s; }
.gp-logo { position: absolute; z-index: 2; left: 50%; top: 42%; width: 74%; max-height: 92px; object-fit: contain; translate: -50% -50%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), filter .35s; }
.gp-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.gp-txt b { font-family: var(--font-title); font-weight: 800; font-size: 18px; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.gp-txt span { font-size: 12.5px; color: rgba(255, 240, 215, .72); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.gp-go { position: absolute; z-index: 3; right: 12px; bottom: 14px; width: 16px; height: 16px; color: var(--k); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s; }
.gportal:hover, .gportal:focus-visible { transform: translateY(-4px); border-color: var(--k);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 0 1px var(--k), 0 0 28px color-mix(in srgb, var(--k) 45%, transparent); outline: none; }
.gportal:hover .gp-art, .gportal:focus-visible .gp-art { transform: scale(1.16); filter: saturate(1.1) brightness(.85) blur(0); }
.gportal:hover .gp-logo, .gportal:focus-visible .gp-logo { transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .85)) drop-shadow(0 0 14px color-mix(in srgb, var(--k) 55%, transparent)); }
.gportal:hover .gp-go, .gportal:focus-visible .gp-go { opacity: 1; transform: none; }
@media (max-width: 860px) { .gportals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .gportals { gap: 10px; } .gportal { min-height: 176px; } .gp-logo { top: 36%; max-height: 62px; } .gp-txt b { font-size: 16px; } .gp-txt span { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .gportal, .gp-art, .gp-logo { transition: none; } }
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))}}