/* =============================================================
   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:   #75726C;

  --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,.93);
  --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', 'Helvetica Neue', sans-serif;
  --serif:   'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --sans:    'Inter', -apple-system, sans-serif;
  --mono:    'Inter', -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: 76px;
  --container: 1180px;
}

/* =============================================================
   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:24px; }
.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:.05; mix-blend-mode:overlay;
  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{
  background:var(--nav-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  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(46% 40% at 22% 18%, var(--mesh-1), transparent 68%),
    radial-gradient(38% 34% at 82% 8%, var(--mesh-2), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, var(--mesh-3), transparent 72%);
  filter:blur(70px) saturate(120%);
  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-3); 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-3);
}
.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:-100%; width:100%; height:100%; background:var(--accent);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top: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(50% 50% at 20% 0%, var(--mesh-1), transparent 70%);
  filter:blur(60px); 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; }

.poster-rail{ margin-top:70px; }
.poster-rail-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.poster-rail-hint{ font-family:var(--mono); font-size:11px; color:var(--cream-3); text-transform:uppercase; letter-spacing:.06em; }
.poster-track{
  display:flex; gap:22px; overflow-x:auto; padding:10px 4px 26px; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.poster-track::-webkit-scrollbar{ height:6px; }
.poster-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.poster-card{
  scroll-snap-align:start; flex:0 0 auto; width:270px; padding:26px 22px;
  border:1px solid var(--line); border-radius:4px; background:var(--bg-3);
  transform:rotate(var(--rot,0deg)); transition:transform .4s var(--ease-out), border-color .3s;
  box-shadow:0 18px 30px -20px rgba(0,0,0,.6);
}
.poster-card:hover{ transform:rotate(0deg) translateY(-6px); border-color:var(--accent); }
.poster-card .pin{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-bottom:16px; }
.poster-card .p-date{ font-family:var(--mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.poster-card h4{ font-family:var(--display); font-size:1.3rem; margin-top:10px; text-transform:uppercase; }
.poster-card p{ margin-top:10px; font-size:13.5px; color:var(--cream-3); }

/* 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:hover{ background:var(--bg-3); }
.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; }
.press-card .p-link{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); }

/* 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); }

/* Splash ---------------------------------------------------------------------- */
.splash{
  position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease-out), visibility .6s;
  animation:splashSafety .01s 4.5s forwards;
}
.splash-mark{ font-family:var(--display); font-size:clamp(2.2rem,7vw,4rem); letter-spacing:.04em; text-transform:uppercase; color:var(--cream); opacity:.92; }
.splash-mark span{ color:var(--accent); }
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* =============================================================
   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; }
.splash-mark{ width:clamp(88px, 22vw, 132px); height:auto; opacity:.92; }
.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 ya viene con negro alrededor del círculo: se funde con el fondo. */
  mask-image:radial-gradient(120% 96% at 50% 50%, #000 62%, transparent 100%);
}
@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; }

/* Título del carrusel de shows pasados (antes estaba escrito inline, lo
   que impedía que un tema lo cambiara). */
.rail-titulo{ font-family:var(--display); text-transform:uppercase; font-size:1.3rem; }


/* ==========================================================================
   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, .poster-card h4, .next-show-grid h3, .next-show-empty h3, .rail-titulo{
  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, .poster-rail-hint{
  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 de surcos
   ============================================================= */
.hero, .section, .stat-strip{ position:relative; overflow:clip; }

.hero::before, .section::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:min(1180px,165vw); aspect-ratio:1;
  background:var(--surco); opacity:.30;
  -webkit-mask:url(assets/huella.svg) center/contain no-repeat;
          mask:url(assets/huella.svg) center/contain no-repeat;
}
/* El contenido, siempre por encima de los surcos */
.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; }

/* En el hero los surcos van detrás del texto, no de la foto */
#inicio::before{ top:46%; opacity:.38; }
.hero-mesh{ opacity:.35; }           /* los halos borrosos ceden el lugar */
.hero-photo{ position:relative; z-index:2; }

/* Secciones muy altas: la huella se ancla arriba y no queda perdida */
#integrantes::before, #album::before{ top:38%; }

@media (max-width:700px){
  .hero::before, .section::before{ width:150vw; opacity:.26; }
}

/* =============================================================
   3. La huella viva (lib/huella-animada.js)
   -------------------------------------------------------------
   Un solo canvas fijo detrás de todo. Cuando arranca, se apagan
   los surcos estáticos: si no, se verían los dos dibujos.
   ============================================================= */
.huella-viva{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}
/* El contenido sigue estando por encima del canvas */
body > *:not(.huella-viva){ position:relative; z-index:1; }

.huella-viva-on .hero::before,
.huella-viva-on .section::before{ display:none; }

/* Sin WebGL o con "reducir movimiento": quedan los surcos quietos,
   que es exactamente lo que había antes. Nadie ve una página rota. */

/* ==========================================================================
   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; filter:blur(9px);
  transform:translateY(.28em);
  transition:opacity .5s var(--ease-out), filter .5s var(--ease-out),
             transform .5s var(--ease-out);
}
.tr-w.on{ opacity:1; filter:blur(0); transform:none; }

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