/* ======================= css/styles.css ======================= */

* { box-sizing: border-box }
html { background-color:#000 }
body { margin: 0; padding: 0; font-family: Regular; }
p { line-height:27px; }
ul { list-style-type: none; margin: 0; padding: 0 }

/* FUENTES ------------------------------------------------------------------------ */
@font-face {
  font-family: Regular;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Nexa-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: Bold;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Nexa-Heavy.ttf') format('truetype');
}

@font-face {
  font-family: Wire;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Nexa-ExtraLight.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 { font-family: Bold; }

/* ============================================================= */
/* =================== VARIABLES / PALETA ======================= */
/* ============================================================= */

:root{
  /* fondo estilo portada (oscuro + rojo) */
  --bg-top:    #000000;
  --bg-mid:    #120508;
  --glow-left: rgba(255, 30, 80, .12);
  --glow-right:rgba(255, 70, 0,  .08);

  /* accent para hover (como la portada) */
  --accent:    #ff2a5a;
  --accent2:   #ff4a00;
}

/* ============================================================= */
/* ====================== HEADER (Desktop) ===================== */
/* ============================================================= */

#header{
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 80px;

  display: flex;
  align-items: center;
  overflow: hidden;

  /* necesario para pseudo-elementos */
  position: sticky;
  /* sticky + relative (ambos) */
  position: sticky;
  /* 👇 lo que importa: */
  position: sticky;
  /* ok */
  /* en CSS no se “suman”, así que lo dejamos limpio: */
  position: sticky;
}
#header{ position: sticky; top:0; z-index:1000; }
#header{ position: sticky; }
#header{ position: sticky; }

/* ✅ versión limpia definitiva del header (sin duplicados) */
#header{
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  position: sticky; /* ok */
  /* para ::before/::after */
  position: sticky;
  /* realmente: */
  position: sticky;
  /* FIN — dejamos el que sirve: */
  position: sticky;
  /* y agregamos relative con otra regla para no romper sticky: */
}
#header{ position: sticky; }
#header{ position: relative; }

/* Fundido suave del header hacia el body (captura 2) */
#header::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-36px;
  height:36px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.22) 55%,
    rgba(0,0,0,0.00) 100%
  );
  pointer-events:none;
}

/* Glow finito abajo del header */
#header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 42, 90, 0.22) 35%,
    rgba(255, 74, 0, 0.16) 65%,
    transparent 100%
  );
  pointer-events:none;
}

.anchoHeader{
  width:95%;
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
}

.header-grid{
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr minmax(120px, 220px);
  align-items: center;
  gap: 12px;
}

/* columnas */
.col-left  { justify-self: start; min-width: 220px; }
.col-center{ justify-self: center; min-width: 0; }
.col-right { justify-self: end; min-width: 120px; }

/* Logo desktop */
.logo-header{
  display:block;
  height: clamp(42px, 4vw, 56px);
  width: auto;
  max-width: 360px;
  object-fit: contain;
  cursor:pointer;
}
.logo-header-mobile{ display:none !important; }

/* Botonera desktop */
#botoneraHeader{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.4vw, 24px);
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.botonHeader{
  color:#FFF;
  font-family:Bold;
  font-size: clamp(16px, 1.25vw, 24px);
  letter-spacing: clamp(1px, .10vw, 2px);
  text-decoration:none;
  cursor:pointer;
}

/* ✅ hovers con color portada */
#botoneraHeader a:hover{ color: var(--accent); }
.botonHeaderOver{ color: var(--accent); }

/* Redes desktop */
#redesSocialesHeader{
  display: inline-flex;
  gap: clamp(8px, 1vw, 14px);
  justify-content: flex-end;
  align-items: center;
}
#redesSocialesHeader br{ display:none; }
#redesSocialesHeader .botonSocial{
  color:whitesmoke;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-decoration:none;
}
#redesSocialesHeader .botonSocial:hover{ color: var(--accent); }
#redesSocialesHeader .botonSocial i{
  display:block;
  font-size: clamp(16px, 1.2vw, 22px);
  line-height:1;
  text-decoration:none;
}

/* limpiar subrayados */
#redesSocialesHeader a,
#redesSocialesHeader a:link,
#redesSocialesHeader a:visited,
#redesSocialesHeader a:hover,
#redesSocialesHeader a:focus,
#redesSocialesHeader a:active{
  text-decoration:none !important;
  border:0 !important;
  outline:0;
}

/* Pantallas medianas */
@media (max-width: 1400px){
  .logo-header{ max-width: 300px; }
  #botoneraHeader{ gap: 14px; }
  .botonHeader{ font-size: 18px; }
}
@media (max-width: 1280px){
  .logo-header{ max-width: 260px; }
  #botoneraHeader{ gap: 12px; }
  .botonHeader{ font-size: 16px; }
}

/* ===== Botones SVG abrir/cerrar menú (mobile) ===== */
.icon-btn{
  appearance:none;
  background:transparent;
  border:0;
  padding:4px;
  margin:0;
  width:38px;
  height:38px;
  color:#fff;
  display:none;
  position:fixed;
  top:8px;
  right:8px;
  z-index:1101;
  cursor:pointer;
}
.icon-btn svg{ width:100%; height:100%; display:block; fill:currentColor; }
.icon-btn:hover, .icon-btn:focus{ color: var(--accent); outline:none; }
.close-inside{ position:absolute; top:16px; right:16px; z-index:1102; }

/* ============================================================= */
/* =================== FONDOS / SECCIONES ======================= */
/* ============================================================= */

#bio, #tracks, #music, #gallery, #gigs, #contact{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(1200px 320px at -10% 20%, var(--glow-left), transparent 60%),
    radial-gradient(900px 280px at 110% 60%, var(--glow-right), transparent 65%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 60%, var(--bg-top) 100%) !important;
  background-color: var(--bg-top) !important;
  overflow: hidden;
}
#bio::after, #tracks::after, #music::after, #gallery::after, #gigs::after{ content:none !important; }

/* ============================================================= */
/* ====================== CONTENIDO GENERAL ==================== */
/* ============================================================= */

.portada { width:100%; height:auto; max-width:100%; background-repeat:no-repeat }
.content { width:80%; margin:auto }

.galleria-thumbnails { display:inline-flex; width:auto !important; }
.galleria-image-thumb { width:100% !important; }

.tituloPrimaryColor { font-family:Bold; font-size:2.8em; letter-spacing:15px; color:#FFF; margin:0 }
.textoPrimaryColor  { font-family:Regular; font-size:1.313em; letter-spacing:1px; color:#FFF }

/* BIO */
#bio{
  text-align:center;
  padding:80px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#bio .content{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.botonPressKit{
  font-family:Wire;
  font-size:1em;
  text-align:center;
  letter-spacing:2px;
  padding:8px 14px;
  color:#FFF;
  background-color:transparent;
  border:solid 2px #FFF;
  cursor:pointer;
}
.botonPressKit:hover{
  color: var(--accent);
  border:solid 2px var(--accent);
}

/* BANDERAS */
ul#banderas{
  margin-bottom:15%;
  display:inline-flex;
  flex-wrap:nowrap;
  flex-direction:row;
}

/* BIO: al centrar verticalmente, evitamos “aire” extra abajo */
#bio ul#banderas{
  margin-bottom: 0;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* TRACKS */
#tracks{ text-align:center; padding:80px 0; margin:auto; }
#trackSocial{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 16px;
}
iframe#playerSpotify{
  display:block;
  opacity: 1;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Cards embeds (Spotify/SoundCloud) */
.tl-embeds-grid{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tl-embed-single{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.tl-embed-card{
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

.tl-embed-card--single{
  border-radius: 18px;
}

.tl-embed-title{
  font-family: Regular;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-embed-card iframe{
  display: block;
  width: 100%;
  background: transparent;
}

/* MUSIC */
#music{ text-align:center; padding:80px 0; }
iframe#playerSpotify, iframe#playerSoundcloud{
  display:block;
  opacity: 1;
  border: 0;
  border-radius: 0;
}

/* Players únicos (sin credenciales): que ocupen más alto de sección */
#tracks #playerSpotify{
  width: 100%;
  max-width: 1100px;
  height: clamp(520px, 70svh, 820px);
  margin: 0 auto;
}
#music #playerSoundcloud{
  width: 100%;
  max-width: 1100px;
  height: clamp(420px, 65svh, 780px);
  margin: 0 auto;
}
.bannerMobile{ display:none !important; }
img.bannerMetro{ width:100% !important; }

/* GALLERY */
div#gallery{ text-align:center; padding:80px 0 0; }
.galleria{ width:100%; height:467px; background:transparent !important; }
.galleria-theme-classic{ background:transparent !important; }
.galleria-theme-classic .galleria-info-link{ display:none !important; }
.galleria-theme-classic .galleria-info{ display:none !important; }
.galleria-theme-classic .galleria-counter{ display:none !important; }

/* ============================================================= */
/* =================== GALERÍA (estilo ejemplo) ================= */
/* ============================================================= */

.tl-gallery{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Carril horizontal “pinned” */
.tl-gallery-pin{
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
  z-index: 50;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.tl-gallery-pin::before{
  content: none;
}

.tl-gallery-track{
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 0 24px;
  height: 100%;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.tl-gallery-card{
  margin: 0;
  flex: 0 0 auto;
  width: min(54vw, 820px);
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
}

.tl-gallery-card-inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  height: 100%;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fade por máscara (evita overlay), pero sin ir a 0 para que no “cante” el fondo */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, #000 12%, #000 88%, rgba(0,0,0,0.35) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, #000 12%, #000 88%, rgba(0,0,0,0.35) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media only screen and (max-width: 1166px){
  .tl-gallery-card{
    width: 86vw;
  }
  .tl-gallery-track{
    gap: 46px;
  }
  .tl-gallery-card-inner{
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, #000 10%, #000 90%, rgba(0,0,0,0.45) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, #000 10%, #000 90%, rgba(0,0,0,0.45) 100%);
  }
}

/* (grid removido: volvimos a 2 carretes) */

.tl-gallery-card img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: contrast(1.05);
}

.tl-gallery-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.tl-gallery-fade-left{
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 100%);
}
.tl-gallery-fade-right{
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 100%);
}

@media (min-width: 992px){
  .tl-gallery-pin{ min-height: 100vh; }
  .tl-gallery-card{ border-radius: 26px; }
}


/* ============================================================= */
/* =========================== GIGS ============================ */
/* ============================================================= */

#gigs{ text-align:center; padding:80px 0; }

#gigs-videos{
  width:80%;
  margin:0 auto;
}

/* Player */
#video-container{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
#player{ width:100%; height:100%; }

/* Thumbs */
#playlist-container{ margin-top:14px; }

#playlist{
  list-style:none;
  padding:10px;
  margin:0;

  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;

  justify-content: center;
  flex-wrap: nowrap;

  border-radius:12px;
  background:rgba(255,255,255,0.02);
}

#playlist::-webkit-scrollbar{ height:8px; }
#playlist::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:10px; }
#playlist::-webkit-scrollbar-track{ background:rgba(255,255,255,0.05); border-radius:10px; }

#playlist li{
  flex:0 0 auto;
  width:70px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  opacity:0.65;
  cursor:pointer;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#playlist li:hover{
  transform: translateY(-2px);
  opacity:0.95;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 25px rgba(0,0,0,0.30);
}
#playlist li.playing{
  opacity:1;
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset;
}

.yt-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 1 / 1;
}

/* MOBILE: player más vertical */
@media (max-width: 980px){
  #gigs-videos{ width:92%; }
  #video-container{
    aspect-ratio: 10 / 16;
    border-radius: 18px;
  }
}
@media (max-width: 520px){
  #video-container{ aspect-ratio: 9 / 16; }
}

/* ============================================================= */
/* ========================== CONTACT ========================== */
/* ============================================================= */

#contact{ text-align:center; padding:80px 0; }
.textoContactos{ font-family:Regular; font-size:1.5em; letter-spacing:10px; color:#FFF; }
.botonMail{ font-family:Regular; font-size:1.3em; color:#FFF; letter-spacing:4px; text-decoration:none; }
.botonMail:hover{ color: var(--accent); }

ul#redesSocialesFooter{
  margin-bottom:15%;
  display:inline-flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:center;
}
.botonSocialFooter{
  margin:0 10px;
  cursor:pointer;
  color:whitesmoke;
  font-size:140%;
  display:block;
}
.botonSocialFooter:hover{ color: var(--accent); }

.botBeatport{
  position:relative;
  display:inline-block;
}
.botBeatport .botBeatportOn{ display:none; }
.botBeatport:hover .botBeatportOff{ display:none; }
.botBeatport:hover .botBeatportOn{ display:inline; }

/* ============================================================= */
/* =========================== MOBILE =========================== */
/* ============================================================= */

@media only screen and (max-width: 1166px){
  #header{ height:72px; } /* un pelín más bajo para que no “coma” pantalla */

  .content{ width:90%; }

  /* mostrar hamburguesa */
  #btn-menu-open{ display:inline-block; }

  /* redes fuera */
  #redesSocialesHeader{ display:none; }

  /* header grid a 1 columna para centrar logo (captura 1) */
  .header-grid{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .col-left{
    justify-self: center;
    min-width: 0;
  }

  /* Logo mobile (centrado + no gigante) */
  .logo-header{ display:none !important; }
  .logo-header-mobile{
    display:block !important;
    height: 42px;
    width: auto !important;
    max-width: 72vw;        /* ✅ no se va de ancho */
    object-fit: contain;
    margin: 0 auto;
  }

  /* overlay menú */
  #botoneraHeader{
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    padding:80px 30px 30px 30px;
    background-color:rgba(0,0,0,.98);
    margin:0;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:18px;
    z-index:1100;
    white-space:normal;
    overflow:auto;
  }

  /* secciones a 100% */
  div#portada, div#bio, div#tracks, div#music, div#gallery, div#gigs, div#contact{
    width:100% !important;
  }

  .tituloPrimaryColor{ letter-spacing:5px; }
  .tl-embeds-grid{
    grid-template-columns: 1fr;
  }
  ul#banderas{
    margin-bottom:15%;
    display:inline-flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:center;
    align-items:center;
  }
}

/* ============================================================= */
/* ====================== RESET / ADECUACIONES ================= */
/* ============================================================= */

html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figure { margin: 1em 40px; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, select { text-transform: none; }


/* ================= FIX MENU MOBILE (TOPO) ================= */
@media only screen and (max-width: 1166px){

  /* Evita que el header “recorte” el overlay */
  #header{
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ====== BOTÓN ABRIR MENÚ (compat: imagen y/o svg) ====== */
  /* Imagen vieja */
  #boton-menu-cel{
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 13000;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }

  /* Botón nuevo (referencia) */
  #btn-menu-open,
  .icon-btn{
    display: inline-flex !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 13000;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }

  /* ====== OVERLAY MENÚ ====== */
  #botoneraHeader{
    position: fixed !important;
    inset: 0;                 /* top/right/bottom/left:0 */
    z-index: 12999 !important;
  }

  /* Si jQuery lo abre con display:block, lo convertimos a flex */
  #botoneraHeader[style*="display: block"]{
    display: flex !important;
  }

  /* ====== BOTÓN CERRAR (compat) ====== */
  #boton-menu-cel-close{
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 13001;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }

  #btn-menu-close,
  .close-inside{
    display: inline-flex !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 13001;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }
}
/* ============ FIX: abrir/cerrar mobile sin superposición ============ */
@media only screen and (max-width: 1166px){

  /* Menú ABIERTO => escondé el botón de abrir */
  #botoneraHeader[style*="display: block"] ~ #boton-menu-cel,
  #botoneraHeader[style*="display: flex"]  ~ #boton-menu-cel{
    display: none !important;
  }

  /* Menú ABIERTO => mostrás el botón de cerrar bien arriba */
  #botoneraHeader[style*="display: block"] #boton-menu-cel-close,
  #botoneraHeader[style*="display: flex"]  #boton-menu-cel-close{
    display: block !important;
    position: fixed !important;
    top: 10px;
    right: 10px;
    z-index: 13002 !important;
    width: 38px;
    height: 38px;
    cursor: pointer;
  }

  /* Menú CERRADO => el botón cerrar no debe verse */
  #botoneraHeader{
    /* por defecto (cerrado) */
  }
  #botoneraHeader #boton-menu-cel-close{
    display: none;
  }

  /* Overlay siempre por debajo del botón cerrar */
  #botoneraHeader{
    z-index: 13000 !important;
  }
  #boton-menu-cel{
    z-index: 13001 !important;
  }
}