/* ============================================================
   EL REY DEL TREN FANTASMA — Rediseño Premium 2026 v2
   Concepto: Ghost Train Lantern — negro profundo, arena cálida y coral
   Paleta: negro profundo + arena cálida + coral lantern
   Inspo: indie editorial 2025-26 — dark-first con acento tierra
   ============================================================ */

/* ---------- RESET & TOKENS ---------- */
*, ::before, ::after { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #FF4E2A #06070A; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #06070A; }
::-webkit-scrollbar-thumb { background: #171B24; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #FF4E2A; }
::selection { background: #FF4E2A; color: #fff; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

:root {
  /* superficies — casi negro, tinte azul mínimo */
  --bg:            #06070A;
  --bg-soft:       #090B0F;
  --surface:       #0E1116;
  --surface-2:     #12151C;
  --surface-3:     #171B24;
  --line:          rgba(255,255,255,.06);
  --line-strong:   rgba(255,255,255,.11);
  /* texto — blanco cálido neutro, sin matiz azul */
  --text:          #F5F0E6;
  --text-soft:     #D6D3CB;
  --muted:         #9AA0A6;
  --faint:         #5F646B;
  /* acentos — uso limitado a 10-12% de la UI (accesible y no chillón) */
  --accent:        #FF4E2A;   /* coral lantern — CTA principal */
  --accent-2:      #FF7A3D;   /* coral claro hover */
  --accent-3:      #FFC857;   /* ámbar para detalles */
  --accent-glow:   rgba(255,78,42,.32);
  --accent-soft:   rgba(255,78,42,.10);
  /* tipografía */
  --font-display:  'Bebas Neue', sans-serif;
  --font-heading:  'Space Grotesk', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
  --font-serif:    'Instrument Serif', Georgia, serif;
  /* layout */
  --max-w:         1180px;
  --radius:        16px;
  --radius-sm:     10px;
  --radius-pill:   999px;
}

/* ---------- BASE ---------- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* grano + velo indigo muy sutil para quitar flat B&W */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .022;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 1200px 700px at 15% 10%, rgba(110,124,255,.06), transparent 60%),
    radial-gradient(ellipse 900px 600px at 85% 90%, rgba(255,78,42,.05), transparent 60%),
    radial-gradient(ellipse 800px 500px at 50% 50%, transparent, transparent 70%);
}

h1, h2, h3 { text-wrap: balance; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 7.2rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text);
  text-shadow: 0 2px 30px rgba(8,12,28,.6);
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: .95;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text);
}
h2 em, h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--text);
}
h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
p { color: var(--muted); line-height: 1.85; margin: 1.25rem 0; font-size: 1.02rem; }
p strong { color: var(--text); font-weight: 600; }

/* contenedor simétrico */
section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) clamp(20px, 6vw, 64px);
  background: var(--bg);
  overflow: hidden;
}
section.alt { background: var(--bg-soft); }
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* separadores — coral + trazo indigo */
.separator {
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin: 1.6rem 0 2.8rem;
  border-radius: 999px;
  position: relative;
}
.separator::after {
  content: '';
  position: absolute;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 1px;
  background: var(--line-strong);
}
.separator.center { margin: 1.6rem auto 2.8rem; }
.separator.center::after { display: none; }
.separator.center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* kicker / eyebrow — texto solo blanco/negro, luz naranja solo en pseudo */
.kicker {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}
.kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: .7;
}
.kicker i { font-size: 11px; opacity: .9; }

.highlight {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  text-align: center;
  line-height: 1.45;
  max-width: 760px;
  margin: 2.5rem auto;
}
.highlight span {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: .8rem;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  transition: all 320ms cubic-bezier(.16,1,.3,1);
  background: rgba(255,255,255,.02);
}
.cta-link:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  gap: 16px;
  transform: translateY(-1px);
}
.cta-link i { transition: transform 320ms; font-size: 12px; }
.cta-link:hover i { transform: translateX(3px); }

/* ---------- NAVIGATION ---------- */
.share-btn {
  position: absolute;
  top: 28px;
  left: 28px;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  cursor: pointer;
  transition: all 280ms cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(12px);
  background: rgba(22,33,58,.55);
  color: var(--text-soft);
  text-decoration: none;
}
.social-icon i { font-size: 15px; line-height: 1; }
.social-icon:hover {
  border-color: rgba(255,255,255,.22);
  background: var(--text);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
/* footer usa mismo componente pero sobre fondo más oscuro */
footer .social-icon { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--muted); }
footer .social-icon:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.menu-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 100;
  background: rgba(18,27,46,.78);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: all 280ms;
}
.menu-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: scale(1.04);
}
.menu-btn .line {
  width: 20px;
  height: 1.5px;
  background: var(--text);
  border-radius: 999px;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), opacity 220ms, width 220ms;
}
.menu-btn .line1 { width: 14px; align-self: flex-start; margin-left: 16px; }
.menu-btn .line3 { width: 16px; align-self: flex-start; margin-left: 16px; }
.menu-btn:hover .line1 { width: 20px; }
.menu-btn:hover .line3 { width: 20px; }
.menu-btn.active .line1 { transform: translateY(6.5px) rotate(45deg); width: 20px; margin-left: 0; align-self: center; }
.menu-btn.active .line2 { transform: scaleX(0); opacity: 0; }
.menu-btn.active .line3 { transform: translateY(-6.5px) rotate(-45deg); width: 20px; margin-left: 0; align-self: center; }
.menu-btn.active { background: var(--text); border-color: var(--text); }
.menu-btn.active .line { background: var(--bg); }

.nav-item {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(22,33,58,.94);
  backdrop-filter: blur(16px);
  opacity: 0;
  z-index: -1;
  transform: translateY(0);
  transition: opacity 280ms, transform 420ms cubic-bezier(.16,1,.3,1), background 200ms, border-color 200ms;
  color: var(--text);
}
.nav-item i { font-size: 16px; transition: color 200ms; }
.nav-item:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(var(--ty,0)) scale(1.04); }
.nav-item::after {
  content: attr(title);
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms, transform 200ms;
}
.nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.nav-item.v1 { opacity:1; transform:translateY(68px);  z-index:99; transition-delay: 40ms; --ty:68px; }
.nav-item.v2 { opacity:1; transform:translateY(136px); z-index:99; transition-delay: 70ms; --ty:136px; }
.nav-item.v3 { opacity:1; transform:translateY(204px); z-index:99; transition-delay:100ms; --ty:204px; }
.nav-item.v4 { opacity:1; transform:translateY(272px); z-index:99; transition-delay:130ms; --ty:272px; }
.nav-item.v5 { opacity:1; transform:translateY(340px); z-index:99; transition-delay:160ms; --ty:340px; }
.nav-item.v6 { opacity:1; transform:translateY(408px); z-index:99; transition-delay:190ms; --ty:408px; }

/* ---------- HERO ---------- */
#hero {
  position: relative;
  min-height: 100svh;
  max-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/IMG_1782.webp') center 53% / cover no-repeat;
  /* elevada ~40% hacia arriba (de 35% a 18%) + calidez */
  filter: saturate(1.05) contrast(1.02) brightness(.92);
  transform: scale(1.02);
}
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 50% 88%, rgba(255,78,42,.16) 0%, transparent 62%),
    radial-gradient(ellipse 700px 400px at 20% 20%, rgba(6,7,10,.08) 0%, transparent 60%),
    linear-gradient(to top, var(--bg) 0%, rgba(6,7,10,.94) 18%, rgba(6,7,10,.55) 42%, rgba(6,7,10,.18) 72%, rgba(6,7,10,.02) 100%),
    linear-gradient(to bottom, rgba(6,7,10,.45) 0%, transparent 22%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 980px;
  padding: 0 clamp(20px, 5vw, 40px);
  margin-top: 4vh;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(245,240,230,.78);
  margin-bottom: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: fadeIn 1.2s both .6s;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: .9;
}
.hero-content h1 {
  animation: heroIn 1.4s cubic-bezier(.16,1,.3,1) .9s both;
}
.hero-content h1 span {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .42em;
  letter-spacing: -.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--text);
  margin-top: .12em;
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.hero-content .slogan {
  font-family: var(--font-heading);
  font-size: clamp(.82rem, 1.8vw, 1.02rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(245,240,230,.66);
  margin-top: 1.6rem;
  animation: slideUp 1.2s cubic-bezier(.16,1,.3,1) 1.15s both;
}
.hero-meta {
  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  animation: fadeIn 1s both 1.35s;
}
.hero-meta span {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,240,230,.62);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-meta span::before { display: none; }

#scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(245,240,230,.62);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: opacity 300ms, transform 300ms;
}
#scroll-down i { font-size: 16px; animation: bounce 2.2s infinite; opacity: .9; }
#scroll-down:hover { color: var(--text); transform: translateX(-50%) translateY(-2px); }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes heroIn { from{opacity:0; transform:translateY(28px) scale(.98)} to{opacity:1; transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes glowPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ---------- NEXT SHOW ---------- */
#next-show {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(56px, 7vw, 96px);
  position: relative;
}
#next-show::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,78,42,.06), transparent 70%);
  pointer-events: none;
}
#next-show h2 { animation: none; }
#next-show .container { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.next-show-card {
  margin-top: 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  max-width: 640px;
  width: 100%;
}
.next-show-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,78,42,.45), transparent 38%, transparent 62%, rgba(255,78,42,.28));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .7;
  pointer-events: none;
}
.next-show-kicker {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.next-show-date {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--text);
}
.next-show-date small {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .34em;
  letter-spacing: 0;
  color: var(--muted);
  vertical-align: middle;
  margin-left: .18em;
}
.next-show-venue {
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: .2rem 0 1.4rem;
}
.next-show-venue span { color: var(--muted); font-weight: 400; letter-spacing: .12em; font-size: .82em; }

/* ---------- BAND BIO ---------- */
#band {
  background: var(--bg);
}
#band .intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
#band .intro p {
  font-size: 1.06rem;
  color: var(--text-soft);
  line-height: 1.9;
}
.member-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: 3.5rem;
  align-items: start;
}
.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.member-card .img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color 320ms, transform 420ms cubic-bezier(.16,1,.3,1), box-shadow 320ms;
}
.member-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sin B&W: imagen a color natural con un poco de viveza */
  filter: saturate(1.05) contrast(1.02);
  transition: filter 520ms, transform 620ms cubic-bezier(.16,1,.3,1);
}
.member-card:hover .img-wrap {
  border-color: rgba(255,78,42,.35);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(8,12,28,.45), 0 0 0 1px rgba(255,78,42,.10);
}
.member-card:hover img {
  filter: saturate(1.15) contrast(1.02);
  transform: scale(1.06);
}
.member-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(8,12,28,.62) 0%, rgba(8,12,28,.18) 55%, transparent 100%);
  opacity: 0;
  transition: opacity 320ms;
}
.member-card:hover .overlay { opacity: 1; }
.member-card .overlay i {
  font-size: 18px;
  color: #fff;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8px) scale(.9);
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
}
.member-card:hover .overlay i { transform: none; }
.member-card .name {
  margin: 1rem 0 .18rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1;
}
.member-card .role {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
  line-height: 1;
  transition: color 220ms;
}
.member-card:hover .role { color: var(--text); }

/* ---------- SHOWS TABLE ---------- */
#dates h2, #dates .separator { margin-left: auto; margin-right: auto; text-align: center; }
#dates .container { text-align: center; }
.shows-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1.5rem;
  text-align: left;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.shows-table tr { transition: background 220ms, border-color 220ms; }
.shows-table tr + tr { border-top: 1px solid var(--line); }
.shows-table tr:hover { background: rgba(255,255,255,.04); }
.shows-table td {
  padding: 22px 20px;
  color: var(--muted);
  font-size: .92rem;
  vertical-align: middle;
}
.shows-table td:first-child {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  font-weight: 500;
  white-space: nowrap;
  width: 148px;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.shows-table td:last-child {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--faint);
  text-align: right;
  width: 90px;
}
.shows-table .venue {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  display: block;
  line-height: 1.2;
  transition: color 220ms;
}
.shows-table .venue small {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
  margin-top: 4px;
}
.shows-table tr:hover .venue { color: var(--text); }
.shows-table tr:nth-child(even) { background: rgba(255,255,255,.01); }

/* ---------- BLOG ---------- */
#blog { background: var(--bg); }
#blog .section-head { text-align: center; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 1rem;
}
.blog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 360ms cubic-bezier(.16,1,.3,1), border-color 280ms, box-shadow 320ms;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,78,42,.22);
  box-shadow: 0 20px 40px rgba(8,12,28,.35);
}
.blog-card .blog-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.02);
  transition: filter 420ms, transform 620ms cubic-bezier(.16,1,.3,1);
}
.blog-card:hover .blog-img { filter: saturate(1.18); transform: scale(1.04); }
.blog-card .img-wrap { overflow: hidden; position: relative; }
.blog-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,7,10,.55) 0%, transparent 58%);
  opacity: .9;
}
.blog-card .blog-body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card .blog-tag {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 .6rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-card .blog-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.blog-card .blog-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--text);
  letter-spacing: -.015em;
  margin: 0 0 .6rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .blog-date {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--faint);
  margin: auto 0 0;
  letter-spacing: .04em;
}
.blog-card .blog-date i { opacity: .8; }

/* ---------- NEWSLETTER ---------- */
#newsletter {
  min-height: auto;
  padding: clamp(64px, 8vw, 96px) clamp(20px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
#newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 400px at 20% 0%, rgba(255,78,42,.08), transparent 60%),
    radial-gradient(ellipse 600px 300px at 80% 100%, transparent, transparent 60%),
    radial-gradient(ellipse 500px 300px at 50% 50%, rgba(255,200,87,.04), transparent 70%);
  pointer-events: none;
}
#newsletter .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
#newsletter h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
#newsletter p.sub {
  max-width: 500px;
  margin: .6rem auto 2rem;
  color: var(--muted);
  font-size: .98rem;
}
.newsletter-form {
  display: flex;
  max-width: 520px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px;
  transition: border-color 280ms, box-shadow 280ms;
  box-shadow: 0 8px 32px rgba(8,12,28,.28);
}
.newsletter-form:focus-within {
  border-color: rgba(255,78,42,.45);
  box-shadow: 0 8px 32px rgba(8,12,28,.28), 0 0 0 4px var(--accent-soft);
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .96rem;
  outline: none;
  min-width: 0;
}
.newsletter-form input[type="email"]::placeholder { color: var(--faint); }
.newsletter-form button {
  padding: 13px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background 220ms, transform 200ms, box-shadow 200ms;
  white-space: nowrap;
  box-shadow: 0 4px 16px var(--accent-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.newsletter-form button:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.newsletter-form button:disabled { opacity:.65; cursor:not-allowed; transform:none; }
#newsletter-msg {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .82rem;
  min-height: 1.4rem;
}
#newsletter-msg.ok    { color: var(--text); }
#newsletter-msg.error { color: #FB7185; }

/* ---------- MUSIC — SPOTIFY GRANDE ---------- */
#music {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-soft);
  position: relative;
}
#music::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 500px at 10% 15%, rgba(110,124,255,.06), transparent 65%),
    radial-gradient(ellipse 600px 400px at 90% 85%, rgba(255,78,42,.05), transparent 65%);
  pointer-events: none;
}
#music .container { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; width: 100%; }
.spotify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: 100%;
  max-width: 960px;
  margin-top: 1.2rem;
}
.spotify-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  backdrop-filter: blur(6px);
  transition: border-color 280ms, transform 360ms cubic-bezier(.16,1,.3,1), box-shadow 300ms;
  overflow: hidden;
}
.spotify-card:hover {
  border-color: rgba(255,78,42,.20);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(8,12,28,.32);
}
.spotify-card:nth-child(2):hover { border-color: rgba(255,78,42,.22); }
.spotify-card iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.spotify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 12px;
  text-align: left;
}
.spotify-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.spotify-badge.alt { background: var(--accent-2); }
.spotify-badge i { font-size: 10px; }
.spotify-title {
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- SPOTIFY PROFILE LINK ---------- */
.spotify-profile-link{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:.6rem;
  padding:12px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);
  transition:all 260ms cubic-bezier(.16,1,.3,1);
}
.spotify-profile-link span{ color:var(--text); font-family:var(--font-heading); letter-spacing:.02em; text-transform:none; font-size:.82rem; }
.spotify-profile-link:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform:translateY(-2px); }
.spotify-profile-link:hover span{ color:var(--bg); }

/* ---------- CARRUSEL SPOTIFY ---------- */
.carousel-wrap{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:960px;
  margin-top:1.6rem;
}
.carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:var(--radius);
}
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-track{
  display:flex;
  gap:16px;
}
.carousel-slide{
  min-width:100%;
  flex:0 0 100%;
  scroll-snap-align:center;
}
.carousel-slide .spotify-card{ margin:0; }
.carousel-btn{
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(22,33,58,.72);
  backdrop-filter:blur(12px);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all 220ms;
  box-shadow:0 6px 18px rgba(8,12,28,.22);
}
.carousel-btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform:scale(1.06); }
.carousel-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.carousel-btn i{ font-size:14px; }
.carousel-dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:16px;
}
.carousel-dot{
  width:8px;height:8px;
  border-radius:50%;
  border:none;
  background:var(--line-strong);
  cursor:pointer;
  transition:all 260ms cubic-bezier(.16,1,.3,1);
}
.carousel-dot.active{
  width:26px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
.carousel-count{
  text-align:center;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--faint);
}
.carousel-actions{
  display:flex;justify-content:flex-end;
  padding:10px 4px 2px;
}
.carousel-actions a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid transparent;
  padding:6px 10px;border-radius:999px;
  transition:all 200ms;
}
.carousel-actions a:hover{ color:var(--text); border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.carousel-actions i{ font-size:11px; }

/* ---------- STREAM LINKS (debajo de spotify) ---------- */
.stream-wrap {
  width: 100%;
  max-width: 960px;
  margin-top: 28px;
}
.stream-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.stream-label i { font-size: 12px; color: var(--text); }
.stream-grid { list-style: none; }
.stream-grid li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 240ms, transform 320ms cubic-bezier(.16,1,.3,1), background 260ms;
  text-align: left;
}
.stream-grid li + li { margin-top: 12px; }
.stream-grid li:hover { border-color: rgba(255,78,42,.26); transform: translateY(-2px); background: rgba(255,255,255,.03); }
.stream-grid li:nth-child(2):hover { border-color: rgba(255,78,42,.22); }
.stream-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--faint);
}
.stream-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  white-space: nowrap;
}
.stream-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--faint);
  white-space: nowrap;
}
.stream-platforms { display: flex; gap: 8px; align-items: center; }
.stream-platforms a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: all 260ms cubic-bezier(.16,1,.3,1);
  background: rgba(255,255,255,.02);
}
.stream-platforms a:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-1px); }
.stream-platforms i { font-size: 13px; }

/* ---------- CONTACT ---------- */
#contact { background: var(--bg); }
#contact .section-head { text-align: center; }
#contact .highlight { margin-bottom: 1.2rem; }
#insertMail { text-align: center; margin-bottom: 2.2rem; }
#insertMail a {
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--text);
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
#insertMail a:hover { color: var(--text); border-color: var(--text); }

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 20px 50px rgba(8,12,28,.32);
  gap: 2px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .96rem;
  outline: none;
  transition: border-color 220ms, box-shadow 220ms, background 220ms;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--faint); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,78,42,.42);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface-2);
}
.contact-form textarea { resize: vertical; min-height: 148px; line-height: 1.6; }
.contact-form .btn-submit {
  margin-top: 8px;
  width: 100%;
  padding: 16px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 260ms cubic-bezier(.16,1,.3,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-form .btn-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow);
}
.contact-form .btn-submit:active { transform: none; }
.help-text {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: #FB7185;
  min-height: 18px;
  margin: 2px 0 8px 2px;
}
#form-response {
  text-align: center;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--text);
}

/* ---------- FOOTER ---------- */
footer {
  background: #050507;
  color: var(--muted);
  text-align: center;
  padding: 56px clamp(20px, 5vw, 40px) 40px;
  border-top: 1px solid var(--line);
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
}
footer p { color: var(--faint); margin: 6px 0; font-size: .82rem; letter-spacing: .08em; }
footer .band-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  margin: 1.2rem 0 .4rem;
}
footer .footer-socials { display:flex; justify-content:center; gap:12px; margin: 1.4rem 0; flex-wrap: wrap; }
footer a { color: var(--muted); border-bottom: 1px solid transparent; transition: color 180ms, border-color 180ms; }
footer a:hover { color: var(--text); border-color: var(--line-strong); }

/* ---------- UP ARROW ---------- */
#up-arrow {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--text);
  color: var(--bg);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  border: 1px solid var(--text);
  box-shadow: 0 8px 24px rgba(8,12,28,.35);
  transition: all 220ms;
}
#up-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 32px var(--accent-glow); }
#up-arrow i { font-size: 14px; }

/* ---------- ANIMATIONS ---------- */
.anim-y    { opacity:0; transform:translate3d(0,24px,0); transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 800ms cubic-bezier(.16,1,.3,1); }
.anim-x    { opacity:0; transform:translate3d(-22px,0,0); transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 800ms cubic-bezier(.16,1,.3,1); }
.anim-fade { opacity:0; transition: opacity 900ms ease; }
.showed    { opacity:1 !important; transform: none !important; }

/* stagger */
.member-card.anim-y:nth-child(1) { transition-delay: 40ms; }
.member-card.anim-y:nth-child(2) { transition-delay: 90ms; }
.member-card.anim-y:nth-child(3) { transition-delay: 140ms; }
.member-card.anim-y:nth-child(4) { transition-delay: 190ms; }
.member-card.anim-y:nth-child(5) { transition-delay: 240ms; }
.blog-card.anim-y:nth-child(1) { transition-delay: 40ms; }
.blog-card.anim-y:nth-child(2) { transition-delay: 120ms; }
.blog-card.anim-y:nth-child(3) { transition-delay: 200ms; }
.shows-table tr.anim-y:nth-child(1) { transition-delay: 40ms; }
.shows-table tr.anim-y:nth-child(2) { transition-delay: 80ms; }
.shows-table tr.anim-y:nth-child(3) { transition-delay: 120ms; }
.shows-table tr.anim-y:nth-child(4) { transition-delay: 160ms; }
.shows-table tr.anim-y:nth-child(5) { transition-delay: 200ms; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .member-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .spotify-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 768px) {
  section { padding: 64px 20px; }
  #hero::before { background-position: center 16%; }
  .hero-content { margin-top: 0; }
  .hero-meta { gap: 14px; }
  .share-btn { display: none; }
  .member-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .shows-table { border-radius: 12px; }
  .shows-table td:first-child { width: 110px; font-size: .78rem; padding: 18px 14px; }
  .shows-table td { padding: 18px 14px; }
  .shows-table td:last-child { display: none; }
  .newsletter-form { flex-direction: column; border-radius: var(--radius); padding: 8px; gap: 8px; background: var(--surface); }
  .newsletter-form input[type="email"] { background: var(--bg-soft); border-radius: var(--radius-pill); border: 1px solid var(--line); padding: 14px 18px; }
  .newsletter-form button { border-radius: var(--radius-pill); width: 100%; }
  .contact-form { padding: 20px; }
  .nav-item::after { display: none; }
  .spotify-grid { gap: 16px; }
  .spotify-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .carousel-wrap{ grid-template-columns:1fr; gap:0; }
  .carousel-btn{ display:none; }
  .spotify-profile-link{ flex-wrap:wrap; justify-content:center; text-align:center; font-size:.68rem; }
  .spotify-profile-link span{ width:100%; text-align:center; }
}
@media (max-width: 520px) {
  h1 { font-size: clamp(2.4rem, 13vw, 3.6rem); }
  .hero-eyebrow { font-size: .62rem; letter-spacing: .22em; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 18px; }
  .next-show-card { padding: 24px 18px; }
  .next-show-date { font-size: 2.4rem; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .member-card .img-wrap { aspect-ratio: 1 / 1; }
  .shows-table td:first-child { width: 92px; }
  .shows-table .venue { font-size: .92rem; }
  footer .band-name { font-size: 1.05rem; letter-spacing: .12em; }
  .separator::after { display: none; }
  #up-arrow { bottom: 18px; right: 16px; width: 44px; height: 44px; }
  .stream-grid li { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .stream-platforms { justify-content: flex-start; }
}
@media (max-width: 374px) {
  .member-grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
  .hero-content .slogan { letter-spacing: .22em; font-size: .78rem; }
}
@media (max-width: 320px) {
  h1{ font-size: clamp(2rem, 12vw, 2.8rem); }
  .hero-content{ padding: 0 16px; }
  .cta-link, .spotify-profile-link, .stream-platforms a, .carousel-btn, .social-icon, .menu-btn, #up-arrow{ min-height:44px; min-width:44px; }
  .hero-eyebrow{ font-size:.58rem; letter-spacing:.18em; }
  .next-show-card{ padding:20px 14px; }
  .shows-table td{ padding:14px 10px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .anim-y, .anim-x, .anim-fade { opacity: 1; transform: none; }
}

/* focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-btn:focus-visible, #up-arrow:focus-visible,
.stream-platforms a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* refs */
.hero-eyebrow { margin-bottom: 2.4rem; }
input, textarea { caret-color: var(--accent); accent-color: var(--accent); }