/* 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: 0 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 14px; 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; }
.nf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.nf-tag { display: inline-block; padding: 5px 12px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.nf-tag-top { background: var(--gold); color: #1d1107; }
.nf-tag-cat { background: rgba(255, 179, 15, .14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 179, 15, .55); }
/* ===== Carrusel 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; } }
.vthumb:has(.ncar-rank) { position: relative; }
.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); }
.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; } }