/* ============================================
   JAYCEE — DJ · Productor · Electrónica
   styles.css — Inspirado en jaydelysmusic.com
   Paleta: Negro profundo / Rojo / Verde oscuro
   ============================================ */

/* ─────────────────────────────────────────────
   VARIABLES & RESET
───────────────────────────────────────────── */
:root {
  /* Paleta principal */
  --black:       #060608;
  --black-2:     #0c0c10;
  --black-3:     #131318;
  --black-4:     #1a1a22;
  --red:         #d91f1f;
  --red-dark:    #9e1515;
  --red-glow:    rgba(217, 31, 31, 0.3);
  --green:       #1a6428;
  --green-mid:   #22883a;
  --green-glow:  rgba(26, 100, 40, 0.3);
  --white:       #f4f4f0;
  --grey:        #7a7a7a;
  --grey-dark:   #383840;

  /* Tipografías */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow Condensed', sans-serif;
  --font-serif:   'DM Serif Display', serif;
  --font-mono:    'Share Tech Mono', monospace;

  --nav-h: 64px;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ─────────────────────────────────────────────
   PRELOADER
───────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader.done { opacity: 0; visibility: hidden; }

.preloader-logo {
  font-family: var(--font-display);
  font-size: 5rem;
  letter-spacing: 12px;
  color: var(--white);
  animation: preloaderPulse 1.2s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1; }
}

.preloader-bar {
  width: 240px;
  height: 2px;
  background: var(--grey-dark);
  border-radius: 2px;
  overflow: hidden;
}

.preloader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--red), var(--green-mid));
  border-radius: 2px;
  transition: width .1s linear;
}

.preloader-pct {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 3px;
  color: var(--grey);
}

/* ─────────────────────────────────────────────
   NAVBAR — 3 columnas: logo | links centrados | mini-player
   El truco es CSS Grid con 1fr | auto | 1fr, que garantiza
   que la columna del centro esté perfectamente centrada
   sin importar el ancho de las columnas laterales.
───────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: grid;
  /* 1fr ocupa el espacio libre; auto se ajusta al contenido centrado */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  background: rgba(6,6,8,0);
  transition: background .4s ease, border-bottom .4s ease;
}

.navbar.scrolled {
  background: rgba(6,6,8,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(217,31,31,.14);
}

/* Columna 1: logo alineado a la izquierda */
.navbar-logo {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 6px;
  color: var(--white);
  text-shadow: 0 0 20px var(--red-glow);
  transition: text-shadow .3s;
  white-space: nowrap;
}
.navbar-logo:hover {
  text-shadow: 0 0 30px var(--red), 0 0 60px var(--red-glow);
}

/* Columna 2: links perfectamente centrados */
.navbar-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 0;
  list-style: none;
}

.nlink {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(244,244,240,.5);
  padding: 6px 16px;
  transition: color .25s;
  position: relative;
  white-space: nowrap;
}
.nlink::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 16px; right: 16px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nlink:hover { color: var(--white); }
.nlink:hover::after { transform: scaleX(1); }

/* Mini-player removido — mantenemos la variable por si el audio
   sigue corriendo en segundo plano, pero sin UI visible */
.mini-player { display: none !important; }

/* Icono sociales (footer y hero) */
.ns-icon {
  width: 18px; height: 18px;
  color: var(--grey);
  transition: color .25s, transform .25s;
}
.ns-icon svg { width: 100%; height: 100%; }
.ns-icon:hover { color: var(--white); transform: translateY(-2px); }

/* Hamburger (solo móvil) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  grid-column: 3;
  justify-self: end;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Iframe YT invisible ── */
#yt-player-wrap {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* ── Responsive: móvil ── */
@media (max-width: 960px) {
  .navbar {
    grid-template-columns: auto 1fr auto;
  }
  .navbar-links {
    grid-column: 1 / -1;
    grid-row: 2;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    background: rgba(6,6,8,.97);
    padding: 28px 32px;
    gap: 4px;
    transform: translateY(-110%);
    transition: transform .35s var(--ease);
    z-index: 999;
  }
  .navbar-links.open { transform: translateY(0); }
  /* En móvil ocultamos la etiqueta y el slider, solo dejamos el play */
  .mp-label, .mp-vol-wrap { display: none; }
  .mini-player {
    padding: 0 6px;
    border: none;
    background: none;
  }
  .hamburger { display: flex; }
}

/* ─────────────────────────────────────────────
   HERO — Foto centrada, JAYCEE sobre mitad inferior
   Estructura en capas (z-index):
     0 → hero-bg (canvas + gradiente)
     1 → hero-eyebrow (texto superior)
     2 → hero-photo-wrap (foto del artista)
     3 → hero-name-wrap (JAYCEE + ticker + EQ)
     4 → hero-bottom (social row + scroll)
───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* No justify: manejamos el espaciado con márgenes y posiciones absolutas */
  overflow: hidden;
  padding-top: var(--nav-h);   /* espacio libre para la navbar fija */
}

/* ─── Fondo: canvas EQ + gradientes de color ─── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-grad {
  position: absolute;
  inset: 0;
  /* Fondo completamente negro — sin halos de color,
     para que la foto del artista sea el único elemento visual */
  background: var(--black);
}

#eq-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;       /* canvas oculto — fondo limpio sin el EQ animado */
  pointer-events: none;
}

/* ─── Eyebrow superior: aparece sobre la foto ─── */
.hero-eyebrow {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  opacity: 0;
  animation: fadeUp .8s .4s ease both;
}
.eyebrow-text {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 5px;
  color: rgba(244,244,240,.45);
}
.eyebrow-line {
  width: 50px; height: 1px;
  background: linear-gradient(to right, transparent, var(--grey-dark));
}
.eyebrow-line:last-child {
  background: linear-gradient(to left, transparent, var(--grey-dark));
}

/* ─── FOTO DEL ARTISTA — base negra de ancho completo + viñeta lateral ───
   El wrapper ocupa el 100% del ancho de la sección y tiene fondo negro sólido.
   Esto garantiza que no exista ninguna diferencia tonal entre el negro de la
   foto y el negro del sitio: visualmente son la misma superficie.

   Los pseudo-elementos ::before y ::after generan gradientes laterales
   "muy cortos" (12% del ancho cada uno) que arrancan en negro sólido y
   llegan a transparente hacia el centro. Esto consume apenas el margen
   oscuro de la foto, sin tocar la zona iluminada del artista.
─────────────────────────────────────────────────────────────────────── */
.hero-photo-wrap {
  position: relative;
  z-index: 2;
  width: 100%;                  /* ocupa todo el ancho → fondo negro continuo */
  height: 74vh;
  background: var(--black);     /* base negra sólida detrás de la imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  flex-shrink: 0;
}

/* Viñeta lateral — funde el borde de la foto con el fondo negro.
   Usa el mismo #060608 que --black para que no haya diferencia de tono. */
.hero-photo-wrap::before,
.hero-photo-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;          /* un poco más ancho para cubrir bien los bordes */
  z-index: 4;
  pointer-events: none;
}

.hero-photo-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    #060608        0%,     /* negro sólido perfecto, igual al body */
    rgba(6,6,8,.9) 35%,
    rgba(6,6,8,.4) 65%,
    transparent    100%
  );
}

.hero-photo-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    #060608        0%,
    rgba(6,6,8,.9) 35%,
    rgba(6,6,8,.4) 65%,
    transparent    100%
  );
}

.hero-photo {
  height: 100%;
  width: auto;
  max-width: 90vw;
  object-fit: contain;
  object-position: top;
  display: block;
  position: relative;
  z-index: 2;
  /* Sin ningún filtro de color — la foto se muestra tal cual,
     con su negro natural fundiéndose con el fondo del sitio */
}

/* Overlay de gradiente que cubre solo la MITAD INFERIOR de la foto.
   Esto es lo que permite que el JAYCEE sea legible sin tapar la cara. */
.hero-photo-overlay {
  position: absolute;
  left: 0; right: 0;
  /* empieza en el 50% de la foto (mitad exacta) y llega hasta el borde inferior */
  top: 50%;
  height: 50%;
  /* transparent arriba → negro semitransparente abajo */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(6,6,8,.45) 55%,
    rgba(6,6,8,.82) 100%
  );
  pointer-events: none;
}

/* ─── NOMBRE JAYCEE — superpuesto a la mitad inferior de la foto ─── */
.hero-name-wrap {
  position: absolute;
  z-index: 3;
  /* Subido de 62% a 55% para que los links queden más pegados a JAYCEE */
  top: 55%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 14rem);
  letter-spacing: clamp(6px, 1.5vw, 20px);
  line-height: 1;
  color: var(--white);
  position: relative;
  /* La mezcla de texto sobre foto necesita un mix-blend-mode.
     'screen' hace que el texto blanco se vea brillante sobre cualquier fondo oscuro. */
  mix-blend-mode: screen;
}

/* ─── LETRAS INDIVIDUALES — hover rojo + onda de sonido continua ───
   Cada letra tiene DOS animaciones simultáneas:
   1. letterIn  → entra desde abajo al cargar (solo una vez, fill:both)
   2. soundWave → oscilación vertical continua tipo vibración de bass
                  cada letra usa --sw-dur y --sw-del distintos → efecto de ola
───────────────────────────────────────────────────────────────────── */
.hn-letter {
  display: inline-block;
  opacity: 0;

  /* Entrada + onda de sonido en la misma declaración de animation.
     letterIn dura .7s y termina a los ~1.5s;
     soundWave arranca en --sw-del (>1.5s) para no solaparse con la entrada. */
  animation:
    letterIn  .7s calc(.5s + var(--i) * .065s) var(--ease)        both,
    soundWave var(--sw-dur, 1s) var(--sw-del, 1.8s) ease-in-out infinite alternate;

  text-shadow: 0 0 40px rgba(217,31,31,.12), 0 2px 0 rgba(0,0,0,.9);
  transition: color .18s ease, text-shadow .18s ease;
}

/* Hover: rojo con brillo.
   La transición 'color' y 'text-shadow' se aplica sobre la animación,
   el navegador prioriza la regla de hover para esas propiedades. */
.hn-letter:hover {
  color: var(--red);
  text-shadow:
    0 0 20px var(--red),
    0 0 50px var(--red-glow),
    0 0 80px rgba(217,31,31,.3);
  /* Pausamos la onda en hover para que el efecto rojo se vea limpio */
  animation-play-state: running, paused;
}

/* ─── Keyframe: entrada desde abajo ─── */
@keyframes letterIn {
  from { opacity: 0; transform: translateY(40px) skewX(-8deg); }
  to   { opacity: 1; transform: none; }
}

/* ─── Keyframe: onda de sonido suave (bassline vibration)
   La amplitud es MUY pequeña (4px) para que sea sutil.
   Con 'alternate' la letra va de 0 → -4px → 0 → … suavemente.
   Cada letra tiene duración y delay distintos → patrón de ola orgánico.
───────────────────────────────────────────────────────────────────── */
@keyframes soundWave {
  0%   { transform: translateY(0px) scaleY(1); }
  40%  { transform: translateY(-3px) scaleY(1.008); }
  70%  { transform: translateY(-2px) scaleY(1.004); }
  100% { transform: translateY(-4px) scaleY(1.010); }
}

/* ─── Ticker de géneros (debajo del nombre, todavía sobre la foto) ─── */
.hero-genre-ticker {
  height: 24px;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp .7s 1.2s ease both;
}
.genre-word {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 6px;
  color: var(--green-mid);
  text-align: center;
  transform: translateY(100%);
  transition: transform .5s var(--ease);
}
.genre-word.active { transform: translateY(0); }
.genre-word.exit   { transform: translateY(-100%); }

/* ─── Mini EQ decorativo debajo del ticker ─── */
.hero-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  opacity: 0;
  animation: fadeUp .7s 1.4s ease both;
}

.eq-bar {
  width: 2.5px;
  background: linear-gradient(to top, var(--red), var(--green-mid));
  border-radius: 2px 2px 0 0;
  animation: eqBounce 1.2s var(--delay, 0s) ease-in-out infinite alternate;
}
@keyframes eqBounce {
  from { height: 4px; opacity: .35; }
  to   { height: 32px; opacity: 1; }
}

/* ─── Social row + íconos debajo de JAYCEE ─── */
.hero-social-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  animation: fadeUp .8s 1.6s ease both;
  margin-top: 2px;    /* mínimo — casi pegado a JAYCEE */
}

/* Cada plataforma es una columna: texto arriba, ícono abajo */
.hsr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.hsr-link {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: 3px;
  color: rgba(244,244,240,.38);
  transition: color .25s;
  white-space: nowrap;
}
.hsr-link:hover { color: var(--white); }

/* El punto separador se centra verticalmente respecto al texto */
.hsr-dot {
  color: var(--grey-dark);
  font-size: .45rem;
  padding-top: 3px;          /* alinea visualmente con el texto */
  align-self: flex-start;
}

/* Ícono: mismo color sutil que el texto, se ilumina en hover del item */
.hsr-icon {
  width: 14px;
  height: 14px;
  color: rgba(244,244,240,.28);
  transition: color .25s;
  flex-shrink: 0;
}
.hsr-item:hover .hsr-icon  { color: rgba(244,244,240,.75); }
.hsr-item:hover .hsr-link  { color: var(--white); }

/* ─── Scroll indicator ─── */
.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp .8s 1.8s ease both;
}
.hs-mouse {
  width: 18px; height: 28px;
  border: 1.5px solid rgba(244,244,240,.2);
  border-radius: 9px;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.hs-wheel {
  width: 2px; height: 6px;
  border-radius: 2px;
  background: var(--grey);
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.hs-label {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: 4px;
  color: rgba(244,244,240,.25);
}

/* ─────────────────────────────────────────────
   MARQUEE — ticker superior
───────────────────────────────────────────── */
.marquee-track {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--grey-dark);
  border-bottom: 1px solid var(--grey-dark);
  background: var(--black);
  padding: 14px 0;
  z-index: 3;
}

.marquee-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marqueeScroll 24s linear infinite;
  width: max-content;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-inner:hover { animation-play-state: paused; }

.mq-item {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 4px;
  color: var(--grey);
  padding: 0 20px;
  transition: color .25s;
}
.mq-item:hover { color: var(--white); }
.mq-item em {
  font-style: normal;
  color: var(--red);
  margin-left: 8px;
}

/* ─────────────────────────────────────────────
   SECCIONES — GENERALES
───────────────────────────────────────────── */
.section { padding: 100px 0; position: relative; }

.section-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 4px;
  color: var(--green-mid);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 7rem);
  letter-spacing: 6px;
  line-height: 1;
  margin-bottom: 60px;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.visible { opacity: 1; transform: none; }

/* Animaciones base */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────
   COMING SOON — 2 columnas: video + foto
   La técnica clave para los bordes es mask-image
   con un gradiente radial. En lugar de superponer
   una capa negra encima de la imagen, el mask hace
   que los píxeles de los bordes sean directamente
   transparentes, dejando que el negro del fondo del
   sitio "respire" a través de ellos de forma orgánica.
───────────────────────────────────────────── */
.music-section { background: var(--black); }

.cs-header {
  margin-bottom: 48px;
}

/* Grid de 2 columnas simétricas con espacio generoso */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Cada card es solo un contenedor relativo —
   no tiene borde propio porque los bordes están
   disueltos por el mask-image del media-wrap */
.cs-card {
  position: relative;
  transition: transform .4s var(--ease);
}
.cs-card:hover { transform: translateY(-6px); }

/* El wrap es quien aplica el mask-image.
   La máscara es un gradiente elíptico radial:
   — negro opaco (visible) en el centro → 50%
   — negro semitransparente → 70%
   — transparente (invisible) en los bordes → 100%
   Resultado: la imagen se ve perfecta en el centro
   y se disuelve suavemente en el negro en los bordes,
   sin ningún corte ni borde visible. */
.cs-media-wrap {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;

  /* Safari necesita el prefijo -webkit- */
  -webkit-mask-image: radial-gradient(
    ellipse 88% 85% at 50% 50%,
    black          50%,
    rgba(0,0,0,.6) 70%,
    transparent    100%
  );
  mask-image: radial-gradient(
    ellipse 88% 85% at 50% 50%,
    black          50%,
    rgba(0,0,0,.6) 70%,
    transparent    100%
  );
}

/* El video llena todo el wrap manteniendo proporciones */
.cs-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* La foto llena todo el wrap sin deformarse */
.cs-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Viñeta interior extra muy sutil — oscurece levemente
   el interior para dar profundidad cinematográfica */
.cs-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent    40%,
    rgba(6,6,8,.18) 100%
  );
  pointer-events: none;
}

@media (max-width: 700px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   LIVE SETS — cards de miniatura YouTube
   Enfoque thumbnail en vez de iframe: siempre
   funciona sin importar la config del video.
───────────────────────────────────────────── */
.live-sets-section { background: var(--black); }

.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card principal: borde muy sutil, esquinas redondeadas, fondo negro */
.yt-card {
  background: var(--black);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.yt-card:hover {
  border-color: rgba(217,31,31,.4);
  box-shadow:
    0 0 0 1px rgba(217,31,31,.1),
    0 24px 64px rgba(0,0,0,.8),
    0 0 50px rgba(217,31,31,.07);
  transform: translateY(-6px);
}

/* El enlace envuelve toda la miniatura y es invisible por sí solo */
.yt-thumb-link {
  display: block;
  text-decoration: none;
}

/* Miniatura con proporción 16:9 usando el truco del padding-top.
   La imagen de fondo es el thumbnail de YouTube cargado desde sus CDNs
   públicos — sin iframe, sin JS de YouTube, sin restricciones. */
.yt-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;            /* 9 ÷ 16 × 100 = 56.25% → ratio 16:9 exacto */
  background-size: cover;
  background-position: center;
  background-color: #111;         /* color de espera mientras carga la imagen */
  overflow: hidden;
}

/* Overlay oscuro que se aclara al hover para dar feedback visual */
.yt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  transition: background .35s;
}
.yt-thumb-link:hover .yt-overlay { background: rgba(0,0,0,.2); }

/* Botón de play: círculo rojo centrado, igual al estilo de YouTube.
   Escala suavemente en hover para invitar al clic. */
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(217,31,31,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 0 8px rgba(217,31,31,.15), 0 4px 24px rgba(0,0,0,.5);
  transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.yt-play svg { margin-left: 4px; } /* compensa visualmente el triángulo */
.yt-thumb-link:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--red);
  box-shadow: 0 0 0 12px rgba(217,31,31,.2), 0 8px 32px rgba(0,0,0,.6);
}

/* Badge "▶ YOUTUBE" en esquina inferior izquierda */
.yt-badge {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.55);
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Footer: número del set a la izquierda, link a la derecha */
.yt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.yt-card-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: rgba(255,255,255,.12);
  line-height: 1;
  transition: color .3s;
}
.yt-card:hover .yt-card-num { color: rgba(217,31,31,.45); }

.yt-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--grey);
  transition: color .25s, gap .25s;
}
.yt-card-link:hover { color: var(--white); gap: 10px; }

@media (max-width: 900px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .yt-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   BIO — Pantalla completa
───────────────────────────────────────────── */
.bio-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Lado foto */
.bio-photo-side {
  position: relative;
  background: var(--black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Avatar placeholder */
.bio-photo-placeholder {
  position: relative;
  width: 260px; height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.bpp-initials {
  font-family: var(--font-display);
  font-size: 5rem;
  letter-spacing: 6px;
  color: var(--red);
  text-shadow: 0 0 30px var(--red-glow);
  position: relative;
  z-index: 3;
}
.bpp-rings { position: absolute; inset: 0; }
.bpp-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(217,31,31,.15);
  animation: spinRing 15s linear infinite;
}
.bpp-ring--2 {
  inset: -40px;
  border-color: rgba(26,100,40,.12);
  animation-duration: 25s;
  animation-direction: reverse;
}
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* Strip de fotos lateral (auto-scroll vertical) */
.bio-photo-strip {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  overflow: hidden;
  opacity: .3;
}
.bps-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: stripScrollV 20s linear infinite;
}
@keyframes stripScrollV {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.bps-img {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 3/4;
  border-radius: 2px;
}
.bps-img--1 { background: linear-gradient(160deg, #1a0008, #300010); }
.bps-img--2 { background: linear-gradient(160deg, #00101a, #001830); }
.bps-img--3 { background: linear-gradient(160deg, #0a1a00, #102800); }
.bps-img--4 { background: linear-gradient(160deg, #1a0010, #280020); }

/* Lado texto */
.bio-text-side {
  background: var(--black);
  display: flex;
  align-items: center;
  border-left: 1px solid var(--grey-dark);
}
.bio-inner {
  padding: 80px 60px;
  max-width: 580px;
}

.bio-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.bio-title {
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: 6px;
  line-height: 1;
}

/* Toggle idioma */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--grey-dark);
  padding: 4px 12px;
  border-radius: 50px;
}
.lt-btn {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--grey);
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .2s, background .2s;
}
.lt-btn.active {
  color: var(--white);
  background: rgba(217,31,31,.15);
}
.lt-sep { color: var(--grey-dark); font-size: .7rem; }

/* Textos bio */
.bio-text p {
  color: var(--grey);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 16px;
}
.bio-text--hidden { display: none; }

/* Stats de artista */
.bio-stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--grey-dark);
  border-radius: 4px;
  overflow: hidden;
}
.bs-item {
  flex: 1;
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid var(--grey-dark);
}
.bs-item:last-child { border-right: none; }
.bs-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: var(--red);
  line-height: 1;
}
.bs-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: 2px;
  color: var(--grey);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .bio-section { grid-template-columns: 1fr; }
  .bio-photo-side { min-height: 50vh; }
  .bio-inner { padding: 48px 32px; }
}

/* ─────────────────────────────────────────────
   GALERÍA — Auto-scroll horizontal
───────────────────────────────────────────── */
.gallery-strip-wrap {
  overflow: hidden;
  border-top: 1px solid var(--grey-dark);
  border-bottom: 1px solid var(--grey-dark);
  background: var(--black);
}
.gallery-strip { overflow: hidden; padding: 20px 0; }
.gs-inner {
  display: flex;
  gap: 12px;
  animation: galleryScroll 30s linear infinite;
  width: max-content;
}
.gs-inner:hover { animation-play-state: paused; }

@keyframes galleryScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.gs-img {
  width: 200px; height: 280px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  transition: transform .4s var(--ease), filter .4s;
  filter: grayscale(40%) brightness(.8);
}
.gs-img:hover { transform: scale(1.03); filter: grayscale(0) brightness(1); }

/* Colores placeholder de las fotos */
.gs-img--1 { background: linear-gradient(160deg, #0d0005, #1a0010, #0a0008); }
.gs-img--2 { background: linear-gradient(160deg, #00050d, #000a1a, #000510); }
.gs-img--3 { background: linear-gradient(160deg, #050d00, #0a1a00, #051000); }
.gs-img--4 { background: linear-gradient(160deg, #0d0a00, #1a1200, #100800); }
.gs-img--5 { background: linear-gradient(160deg, #05000d, #0a001a, #050010); }
.gs-img--6 { background: linear-gradient(160deg, #0d0005, #200010, #150008); }

/* ─────────────────────────────────────────────
   REDES SOCIALES
───────────────────────────────────────────── */
.social-section { background: var(--black); }

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.social-card {
  position: relative;
  background: var(--black);
  border: 1px solid var(--grey-dark);
  border-radius: 4px;
  padding: 32px 28px;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-card:hover { transform: translateY(-6px); }

/* Barra de color bottom */
.sc-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.social-card:hover .sc-bar { transform: scaleX(1); }

/* Colores por plataforma */
.sc-spotify:hover { box-shadow: 0 12px 40px rgba(30,215,96,.08); }
.sc-spotify .sc-bar { background: #1ED760; }
.sc-spotify .sc-icon { color: #1ED760; }
.sc-spotify .sc-stat { color: #1ED760; }

.sc-soundcloud:hover { box-shadow: 0 12px 40px rgba(255,80,0,.08); }
.sc-soundcloud .sc-bar { background: #FF5500; }
.sc-soundcloud .sc-icon { color: #FF5500; }
.sc-soundcloud .sc-stat { color: #FF5500; }

.sc-beatport:hover { box-shadow: 0 12px 40px rgba(0,206,79,.08); }
.sc-beatport .sc-bar { background: #00CE4F; }
.sc-beatport .sc-icon { color: #00CE4F; }
.sc-beatport .sc-stat { color: #00CE4F; }

.sc-instagram:hover { box-shadow: 0 12px 40px rgba(225,48,108,.08); }
.sc-instagram .sc-bar { background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); }
.sc-instagram .sc-icon { color: #E1306C; }
.sc-instagram .sc-stat { color: #E1306C; }

.sc-tiktok:hover { box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.sc-tiktok .sc-bar { background: linear-gradient(to right, #69C9D0, #EE1D52); }
.sc-tiktok .sc-icon { color: var(--white); }
.sc-tiktok .sc-stat { color: var(--white); }

.sc-youtube:hover { box-shadow: 0 12px 40px rgba(255,0,0,.08); }
.sc-youtube .sc-bar { background: #FF0000; }
.sc-youtube .sc-icon { color: #FF0000; }
.sc-youtube .sc-stat { color: #FF0000; }

/* Contenido de las cards */
.sc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sc-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.sc-icon svg { width: 100%; height: 100%; }
.sc-platform {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--grey);
  text-transform: uppercase;
}
.sc-stat {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 3px;
  line-height: 1;
}
.sc-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--grey);
}
.sc-handle {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--grey-dark);
  margin-top: 8px;
}

@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .social-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   BOOKING / CONTACTO
───────────────────────────────────────────── */
.booking-section { background: var(--black); }

.booking-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 60px;
}

/* Presskit button */
.presskit-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 24px 32px;
  border: 1px solid var(--grey-dark);
  border-radius: 4px;
  background: var(--black);
  transition: border-color .25s, box-shadow .25s;
  cursor: pointer;
  gap: 4px;
}
.presskit-btn:hover {
  border-color: var(--red);
  box-shadow: 0 0 32px rgba(217,31,31,.1);
}
.pk-year {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 4px;
  color: var(--red);
  line-height: 1;
}
.pk-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 4px;
  color: var(--white);
}
.pk-sub {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--grey);
}
.pk-arrow {
  font-size: 1.5rem;
  color: var(--red);
  margin-top: 4px;
  transition: transform .25s;
}
.presskit-btn:hover .pk-arrow { transform: translateY(4px); }

/* Regiones de booking (igual que Jay de Lys) */
.booking-regions {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--grey-dark);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 80px;
}
.br-item {
  flex: 1;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .25s;
}
.br-item:hover { background: rgba(255,255,255,.02); }
.br-divider {
  width: 1px;
  background: var(--grey-dark);
  flex-shrink: 0;
}
.br-region {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 4px;
  color: var(--green-mid);
  text-transform: uppercase;
}
.br-email {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--white);
  word-break: break-all;
  transition: color .25s;
}
.br-email:hover { color: var(--red); }
.br-copy {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--grey);
  padding: 6px 0;
  border-bottom: 1px solid var(--grey-dark);
  width: fit-content;
  transition: color .25s, border-color .25s;
}
.br-copy:hover { color: var(--white); border-color: var(--white); }

@media (max-width: 700px) {
  .booking-regions { flex-direction: column; }
  .br-divider { width: 100%; height: 1px; }
  .br-item { padding: 28px; }
}

/* Newsletter */
.newsletter-block {
  text-align: center;
  padding: 60px 0 0;
  border-top: 1px solid var(--grey-dark);
}
.newsletter-title {
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: 6px;
  margin-bottom: 12px;
}
.newsletter-sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2px;
  color: var(--grey);
  margin-bottom: 32px;
}
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid var(--grey-dark);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .25s;
}
.newsletter-form:focus-within { border-color: var(--red); }
.nl-input {
  flex: 1;
  background: var(--black);
  border: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: 1px;
  padding: 14px 20px;
  outline: none;
}
.nl-input::placeholder { color: var(--grey); }
.nl-btn {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 14px 24px;
  transition: background .25s;
  flex-shrink: 0;
}
.nl-btn:hover { background: var(--red-dark); }
.nl-success {
  display: none;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 2px;
  color: var(--green-mid);
  margin-top: 16px;
  animation: fadeUp .4s ease;
}
.nl-success.visible { display: block; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer {
  background: var(--black);
  border-top: 1px solid var(--grey-dark);
  padding: 48px 0 32px;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: 8px;
  color: var(--white);
  text-shadow: 0 0 20px var(--red-glow);
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 3px;
  color: var(--grey);
  transition: color .25s;
}
.footer-links a:hover { color: var(--white); }
.footer-socials {
  display: flex;
  gap: 16px;
}
.footer-copy {
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: 1px;
  color: var(--grey-dark);
  flex-wrap: wrap;
  justify-content: center;
}
.footer-back {
  color: var(--grey);
  transition: color .25s;
}
.footer-back:hover { color: var(--red); }