/* ==========================================================
   PLANETAS ERRANTES: estilos
   Mobile first. Los colores y tipografías están en :root.
   ========================================================== */

/* ---------- Tipografías (alojadas en el sitio, subconjunto latino) ----------
   DM Sans y Unbounded son fuentes variables: un solo archivo cubre todos los pesos.
   Licencia: SIL Open Font License (Google Fonts). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/unbounded-latin.woff2") format("woff2");
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/vt323-latin.woff2") format("woff2");
}

:root {
  /* Fondo */
  --bg: #0d0a14;
  --bg-2: #17111f;
  --bg-3: #211930;
  --line: #2e2440;

  /* Marca */
  --violeta: #8b45d6;
  --violeta-claro: #a56cf0;
  --magenta: #ff2e7e;
  --cian: #2ee6ff;

  /* Texto */
  --text: #f3eff8;
  --text-2: #b8adcc;
  --text-3: #8a7fa0;

  /* Tipografías */
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-pixel: "VT323", "Courier New", ui-monospace, monospace;

  /* Medidas */
  --gutter: 16px;
  --max: 1180px;
  --radius: 14px;
  --header-h: 64px;

  --glow-v: 0 0 0 1px rgb(139 69 214 / .6), 0 0 18px rgb(139 69 214 / .55), 0 0 42px rgb(139 69 214 / .25);
  --glow-c: 0 0 14px rgb(46 230 255 / .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 700px) {
  :root { --gutter: 32px; --header-h: 72px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scanlines de pantalla CRT, muy tenues, sobre todo el sitio */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .5) 0 1px, transparent 1px 3px);
  opacity: .035;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: currentColor; }

a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--violeta);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pixel { font-family: var(--f-pixel); font-weight: 400; letter-spacing: .04em; }

/* ---------- Campo de estrellas ---------- */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.3em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--violeta); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--violeta-claro); box-shadow: var(--glow-v); }
.btn-ghost { border-color: var(--line); background: rgb(255 255 255 / .03); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--cian); color: #fff; box-shadow: var(--glow-c); }
.btn-spotify { background: #1ed760; color: #0b0b0b; }
.btn-spotify:hover, .btn-spotify:focus-visible { box-shadow: 0 0 0 1px #1ed760, 0 0 20px rgb(30 215 96 / .5); }
.btn-sm { min-height: 40px; padding: .45em 1em; font-size: .9rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--cian);
  font-weight: 700;
  text-decoration: none;
}
.link-arrow svg { width: 18px; height: 18px; }
.link-arrow:hover { text-shadow: var(--glow-c); }

/* ---------- Header / menú ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.menu-open {
  background: rgb(13 10 20 / .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.header-inner {
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo { transition: opacity .3s; }
.header-logo img { width: 112px; }
.site-header:not(.is-scrolled):not(.menu-open) .header-logo { opacity: 0; pointer-events: none; }
@media (min-width: 700px) { .header-logo img { width: 128px; } }

.nav-toggle {
  position: relative;
  z-index: 60;
  width: 48px; height: 48px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  height: calc(100dvh - var(--header-h));
  background: rgb(13 10 20 / .97);
  padding: 32px var(--gutter);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto;
}
.site-nav.is-open {
  transform: none;
  visibility: visible;
  transition: transform .35s var(--ease), visibility 0s;
}
.site-nav ul { display: flex; flex-direction: column; gap: 6px; }
.site-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.site-nav a:hover { color: var(--violeta-claro); }
.site-nav .nav-cta { color: var(--cian); }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    height: auto;
    background: none;
    padding: 0;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  .site-nav ul { flex-direction: row; align-items: center; gap: 28px; }
  .site-nav a {
    padding: 6px 0;
    font-family: var(--f-body);
    font-weight: 500;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-2);
    transition: color .2s, text-shadow .2s;
  }
  .site-nav a:hover { color: #fff; text-shadow: 0 0 12px rgb(165 108 240 / .8); }
  .site-nav .nav-cta {
    padding: 8px 16px;
    border: 1px solid var(--violeta);
    border-radius: 999px;
    color: #fff;
  }
  .site-nav .nav-cta:hover { box-shadow: var(--glow-v); text-shadow: none; }
}

/* ---------- Inicio (hero) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 32px) 0 72px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg picture, .hero-bg img { width: 100%; height: 100%; }
.hero-bg img {
  object-fit: cover;
  object-position: 50% 40%;
  animation: kenburns 28s ease-in-out infinite alternate;
  transform-origin: 55% 45%;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgb(13 10 20 / .25), rgb(13 10 20 / .65) 72%),
    linear-gradient(to bottom, rgb(13 10 20 / .55) 0%, rgb(40 16 70 / .25) 45%, var(--bg) 100%);
}

/* Horizonte en cuadrícula, estilo synthwave, muy tenue */
.hero-grid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  perspective: 320px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  opacity: .32;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.hero-grid-plane {
  position: absolute;
  left: -50%; right: -50%;
  top: 0; height: 200%;
  transform: rotateX(62deg);
  transform-origin: 50% 0;
  will-change: transform;
  background-image:
    linear-gradient(to right, rgb(165 108 240 / .9) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 46 126 / .75) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: grid-move 6s linear infinite;
}
/* Se anima con transform (no repinta): la cuadrícula avanza exactamente una celda y vuelve a empezar */
@keyframes grid-move {
  from { transform: rotateX(62deg) translateY(-64px); }
  to   { transform: rotateX(62deg) translateY(0); }
}

.hero-content {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rec-tag {
  font-family: var(--f-pixel);
  font-size: 1.15rem;
  letter-spacing: .12em;
  color: var(--text-2);
  margin-bottom: 18px;
}
.rec-dot { color: var(--magenta); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }

.hero-logo img {
  width: min(88vw, 620px);
  height: auto;
  aspect-ratio: 672 / 264;
  filter: drop-shadow(0 0 28px rgb(139 69 214 / .55));
}
.hero-sub {
  margin: 22px 0 6px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.8vw, 1.6rem);
  letter-spacing: .01em;
}
.hero-line {
  color: var(--text-2);
  font-size: 1rem;
  margin-bottom: 30px;
}

/* Tarjeta de lanzamiento en el inicio */
.hero-release {
  width: 100%;
  max-width: 440px;
  min-height: 146px; /* reserva el lugar de la tarjeta que se carga por JS: evita saltos */
  text-align: left;
}
.release-card-hero {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius);
  background: rgb(23 17 31 / .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.release-card-hero img {
  width: 80px; height: 80px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgb(0 0 0 / .5);
}
.release-card-hero .eyebrow {
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--cian);
  margin: 0;
}
.release-card-hero h2 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  margin: 2px 0 10px;
}
.release-card-hero .btn { min-height: 42px; padding: .45em 1em; font-size: .9rem; white-space: nowrap; }
@media (min-width: 480px) {
  .release-card-hero { grid-template-columns: 96px 1fr; gap: 18px; }
  .release-card-hero img { width: 96px; height: 96px; }
}
.countdown {
  font-family: var(--f-pixel);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--magenta);
  letter-spacing: .06em;
  margin: -4px 0 10px;
}
.countdown.is-available { color: var(--cian); }
@media (max-width: 399px) { .countdown { font-size: 1.2rem; letter-spacing: .03em; } }
.hero-latest {
  margin: 10px 4px 0;
  font-size: .92rem;
  color: var(--text-2);
}
.hero-latest a { color: var(--text); font-weight: 700; text-decoration-color: var(--violeta); text-underline-offset: 3px; }
.hero-latest a:hover { color: var(--cian); }

.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social a {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgb(13 10 20 / .5);
  color: var(--text);
  transition: color .2s, border-color .2s, box-shadow .25s;
}
.social svg { width: 22px; height: 22px; }
.social a:hover, .social a:focus-visible { color: #fff; border-color: var(--violeta-claro); box-shadow: var(--glow-v); }
.social-hero { justify-content: center; margin-top: 26px; }

.scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  translate: -50% 0;
  width: 26px; height: 42px;
  border: 2px solid rgb(243 239 248 / .45);
  border-radius: 14px;
}
.scroll-cue span {
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--text);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-height: 700px) and (max-width: 699px) { .scroll-cue { display: none; } }

@media (min-width: 900px) {
  .hero-line { font-size: 1.1rem; }
}

/* ---------- Secciones ---------- */
.section { padding: 88px 0; position: relative; }
/* El navegador no calcula las secciones fuera de pantalla hasta que se acercan: carga más rápida en celulares */
.section, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
@media (min-width: 900px) { .section { padding: 128px 0; } }

.section-head { margin-bottom: 40px; max-width: 760px; }
.kicker {
  font-family: var(--f-pixel);
  font-size: 1.2rem;
  letter-spacing: .14em;
  color: var(--violeta-claro);
  margin-bottom: 10px;
}
.kicker::before { content: "▸ "; color: var(--magenta); }
.section-head h2, .contact-card h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 3.6rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.section-lead {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 1.1rem;
  max-width: 62ch;
}

/* Aparición al entrar en pantalla (solo si hay JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Música ---------- */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 22px;
}
@media (min-width: 900px) {
  .release-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (min-width: 340px) and (max-width: 559px) {
  .release-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .release-body { padding: 12px 12px 14px; }
  .release h3 { font-size: .98rem; }
  .release-meta { font-size: .95rem; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .release-links { flex-wrap: wrap; gap: 6px; }
  .release-links a { min-height: 40px; padding: 0 10px; font-size: .8rem; }
  .cassette-body { width: 120px; height: 76px; }
  .cassette-body::before, .cassette-body::after { top: 30px; width: 24px; height: 24px; }
  .cassette-body::before { left: 20px; }
  .cassette-body::after { right: 20px; }
  .cassette-label { font-size: .85rem; top: 6px; }
}

/* Tarjeta estilo cassette / pantalla retro */
.release {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.release:hover { border-color: rgb(139 69 214 / .7); box-shadow: 0 10px 40px rgb(139 69 214 / .18); transform: translateY(-3px); }
.release-cover { position: relative; aspect-ratio: 1; background: var(--bg-3); }
.release-cover img { width: 100%; height: 100%; object-fit: cover; }
.release-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: .08em;
  padding: 2px 10px;
  background: var(--magenta);
  color: #fff;
  border-radius: 4px;
}
/* Tapa de reemplazo: un cassette dibujado en CSS */
.cassette {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 50% 120%, rgb(139 69 214 / .45), transparent 60%),
    linear-gradient(135deg, #1d1530, #120d1c);
  text-align: center;
}
.cassette-body {
  width: 170px; height: 106px;
  margin: 0 auto;
  border: 2px solid var(--violeta-claro);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 0 20px rgb(139 69 214 / .35);
}
.cassette-body::before, .cassette-body::after {
  content: "";
  position: absolute;
  top: 38px;
  width: 30px; height: 30px;
  border: 2px solid var(--cian);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--cian) 0 12deg, transparent 12deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
  mask: radial-gradient(circle, transparent 5px, #000 6px);
}
.cassette-body::before { left: 32px; }
.cassette-body::after { right: 32px; }
.cassette-label {
  position: absolute;
  top: 10px; left: 12px; right: 12px;
  font-family: var(--f-pixel);
  font-size: 1rem;
  color: var(--text);
  border-bottom: 1px dashed var(--line);
}

.release-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  flex: 1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgb(255 255 255 / .025) 27px 28px);
}
.release-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  color: var(--text-3);
  letter-spacing: .05em;
}
.release-meta .side { color: var(--violeta-claro); }
.release h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
}
.release-type { font-size: .88rem; color: var(--text-2); }
.release-note { font-size: .84rem; color: var(--text-3); margin: 2px 0 0; line-height: 1.45; }
.release-links { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.release-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.release-links svg { width: 17px; height: 17px; }
.release-links a:hover, .release-links a:focus-visible { border-color: var(--violeta-claro); box-shadow: var(--glow-v); }
.release-links .soon { font-family: var(--f-pixel); font-size: 1.05rem; color: var(--cian); padding-top: 8px; }

.credits {
  margin: 26px 0 0;
  font-size: .82rem;
  color: var(--text-3);
}

.music-media {
  display: grid;
  gap: 48px;
  margin-top: 72px;
}
@media (min-width: 900px) {
  .music-media { grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: stretch; }
  /* La tarjeta de Spotify toma la misma altura que las de los videoclips */
  .music-media .media-block { display: flex; flex-direction: column; }
  .music-media .spotify-facade { flex: 1; display: flex; }
  .music-media .spotify-facade .spotify-load { flex: 1; }
  .music-media .spotify-facade.is-loaded { flex: none; }
}
.media-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.media-title .pixel { color: var(--magenta); font-size: 1.4rem; margin-right: 4px; }
.video-list { display: grid; gap: 20px; }
@media (min-width: 600px) { .video-list { grid-template-columns: 1fr 1fr; } }
.video-caption { margin: 10px 0 0; font-size: .92rem; color: var(--text-2); }

/* Facade de YouTube / Spotify */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  padding: 0;
}
.yt-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .3s, transform .6s var(--ease);
}
.yt-facade:hover img, .yt-facade:focus-visible img { opacity: 1; transform: scale(1.03); }
.yt-facade iframe, .spotify-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 68px; height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(13 10 20 / .7);
  border: 1px solid rgb(255 255 255 / .35);
  color: #fff;
  transition: background-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.play-btn svg { width: 28px; height: 28px; }
.yt-facade:hover .play-btn, .yt-facade:focus-visible .play-btn { background: var(--violeta); box-shadow: var(--glow-v); transform: scale(1.06); }
.yt-label {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--f-pixel);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 1px 6px #000;
}
.yt-facade.is-loaded { cursor: default; }

.spotify-facade {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 152px;
}
.spotify-facade.is-loaded { height: 352px; }
.spotify-load {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 152px;
  padding: 20px 96px 20px 20px;
  text-align: left;
  background: linear-gradient(135deg, #1b1428, #120d1b);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.spotify-load:hover, .spotify-load:focus-visible { border-color: #1ed760; box-shadow: 0 0 22px rgb(30 215 96 / .25); }
.spotify-load-icon { color: #1ed760; flex: none; }
.spotify-load-icon svg { width: 44px; height: 44px; }
.spotify-load-text { display: flex; flex-direction: column; gap: 2px; }
.spotify-load-text strong { font-size: 1.05rem; }
.spotify-load-text span { font-size: .88rem; color: var(--text-2); }
.spotify-load .play-btn { left: auto; right: 16px; translate: 0 -50%; width: 56px; height: 56px; background: #1ed760; color: #0b0b0b; border: 0; }
.spotify-load:hover .play-btn { transform: scale(1.06); }

/* ---------- En vivo ---------- */
.section-live {
  background:
    radial-gradient(ellipse at 85% 0%, rgb(255 46 126 / .1), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgb(46 230 255 / .07), transparent 50%);
}
.live-layout { display: grid; gap: 28px; }
@media (min-width: 900px) { .live-layout { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; } }

.looper {
  background: #0a0710;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: inset 0 0 60px rgb(139 69 214 / .08);
}
.looper-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-pixel);
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: var(--text-2);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.looper-counter { color: var(--cian); }
.looper-tracks { display: grid; gap: 10px; }
.track {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n name" "wave wave";
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--f-pixel);
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s;
  transition-delay: calc(var(--d) * 450ms + 200ms);
}
.js .track { opacity: .18; transform: translateX(-16px); }
.track-n { grid-area: n; font-size: 1.5rem; color: var(--magenta); line-height: 1; }
.track-name { grid-area: name; font-size: 1.5rem; letter-spacing: .12em; line-height: 1; }
.track-wave {
  grid-area: wave;
  height: 28px;
  border-radius: 4px;
  --c: var(--violeta-claro);
  background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q5 2 10 14 T20 14 T30 14 Q35 6 40 14 T50 14 Q55 0 60 14 T70 14 Q75 8 80 14 T90 14 Q95 3 100 14 T110 14 Q115 9 120 14 Q115 19 110 14 T100 14 Q95 25 90 14 T80 14 Q75 20 70 14 T60 14 Q55 28 50 14 T40 14 Q35 22 30 14 T20 14 Q15 26 10 14 T0 14Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q5 2 10 14 T20 14 T30 14 Q35 6 40 14 T50 14 Q55 0 60 14 T70 14 Q75 8 80 14 T90 14 Q95 3 100 14 T110 14 Q115 9 120 14 Q115 19 110 14 T100 14 Q95 25 90 14 T80 14 Q75 20 70 14 T60 14 Q55 28 50 14 T40 14 Q35 22 30 14 T20 14 Q15 26 10 14 T0 14Z'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  opacity: .9;
}
.track:nth-child(2) .track-wave { --c: var(--magenta); -webkit-mask-size: 34% 100%; mask-size: 34% 100%; }
.track:nth-child(3) .track-wave { --c: var(--cian); -webkit-mask-size: 26% 100%; mask-size: 26% 100%; }
.track:nth-child(4) .track-wave { --c: #f0b5ff; -webkit-mask-size: 70% 100%; mask-size: 70% 100%; }
.track:nth-child(5) .track-wave { --c: #ee8434; -webkit-mask-size: 18% 100%; mask-size: 18% 100%; }
.js .looper.is-visible .track { opacity: 1; transform: none; border-color: rgb(139 69 214 / .45); }
.looper.is-visible .track-wave { animation: wave-scroll 3.2s linear infinite; }
@keyframes wave-scroll { to { -webkit-mask-position: -240px 0; mask-position: -240px 0; } }
@media (min-width: 600px) {
  .track { grid-template-columns: 44px 130px 1fr; grid-template-areas: "n name wave"; }
}

.live-photo { margin: 0; }
.live-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.show-facts {
  display: grid;
  gap: 14px;
  margin: 48px 0;
}
@media (min-width: 760px) { .show-facts { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.show-facts li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 18px 20px;
  border-left: 2px solid var(--violeta);
  background: linear-gradient(90deg, rgb(139 69 214 / .1), transparent);
  color: var(--text-2);
}
.show-facts .pixel { color: var(--cian); font-size: 1.6rem; line-height: 1; min-width: 3.1em; }

.live-video { max-width: 900px; margin-inline: auto; }

/* ---------- La banda ---------- */
.band-intro { display: grid; gap: 32px; }
@media (min-width: 900px) { .band-intro { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } }
.band-photo { margin: 0; }
.band-photo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.bio { color: var(--text-2); }
.bio-lead {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  line-height: 1.35;
  color: var(--text);
}

.members {
  display: grid;
  gap: 14px;
  margin-top: 48px;
}
@media (min-width: 760px) { .members { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 759px) {
  .member { display: grid; grid-template-columns: 38% 1fr; align-items: center; }
  .member-photo { height: 100%; }
  .member-photo img { height: 100%; }
}
.member {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.member:hover { border-color: rgb(139 69 214 / .7); box-shadow: 0 0 28px rgb(139 69 214 / .15); }
.member-photo { display: block; overflow: hidden; }
.member-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform .6s var(--ease);
}
.member:hover .member-photo img { transform: scale(1.03); }
.member-info { padding: 18px 20px 20px; }
.member h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.member-role { margin: 8px 0 0; font-family: var(--f-pixel); font-size: 1.3rem; letter-spacing: .1em; color: var(--cian); }

.timeline-title {
  margin: 80px 0 28px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
}
.timeline { position: relative; display: grid; gap: 26px; padding-left: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--violeta), var(--magenta), var(--cian));
  opacity: .6;
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -28px; top: 9px;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--bg);
  border: 2px solid var(--violeta-claro);
  box-shadow: 0 0 10px rgb(139 69 214 / .7);
}
.timeline li:last-child::before { border-color: var(--cian); box-shadow: var(--glow-c); }
.tl-year { display: block; font-family: var(--f-pixel); font-size: 2rem; line-height: 1; color: var(--violeta-claro); margin-bottom: 6px; }
.timeline li:last-child .tl-year { color: var(--cian); }
.timeline p { color: var(--text-2); font-size: .98rem; margin: 0; }
.timeline em, .bio em { color: var(--text); font-style: normal; font-weight: 700; }

@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: 24px; padding-left: 0; padding-top: 36px; }
  .timeline::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; background: linear-gradient(to right, var(--violeta), var(--magenta), var(--cian)); }
  .timeline li::before { left: 0; top: -37px; }
}

/* ---------- Fechas ---------- */
.gigs { border-top: 1px solid var(--line); }
.gig {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "date place" "date action";
  column-gap: 18px;
  row-gap: 10px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.gig-date { grid-area: date; font-family: var(--f-pixel); text-align: center; line-height: 1; min-width: 72px; }
.gig-day { display: block; font-size: 2.6rem; color: var(--text); }
.gig-month { display: block; font-size: 1.2rem; letter-spacing: .12em; color: var(--violeta-claro); }
.gig-place { grid-area: place; }
.gig-city { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; }
.gig-venue { display: block; color: var(--text-2); font-size: .95rem; }
.gig-action { grid-area: action; }
.gig-status {
  display: inline-block;
  font-family: var(--f-pixel);
  font-size: 1.15rem;
  letter-spacing: .1em;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.gig-status.gratis { color: var(--cian); }
.gig-status.agotado { color: var(--text-3); text-decoration: line-through; }
@media (min-width: 700px) {
  .gig { grid-template-columns: 110px 1fr auto; grid-template-areas: "date place action"; padding: 24px 8px; }
  .gig:hover { background: linear-gradient(90deg, rgb(139 69 214 / .08), transparent); }
}
.gigs-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 1.1rem;
}
.gigs-empty .pixel { display: block; font-size: 1.4rem; color: var(--cian); margin-bottom: 8px; letter-spacing: .12em; }
.gigs-empty a { color: var(--text); font-weight: 700; text-decoration-color: var(--magenta); text-underline-offset: 4px; }
.gigs-empty a:hover { color: var(--cian); }
.gigs.is-empty { border-top: 0; }

/* ---------- Prensa ---------- */
.achievements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
  margin-bottom: 64px;
}
.achievement {
  padding: 22px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.achievement strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  line-height: 1.15;
  background: linear-gradient(90deg, #fff, #d6b8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.achievement.is-number strong { font-family: var(--f-pixel); font-weight: 400; font-size: 3rem; line-height: .9; background: none; color: var(--cian); text-shadow: 0 0 18px rgb(46 230 255 / .35); }
.achievement span { display: block; margin-top: 8px; font-size: .9rem; color: var(--text-2); line-height: 1.4; }

.press-cols { display: grid; gap: 22px; }
@media (min-width: 900px) { .press-cols { grid-template-columns: 1fr 1.3fr; } }
.press-block {
  padding: 26px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.press-block h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 18px; }
.press-block h3 .pixel { color: var(--text-3); text-transform: none; font-size: 1.15rem; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; }
.formats li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .92rem;
  background: rgb(255 255 255 / .02);
}
.rider-list { display: grid; gap: 10px; margin-bottom: 24px; color: var(--text-2); }
.rider-list li { position: relative; padding-left: 22px; }
.rider-list li::before { content: "▸"; position: absolute; left: 0; color: var(--magenta); }
.rider-list strong { color: var(--text); }

.press-photos-title { margin: 72px 0 8px; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; }
.press-photos-note { color: var(--text-2); font-size: .95rem; margin-bottom: 32px; }

.polaroids {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 16px;
  padding: 8px 4px;
}
@media (min-width: 900px) { .polaroids { grid-template-columns: repeat(5, 1fr); gap: 22px; } }
.polaroid {
  background: #f4f0ea;
  padding: 10px 10px 0;
  border-radius: 3px;
  box-shadow: 0 14px 30px rgb(0 0 0 / .45);
  rotate: var(--r, 0deg);
  transition: rotate .35s var(--ease), transform .35s var(--ease), box-shadow .35s, opacity .7s var(--ease);
}
.polaroid:hover, .polaroid:focus-within { rotate: 0deg; transform: translateY(-6px) scale(1.03); box-shadow: 0 20px 44px rgb(0 0 0 / .55), 0 0 30px rgb(139 69 214 / .3); z-index: 2; position: relative; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  font-family: var(--f-pixel);
  font-size: 1rem;
  white-space: nowrap;
  color: #3a3148;
}
.polaroid-foot a {
  color: #5a22a0;
  font-weight: 700;
  text-underline-offset: 3px;
  padding: 8px 0;
}
.polaroid-foot a:hover { color: var(--magenta); }
.polaroids li:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
@media (min-width: 900px) { .polaroids li:last-child:nth-child(odd) { grid-column: auto; width: auto; } }
.more-photos { margin-top: 32px; }

/* ---------- Contacto ---------- */
.contact-card {
  position: relative;
  padding: 44px 22px;
  border-radius: 22px;
  border: 1px solid rgb(139 69 214 / .5);
  background:
    radial-gradient(ellipse at 100% 0%, rgb(255 46 126 / .18), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgb(46 230 255 / .12), transparent 55%),
    var(--bg-2);
  box-shadow: 0 0 60px rgb(139 69 214 / .15);
  overflow: hidden;
}
@media (min-width: 700px) { .contact-card { padding: 64px 56px; } }
.contact-card h2 { font-size: clamp(1.6rem, 6vw, 3rem); max-width: 18ch; }
.contact-lead { margin: 18px 0 30px; color: var(--text-2); font-size: 1.1rem; }
.contact-data { display: grid; gap: 16px; margin: 0 0 32px; }
@media (min-width: 760px) { .contact-data { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 48px; } }
.contact-data dt { font-family: var(--f-pixel); font-size: 1.1rem; letter-spacing: .12em; color: var(--violeta-claro); text-transform: uppercase; }
.contact-data dd { margin: 2px 0 0; font-weight: 500; font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-data a { text-decoration-color: var(--violeta); text-underline-offset: 3px; }
.contact-data a:hover { color: var(--cian); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .contact-actions .btn { flex: 1 1 100%; } }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--line); background: rgb(8 6 13 / .6); }
.footer-inner { display: grid; gap: 26px; justify-items: center; text-align: center; }
.footer-brand img { width: 150px; margin: 0 auto 10px; opacity: .9; }
.footer-brand p { margin: 0; font-family: var(--f-pixel); font-size: 1.2rem; letter-spacing: .08em; color: var(--text-2); }
.copy { margin: 0; font-size: .85rem; color: var(--text-3); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .hero-bg img { animation: none; transform: none; }
  .js .reveal, .js .track { opacity: 1; transform: none; }
}

/* ---------- Visor de imágenes (pantalla completa) ---------- */
.lb-trigger { cursor: zoom-in; }
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(8 6 13 / .95);
  color: var(--text);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(8 6 13 / .6); }
.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 72px 16px 96px;
}
.lb-img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgb(0 0 0 / .6), 0 0 40px rgb(139 69 214 / .2);
}
.lb-caption { max-width: 60ch; text-align: center; font-size: .92rem; color: var(--text-2); }
.lb-count {
  position: absolute;
  top: 26px; left: 20px;
  margin: 0;
  font-family: var(--f-pixel);
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: var(--cian);
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgb(13 10 20 / .75);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover, .lb-btn:focus-visible { border-color: var(--violeta-claro); box-shadow: var(--glow-v); }
.lb-close { top: 16px; right: 16px; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lightbox.is-single .lb-prev, .lightbox.is-single .lb-next { display: none; }
@media (max-width: 699px) {
  .lb-prev, .lb-next { top: auto; bottom: 20px; translate: none; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}
@media (min-width: 700px) {
  .lb-figure { padding: 72px 88px 56px; }
  .lb-img { max-height: calc(100dvh - 160px); }
}

/* Íconos SVG dentro de las etiquetas pixeladas (el rayo de "En vivo") */
.fact-icon { display: inline-flex; align-self: flex-start; margin-top: -5px; }
.fact-icon svg { width: 34px; height: 34px; margin-left: -4px; color: var(--cian); }