/* ============================================================
   MADERA JAZZ — maderajazz.com
   Sistema de diseño de la banda, portado del kit de Claude Design.
   Orden: fuentes · tokens · base · utilidades · componentes ·
          secciones · responsive · preferencias
   ============================================================ */

/* --- Fuentes de marca (self-hosted, subset latino) ---------- */
@font-face { font-family: "Barbra SemiCondensed"; src: url("../assets/fonts/barbra-semicondensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Migaela"; src: url("../assets/fonts/migaela.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "WPGOTT"; src: url("../assets/fonts/wpgott.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

/* Fallbacks con métricas ajustadas: reducen el salto del font-display: swap */
@font-face { font-family: "Barbra-fallback"; src: local("Georgia"); size-adjust: 102%; ascent-override: 112%; descent-override: 31%; }
@font-face { font-family: "Migaela-fallback"; src: local("Georgia"); size-adjust: 70%; ascent-override: 98%; descent-override: 41%; }
@font-face { font-family: "WPGOTT-fallback"; src: local("Courier New"); size-adjust: 74%; ascent-override: 81%; descent-override: 22%; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* NARANJAS — energía · calor · movimiento */
  --orange-brule: #de7114;
  --orange-deep: #c25c0f;
  --orange-tint: #f3c79a;
  /* AMARILLOS — luz · juego · diversión */
  --yellow-curry: #c28311;
  --yellow-beige: #c7a359;
  --yellow-tint: #e8d3a2;
  /* TERRACOTAS / MARRONES — tierra · memoria · tiempo */
  --terracotta: #a54f20;
  --brown-chocolate: #955e28;
  --brown-deep: #5d3a1c;
  /* VERDES — naturaleza · psicodelia · extrañeza */
  --green-avocado-light: #626423;
  --green-avocado: #5b5b1d;
  --green-olive: #957b40;
  /* AZULES — noche · profundidad · libertad */
  --blue-roi: #0f3c7f;
  --blue-marine: #143956;
  --blue-petrole: #104966;
  --blue-grey: #4f7286;
  /* MORADOS / MAGENTAS — fantasía · experimentación · elegancia */
  --violet-intense: #432660;
  --magenta: #8a2d5a;
  --rose-fuchsia: #ba325a;
  /* NEGRO — contraste · noche · estructura */
  --noir-profond: #271f12;
  --noir: #14100b;
  --noir-soft: #332a1e;
  /* HALO — muestreado de la serie de retratos de la banda */
  --halo-cyan: #00e3e4;
  --halo-cyan-deep: #008fc2;
  --halo-teal: #3a666d;
  --halo-gold: #f9d075;
  --halo-amber: #e4bc53;
  --halo-red: #b41b29;
  --halo-void: #12100e;
  /* PAPEL — el neutro impreso, la mitad clara del universo */
  --paper: #f7f1e5;
  --paper-2: #f0e8d8;
  --paper-3: #e4d9c3;
  --paper-line: #cdbfa4;

  /* Alias semánticos — la noche es la superficie por defecto */
  --surface-page: var(--noir);
  --surface-raised: var(--noir-profond);
  --surface-inset: #1c170f;
  --surface-paper: var(--paper);
  --surface-card: var(--noir-profond);
  --surface-card-paper: var(--paper-2);

  --text-strong: var(--paper);
  --text-body: #e6dcc7;
  --text-muted: #a8997c;
  --text-on-paper: var(--noir-profond);
  --text-on-paper-muted: #6f6046;
  --text-inverse: var(--noir);
  --text-accent: var(--orange-brule);

  --border-hairline: rgba(247, 241, 229, .16);
  --border-strong: rgba(247, 241, 229, .34);
  --border-on-paper: var(--paper-line);
  --border-ink: var(--noir-profond);

  --accent-primary: var(--orange-brule);
  --accent-secondary: var(--rose-fuchsia);
  --accent-cool: var(--blue-petrole);
  --accent-halo: var(--halo-cyan);
  --accent-play: var(--yellow-curry);
  --focus-ring: var(--yellow-beige);

  /* Colores de escena en rotación: etiquetas, muestras, acentos por fila */
  --stage-1: var(--orange-brule);
  --stage-2: var(--yellow-curry);
  --stage-3: var(--green-avocado-light);
  --stage-4: var(--blue-petrole);
  --stage-5: var(--violet-intense);
  --stage-6: var(--rose-fuchsia);
  --stage-7: var(--terracotta);
  --stage-8: var(--blue-roi);

  /* Variantes "tinta": mismo tono, contraste AA para texto pequeño.
     El color puro se queda en bordes, puntos y numerales grandes. */
  --stage-3-ink: #80804a;
  --stage-4-ink: #6c8c99;
  --stage-5-ink: #9382a3;
  --blue-grey-ink: #718b99;
  --rose-fuchsia-ink: #c65876;
  --orange-ink-paper: #a75813;
  --curry-ink-paper: #8a5f10;

  /* Tipografía */
  --font-display: "Barbra SemiCondensed", "Barbra-fallback", Georgia, serif;
  --font-display-alt: "Migaela", "Migaela-fallback", Georgia, serif;
  --font-mono: "WPGOTT", "WPGOTT-fallback", "Courier New", monospace;
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  --leading-tight: .92;
  --leading-snug: 1.06;
  --leading-body: 1.55;

  /* El tracking es el recurso más ruidoso del sistema */
  --tracking-mega: .44em;
  --tracking-wide: .18em;
  --tracking-caps: .1em;
  --tracking-display: .01em;

  --type-eyebrow: var(--weight-regular) var(--text-xs)/1.2 var(--font-mono);
  --type-meta: var(--weight-regular) var(--text-xs)/1.4 var(--font-mono);
  --type-body: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans);
  --type-label: var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans);

  /* Espacio y medida */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter-page: clamp(20px, 5vw, 72px);
  --measure-narrow: 38ch;
  --measure: 62ch;
  --content-wide: 1600px;
  --header-h: 73px;

  /* Forma: el sello, el disco, la muestra son círculos; lo demás es recto */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-width-hair: 1px;
  --border-width: 2px;
  --ring-width: 2px;
  --ring-offset: 3px;

  /* Sombras de imprenta: bloques de tinta desplazados, no sombras blandas */
  --shadow-offset: 6px 6px 0 var(--noir-profond);
  --shadow-offset-sm: 3px 3px 0 var(--noir-profond);

  /* Motion */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-marquee: 22s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-groove: cubic-bezier(.34, 1.3, .5, 1);
  --press-scale: .985;
  --dur-slow: 600ms;      /* hovers grandes, enderezar retratos */
  --dur-reveal: 900ms;    /* entradas al scroll */
  --dur-hero: 1100ms;     /* cascada del hero */
  --stagger: 70ms;        /* paso entre hermanos en un reveal escalonado */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Gradientes: luz de escena sangrando en el negro, nunca cromo de interfaz */
  --gradient-nocturno: linear-gradient(160deg, var(--violet-intense) 0%, var(--blue-marine) 46%, var(--noir) 100%);
  --gradient-calle: linear-gradient(90deg, var(--orange-brule) 0%, var(--rose-fuchsia) 100%);
  --gradient-hero: linear-gradient(180deg, rgba(20, 16, 11, .25) 0%, rgba(20, 16, 11, 0) 30%, rgba(20, 16, 11, .82) 72%, rgba(20, 16, 11, .96) 100%);
  --gradient-contacto: linear-gradient(180deg, rgba(20, 16, 11, .7) 0%, rgba(20, 16, 11, .86) 60%, rgba(20, 16, 11, .98) 100%);
  /* El halo reconstruido en CSS para superficies sin fotografía. Nunca sobre un retrato. */
  --gradient-halo: radial-gradient(circle at 50% 44%, rgba(58, 102, 109, .92) 0%, rgba(58, 102, 109, .55) 32%, rgba(0, 227, 228, .5) 41%, rgba(249, 208, 117, .55) 46%, rgba(180, 27, 41, .42) 52%, rgba(18, 16, 14, .98) 62%, #12100e 100%);
  --gradient-halo-ring: conic-gradient(from 200deg, var(--halo-cyan) 0deg, var(--halo-gold) 90deg, var(--halo-red) 180deg, var(--halo-cyan-deep) 300deg, var(--halo-cyan) 360deg);
  --grain-opacity: .14;
}

/* La mitad clara del universo */
[data-theme="paper"] {
  color-scheme: light;
  --surface-page: var(--paper);
  --surface-raised: var(--paper-2);
  --surface-inset: var(--paper-3);
  --surface-card: var(--paper-2);
  --text-strong: var(--noir-profond);
  --text-body: #3b3225;
  --text-muted: var(--text-on-paper-muted);
  --text-inverse: var(--paper);
  --border-hairline: rgba(39, 31, 18, .16);
  --border-strong: rgba(39, 31, 18, .4);
  --accent-primary: var(--terracotta);
  --focus-ring: var(--terracotta);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; color: var(--text-strong); font-weight: 400; }
h1, h2 { font-synthesis-weight: none; }
p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

a { color: var(--accent-primary); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* <picture> es inline por defecto: sin esto, un <img width:100%> dentro de una
   celda de rejilla colapsa a cero (y si es lazy, nunca llega a cargarse). */
picture { display: block; }
/* El atributo hidden debe ganarle a cualquier display propio (lo usa el JS
   para retirar la próxima fecha cuando pasa). */
[hidden] { display: none !important; }

:focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}
::selection { background: var(--rose-fuchsia); color: var(--paper); }

/* ============================================================
   UTILIDADES
   ============================================================ */
.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 10px 16px; background: var(--paper); color: var(--noir);
  font: var(--type-label); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--gutter-page); top: 12px; }

.wrap { max-width: var(--content-wide); margin-inline: auto; width: 100%; }

/* Grano: la textura de brillo del kit, fija sobre toda la página */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background: url("../assets/img/grain-700.jpg") center / 700px repeat;
  background-image: image-set(url("../assets/img/grain-700.avif") type("image/avif"),
                              url("../assets/img/grain-700.jpg") type("image/jpeg"));
}

/* ============================================================
   COMPONENTES
   ============================================================ */

/* --- Botón --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--btn-h, 44px); padding: 0 var(--btn-px, 20px);
  font-family: var(--font-sans); font-size: var(--btn-fs, 14px); font-weight: var(--weight-semibold);
  font-stretch: 112%; line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border: var(--border-width) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
}
.btn:active { scale: var(--press-scale); }
.btn-sm { --btn-h: 36px; --btn-px: 14px; --btn-fs: 12px; }
.btn-lg { --btn-h: 52px; --btn-px: 28px; --btn-fs: 16px; }

.btn-solid { background: var(--orange-brule); color: var(--noir); border-color: var(--orange-brule); }
.btn-solid { --btn-ink: var(--yellow-curry); }
.btn-solid:hover { border-color: var(--yellow-curry); }
.btn-ink { background: var(--noir-profond); color: var(--paper); border-color: var(--noir-profond); }
.btn-ink { --btn-ink: var(--noir-soft); }
.btn-ink:hover { border-color: var(--noir-soft); }
.btn-outline { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
.btn-outline { --btn-ink: var(--orange-brule); }
.btn-outline:hover { color: var(--noir); border-color: var(--orange-brule); }

/* --- Etiqueta de sección: rótulo mono + filete --- */
.section-label {
  display: flex; align-items: center; gap: var(--space-4);
  font: var(--type-eyebrow); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--label, var(--halo-amber));
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border-hairline); }

/* --- Etiqueta pastilla --- */
.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid var(--stage); border-radius: var(--radius-pill);
  color: var(--stage-ink, var(--stage));
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
}

/* --- Marquesina --- */
.marquee {
  display: flex; align-items: center; height: 44px; overflow: hidden;
  background: var(--halo-red); color: var(--paper);
}
/* La pista lleva 8 copias y se desplaza la mitad (4): la duración se multiplica por 4 para conservar la velocidad del kit (una copia por --dur-marquee) */
.marquee-track { display: inline-flex; flex: none; animation: marquee calc(var(--dur-marquee) * 4) linear infinite; }
.marquee-track span {
  padding-right: 3rem; white-space: nowrap;
  font: var(--weight-regular) var(--text-sm)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
@keyframes marquee { to { translate: -50% 0; } }

/* --- Divisor de espectro --- */
.divider-spectrum { height: 6px; background: var(--gradient-calle); }

/* --- Muestra de color --- */
.swatch { display: grid; gap: var(--space-2); align-content: start; }
.swatch-chip {
  width: 96px; height: 96px; background: var(--swatch);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-xs);
}
.swatch-name { font: var(--type-label); color: var(--text-strong); }
.swatch-code, .swatch-note { font: var(--type-meta); color: var(--text-muted); }
.swatch-code { letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.swatch-note { font-style: italic; }

/* --- Tarjeta de tinta (bloque naranja con sombra desplazada) --- */
.card-ink {
  display: grid; gap: var(--space-4); padding: var(--space-6);
  background: var(--orange-brule); color: var(--noir);
  box-shadow: var(--card-shadow, 6px 6px 0 var(--noir));
  --focus-ring: var(--noir);
}

/* --- Estadísticas --- */
.stat { display: grid; gap: 6px; }
.stat-num { font: var(--weight-regular) 64px/1 var(--font-display-alt); color: var(--stat-color, var(--text-strong)); }
.stat-label {
  font: var(--weight-regular) var(--text-2xs)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}

/* ============================================================
   CABECERA
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 14px var(--gutter-page);
  background: rgba(20, 16, 11, .82); border-bottom: 1px solid var(--border-hairline);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; }
.brand img { width: 44px; height: 44px; }

.site-nav { display: flex; gap: 28px; }
.site-nav a {
  color: var(--text-body);
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--orange-brule); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--text-strong); cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; display: block; }
.nav-toggle .ico-x { display: none; }
.site-header[data-open] .ico-menu { display: none; }
.site-header[data-open] .ico-x { display: block; }

/* ============================================================
   SECCIONES
   ============================================================ */
.section { padding: var(--space-9) var(--gutter-page); }
.section-paper { background: var(--surface-page); color: var(--text-body); }

/* --- Hero --- */
.hero {
  position: relative; display: grid; align-items: end; overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 180px var(--gutter-page) var(--space-8);
}
.hero-media, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-media img { object-fit: cover; object-position: center 22%; }
.hero-veil { position: absolute; inset: 0; background: var(--gradient-hero); }
.hero-grid {
  position: relative; display: grid; gap: var(--space-7); align-items: end;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.hero-copy { display: grid; gap: var(--space-5); }
.hero-eyebrow {
  font: var(--type-eyebrow); letter-spacing: var(--tracking-mega);
  text-transform: uppercase; color: var(--halo-amber);
}
.hero h1 {
  font: var(--weight-regular) clamp(76px, 11.5vw, 172px)/.9 var(--font-display);
  letter-spacing: var(--tracking-display); color: var(--paper);
}
.hero-claim {
  font: var(--weight-regular) clamp(24px, 2.4vw, 38px)/1.1 var(--font-display-alt);
  color: var(--text-body); max-width: var(--measure-narrow); text-wrap: pretty;
}
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

.next-date {
  display: grid; gap: 10px; justify-self: end; min-width: 280px;
  padding: 22px 24px; color: var(--text-body);
  background: rgba(20, 16, 11, .55); border: 1px solid var(--border-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.next-date:hover { border-color: var(--orange-brule); }
.next-date-label {
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--halo-cyan);
}
.next-date-day { font: var(--weight-regular) 44px/1 var(--font-display); color: var(--paper); }
.next-date-name { font: var(--weight-regular) 20px/1.1 var(--font-display-alt); color: var(--paper); }
.next-date-meta {
  font: var(--weight-regular) var(--text-2xs)/1.5 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}

/* --- Bio --- */
.bio-grid {
  display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.bio-copy { display: grid; gap: 28px; }
.bio h2 {
  font: var(--weight-regular) clamp(36px, 3.6vw, 58px)/1 var(--font-display);
  text-wrap: pretty;
}
.bio-lead { font: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans); color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.bio-sub { font: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans); color: var(--text-muted); max-width: var(--measure); text-wrap: pretty; }
.bio-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 40px; justify-content: start;
  padding-top: var(--space-3); border-top: 1px solid var(--border-hairline);
}
.bio-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.bio-note {
  font: var(--weight-regular) 15px/1.6 var(--font-sans); color: var(--text-muted);
  max-width: var(--measure); text-wrap: pretty;
  padding-top: var(--space-2); border-top: 1px solid var(--border-hairline);
}
.bio-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bio-photos img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius-xs); }
.bio-photos figure:last-child { margin-top: var(--space-7); }

/* --- Música --- */
.musica-grid {
  display: grid; gap: var(--space-8); align-items: start;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.musica-aside { display: grid; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.musica h2 { font: var(--weight-regular) clamp(40px, 4.2vw, 72px)/.94 var(--font-display); }
.musica-lead { font: var(--weight-regular) 24px/1.5 var(--font-sans); color: var(--text-body); max-width: 44ch; text-wrap: pretty; }
.musica-body { font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans); color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.musica-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.musica-stats .stat-num { font-family: var(--font-display); font-size: 56px; }
.musica-quote {
  font: var(--weight-regular) 17px/1.6 var(--font-sans); color: var(--terracotta);
  max-width: 50ch; text-wrap: pretty;
  padding-top: var(--space-2); border-top: 1px solid var(--paper-line);
}

.releases { display: grid; border-bottom: var(--border-width) solid var(--border-ink); }
.release {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--space-5);
  align-items: baseline; padding: 18px 0; border-top: var(--border-width) solid var(--border-ink);
}
.release-kind {
  font: var(--weight-regular) var(--text-2xs)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--kind);
}
.release-title { font: var(--weight-regular) clamp(26px, 2.4vw, 36px)/1.05 var(--font-display-alt); color: var(--text-strong); }
.release-note {
  font: var(--weight-regular) var(--text-2xs)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); text-align: right;
}

/* --- Banda --- */
.banda { display: grid; gap: var(--space-7); }
.banda-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); flex-wrap: wrap; }
.banda-head > div { display: grid; gap: 20px; }
.banda h2 { font: var(--weight-regular) clamp(36px, 3.6vw, 58px)/1 var(--font-display); }
.banda-intro { font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans); color: var(--text-muted); max-width: var(--measure-narrow); text-wrap: pretty; }
.members { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.member { display: grid; gap: 14px; justify-items: stretch; text-align: center; min-width: 0; flex: 0 1 clamp(144px, calc((100% - 6 * var(--space-5)) / 7), 190px); }
.member img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-circle); border: 1px solid var(--border-hairline);
}
.member-name { font: var(--weight-regular) var(--text-lg)/1.1 var(--font-display-alt); color: var(--text-strong); margin-inline: calc(var(--space-5) / -2); white-space: nowrap; }
.member-role {
  font: var(--weight-regular) var(--text-2xs)/1.3 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--stage-ink, var(--stage));
}

/* --- Fechas --- */
.fechas {
  background: var(--gradient-nocturno);
  --text-muted: #b8aa8f; /* sube el contraste sobre el violeta del gradiente */
}
.fechas-inner { display: grid; gap: var(--space-8); }
.fechas-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: end; }
.fechas-next { display: grid; gap: 20px; }
.fechas-date { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.fechas-day { font: var(--weight-regular) clamp(96px, 14vw, 220px)/.86 var(--font-display); color: var(--paper); }
.fechas-year { font: var(--weight-regular) clamp(40px, 5vw, 80px)/1 var(--font-display-alt); color: var(--halo-gold); }
.fechas h2 { font: var(--weight-regular) clamp(30px, 3.2vw, 52px)/1.05 var(--font-display-alt); }
.fechas-meta {
  font: var(--weight-regular) 13px/1.6 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-body);
}
.fechas .card-ink { justify-self: end; width: 100%; max-width: 440px; }
.card-ink-label {
  font: var(--weight-regular) var(--text-2xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.card-ink-claim { font: var(--weight-medium) var(--text-md)/1.4 var(--font-sans); text-wrap: pretty; }

.shows-block { display: grid; gap: var(--space-5); }
.shows-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong);
}
.shows-head .section-label { flex: none; }
.shows-head .section-label::after { display: none; }
.shows-notes { display: grid; gap: 6px; max-width: 64ch; }
.shows-note {
  font: var(--weight-regular) var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); text-align: right;
}
.shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); column-gap: var(--space-7); }
.show {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--border-hairline);
}
.show-place { display: grid; gap: 2px; }
.show-date {
  font: var(--weight-regular) var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--halo-gold);
}
.show-city { font: var(--weight-regular) 20px/1.1 var(--font-display-alt); color: var(--paper); }
.show-venue {
  font: var(--weight-regular) var(--text-2xs)/1.5 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}

/* --- Universo --- */
.universo-inner { display: grid; gap: 56px; }
.universo-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: end; }
.universo-top > div { display: grid; gap: 20px; }
.universo h2 { font: var(--weight-regular) clamp(40px, 4.2vw, 72px)/.94 var(--font-display); }
.universo-lead { font: var(--weight-regular) clamp(20px, 1.8vw, 26px)/1.5 var(--font-sans); color: var(--text-strong); max-width: 44ch; text-wrap: pretty; }
.universo-body { font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans); color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); }
.keywords {
  display: flex; gap: var(--space-2) 28px; flex-wrap: wrap;
  padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-ink);
  font: var(--weight-regular) var(--text-xs)/1.6 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}

/* --- Contacto --- */
/* --- Preguntas frecuentes: acordeón nativo (<details>), sin JS --- */
.faq-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
.faq-top { display: grid; gap: 20px; }
.faq h2 { font: var(--weight-regular) clamp(40px, 4.2vw, 72px)/.94 var(--font-display); text-wrap: pretty; }
.faq-lead { font: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans); color: var(--text-muted); max-width: var(--measure-narrow); text-wrap: pretty; }
.faq-list { display: grid; border-top: 1px solid var(--border-strong); }
.faq-item { border-bottom: 1px solid var(--border-hairline); }
.faq-item summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: baseline;
  padding: 18px 0; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 {
  font: var(--weight-regular) clamp(20px, 1.6vw, 24px)/1.2 var(--font-display-alt); color: var(--paper);
  text-wrap: pretty; transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary:hover h3 { color: var(--halo-gold); }
.faq-mark { font: var(--weight-regular) var(--text-sm)/1 var(--font-mono); color: var(--halo-amber); }
.faq-mark::before { content: "+"; }
.faq-item[open] .faq-mark::before { content: "−"; }
.faq-item p { max-width: var(--measure); padding-bottom: 22px; color: var(--text-body); text-wrap: pretty; }
.faq-item p a { color: var(--halo-gold); text-decoration: underline; text-underline-offset: 3px; }
.faq-item p a:hover { color: var(--paper); }

.contacto { position: relative; padding: var(--space-10) var(--gutter-page); overflow: hidden; }
.contacto-media, .contacto-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.contacto-media img { object-fit: cover; object-position: center 30%; }
.contacto-veil { position: absolute; inset: 0; background: var(--gradient-contacto); }
.contacto-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: end;
}
.contacto-copy { display: grid; gap: 20px; }
.contacto h2 { font: var(--weight-regular) clamp(40px, 4.6vw, 80px)/.94 var(--font-display); text-wrap: pretty; }
.contacto-lead { font: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans); color: var(--text-body); max-width: var(--measure-narrow); text-wrap: pretty; }
.contacto .card-ink { gap: 14px; --card-shadow: 6px 6px 0 var(--paper); }
.contacto-address { display: grid; gap: 14px; }
.card-ink-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); }
.card-ink-head .card-ink-label { color: var(--noir-profond); }
.card-ink-head img { width: 56px; height: 56px; }
.contacto-mail {
  font: var(--weight-regular) clamp(24px, 2.6vw, 40px)/1 var(--font-display);
  color: var(--noir); word-break: break-word;
  transition: color var(--dur-fast) var(--ease-out);
}
.contacto-mail:hover { color: var(--paper); }
.contacto-meta {
  font: var(--weight-regular) var(--text-xs)/1.6 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--noir-profond);
}
.contacto-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contacto-meta a:hover { color: var(--paper); }
.contacto-epk {
  font: var(--weight-regular) var(--text-xs)/1.6 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.contacto-epk a { color: var(--noir-profond); text-decoration: underline; text-underline-offset: 3px; }
.contacto-epk a:hover { color: var(--paper); }

/* --- Pie --- */
.site-footer { border-top: 1px solid var(--border-hairline); }
.palette-bar { display: grid; grid-template-columns: repeat(8, 1fr); height: 8px; }
.palette-bar span:nth-child(1) { background: var(--stage-1); }
.palette-bar span:nth-child(2) { background: var(--stage-2); }
.palette-bar span:nth-child(3) { background: var(--stage-3); }
.palette-bar span:nth-child(4) { background: var(--stage-4); }
.palette-bar span:nth-child(5) { background: var(--stage-5); }
.palette-bar span:nth-child(6) { background: var(--stage-6); }
.palette-bar span:nth-child(7) { background: var(--stage-7); }
.palette-bar span:nth-child(8) { background: var(--stage-8); }

.footer-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: 22px var(--gutter-page); border-bottom: 1px solid var(--border-hairline);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) 28px; }
.footer-links a {
  color: var(--text-body);
  font: var(--weight-regular) var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--orange-brule); }
.footer-credits {
  font: var(--weight-regular) var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}

/* Halo de cierre: el anillo del kit asoma por el borde inferior de la página,
   como un amanecer. Superficie sin fotografía (regla del kit). La frase va sobre
   la zona negra, por encima del anillo; el «gracias» en el centro teal. */
.footer-halo-stage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(420px, 46vw, 640px);
  display: grid; align-content: start; justify-items: center;
  padding: var(--space-8) var(--gutter-page) var(--space-9);
  text-align: center;
}
.footer-halo {
  position: absolute; left: 50%; bottom: 0; translate: -50% 50%; z-index: -1;
  width: min(92vmin, 860px); aspect-ratio: 1; border-radius: var(--radius-circle);
  background: var(--gradient-halo); opacity: .85; pointer-events: none;
}
.footer-egg {
  font: var(--weight-regular) clamp(26px, 3.2vw, 40px)/1.3 var(--font-display-alt);
  color: var(--text-strong); max-width: 34ch; text-wrap: balance;
}
.footer-thanks {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font: var(--weight-regular) var(--text-2xs)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--paper);
}
/* El ♥ no existe en WPGOTT: se toma de la fuente de sistema, no del fallback reducido. */
.footer-thanks span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; }

/* ============================================================
   MOVIMIENTO
   Capa de animación: cascada del hero, reveals al scroll, hovers de
   imprenta y ambiente (luces, halo, grano). Los estados «oculto antes
   de entrar» solo aplican bajo html.js: sin JavaScript la página se ve
   completa. Todo se apaga en prefers-reduced-motion (abajo).
   ============================================================ */

/* --- Keyframes compartidos --- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { from { scale: 1; opacity: .85; } to { scale: 1.04; opacity: 1; } }
@keyframes beat {
  0%, 100% { scale: 1; }
  14% { scale: 1.22; }
  28% { scale: 1; }
  42% { scale: 1.14; }
}
@keyframes flow { to { background-position: -200% 0; } }
@keyframes pulse {
  from { box-shadow: 0 0 0 0 rgba(0, 227, 228, .65); }
  to { box-shadow: 0 0 0 12px rgba(0, 227, 228, 0); }
}
@keyframes twinkle {
  0%, 100% { scale: .2; opacity: 0; rotate: 0deg; }
  45% { scale: 1; opacity: 1; rotate: 30deg; }
  60% { scale: .9; opacity: .8; rotate: 40deg; }
}
@keyframes drift {
  from { translate: 0 0; }
  to { translate: 12vw -8vh; }
}
@keyframes drift-b {
  from { translate: 0 0; }
  to { translate: -10vw 10vh; }
}
@keyframes flicker {
  0% { translate: 0 0; }
  12.5% { translate: -1.2% .8%; }
  25% { translate: .9% -1.4%; }
  37.5% { translate: -.6% -.9%; }
  50% { translate: 1.3% 1.1%; }
  62.5% { translate: -1.4% .3%; }
  75% { translate: .4% -1.2%; }
  87.5% { translate: 1% .6%; }
  100% { translate: 0 0; }
}

/* --- Hero: cascada de carga ------------------------------------------
   Arranca cuando html.ready (fuentes listas o 400 ms de espera máxima),
   para que el relleno de tinta del wordmark no ocurra sobre la fuente de
   respaldo y salte al cargar Barbra. Sin JS no hay estados ocultos.    */
.js .hero-eyebrow, .js .hero-word, .js .hero-claim, .js .hero-cta .btn, .js .next-date { opacity: 0; }

.hero h1 { clip-path: inset(-.3em 0 -.25em); }
.hero-word { display: inline-block; -webkit-text-stroke: 2px transparent; }

@keyframes hero-eyebrow {
  from { opacity: 0; letter-spacing: .9em; }
  to { opacity: 1; letter-spacing: var(--tracking-mega); }
}
@keyframes hero-word {
  0% { translate: 0 120%; opacity: 0; color: transparent; -webkit-text-stroke-color: var(--halo-gold); animation-timing-function: var(--ease-out); }
  38% { translate: 0 0; opacity: 1; color: transparent; -webkit-text-stroke-color: var(--halo-gold); animation-timing-function: ease; }
  100% { translate: 0 0; opacity: 1; color: var(--paper); -webkit-text-stroke-color: transparent; }
}
@supports not (-webkit-text-stroke: 1px #000) {
  @keyframes hero-word {
    from { translate: 0 120%; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
  }
}
@keyframes hero-up {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-slide {
  from { opacity: 0; translate: 44px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes kenburns {
  from { scale: 1.08; }
  to { scale: 1; }
}

.js.ready .hero-eyebrow { animation: hero-eyebrow var(--dur-hero) var(--ease-out) both; }
.js.ready .hero-word { animation: hero-word calc(var(--dur-hero) * 1.3) both; }
.js.ready .hero-word:nth-child(1) { animation-delay: 120ms; }
.js.ready .hero-word:nth-child(2) { animation-delay: 260ms; }
.js.ready .hero-claim { animation: hero-up var(--dur-hero) var(--ease-out) 520ms both; }
.js.ready .hero-cta .btn { animation: hero-up var(--dur-hero) var(--ease-out) both; }
.js.ready .hero-cta .btn:nth-child(1) { animation-delay: 660ms; }
.js.ready .hero-cta .btn:nth-child(2) { animation-delay: 740ms; }
.js.ready .next-date { animation: hero-slide var(--dur-hero) var(--ease-groove) 820ms both; }
.js.ready .hero-media img { animation: kenburns 7s var(--ease-out) both; will-change: transform; }

/* Parallax: main.js escribe --sy (scroll acotado al alto del hero) */
.hero-media img { translate: 0 calc(var(--sy, 0) * .28px); }
.hero-grid { translate: 0 calc(var(--sy, 0) * .1px); opacity: calc(1 - var(--sy, 0) / 720); }

/* Destellos: la estrella de 4 puntas del universo de la banda */
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); fill: var(--halo-gold);
  opacity: 0; scale: .2; transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(249, 208, 117, .6));
}
.sparkle-cyan { fill: var(--halo-cyan); filter: drop-shadow(0 0 6px rgba(0, 227, 228, .6)); }
.js.ready .sparkle { animation: twinkle var(--t, 3.5s) var(--ease-in-out) var(--d, 1s) infinite; }

/* Próxima fecha: punto «en vivo», brillo al hover */
.next-date { position: relative; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out), translate var(--dur-base) var(--ease-out); }
.next-date-label { display: flex; align-items: center; gap: 8px; }
.next-date-label::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: var(--halo-cyan); animation: pulse 2s var(--ease-out) infinite;
}
.next-date::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(247, 241, 229, .14) 50%, transparent 65%);
  translate: -110% 0; transition: translate var(--dur-slow) var(--ease-in-out);
}
@media (hover: hover) {
  .next-date:hover { translate: 0 -2px; }
  .next-date:hover::after { translate: 110% 0; }
}

/* --- Cabecera: compacta al hacer scroll, sello que gira, nav activo --- */
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; }
.site-header { transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.site-header[data-scrolled] { padding-block: 8px; background: rgba(20, 16, 11, .94); }
.brand img { transition: scale var(--dur-base) var(--ease-out), rotate var(--dur-slow) var(--ease-groove); }
.site-header[data-scrolled] .brand img { scale: .84; }
@media (hover: hover) { .brand:hover img { rotate: 360deg; } }

.site-nav a, .footer-links a { position: relative; }
.site-nav a::after, .footer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--orange-brule); scale: 0 1; transform-origin: left;
  transition: scale var(--dur-base) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after, .footer-links a:hover::after { scale: 1 1; }
.site-nav a[aria-current] { color: var(--text-strong); }

/* Barra de progreso de lectura: solo donde hay scroll-driven animations */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @keyframes progress { to { scale: 1 1; } }
  .scroll-progress {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 45;
    background: var(--gradient-calle); transform-origin: left; scale: 0 1; pointer-events: none;
    animation: progress linear both; animation-timeline: scroll(root);
  }
}

/* --- Reveals al scroll -------------------------------------------------
   [data-reveal="variante"] en un elemento, o [data-reveal-stagger] en un
   padre para escalonar a sus hijos (main.js asigna --i y .is-in).      */
.js [data-reveal], .js [data-reveal-stagger] > * {
  opacity: 0; translate: 0 28px;
  transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out),
              scale var(--dur-reveal) var(--ease-groove), rotate var(--dur-reveal) var(--ease-groove),
              clip-path var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out),
              box-shadow var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal="wipe"] { translate: 0 12px; clip-path: inset(100% 0 0 0); }
.js [data-reveal="left"] { translate: -32px 0; }
.js [data-reveal="right"] { translate: 32px 0; }
.js [data-reveal="scale"], .js [data-reveal-stagger="scale"] > * { translate: 0 10px; scale: .82; }
.js [data-reveal-stagger="scale"] > .swatch { rotate: -6deg; transform-origin: bottom left; }
.js [data-reveal="slam"], .js [data-reveal-stagger="slam"] > * { translate: 0 0; scale: 1.18; filter: blur(10px); }
.js [data-reveal="stamp"] { translate: 6px 6px; box-shadow: 0 0 0 transparent; }
.js [data-reveal-stagger="grow"] > * { opacity: 1; translate: 0 0; scale: 0 1; transform-origin: left; }

.js .is-in[data-reveal], .js [data-reveal-stagger] > .is-in {
  opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0);
}
.js .is-in[data-reveal="wipe"] { clip-path: inset(-.3em 0 -.3em 0); }
.js .is-in[data-reveal="stamp"] { box-shadow: var(--card-shadow, 6px 6px 0 var(--noir)); }

/* El filete de la etiqueta de sección se dibuja tras el texto */
.js [data-reveal-stagger] > .section-label::after, .js .section-label[data-reveal]::after {
  scale: 0 1; transform-origin: left;
  transition: scale var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) + 220ms);
}
.js [data-reveal-stagger] > .section-label.is-in::after, .js .section-label.is-in[data-reveal]::after { scale: 1 1; }

/* Filas de discografía y trayectoria: la línea se dibuja con la fila */
.js [data-reveal-stagger] > .release { position: relative; border-top-color: transparent; }
.js [data-reveal-stagger] > .release::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--border-width) * -1); height: var(--border-width);
  background: var(--border-ink); scale: 0 1; transform-origin: left;
  transition: scale var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) + 120ms);
}
.js [data-reveal-stagger] > .release.is-in::before { scale: 1 1; }
.js [data-reveal-stagger] > .show { position: relative; border-bottom-color: transparent; }
.js [data-reveal-stagger] > .show::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--border-hairline); scale: 0 1; transform-origin: left;
  transition: scale var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) + 120ms);
}
.js [data-reveal-stagger] > .show.is-in::after { scale: 1 1; }

/* --- Hovers de imprenta ----------------------------------------------- */
/* Botón: la tinta barre de izquierda a derecha */
.btn { position: relative; overflow: hidden; isolation: isolate; transition-timing-function: var(--ease-groove); }
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--btn-ink, transparent); translate: -101% 0;
  transition: translate var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .btn:hover::before { translate: 0 0; } }

/* Fotos de Bio: leve inclinación de montaje que se endereza al hover */
.bio-photos figure { rotate: -1.2deg; transition: rotate var(--dur-slow) var(--ease-groove), scale var(--dur-slow) var(--ease-out); }
.bio-photos figure:last-child { rotate: 1.2deg; }
@media (hover: hover) { .bio-photos figure:hover { rotate: 0deg; scale: 1.02; } }

/* Discografía: título que se desliza, punto del color de la clase */
.release-title { transition: translate var(--dur-base) var(--ease-out); }
.release-kind::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: middle;
  border-radius: var(--radius-circle); background: var(--kind); scale: 0; transition: scale var(--dur-base) var(--ease-groove);
}
@media (hover: hover) {
  .release:hover .release-title { translate: 8px 0; }
  .release:hover .release-kind::before { scale: 1; }
}

/* Formación: retratos con inclinación alterna que se enderezan; anillo
   halo alrededor del círculo (nunca sobre el retrato). */
.member picture { position: relative; border-radius: var(--radius-circle); }
.member picture::before {
  content: ""; position: absolute; inset: -6px; border-radius: var(--radius-circle);
  background: var(--gradient-halo-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  animation: spin 6s linear infinite paused;
}
.member img { transition: rotate var(--dur-slow) var(--ease-groove), scale var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.member:nth-child(odd) img { rotate: -1.2deg; }
.member:nth-child(even) img { rotate: 1.2deg; }
@media (hover: hover) {
  .member:hover img { rotate: 0deg; scale: 1.03; box-shadow: 0 0 44px -8px var(--stage); }
  .member:hover picture::before { opacity: 1; animation-play-state: running; }
}

/* Divisor de espectro: el gradiente fluye */
.divider-spectrum {
  background: linear-gradient(90deg, var(--orange-brule), var(--rose-fuchsia), var(--orange-brule));
  background-size: 200% 100%; animation: flow 8s linear infinite;
}

/* Fechas: luces nocturnas flotando detrás del contenido */
.fechas { position: relative; isolation: isolate; overflow: hidden; }
.fechas::before, .fechas::after {
  content: ""; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; border-radius: var(--radius-circle);
  pointer-events: none; opacity: .38;
}
.fechas::before {
  left: -20vmax; top: -18vmax;
  background: radial-gradient(circle, var(--rose-fuchsia) 0%, rgba(186, 50, 90, 0) 60%);
  animation: drift 18s var(--ease-in-out) infinite alternate;
}
.fechas::after {
  right: -24vmax; bottom: -22vmax;
  background: radial-gradient(circle, var(--halo-cyan-deep) 0%, rgba(0, 143, 194, 0) 60%);
  animation: drift-b 22s var(--ease-in-out) infinite alternate;
}
.show-city { transition: color var(--dur-fast) var(--ease-out), translate var(--dur-base) var(--ease-out); }
@media (hover: hover) { .show:hover .show-city { color: var(--halo-gold); translate: 6px 0; } }

/* Universo: la muestra se levanta con sombra de imprenta */
.swatch-chip { transition: translate var(--dur-base) var(--ease-out), rotate var(--dur-base) var(--ease-groove), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) { .swatch:hover .swatch-chip { translate: -3px -3px; rotate: -2deg; box-shadow: var(--shadow-offset); } }

/* Contacto: el sello gira como un disco; el correo se subraya */
.card-ink-head img { animation: spin 30s linear infinite; }
.contacto-mail {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: left bottom; background-size: 0% 2px;
  transition: color var(--dur-fast) var(--ease-out), background-size var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .contacto-mail:hover { background-size: 100% 2px; } }

/* Marquesina: se detiene al pasar el cursor */
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }

/* Pie: el halo respira, un anillo cónico gira, el corazón late */
.footer-halo { animation: breathe 6s var(--ease-in-out) infinite alternate; }
.footer-halo::after {
  content: ""; position: absolute; inset: 7%; border-radius: var(--radius-circle);
  background: var(--gradient-halo-ring); opacity: .45;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 40s linear infinite;
}
.footer-thanks span { display: inline-block; animation: beat 1.4s var(--ease-in-out) infinite; }

/* Grano: parpadeo de película (transform, no background-position) */
.grain { inset: -2%; animation: flicker 1s step-end infinite; }

/* ============================================================
   RESPONSIVE — el diseño no trae cortes; estos son los mínimos
   ============================================================ */
@media (max-width: 1023px) {
  .hero-grid, .bio-grid, .musica-grid, .fechas-top, .universo-top, .faq-inner, .contacto-grid {
    grid-template-columns: 1fr; gap: var(--space-7);
  }
  /* Hero en una columna: la foto cuadrada pasa a ser una banda superior con
     fundido, y el texto arranca debajo de los rostros (15–36 % de la foto). */
  .hero {
    --hero-band: min(118vw, 72vh);
    --hero-band: min(118vw, 72svh);
    padding-top: calc(var(--hero-band) * .62);
  }
  .hero-media {
    inset: 0 0 auto; height: var(--hero-band);
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
  }
  .musica-aside { position: static; }
  .next-date, .fechas .card-ink { justify-self: stretch; max-width: none; }
  .bio-stats { gap: var(--space-6); }
  .member { flex-basis: calc((100% - 3 * var(--space-5)) / 4); }
}

@media (max-width: 899px) {
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: var(--space-2) var(--gutter-page) var(--space-5);
    background: rgba(20, 16, 11, .96); border-bottom: 1px solid var(--border-hairline);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .site-nav a { padding-block: 14px; border-bottom: 1px solid var(--border-hairline); }
  .site-nav a::after { display: none; }
  .site-header[data-open] .site-nav { display: flex; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .member { flex-basis: calc((100% - 2 * var(--space-5)) / 3); }
}

@media (max-width: 639px) {
  .section { padding-block: var(--space-8); }
  .contacto { padding-block: var(--space-9); }
  .bio-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .bio-stats .stat-num { font-size: clamp(36px, 11vw, 48px); }
  .musica-stats .stat-num { font-size: 44px; }
  .release { grid-template-columns: 1fr; gap: 6px; }
  .release-note { text-align: left; }
  .shows-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .shows-note { text-align: left; }
  .faq-item summary { gap: var(--space-4); padding-block: 16px; }
  .card-ink { padding: var(--space-5); }
  .swatch-chip { width: 72px; height: 72px; }
  .member { flex-basis: calc((100% - var(--space-5)) / 2); }
  .sparkles svg:nth-child(n+4) { display: none; }
}

/* ============================================================
   PREFERENCIAS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { height: auto; padding-block: var(--space-3); }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee-track span:not(:first-child) { display: none; }
  .marquee-track span { white-space: normal; padding-right: 0; text-align: center; }
  .btn, .next-date, .site-nav a, .footer-links a, .contacto-mail { transition: none; }
  .grain { display: none; }
  /* Capa de movimiento: todo visible y quieto */
  .js .hero-eyebrow, .js .hero-word, .js .hero-claim, .js .hero-cta .btn, .js .next-date,
  .js.ready .hero-eyebrow, .js.ready .hero-word, .js.ready .hero-claim, .js.ready .hero-cta .btn, .js.ready .next-date { opacity: 1; animation: none; }
  .js.ready .hero-media img, .js.ready .sparkle, .next-date-label::before, .next-date::after,
  .divider-spectrum, .fechas::before, .fechas::after, .card-ink-head img,
  .footer-halo, .footer-halo::after, .footer-thanks span, .member picture::before, .scroll-progress { animation: none; }
  .hero-media img, .hero-grid { translate: none; opacity: 1; }
  .scroll-progress { display: none; }
  .js [data-reveal], .js [data-reveal-stagger] > *, .js .section-label::after,
  .js [data-reveal-stagger] > .release::before, .js [data-reveal-stagger] > .show::after {
    opacity: 1; translate: none; scale: none; rotate: none; clip-path: none; filter: none; transition: none;
  }
  .js [data-reveal-stagger] > .release { border-top-color: var(--border-ink); }
  .js [data-reveal-stagger] > .show { border-bottom-color: var(--border-hairline); }
  .js [data-reveal="stamp"] { box-shadow: var(--card-shadow, 6px 6px 0 var(--noir)); }
  .bio-photos figure, .member img { rotate: none; transition: none; }
  .site-header, .brand img, .release-title, .swatch-chip, .show-city { transition: none; }
}