/* ══════════════════════════════════════════════════════════════════════════
   MODAL MÚSICA
══════════════════════════════════════════════════════════════════════════ */

#modal-musica{align-items:flex-start;overflow-y:auto;padding:40px 20px;}

.mus-box{
  max-width:980px!important;width:96vw!important;padding:0!important;
  background:#080808;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);position:relative;
  contain:layout style;
}
.mus-box::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px;pointer-events:none;z-index:0;border-radius:20px;opacity:.6;
}
.mus-box > *{position:relative;z-index:1;}

.mus-artistas{display:grid;grid-template-columns:1fr 1fr;gap:0;}
@media (max-width:680px){.mus-artistas{grid-template-columns:1fr;}}

.mus-artista{position:relative;overflow:hidden;min-height:520px;display:flex;flex-direction:column;}
.mus-artista + .mus-artista{border-left:1px solid rgba(255,255,255,.05);}
@media (max-width:680px){
  .mus-artista + .mus-artista{border-left:none;border-top:1px solid rgba(255,255,255,.05);}
  .mus-artista{min-height:480px;}
}

.mus-artista-bg{
  position:absolute;inset:0;background-size:cover;background-position:center top;
  filter:brightness(.18) saturate(.6);transition:filter .6s ease;
}
.mus-artista:hover .mus-artista-bg{filter:brightness(.25) saturate(.8);}
.mus-artista::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,8,8,.1) 0%,rgba(8,8,8,.5) 50%,rgba(8,8,8,.95) 100%);
  pointer-events:none;
}
.mus-artista-content{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:28px 24px 24px;gap:16px;}
.mus-artista-top{flex:1;}
.mus-artista-nombre{font-family:'Playfair Display',serif;font-size:clamp(20px,2.5vw,28px);margin-bottom:10px;line-height:1.1;}
.mus-artista-frase{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;max-width:280px;}
.mus-artista-concierto{margin-top:10px;font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.06em;}

.mus-embed-wrap{border-radius:12px;overflow:hidden;position:relative;}
.mus-embed-wrap iframe{display:block;border-radius:12px;}
.mus-embed-shield{display:none;}
@media (max-width:768px){
  .mus-embed-shield{
    display:block;position:absolute;inset:0;z-index:10;
    background:transparent;border-radius:12px;
  }
}

.mus-tambien-section{padding:24px 36px 32px;border-top:1px solid rgba(255,255,255,.05);}
.mus-tambien-titulo{font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:16px;}
.mus-tambien-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
@media (max-width:600px){
  .mus-tambien-grid{grid-template-columns:1fr;}
  .mus-tambien-section{padding:20px 20px 28px;}
  .mus-tambien-tag{display:none;}
}
.mus-tambien-item{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-radius:8px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);text-decoration:none;
  transition:background .2s,border-color .2s;cursor:pointer;
}
.mus-tambien-item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);}
.mus-tambien-nombre{font-size:12px;color:rgba(255,255,255,.75);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mus-tambien-tag{font-size:10px;color:rgba(255,255,255,.25);white-space:nowrap;}
.mus-tambien-flecha{font-size:11px;color:rgba(255,255,255,.2);flex-shrink:0;transition:color .2s,transform .2s;}
.mus-tambien-item:hover .mus-tambien-flecha{color:rgba(255,255,255,.6);transform:translate(1px,-1px);}

.mus-videos-section{padding:24px 36px 0;border-top:1px solid rgba(255,255,255,.05);}

/* Wrapper con overflow hidden para peek visual */
.mus-videos-outer{
  position:relative;
  /* permite ver el borde de la siguiente tarjeta */
  overflow:hidden;
  margin:0 -36px; /* compensa el padding del padre para ir borde a borde */
  padding:0 36px;
}

/* Flechas de navegación desktop */
.mus-videos-outer::before,
.mus-videos-outer::after{
  content:'';
  position:absolute;top:0;bottom:20px;width:48px;
  pointer-events:none;z-index:2;
}
.mus-videos-outer::before{
  left:0;
  background:linear-gradient(to right,#080808 20%,transparent);
}
.mus-videos-outer::after{
  right:0;
  background:linear-gradient(to left,#080808 20%,transparent);
}

.mus-videos-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:0 0 20px;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.mus-videos-track::-webkit-scrollbar{display:none;}

/* Cada tarjeta muestra peek de la siguiente: ancho < 100% del outer */
.mus-video-card{
  flex-shrink:0;
  width:220px;
  scroll-snap-align:start;
}
.mus-video-card.playing{width:360px;}
.mus-video-card.playing > div:first-child{width:360px;height:202px;}

/* Dots de posición */
.mus-videos-dots{
  display:flex;justify-content:center;gap:5px;
  padding:12px 0 4px;
}
.mus-videos-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .2s,transform .2s;
  cursor:pointer;border:none;padding:0;
}
.mus-videos-dot.activo{
  background:rgba(255,255,255,.7);
  transform:scale(1.3);
}

@media (max-width:600px){
  .mus-videos-section{padding:20px 0 0;}
  .mus-videos-section .mus-tambien-titulo{padding:0 20px 12px;margin-bottom:0;}
  .mus-videos-outer{margin:0;padding:0;}
  .mus-videos-outer::before,.mus-videos-outer::after{display:none;}
  .mus-videos-track{
    gap:0;padding-bottom:16px;width:100%;
    /* Peek: cada card es 85% del ancho, se ve el inicio de la siguiente */
    scroll-padding-left:20px;
  }
  .mus-video-card{
    width:85%;min-width:85%;
    padding-left:20px;box-sizing:border-box;
    scroll-snap-align:start;scroll-snap-stop:always;
  }
  /* Último card con padding derecho para que no quede pegado al borde */
  .mus-video-card:last-child{padding-right:20px;width:calc(85% + 20px);min-width:calc(85% + 20px);}
  .mus-video-card.playing{width:85%;min-width:85%;}
  .mus-video-card.playing > div:first-child{width:100%;height:auto;}
}

.mus-video-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer;background:#1a1a1a;}
.mus-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,filter .3s ease;object-position:center;}
.mus-video-thumb:hover img{transform:scale(1.04);filter:brightness(1.1);}
.mus-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:background .2s;}
.mus-video-play svg{width:36px;height:36px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));transition:transform .2s;}
.mus-video-thumb:hover .mus-video-play{background:rgba(0,0,0,.15);}
.mus-video-thumb:hover .mus-video-play svg{transform:scale(1.12);}
.mus-video-titulo{font-size:12px;color:rgba(255,255,255,.75);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mus-video-artista{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}