/* ============================================================
   NOBANDAS — sistema de diseño (fiel al wireframe hi-fi)
   Negro + naranja, plano, tipografía redondeada bold.
   ============================================================ */

:root{
  --bg:        #0a0a0a;
  --bg-elev:   #101010;
  --bg-card:   #141414;
  --placeholder:#c7c7c7;
  --line:      #2b2b2b;
  --line-soft: #1e1e1e;

  --orange:    #ff5722;
  --orange-2:  #ff7a47;

  --text:      #f5f5f5;
  --text-dim:  #a8a8a8;
  --text-faint:#6f6f6f;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --maxw: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

::selection{ background:var(--orange); color:#0a0a0a; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0;
  color:var(--text);
}
p{ color:var(--text-dim); margin:0; font-size:15.5px; }
.accent{ color:var(--orange); }

/* ---------- logo ---------- */
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:42px; height:42px; min-width:42px;
  background:var(--orange);
  border-radius:9px;
  position:relative;
  overflow:hidden;
}
.logo-mark::before,.logo-mark::after{
  content:""; position:absolute; width:52%; height:52%; background:#0a0a0a;
}
.logo-mark::before{ top:9%; left:9%; border-radius:0 70% 70% 70%; }
.logo-mark::after{ bottom:9%; right:9%; border-radius:70% 70% 70% 0; }
.logo-text{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  color:var(--orange);
  font-size:19px;
  line-height:1.05;
  letter-spacing:.01em;
}
.logo-text span{ display:block; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:92px;
}
.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-size:15.5px;
  font-weight:400;
  color:var(--text-dim);
  transition:color .2s ease;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a[aria-current="page"]{ color:var(--orange); font-weight:500; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line);
  border-radius:8px; color:var(--text); cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:92px 0 0 0;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    padding:24px 40px;
    gap:0;
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:17px; }
  .nav-toggle{ display:flex; }
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  margin-top:0;
  padding:64px 0 32px;
  background:var(--bg);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:48px;
  padding-bottom:44px;
}
.footer-brand p{ margin-top:18px; max-width:30ch; color:var(--text-dim); font-size:14.5px; }
.footer-col h4{
  font-size:14px; font-weight:700; letter-spacing:.02em;
  color:var(--orange); margin-bottom:18px; text-transform:none;
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:var(--text-dim); font-size:14.5px; transition:color .2s ease; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding-top:26px;
  text-align:center;
  font-size:13.5px;
  color:var(--text-faint);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-sm);
  font-size:14.5px; font-weight:500;
  border:1.5px solid var(--orange);
  background:transparent;
  color:var(--orange);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--orange); color:#0a0a0a; }
.btn-solid{ background:var(--orange); color:#0a0a0a; font-weight:600; }
.btn-solid:hover{ background:var(--orange-2); color:#0a0a0a; }
.btn-block{ width:100%; }

.link-arrow{
  color:var(--orange); font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .2s ease;
}
.link-arrow:hover{ gap:10px; }

/* ---------- page hero ---------- */
.page-hero{ padding:56px 0 48px; border-bottom:1px solid var(--line-soft); }
.page-hero h1{ font-size:clamp(32px,4.4vw,46px); }
.page-hero .lede{ margin-top:16px; max-width:60ch; font-size:16px; }
.crumbs{ font-size:13.5px; color:var(--text-faint); margin-bottom:18px; display:flex; align-items:center; gap:6px; }
.crumbs a{ color:var(--orange); }
.crumbs a:hover{ text-decoration:underline; }
.tagline-row{ font-size:13px; font-weight:600; color:var(--orange); letter-spacing:.01em; margin-bottom:10px; }

/* ---------- section spacing ---------- */
.section{ padding:64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:20px; flex-wrap:wrap; }
.section-title{ font-size:clamp(24px,3vw,32px); }
.section-label{ font-size:20px; text-transform:uppercase; letter-spacing:.01em; }

/* ---------- instagram embed (páginas de conciertos) ---------- */
.ig-embed-container{ display:flex; justify-content:center; width:100%; }
.ig-embed-frame{ border:none; border-radius:var(--radius-md); max-width:450px; box-shadow:0 4px 15px rgba(0,0,0,.5); background:#fff; }

/* ---------- placeholder art ---------- */
.ph{
  background:var(--placeholder);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph .ph-label{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:44px;
  color:#111;
  letter-spacing:.02em;
}
.ph-sm .ph-label{ font-size:24px; }

/* ---------- band / gear cards ---------- */
.band-grid,.gear-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.band-card{
  background:var(--bg-card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.band-card .ph{ aspect-ratio:4/3; border-radius:0; }
.band-img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  display:block; border-radius:0;
}
.gear-card .band-img{ aspect-ratio:16/10; }
.band-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.tagline{ color:var(--orange); font-size:13px; font-weight:600; margin-bottom:10px; }
.band-body h3{ font-size:22px; margin-bottom:10px; }
.band-body p{ font-size:14.5px; margin-bottom:18px; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.avatar-dots{ display:flex; gap:8px; }
.avatar-dots span{ width:26px; height:26px; border-radius:50%; background:#3a3a3a; }

.gear-card .band-body{ padding:22px; }
.gear-card h3{ font-size:20px; margin-bottom:8px; }
.gear-card p{ font-size:14px; margin-bottom:16px; }
.gear-card .card-foot{ justify-content:flex-end; }

/* ---------- iconos sociales ----------
   Reemplaza los onmouseover/onmouseout y estilos inline repetidos por
   una única regla reutilizable con color de marca por plataforma. */
.social-icons{ display:flex; gap:12px; align-items:center; }
.social-icons a{
  color:var(--text); opacity:.6;
  transition:opacity .25s ease, color .25s ease, transform .25s ease;
  display:inline-flex;
}
.social-icons a:hover{ opacity:1; transform:translateY(-2px); }
.social-icons a.ico-yt:hover{ color:#ff0000; }
.social-icons a.ico-sp:hover{ color:#1DB954; }
.social-icons a.ico-ig:hover{ color:#E1306C; }
.social-icons a.ico-tt:hover{ color:#ff0050; }
.social-icons--lg a{ transform:scale(1.15); }
.social-icons--lg a:hover{ transform:scale(1.15) translateY(-2px); }

/* ---------- concerts ---------- */
.concert-list{ display:flex; flex-direction:column; }
.concert-row{
  display:grid;
  grid-template-columns:70px 1fr auto;
  align-items:center;
  gap:26px;
  padding:26px 4px;
  border-bottom:1px solid var(--line-soft);
}
.concert-row:first-child{ border-top:1px solid var(--line-soft); }
.date-block{ text-align:center; }
.date-block .day{ font-size:32px; font-weight:800; color:var(--orange); display:block; line-height:1; }
.date-block .mon{ font-size:12px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.concert-info h3{ font-size:19px; margin-bottom:6px; font-weight:700; text-transform:uppercase; }
.concert-meta{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--text-dim); }

@media (max-width:640px){
  .concert-row{ grid-template-columns:56px 1fr; }
  .concert-row .btn{ grid-column:1/-1; margin-top:8px; }
}

/* ---------- event detail ---------- */
.event-block{ padding:56px 0; border-bottom:1px solid var(--line-soft); }
.event-block:last-child{ border-bottom:none; }
.event-detail{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.event-detail h1{ font-size:clamp(28px,3.6vw,40px); margin-bottom:28px; }
.event-detail .ph{ aspect-ratio:1/1; }
.info-row{ display:flex; gap:16px; margin-bottom:24px; align-items:flex-start; }
.info-icon{ width:24px; height:24px; flex-shrink:0; color:var(--orange); margin-top:2px; }
.info-row .label{ font-weight:700; font-size:15.5px; color:var(--text); display:block; margin-bottom:4px; }
.info-row .value{ font-size:14.5px; color:var(--text-dim); line-height:1.6; }
@media (max-width:880px){ .event-detail{ grid-template-columns:1fr; } .event-detail .ph{ order:-1; aspect-ratio:16/10; } }

/* ---------- mapa musical ---------- */
.mapa-musical-layout{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:30px;
  align-items:start;
}
@media (max-width:920px){
  .mapa-musical-layout{ grid-template-columns:1fr; }
}
.info-card-grid{ display:flex; flex-direction:column; gap:18px; }
.info-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px;
  display:flex; gap:18px; align-items:flex-start;
}
.info-card .icon-circle{
  width:44px; height:44px; flex-shrink:0;
  border:1.5px solid var(--orange);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
}
.info-card h3{ font-size:18px; color:var(--orange); margin-bottom:8px; font-weight:700; }
.info-card p{ font-size:14.5px; }

.map-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; }
.map-layout > div{ display:flex; flex-direction:column; }
.map-tabs{ display:flex; gap:12px; margin-bottom:22px; }
.map-tab{
  padding:12px 24px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  font-size:14.5px; font-weight:500; color:var(--text-dim);
  cursor:pointer; background:transparent; transition:all .2s ease;
}
.map-tab.active{ border-color:var(--orange); color:var(--text); }
.map-panel{ display:grid; grid-template-columns:1fr 200px; gap:24px; align-items:stretch; flex:1; }

/* Contenedor del mapa Leaflet: altura explícita obligatoria (Leaflet no
   renderiza correctamente sin ella) y consistente entre Inicio y la
   página Mapa Musical, con variante --lg para la versión protagonista. */
.leaflet-holder{
  min-height:340px;
  height:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);
}
.leaflet-holder--lg{ min-height:500px; }

.venue-list{ display:flex; flex-direction:column; gap:16px; padding-top:4px; overflow-y:auto; }
.venue-list::-webkit-scrollbar{ width:6px; }
.venue-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.venue-list li{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px; color:var(--text);
  padding:10px 12px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .2s ease, color .2s ease;
}
.venue-list li:hover{ background:var(--bg-card); }
.venue-list li.is-selected{ color:var(--orange); background:var(--bg-card); }

/* Icono de venue: pin en vez del círculo plano, con brillo al hacer
   hover o al seleccionar la ubicación (consistente en Inicio y Mapa Musical). */
.venue-pin{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bg-elev);
  border:1.5px solid var(--line);
  color:var(--text-faint);
  transition:all .25s ease;
}
.venue-pin svg{ width:14px; height:14px; }
.venue-list li:hover .venue-pin{
  border-color:var(--orange);
  color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,87,34,.12);
}
.venue-list li.is-selected .venue-pin{
  background:var(--orange);
  border-color:var(--orange);
  color:#0a0a0a;
  box-shadow:0 0 0 5px rgba(255,87,34,.2);
  transform:scale(1.08);
}

/* Marcador personalizado del mapa Leaflet (reemplaza el pin azul por defecto) */
.venue-marker{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange);
  border:2px solid #0a0a0a;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.venue-marker svg{ width:14px; height:14px; transform:rotate(45deg); color:#0a0a0a; }

@media (max-width:920px){
  .map-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .map-panel{ grid-template-columns:1fr; }
  .venue-list{ max-height:220px; }
  .leaflet-holder{ min-height:280px; }
  .leaflet-holder--lg{ min-height:320px; }
}

/* Columna de la Playlist en Inicio: misma altura que la columna del
   mapa (50/50, sin deformaciones). */
.playlist-embed-wrap{ margin-top:20px; flex:1; display:flex; }
.playlist-embed-wrap iframe{
  width:100%; height:100% !important; min-height:340px;
  border-radius:var(--radius-md); border:none;
}
@media (max-width:640px){ .playlist-embed-wrap iframe{ min-height:280px; } }

/* ---------- playlist ---------- */
.playlist-layout{ display:grid; grid-template-columns:1fr .85fr; gap:56px; align-items:start; }
.playlist-layout .ph{ min-height:420px; }
@media (max-width:920px){ .playlist-layout{ grid-template-columns:1fr; } .playlist-layout .ph{ order:-1; min-height:280px; } }

.spotify-embed iframe,
iframe.spotify-embed{ border-radius:var(--radius-md); width:100%; border:none; }

/* ---------- gear board detail ---------- */
.gear-panel{ border:1.5px solid var(--orange); border-radius:var(--radius-lg); padding:36px; margin-top:8px; }
.gear-panel > .tagline{ font-size:14px; margin-bottom:6px; }
.gear-panel > p{ margin-bottom:28px; }
.member-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.member-grid h4{ color:var(--orange); font-size:16.5px; font-weight:700; margin-bottom:6px; }
.member-role{ font-size:13.5px; color:var(--text-dim); margin-bottom:16px; }
.gear-item-list{ display:flex; flex-direction:column; gap:8px; }
.gear-item-list li{ font-size:14px; color:var(--text-dim); padding-left:14px; position:relative; }
.gear-item-list li::before{ content:"•"; position:absolute; left:0; color:var(--text-dim); }
@media (max-width:760px){ .member-grid{ grid-template-columns:1fr; gap:28px; } }
.gear-empty{ text-align:center; padding:48px 24px; }
.gear-empty h3{ font-size:20px; margin-bottom:10px; }
.gear-empty p{ max-width:44ch; margin:0 auto; }

/* ---------- band profile detail ---------- */
.profile-top p{ font-size:16px; max-width:76ch; margin-top:16px; }
.avatar-row{ display:flex; gap:10px; margin-top:22px; }
.avatar-row span{ width:34px; height:34px; border-radius:50%; background:#3a3a3a; }

.profile-block{ padding:48px 0; border-bottom:1px solid var(--line-soft); }
.profile-block:last-child{ border-bottom:none; }
.profile-block > h2{ font-size:24px; color:var(--orange); margin-bottom:22px; }
.profile-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.profile-split p{ font-size:15px; }
.profile-split .ph{ aspect-ratio:4/3; }
@media (max-width:820px){ .profile-split{ grid-template-columns:1fr; } }

.media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.media-grid .ph{ aspect-ratio:16/10; }
.gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.gallery-grid .ph{ aspect-ratio:16/11; }

/* ---------- sobre nobandas ---------- */
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.about-split h2{ font-size:24px; margin-bottom:18px; }
.about-split p{ font-size:15px; }
.obj-list{ margin-top:40px; }
.obj-list li{ font-size:15px; color:var(--text-dim); padding-left:18px; position:relative; margin-bottom:12px; }
.obj-list li::before{ content:"•"; position:absolute; left:0; color:var(--text-dim); }
@media (max-width:880px){ .about-split{ grid-template-columns:1fr; } }

.contact-form-box{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; margin-top:28px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:14.5px; font-weight:600; color:var(--text); }
.field input,.field textarea{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  color:var(--text);
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  resize:vertical;
  transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus{ border-color:var(--orange); outline:none; }
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown){ border-color:#ff5c5c; }

/* ---------- hero (inicio) ---------- */
.hero{ padding:64px 0 56px; border-bottom:1px solid var(--line-soft); }
.hero h1{ font-size:clamp(34px,5.4vw,52px); max-width:16ch; }
.hero .lede{ margin-top:18px; max-width:52ch; font-size:16.5px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* ---------- SPA routing ---------- */
.route-section[hidden]{ display:none !important; }
.route-section{ animation:routeFade .4s ease both; }
@keyframes routeFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .route-section{ animation:none; } }

/* ---------- responsive grids ---------- */
@media (max-width:920px){
  .band-grid,.gear-grid{ grid-template-columns:repeat(2,1fr); }
  .member-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 22px; }
  .band-grid,.gear-grid,.media-grid,.gallery-grid{ grid-template-columns:1fr; }
  .section{ padding:44px 0; }
}

/* ============================================================
   FIX — menú hamburguesa: artefactos/líneas visuales en móvil
   Causa: el panel fijo se dimensionaba con `inset` (equivalente a
   100vw), y 100vw puede ser más ancho que el viewport visual real
   en navegadores móviles (por la barra de scroll/URL), dejando una
   franja del contenido de fondo asomando durante la transición.
   Fix: ancho explícito en % (relativo al contenedor ya recortado
   por overflow-x:hidden en <html>/<body>) + contención de overflow
   propia del panel.
   ============================================================ */
html,body{ overflow-x:hidden; width:100%; }
.main-nav{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  backface-visibility:hidden;
  will-change:transform;
}
.site-header{ overflow:hidden; }

/* ============================================================
   Mapa Musical — página dedicada (mismo comportamiento que Inicio,
   solo más grande). Reemplaza los estilos inline duplicados.
   ============================================================ */
.map-container-pro{
  display:grid;
  grid-template-columns:1fr 350px;
  gap:30px;
  align-items:start;
}
.map-panel-pro{
  background:var(--bg-card);
  padding:10px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
}
.list-panel-pro .map-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.list-panel-pro .map-tab{ flex:1; }
.list-panel-pro .venue-list{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  height:480px;
  padding:10px;
  margin:0;
}
@media (max-width:768px){
  .map-container-pro{ grid-template-columns:1fr; }
}

/* ============================================================
   Galería — Lightbox rediseñado (misma funcionalidad: abrir,
   anterior/siguiente, "Foto X de N", cerrar con X, clic fuera y ESC)
   ============================================================ */
.gallery-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius-md); cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.gallery-grid img:hover{ transform:scale(1.035); filter:brightness(1.08); }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,8,.92);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  padding:24px;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.lightbox__img{
  /* .lightbox__img usa transform (scale) para su animación de apertura,
     lo que crea su propio stacking context. .lightbox__prev/.lightbox__next
     también usan transform (translateY) para centrarse verticalmente, así
     que también crean stacking context. Sin un z-index explícito, el orden
     de pintado pasa a depender del orden en el DOM: <button prev>,
     <img>, <button next> -> "prev" queda pintado ANTES que la imagen
     (por debajo) y "next" queda pintado DESPUÉS (por encima), aunque
     top/left sean simétricos. El z-index:2 en .lightbox__btn soluciona
     esto para ambos botones por igual. */
  max-width:88vw; max-height:82vh;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:scale(.92);
  opacity:1;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }

.lightbox__btn{
  position:absolute;
  z-index:2; /* Ver nota abajo: los controles deben pintarse siempre por
                encima de .lightbox__img, sin depender del orden en el DOM. */
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(8px);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox__btn:hover{ background:var(--orange); border-color:var(--orange); color:#0a0a0a; transform:translateY(-50%) scale(1.06); }
.lightbox__close{ top:22px; right:22px; }
.lightbox__close:hover{ transform:scale(1.06); }
.lightbox__prev,.lightbox__next{ top:50%; transform:translateY(-50%); }
.lightbox__prev{ left:22px; }
.lightbox__next{ right:22px; }
.lightbox__btn svg{ width:20px; height:20px; }

.lightbox__caption{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:13px; font-weight:500; color:#fff;
  background:rgba(20,20,20,.6);
  backdrop-filter:blur(8px);
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}
@media (max-width:640px){
  .lightbox__btn{ width:40px; height:40px; }
  .lightbox__prev{ left:10px; }
  .lightbox__next{ right:10px; }
  .lightbox__close{ top:14px; right:14px; }
}

/* ============================================================
   VideoClips — facade estilo "lite embed": miniatura en alta
   resolución (maxresdefault) + botón de play; el iframe real de
   YouTube solo se inyecta al hacer clic (arregla el pixelado del
   póster y evita que el video siga sonando al cambiar de página,
   ya que el iframe deja de existir en el DOM al salir de la ruta).
   ============================================================ */
.yt-lite{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  background:#000 center/cover no-repeat;
  isolation:isolate;
}
.yt-lite::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));
  transition:background .25s ease;
}
.yt-lite:hover::before{ background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55)); }
.yt-lite__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1);
  width:66px; height:66px; border-radius:50%;
  background:rgba(255,87,34,.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.yt-lite__play svg{ width:24px; height:24px; margin-left:3px; color:#0a0a0a; }
.yt-lite:hover .yt-lite__play{ transform:translate(-50%,-50%) scale(1.1); background:var(--orange); }
.yt-lite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--radius-md); }

/* ============================================================
   Integrantes — foto grupal interactiva. Clic en un integrante:
   zoom suave sobre esa zona, resto de la imagen atenuado, tarjeta
   con su información. Cierra con clic fuera, ESC o el botón X.
   ============================================================ */
.members-photo{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
}
.members-photo__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:var(--fx,50%) var(--fy,50%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.members-photo.is-active .members-photo__img{
  transform:scale(1.35);
  filter:brightness(.55) saturate(1.05);
}
.member-hotspot{
  position:absolute; top:0; height:100%;
  border:none; background:transparent; cursor:pointer;
  padding:0;
}
.member-hotspot__ring{
  display:none;
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%) scale(.9);
  width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 0 rgba(255,87,34,.6);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
}
.members-photo:not(.is-active) .member-hotspot:hover .member-hotspot__ring{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  background:var(--orange);
  animation:pulseRing 1.4s ease-out infinite;
}
.member-hotspot.is-selected .member-hotspot__ring{
  opacity:1; transform:translate(-50%,-50%) scale(1.15);
  background:var(--orange);
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(255,87,34,.55); }
  100%{ box-shadow:0 0 0 14px rgba(255,87,34,0); }
}

.member-card{
  position:absolute;
  bottom:20px; left:20px; right:20px;
  max-width:340px;
  background:rgba(15,14,17,.78);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  padding:22px 24px;
  opacity:0; transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.members-photo.is-active .member-card{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}
.member-card__close{
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.member-card__close:hover{ background:var(--orange); border-color:var(--orange); color:#0a0a0a; }
.member-card h4{ color:var(--orange); font-size:17px; margin-bottom:4px; padding-right:26px; }
.member-card .member-role{ margin-bottom:10px; }
.member-card ul{ display:flex; flex-direction:column; gap:5px; }
.member-card li{ font-size:13px; color:var(--text-dim); padding-left:13px; position:relative; }
.member-card li::before{ content:"•"; position:absolute; left:0; color:var(--orange); }
.members-photo-hint{
  margin-top:12px; font-size:13px; color:var(--text-faint);
  display:flex; align-items:center; gap:8px;
}
@media (max-width:640px){
  .members-photo.is-active .members-photo__img{ transform:scale(1.15); }
  .member-card{ left:12px; right:12px; bottom:12px; max-width:none; padding:18px 20px; }
}

/* ============================================================
   Botón flotante "Volver arriba" — Inicio y perfiles de banda
   ============================================================ */
.back-to-top{
  position:fixed;
  right:24px; bottom:24px;
  width:50px; height:50px;
  border-radius:50%;
  background:var(--orange);
  color:#0a0a0a;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(255,87,34,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease;
  z-index:80;
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s, background .2s ease;
}
.back-to-top:hover{ background:var(--orange-2); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:640px){ .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; } }