/* 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: 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; }
.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; }