/* ===========================================================
   LA RATA BLUESERA — Dirección "Río Nocturno" (estilo compartido)
   Usado por: home-rio.html · musica.html · conciertos.html
   =========================================================== */
body{ background:radial-gradient(120% 80% at 50% -10%, #15171a 0%, var(--ink) 46%, #07070a 100%); }

/* =================== INTRO / RECEPCIÓN (solo Home) ===================
   Enfoque SIN velo y sin pestañeo: la intro ocurre sobre el fondo
   constante del hero (nunca cambia → no hay salto de iluminación).
   El logo emerge con una única animación de carga (no atada a ninguna
   clase, así no parpadea al revelar). El texto y la nav aparecen con
   transiciones suaves al quitar la clase .intro. Nada se elimina ni
   se recoloca → transición continua. */
html.intro, html.intro body{ overflow:hidden; height:100%; }

/* RED DE SEGURIDAD: estado final visible garantizado, sin depender de rAF
   ni de que termine ninguna transición. La añade el setTimeout (que siempre
   se dispara, aun en pestañas en segundo plano) → el hero nunca queda en blanco. */
html.revealed .nav,
html.revealed .hero-halo,
html.revealed .hero-inner img.logo,
html.revealed .hero-inner .eye,
html.revealed .hero-inner .tag,
html.revealed .hero-inner .meta,
html.revealed .hero-cta,
html.revealed .scrollcue{ opacity:1 !important; }
html.revealed .hero-inner img.logo,
html.revealed .hero-inner .eye,
html.revealed .hero-inner .tag,
html.revealed .hero-inner .meta,
html.revealed .hero-cta{ transform:none !important; }
html.revealed .hero-inner img.logo{ filter:none !important; }
html.revealed .hero-halo{ transform:translate(-50%,-50%) !important; }
/* Sin transición en la red de seguridad: el estado final se aplica al
   instante y no puede quedarse "congelado" a medio camino si el render
   estaba pausado (pestaña en segundo plano). */
html.revealed .nav,
html.revealed .hero-halo,
html.revealed .hero-inner img.logo,
html.revealed .hero-inner .eye,
html.revealed .hero-inner .tag,
html.revealed .hero-inner .meta,
html.revealed .hero-cta,
html.revealed .scrollcue{ transition:none !important; }

/* halo dorado detrás del logo: entra con transición y se queda */
.hero-halo{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(680px,124vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(226,181,82,.17), rgba(200,150,43,.05) 45%, transparent 67%);
  filter:blur(12px); opacity:1;
  transition:opacity 1.9s ease, transform 2.3s cubic-bezier(.2,.7,.2,1);
}
html.intro .hero-halo{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
html.intro.lit .hero-halo{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* botón de saltar (visible solo durante la intro) */
.intro-skip{
  position:fixed; bottom:22px; right:24px; z-index:90; cursor:pointer; background:none; border:0;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-dim); opacity:0; pointer-events:none; transition:opacity .6s ease, color .2s ease;
}
.intro-skip:hover{ color:var(--gold-2); }
html.intro .intro-skip{ opacity:.7; pointer-events:auto; transition:opacity .8s ease 1.2s, color .2s ease; }

/* botón de audio (visible solo durante la intro) */
.audio-btn{
  position:fixed; bottom:22px; left:24px; z-index:90; cursor:pointer; background:none; border:0;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-dim); opacity:0; pointer-events:none; transition:opacity .6s ease, color .2s ease;
  display:flex; align-items:center; gap:7px;
}
.audio-btn:hover{ color:var(--gold-2); }
.audio-btn .audio-icon{ font-style:normal; }
.audio-btn.muted .audio-icon::after{ content:"✕"; font-size:8px; vertical-align:super; }
html.intro .audio-btn.visible{ opacity:.7; pointer-events:auto; transition:opacity .8s ease 2s, color .2s ease; }

/* nav oculta durante la intro, entra como parte de la cascada (no en el desbloqueo) */
.nav{ transition:opacity 1.2s ease, background .3s, padding .3s; }
html.intro .nav{ opacity:0; pointer-events:none; }
html.intro.lit .nav{ opacity:1; transition-delay:3s; }

@media(prefers-reduced-motion:reduce){
  .hero-halo{ animation:none; opacity:1; }
}
.wrap{ max-width:1160px; margin:0 auto; padding:0 30px; }

/* ---- Nav ---- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px; transition:.3s; }
.nav.scrolled{ background:rgba(7,7,10,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--ink-line); padding:11px 30px; }
.nav .brand{ display:flex; align-items:center; gap:10px; }
.nav .brand img{ height:34px; }
.nav .brand b{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); }
.nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0;
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.nav ul a{ color:var(--cream-2); opacity:.8; transition:.2s; padding-bottom:3px; border-bottom:1px solid transparent; }
.nav ul a:hover,.nav ul a.active{ color:var(--gold-2); opacity:1; }
.nav ul a.active{ border-color:var(--gold-deep); }
.nav .tix{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--river-2); color:var(--cream); padding:8px 15px; transition:.2s; }
.nav .tix:hover{ border-color:var(--gold); color:var(--gold-2); }
/* ---- Hamburger ---- */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
  position:relative; z-index:2;
}
.nav-burger span{
  display:block; width:22px; height:1.5px; background:var(--cream);
  transform-origin:center; transition:transform .3s ease, opacity .3s ease, background .2s;
}
.nav.open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:860px){
  .nav-burger{ display:flex; }
  .nav .tix{ display:none; }
  .nav ul{ display:none; }
}

/* Overlay móvil — inyectado al body por JS, fuera del nav */
.mob-overlay{
  position:fixed; inset:0; z-index:250;
  background:rgba(7,7,10,.97); backdrop-filter:blur(14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.mob-overlay.open{ opacity:1; pointer-events:auto; }
.mob-overlay ul{ list-style:none; margin:0; padding:0; text-align:center; }
.mob-overlay ul li:not(.mob-tix) a{
  font-family:"Special Elite",monospace; font-size:clamp(28px,7vw,40px);
  color:var(--cream); letter-spacing:.02em; text-transform:none;
  padding:13px 0; display:block; border-bottom:none; opacity:1; transition:color .2s;
}
.mob-overlay ul li:not(.mob-tix) a:hover,
.mob-overlay ul li:not(.mob-tix) a.active{ color:var(--gold-2); }
.mob-overlay ul .mob-tix{ margin-top:30px; }
.mob-overlay ul .mob-tix a{
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--river-2); color:var(--cream); padding:11px 26px; display:inline-block; transition:.2s; opacity:1;
}
.mob-overlay ul .mob-tix a:hover{ border-color:var(--gold); color:var(--gold-2); }

/* ---- Botones ---- */
.btn{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:14px 26px; transition:.2s; cursor:pointer; display:inline-block; }
.btn-solid{ background:var(--gold); color:var(--ink); border:1px solid var(--gold); }
.btn-solid:hover{ background:var(--gold-2); box-shadow:0 0 30px rgba(226,181,82,.35); }
.btn-ghost{ background:transparent; color:var(--cream); border:1px solid var(--river-2); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2); }

/* ---- Hero portada (home) ---- */
.hero{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; text-align:center; padding-bottom:72px; }
.hero .stars{ opacity:.55; }
.moon{ position:absolute; top:8%; left:50%; transform:translateX(-50%); width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,181,82,.20), rgba(200,150,43,.06) 45%, transparent 68%); filter:blur(8px); }
.fog{ position:absolute; left:0; right:0; pointer-events:none; }
.fog.f1{ bottom:0; height:46%; background:linear-gradient(transparent, rgba(69,88,96,.22) 60%, rgba(7,7,10,.7)); }
.fog.f2{ bottom:0; height:30%; background:linear-gradient(transparent, rgba(7,7,10,.9)); }
.hero .rain{ opacity:.08; }
.hero-inner{ position:relative; z-index:5; padding:0 24px; }

/* logo: emerge con TRANSICIÓN (disparada por la clase .lit), no con
   @keyframes — así nunca se "congela" en el fotograma inicial. */
/* NOTA: sin filter:drop-shadow — en Safari/Apple Silicon (M1) ese filtro
   sobre esta imagen la renderiza como un recuadro blanco. La entrada se
   anima solo con opacidad + transform (100% compatible). */
.hero-inner img.logo{ width:min(380px,76vw); margin:0 auto; transition:opacity 1.5s ease, transform 1.7s cubic-bezier(.2,.7,.2,1); }
html.intro .hero-inner img.logo{ opacity:0; transform:translateY(22px) scale(.9); }
html.intro.lit .hero-inner img.logo{ opacity:1; transform:none; }

/* textos del hero: ocultos durante la intro; entran en CASCADA CONTINUA
   bajo .lit (tras el logo), no atados al desbloqueo del scroll. Así no
   hay un único "momento" de revelado que se note. */
.hero-inner .eye,.hero-inner .tag,.hero-inner .meta,.hero-cta{ transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero-inner .eye{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.36em; text-transform:uppercase; color:var(--river-2); margin-bottom:26px; }
.hero h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.hero-inner .tag{ font-family:"Special Elite",monospace; font-size:clamp(17px,2.3vw,24px); color:var(--cream); margin:22px 0 4px; letter-spacing:.02em; }
.hero-inner .meta{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-dim); }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
html.intro .hero-inner .eye,
html.intro .hero-inner .tag,
html.intro .hero-inner .meta,
html.intro .hero-cta{ opacity:0; transform:translateY(14px); }
html.intro.lit .hero-inner .eye{ opacity:1; transform:none; transition-delay:1.9s; }
html.intro.lit .hero-inner .tag{ opacity:1; transform:none; transition-delay:2.25s; }
html.intro.lit .hero-inner .meta{ opacity:1; transform:none; transition-delay:2.55s; }
html.intro.lit .hero-cta{ opacity:1; transform:none; transition-delay:2.85s; }
.scrollcue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none; white-space:nowrap;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-2); text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7); animation:bob 2.8s 1s ease-in-out infinite; transition:opacity 1.2s ease; }
html.intro .scrollcue{ opacity:0; }
html.intro.lit .scrollcue{ opacity:1; transition-delay:3.2s; }
/* En pantallas bajas el contenido del hero ya llena el alto: ocultamos la pista
   para que no se monte sobre los botones. */
@media (max-height:640px){ .scrollcue{ display:none; } }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ---- Hero interior (páginas) ---- */
.pagehero{ position:relative; overflow:hidden; padding:148px 0 56px; text-align:center; }
.pagehero .stars{ opacity:.4; }
.pagehero .moon{ width:380px; height:380px; top:30px; }
.pagehero .fog{ height:60%; }
.pagehero .inner{ position:relative; z-index:5; }
.pagehero .crumb{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--river-2); }
.pagehero .crumb a:hover{ color:var(--gold-2); }
.pagehero h1{ font-family:"Special Elite",monospace; font-weight:400; font-size:clamp(34px,6vw,68px); color:var(--cream); margin:16px 0 14px; line-height:1.02; }
.pagehero p{ font-family:"Bitter",serif; font-style:italic; color:var(--cream-2); font-size:17px; max-width:60ch; margin:0 auto; }

/* ---- Reveal ---- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Transición de página ---- */
.page-fx{
  position:fixed; inset:0; z-index:300;
  background:var(--ink); opacity:1; pointer-events:all;
  transition:opacity .38s ease;
}
.page-fx.visible{ opacity:0; pointer-events:none; }

/* ---- Strip de venues ---- */
.strip-wrap{
  overflow:hidden; border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
  padding:13px 0; position:relative;
}
.strip-wrap::before,.strip-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.strip-wrap::before{ left:0; background:linear-gradient(90deg,var(--ink),transparent); }
.strip-wrap::after{ right:0; background:linear-gradient(-90deg,var(--ink),transparent); }
.strip{ display:flex; gap:0; width:max-content; animation:marquee 40s linear infinite; }
.strip-item{ display:flex; align-items:center; gap:0; }
.strip-item span{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--river-2); white-space:nowrap; padding:0 22px; }
.strip-item i{ color:var(--gold-deep); font-style:normal; font-size:8px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.strip-wrap:hover .strip{ animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){ .strip{ animation:none; } }

/* ---- Cifras ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:90px 0 70px; text-align:center; }
.stats b{ display:block; font-family:"Special Elite",monospace; font-size:clamp(40px,5vw,64px); color:var(--cream); line-height:1; }
.stats b span{ color:var(--gold-2); }
.stats small{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--river-2); display:block; margin-top:12px; }
@media(max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); gap:40px 20px; } }

/* ---- Frase flotante en niebla ---- */
.float-quote{ position:relative; padding:120px 0; text-align:center; overflow:hidden; }
.float-quote::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 50%, rgba(69,88,96,.16), transparent 70%); }
.float-quote blockquote{ position:relative; font-family:"Special Elite",monospace; font-size:clamp(26px,4.6vw,52px); line-height:1.22; margin:0 auto; max-width:18ch; color:var(--cream); }
.float-quote blockquote em{ color:var(--gold-2); font-style:normal; }
.float-quote cite{ position:relative; display:block; margin-top:30px; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--river-2); font-style:normal; }

/* ---- Secciones ---- */
.section{ padding:70px 0; }
.eyebrow2{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.eyebrow2::before{ content:""; width:30px; height:1px; background:var(--gold-deep); }
.h-big{ font-family:"Special Elite",monospace; font-size:clamp(30px,5vw,52px); margin:0 0 40px; color:var(--cream); line-height:1.05; }

/* historia split */
.hist{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hist p{ color:var(--cream-2); font-size:16.5px; margin:0 0 18px; }
.hist p strong{ color:var(--gold-2); font-weight:400; }
.hist .visual{ aspect-ratio:3/4; border:1px solid var(--ink-line); background:
  radial-gradient(80% 60% at 50% 35%, rgba(226,181,82,.10), transparent 70%),
  repeating-linear-gradient(102deg, transparent 0 7px, rgba(69,88,96,.06) 7px 8px),
  var(--ink-2); display:grid; place-items:center; position:relative; overflow:hidden; }
.hist .visual img{ width:64%; opacity:.92; filter:drop-shadow(0 10px 30px #000); }
/* Variante con foto real: ocupa todo el marco, sin recortar, con scrim para la leyenda. */
.hist .visual.is-photo{ aspect-ratio:auto; display:block; }
.hist .visual.is-photo img{ width:100%; height:auto; opacity:1; filter:none; display:block; }
.hist .visual.is-photo .vcap{ padding:36px 0 12px; background:linear-gradient(transparent, rgba(11,11,9,.92)); color:var(--cream-2); }
.hist .visual .vcap{ position:absolute; bottom:14px; left:0; right:0; text-align:center; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); }
.hist .visual.is-photo .vcap{ bottom:0; }
@media(max-width:820px){ .hist{ grid-template-columns:1fr; gap:36px; } }

/* discografía cascada */
.disco{ display:flex; flex-direction:column; }
.drow{ display:grid; grid-template-columns:90px 1fr auto; gap:24px; align-items:center; padding:22px 4px; border-top:1px solid var(--ink-line); transition:.3s; color:inherit; }
.disco .drow:last-child{ border-bottom:1px solid var(--ink-line); }
.drow:hover{ background:linear-gradient(90deg, rgba(69,88,96,.12), transparent); padding-left:14px; }
.drow .yr{ font-family:"Space Mono",monospace; color:var(--gold); font-size:14px; }
.drow .nm{ font-family:"Special Elite",monospace; font-size:clamp(20px,2.5vw,28px); color:var(--cream); }
.drow .nm small{ display:block; font-family:"Bitter",serif; font-size:14px; color:var(--cream-dim); margin-top:4px; }
.drow .fm{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--river-2); white-space:nowrap; }
.drow.next .nm{ color:var(--gold-2); }
.drow.next .fm{ color:var(--gold); }
@media(max-width:600px){ .drow{ grid-template-columns:64px 1fr; } .drow .fm{ grid-column:2; } }

/* conciertos */
.gig{ display:grid; grid-template-columns:120px 1fr auto; gap:28px; align-items:center; padding:28px 0; border-top:1px solid var(--ink-line); }
.gig:last-child{ border-bottom:1px solid var(--ink-line); }
.gig .d b{ font-family:"Special Elite",monospace; font-size:32px; color:var(--gold-2); display:block; line-height:1; }
.gig .d small{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); }
.gig .v b{ font-family:"Special Elite",monospace; font-size:22px; color:var(--cream); }
.gig .v small{ display:block; font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin-top:4px; }
.gig a.tix-in{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--river-2); color:var(--cream); padding:10px 16px; transition:.2s; }
.gig a.tix-in:hover{ border-color:var(--gold); color:var(--gold-2); }
@media(max-width:620px){ .gig{ grid-template-columns:88px 1fr; } .gig a.tix-in{ grid-column:2; justify-self:start; } }

/* hitos */
.hitos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.hito{ background:var(--ink); padding:34px 26px; transition:.3s; }
.hito:hover{ background:var(--ink-2); }
.hito .k{ font-family:"Special Elite",monospace; font-size:32px; color:var(--gold-2); }
.hito h3{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:12px 0 8px; color:var(--cream); }
.hito p{ font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin:0; }
@media(max-width:760px){ .hitos{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .hitos{ grid-template-columns:1fr; } }

/* CTA final / finale */
.finale{ position:relative; text-align:center; padding:120px 0; overflow:hidden; }
.finale .rain{ opacity:.07; }
.finale h2{ font-family:"Special Elite",monospace; font-size:clamp(30px,5vw,56px); margin:0 0 10px; color:var(--cream); position:relative; }
.finale p{ font-family:"Bitter",serif; font-style:italic; color:var(--cream-2); font-size:18px; position:relative; margin:0 0 30px; }

/* footer */
footer{ border-top:1px solid var(--ink-line); padding:50px 0 30px; position:relative; }
.fgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; }
footer img.flogo{ width:150px; margin-bottom:14px; }
footer p{ color:var(--cream-dim); font-size:14px; max-width:34ch; }
.fgrid h4{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--river-2); margin:0 0 14px; }
.fgrid a{ display:block; font-family:"Space Mono",monospace; font-size:13px; padding:4px 0; color:var(--cream-2); }
.fgrid a:hover{ color:var(--gold-2); }
.fbot{ text-align:center; margin-top:38px; padding-top:20px; border-top:1px solid var(--ink-line); font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); line-height:1.9; }
.fbot a{ color:var(--gold-2); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.fbot a:hover{ border-bottom-color:var(--gold-2); }
@media(max-width:760px){ .fgrid{ grid-template-columns:1fr 1fr; } .fgrid>div:first-child{ grid-column:1/-1; } }
@media(max-width:480px){ .fgrid{ grid-template-columns:1fr; } }

/* =================== PÁGINA MÚSICA =================== */
/* Feature Santa Lucía */
.feature{ position:relative; overflow:hidden; border:1px solid var(--ink-line); background:
  radial-gradient(70% 120% at 18% 30%, rgba(226,181,82,.12), transparent 60%), var(--ink-2); padding:54px 48px; }
.feature .rain{ opacity:.05; }
.feature-grid{ position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:46px; align-items:center; z-index:2; }
.feature .tagn{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.feature h2{ font-family:"Special Elite",monospace; font-size:clamp(30px,4.5vw,50px); margin:12px 0 16px; color:var(--cream); }
.feature p{ color:var(--cream-2); font-size:16px; margin:0 0 22px; }
.feature .plays,
.river-feat .plays{ display:flex; gap:34px; margin-bottom:26px; flex-wrap:wrap; }
.feature .plays div b,
.river-feat .plays div b{ font-family:"Special Elite",monospace; font-size:30px; color:var(--gold-2); display:block; line-height:1; }
.feature .plays div b{ font-size:34px; }
.feature .plays div small,
.river-feat .plays div small{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); }
.vinyl{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.vinyl .disc{ width:88%; aspect-ratio:1; border-radius:50%; background:
  repeating-radial-gradient(circle at 50% 50%, #0c0c0e 0 2px, #141416 2px 4px);
  display:grid; place-items:center; box-shadow:0 14px 44px rgba(0,0,0,.7); animation:spin 14s linear infinite; }
.vinyl .label{ width:42%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--gold-2), var(--gold-deep)); display:grid; place-items:center; }
.vinyl .label img{ width:74%; }
.vinyl .hole{ position:absolute; width:10px; height:10px; border-radius:50%; background:#07070a; box-shadow:0 0 0 3px #1a1a1c; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(max-width:760px){ .feature{ padding:36px 24px; } .feature-grid{ grid-template-columns:1fr; gap:30px; } .vinyl{ max-width:280px; margin:0 auto; } }

/* tarjetas de álbum */
.albums{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.album{ border:1px solid var(--ink-line); background:var(--ink-2); padding:30px 28px; transition:.25s; }
.album:hover{ border-color:var(--gold-deep); transform:translateY(-3px); }
.album .ahead{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.album .yr{ font-family:"Space Mono",monospace; color:var(--gold); font-size:13px; letter-spacing:.1em; }
.album .fm{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--river-2); border:1px solid var(--ink-line); padding:3px 8px; }
.album h3{ font-family:"Special Elite",monospace; font-size:27px; color:var(--cream); margin:10px 0 10px; }
.album p{ font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin:0 0 18px; }
.album .tracks{ list-style:none; margin:0 0 18px; padding:0; }
.album .tracks li{ display:flex; gap:12px; padding:6px 0; border-bottom:1px dotted var(--ink-line); font-family:"Space Mono",monospace; font-size:12.5px; color:var(--cream-2); }
.album .tracks li span{ color:var(--river-2); width:22px; flex:none; }
.album .alink{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); border-bottom:1px solid var(--gold-deep); }
.album .alink:hover{ color:var(--cream); }
.album .acover{ width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--ink-3); border:1px solid var(--ink-line); display:block; margin:0 0 18px; }
.album.wide{ grid-column:1 / -1; }

/* Galería de fotos (Prensa) */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery .shot{ display:block; overflow:hidden; border:1px solid var(--ink-line); aspect-ratio:3/2; background:var(--ink-3); }
.gallery .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.gallery .shot:hover img{ transform:scale(1.06); }
@media(max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media(max-width:460px){ .gallery{ grid-template-columns:1fr; } }

/* Foto de directo a todo el ancho (Conciertos) */
.live-shot{ margin:0; position:relative; border:1px solid var(--ink-line); overflow:hidden; }
.live-shot img{ width:100%; height:auto; display:block; }
.live-shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:40px 18px 14px;
  background:linear-gradient(transparent, rgba(11,11,9,.92));
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); text-align:center; }
.album.next{ border-color:var(--gold-deep); background:linear-gradient(180deg, rgba(200,150,43,.06), var(--ink-2)); }
.album.next h3{ color:var(--gold-2); }
.album.next .fm{ color:var(--gold); border-color:var(--gold-deep); }
@media(max-width:760px){ .albums{ grid-template-columns:1fr; } }

/* ---- Videos: galería tipo contact sheet ---- */
.videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video{ position:relative; aspect-ratio:16/9; border:1px solid var(--ink-line); background:var(--ink-2); overflow:hidden; transition:.25s; display:block; }
.video:hover{ border-color:var(--gold-deep); transform:translateY(-2px); }
.video::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(7,7,10,.15) 0%, rgba(7,7,10,.85) 100%);
  pointer-events:none;
}
.video::after{
  content:"▶"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border:1px solid var(--gold); border-radius:50%; z-index:3;
  display:grid; place-items:center; color:var(--gold-2); font-size:18px; padding-left:4px;
  background:rgba(7,7,10,.5); backdrop-filter:blur(4px); transition:.2s;
}
.video:hover::after{ background:var(--gold); color:var(--ink); transform:translate(-50%,-50%) scale(1.06); }
.video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.82; transition:.3s; }
.video:hover img{ opacity:1; }
.video .vmeta{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:14px 16px; }
.video .vmeta b{ font-family:"Special Elite",monospace; font-size:15px; color:var(--cream); display:block; line-height:1.2; }
.video .vmeta small{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); display:block; margin-top:4px; }
@media(max-width:760px){ .videos{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .videos{ grid-template-columns:1fr; } }

/* =================== PÁGINA BANDA =================== */
/* Grilla en base de 6 columnas: 3 integrantes arriba (span 2 c/u) y los
   2 últimos abajo (span 3 c/u) → llena el ancho sin huecos con 5 miembros. */
.lineup{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.member{ grid-column:span 2; background:var(--ink); padding:36px 28px; transition:.3s; position:relative; overflow:hidden; text-align:center; }
.member:nth-last-child(-n+2){ grid-column:span 3; }
.member:hover{ background:var(--ink-2); }
/* foto del integrante: retrato uniforme, clickeable para ampliar */
.member-photo{ display:block; width:100%; max-width:280px; margin:0 auto 24px; padding:0; border:1px solid var(--ink-line); background:var(--ink-2); aspect-ratio:4/5; overflow:hidden; cursor:pointer; position:relative; }
.member-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.member-photo:hover img{ transform:scale(1.06); }
.member-photo::after{ content:"⤢ ampliar"; position:absolute; bottom:0; left:0; right:0; padding:20px 12px 8px; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); background:linear-gradient(transparent, rgba(0,0,0,.75)); opacity:0; transition:.3s; }
.member-photo:hover::after{ opacity:1; }
.member::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity:0; transition:.3s;
}
.member:hover::before{ opacity:1; }
.member .role{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:10px; }
.member .role::before{ content:""; width:24px; height:1px; background:var(--gold-deep); }
.member h3{ font-family:"Special Elite",monospace; font-size:26px; color:var(--cream); margin:0 0 10px; line-height:1.1; }
.member p{ font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin:0; }
.member.leader{ background:linear-gradient(180deg, rgba(200,150,43,.08), var(--ink)); }
.member.leader h3{ color:var(--gold-2); }
@media(max-width:760px){ .lineup{ grid-template-columns:repeat(2,1fr); } .member, .member:nth-last-child(-n+2){ grid-column:auto; } }
@media(max-width:480px){ .lineup{ grid-template-columns:1fr; } .member-photo{ max-width:none; } }

/* Lightbox de fotos */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(6,7,9,.96); display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(88vw,560px); max-height:88vh; object-fit:contain; border:1px solid var(--ink-line); box-shadow:0 30px 90px rgba(0,0,0,.7); }
.lightbox-close{ position:absolute; top:18px; right:24px; background:none; border:0; color:var(--cream); font-size:24px; line-height:1; cursor:pointer; padding:8px; font-family:"Space Mono",monospace; }
.lightbox-close:hover{ color:var(--gold-2); }

/* =================== PÁGINA CONCIERTOS =================== */
.formats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fmt{ border:1px solid var(--ink-line); background:var(--ink-2); padding:32px 26px; position:relative; overflow:hidden; transition:.25s; }
.fmt:hover{ border-color:var(--gold-deep); transform:translateY(-3px); }
.fmt .ic{ width:46px; height:46px; border:1px solid var(--gold-deep); display:grid; place-items:center; color:var(--gold-2); margin-bottom:18px; }
.fmt .ic .spark{ font-size:20px; }
.fmt h3{ font-family:"Special Elite",monospace; font-size:23px; color:var(--cream); margin:0 0 10px; }
.fmt p{ font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin:0; }
@media(max-width:760px){ .formats{ grid-template-columns:repeat(2,1fr); } .fmt:last-child{ grid-column:1/-1; max-width:360px; margin:0 auto; width:100%; } }
@media(max-width:480px){ .formats{ grid-template-columns:1fr; } .fmt:last-child{ max-width:none; } }

/* feature tour fluvial */
.river-feat{ position:relative; overflow:hidden; border:1px solid var(--ink-line); background:
  radial-gradient(80% 120% at 80% 20%, rgba(69,88,96,.22), transparent 60%), var(--ink-2); padding:54px 48px; }
.river-feat .rain{ opacity:.08; }
.river-feat .rf-inner{ position:relative; z-index:2; max-width:60ch; }
.river-feat .tagn{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--river-2); }
.river-feat h2{ font-family:"Special Elite",monospace; font-size:clamp(28px,4.4vw,46px); color:var(--cream); margin:12px 0 16px; }
.river-feat p{ color:var(--cream-2); font-size:16px; margin:0 0 24px; }
@media(max-width:760px){ .river-feat{ padding:36px 24px; } }

/* =================== PÁGINA PRENSA =================== */
/* EPK bar */
.epk-bar{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  border:1px solid var(--gold-deep); background:linear-gradient(135deg,rgba(200,150,43,.07),var(--ink-2)); padding:36px 40px; }
.epk-actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
@media(max-width:700px){ .epk-bar{ padding:28px 24px; } }

/* Bio tabs */
.bio-tabs{ display:flex; gap:0; margin-bottom:34px; border-bottom:1px solid var(--ink-line); }
.bio-tab{ background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-dim); padding:10px 20px 12px; transition:.2s; margin-bottom:-1px; }
.bio-tab:hover{ color:var(--cream); }
.bio-tab.active{ color:var(--gold-2); border-bottom-color:var(--gold); }
.bio-body p{ color:var(--cream-2); font-size:16px; margin:0 0 18px; line-height:1.72; }
.bio-body p strong{ color:var(--gold-2); font-weight:400; }

/* Press stats */
.press-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); margin-top:24px; }
.press-stats>div{ background:var(--ink); padding:24px 20px; text-align:center; }
.press-stats b{ display:block; font-family:"Special Elite",monospace; font-size:clamp(26px,3.5vw,40px); color:var(--cream); line-height:1; }
.press-stats b span{ color:var(--gold-2); }
.press-stats small{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--river-2); display:block; margin-top:8px; }
@media(max-width:860px){ .press-stats{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .press-stats{ grid-template-columns:repeat(2,1fr); } }

/* Timeline */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--ink-line); }
.tl-item{ display:grid; grid-template-columns:80px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--ink-line); position:relative; }
.tl-item::before{ content:""; position:absolute; left:-36px; top:32px; width:9px; height:9px; border-radius:50%; background:var(--ink-line); border:1px solid var(--ink-line); }
.tl-item.next::before{ background:var(--gold); border-color:var(--gold); }
.tl-yr{ font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.1em; color:var(--gold); padding-top:4px; }
.tl-body h3{ font-family:"Special Elite",monospace; font-size:20px; color:var(--cream); margin:0 0 8px; }
.tl-body p{ font-family:"Bitter",serif; font-size:14.5px; color:var(--cream-dim); margin:0; }
.tl-item.next .tl-body h3{ color:var(--gold-2); }
@media(max-width:600px){ .tl-item{ grid-template-columns:60px 1fr; gap:14px; } .timeline{ padding-left:20px; } }

/* Rider */
.rider{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rider-fmt{ border:1px solid var(--ink-line); background:var(--ink-2); padding:30px 26px; }
.rider-icon{ width:40px; height:40px; border:1px solid var(--gold-deep); display:grid; place-items:center; color:var(--gold-2); margin-bottom:16px; }
.rider-fmt h3{ font-family:"Special Elite",monospace; font-size:21px; color:var(--cream); margin:0 0 14px; }
.rider-fmt ul{ list-style:none; margin:0; padding:0; }
.rider-fmt ul li{ font-family:"Bitter",serif; font-size:14px; color:var(--cream-dim); padding:5px 0; border-bottom:1px dotted var(--ink-line); display:flex; gap:10px; }
.rider-fmt ul li::before{ content:"—"; color:var(--gold-deep); flex-shrink:0; }
@media(max-width:760px){ .rider{ grid-template-columns:1fr; } }