/* =============================================================
   GTA6 NEWS HUB — styles.css
   Archetype: Mouse-Reactive Gradient (dark neon gaming)
   v=20260625
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Brand palette — Rockstar GTA VI official (Vice City sunset) */
  --bg:          #000000;   /* pure black, like rockstargames.com/VI */
  --surface:     #0C0C10;
  --surface-2:   #161118;
  --border:      #241820;
  --neon-a:      #FF2E93;   /* flamingo pink — primary / editorial */
  --neon-b:      #FFC400;   /* gold/yellow — secondary / RSS */
  --neon-c:      #B14EFF;   /* sunset purple — accents */
  --neon-a-glow: rgba(255,46,147,.38);
  --neon-b-glow: rgba(255,196,0,.35);
  --text:        #F4ECF1;
  --text-soft:   #C9BBC6;
  --muted:       #8A7585;
  --gold:        #FFC400;
  --accent:      #FF2E93;

  /* Signature GTA VI sunset gradient — pink → orange → gold */
  --vi-grad:     linear-gradient(160deg, #FF2E93 0%, #FF5C5C 38%, #FF8A3D 66%, #FFC400 100%);
  --vi-grad-h:   linear-gradient(90deg, #FF2E93 0%, #FF6B3D 50%, #FFC400 100%);

  /* Gradients */
  --gradient-hero: radial-gradient(ellipse at 18% 22%,rgba(255,46,147,.20) 0%,transparent 58%),
                   radial-gradient(ellipse at 82% 30%,rgba(177,78,255,.16) 0%,transparent 55%),
                   radial-gradient(ellipse at 60% 88%,rgba(255,196,0,.12) 0%,transparent 55%),
                   var(--bg);

  /* Typography */
  --font-display: "Bebas Neue", "Barlow Condensed", "Impact", sans-serif;
  --font-sans:    "Inter", "DM Sans", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;

  /* Spacing */
  --gutter:    clamp(1rem, 4vw, 2rem);
  --max-w:     1360px;
  --nav-h:     72px;

  /* Easings */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);

  /* Mouse gradient vars — updated by JS */
  --mx: 50%;
  --my: 50%;
}

/* =============================================================
   2. Reset & Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; }
::selection { background: var(--neon-a); color: #000; }
:focus-visible { outline: 2px solid var(--neon-a); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--text); color: var(--bg);
  border-radius: 4px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); }

/* Defensive rule: split+reveal combos must not stay invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   4. Typography
   ============================================================= */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.kicker {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.btn-primary {
  background: var(--neon-a);
  color: #000;
  box-shadow: 0 0 20px rgba(255,46,147,.3);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(255,46,147,.5), 0 16px 40px rgba(0,0,0,.4);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--neon-a);
  color: var(--neon-a);
  transform: translateY(-2px);
}
.btn-slide {
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--neon-a);
  transform: translateX(-101%);
  transition: transform .5s var(--ease-soft);
}
.btn-slide:hover::before { transform: translateX(0); }
.btn-slide:hover { color: #000; border-color: var(--neon-a); }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 1px;
}
.badge-editorial { background: rgba(255,46,147,.12); color: var(--neon-a); border: 1px solid rgba(255,46,147,.25); }
.badge-rss       { background: rgba(255,196,0,.10); color: var(--neon-b); border: 1px solid rgba(255,196,0,.2); }
.badge-breaking {
  background: var(--neon-a); color: #000;
  animation: pulseBadge 1.8s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}
.badge-category {
  background: rgba(255,255,255,.06);
  color: var(--text-soft);
  border: 1px solid var(--border);
}

/* --- Cards --- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .35s;
  --card-neon: var(--neon-a-glow);
}
.card.is-rss { --card-neon: var(--neon-b-glow); }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--neon-a);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-soft);
  z-index: 2;
}
.card.is-rss::before { background: var(--neon-b); }
.card:hover::before { transform: scaleY(1); }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 40px var(--card-neon);
  border-color: rgba(255,46,147,.3);
}
.card.is-rss:hover { border-color: rgba(255,196,0,.3); }

.card-img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}
.card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-soft), filter .5s;
}
.card:hover .card-img-wrap img {
  transform: scale(1.08);
  filter: saturate(1.2) brightness(1.05);
}
.card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1; display: flex; flex-direction: column;
}
.card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .75rem;
}
.card-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: .6rem;
  flex: 1;
}
.card-title a { display: block; transition: color .3s; }
.card-title a:hover { color: var(--neon-a); }
.card.is-rss .card-title a:hover { color: var(--neon-b); }
.card-excerpt {
  font-size: .875rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.card-time {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
}
.card-read {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--neon-a);
  transition: color .3s;
}
.card.is-rss .card-read { color: var(--neon-b); }
.card-source {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =============================================================
   6. Navigation
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  transition: background-color .4s, backdrop-filter .4s, border-bottom-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,10,15,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}

/* Glitch effect on logo */
.logo-glitch {
  position: relative; display: inline-block;
}
.logo-glitch::before,
.logo-glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  font-family: inherit;
}
.logo-glitch::before { color: var(--neon-a); clip-path: inset(40% 0 30% 0); }
.logo-glitch::after  { color: var(--neon-b); clip-path: inset(20% 0 60% 0); }
.nav-logo:hover .logo-glitch::before { opacity: 1; animation: glitchA .4s steps(2) infinite; }
.nav-logo:hover .logo-glitch::after  { opacity: 1; animation: glitchB .4s steps(2) .1s infinite; }
@keyframes glitchA {
  0%   { transform: translate(-3px,  2px) skew(.3deg); }
  100% { transform: translate( 3px, -2px) skew(-.3deg); }
}
@keyframes glitchB {
  0%   { transform: translate( 3px, -2px) skew(-.3deg); }
  100% { transform: translate(-3px,  2px) skew(.3deg); }
}

.nav-links {
  display: flex; align-items: center; gap: 2rem;
  margin-inline: auto;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
  position: relative; padding: .25rem 0;
  transition: color .3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--neon-a);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-actions {
  display: flex; align-items: center; gap: 1rem;
  flex-shrink: 0;
}

/* Language toggle */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
}
.lang-btn {
  padding: .35rem .6rem;
  color: var(--muted);
  transition: background .3s, color .3s;
}
.lang-btn.active {
  background: var(--neon-a);
  color: #000;
}
.lang-btn:hover:not(.active) { color: var(--text); }

.nav-cta { font-size: .75rem; padding: .5rem 1rem; }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 24px; padding: 4px 0;
}
.nav-hamburger span {
  display: block; height: 1px;
  background: var(--text);
  transition: transform .3s, opacity .3s;
}

/* Mobile nav */
.nav-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.5rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
.nav-mobile .nav-link { font-size: 1rem; }
.nav-mobile .lang-toggle { margin-top: 1rem; }

/* =============================================================
   7. Breaking Bar
   ============================================================= */
.breaking-bar {
  position: fixed; top: var(--nav-h); inset-inline: 0; z-index: 99;
  height: 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  overflow: hidden;
}
.breaking-label {
  flex-shrink: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  background: var(--neon-a);
  color: #000;
  height: 100%;
}
.breaking-label::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #000;
  animation: pulseBadge 1.2s ease-in-out infinite;
}
.ticker-outer { flex: 1; overflow: hidden; mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: inline-flex; white-space: nowrap; gap: 4rem; will-change: transform; }
.ticker-item {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .3s;
}
.ticker-item:hover { color: var(--neon-a); }
.ticker-sep { color: var(--muted); user-select: none; }

/* =============================================================
   8. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 36px + 4rem);
  padding-bottom: 5rem;
  overflow: hidden;
}

/* Mouse-reactive gradient background */
.hero-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 700px at var(--mx) var(--my), rgba(255,46,147,.14) 0%, transparent 55%),
    radial-gradient(circle 900px at calc(var(--mx) + 12%) calc(var(--my) - 12%), rgba(255,196,0,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,46,147,.08) 0%, transparent 50%),
    var(--bg);
  transition: background .2s ease;
}

/* Grain overlay */
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Scanlines */
.hero-scanlines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .025;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,.6) 2px,
    rgba(255,255,255,.6) 4px
  );
}

.hero-inner {
  position: relative; z-index: 2;
  container-type: inline-size;
  max-width: 1100px;
  padding-inline: var(--gutter);
  width: 100%;
}

.hero-kicker {
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--neon-a);
  margin-bottom: 1rem;
  display: block;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 11.5rem);
  line-height: .88;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.hero-title em,
.hero-title span,
.logo-6,
.section-title,
.related-title,
.vi-gradient-text {
  font-style: normal;
  background: var(--vi-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-title em { display: block; }
/* "6" sits inline inside the glitch logo — keep it tight */
.logo-6 { -webkit-text-fill-color: transparent; }
.hero-sub {
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  color: var(--text-soft);
  max-width: 60ch;
  line-height: 1.65;
  margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hero-cta { font-size: 1rem; padding: .85rem 2rem; }

/* Countdown */
.hero-countdown {
  display: flex; flex-direction: column; gap: .5rem;
}
.countdown-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--muted);
}
.countdown-timer {
  display: flex; align-items: center; gap: .5rem;
}
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .4rem .75rem;
  min-width: 60px;
}
.countdown-unit span:first-child {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--neon-a);
}
.countdown-unit span:last-child {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .15em;
  color: var(--muted);
  margin-top: .2rem;
}
.countdown-sep {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--muted);
  margin-top: -.6rem;
}

.hero-scroll-hint {
  position: absolute; bottom: 2rem; left: var(--gutter);
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .3em; color: var(--muted);
  writing-mode: vertical-lr;
  display: flex; align-items: center; gap: .5rem;
  z-index: 2;
}
.hero-scroll-hint::after {
  content: ""; display: block;
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--muted), transparent);
}

/* =============================================================
   9. Featured Article
   ============================================================= */
.featured {
  padding-block: 5rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.featured-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.featured-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
}
.featured-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s linear;
}
.featured:hover .featured-img-wrap img { transform: scale(1.06); }
.featured-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,15,.85) 0%,
    rgba(10,10,15,.3) 60%,
    transparent 100%
  );
}
.featured-label {
  position: absolute; top: 1rem; left: 1rem;
  z-index: 2;
}
.featured-content {
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.featured-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
}
.featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.05;
}
.featured-title a { transition: color .3s; }
.featured-title a:hover { color: var(--neon-a); }
.featured-excerpt {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 65ch;
}
.featured-footer {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.featured-time {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
}

/* =============================================================
   10. News Grid
   ============================================================= */
.news-section { padding-block: 5rem; }

.section-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.filter-tabs {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.filter-tab {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: 1px;
  color: var(--muted);
  transition: all .3s;
}
.filter-tab:hover { color: var(--text); border-color: var(--text-soft); }
.filter-tab.active {
  background: var(--neon-a);
  color: #000;
  border-color: var(--neon-a);
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.load-more-wrap {
  display: flex; justify-content: center;
  margin-top: 3rem;
}

/* =============================================================
   11. RSS Sources
   ============================================================= */
.sources { padding-block: 4rem; background: var(--surface); border-top: 1px solid var(--border); }
.sources-header { text-align: center; margin-bottom: 2.5rem; }
.sources-header .section-title { margin-bottom: .5rem; }
.sources-sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.sources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.source-card {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color .3s, transform .4s var(--ease-soft);
}
.source-card:hover { border-color: var(--neon-b); transform: translateY(-2px); }
.source-abbr {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .06em;
}
.source-name {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =============================================================
   12. Support / Donation CTA
   ============================================================= */
.support {
  padding-block: 6rem;
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
}
.support-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,46,147,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(255,196,0,.07) 0%, transparent 60%);
}
.support-inner {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 680px; margin-inline: auto;
}
.support-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: 1.25rem;
}
.support-sub {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 2.5rem;
}
.support-actions {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.btn-kofi {
  background: #29abe0;
  color: #fff;
  box-shadow: 0 0 20px rgba(41,171,224,.3);
}
.btn-kofi:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(41,171,224,.5), 0 16px 40px rgba(0,0,0,.4);
}
.btn-patreon {
  background: #ff424d;
  color: #fff;
  box-shadow: 0 0 20px rgba(255,66,77,.3);
}
.btn-patreon:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(255,66,77,.5), 0 16px 40px rgba(0,0,0,.4);
}

/* =============================================================
   13. Floating Donation Button
   ============================================================= */
.donation-float {
  position: fixed; bottom: 2rem; right: 1.5rem; z-index: 90;
  opacity: 0; pointer-events: none;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft);
}
.donation-float.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.donation-float-btn {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon-a);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.donation-float-btn:hover {
  transform: translateY(-2px);
  border-color: var(--neon-a);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 20px var(--neon-a-glow);
}
.donation-float-close {
  position: absolute; top: -.5rem; right: -.5rem;
  width: 20px; height: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.donation-float-close:hover { color: var(--text); border-color: var(--text-soft); }

/* =============================================================
   14. Footer
   ============================================================= */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: 3rem 2rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.footer-brand .nav-logo { font-size: 1.4rem; margin-bottom: .75rem; }
.footer-tagline {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-nav-col h4 {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer-nav-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-nav-col li a {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-soft);
  transition: color .3s;
}
.footer-nav-col li a:hover { color: var(--neon-a); }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted);
}
.footer-credits-link {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}
.footer-credits-link:hover { color: var(--neon-b); }

/* =============================================================
   15. Article Page
   ============================================================= */
.article-page { padding-top: var(--nav-h); }
.article-hero {
  position: relative;
  height: 55vh; min-height: 350px;
  overflow: hidden;
}
.article-hero-img { width: 100%; height: 100%; object-fit: cover; }
.article-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,1) 0%, rgba(10,10,15,.5) 40%, transparent 70%);
}
.article-header {
  position: relative; z-index: 2;
  max-width: 860px; margin-inline: auto;
  padding: 3rem var(--gutter) 0;
}
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.article-byline {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 2.5rem;
}
.article-body {
  max-width: 760px; margin-inline: auto;
  padding: 3rem var(--gutter) 5rem;
}
.article-body p {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 2.5rem 0 1rem;
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neon-a);
  margin: 2rem 0 .75rem;
}
.article-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border-left: 3px solid var(--neon-a);
  border-radius: 0 2px 2px 0;
}
.article-body blockquote p { color: var(--text); margin-bottom: 0; font-size: 1.05rem; }
.article-share { display: flex; align-items: center; gap: .75rem; margin: 3rem 0; flex-wrap: wrap; }
.share-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: all .3s;
}
.share-btn:hover { border-color: var(--neon-a); color: var(--neon-a); }
.share-btn.twitter:hover { border-color: #1d9bf0; color: #1d9bf0; }
.share-btn.reddit:hover  { border-color: #ff4500; color: #ff4500; }
.share-btn.whatsapp:hover { border-color: #25d366; color: #25d366; }

/* AdSense placeholder */
.ad-unit {
  width: 100%; min-height: 90px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  margin-block: 2rem;
}
.ad-unit-label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Article pre-order CTA */
.article-preorder {
  margin: 2.5rem 0;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,46,147,.06) 0%, rgba(255,196,0,.06) 100%);
  text-align: center;
}
.article-preorder-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .08em;
  background: var(--vi-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}
.article-preorder-sub {
  color: var(--text-soft);
  font-size: .85rem;
  margin-bottom: 1.2rem;
}
.article-preorder-btns {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.article-preorder-btns .preorder-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.6rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: #fff;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.article-preorder-btns .preorder-btn:hover {
  transform: translateY(-2px);
}
.article-preorder-btns .preorder-ps5 {
  background: linear-gradient(135deg, #0072CE, #00439C);
  box-shadow: 0 4px 20px rgba(0,114,206,.3);
}
.article-preorder-btns .preorder-ps5:hover {
  box-shadow: 0 8px 30px rgba(0,114,206,.5);
}
.article-preorder-btns .preorder-xbox {
  background: linear-gradient(135deg, #107C10, #0E6A0E);
  box-shadow: 0 4px 20px rgba(16,124,16,.3);
}
.article-preorder-btns .preorder-xbox:hover {
  box-shadow: 0 8px 30px rgba(16,124,16,.5);
}

/* Related articles */
.related { padding-block: 4rem; border-top: 1px solid var(--border); }
.related-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* =============================================================
   16. Reveal animations
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }
[data-reveal-delay="5"] { transition-delay: .5s; }

/* =============================================================
   17. Custom cursor
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 10001;
  display: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; will-change: transform;
}
.cursor-dot {
  width: 5px; height: 5px; margin: -2.5px;
  background: var(--neon-a); border-radius: 50%;
}
.cursor-ring {
  width: 28px; height: 28px; margin: -14px;
  border: 1px solid rgba(255,46,147,.6);
  border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), border-color .3s;
}
.cursor.is-interactive .cursor-ring { width: 44px; height: 44px; margin: -22px; border-color: var(--neon-a); }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* =============================================================
   18. Effects — noise/scanlines page-level
   ============================================================= */
.page-grain {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: .025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* =============================================================
   19. Responsive
   ============================================================= */

/* --- Mobile first: max 479px (phones portrait) --- */
@media (max-width: 479px) {
  /* Nav: ocultar CTA "Apoyar" en pantallas muy pequeñas, mostrar solo en hamburger */
  .nav-cta { display: none; }
  /* Hero: reducir padding superior para que la pantalla no se vea vacía */
  .hero { padding-top: calc(var(--nav-h) + 36px + 2rem); padding-bottom: 3rem; }
  /* Hero title aún más compacto */
  .hero-title { font-size: clamp(3.2rem, 20vw, 5.5rem); margin-bottom: 1rem; }
  .hero-sub { font-size: .9rem; margin-bottom: 1.5rem; }
  .hero-actions { gap: .75rem; }
  .hero-cta { font-size: .85rem; padding: .75rem 1.5rem; }
  /* Countdown: reducir tamaño */
  .countdown-unit { padding: .35rem .55rem; min-width: 48px; }
  .countdown-unit span:first-child { font-size: 1.3rem; }
  /* Preorder banner: stack todo */
  .preorder-inner { flex-direction: column; text-align: center; }
  .preorder-actions { justify-content: center; width: 100%; }
  .preorder-btn { flex: 1; min-width: 130px; align-items: center; }
  /* Article preorder CTA */
  .article-preorder { padding: 1.25rem 1rem; }
  .article-preorder-btns { flex-direction: column; align-items: stretch; }
  .article-preorder-btns .preorder-btn { justify-content: center; }
  /* Affiliate: stack featured cards */
  .affiliate-cover { height: 120px; }
  /* Donation float: mantener fuera del banner */
  .donation-float { bottom: 5.5rem; right: 1rem; }
  /* Ticker: ocultar "BREAKING" label en móvil muy pequeño, más espacio */
  .breaking-label { padding: 0 .6rem; font-size: .55rem; }
  /* Cards */
  .card-body { padding: 1rem; }
}

/* --- Teléfonos: 480-639px --- */
@media (min-width: 480px) and (max-width: 639px) {
  .hero { padding-top: calc(var(--nav-h) + 36px + 2.5rem); }
  .preorder-inner { flex-direction: column; text-align: center; }
  .preorder-actions { justify-content: center; width: 100%; }
  .preorder-btn { flex: 1; align-items: center; }
  .donation-float { bottom: 5.5rem; }
}

/* --- 540px: 2 columnas noticias --- */
@media (min-width: 540px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .sources-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Tablets: 640px --- */
@media (min-width: 640px) {
  .affiliate-grid { grid-template-columns: repeat(2, 1fr); }
  .article-preorder-btns { flex-direction: row; }
}

/* --- 720px: featured 2 cols, related 2 cols, footer 2 cols --- */
@media (min-width: 720px) {
  .featured-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

/* --- 960px: desktop completo --- */
@media (min-width: 960px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .sources-grid { grid-template-columns: repeat(4, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .nav-links { display: flex; }
  .nav-hamburger { display: none; }
  .nav-cta { display: inline-flex; }
}

@media (max-width: 959px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* --- 1024px: affiliate 4 columnas --- */
@media (min-width: 1024px) {
  .affiliate-grid { grid-template-columns: repeat(4, 1fr); }
  .affiliate-featured { grid-column: span 2; }
}

/* --- Large desktop --- */
@media (min-width: 1280px) {
  .featured-inner { gap: 4rem; }
}

/* --- Responsive: nav actions en tablet --- */
@media (max-width: 639px) {
  .nav-actions { gap: .5rem; }
  .lang-toggle { font-size: .6rem; }
  .lang-btn { padding: .3rem .5rem; }
}

/* --- Section padding reducido en móvil --- */
@media (max-width: 639px) {
  .news-section { padding-block: 3rem; }
  .featured { padding-block: 3rem; }
  .sources  { padding-block: 2.5rem; }
  .support  { padding-block: 4rem; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; flex-wrap: nowrap; }
  .article-body { padding: 2rem var(--gutter) 3rem; }
  .article-header { padding-top: 1.5rem; }
  .article-hero { height: 40vh; min-height: 220px; }
  /* Share buttons: wrap y más pequeños */
  .article-share { gap: .5rem; }
  .share-btn { font-size: .58rem; padding: .4rem .75rem; }
  /* Related section */
  .related { padding-block: 2.5rem; }
}

/* =============================================================
   20. Reduced motion (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-scanlines { display: none; }
  .breaking-label::before { animation: none; }
  .badge-breaking { animation: none; }
}

/* =============================================================
   21. Cookie Consent Banner
   ============================================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(10, 10, 15, 0.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
.cookie-banner-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 220px;
  font-size: .82rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.cookie-banner-text strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .3rem;
}
.cookie-banner-text a {
  color: var(--neon-b);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-btn-accept {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem 1.25rem;
  background: var(--neon-a);
  color: #000;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  font-weight: 600;
  transition: opacity .2s;
}
.cookie-btn-accept:hover { opacity: .85; }
.cookie-btn-reject {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem 1.25rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 1px;
  transition: color .2s, border-color .2s;
}
.cookie-btn-reject:hover {
  color: var(--text);
  border-color: var(--text-soft);
}
@media (max-width: 540px) {
  .cookie-banner-actions { width: 100%; }
  .cookie-btn-accept, .cookie-btn-reject { flex: 1; text-align: center; }
}

/* =============================================================
   22. Affiliate (Amazon) section
   ============================================================= */
.affiliate { padding-block: 4rem; }
.affiliate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.affiliate-card {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--neon-a);
  border-radius: 2px;
  padding: 1.25rem 1.4rem;
  transition: transform .3s var(--ease-soft), border-color .3s;
}
.affiliate-card:hover { transform: translateY(-3px); border-left-color: var(--neon-b); }
.affiliate-kicker { font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.affiliate-name { font-size: 1.05rem; color: var(--text); }
.affiliate-desc { font-size: .85rem; color: var(--text-soft); line-height: 1.5; flex: 1; }
.affiliate-go { font-size: .65rem; letter-spacing: .1em; color: var(--neon-a); margin-top: .35rem; }
.affiliate-card:hover .affiliate-go { color: var(--neon-b); }
.affiliate-disclosure { font-size: .62rem; color: var(--muted); margin-top: 1.25rem; line-height: 1.6; max-width: 72ch; }
.affiliate-featured {
  border: 1px solid rgba(255,46,147,.4);
  border-left: 4px solid var(--neon-a);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,46,147,.12) 0%, transparent 60%),
    var(--surface);
}
.affiliate-featured .affiliate-kicker { color: var(--neon-a); }
.affiliate-featured .affiliate-name { font-size: 1.25rem; }

/* Visual cover for featured pre-order cards */
.affiliate-cover {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 16 / 7;
  border-radius: 2px;
  margin-bottom: .9rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 125%, rgba(255,46,147,.28) 0%, transparent 60%), #08080c;
  border: 1px solid var(--border);
}
.cover-vi {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: 1; letter-spacing: .06em;
  background: var(--vi-grad-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cover-plat {
  margin-top: .35rem; font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-soft); border: 1px solid var(--border); padding: .15rem .55rem; border-radius: 99px;
}
.affiliate-cover-ps5  { box-shadow: inset 0 -3px 0 #2aa0ff; }
.affiliate-cover-xbox { box-shadow: inset 0 -3px 0 #10b981; }

@media (min-width: 640px) { .affiliate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .affiliate-grid { grid-template-columns: repeat(4, 1fr); }
  .affiliate-featured { grid-column: span 2; }
}

/* =============================================================
   23. Pre-order banner (afiliado, alta visibilidad)
   ============================================================= */
.preorder {
  padding-block: 2.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 12% 50%, rgba(255,46,147,.16) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 50%, rgba(255,196,0,.10) 0%, transparent 55%),
    var(--surface);
}
.preorder-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.preorder-copy { flex: 1; min-width: 240px; }
.preorder-kicker { color: var(--neon-a); font-size: .62rem; letter-spacing: .2em; }
.preorder-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: .02em; line-height: 1; margin: .4rem 0 .3rem; }
.preorder-title em {
  font-style: normal;
  background: var(--vi-grad-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.preorder-sub { color: var(--text-soft); font-size: .9rem; }
.preorder-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.preorder-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: .85rem 1.5rem; border-radius: 3px; min-width: 175px;
  border: 1px solid var(--border); background: var(--bg);
  transition: transform .3s var(--ease-soft), border-color .3s, box-shadow .3s;
}
.preorder-btn:hover { transform: translateY(-3px); }
.preorder-ps5 { border-color: rgba(42,160,255,.5); }
.preorder-ps5:hover { box-shadow: 0 10px 30px rgba(42,160,255,.25); border-color: #2aa0ff; }
.preorder-xbox { border-color: rgba(16,185,129,.5); }
.preorder-xbox:hover { box-shadow: 0 10px 30px rgba(16,185,129,.25); border-color: #10b981; }
.preorder-plat { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.preorder-go { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; color: var(--text); }
.preorder-note { width: 100%; font-size: .58rem; color: var(--muted); margin-top: .25rem; }
@media (max-width: 720px) {
  .preorder-actions { width: 100%; }
  .preorder-btn { flex: 1; }
}

/* =============================================================
   24. VI ULTRA — Vice City sunset visual upgrade  (v20260708)
   ============================================================= */

/* ---- Hero: sunset sky ---- */
.hero-gradient {
  background:
    radial-gradient(circle 700px at var(--mx) var(--my), rgba(255,46,147,.10) 0%, transparent 55%),
    radial-gradient(ellipse 130% 64% at 50% 108%, rgba(255,107,61,.32) 0%, rgba(255,46,147,.18) 40%, rgba(177,78,255,.12) 64%, transparent 80%),
    linear-gradient(180deg, #050208 0%, #10051a 42%, #260a22 72%, #38102a 100%);
}

/* ---- Hero: retro sun with synthwave stripes ---- */
.hero-sun {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(44vw, 540px); aspect-ratio: 1;
  right: -4%; top: 14%;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFC400 0%, #FF8A3D 38%, #FF2E93 76%, #B14EFF 100%);
  opacity: .34;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0 52%, transparent 52% 100%),
    repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px);
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(to bottom, #000 0 52%, transparent 52% 100%),
    repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px);
  mask-composite: add;
  filter: drop-shadow(0 0 90px rgba(255,107,61,.45));
  animation: sunPulse 7s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { opacity: .34; }
  50%      { opacity: .46; }
}

/* ---- Hero: palm silhouettes ---- */
.hero-palms {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 320'><g fill='%23060309'><path d='M108 320 C104 240 112 170 104 112 L116 110 C124 176 120 244 124 320 Z'/><path d='M110 112 C70 92 30 96 6 116 C36 84 84 78 110 100 Z'/><path d='M110 112 C74 66 40 54 8 60 C46 34 96 60 112 96 Z'/><path d='M110 110 C96 62 100 24 120 2 C104 40 116 78 122 102 Z'/><path d='M112 112 C146 64 184 52 214 60 C176 36 128 58 108 96 Z'/><path d='M112 112 C152 92 192 96 216 116 C186 84 138 78 112 100 Z'/><path d='M110 114 C82 108 48 122 34 148 C56 116 92 108 112 122 Z'/><path d='M112 114 C140 108 174 122 188 148 C166 116 130 108 110 122 Z'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 320'><g fill='%23060309'><path d='M108 320 C104 240 112 170 104 112 L116 110 C124 176 120 244 124 320 Z'/><path d='M110 112 C70 92 30 96 6 116 C36 84 84 78 110 100 Z'/><path d='M110 112 C74 66 40 54 8 60 C46 34 96 60 112 96 Z'/><path d='M110 110 C96 62 100 24 120 2 C104 40 116 78 122 102 Z'/><path d='M112 112 C146 64 184 52 214 60 C176 36 128 58 108 96 Z'/><path d='M112 112 C152 92 192 96 216 116 C186 84 138 78 112 100 Z'/><path d='M110 114 C82 108 48 122 34 148 C56 116 92 108 112 122 Z'/><path d='M112 114 C140 108 174 122 188 148 C166 116 130 108 110 122 Z'/></g></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: right -48px bottom -24px, left -60px bottom -60px;
  background-size: 300px auto, 380px auto;
  opacity: .92;
}

/* ---- Hero: neon horizon line ---- */
.hero-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,196,0,.85) 30%, rgba(255,46,147,.95) 60%, transparent 100%);
  box-shadow: 0 0 24px rgba(255,107,61,.8), 0 0 60px rgba(255,46,147,.4);
  opacity: .75;
}

/* ---- Hero: title neon glow ---- */
.hero-title { filter: drop-shadow(0 6px 28px rgba(255,46,147,.30)); }
.hero-kicker {
  text-shadow: 0 0 12px rgba(255,46,147,.8);
}

/* ---- Countdown: gradient digits + glass frame ---- */
.countdown-unit {
  min-width: 72px;
  padding: .55rem .9rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(rgba(10,8,12,.88), rgba(16,10,16,.88)) padding-box,
    linear-gradient(135deg, rgba(255,46,147,.65), rgba(255,138,61,.5), rgba(255,196,0,.65)) border-box;
  box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 0 18px rgba(255,46,147,.12);
  backdrop-filter: blur(4px);
}
.countdown-unit span:first-child {
  font-size: 2.1rem;
  background: var(--vi-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,107,61,.45));
}
.countdown-sep {
  background: var(--vi-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Buttons: sunset gradient primary ---- */
.btn-primary {
  background: var(--vi-grad-h);
  color: #0A0208;
  font-weight: 500;
  box-shadow: 0 0 24px rgba(255,46,147,.35), 0 0 60px rgba(255,138,61,.15);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 44px rgba(255,46,147,.55), 0 0 90px rgba(255,138,61,.3), 0 16px 40px rgba(0,0,0,.4);
}
.filter-tab.active {
  background: var(--vi-grad-h);
  border-color: transparent;
  color: #0A0208;
  box-shadow: 0 0 16px rgba(255,107,61,.35);
}

/* ---- Section titles: gradient underline bar ---- */
.section-title {
  position: relative;
  padding-bottom: .45rem;
}
.section-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 72px; height: 3px;
  background: var(--vi-grad-h);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255,107,61,.6);
}
.sources-header .section-title::after,
.support .section-title::after {
  left: 50%; transform: translateX(-50%);
}

/* ---- Cards: gradient frame on hover + cinematic image ---- */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: 2px; padding: 1px;
  background: var(--vi-grad-h);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease-soft);
  pointer-events: none;
}
.card:hover::after { opacity: .85; }
.card-img-wrap { position: relative; }
.card-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,46,147,.06) 0%, transparent 40%, rgba(5,2,8,.35) 100%);
}

/* ---- Featured: gradient frame ---- */
.featured-img-wrap {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--vi-grad-h) border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(255,46,147,.10);
}

/* ---- Breaking bar: gradient label ---- */
.breaking-label {
  background: var(--vi-grad-h) !important;
  color: #0A0208 !important;
  box-shadow: 0 0 18px rgba(255,46,147,.4);
}
.breaking-bar { border-bottom: 1px solid rgba(255,46,147,.18); }

/* ---- Preorder: sunset band ---- */
.preorder {
  position: relative;
  background:
    radial-gradient(ellipse 100% 130% at 50% 130%, rgba(255,107,61,.16) 0%, rgba(255,46,147,.08) 45%, transparent 75%),
    var(--surface);
  overflow: hidden;
}
.preorder::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,46,147,.6), rgba(255,196,0,.6), transparent);
}

/* ---- Support: sunset glow ---- */
.support {
  position: relative;
  background:
    radial-gradient(ellipse 90% 110% at 50% 120%, rgba(255,46,147,.14) 0%, rgba(177,78,255,.08) 50%, transparent 78%),
    var(--bg);
}

/* ---- Footer: gradient top border ---- */
.footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(255,46,147,.5), rgba(255,196,0,.5), transparent) 1;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; background: #0A070C; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF2E93, #FF8A3D, #FFC400);
  border-radius: 6px;
  border: 2px solid #0A070C;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FF5CAB, #FFA35C, #FFD84D); }

/* ---- Article page: sunset accents ---- */
.article-body h2 {
  background: var(--vi-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,46,147,.18));
}
.article-body h3 { color: var(--neon-b); }
.article-body a { color: var(--neon-a); border-bottom: 1px solid rgba(255,46,147,.4); }
.article-body blockquote {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #FF2E93, #FFC400) 1;
}

/* ---- Nav: glass + glow logo ---- */
.nav { backdrop-filter: blur(14px) saturate(1.3); }
.logo-6 { filter: drop-shadow(0 0 10px rgba(255,107,61,.65)); }

/* ---- Mobile adjustments ---- */
@media (max-width: 639px) {
  .hero-sun {
    width: 78vw; right: -24%; top: 10%; opacity: .26;
  }
  .hero-palms {
    background-size: 190px auto, 240px auto;
    background-position: right -40px bottom -18px, left -70px bottom -48px;
  }
  .countdown-unit span:first-child { font-size: 1.7rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-sun { animation: none; }
}

/* ---- Guides list (static crawlable links) ---- */
.guides-list a { color: var(--text-soft); transition: color .25s; border-bottom: 1px solid transparent; }
.guides-list a:hover { color: var(--neon-a); border-bottom-color: rgba(255,46,147,.4); }
.guides-list li { break-inside: avoid; margin-bottom: .35rem; }
@media (max-width: 719px) { .guides-list { columns: 1 !important; } }

/* =============================================================
   25. Componentes editoriales ricos  (v20260828)
   Vídeo incrustado, tablas, destacados, figuras y cronologías.
   ============================================================= */

/* ---- Tarjeta de vídeo (miniatura oficial -> YouTube) ----
   Los tráilers de GTA VI tienen restricción de edad y no permiten iframe.
   Esta tarjeta muestra la miniatura y abre el vídeo en YouTube. ---- */
.video-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2rem 0 .75rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--vi-grad-h) border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,46,147,.12);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.video-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-soft), filter .5s;
}
.video-card:hover { transform: translateY(-3px); box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 60px rgba(255,46,147,.25); }
.video-card:hover img { transform: scale(1.04); filter: saturate(1.15); }
.video-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,2,8,.15) 0%, rgba(5,2,8,.35) 55%, rgba(5,2,8,.92) 100%);
}
.video-card-play {
  position: absolute; top: 50%; left: 50%;
  width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: var(--vi-grad-h);
  box-shadow: 0 0 40px rgba(255,46,147,.55);
  transition: transform .4s var(--ease-soft);
}
.video-card-play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #0A0208;
}
.video-card:hover .video-card-play { transform: scale(1.09); }
.video-card-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.video-card-src {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--neon-b);
}
.video-card-title {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.1;
}
.video-card-dur {
  font-family: var(--font-mono); font-size: .62rem;
  color: var(--text-soft); letter-spacing: .08em;
}
.video-caption {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.75;
}

/* ---- Tablas de datos ---- */
.table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 480px;
}
.data-table thead th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neon-b);
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  line-height: 1.6;
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: rgba(255,46,147,.04); }
.data-table td:first-child { color: var(--text); font-weight: 500; }
.data-table .num {
  font-family: var(--font-mono);
  color: var(--neon-a);
  white-space: nowrap;
}

/* ---- Etiquetas de estado (confirmado / filtrado / rumor) ---- */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 2px;
  white-space: nowrap;
}
.tag-ok    { background: rgba(16,185,129,.14);  color: #34D399; border: 1px solid rgba(16,185,129,.3); }
.tag-leak  { background: rgba(255,196,0,.12);   color: var(--neon-b); border: 1px solid rgba(255,196,0,.28); }
.tag-rumor { background: rgba(139,139,160,.12); color: #A1A1B5; border: 1px solid rgba(139,139,160,.28); }

/* ---- Destacados / avisos ---- */
.callout {
  margin: 2rem 0;
  padding: 1.15rem 1.35rem;
  border-radius: 4px;
  border-left: 3px solid var(--neon-a);
  background: rgba(255,46,147,.07);
  line-height: 1.75;
}
.callout-ok   { border-left-color: #10B981; background: rgba(16,185,129,.08); }
.callout-warn { border-left-color: var(--neon-b); background: rgba(255,196,0,.07); }
.callout-title {
  display: block;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon-a);
  margin-bottom: .5rem;
}
.callout-ok   .callout-title { color: #34D399; }
.callout-warn .callout-title { color: var(--neon-b); }

/* ---- Figuras con pie ---- */
.figure { margin: 2rem 0; }
.figure img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.figure figcaption {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--muted);
  margin-top: .6rem;
  line-height: 1.7;
}

/* ---- Rejilla de cifras destacadas ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.stat-card {
  padding: 1.15rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(12,10,14,.9), rgba(18,12,18,.9)) padding-box,
    linear-gradient(135deg, rgba(255,46,147,.5), rgba(255,196,0,.5)) border-box;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  background: var(--vi-grad-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .45rem;
  line-height: 1.5;
}

/* ---- Cronología minuto a minuto ---- */
.tl { list-style: none; padding: 0; margin: 2rem 0; }
.tl-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.tl-item:first-child { border-top: 1px solid var(--border); }
.tl-time {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--neon-a);
  padding-top: .15rem;
  white-space: nowrap;
}
.tl-body h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .35rem;
  color: var(--text);
}
.tl-body p { color: var(--text-soft); font-size: .92rem; line-height: 1.7; margin: 0; }

@media (max-width: 559px) {
  .tl-item { grid-template-columns: 1fr; gap: .35rem; }
  .stat-num { font-size: 1.75rem; }
  .video-card { margin: 1.5rem 0 .6rem; }
  .video-card-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .video-card-play::after { border-width: 10px 0 10px 17px; }
  .video-card-meta { padding: 1rem; }
}

/* =============================================================
   26. Titulares en directo en portada  (v20260829)
   Solo titular + enlace a la fuente. Se refresca cada minuto.
   ============================================================= */
.livewire {
  padding-block: 2.5rem;
  background: linear-gradient(180deg, rgba(255,46,147,.05), transparent);
  border-top: 1px solid rgba(255,46,147,.16);
  border-bottom: 1px solid rgba(255,46,147,.16);
}
.lw-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.lw-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--neon-a);
  box-shadow: 0 0 12px var(--neon-a); animation: lwPulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes lwPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.lw-title {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--neon-a); margin: 0;
}
.lw-stamp { font-size: .6rem; color: var(--muted); margin-left: auto; letter-spacing: .08em; }

.lw-list { list-style: none; padding: 0; margin: 0; }
.lw-item {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.lw-item:last-child { border-bottom: 0; }
.lw-src {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neon-b); flex-shrink: 0; min-width: 84px;
}
.lw-link {
  flex: 1; min-width: 14rem; font-size: .95rem; line-height: 1.5;
  color: var(--text-soft); transition: color .25s; border-bottom: 1px solid transparent;
}
.lw-link:hover { color: var(--neon-a); border-bottom-color: rgba(255,46,147,.4); }
.lw-ago { font-family: var(--font-mono); font-size: .56rem; color: var(--muted); flex-shrink: 0; }
.lw-empty { font-size: .72rem; color: var(--muted); padding: .8rem 0; }
.lw-foot {
  font-size: .58rem; color: var(--muted); margin-top: 1rem;
  line-height: 1.8; padding-top: .8rem; border-top: 1px solid var(--border);
}
.lw-foot a { color: var(--neon-b); }

@media (max-width: 639px) {
  .lw-src { min-width: 0; }
  .lw-link { min-width: 100%; order: 3; font-size: .9rem; }
  .lw-stamp { margin-left: 0; width: 100%; }
}

/* ============================================================
   27 · CUENTA ATRÁS  (cuanto-falta-gta-6.html)
   La cifra es el contenido: todo lo demás la acompaña.
   ============================================================ */
.cd-page { padding-top: 0; }

.cd-hero {
  position: relative;
  padding: clamp(4rem, 12vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.cd-hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--vi-grad-h);
}

.cd-kicker {
  font-size: .68rem; letter-spacing: .16em;
  color: var(--muted);
}

.cd-h1 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  line-height: .95; letter-spacing: .01em;
  margin: .5rem 0 0;
  color: var(--text);
}
.cd-h1 em {
  font-style: normal;
  background: var(--vi-grad-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* El número grande. clamp() muy amplio: en móvil sigue siendo lo primero
   que se ve, que es el motivo de existir de la página. */
.cd-big {
  margin: clamp(1.5rem, 5vw, 2.5rem) 0 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.cd-num {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(6rem, 26vw, 15rem);
  line-height: .82;
  background: var(--vi-grad-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 70px var(--neon-a-glow);
  font-variant-numeric: tabular-nums;
}
.cd-num-label {
  font-size: clamp(.8rem, 2.5vw, 1.1rem);
  letter-spacing: .5em; text-indent: .5em;
  color: var(--text-soft);
}

.cd-lead {
  max-width: 46ch; margin: 0 auto;
  color: var(--text-soft); font-size: 1.02rem; line-height: 1.65;
}
.cd-lead strong { color: var(--text); }

.cd-live {
  margin: clamp(1.8rem, 5vw, 2.6rem) auto 0;
  display: inline-flex; flex-direction: column; gap: .7rem;
  padding: 1.1rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(12,12,16,.6);
  backdrop-filter: blur(6px);
}
.cd-live-label { font-size: .6rem; letter-spacing: .28em; color: var(--muted); }
.cd-live-units { display: flex; gap: clamp(.8rem, 4vw, 1.8rem); }
.cd-u { display: flex; flex-direction: column; gap: .15rem; min-width: 3.2rem; }
.cd-u span:first-child {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cd-u span:last-child { font-size: .58rem; letter-spacing: .18em; color: var(--muted); }

.cd-sec { padding: clamp(2.5rem, 7vw, 4rem) 0; border-bottom: 1px solid var(--border); }
.cd-sec > .container { max-width: 800px; }
.cd-sec h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: .02em; margin: 0 0 1.2rem; color: var(--text);
}
.cd-sec .data-table th { text-align: left; color: var(--text-soft); font-weight: 500; width: 42%; }
.cd-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.cd-note a { color: var(--neon-a); }

/* Hitos ya cumplidos: se apagan en lugar de desaparecer, porque la
   secuencia completa es parte de la respuesta. */
.cd-tl .tl-item.is-past { opacity: .55; }
.cd-tl .tl-item.is-past .tl-time { color: var(--muted); }

.cd-news { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.cd-new a {
  display: flex; gap: .9rem; align-items: center;
  padding: .55rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.cd-new a:hover { border-color: rgba(255,46,147,.4); background: var(--surface-2); }
.cd-new img { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; flex: none; }
.cd-new div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cd-new-date { font-size: .6rem; letter-spacing: .12em; color: var(--neon-b); text-transform: uppercase; }
.cd-new-title { color: var(--text); font-size: .93rem; line-height: 1.35; }

.cd-faq {
  border: 1px solid var(--border); border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: .55rem; background: var(--surface);
}
.cd-faq summary { cursor: pointer; color: var(--text); font-weight: 500; list-style: none; }
.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary::after { content: " +"; color: var(--neon-a); font-family: "JetBrains Mono", monospace; }
.cd-faq[open] summary::after { content: " −"; }
.cd-faq p { margin: .7rem 0 0; color: var(--text-soft); font-size: .93rem; line-height: 1.6; }

@media (max-width: 520px) {
  .cd-new img { width: 84px; height: 48px; }
  .cd-new-title { font-size: .85rem; }
  .cd-live { width: 100%; }
  .cd-live-units { justify-content: space-between; }
}

/* Enlace bajo la cuenta atrás de la portada hacia la hora de lanzamiento */
.hero-countdown-link {
  margin: .9rem 0 0;
  text-align: center;
}
.hero-countdown-link a {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--neon-b);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.hero-countdown-link a:hover {
  color: var(--neon-a);
  border-bottom-color: currentColor;
}

/* ============================================================
   28 · TABLAS QUE NO SE CORTAN EN MÓVIL
   Una .data-table de tres columnas mide ~480px. En una pantalla de
   375 se salía del viewport y la última columna quedaba cortada y
   sin forma de llegar a ella: el documento no desbordaba, así que
   tampoco había scroll horizontal que la rescatara.
   El envoltorio lo genera el build, así que vale igual para las
   tablas de los artículos y para las de las páginas generadas.
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
  /* Pista visual de que hay más a la derecha, sin ocupar sitio. */
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 24px 100% no-repeat;
  background-attachment: local, local;
}
.table-scroll .data-table { margin: 0; min-width: 460px; }

@media (max-width: 560px) {
  .table-scroll .data-table { font-size: .86rem; }
  .table-scroll .data-table th,
  .table-scroll .data-table td { padding: .55rem .6rem; }
}

/* ============================================================
   29 · REJILLA DE ARTISTAS
   Retratos con licencia libre (Wikimedia Commons). El crédito va
   pegado a cada foto porque las licencias CC BY y CC BY-SA exigen
   atribución visible junto a la obra, no solo en una página aparte.
   ============================================================ */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.artist-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.artist-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.artist-card figcaption { padding: .6rem .7rem .75rem; }
.artist-name { display: block; font-weight: 500; color: var(--text); font-size: .92rem; line-height: 1.3; }
.artist-post { display: block; color: var(--text-soft); font-size: .78rem; line-height: 1.45; margin-top: .3rem; }
.artist-credit {
  display: block; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .55rem; line-height: 1.5; color: var(--muted);
}
.artist-credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* Retrato suelto dentro de un artículo: sin esto ocuparía todo el ancho. */
.figure.figure-portrait { max-width: 320px; }
.figure.figure-portrait img { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 420px) {
  .artist-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}


/* ============================================================
   30. Leer mejor: índice, progreso, tablas y listas
   Un artículo largo tiene que poder ojearse. Esto añade índice
   arriba, barra de avance, y hace las tablas y listas legibles
   de un vistazo.
   ============================================================ */
.read-progress {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: 3px; z-index: 60; pointer-events: none; background: transparent;
}
.read-progress span {
  display: block; height: 100%; width: 0;
  background: var(--vi-grad-h);
}

.toc {
  margin: 0 0 2.5rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--border); border-left: 3px solid var(--neon-a);
  border-radius: 0 6px 6px 0; background: var(--surface);
}
.toc-title {
  font-size: .62rem; letter-spacing: .22em; color: var(--neon-a);
  margin: 0 0 .75rem;
}
.toc-list { margin: 0; padding-left: 1.1rem; counter-reset: toc; }
.toc-list li { margin: .35rem 0; color: var(--muted); font-size: .95rem; }
.toc-list a {
  color: var(--text-soft); border-bottom: 1px solid transparent; transition: all .2s;
}
.toc-list a:hover { color: var(--text); border-bottom-color: var(--neon-a); }

.article-body h2, .article-body h3 { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

.article-body h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
}

/* Listas: viñeta de color y aire, que se lean como puntos sueltos */
.article-body ul, .article-body ol {
  margin: 0 0 1.5rem; padding-left: 1.4rem;
  color: var(--text-soft); line-height: 1.8;
}
.article-body ul { list-style: none; padding-left: 1.6rem; }
.article-body ul li { position: relative; margin-bottom: .7rem; }
.article-body ul li::before {
  content: ""; position: absolute; left: -1.1rem; top: .75em;
  width: .5rem; height: 2px; background: var(--neon-a);
}
.article-body ol li { margin-bottom: .7rem; padding-left: .2rem; }

/* Tablas: cabecera fija al desplazar, filas alternas y primera columna marcada */
.article-body .data-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev, #140b13);
  backdrop-filter: blur(4px);
}
.article-body .data-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }
.article-body .data-table tbody tr:hover { background: rgba(255,46,147,.06); }
.article-body .data-table td:first-child { color: var(--text); }

/* Callouts: título más visible y un poco más de aire */
.callout { border-radius: 0 6px 6px 0; }
.callout-title { letter-spacing: .14em; }

/* Pies de foto */
.article-body figure { margin: 2rem 0; }
.article-body figure img { border-radius: 6px; }
.article-body figcaption {
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
  margin-top: .6rem; line-height: 1.6;
}

/* Cifra destacada dentro del texto */
.dato-clave {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0;
}
.dato-clave > div {
  flex: 1 1 160px; padding: 1rem 1.2rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.dato-clave .dc-num {
  display: block; font-family: var(--font-display); font-size: 1.9rem;
  color: var(--neon-a); line-height: 1;
}
.dato-clave .dc-txt {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .4rem;
}

@media (max-width: 560px) {
  .toc { padding: 1rem 1.1rem; }
  .dato-clave > div { flex: 1 1 130px; padding: .8rem .9rem; }
  .dato-clave .dc-num { font-size: 1.5rem; }
}


/* ============================================================
   31. Tarjeta de Spotify
   Se ve siempre (portada + temas + botón). El reproductor real
   se carga solo si el visitante aceptó cookies; si no, al pulsar.
   ============================================================ */
.sp-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 1.4rem;
  align-items: start; margin: 2.5rem 0; padding: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(135deg, rgba(30,215,96,.07), var(--surface) 60%);
}
.sp-card.is-loaded { display: block; padding: 0; border: 0; background: none; }
.sp-cover { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1/1; }
.sp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1ED760; color: #07120A; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: transform .2s;
}
.sp-play:hover { transform: scale(1.08); }
.sp-kicker { font-size: .6rem; letter-spacing: .2em; color: #1ED760; margin: 0 0 .4rem; }
.sp-name {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  text-transform: uppercase; letter-spacing: .03em; color: var(--text); margin: 0 0 .25rem;
}
.sp-sub { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); margin: 0 0 .9rem; }
.sp-tracks { margin: 0 0 1rem; padding-left: 1.2rem; }
.sp-tracks li { margin: .3rem 0; color: var(--text-soft); font-size: .9rem; line-height: 1.5; }
.sp-tracks .sp-t { color: var(--text); }
.sp-tracks .sp-a { color: var(--muted); font-size: .8rem; display: block; }
.sp-open {
  display: inline-block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: #0A0208; background: #1ED760;
  padding: .6rem 1.1rem; border-radius: 40px; border-bottom: 0 !important;
}
.sp-open:hover { filter: brightness(1.08); }
.sp-foot { font-size: .62rem; color: var(--muted); margin: .6rem 0 0; text-align: right; }

@media (max-width: 620px) {
  .sp-card { grid-template-columns: 1fr; gap: 1rem; }
  .sp-cover { max-width: 240px; margin-inline: auto; }
}


/* ============================================================
   32. Anterior / siguiente al pie del artículo
   ============================================================ */
.article-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-width: 760px; margin: 0 auto 3rem; padding-inline: var(--gutter);
}
.pager-link {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.2rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  transition: border-color .2s;
}
.pager-link:hover { border-color: var(--neon-a); }
.pager-next { text-align: right; }
.pager-dir { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--neon-a); }
.pager-title { color: var(--text); font-size: .9rem; line-height: 1.4; }
@media (max-width: 560px) { .article-pager { grid-template-columns: 1fr; } .pager-next { text-align: left; } }


/* ============================================================
   33. Vídeos y publicaciones incrustados (YouTube, X)
   Las fotos de hechos reales se incrustan desde el original, con
   su autor; no se copian. Tarjeta visible siempre; la plataforma
   solo carga con consentimiento o al pulsar.
   ============================================================ */
.embed-figure { margin: 2rem 0; }
.embed-figure figcaption {
  font-family: var(--font-mono); font-size: .66rem; color: var(--muted);
  line-height: 1.6; margin-top: .55rem;
}
.embed-yt { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; overflow: hidden; background: #000; }
.embed-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.embed-yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.embed-yt-play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px;
  background: #FF0033; color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.embed-yt-facade:hover .embed-yt-play { transform: scale(1.06); }
.embed-yt > .embed-note { position: absolute; left: .7rem; bottom: .5rem; margin: 0; color: #ddd; text-shadow: 0 1px 3px #000; }
.embed-x {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 1rem 1.2rem; max-width: 560px;
}
.embed-x.is-loaded { border: 0; background: none; padding: 0; }
.embed-x-head { margin: 0 0 .4rem !important; font-size: .92rem !important; color: var(--text) !important; }
.embed-x-head span { font-size: .66rem; color: var(--muted); margin-left: .3rem; }
.embed-x-text { margin: 0 0 .9rem !important; color: var(--text-soft) !important; font-size: .95rem !important; line-height: 1.55 !important; }
.embed-x-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.embed-x-load {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 40px; border: 0; cursor: pointer; background: var(--text); color: #0A0208;
}
.embed-x-open { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); border-bottom: 0 !important; }
.embed-note { font-size: .6rem !important; color: var(--muted) !important; margin: .6rem 0 0 !important; }

.embed-ig { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 1rem 1.2rem; max-width: 540px; }
.embed-ig.is-loaded { border: 0; background: none; padding: 0; }
.embed-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; align-items: start; }
.embed-galeria .embed-figure { margin: 0; }


/* ============================================================
   34. Fichas de producto (ediciones, merchandising)
   ============================================================ */
.producto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.producto-card { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.producto-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 0 !important; }
.producto-card figcaption { padding: .75rem .9rem .95rem; display: flex; flex-direction: column; gap: .35rem; }
.producto-card strong { color: var(--text); font-size: .92rem; line-height: 1.3; }
.producto-card span { color: var(--text-soft); font-size: .82rem; line-height: 1.5; font-family: var(--font-body, inherit); }
.producto-caja { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0 1.5rem; }
.producto-caja figure { margin: 0; }
.producto-caja img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 560px) { .producto-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .producto-caja { grid-template-columns: 1fr; } }

/* ============================================================
   35. Fuentes del artículo
   Lista de lo que cita cada noticia. Va al final, discreta, pero
   con los enlaces a la vista: es lo que da confianza al lector y
   lo que miran los buscadores de IA para decidir si nos citan.
   ============================================================ */
.article-fuentes {
  margin: 3rem 0 2rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--border); border-left: 3px solid var(--neon-a);
  border-radius: 0 6px 6px 0; background: var(--surface);
}
.article-body .article-fuentes .fuentes-title {
  font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--neon-a); margin: 0 0 .4rem; line-height: 1.4;
}
.article-body .article-fuentes .fuentes-nota { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; }
.fuentes-lista { margin: 0; padding-left: 1.2rem; }
.fuentes-lista li { margin: .45rem 0; font-size: .88rem; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; }
.fuente-medio {
  font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .06em;
  color: var(--text); margin-right: .35rem;
}
.fuentes-lista a { color: var(--text-soft); border-bottom: 1px solid var(--border); text-decoration: none; }
.fuentes-lista a:hover { color: var(--text); border-bottom-color: var(--neon-a); }
.fuente-fecha { color: var(--muted); font-size: .78rem; }