/* ==========================================================================
   Dimension Forever · MÓVIL Y TABLET (pantallas de hasta 980 px)
   Se carga con media="(max-width: 980px)". Lo común está en styles.css
   ========================================================================== */

/* menú plegable */
.burger{display:block;min-width:44px;min-height:44px}
.nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:12px 20px 20px;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.08)}
.nav nav.open{display:flex}
.nav nav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:17px}
.nav nav a.btn-sm{margin-top:12px;border-bottom:0;padding:14px}

/* portada: el foco de cada foto se centra en el músico (lo calcula script.js) */
.hero{min-height:clamp(600px,92vh,860px);min-height:clamp(600px,92svh,860px);padding:100px 16px 70px}
.hero-cap{display:none}
.hero h1{opacity:.82}
.hero-slides{opacity:.5}

.section{padding:64px 0}
.contact{padding:80px 0}
.anec{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* móvil estrecho */
@media(max-width:600px){
  .wrap{padding:0 16px}
  .hero-glow{background:
    radial-gradient(520px 360px at 20% 25%,rgba(255,46,147,.4),transparent 70%),
    radial-gradient(520px 360px at 85% 80%,rgba(39,225,255,.28),transparent 70%),
    linear-gradient(rgba(11,10,20,.28),rgba(11,10,20,.28))}
  .timeline{padding-left:18px;margin-left:4px}
  .timeline li{padding:16px 14px}
  .timeline li::before{left:-30px;top:24px}
  .year{font-size:30px}
  .gig-year{grid-template-columns:1fr;gap:6px}
  .gy{font-size:40px}
  .gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .gal-item span{font-size:11px;padding:20px 8px 8px}
  #lb[open]{grid-template-columns:36px 1fr 36px}
  .lb-nav{font-size:36px}
}
@media(max-width:480px){
  .float-wa span{display:none}
  .float-wa{padding:14px}
}

/* WordPress: próximas fechas en una columna */
.prox li{grid-template-columns:1fr;gap:6px}