/* ═══════════════════════════════════════════════════════════════════════
   Temas por release — cada página de release se viste con la estética de
   su disco. Se carga DESPUÉS de styles.css y todo va dentro de
   body[data-release="…"], así que ninguna regla se escapa a otra página.

   La estructura (portada / meta / título / links) no cambia: sólo la piel.
   El linktree se sigue usando igual en los cuatro.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "SKID";
  src: url("/assets/fonts/SKID.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Welcome To Texas";
  src: url("/assets/fonts/WelcomeToTexas.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nintendo DS BIOS";
  src: url("/assets/fonts/NintendoDSBIOS.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* capa de efectos común a los temas (fija, nunca intercepta clics) */
.rt-fx { position: fixed; inset: 0; z-index: 151; pointer-events: none; }
.rt-layer { position: absolute; inset: 0; }

/* la portada y los links son lo importante: nunca se degradan */
[data-release] .release-hero-cover { position: relative; }
[data-release] .platform-link { text-decoration: none; }


/* ══════════════════════════════════════════════════════════════════════
   SVVTCHBLD — cine de terror ochentero, gritty, rojo sangre
   ══════════════════════════════════════════════════════════════════════ */
body[data-release="svvtchbld"] {
  --h-bg:        #070405;
  --h-bone:      #ece5da;
  --h-bone-mute: rgba(236,229,218,0.72);
  --h-blood:     #a50e16;
  --h-blood-hot: #ff2b38;
  background-color: var(--h-bg);
}
body[data-release="svvtchbld"] .tex-crt { opacity: 0.1; }
body[data-release="svvtchbld"] .tex-dust { opacity: 0.5; }
body[data-release="svvtchbld"] .crt-vignette {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(40,0,3,0.55) 88%, rgba(0,0,0,0.9) 100%);
}
body[data-release="svvtchbld"] .crt-vignette::before { display: none; }

/* barra y pie en hueso, sin el verde fósforo */
body[data-release="svvtchbld"] .topbar {
  background: linear-gradient(180deg, rgba(9,5,6,0.97), rgba(9,5,6,0.6) 70%, transparent);
  border-bottom-color: rgba(165,14,22,0.35);
}
body[data-release="svvtchbld"] .topnav a,
body[data-release="svvtchbld"] .foot-line { color: var(--h-bone-mute); text-shadow: none; }
body[data-release="svvtchbld"] .topnav a:hover { color: var(--h-blood-hot); text-shadow: 0 0 10px rgba(255,43,56,0.6); }
body[data-release="svvtchbld"] .foot { border-top-color: rgba(165,14,22,0.3); }

/* portada: duotono contrastado, marco rojo, arañazo de película */
body[data-release="svvtchbld"] .release-hero-cover {
  border: 1px solid rgba(165,14,22,0.7);
  box-shadow:
    0 0 0 5px rgba(7,4,5,0.9),
    0 0 0 6px rgba(165,14,22,0.25),
    0 26px 70px rgba(0,0,0,0.85),
    0 0 60px rgba(165,14,22,0.18);
}
body[data-release="svvtchbld"] .release-hero-cover img {
  filter: grayscale(1) contrast(1.5) brightness(0.82) sepia(0.25) hue-rotate(-25deg) saturate(1.6);
}
body[data-release="svvtchbld"] .release-hero-cover::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: 22%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity: 0.45; animation: svScratch 6.5s steps(1) infinite;
}
@keyframes svScratch {
  0%, 78%, 100% { opacity: 0; }
  80% { opacity: 0.5; transform: translateX(0); }
  84% { opacity: 0.2; transform: translateX(60px); }
  88% { opacity: 0.45; transform: translateX(-40px); }
  92% { opacity: 0; }
}

/* título: SKID, hueso, con separación cromática roja y parpadeo */
body[data-release="svvtchbld"] .release-hero-title {
  font-family: "SKID", "Impact", var(--t-display);
  font-size: clamp(46px, 15cqi, 132px);
  line-height: 0.9; letter-spacing: 0.02em;
  color: var(--h-bone);
  text-transform: uppercase;
  text-shadow:
    2px 0 0 rgba(165,14,22,0.85),
   -2px 0 0 rgba(60,0,4,0.6),
    0 0 18px rgba(255,43,56,0.35),
    0 0 60px rgba(165,14,22,0.28);
  animation: svFlicker 5.5s steps(1) infinite;
}
@keyframes svFlicker {
  0%, 88%, 100% { opacity: 1; }
  89% { opacity: 0.45; }
  90% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
}
body[data-release="svvtchbld"] .release-hero-meta,
body[data-release="svvtchbld"] .page-tag {
  font-family: var(--t-mono);
  color: var(--h-bone-mute);
  letter-spacing: 0.34em; font-size: 11px;
  text-shadow: none;
}
body[data-release="svvtchbld"] .release-hero-meta .sep { color: var(--h-blood); }
body[data-release="svvtchbld"] .release-platforms-head {
  font-family: var(--t-mono); font-size: 10px; letter-spacing: 0.4em;
  color: var(--h-blood-hot); text-shadow: 0 0 12px rgba(255,43,56,0.5);
}

/* links: relleno rojo que sube desde abajo */
body[data-release="svvtchbld"] .platform-link {
  font-family: var(--t-mono); font-weight: 700;
  font-size: clamp(15px, 2vw, 19px); letter-spacing: 0.22em;
  color: var(--h-bone);
  background: rgba(12,6,7,0.8);
  border: 1px solid rgba(236,229,218,0.32);
  border-radius: 0;
  text-shadow: none;
}
body[data-release="svvtchbld"] .platform-link::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--h-blood) 0%, #6d0009 100%);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
body[data-release="svvtchbld"] .platform-link:hover,
body[data-release="svvtchbld"] .platform-link:focus-visible {
  border-color: var(--h-blood-hot);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 26px rgba(165,14,22,0.45);
}
body[data-release="svvtchbld"] .platform-link:hover::after,
body[data-release="svvtchbld"] .platform-link:focus-visible::after { transform: scaleY(1); }
body[data-release="svvtchbld"] .platform-link:hover > *,
body[data-release="svvtchbld"] .platform-link:focus-visible > * { color: var(--h-bone); }

/* pulso rojo de fondo, muy lento */
body[data-release="svvtchbld"] .rt-pulse {
  background: radial-gradient(ellipse at 50% 42%, rgba(165,14,22,0.14), transparent 60%);
  animation: svPulse 7s ease-in-out infinite;
}
@keyframes svPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }


/* ══════════════════════════════════════════════════════════════════════
   NOVENTADIECIOCHO — 1998, The Source, GeoCities, fotocopia, monocromo
   ══════════════════════════════════════════════════════════════════════ */
body[data-release="noventadieciocho"] {
  --n-bg:     #000;
  --n-ink:    #f2f0ea;
  --n-mid:    #9a9a9a;
  --n-chrome: #c0c0c0;
  --n-panel:  #101010;
  background-color: var(--n-bg);
  color: var(--n-ink);
}
/* la portada es 57% negro puro: la página la sigue */
body[data-release="noventadieciocho"] .tex-vhs { opacity: 0.16; }
body[data-release="noventadieciocho"] .tex-crt { opacity: 0.1; }
body[data-release="noventadieciocho"] .crt-vignette::before { display: none; }

/* trama de semitono, como impresión barata. Suave a propósito: por
   encima va el cromo plateado y de más se enturbia */
body[data-release="noventadieciocho"] .rt-halftone {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1px, transparent 1.6px);
  background-size: 4px 4px;
  opacity: 0.3;
}

body[data-release="noventadieciocho"] .topbar {
  background: #000;
  border-bottom: 2px solid var(--n-chrome);
}
body[data-release="noventadieciocho"] .topnav a {
  color: var(--n-ink); text-shadow: none; font-weight: 700;
  font-family: var(--t-mono); font-size: 10px;
}
body[data-release="noventadieciocho"] .topnav a:hover { color: #000; background: var(--n-chrome); text-shadow: none; }

/* ── el "sitio" enmarcado, como los oficiales del 98 ──────────────── */
.nv-frame {
  width: 100%; max-width: 760px;
  margin: 0 auto clamp(30px, 5vh, 56px);
  padding: 0 var(--pad-x);
}
.nv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--n-chrome); color: #000;
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em;
  padding: 5px 10px;
  border: 1px solid #fff;
  box-shadow: inset -1px -1px 0 #7a7a7a, inset 1px 1px 0 #fff;
}
.nv-bar span:last-child { font-weight: 400; letter-spacing: 0.16em; color: #333; }
.nv-panel {
  border: 1px solid var(--n-chrome); border-top: 0;
  background: var(--n-panel);
  padding: 14px 16px;
}
.nv-table { width: 100%; border-collapse: collapse; }
.nv-table th, .nv-table td {
  font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.1em;
  text-align: left; padding: 6px 8px;
  border-bottom: 1px dotted rgba(242,240,234,0.25);
}
.nv-table th { color: var(--n-mid); font-weight: 700; width: 38%; }
.nv-table td { color: var(--n-ink); }
.nv-table tr:last-child th, .nv-table tr:last-child td { border-bottom: 0; }

/* caja de lista de correo, como las de entonces */
.nv-signup {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--n-mid);
}
.nv-signup a {
  display: inline-block; padding: 6px 14px;
  background: var(--n-chrome); color: #000;
  font-weight: 700; letter-spacing: 0.16em;
  border: 1px solid #fff;
  box-shadow: inset -1px -1px 0 #7a7a7a, inset 1px 1px 0 #fff;
}
.nv-signup a:hover { background: #fff; }
.nv-signup a:active { box-shadow: inset 1px 1px 0 #7a7a7a; }

/* fila de enlaces separados por barras, al estilo de la época */
.nv-links {
  margin-top: 16px; text-align: center;
  font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--n-mid);
}
.nv-links a { color: #9fd0ff; text-decoration: underline; text-underline-offset: 2px; }
.nv-links a:visited { color: #c9a0ff; }
.nv-links a:hover { color: #fff; }

/* código de barras del casete, dibujado con gradientes */
.nv-barcode {
  height: 34px; width: 150px;
  background-image: repeating-linear-gradient(90deg,
    #f2f0ea 0 2px, #000 2px 4px, #f2f0ea 4px 5px, #000 5px 9px,
    #f2f0ea 9px 12px, #000 12px 13px, #f2f0ea 13px 15px, #000 15px 18px);
  border: 3px solid #f2f0ea;
}

body[data-release="noventadieciocho"] .release-hero-cover {
  border: 2px solid var(--n-chrome);
  border-radius: 0;
  box-shadow: 8px 8px 0 rgba(242,240,234,0.18);
}
body[data-release="noventadieciocho"] .release-hero-cover img {
  filter: grayscale(1) contrast(1.35) brightness(1.02);
}

body[data-release="noventadieciocho"] .release-hero-title {
  font-family: "Welcome To Texas", "Impact", var(--t-display);
  font-size: clamp(40px, 13.5cqi, 118px);
  line-height: 0.98; letter-spacing: 0.005em;
  color: var(--n-ink);
  text-transform: lowercase;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.9), 0 0 28px rgba(242,240,234,0.22);
}
/* Welcome To Texas sólo trae letras: todo lo que lleve cifras usa mono */
body[data-release="noventadieciocho"] .release-hero-meta,
body[data-release="noventadieciocho"] .page-tag {
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--n-ink); text-shadow: none;
}
body[data-release="noventadieciocho"] .release-hero-meta .sep { color: var(--n-mid); }

/* el encabezado de plataformas se convierte en barra de sección */
body[data-release="noventadieciocho"] .release-platforms { max-width: 760px; }
body[data-release="noventadieciocho"] .release-platforms-head {
  background: var(--n-chrome); color: #000;
  font-family: var(--t-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em;
  text-align: left; padding: 5px 10px; margin-bottom: 0;
  border: 1px solid #fff;
  box-shadow: inset -1px -1px 0 #7a7a7a, inset 1px 1px 0 #fff;
  text-shadow: none;
}
body[data-release="noventadieciocho"] .platform-link {
  font-family: var(--t-mono); font-weight: 700;
  font-size: clamp(14px, 1.9vw, 18px); letter-spacing: 0.16em;
  color: var(--n-ink);
  background: var(--n-panel);
  border: 1px solid var(--n-chrome);
  border-top: 0;
  border-radius: 0;
  text-shadow: none;
}
body[data-release="noventadieciocho"] .platform-link::before { opacity: 0.14; }
body[data-release="noventadieciocho"] .platform-link:hover,
body[data-release="noventadieciocho"] .platform-link:focus-visible {
  background: var(--n-chrome); color: #000;
  transform: none;
  box-shadow: none;
}
body[data-release="noventadieciocho"] .platform-link:hover > *,
body[data-release="noventadieciocho"] .platform-link:focus-visible > * { color: #000; }

/* cintillo que se desplaza */
.rt-marquee { width: 100%; max-width: 760px; margin: 22px auto 0; padding: 0 var(--pad-x); }
.rt-marquee-inner {
  border: 1px solid var(--n-chrome); background: var(--n-panel);
  overflow: hidden; white-space: nowrap;
  font-family: var(--t-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.24em;
  color: var(--n-ink);
  padding: 7px 0;
}
.rt-marquee-track { display: inline-block; padding-left: 100%; animation: nvMarquee 22s linear infinite; }
@keyframes nvMarquee { to { transform: translateX(-100%); } }

/* placa tipo contador de visitas, decorativa */
.rt-counter { display: inline-flex; gap: 3px; align-items: center; border: 2px solid var(--n-chrome); background: #000; padding: 5px 7px; }
.rt-counter b {
  font-family: var(--t-mono); font-weight: 700; font-size: 15px;
  color: #f2f0ea; background: #1e1e1e;
  padding: 2px 5px; border: 1px solid #555;
}
.rt-strip {
  width: 100%; max-width: 760px; margin: 22px auto 0; padding: 0 var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;
  font-family: var(--t-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--n-mid);
}
body[data-release="noventadieciocho"] .foot { border-top: 2px solid var(--n-chrome); }
body[data-release="noventadieciocho"] .foot-line { color: var(--n-mid); text-shadow: none; font-weight: 700; }
body[data-release="noventadieciocho"] .foot-line a { color: #9fd0ff; }


/* ══════════════════════════════════════════════════════════════════════
   WHEREUBEEN? — disociación digital, etéreo, viaje a Japón
   ══════════════════════════════════════════════════════════════════════ */
/* paleta muestreada de la propia portada: el verde jade dominante
   (#3fc694), sus luces (#a1e7c7) y el negro que ocupa 37% de la imagen */
body[data-release="whereubeen"] {
  --w-deep:  #020c08;
  --w-green: #3fc694;
  --w-glow:  #78d8a8;
  --w-cyan:  #a1e7c7;
  --w-haze:  #dcfaea;
  background-color: var(--w-deep);
}
body[data-release="whereubeen"] .tex-vhs { opacity: 0.28; }
body[data-release="whereubeen"] .tex-crt { opacity: 0.14; }
body[data-release="whereubeen"] .crt-vignette {
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(0,10,6,0.72) 100%);
}
body[data-release="whereubeen"] .crt-vignette::before { display: none; }

/* bruma verde que deriva */
body[data-release="whereubeen"] .rt-haze {
  background:
    radial-gradient(40vw 32vw at 24% 26%, rgba(63,198,148,0.22), transparent 70%),
    radial-gradient(32vw 28vw at 78% 60%, rgba(120,216,168,0.16), transparent 72%),
    radial-gradient(26vw 24vw at 52% 92%, rgba(161,231,199,0.12), transparent 72%);
  filter: blur(8px);
  animation: wuDrift 26s ease-in-out infinite alternate;
}
@keyframes wuDrift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.7; }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.1); opacity: 1; }
}

/* líneas de barrido densas, como la portada */
body[data-release="whereubeen"] .rt-lines {
  background-image: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0.32) 0px, rgba(0,0,0,0.32) 1px,
    transparent 1px, transparent 3px);
  opacity: 0.75; mix-blend-mode: multiply;
}
/* banda de tracking que baja de vez en cuando */
body[data-release="whereubeen"] .rt-tracking {
  height: 12vh;
  background: linear-gradient(180deg,
    transparent, rgba(161,231,199,0.10) 35%, rgba(220,250,234,0.16) 50%,
    rgba(161,231,199,0.08) 65%, transparent);
  filter: blur(1px);
  animation: wuTracking 9s linear infinite;
}
@keyframes wuTracking {
  0%, 62%   { transform: translateY(-14vh); opacity: 0; }
  64%       { opacity: 1; }
  100%      { transform: translateY(102vh); opacity: 0; }
}

body[data-release="whereubeen"] .topbar {
  background: linear-gradient(180deg, rgba(2,12,8,0.95), rgba(2,12,8,0.5) 70%, transparent);
  border-bottom-color: rgba(63,198,148,0.25);
}
body[data-release="whereubeen"] .topnav a { color: rgba(220,250,234,0.72); text-shadow: none; }
body[data-release="whereubeen"] .topnav a:hover { color: var(--w-cyan); text-shadow: 0 0 14px rgba(120,216,168,0.8); }

body[data-release="whereubeen"] .release-hero-cover {
  border: 1px solid rgba(120,216,168,0.4);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(2,12,8,0.6),
    0 24px 70px rgba(0,0,0,0.7),
    0 0 90px rgba(63,198,148,0.35);
  animation: wuFloat 9s ease-in-out infinite;
}
@keyframes wuFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-9px); }
}
body[data-release="whereubeen"] .release-hero-cover img {
  filter: saturate(1.35) brightness(1.08) contrast(1.05);
}
/* velo verde + barrido propio de la portada */
body[data-release="whereubeen"] .release-hero-cover::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.28) 0px, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, rgba(120,216,168,0.14), transparent 45%, rgba(63,198,148,0.2));
  mix-blend-mode: screen;
}

/* título con separación cromática, como una señal mal sintonizada */
body[data-release="whereubeen"] .release-hero-title {
  font-family: "Nintendo DS BIOS", var(--t-pixel), monospace;
  font-size: clamp(26px, 7.4cqi, 62px);
  line-height: 1.15; letter-spacing: 0.06em;
  color: var(--w-haze);
  text-transform: lowercase;
  text-shadow:
   -2px 0 0 rgba(255,60,90,0.45),
    2px 0 0 rgba(63,198,148,0.55),
    0 0 2px rgba(255,255,255,0.95),
    0 0 18px rgba(120,216,168,0.85),
    0 0 50px rgba(63,198,148,0.6),
    0 0 110px rgba(63,198,148,0.4);
  animation: wuSignal 7s steps(1) infinite;
}
@keyframes wuSignal {
  0%, 84%, 100% { transform: translateX(0) skewX(0); }
  85% { transform: translateX(-3px) skewX(-1.2deg); }
  86% { transform: translateX(2px) skewX(0.8deg); }
  87% { transform: translateX(0) skewX(0); }
}
body[data-release="whereubeen"] .release-hero-meta,
body[data-release="whereubeen"] .page-tag {
  font-family: "Nintendo DS BIOS", var(--t-pixel), monospace;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--w-cyan);
  text-shadow: 0 0 12px rgba(120,216,168,0.7);
}
body[data-release="whereubeen"] .release-hero-meta .sep { color: rgba(63,198,148,0.6); }
body[data-release="whereubeen"] .release-platforms-head {
  font-family: "Nintendo DS BIOS", var(--t-pixel), monospace;
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--w-glow); text-shadow: 0 0 14px rgba(120,216,168,0.7);
}

/* columna de texto vertical, como señalética japonesa */
.rt-tategaki {
  position: fixed; top: 50%; right: clamp(6px, 2vw, 26px);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: clamp(11px, 1.3vw, 15px);
  letter-spacing: 0.5em;
  color: rgba(120,216,168,0.5);
  text-shadow: 0 0 18px rgba(63,198,148,0.6);
  z-index: 3; pointer-events: none; user-select: none;
}
@media (max-width: 900px) { .rt-tategaki { display: none; } }

/* links: vidrio esmerilado con su propio barrido */
body[data-release="whereubeen"] .platform-link {
  font-family: "Nintendo DS BIOS", var(--t-pixel), monospace;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 20px); letter-spacing: 0.1em;
  color: var(--w-haze);
  background: rgba(63,198,148,0.08);
  border: 1px solid rgba(120,216,168,0.35);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 0 14px rgba(120,216,168,0.6);
  text-transform: lowercase;
}
body[data-release="whereubeen"] .platform-link::before {
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px);
  opacity: 0.8;
}
body[data-release="whereubeen"] .platform-link:hover,
body[data-release="whereubeen"] .platform-link:focus-visible {
  background: rgba(63,198,148,0.2);
  border-color: rgba(161,231,199,0.85);
  transform: translateY(-3px);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 40px rgba(63,198,148,0.5);
}
body[data-release="whereubeen"] .foot-line { color: rgba(120,216,168,0.55); text-shadow: none; }
body[data-release="whereubeen"] .foot { border-top-color: rgba(63,198,148,0.2); }


/* ══════════════════════════════════════════════════════════════════════
   PUNTERO DIGITAL — cyberpunk monocromo, vigilancia, expediente de datos
   ══════════════════════════════════════════════════════════════════════ */
body[data-release="puntero-digital"] {
  --p-bg:   #050607;
  --p-ink:  #f2f4f5;
  --p-mute: rgba(242,244,245,0.62);
  --p-line: rgba(242,244,245,0.22);
  background-color: var(--p-bg);
}
body[data-release="puntero-digital"] .tex-vhs { opacity: 0.3; }
body[data-release="puntero-digital"] .crt-vignette::before { display: none; }

/* retícula de datos */
body[data-release="puntero-digital"] .rt-grid {
  background-image:
    linear-gradient(rgba(242,244,245,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,244,245,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}
/* barrido de escaneo */
body[data-release="puntero-digital"] .rt-scan {
  background: linear-gradient(180deg, transparent, rgba(242,244,245,0.055) 50%, transparent);
  height: 30vh;
  animation: pdScan 5.5s linear infinite;
}
@keyframes pdScan {
  0%   { transform: translateY(-32vh); }
  100% { transform: translateY(102vh); }
}

body[data-release="puntero-digital"] .topnav a { color: var(--p-mute); text-shadow: none; }
body[data-release="puntero-digital"] .topnav a:hover { color: var(--p-ink); text-shadow: 0 0 12px rgba(242,244,245,0.5); }

/* portada con marco de vigilancia */
body[data-release="puntero-digital"] .release-hero-cover {
  border: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  /* el HUD (corchetes, REC, timecode) vive fuera del marco: sin esto
     lo recortan el overflow:hidden y el contain:paint de la portada */
  overflow: visible;
  contain: none;
}
body[data-release="puntero-digital"] .release-hero-cover img {
  filter: grayscale(1) contrast(1.3) brightness(0.9);
}
/* corchetes de encuadre */
.rt-brackets { position: absolute; inset: -10px; pointer-events: none; }
.rt-brackets i {
  position: absolute; width: 20px; height: 20px;
  border: 2px solid rgba(242,244,245,0.85);
}
.rt-brackets i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rt-brackets i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rt-brackets i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rt-brackets i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.rt-rec {
  position: absolute; top: -26px; left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--t-mono); font-size: 9px; letter-spacing: 0.3em;
  color: var(--p-mute);
}
.rt-rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #f2f4f5; animation: pdBlink 1.6s steps(1) infinite;
}
@keyframes pdBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.15; } }
.rt-timecode {
  position: absolute; top: -26px; right: 0;
  font-family: "WHTPNY LCD", var(--t-mono), monospace;
  font-size: 12px; letter-spacing: 0.12em; color: var(--p-mute);
}

body[data-release="puntero-digital"] .release-hero-title {
  font-family: "WHTPNY LCD", var(--t-display), monospace;
  font-size: clamp(30px, 8.6cqi, 74px);
  line-height: 1.05; letter-spacing: 0.03em;
  color: var(--p-ink);
  text-transform: uppercase;
  text-shadow: 0 0 2px rgba(255,255,255,0.85), 0 0 20px rgba(242,244,245,0.4), 0 0 60px rgba(200,220,230,0.2);
}
body[data-release="puntero-digital"] .release-hero-meta,
body[data-release="puntero-digital"] .page-tag {
  font-family: var(--t-mono);
  font-size: 10px; letter-spacing: 0.36em;
  color: var(--p-mute); text-shadow: none;
}
body[data-release="puntero-digital"] .release-platforms-head {
  font-family: var(--t-mono); font-size: 10px; letter-spacing: 0.36em;
  color: var(--p-mute); text-shadow: none;
}

/* expediente: sólo datos reales del release */
/* sin padding horizontal: aquí el fondo ES la línea de la rejilla, y el
   padding lo pintaría como dos bloques sueltos a los lados */
.rt-dossier {
  width: min(520px, calc(100% - 2 * var(--pad-x)));
  margin: clamp(14px,3vh,26px) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--p-line);
  border: 1px solid var(--p-line);
}
.rt-dossier > div {
  background: #070809; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.rt-dossier dt, .rt-dossier .k {
  font-family: var(--t-mono); font-size: 8.5px; letter-spacing: 0.28em;
  color: rgba(242,244,245,0.45);
}
.rt-dossier dd, .rt-dossier .v {
  margin: 0;
  font-family: "WHTPNY LCD", var(--t-mono), monospace;
  font-size: 14px; letter-spacing: 0.06em; color: var(--p-ink);
}

/* links: filas de terminal */
body[data-release="puntero-digital"] .platform-link {
  font-family: var(--t-mono); font-weight: 700;
  font-size: clamp(14px, 1.9vw, 18px); letter-spacing: 0.26em;
  color: var(--p-ink);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--p-line);
  border-radius: 0;
  text-shadow: none;
}
body[data-release="puntero-digital"] .platform-link > span:first-child::before {
  content: "> "; color: rgba(242,244,245,0.4);
}
body[data-release="puntero-digital"] .platform-link::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--p-ink);
  transform: scaleY(0); transition: transform 220ms ease;
}
body[data-release="puntero-digital"] .platform-link:hover,
body[data-release="puntero-digital"] .platform-link:focus-visible {
  background: rgba(255,255,255,0.07);
  border-color: rgba(242,244,245,0.55);
  transform: translateX(4px);
  box-shadow: 0 6px 26px rgba(0,0,0,0.6);
}
body[data-release="puntero-digital"] .platform-link:hover::after,
body[data-release="puntero-digital"] .platform-link:focus-visible::after { transform: scaleY(1); }


/* ── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rt-dossier { grid-template-columns: 1fr 1fr; }
  .rt-rec, .rt-timecode { font-size: 8px; top: -20px; }
  .rt-brackets i { width: 14px; height: 14px; }
}

/* ── Menos movimiento ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rt-marquee-track,
  body[data-release="svvtchbld"] .release-hero-title,
  body[data-release="svvtchbld"] .release-hero-cover::after,
  body[data-release="whereubeen"] .release-hero-cover,
  body[data-release="whereubeen"] .rt-haze,
  body[data-release="puntero-digital"] .rt-scan,
  .rt-rec::before { animation: none !important; }
}