/* Tipografías servidas desde el propio sitio (v1.3). Antes venían de Google
   Fonts: el navegador tenía que conectarse a otro servidor antes de dibujar.
   Son las versiones variables (todos los grosores en un archivo), solo con
   los caracteres latinos, que alcanzan para el español. */
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(assets/fuentes/bricolage-grotesque.woff2) format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(assets/fuentes/inter.woff2) format("woff2");
}
/* Letras de reemplazo con las medidas de las de verdad (v1.4). Mientras
   llega la tipografía se ve Arial; sin esto, al cambiar, el título se
   angostaba y movía todo el inicio (PageSpeed: CLS 0,151 en compu).
   size-adjust sale de medir el texto real en el navegador: Bricolage 800
   es un 83,16% del ancho de Arial Bold, Inter un 105,36% de Arial.
   ascent/descent: medidas de cada tipografía divididas por ese ajuste. */
@font-face{
  font-family:"Bricolage Fallback"; src:local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust:83.16%; ascent-override:111.83%; descent-override:32.47%; line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback"; src:local("Arial"), local("ArialMT");
  size-adjust:105.36%; ascent-override:91.97%; descent-override:22.97%; line-gap-override:0%;
}

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  /* Negro neutro: deja que el ámbar sea el único color de la página */
  --bg:        #0C0C0D;
  --bg-2:      #131315;
  --bg-3:      #1A1A1D;
  --bg-4:      #232327;

  --cream:     #F2F0EB;
  --cream-2:   #ADAAA3;
  --cream-3:   #86827B;   /* v1.4: antes #75726C, contraste 4,08 (mínimo 4,5); ahora 5,11 */

  --accent:    #D08F4A;
  --accent-2:  #A86B33;
  --gold:      #E0A868;

  --line:      rgba(242,240,235,.13);
  --line-soft: rgba(242,240,235,.06);

  --accent-ink:  #17100A;
  --accent-glow: rgba(208,143,74,.45);
  --nav-bg:      rgba(12,12,13,.96);
  --nav-fade:    rgba(12,12,13,.85);
  --mesh-1:      rgba(208,143,74,.12);
  --mesh-2:      rgba(208,143,74,.06);
  --mesh-3:      rgba(242,240,235,.04);
  --texture:     rgba(242,240,235,.035);

  /* Dos familias, no cuatro. Bricolage tiene pesos de verdad, así que la
     jerarquía no depende del tamaño. */
  --display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Helvetica Neue', sans-serif;
  --serif:   'Bricolage Grotesque', 'Bricolage Fallback', 'Helvetica Neue', sans-serif;
  --sans:    'Inter', 'Inter Fallback', -apple-system, sans-serif;
  --mono:    'Inter', 'Inter Fallback', -apple-system, sans-serif;

  /* Color de los surcos del fondo — cada sección lo redefine */
  --surco: var(--accent);

  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-soft:   cubic-bezier(.25,.46,.45,.94);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  --nav-h: 88px;
  --container: 1520px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-y:none;
}
img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; line-height:1.02; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--accent); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--cream); color:var(--bg);
  border-radius:6px; font-weight:600; font-size:14px;
  transition:top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px, 4vw, 64px); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent); display:inline-block;
}
em{
  font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold);
}

/* Reveal-on-scroll --------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; } /* defensive: split-text handles its own reveal */

.split-word{ display:inline-block; overflow:hidden; }
.split-word > span{ display:inline-block; transform:translateY(110%); transition:transform .7s var(--ease-out); }
.split-word.is-visible > span{ transform:none; }

/* Grain overlay -------------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
  /* Sin mix-blend-mode: mezclar toda la pantalla contra el fondo animado
     costaba un pase completo de la placa en cada cuadro (v1.2). */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =============================================================
   4. Typography
   ============================================================= */
h1,h2,h3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.005em; font-weight:400; }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); }
h3{ font-size:1.15rem; }
p.lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--cream-2); max-width:60ch; }
.section-kicker{ margin-bottom:18px; }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-family:var(--mono); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--ease-out), background .3s, color .3s, box-shadow .3s;
}
.btn-primary{
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  box-shadow:0 10px 30px -12px var(--accent-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -12px var(--accent-glow); }
.btn-ghost{
  border:1px solid var(--line); color:var(--cream);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn[data-magnetic]{ will-change:transform; }

/* Nav --------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  background:linear-gradient(180deg, var(--nav-fade), transparent);
  transition:background .4s var(--ease-out), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  /* Sin backdrop-filter: desenfocar el fondo animado se recalculaba en cada
     cuadro. Con el fondo al 96% no se notaba la diferencia (v1.2). */
  background:var(--nav-bg);
  border-bottom-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand-mark{ font-family:var(--display); font-size:22px; letter-spacing:.03em; text-transform:uppercase; }
.brand-mark span{ color:var(--accent); }
.nav-links{ display:none; align-items:center; gap:30px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.nav-links a{ position:relative; padding-bottom:4px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
  transition:right .35s var(--ease-out);
}
.nav-links a:hover::after{ right:0; }
@media (min-width:960px){ .nav-links{ display:flex; } }
.nav-cta{ display:none; }
@media (min-width:720px){ .nav-cta{ display:inline-flex; padding:11px 22px; } }

/* Hero ---------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px;
  overflow:clip;
}
.hero-mesh{
  position:absolute; inset:-10% -10% auto -10%; height:130%; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 46% at 22% 18%, var(--mesh-1), transparent 76%),
    radial-gradient(44% 40% at 82% 8%, var(--mesh-2), transparent 78%),
    radial-gradient(66% 56% at 50% 100%, var(--mesh-3), transparent 80%);
  /* Los degradados ya son suaves: el blur(70px) era muy caro y casi no se veía (v1.2) */
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(2%,3%,0) scale(1.08); }
}
.hero-inner{ position:relative; z-index:2; }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:26px; font-family:var(--mono); font-size:12.5px; color:var(--cream-2); text-transform:uppercase; letter-spacing:.06em; }
.hero-meta .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; }
.hero-title{
  font-size:clamp(3.4rem, 12vw, 9.5rem); line-height:.86; max-width:16ch;
}
.hero-title .line{ display:block; }
.hero-sub{
  margin-top:28px; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2vw,1.55rem); color:var(--cream-2); max-width:44ch;
}
.hero-actions{ margin-top:44px; display:flex; flex-wrap:wrap; gap:16px; }
.hero-scroll{
  position:absolute; left:24px; bottom:28px; z-index:2; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-2);
}
.hero-scroll-line{ width:1px; height:38px; background:linear-gradient(var(--cream-3), transparent); position:relative; overflow:hidden; }
.hero-scroll-line::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--accent);
  transform:translateY(-100%);
  animation:scrollLine 2.2s ease-in-out infinite;
}
/* Con transform y no con top: así no recalcula la página en cada cuadro */
@keyframes scrollLine{ 0%{ transform:translateY(-100%); } 60%, 100%{ transform:translateY(100%); } }

/* Stat strip ------------------------------------------------------------------ */
.stat-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:30px 22px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat-num{ font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--cream); }
.stat-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); margin-top:6px; }

/* Manifesto ------------------------------------------------------------------- */
.manifesto{ padding-block:130px; position:relative; }
.manifesto-grid{ display:grid; gap:48px; }
@media (min-width:900px){ .manifesto-grid{ grid-template-columns:.85fr 1.15fr; gap:70px; } }
.manifesto-quote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.32; color:var(--cream);
  position:relative; padding-left:26px; border-left:2px solid var(--accent);
}
.manifesto-body p{ margin-top:20px; color:var(--cream-2); max-width:56ch; }
.manifesto-body p:first-child{ margin-top:0; }
.pillars{ margin-top:52px; display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.pillar{ padding-top:20px; border-top:1px solid var(--line); }
.pillar-num{ font-family:var(--mono); font-size:12px; color:var(--accent); }
.pillar h3{ margin-top:10px; }
.pillar p{ margin-top:10px; font-size:14.5px; color:var(--cream-3); }

/* Section shell ---------------------------------------------------------------- */
.section{ padding-block:120px; position:relative; }
.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:56px; max-width:64ch; }

/* Album ---------------------------------------------------------------------- */
.album{ background:var(--bg-2); }
.album-layout{ display:grid; gap:56px; }
@media (min-width:960px){ .album-layout{ grid-template-columns:.72fr 1.28fr; align-items:start; } }

.vinyl-frame{
  position:relative; aspect-ratio:1/1; max-width:420px;
  border-radius:14px; overflow:visible;
}
.vinyl-cover{
  position:absolute; inset:0; border-radius:14px; z-index:3;
  background:
    linear-gradient(155deg, var(--bg-4), var(--bg-2) 60%),
    repeating-linear-gradient(115deg, var(--texture) 0 2px, transparent 2px 6px);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px;
  padding:30px;
}
.vinyl-cover .cover-title{ font-family:var(--display); font-size:1.6rem; letter-spacing:.04em; }
.vinyl-cover .cover-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-3); }
.vinyl-cover .cover-note{ margin-top:14px; font-size:12px; color:var(--cream-3); border:1px dashed var(--line); padding:8px 12px; border-radius:8px; }
.vinyl-disc{
  position:absolute; top:14%; right:-14%; width:72%; aspect-ratio:1/1; border-radius:50%; z-index:1;
  background:
    repeating-radial-gradient(circle at 50% 50%, #0c0906 0 2px, #171009 2px 4px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  animation:spin 14s linear infinite paused;
}
.vinyl-frame:hover .vinyl-disc, .vinyl-frame.is-visible .vinyl-disc{ animation-play-state:running; }
.vinyl-disc::after{
  content:""; position:absolute; inset:38%; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--bg-2);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .vinyl-disc{ animation:none !important; } }

.tracklist{ border-top:1px solid var(--line); }
.track{
  display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:center;
  padding:15px 6px; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease-out), background .3s;
}
.track:hover{ padding-left:14px; background:var(--line-soft); }
.track-n{ font-family:var(--mono); color:var(--cream-3); font-size:13px; }
.track-name{ font-size:15.5px; }
.track-time{ font-family:var(--mono); font-size:12.5px; color:var(--cream-3); }
.album-meta-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:22px; font-family:var(--mono); font-size:11.5px; color:var(--cream-3); }
.album-cta{ margin-top:30px; display:flex; gap:16px; flex-wrap:wrap; }

/* Marquee ---------------------------------------------------------------------- */
.marquee-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:var(--bg-3); }
.marquee{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee-group{ display:flex; align-items:center; }
.marquee span{
  font-family:var(--display); font-size:clamp(1.6rem,4vw,2.6rem); text-transform:uppercase;
  padding-inline:26px; color:var(--cream-3); white-space:nowrap;
}
.marquee span em{ color:var(--accent); font-family:inherit; font-style:normal; }
.marquee span::after{ content:"—"; margin-left:52px; color:var(--accent); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee{ animation-duration:70s; } }

/* Shows ---------------------------------------------------------------------- */
.next-show{
  border:1px solid var(--line); border-radius:18px; padding:clamp(28px,4vw,52px);
  background:linear-gradient(155deg, var(--bg-3), var(--bg-2)); position:relative; overflow:hidden;
}
.next-show::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:80%;
  background:radial-gradient(58% 58% at 20% 0%, var(--mesh-1), transparent 80%);
  pointer-events:none;
}
.next-show-grid{ position:relative; display:grid; gap:34px; }
@media (min-width:820px){ .next-show-grid{ grid-template-columns:1.2fr 1fr; align-items:center; } }
.next-show h3{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:10px; }
.next-show .venue{ margin-top:10px; color:var(--cream-2); font-size:15.5px; }
.countdown{ display:flex; gap:14px; margin-top:26px; }
.countdown-cell{ text-align:center; min-width:64px; }
.countdown-num{ font-family:var(--display); font-size:clamp(1.8rem,3.4vw,2.4rem); color:var(--accent); font-variant-numeric:tabular-nums; }
.countdown-label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); margin-top:4px; }
.next-show-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

.show-aviso{ font-family:var(--mono); font-size:11px; color:var(--cream-3); text-transform:uppercase; letter-spacing:.06em; }

/* Las otras fechas a la venta, debajo del destacado (v1.7) */
.otros-shows:empty{ display:none; }
.otros-shows{ margin-top:26px; display:grid; gap:2px; }
.otros-show{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:16px 2px; border-bottom:1px solid var(--line);
}
.otros-show:first-child{ border-top:1px solid var(--line); }
.otros-show-fecha{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); min-width:104px; }
.otros-show-lugar{ font-size:15.5px; color:var(--cream-2); flex:1 1 220px; }
.otros-show-link{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-3); border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .3s, border-color .3s; }
.otros-show-link:hover{ color:var(--accent); border-color:var(--accent); }
.otros-show-sin{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-3); }

/* Link a la agenda completa, debajo del próximo show */
.shows-mas{ margin-top:28px; text-align:right; }
.shows-mas a{
  font-family:var(--mono); font-size:12px; color:var(--cream-3); text-transform:uppercase;
  letter-spacing:.1em; padding-bottom:4px; border-bottom:1px solid var(--line);
  transition:color .3s, border-color .3s;
}
.shows-mas a:hover{ color:var(--accent); border-color:var(--accent); }
/* Sin fechas, el bloque de arriba ya invita a seguirlos en Instagram */
[data-sin-shows] .shows-mas{ display:none; }

/* Press ---------------------------------------------------------------------- */
.press-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:720px){ .press-grid{ grid-template-columns:repeat(2,1fr); } }
.press-card{
  background:var(--bg); padding:30px; display:flex; flex-direction:column; gap:12px;
  transition:background .3s;
}
.press-card .p-outlet{ font-family:var(--display); font-size:1.35rem; text-transform:uppercase; }
.press-card p{ color:var(--cream-3); font-size:14px; }

/* Contact ---------------------------------------------------------------------- */
.contact{ background:var(--bg-2); }
.contact-layout{ display:grid; gap:60px; }
@media (min-width:960px){ .contact-layout{ grid-template-columns:.85fr 1.15fr; } }
.contact-direct{ padding-top:6px; }
.contact-name{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.2rem); margin-top:10px; }
.contact-phone{ margin-top:16px; font-family:var(--mono); font-size:16px; color:var(--accent); }
.contact-note{ margin-top:20px; color:var(--cream-3); font-size:14px; max-width:40ch; }

.form{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); }
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:12px 2px; color:var(--cream); font-family:var(--sans); font-size:16px;
  transition:border-color .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
.field textarea{ resize:vertical; min-height:96px; }
.form-row{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-submit{ margin-top:6px; align-self:flex-start; position:relative; }
.form-submit .check{ width:16px; height:16px; }
.form-status{ margin-top:16px; font-family:var(--mono); font-size:12.5px; color:var(--accent); min-height:18px; }

/* Footer ---------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding-block:52px; }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center; }
.footer-brand{ font-family:var(--display); font-size:1.4rem; text-transform:uppercase; }
.footer-links{ display:flex; gap:22px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.footer-links a:hover{ color:var(--accent); }
.footer-fine{ margin-top:26px; font-size:12px; color:var(--cream-3); }

/* =============================================================
   6. Reduced motion — only truly intrusive effects
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-mesh{ animation:none; }
  .reveal, .split-word > span{ transition-duration:.2s; }
}

/* ==========================================================================
   Material real de la banda — logos, fotos, integrantes
   Bloque agregado al incorporar las imágenes originales (2026-09-12).
   ========================================================================== */

/* Logos ------------------------------------------------------------------- */
.brand-mark{ display:flex; align-items:center; }
.brand-mark img{ height:19px; width:auto; display:block; }
.footer-brand{ height:26px; width:auto; display:block; }

/* Hero con foto ------------------------------------------------------------ */
.hero-photo{ margin:0; }
.hero-photo img{
  display:block; width:100%; height:auto; border-radius:16px;
  /* La foto es un círculo blanco más grande que el cuadro, con esquinas negras.
     La máscara recorta justo ese círculo (medido sobre la foto: centro 50,4% /
     51,2%, radio 64,5% del ancho): sin esto, las esquinas tapaban los surcos
     y se veía un rectángulo oscuro. La segunda capa esfuma los dos costados
     rectos, donde el círculo se sale de la foto. */
  -webkit-mask-image:
    radial-gradient(64.5% 51.6% at 50.4% 51.2%, #000 99%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(64.5% 51.6% at 50.4% 51.2%, #000 99%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite:intersect;
}
@media (max-width:900px){
  .hero{ min-height:auto; padding-bottom:40px; }
  .hero-inner{ display:flex; flex-direction:column-reverse; gap:26px; }
  .hero-photo img{ max-height:38vh; width:auto; margin:0 auto; }
}
@media (min-width:901px){
  .hero-inner{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(32px,5vw,72px); align-items:center;
  }
  .hero-title{ font-size:clamp(3rem,7.4vw,6.6rem); max-width:12ch; }
  .hero-photo img{ max-height:74vh; width:auto; margin-left:auto; }
}

/* Tapa del disco (ahora es una imagen, no el placeholder) ------------------- */
img.vinyl-cover{
  width:100%; height:100%; object-fit:cover; padding:0; background:none;
  display:block; box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
}

/* Los siete ---------------------------------------------------------------- */
/* Son siete: con flex la última fila queda centrada (4 + 3) en vez de
   dejar dos tarjetas sueltas contra el margen izquierdo. */
.miembros-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.miembro{
  flex:0 1 calc(25% - 14px); min-width:190px;
  position:relative; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:var(--bg-2);
}
.m-foto{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--bg-3); }
.m-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  transition:opacity .5s var(--ease-out), transform .8s var(--ease-out);
}
/* Al pasar el mouse, el retrato de estudio da paso a la foto en vivo. */
.m-foto-vivo{ opacity:0; }
.miembro:hover .m-foto-vivo{ opacity:1; }
.miembro:hover .m-foto img{ transform:scale(1.04); }
.m-info{ padding:16px 18px 20px; }
.m-info h3{ font-family:var(--display); text-transform:uppercase; font-size:1.35rem; letter-spacing:.03em; }
.m-rol{
  display:block; margin-top:4px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.m-frase{ margin-top:10px; font-size:.92rem; color:var(--cream-2); }
.m-ig{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3);
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
.m-ig:hover{ color:var(--accent); border-color:var(--accent); }

/* Agenda vacía — cuando no hay ninguna fecha cargada ------------------------ */
.next-show-empty{ text-align:center; padding:12px 0 4px; }
.next-show-empty h3{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.6rem); margin:10px 0 14px;
}
.next-show-empty .lede{ margin:0 auto 26px; max-width:46ch; }

@media (prefers-reduced-motion: reduce){
  .m-foto img{ transition:none; }
  .miembro:hover .m-foto img{ transform:none; }
}

/* Datos del show: puertas, precio y formas de pago ------------------------- */
.show-puertas{ margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-3); }
.show-precio{ margin-top:12px; font-family:var(--display); font-size:1.15rem; letter-spacing:.03em; }
.show-pagos{ margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--cream-3); max-width:34ch; }



/* ==========================================================================
   DIRECCIÓN VISUAL "HUELLA"
   Tipografía en dos familias y surcos dactilares de fondo.
   ========================================================================== */



/* =============================================================
   1. Tipografía
   ============================================================= */

/* Fuera la versalita forzada: en minúscula se lee mejor y es lo que
   te gustó de la propuesta B. */
h1,h2,h3{
  font-family:var(--display); font-weight:800;
  text-transform:none; letter-spacing:-.03em; line-height:1.02;
}
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); }

/* Estos títulos tienen su propia regla de mayúscula, más específica que
   la de arriba, así que hay que bajarlos uno por uno. */
.m-info h3, .next-show-grid h3, .next-show-empty h3{
  text-transform:none; letter-spacing:-.02em; font-weight:600;
}
.m-info h3{ font-size:1.12rem; line-height:1.15; }

/* El titular: de 152px a ~85px. La fuerza la da el peso, no el tamaño. */
.hero-title{
  font-size:clamp(2.7rem,6.6vw,5.3rem); line-height:.98; max-width:11ch;
  letter-spacing:-.035em;
}

/* Al achicarse el titular, la foto se comía la composición: se le baja
   el alto y se le da más ancho a la columna de texto. */
@media (min-width:901px){
  .hero-inner{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); align-items:center; }
  .hero-photo img{ max-height:60vh; }
}

/* Antes era Newsreader en itálica — lo que no te gustaba. Ahora es el
   mismo texto en Inter, con cuerpo un poco mayor. */
.hero-sub, .manifesto-quote{
  font-family:var(--sans); font-style:normal; font-weight:400;
}
.hero-sub{ font-size:clamp(1.02rem,1.5vw,1.15rem); color:var(--cream-2); max-width:40ch; }
.manifesto-quote{
  font-family:var(--display); font-weight:600; font-style:normal;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.2; letter-spacing:-.02em;
}
/* `em` ya no es una serif dorada: es la misma letra, en color */
em{ font-family:inherit; font-style:normal; font-weight:inherit; color:var(--accent); }

/* Las etiquetas chicas dejan la monoespaciada, pero conservan el
   espaciado que las hacía leerse como etiqueta. */
.eyebrow, .nav-links, .stat-label, .countdown-label, .hero-meta,
.m-rol, .show-puertas, .footer-links, .show-aviso{
  font-weight:500; letter-spacing:.1em;
}
.btn{ font-family:var(--sans); font-weight:600; letter-spacing:.02em; text-transform:none; font-size:14px; }
.track-n, .track-time, .countdown-num{ font-variant-numeric:tabular-nums; }
.countdown-num, .stat-num{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; }

/* =============================================================
   2. El fondo: una huella dactilar quieta (v1.2)
   -------------------------------------------------------------
   Un dibujo fijo detrás de todo: assets/huella-fondo.svg, que sale
   de .herramientas/generar-huella.py. No se recalcula nunca. Al
   hacer scroll solo cambia el color: son dos capas con el mismo
   dibujo y una aparece mientras la otra se apaga (initHuellaFondo
   en main.js). Cambiar opacidades no obliga a redibujar la página.
   ============================================================= */
.hero, .section, .stat-strip{ position:relative; overflow:clip; }

.huella-fondo{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.huella-capa{
  position:absolute; inset:0;
  /* Apagada queda oculta del todo: así, al cargar, el navegador pinta una sola
     capa y no dos (v1.3). Se oculta recién cuando termina de apagarse. */
  background:var(--surco); opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease-out), visibility 0s linear .9s;
  /* El dibujo es cuadrado y cubre toda la pantalla, con el núcleo al centro */
  -webkit-mask:url(assets/huella-fondo.svg) center/cover no-repeat;
          mask:url(assets/huella-fondo.svg) center/cover no-repeat;
}
/* Pantalla vertical (celular): con "cover" el dibujo se achicaría y los
   surcos quedarían amontonados. Se agranda y se ve la zona del núcleo. */
@media (orientation: portrait){
  .huella-capa{ -webkit-mask-size:auto 200vh; mask-size:auto 200vh; }
}
/* Baja a propósito: al 30% los surcos competían con el texto (2026-09-13) */
.huella-capa.activa{ opacity:.2; visibility:visible; transition:opacity .9s var(--ease-out), visibility 0s; }
@media (max-width:700px){ .huella-capa.activa{ opacity:.18; } }
/* Con "reducir movimiento" el color cambia de una: un fundido también es movimiento */
@media (prefers-reduced-motion: reduce){ .huella-capa, .huella-capa.activa{ transition:none; } }

/* El contenido, siempre por encima de la huella */
.hero > *, .section > *{ position:relative; z-index:1; }

/* Un color de surco por sección — el recorrido del disco, sin gritar */
#inicio      { --surco:#D08F4A; }   /* ámbar */
#nosotros    { --surco:#6E8B6A; }   /* verde seco */
#integrantes { --surco:#C9C3B6; }   /* hueso */
#album       { --surco:#8C7BA6; }   /* violeta apagado */
#shows       { --surco:#9E5060; }   /* vino */
#prensa      { --surco:#6E8B6A; }
#contacto    { --surco:#D08F4A; }

.hero-mesh{ opacity:.35; }           /* los halos borrosos ceden el lugar */
.hero-photo{ position:relative; z-index:2; }


/* El contenido sigue estando por encima de la huella.
   Antes era `body > *`: le sacaba el position:fixed al menú y a la pantalla
   de carga, que quedaba ocupando ~147 px arriba aunque estuviera oculta. */
main, .site-footer{ position:relative; z-index:1; }

/* ==========================================================================
   Ajustes finales del prototipo
   ========================================================================== */

/* --- Transición del fondo -------------------------------------------------
   Estas dos secciones tapaban la huella con un fondo opaco, y el corte se
   veía de golpe al hacer scroll. Ahora el fondo entra y sale con un
   degradado: la huella se disuelve en lugar de desaparecer. */
.album, .contact{
  background:linear-gradient(180deg,
    transparent 0,
    var(--bg-2) 13%,
    var(--bg-2) 87%,
    transparent 100%);
}

/* --- Marquee ---------------------------------------------------------------
   Estaba en 41px y en mayúscula: se comía la pantalla. Pasa a ser una
   cinta discreta, del tamaño de una etiqueta, y se desvanece en las
   puntas en vez de cortarse contra el borde. */
.marquee-wrap{
  background:transparent;
  border-color:var(--line-soft);
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee{ animation-duration:58s; }
.marquee span{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-3); padding-inline:18px; padding-block:14px;
}
.marquee span em{ color:var(--accent); letter-spacing:.16em; }
.marquee span::after{ content:"·"; margin-left:18px; color:var(--cream-3); }

/* --- Aparición del texto ---------------------------------------------------
   Cada palabra entra desenfocada y se va enfocando, con un retardo
   escalonado. Lo arma initTextReveal() en main.js. */
.tr-w{
  display:inline-block; opacity:0;
  transform:translateY(.28em);
  /* Antes entraban también desenfocadas: un filtro por palabra, decenas a
     la vez mientras se hace scroll. Ahora solo fundido y subida (v1.2). */
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.tr-w.on{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .tr-w{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Distribución a lo ancho (2026-09-13)
   En compu todo quedaba en una columna de 1180 px, centrada, con el menú
   corrido hacia abajo. Ahora el menú va pegado arriba y más grande, y el
   contenido aprovecha el ancho de la pantalla. En celular casi no cambia.
   ========================================================================== */

/* Menú */
.brand-mark img{ height:clamp(20px, 2vw, 28px); }
.nav-links{ font-size:13.5px; gap:clamp(22px, 2.4vw, 40px); }
@media (min-width:720px){ .nav-cta{ padding:13px 26px; font-size:15px; } }
@media (max-width:719px){ :root{ --nav-h:68px; } }

/* Hero: arranca arriba, en vez de flotar en el medio de la pantalla */
@media (min-width:901px){
  .hero{ justify-content:flex-start; padding-top:calc(var(--nav-h) + clamp(32px, 7vh, 96px)); }
  .hero-inner{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .hero-title{ font-size:clamp(3rem, 5.6vw, 6.2rem); max-width:none; }
  .hero-sub{ max-width:48ch; }
  .hero-photo img{ max-height:min(72vh, 820px); }
}
.hero-scroll{ left:clamp(20px, 4vw, 64px); }

/* En celular la línea de arriba del título quedaba en 3 renglones */
@media (max-width:719px){ .solo-compu{ display:none; } }

/* Los siete en una sola fila cuando entran */
@media (min-width:1440px){
  .miembros-grid{ flex-wrap:nowrap; }
  .miembro{ flex:1 1 0; min-width:0; }
  .m-info{ padding:14px 14px 18px; }
  .m-info h3{ font-size:1rem; }
}

/* Prensa: tres columnas en pantallas anchas */
@media (min-width:1100px){ .press-grid{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   v1.2 — celular
   ========================================================================== */

/* Los siete de a dos: uno abajo del otro eran ~3100 px de scroll.
   Son siete, así que el último queda solo y centrado. */
@media (max-width:719px){
  .miembros-grid{ gap:12px; }
  .miembro{ flex:0 1 calc(50% - 6px); min-width:0; border-radius:12px; }
  .m-info{ padding:12px 12px 14px; }
  .m-info h3{ font-size:1rem; line-height:1.15; }
  .m-rol{ font-size:10px; letter-spacing:.06em; }
  .m-ig{
    display:block; max-width:100%; margin-top:10px; font-size:10px; letter-spacing:.03em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:0;
  }
}

/* Menú en celular y tablet: botón "Menú" que abre las secciones a pantalla
   completa. Son los mismos links del menú de compu, no una copia.
   v1.6: letras más chicas (en un celular de 375 px pasan de ~34 a ~24 px). */
.nav-toggle{ display:none; }
@media (max-width:959px){
  .brand-mark{ position:relative; z-index:2; }
  .nav-cta{ position:relative; z-index:2; margin-left:auto; }
  .nav-toggle{
    position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px;
    margin-left:12px; padding:11px 18px; min-height:44px;
    border:1px solid var(--line); border-radius:100px; background:transparent; color:var(--cream);
    font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  }
  .nav-toggle-icon{ position:relative; width:16px; height:10px; }
  .nav-toggle-icon::before, .nav-toggle-icon::after{
    content:""; position:absolute; left:0; top:50%; width:100%; height:1.5px; margin-top:-.75px;
    background:currentColor; transition:transform .3s var(--ease-out);
  }
  .nav-toggle-icon::before{ transform:translateY(-4px); }
  .nav-toggle-icon::after{ transform:translateY(4px); }
  .menu-abierto .nav-toggle-icon::before{ transform:rotate(45deg); }
  .menu-abierto .nav-toggle-icon::after{ transform:rotate(-45deg); }

  .nav .nav-links{
    position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;
    align-items:flex-start; justify-content:center; gap:clamp(8px, 2vh, 16px);
    padding:calc(var(--nav-h) + 16px) clamp(20px, 4vw, 64px) 40px;
    background:var(--bg); overflow-y:auto;
    font-family:var(--display); font-size:clamp(1.5rem, 6.5vw, 2.25rem); font-weight:600;
    letter-spacing:.01em; text-transform:uppercase;
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility 0s linear .3s;
  }
  .nav.menu-abierto .nav-links{ opacity:1; visibility:visible; transition:opacity .3s var(--ease-out); }
  .nav .nav-links a{ padding-block:4px; }
  .nav .nav-links a:hover, .nav .nav-links a:focus-visible{ color:var(--accent); }
  .nav .nav-links a::after{ display:none; }
  html.menu-abierto{ overflow:hidden; }
}
@media (max-width:959px) and (prefers-reduced-motion: reduce){
  .nav .nav-links, .nav.menu-abierto .nav-links, .nav-toggle-icon::before, .nav-toggle-icon::after{ transition:none; }
}

/* En celular y tablet el indicador "Scroll" quedaba encima del botón
   "Ver próximo show". Ahí todos saben que se baja: se oculta (v1.2). */
@media (max-width:900px){ .hero-scroll{ display:none; } }

/* v1.5: la línea de arriba del título y "Scroll" van en el gris claro. Están
   sobre las líneas de la huella: con el gris oscuro el contraste bajaba a 3,84
   justo encima de una línea (mínimo 4,5); así queda en 6,32. */

/* Botón "subir" (v1.6): en celular la página mide casi 12 pantallas. Aparece
   después de pantalla y media y se esconde con el menú abierto. */
.subir{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:40;
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border:1px solid var(--line); border-radius:50%; background:var(--nav-bg); color:var(--cream);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.subir.visible{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.subir:hover, .subir:focus-visible{ color:var(--accent); border-color:var(--accent); }
html.menu-abierto .subir{ opacity:0; visibility:hidden; }
@media (min-width:960px){ .subir{ right:28px; bottom:28px; } }
@media (prefers-reduced-motion: reduce){ .subir, .subir.visible{ transition:none; transform:none; } }

/* =============================================================
   Prototipo A (2026-10-05): los 5 cambios para mostrarle a la banda
   ============================================================= */

/* 1. Barra fija con el próximo show ------------------------------------- */
.barra-show{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--bg-2); border-top:1px solid var(--line);
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.barra-show.oculta, html.menu-abierto .barra-show{ transform:translateY(120%); opacity:0; pointer-events:none; }
.barra-show-inner{ max-width:var(--container); margin-inline:auto; display:flex; align-items:center; gap:14px; }
.barra-show-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; color:var(--cream); }
.barra-show-cuando{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.barra-show-donde{ font-family:var(--display); font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra-show .btn{ padding:12px 20px; font-size:12px; flex:none; }
html.con-barra .subir{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
html.con-barra .site-footer{ padding-bottom:calc(52px + 80px); }
@media (min-width:960px){
  .barra-show{
    left:0; right:0; bottom:24px; margin-inline:auto; width:fit-content; max-width:calc(100% - 200px);
    border:1px solid var(--line); border-radius:100px; padding:8px 8px 8px 24px;
    box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  }
  .barra-show-inner{ gap:22px; }
  html.con-barra .subir{ bottom:28px; }
}
@media (prefers-reduced-motion: reduce){ .barra-show{ transition:none; } }

/* 2. Cómo llegar, Agendalo y Mandáselo a un amigo ------------------------ */
.show-extras{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.show-extra{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border:1px solid var(--line); border-radius:100px; color:var(--cream);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  transition:border-color .3s, color .3s;
}
.show-extra:hover, .show-extra:focus-visible{ border-color:var(--accent); color:var(--accent); }
.show-extra svg{ width:16px; height:16px; flex:none; }

/* 5. Reproductor en el inicio ------------------------------------------- */
.hero-player{ margin-top:20px; max-width:520px; }
.hero-player iframe{ display:block; width:100%; height:152px; border:0; border-radius:12px; background:var(--bg-3); }
.hero-player-link{
  display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cream-3); border-bottom:1px solid var(--line); padding-bottom:2px;
}

/* 4. Fotos en vivo en el celular ---------------------------------------- */
.m-vivo-chip{ display:none; }
@media (hover: none){
  .m-foto{ cursor:pointer; }
  .miembro.vivo-on .m-foto-vivo{ opacity:1; }
  .m-vivo-chip{
    display:inline-flex; align-items:center; gap:6px; position:absolute; left:8px; bottom:8px; z-index:2;
    padding:5px 9px; border-radius:100px; background:rgba(12,12,13,.78); color:var(--cream);
    font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  }
  .m-vivo-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cream-3); }
  .miembro.vivo-on .m-vivo-chip::before{ background:#E5484D; }
}

/* =============================================================
   Prototipo B (2026-10-05): todos los cambios
   ============================================================= */

/* En vivo: una tira que se desliza con el dedo, primero el lugar del video */
.envivo .section-head{ margin-bottom:28px; }
.envivo-tira{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(20px, 4vw, 64px);
  margin-inline:calc(-1 * clamp(20px, 4vw, 64px)); padding-inline:clamp(20px, 4vw, 64px);
  padding-bottom:6px; scrollbar-width:none;
}
.envivo-tira::-webkit-scrollbar{ display:none; }
.envivo-tira > *{ flex:none; width:min(70vw, 340px); aspect-ratio:4/5; scroll-snap-align:start; border-radius:14px; overflow:hidden; }
.envivo-foto{ object-fit:cover; background:var(--bg-3); border:1px solid var(--line); }
.envivo-video{ position:relative; margin:0; border:1px solid var(--accent); }
.envivo-video img{ width:100%; height:100%; object-fit:cover; filter:brightness(.45); }
.envivo-video-capa{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:20px;
}
.envivo-play{
  width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:auto;
}
.envivo-video-texto{ font-family:var(--display); font-size:1.25rem; line-height:1.2; color:var(--cream); }
.envivo-video-capa small{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-2); }

/* Los siete: en el celular, más cerca de la cara */
@media (max-width:719px){
  /* Zoom hacia la cara de cada uno (posición medida en cada foto, en el orden de datos.js) */
  .m-foto img:not(.m-foto-vivo){ transform:scale(1.7); transform-origin:50% 30%; }
  .miembro:nth-child(1) .m-foto img:not(.m-foto-vivo){ transform-origin:55% 35%; }
  .miembro:nth-child(2) .m-foto img:not(.m-foto-vivo){ transform-origin:43% 22%; }
  .miembro:nth-child(3) .m-foto img:not(.m-foto-vivo){ transform-origin:50% 14%; }
  .miembro:nth-child(4) .m-foto img:not(.m-foto-vivo){ transform-origin:45% 25%; }
  .miembro:nth-child(5) .m-foto img:not(.m-foto-vivo){ transform-origin:52% 33%; }
  .miembro:nth-child(6) .m-foto img:not(.m-foto-vivo){ transform-origin:52% 32%; }
  .miembro:nth-child(7) .m-foto img:not(.m-foto-vivo){ transform-origin:52% 44%; }
}

/* Temas que se tocan */
.track-link{ display:contents; color:inherit; }
.track-play{ font-size:10px; color:var(--accent); opacity:.7; margin-left:10px; }
.track:has(.track-link){ cursor:pointer; grid-template-columns:34px 1fr auto auto; }
.track:has(.track-link:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* Contrataciones: lo que pregunta un organizador */
.contact-datos{ margin-top:26px; display:grid; gap:0; border-top:1px solid var(--line); }
.contact-datos div{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.contact-datos dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); padding-top:3px; }
.contact-datos dd{ margin:0; color:var(--cream); font-size:15px; }
.contact-datos dd.a-completar{ color:var(--accent); font-style:italic; }
.contact-kit{ margin-top:22px; }
.contact-kit-nota{ margin-top:10px; font-size:13px; color:var(--cream-3); max-width:40ch; }
/* En compu, la tira entra entera: el video ocupa dos lugares */
@media (min-width:960px){
  .envivo-tira{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); overflow:visible; margin-inline:0; padding-inline:0; }
  .envivo-tira > *{ width:auto; aspect-ratio:auto; height:280px; }
  .envivo-video{ grid-column:span 2; }
}

/* =============================================================
   Letras y acordes (prototipo, pedido de Lucas, 2026-10-05)
   ============================================================= */
.cn-layout{ display:grid; gap:28px; }
@media (min-width:900px){ .cn-layout{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:start; } }

.cn-lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cn-tema{
  width:100%; display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:14px; align-items:center;
  padding:14px 6px; background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--cream); text-align:left; font:inherit; cursor:pointer; transition:background .25s;
}
.cn-tema:hover, .cn-tema.activo{ background:var(--line-soft); }
.cn-tema.activo .cn-nombre{ color:var(--accent); }
.cn-tema:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cn-n{ font-family:var(--mono); font-size:12px; color:var(--cream-3); }
.cn-nombre{ font-family:var(--display); font-size:1.05rem; }
.cn-badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:3px 9px; border-radius:100px; border:1px solid var(--accent); color:var(--accent);
}
.cn-badge.pronto{ border-color:var(--line); color:var(--cream-3); }
.cn-badge.listo{ background:var(--accent); color:var(--accent-ink); }

.cn-vista{ display:none; --cn-tam:1; background:var(--bg-2); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cn-cerrar{
  justify-self:start; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:100px; padding:8px 14px; cursor:pointer;
}
@media (min-width:900px){
  .cn-vista{
    display:flex; flex-direction:column; position:sticky; top:calc(var(--nav-h) + 16px);
    max-height:calc(100vh - var(--nav-h) - 40px);
  }
  .cn-cerrar{ display:none; }
}
@media (max-width:899px){
  html.cn-abierto{ overflow:hidden; }
  html.cn-abierto .cn-vista{
    display:flex; flex-direction:column; position:fixed; inset:0; z-index:80; border:0; border-radius:0;
    padding-top:env(safe-area-inset-top, 0px);
  }
}

.cn-barra{ display:grid; gap:12px; padding:16px 18px 14px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.cn-cabeza h3{ font-family:var(--display); font-size:1.55rem; line-height:1.1; }
.cn-meta{ margin-top:5px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); }
.cn-controles{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cn-controles button, .cn-escuchar{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:8px 12px; cursor:pointer; transition:border-color .25s, color .25s, background .25s;
}
.cn-controles button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.cn-controles button:disabled{ opacity:.35; cursor:default; }
.cn-controles button:focus-visible, .cn-escuchar:focus-visible, .cn-cerrar:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cn-grupo{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px; }
.cn-grupo button{ border:0; padding:8px 13px; }
.cn-grupo span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); min-width:96px; text-align:center; }
.cn-controles .cn-toggle[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.cn-escuchar{ color:var(--accent); border-color:var(--accent); }

.cn-letra{ flex:1; overflow-y:auto; padding:22px 18px 48px; font-size:calc(1.02rem * var(--cn-tam)); -webkit-overflow-scrolling:touch; }
.cn-parte{ margin:20px 0 6px; font-family:var(--mono); font-size:.7em; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-3); }
.cn-parte:first-child, .cn-aviso + .cn-parte{ margin-top:0; }
.cn-linea{ display:flex; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; line-height:1.3; }
.cn-seg{ display:inline-flex; flex-direction:column; }
.cn-ac{ min-height:1.3em; padding-right:7px; font-family:var(--mono); font-weight:700; font-size:.8em; color:var(--accent); }
.cn-ac:empty{ padding-right:0; }
.cn-tx{ white-space:pre-wrap; color:var(--cream); }
.cn-linea.sin-acordes .cn-ac, .cn-vista.solo-letra .cn-ac{ display:none; }
.cn-vista.solo-letra .cn-linea{ margin-bottom:4px; }
.cn-blanco{ height:12px; }
.cn-aviso{ margin-bottom:16px; padding:10px 12px; border:1px dashed var(--accent); border-radius:10px; font-size:13px; color:var(--accent); }
.cn-pronto{ color:var(--cream-2); display:grid; gap:6px; }
/* Con un tema abierto en el celular, el menú y la barra del show no tapan el "Cerrar" */
@media (max-width:899px){
  html.cn-abierto .nav, html.cn-abierto .barra-show, html.cn-abierto .subir{ visibility:hidden; }
}

/* Versiones e instrumentales (2026-10-05): de una versión va el autor, no la letra */
.cn-badge.version{ border-color:var(--cream-3); color:var(--cream-2); }
.cn-notas{ margin-top:16px; display:grid; gap:8px; font-size:13.5px; line-height:1.5; color:var(--cream-3); max-width:52ch; }
.cn-version{ display:grid; gap:12px; color:var(--cream-2); max-width:52ch; }
.cn-version-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.cn-version-autor{ font-family:var(--display); font-size:1.25rem; color:var(--cream); }
.cn-version-autor span{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); }
.cn-version-nota{ font-size:13.5px; color:var(--cream-3); border-top:1px solid var(--line); padding-top:12px; }

/* Créditos de cada tema en Letras y acordes (2026-10-06) */
.cn-creditos{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; line-height:1.6; color:var(--cream-3); margin:0 0 14px; max-width:52ch; }

/* El video en vivo (2026-10-06): 30 s de "Cielo o Infierno" de la Session acústica, en una ventana encima */
.envivo-video .envivo-play{ border:0; cursor:pointer; font:inherit; padding:0; }
.envivo-video .envivo-play::after{ content:""; position:absolute; inset:0; border-radius:14px; }
.envivo-video .envivo-play:focus-visible::after{ outline:2px solid var(--accent); outline-offset:-2px; }
.envivo-video:hover img{ filter:brightness(.55); }
.envivo-modal{
  position:fixed; inset:0; z-index:200; background:rgba(12,12,13,.92);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.envivo-modal[hidden]{ display:none; }
.envivo-modal-caja{ width:min(100%, 960px); display:grid; gap:12px; }
.envivo-modal-video{ position:relative; aspect-ratio:16/9; background:var(--bg); border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.envivo-modal-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.envivo-modal-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.envivo-modal-pie a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-2); }
html.envivo-abierto{ overflow:hidden; }

/* Foto del inicio sobre negro (2026-10-06): sin el círculo de la foto vieja; los bordes
   se esfuman apenas para que el negro de la foto se funda con el fondo de la web */
.hero-photo img{
  border-radius:0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-composite:intersect;
}

@media (max-width:900px){ .hero-photo img{ max-height:48vh; } }

/* Redes del pie con íconos (2026-10-06): se distinguen de un vistazo */
.footer-links{ align-items:center; }
.footer-redes{ display:flex; gap:10px; }
.footer-redes .red{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--cream-2); transition:color .2s, border-color .2s;
}
.footer-redes .red:hover, .footer-redes .red:focus-visible{ color:var(--accent); border-color:var(--accent); }
.footer-redes svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-redes svg .lleno{ fill:currentColor; stroke:none; }

.footer-redes .red{ width:42px; height:42px; color:var(--cream); border-color:rgba(242,240,235,.3); }
.footer-redes svg{ width:19px; height:19px; }

/* Redes con protagonismo (2026-10-06): también en el menú de arriba y en el inicio */
.hero-redes .red, .nav-redes .red{
  display:grid; place-items:center; border-radius:50%; padding:0;
  border:1px solid rgba(242,240,235,.3); color:var(--cream); transition:color .2s, border-color .2s;
}
.hero-redes .red:hover, .hero-redes .red:focus-visible,
.nav-redes .red:hover, .nav-redes .red:focus-visible{ color:var(--accent); border-color:var(--accent); }
.hero-redes svg, .nav-redes svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero-redes svg .lleno, .nav-redes svg .lleno{ fill:currentColor; stroke:none; }

.hero-redes{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.hero-redes-texto{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); margin-right:6px; }
.hero-redes .red{ width:44px; height:44px; }
.hero-redes svg{ width:20px; height:20px; }

.nav-redes{ display:flex; align-items:center; gap:8px; }
.nav-redes .red{ width:34px; height:34px; }
.nav-redes svg{ width:16px; height:16px; }
.nav-links .nav-redes a::after{ display:none; }
/* En pantallas medianas no entran sin apretar el menú: quedan las del inicio y el pie */
@media (min-width:960px) and (max-width:1199px){ .nav-redes{ display:none; } }
/* En el celular, adentro del menú y más grandes */
@media (max-width:959px){
  .nav .nav-redes{ margin-top:clamp(12px, 3vh, 28px); gap:12px; }
  .nav .nav-links .nav-redes .red{ width:48px; height:48px; padding:0; }
  .nav .nav-redes svg{ width:22px; height:22px; }
}

/* El flyer oficial del show, adentro de la tarjeta (2026-10-06) */
.next-show-flyer{ margin:0; }
.next-show-flyer img{ display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
@media (max-width:819px){ .next-show-flyer{ width:min(100%, 240px); } }
@media (min-width:820px){ .next-show-grid.con-flyer{ grid-template-columns:minmax(0, 260px) 1.2fr 1fr; } }

/* Contrataciones: WhatsApp y mail a la vista (2026-10-06) */
.contact-canales{ margin-top:26px; display:grid; gap:12px; max-width:440px; }
.contact-canal{
  display:flex; align-items:center; gap:14px; padding:14px 16px; min-width:0;
  border:1px solid var(--line); border-radius:14px; color:var(--cream); transition:border-color .2s;
}
.contact-canal:hover, .contact-canal:focus-visible{ border-color:var(--accent); }
.contact-canal svg{ width:22px; height:22px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-canal span{ display:grid; gap:2px; font-family:var(--display); font-size:1.12rem; min-width:0; overflow-wrap:anywhere; }
.contact-canal small{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-3); }