@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
}

:root {
  --color-bg: #0e0b0b;
  --color-surface: #151414;
  --color-surface-alt: #211d18;
  --color-ink: #f7f4ee;
  --color-muted: #bdb5a9;
  --color-accent: #d4af37;
  --color-line: #40372a;
  --font-heading: "Bodoni Moda", Didot, Georgia, serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --container: min(1280px, calc(100vw - 48px));
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 36px;
  --space-xl: 64px;
  --space-xxl: 104px;
  --radius-sm: 2px;
  --radius-md: 4px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Safety net: no display typeface should ever push the page sideways. */
  overflow-x: clip;
  overflow-wrap: break-word;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 1px solid rgba(247, 244, 238, 0.12);
  background: linear-gradient(180deg, rgba(14, 11, 11, 0.96), rgba(14, 11, 11, 0.18));
}

.site-header__inner,
.hero__inner,
.trust-strip,
.manifesto__inner,
.experience__inner,
.trajectory__inner,
.music__inner,
.showreel__inner,
.documented-shows__inner,
.director__inner,
.availability-stage__inner,
.site-footer__inner,
.content-shell {
  width: var(--container);
  margin-inline: auto;
}

.site-header__inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.wordmark {
  display: inline-flex;
  width: max-content;
  flex-direction: column;
  align-items: center;
  color: var(--color-ink);
  font-family: var(--font-heading);
  line-height: 0.78;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark__la {
  color: var(--color-accent);
  font-size: 0.66rem;
  letter-spacing: 0.25em;
  transform: translateX(0.13em);
}

.wordmark__name {
  font-size: 1.28rem;
  letter-spacing: 0.12em;
}

.site-header__territory {
  display: none;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-header__territory span {
  margin-inline: 0.4em;
  color: var(--color-accent);
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 36px);
}

.primary-nav a {
  position: relative;
  padding-block: 12px;
  color: var(--color-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-ink);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__cta {
  justify-self: end;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  transform: translateY(-2px);
}

.button--compact {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 0.61rem;
}

.button--outline {
  background: transparent;
  color: var(--color-ink);
}

.button--outline:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.text-link {
  padding-block: 10px;
  color: var(--color-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration-color: var(--color-line);
  text-underline-offset: 7px;
  text-transform: uppercase;
}

.text-link:hover {
  color: var(--color-accent);
}

.eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background:
    linear-gradient(90deg, rgba(14, 11, 11, 1) 0%, rgba(14, 11, 11, 0.96) 38%, rgba(14, 11, 11, 0.58) 68%, rgba(14, 11, 11, 0.9) 100%),
    linear-gradient(145deg, var(--color-bg), var(--color-surface-alt));
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    linear-gradient(rgba(247, 244, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 244, 238, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, black, transparent 75%);
}

.hero__glow {
  position: absolute;
  top: -28%;
  right: 2%;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04) 38%, transparent 70%);
  filter: blur(12px);
}

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: clamp(42px, 7vw, 112px);
  padding-block: 136px 112px;
}

.hero__copy {
  max-width: 760px;
  padding-left: clamp(0px, 3vw, 48px);
}

.hero h1,
.availability-stage h2,
.entry h1,
.content-shell h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.82;
  text-wrap: balance;
}

.hero h1 {
  max-width: 8ch;
  font-size: clamp(4.3rem, 9vw, 8.8rem);
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
  color: var(--color-accent);
  font-size: 0.26em;
  letter-spacing: 0.22em;
  line-height: 1.2;
  transform: translateX(0.12em);
}

.hero h1 em {
  display: block;
  margin-top: 0.18em;
  color: var(--color-ink);
  font-size: 0.22em;
  font-style: normal;
  letter-spacing: 0.28em;
  line-height: 1;
  text-align: right;
}

.hero__statement {
  max-width: 32ch;
  margin: clamp(28px, 4vh, 46px) 0 0;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.42rem, 2vw, 2rem);
  line-height: 1.2;
}

.hero__intro {
  max-width: 59ch;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.hero__visual {
  position: relative;
  min-height: min(68vh, 720px);
  align-self: end;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-bottom: 0;
  border-radius: 160px 160px 0 0;
  background:
    radial-gradient(circle at 54% 22%, rgba(212, 175, 55, 0.22), transparent 14%),
    radial-gradient(circle at 34% 64%, rgba(247, 244, 238, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(21, 20, 20, 0.38), rgba(14, 11, 11, 0.98));
}

.hero__visual::before,
.hero__visual::after {
  content: "";
  position: absolute;
  inset: auto -20% 9%;
  height: 32%;
  border-top: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.hero__visual::after {
  inset: auto -8% 3%;
  transform: rotate(4deg);
}

.hero__beam {
  position: absolute;
  top: -8%;
  width: 26%;
  height: 82%;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.23), transparent 72%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(7px);
  opacity: 0.56;
}

.hero__beam--one {
  left: 11%;
  transform: rotate(8deg);
}

.hero__beam--two {
  right: 7%;
  transform: rotate(-12deg);
  opacity: 0.34;
}

.hero__stage-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  color: rgba(247, 244, 238, 0.08);
  font-family: var(--font-heading);
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 1;
  letter-spacing: -0.09em;
  transform: translate(-53%, -52%);
}

.hero__image-note {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 244, 238, 0.22);
  color: var(--color-muted);
  font-size: 0.61rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__image-note strong {
  color: var(--color-ink);
  font-weight: 500;
  text-align: right;
}

.trust-strip {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-line);
  background: rgba(14, 11, 11, 0.92);
}

.trust-strip > div {
  min-height: 76px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--color-line);
}

.trust-strip > div:last-child {
  border-right: 0;
}

.trust-strip span {
  color: var(--color-muted);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.trust-strip strong {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
}

.manifesto,
.experience,
.trajectory,
.music,
.showreel,
.documented-shows,
.director {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
}

.manifesto,
.trajectory,
.showreel {
  background: var(--color-bg);
}

.experience,
.music,
.documented-shows {
  background: var(--color-surface);
}

.manifesto__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(56px, 8vw, 132px);
  align-items: center;
}

.manifesto h2,
.experience h2,
.section-heading h2,
.showreel h2,
.director h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3.25rem, 6vw, 6.7rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-wrap: balance;
}

.manifesto h2 span,
.section-heading h2 span,
.showreel h2 span {
  color: var(--color-accent);
}

.manifesto__copy > p:not(.eyebrow),
.experience__header > p:last-child,
.section-heading > p:last-child,
.showreel__copy > p:last-child,
.director__copy > p:not(.eyebrow) {
  max-width: 56ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.manifesto__copy > p + p,
.director__copy > p + p {
  margin-top: var(--space-md);
}

.manifesto__copy > p:last-child {
  padding-left: 18px;
  border-left: 1px solid var(--color-accent);
  font-size: 0.84rem;
}

.media-placeholder {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, transparent 38%, rgba(14, 11, 11, 0.94)),
    radial-gradient(circle at 72% 18%, rgba(212, 175, 55, 0.2), transparent 19%),
    linear-gradient(135deg, var(--color-surface-alt), var(--color-bg));
}

.media-placeholder::before {
  content: "";
  position: absolute;
  top: -22%;
  right: 11%;
  width: 24%;
  height: 93%;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.24), transparent 76%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  filter: blur(7px);
}

.media-placeholder--orchestra {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.media-placeholder--portrait {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.media-placeholder__code,
.video-placeholder__code {
  position: relative;
  z-index: 2;
  width: max-content;
  color: var(--color-accent);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.media-placeholder strong,
.video-placeholder strong {
  position: relative;
  z-index: 2;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
}

.media-placeholder small,
.video-placeholder small {
  position: relative;
  z-index: 2;
  color: var(--color-muted);
  font-size: 0.68rem;
}

.experience__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(480px, 1.28fr);
  gap: clamp(58px, 8vw, 130px);
  align-items: start;
}

/* Solo la cabecera de «El show» es una columna lateral dentro de una rejilla de
   dos columnas, así que es la única que puede quedarse fija. `.section-heading`
   es un bloque centrado a ancho completo: si se hace sticky, se queda pegado y
   pasa por encima del contenido que viene debajo (galería, trayectoria, agenda).
   Esa era la causa de los textos superpuestos al bajar la página en tablet y
   escritorio, donde la regla `position: static` de móvil ya no aplicaba. */
.experience__header {
  position: sticky;
  top: 48px;
}

.section-heading--compact {
  max-width: 840px;
}

.section-heading--compact h2 {
  font-size: clamp(3rem, 5.4vw, 5.8rem);
}

.experience__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 42px;
}

.experience-item {
  min-height: 210px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  align-content: center;
  padding-block: 34px;
  border-top: 1px solid var(--color-line);
}

.experience-item--wide {
  grid-column: 1 / -1;
  padding-left: clamp(0px, 7vw, 96px);
}

.experience-item > span {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1rem;
}

.experience-item h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.65rem);
  font-weight: 500;
  line-height: 1;
}

.experience-item p {
  max-width: 38ch;
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.trajectory__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(520px, 1.32fr);
  gap: clamp(58px, 8vw, 132px);
  align-items: start;
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-lg);
  padding-block: 34px;
  border-top: 1px solid var(--color-line);
}

.timeline time {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1;
}

.timeline h3,
.release-card h3,
.show-card h3,
.show-card h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.timeline p,
.release-card > p:not(.release-card__type),
.show-card > p:not(.show-card__date) {
  margin: 12px 0 0;
  color: var(--color-muted);
}

.music-grid,
.show-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.release-card,
.show-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 4vw, 50px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 82% 12%, rgba(212, 175, 55, 0.14), transparent 25%),
    var(--color-bg);
}

.release-card--featured {
  background:
    radial-gradient(circle at 82% 12%, rgba(212, 175, 55, 0.23), transparent 28%),
    var(--color-surface-alt);
}

.release-card__type,
.show-card__date {
  margin: 0 0 auto;
  padding-bottom: var(--space-xl);
  color: var(--color-accent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.release-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.channel-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-xl);
  margin-top: var(--space-md);
  padding: clamp(26px, 4vw, 50px);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}

.channel-panel .eyebrow {
  margin-bottom: var(--space-sm);
}

.channel-panel h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
}

.channel-panel p:last-child {
  max-width: 68ch;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
}

.showreel {
  position: relative;
  overflow: hidden;
}

.showreel::before {
  content: "";
  position: absolute;
  bottom: -60%;
  left: -12%;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 67%);
}

.showreel__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(480px, 1.32fr);
  gap: clamp(52px, 7vw, 112px);
  align-items: center;
}

.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, transparent 36%, rgba(14, 11, 11, 0.96)),
    linear-gradient(130deg, var(--color-surface-alt), var(--color-bg));
}

.video-placeholder__frame {
  position: absolute;
  inset: 10% 8% 23%;
  border: 1px solid rgba(247, 244, 238, 0.12);
}

.video-placeholder__frame::before,
.video-placeholder__frame::after {
  content: "";
  position: absolute;
  top: -22%;
  width: 1px;
  height: 150%;
  background: linear-gradient(var(--color-accent), transparent);
  opacity: 0.5;
}

.video-placeholder__frame::before {
  left: 32%;
  transform: rotate(18deg);
}

.video-placeholder__frame::after {
  right: 26%;
  transform: rotate(-16deg);
}

.show-card {
  min-height: 320px;
}

.show-card .text-link {
  margin-top: var(--space-lg);
}

.director {
  background: var(--color-surface-alt);
}

.director__inner {
  display: grid;
  grid-template-columns: minmax(340px, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(62px, 10vw, 156px);
  align-items: center;
}

.director__copy {
  max-width: 600px;
}

.director h2 {
  font-size: clamp(4rem, 8vw, 8.4rem);
  text-transform: uppercase;
}

.director__note {
  padding-left: 18px;
  border-left: 1px solid var(--color-accent);
  font-size: 0.82rem !important;
}

.director__note strong {
  color: var(--color-ink);
  font-weight: 500;
}

.availability-stage {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  background: var(--color-surface);
}

.availability-stage__inner {
  display: grid;
  grid-template-columns: minmax(160px, 0.42fr) minmax(280px, 0.95fr) minmax(280px, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.availability-stage h2 {
  font-size: clamp(2.3rem, 4.6vw, 4.8rem);
  line-height: 0.98;
}

.availability-stage__content > p:first-child {
  max-width: 51ch;
  margin: 0;
  color: var(--color-muted);
}

.availability-stage__content .button {
  margin-top: var(--space-lg);
}

.availability-stage__territory,
.availability-stage__phone {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.availability-stage__phone {
  margin-top: var(--space-md);
}

.availability-stage__phone span {
  margin-right: 8px;
  color: var(--color-accent);
}

.site-footer {
  padding-block: 34px;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-xl);
  color: var(--color-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
}

.site-footer__brand {
  margin-bottom: 4px !important;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.site-footer__nav a {
  color: var(--color-muted);
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
}

.mobile-booking {
  display: none;
}

.content-shell {
  min-height: 75vh;
  padding-block: 160px var(--space-xxl);
}

.content-shell--centered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.entry {
  max-width: 820px;
}

.entry h1,
.content-shell h1 {
  margin-bottom: var(--space-lg);
  font-size: clamp(3rem, 7vw, 6.5rem);
}

.entry__content {
  color: var(--color-muted);
}

@media (max-width: 960px) {
  :root {
    --container: min(100% - 32px, 720px);
  }

  /* Mobile header: one centred column — wordmark, then nav. */
  .site-header__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding-top: 16px;
    text-align: center;
  }

  .site-header__territory {
    display: none;
  }

  .primary-nav {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 24px;
    margin-top: 12px;
    padding-bottom: 4px;
    border-top: 1px solid rgba(247, 244, 238, 0.1);
  }

  .primary-nav a {
    flex: 0 0 auto;
    padding-block: 10px 6px;
  }

  .site-header__cta {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 170px 124px;
  }

  /* Single-column layout reads best centred; long-form body copy stays
     left-aligned further down the page for line-scanning comfort. */
  .hero__copy {
    max-width: 650px;
    margin-inline: auto;
    padding-left: 0;
    text-align: center;
  }

  .hero h1 {
    max-width: none;
    margin-inline: auto;
  }

  .hero h1 span,
  .hero h1 em {
    text-align: center;
    transform: none;
  }

  .hero__statement,
  .hero__intro {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .experience__header,
  .section-heading,
  .showreel__copy {
    text-align: center;
  }

  .experience__header > p:last-child,
  .section-heading > p:last-child,
  .showreel__copy > p:last-child {
    margin-inline: auto;
  }

  .manifesto__copy,
  .director__copy {
    text-align: center;
  }

  .manifesto__copy > p:not(.eyebrow),
  .director__copy > p:not(.eyebrow) {
    margin-inline: auto;
  }

  /* A left rule cannot sit under centred text: switch to a top rule. */
  .manifesto__copy > p:last-child,
  .director__note {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-accent);
  }

  .hero__visual {
    width: min(100%, 620px);
    min-height: 560px;
    margin-inline: auto;
  }

  .trust-strip {
    width: 100%;
  }

  .manifesto__inner,
  .experience__inner,
  .trajectory__inner,
  .showreel__inner,
  .director__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .channel-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .experience__header,
  .section-heading {
    position: static;
  }

  .director__inner {
    width: min(100% - 32px, 720px);
  }

  .director .media-placeholder--portrait {
    width: min(100%, 560px);
  }

  .availability-stage__inner {
    grid-template-columns: 1fr 1.3fr;
  }

  .availability-stage__content {
    grid-column: 2;
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
  }

  .site-footer__nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mobile-booking {
    position: fixed;
    z-index: 50;
    right: 16px;
    bottom: 16px;
    left: 16px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .site-footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 640px) {
  .hero__inner {
    gap: 38px;
    padding-top: 132px;
  }

  /* 8 uppercase Bodoni characters must fit the viewport: at 15.5vw the
     wordmark measures roughly 0.62em per glyph, so it stays inside the
     container instead of overflowing the page as it did at 23vw. */
  .hero h1 {
    font-size: clamp(2.9rem, 15.5vw, 5.4rem);
  }

  .hero h1 span {
    font-size: 0.3em;
  }

  .hero h1 em {
    font-size: 0.26em;
  }

  .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .hero__statement {
    max-width: 22ch;
    font-size: 1.32rem;
  }

  .hero__actions {
    align-items: center;
    flex-direction: column;
    gap: 16px;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__actions .text-link {
    width: max-content;
  }

  .hero__visual {
    min-height: 470px;
    border-radius: 104px 104px 0 0;
  }

  .hero__image-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .hero__image-note strong {
    text-align: left;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .trust-strip > div {
    min-height: 54px;
    justify-content: space-between;
    padding: 11px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .trust-strip > div:last-child {
    border-bottom: 0;
  }

  .hero__inner {
    padding-bottom: 214px;
  }

  .availability-stage {
    padding-block: 78px;
  }

  .manifesto,
  .experience,
  .trajectory,
  .music,
  .showreel,
  .documented-shows,
  .director {
    padding-block: 78px;
  }

  .manifesto h2,
  .experience h2,
  .section-heading h2,
  .showreel h2 {
    font-size: clamp(2.85rem, 13.5vw, 4.2rem);
  }

  .director h2 {
    font-size: clamp(3.7rem, 18vw, 5.5rem);
  }

  .media-placeholder {
    padding: 20px;
  }

  .experience__list {
    grid-template-columns: 1fr;
  }

  .experience-item,
  .experience-item--wide {
    grid-column: auto;
    min-height: 168px;
    padding-left: 0;
  }

  .timeline li {
    grid-template-columns: 78px 1fr;
    gap: var(--space-md);
  }

  .music-grid,
  .show-cards {
    grid-template-columns: 1fr;
  }

  .release-card,
  .show-card {
    min-height: 310px;
  }

  .channel-panel .button {
    width: 100%;
  }

  .video-placeholder {
    aspect-ratio: 4 / 5;
    padding: 20px;
  }

  .availability-stage__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .availability-stage__content {
    grid-column: auto;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    text-align: center;
  }

  .site-footer__nav {
    grid-column: auto;
    grid-row: auto;
    justify-content: center;
  }

  /* Cards, list items and the closing CTA share the centred rhythm. */
  .experience-item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  .experience-item p {
    max-width: 34ch;
    margin-inline: auto;
  }

  .timeline li {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  .release-card,
  .show-card,
  .channel-panel {
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .release-card__actions {
    justify-content: center;
  }

  .channel-panel p:last-child {
    margin-inline: auto;
  }

  .media-placeholder,
  .video-placeholder {
    align-items: center;
    text-align: center;
  }

  .media-placeholder__code,
  .video-placeholder__code {
    margin-inline: auto;
  }

  .availability-stage__inner {
    justify-items: center;
    text-align: center;
  }

  .availability-stage__content > p:first-child {
    margin-inline: auto;
  }

  .availability-stage__content .button {
    width: 100%;
  }

  .trust-strip > div {
    justify-content: center;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Booking section — the conversion surface of the whole site.
   ========================================================================== */

/* WordPress' own utility class ships with the block library CSS, which this
   theme dequeues. Redefined here so visually hidden text keeps working. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  word-wrap: normal !important;
}

.booking {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.booking__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(52px, 7vw, 118px);
  align-items: start;
}

.booking__intro {
  position: sticky;
  top: 48px;
}

.booking h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-wrap: balance;
}

.booking h2 span {
  color: var(--color-accent);
}

.booking__intro > p:not(.eyebrow) {
  max-width: 46ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

.booking__channels {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.booking__channels li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-block: 16px;
  border-top: 1px solid var(--color-line);
}

.booking__channels span {
  min-width: 148px;
  color: var(--color-accent);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.booking__channels strong,
.booking__channels a {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 500;
}

.booking__channels a {
  text-decoration-color: var(--color-line);
  text-underline-offset: 6px;
}

.booking__channels a:hover,
.booking__channels a:focus-visible {
  color: var(--color-accent);
}

/* --- Form ---------------------------------------------------------------- */

.booking-form {
  padding: clamp(26px, 3.6vw, 46px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 88% 6%, rgba(212, 175, 55, 0.12), transparent 32%),
    var(--color-surface);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-md);
  text-align: left;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-md);
}

.field label {
  color: var(--color-ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field__req {
  color: var(--color-accent);
}

.field small {
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: rgba(247, 244, 238, 0.04);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field select {
  /* Native arrow is invisible on a dark ground: draw our own in gold. */
  appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%), linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
  background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(189, 181, 169, 0.72);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(212, 175, 55, 0.5);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-accent);
  background: rgba(247, 244, 238, 0.07);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Only flag an invalid field once the visitor has actually engaged with it. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: #e86a5c;
}

.field--check {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  margin-block: var(--space-md) var(--space-lg);
}

.field--check input {
  width: 22px;
  min-height: 22px;
  height: 22px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--color-accent);
}

.field--check label {
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
}

.booking-form__submit {
  width: 100%;
}

.booking-form__legal {
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: 0.72rem;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.booking-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-form__status:empty {
  display: none;
}

.form-note {
  margin: 0 0 var(--space-lg);
  padding: 14px 16px;
  border-left: 2px solid var(--color-accent);
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-ink);
  font-size: 0.88rem;
}

.form-note--error {
  border-left-color: #e86a5c;
  background: rgba(232, 106, 92, 0.1);
}

/* ==========================================================================
   Back-to-top control
   ========================================================================== */

.to-top {
  position: fixed;
  z-index: 45;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 50%;
  background: rgba(14, 11, 11, 0.72);
  backdrop-filter: blur(9px);
  color: var(--color-accent);
  cursor: pointer;
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease,
    background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.to-top__icon {
  transition: transform 220ms ease;
}

.to-top:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.to-top:hover .to-top__icon {
  transform: translateY(-2px);
}

.to-top__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Both floating controls stay hidden while the hero — which carries its own
   call to action — is still on screen. Without JavaScript they remain visible. */
.has-js:not(.is-scrolled) .to-top,
.has-js:not(.is-scrolled) .mobile-booking {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

.mobile-booking {
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease;
}

@media (max-width: 960px) {
  .booking__inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .booking__intro {
    position: static;
    text-align: center;
  }

  .booking__intro > p:not(.eyebrow) {
    margin-inline: auto;
  }

  .booking__channels li {
    align-items: center;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .booking__channels span {
    min-width: 0;
  }

  /* Above the sticky booking bar, never on top of it. */
  .to-top {
    right: 16px;
    bottom: 84px;
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 640px) {
  .booking {
    padding-block: 78px;
  }

  .booking h2 {
    font-size: clamp(2.85rem, 13.5vw, 4.2rem);
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  /* Form controls stay left-aligned: centred labels and inputs are harder
     to scan and to fill in on a phone. */
  .booking-form {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top__icon,
  .mobile-booking {
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   Agenda — the next confirmed date leads, documented history follows.
   ========================================================================== */

.documented-shows__subtitle {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.documented-shows__subtitle + .show-cards {
  margin-top: var(--space-lg);
}

.show-card--next {
  border-color: rgba(212, 175, 55, 0.55);
  background:
    radial-gradient(circle at 82% 12%, rgba(212, 175, 55, 0.22), transparent 30%),
    var(--color-surface-alt);
}

.show-card__flag {
  margin: 0 0 var(--space-md);
  padding: 6px 12px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.show-card--next .show-card__date {
  padding-bottom: var(--space-lg);
}

.show-card--next h3,
.show-card--next h4 {
  color: var(--color-ink);
}

/* The hidden attribute must win over component display rules. */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   Agenda — event cards and filters
   Overrides the earlier .show-card rules: the card gained a header row with a
   date block and a status badge, so it is no longer a simple stack.
   ========================================================================== */

.show-cards {
  /* Adapts to one, two or three cards without leaving a half-empty row. */
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  align-items: stretch;
}

.show-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  padding: clamp(24px, 3vw, 38px);
  text-align: left;
}

.show-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}

.show-card__date {
  margin: 0;
  padding: 0;
}

.show-card__date time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.show-card__day {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.86;
}

.show-card__month {
  color: var(--color-muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.show-card__status {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-card--next .show-card__status {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-accent);
}

.show-card__status--cancelled {
  border-color: rgba(232, 106, 92, 0.55);
  background: rgba(232, 106, 92, 0.12);
  color: #e86a5c;
}

.show-card--cancelled .show-card__title {
  text-decoration: line-through;
  text-decoration-color: rgba(232, 106, 92, 0.6);
}

.show-card__title {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
}

.show-card__place {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.show-card__place strong {
  color: var(--color-ink);
  font-weight: 600;
}

.show-card__near {
  color: rgba(189, 181, 169, 0.72);
  font-size: 0.8rem;
}

.show-card__summary {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.show-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.show-card__tags li {
  padding: 5px 11px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.show-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  /* Pushes the actions to the bottom so every card lines up. */
  margin-top: auto;
  padding-top: var(--space-sm);
}

.share-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.share-button:hover,
.share-button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.share-button.is-copied {
  border-color: var(--color-accent);
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-accent);
}

/* --- Filters ------------------------------------------------------------- */

.agenda-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.agenda-filters__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.agenda-filters__label {
  margin-right: 4px;
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.agenda-filters button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.agenda-filters button:hover {
  border-color: rgba(212, 175, 55, 0.6);
  color: var(--color-ink);
}

/* aria-pressed is the state, so it drives the styling too: the visual and the
   accessible state can never disagree. */
.agenda-filters button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.agenda-filters__status {
  width: 100%;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.agenda-filters__status:empty {
  display: none;
}

.agenda-empty {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-align: center;
}

.agenda-empty button {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 640px) {
  .show-cards {
    grid-template-columns: 1fr;
  }

  /* The card keeps left alignment on phones: a date block, a place and a
     summary read faster ranged left than centred. */
  .show-card,
  .show-card__place,
  .show-card__summary {
    text-align: left;
  }

  .show-card__tags,
  .show-card__actions {
    justify-content: flex-start;
  }

  .agenda-filters {
    gap: var(--space-md);
  }

  .agenda-filters__group {
    justify-content: flex-start;
  }
}

/* Legal and credit line: its own row under the footer's two columns. */
.site-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: var(--space-md) !important;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.site-footer__credit a {
  color: var(--color-accent);
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 180ms ease;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  text-decoration-color: var(--color-accent);
}

@media (max-width: 640px) {
  .site-footer__legal {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   MOVIMIENTO

   Reglas de la casa:
   - Solo se animan `opacity`, `transform` y `box-shadow`. Nunca alto, ancho,
     margen ni `top`/`left`: eso provoca reflow y dispara el CLS.
   - Ninguna animación de entrada toca el H1 del hero con opacidad, porque es
     el elemento LCP. Un H1 que empieza transparente retrasa la métrica tanto
     como dure la animación.
   - Todo efecto de hover vive dentro de `@media (hover: hover)`. En una
     pantalla táctil el hover se queda "pegado" tras el toque y ensucia la
     interfaz.
   - `prefers-reduced-motion` desactiva absolutamente todo al final del archivo.
   ========================================================================== */

:root {
  /* Salida suave con un punto de inercia: la curva del brief. */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-reveal: 620ms;
  --dur-slide: 520ms;
  --dur-hover: 320ms;
  --dur-glow: 420ms;
  --dur-underline: 400ms;
  --glow-accent: 0 18px 42px -24px rgba(212, 175, 55, 0.55);
}

/* --------------------------------------------------------------------------
   1 · FADE-IN + SLIDE-UP AL HACER SCROLL
   Efecto:   opacidad 0 → 1 y desplazamiento de 20 px hacia arriba.
   Duración: 620 ms la opacidad, 520 ms el desplazamiento.
   Easing:   ease-out / cubic-bezier(0.33, 1, 0.68, 1).
   Disparo:  IntersectionObserver, una sola vez por elemento.

   El estado oculto SOLO existe bajo `.reveal-ready`, clase que añade
   motion-init.js antes del primer pintado. Sin JavaScript, sin
   IntersectionObserver o con movimiento reducido, esa clase nunca llega y todo
   el contenido se ve desde el primer momento.
   -------------------------------------------------------------------------- */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-reveal) ease-out,
    transform var(--dur-slide) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado dentro de una misma rejilla: los hermanos entran uno tras otro
   en lugar de aparecer todos de golpe. */
.experience__list > [data-reveal]:nth-child(2) { --i: 1; }
.experience__list > [data-reveal]:nth-child(3) { --i: 2; }
.experience__list > [data-reveal]:nth-child(4) { --i: 3; }

.timeline > [data-reveal]:nth-child(2) { --i: 1; }
.timeline > [data-reveal]:nth-child(3) { --i: 2; }
.timeline > [data-reveal]:nth-child(4) { --i: 3; }

.music-grid > [data-reveal]:nth-child(2),
.show-cards > [data-reveal]:nth-child(2) { --i: 1; }
.show-cards > [data-reveal]:nth-child(3) { --i: 2; }

/* --------------------------------------------------------------------------
   2 · ENTRADA AL CARGAR
   Efecto:   fade + slide de la cabecera y del hero, en cascada.
   Duración: 620 ms.
   Easing:   cubic-bezier(0.33, 1, 0.68, 1).
   Disparo:  carga de página. CSS puro, sin depender de JavaScript.
   -------------------------------------------------------------------------- */

@keyframes lx-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* El H1 se asienta sin tocar la opacidad: se pinta al instante, así que el LCP
   se mide igual de rápido que sin animación. */
@keyframes lx-settle {
  from { transform: translate3d(0, 16px, 0); }
  to   { transform: none; }
}

.site-header__inner { animation: lx-rise 620ms var(--ease-out) both; }
.hero h1            { animation: lx-settle 720ms var(--ease-out) both; }
.hero .eyebrow      { animation: lx-rise 620ms var(--ease-out) 120ms both; }
.hero__visual       { animation: lx-rise 760ms var(--ease-out) 180ms both; }
.hero__statement    { animation: lx-rise 620ms var(--ease-out) 240ms both; }
.hero__intro        { animation: lx-rise 620ms var(--ease-out) 320ms both; }
.hero__actions      { animation: lx-rise 620ms var(--ease-out) 400ms both; }
.trust-strip        { animation: lx-rise 620ms var(--ease-out) 500ms both; }

/* --------------------------------------------------------------------------
   3 · PARALLAX DE FONDO
   Efecto:   los halos dorados se desplazan más despacio que el contenido.
   Duración: continua, ligada a la posición de scroll.
   Disparo:  scroll.

   Se usa `animation-timeline`, no un listener de scroll en JavaScript. La
   animación corre en el hilo del compositor, así que no consume tiempo de
   respuesta a la interacción (INP) ni provoca tirones. Donde el navegador no
   lo soporta —hoy Safari y Firefox— sencillamente no hay parallax, que es una
   degradación perfectamente aceptable para un efecto decorativo.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lx-parallax-down {
      to { transform: translate3d(0, 26%, 0); }
    }

    @keyframes lx-parallax-up {
      to { transform: translate3d(0, -18%, 0); }
    }

    .hero__glow {
      animation: lx-parallax-down linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .showreel::before {
      animation: lx-parallax-up linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .hero__stage-mark {
      animation: lx-parallax-down linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
  }
}

/* --------------------------------------------------------------------------
   4 · HOVER
   Solo en dispositivos con puntero real.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  /* 4a · Elevación y resplandor en tarjetas
     Duración: 320 ms la transformación, 420 ms la sombra. Easing ease-in-out.

     Se eleva en lugar de escalar. Un `scale` sobre una tarjeta con texto lo
     vuelve borroso en muchas GPU y desalinea la rejilla respecto a sus
     hermanas; el desplazamiento vertical con resplandor comunica lo mismo y se
     mantiene nítido. El escalado sí se aplica a imágenes, más abajo. */
  .show-card,
  .release-card,
  .channel-panel,
  .media-placeholder,
  .video-placeholder {
    transition:
      transform var(--dur-hover) ease-in-out,
      border-color var(--dur-hover) ease-in-out,
      box-shadow var(--dur-glow) ease-in-out;
  }

  .show-card:hover,
  .release-card:hover,
  .channel-panel:hover,
  .media-placeholder:hover,
  .video-placeholder:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: var(--glow-accent);
  }

  /* 4b · Zoom en imágenes
     Duración: 380 ms. Easing ease-in-out. Escala 1 → 1.05.
     El recorte lo hace el contenedor, así que la imagen crece por dentro del
     marco y nada se desborda. Queda listo para el día que existan fotografías. */
  .media-placeholder,
  .video-placeholder,
  .show-card__media {
    overflow: hidden;
  }

  .media-placeholder img,
  .video-placeholder img,
  .show-card__media img {
    transition: transform 380ms ease-in-out;
  }

  .media-placeholder:hover img,
  .video-placeholder:hover img,
  .show-card__media:hover img {
    transform: scale(1.05);
  }

  /* 4c · Resplandor pulsante en botones
     Duración: 420 ms. Easing ease-in-out.
     Un halo dorado que se abre hacia fuera, sin animación en bucle: el pulso
     permanente distrae y delata plantilla. */
  .button {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      transform 180ms ease,
      box-shadow var(--dur-glow) ease-in-out;
  }

  .button:hover {
    box-shadow:
      0 0 0 5px rgba(212, 175, 55, 0.12),
      0 14px 32px -16px rgba(212, 175, 55, 0.7);
  }

  .button--outline:hover {
    box-shadow:
      0 0 0 5px rgba(212, 175, 55, 0.1),
      0 14px 32px -18px rgba(212, 175, 55, 0.55);
  }

  .to-top:hover,
  .share-button:hover {
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
  }

  /* 4d · Subrayado que se despliega
     Duración: 400 ms. Easing ease.
     Entra por la izquierda y, al salir el cursor, se retira por la derecha:
     el trazo sigue al puntero en lugar de desaparecer de golpe. */
  .text-link,
  .site-footer__nav a,
  .booking__channels a {
    position: relative;
    text-decoration: none;
  }

  .text-link::after,
  .site-footer__nav a::after,
  .booking__channels a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-underline) ease;
  }

  .text-link:hover::after,
  .text-link:focus-visible::after,
  .site-footer__nav a:hover::after,
  .site-footer__nav a:focus-visible::after,
  .booking__channels a:hover::after,
  .booking__channels a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* 4e · Cambio de color en texto
     Duración: 400 ms. Easing ease-in-out.
     El título de una tarjeta se tiñe de dorado cuando el cursor entra en la
     tarjeta entera, no solo sobre el propio texto: indica que el bloque
     completo es la zona activa. */
  .show-card__title,
  .release-card h3,
  .channel-panel h3,
  .text-link,
  .site-footer__nav a,
  .booking__channels a,
  .primary-nav a {
    transition: color 400ms ease-in-out;
  }

  .show-card:hover .show-card__title,
  .release-card:hover h3,
  .channel-panel:hover h3 {
    color: var(--color-accent);
  }

  /* 4f · Fecha de la tarjeta: un guiño mínimo al pasar por encima. */
  .show-card__day {
    transition: transform var(--dur-hover) var(--ease-out);
  }

  .show-card:hover .show-card__day {
    transform: translate3d(0, -2px, 0);
  }
}

/* --------------------------------------------------------------------------
   5 · MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema recibe la página completa, estática y sin ningún
   estado intermedio. `animation: none` es imprescindible: sin él, el
   `fill-mode: both` dejaría los elementos congelados en su fotograma inicial,
   es decir, invisibles.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .site-header__inner,
  .hero h1,
  .hero .eyebrow,
  .hero__visual,
  .hero__statement,
  .hero__intro,
  .hero__actions,
  .trust-strip,
  .hero__glow,
  .hero__stage-mark,
  .showreel::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .show-card:hover,
  .release-card:hover,
  .channel-panel:hover,
  .media-placeholder:hover,
  .video-placeholder:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Recorrido documentado — dentro de la rejilla de trayectoria, a todo el ancho
   ========================================================================== */

.trajectory__record {
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.trajectory__record h3 {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.trajectory__record > p {
  max-width: 64ch;
  margin: 0;
  color: var(--color-muted);
}

.record-list {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.record-list li {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 6px var(--space-lg);
  padding-block: 15px;
  border-top: 1px solid var(--color-line);
}

.record-list span {
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.record-list strong {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 500;
}

.trajectory__note {
  max-width: 70ch;
  margin: var(--space-lg) 0 0 !important;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.85;
}

/* ==========================================================================
   Formatos de evento
   Paneles rellenos, no la lista de filetes de la sección «El show»: son
   categorías entre las que elegir, no cualidades que leer en orden.
   ========================================================================== */

.formats {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.formats__inner {
  width: var(--container);
  margin-inline: auto;
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.format-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.format-card__index {
  margin: 0 0 var(--space-md);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.format-card h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.06;
  text-wrap: balance;
}

.format-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.formats__cta {
  margin: var(--space-xl) 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.formats__cta .text-link {
  margin-left: 10px;
}

/* ==========================================================================
   Cómo contratar
   ========================================================================== */

.process {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}

.process__inner {
  width: var(--container);
  margin-inline: auto;
}

.process h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.process h2 span {
  color: var(--color-accent);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.process-steps li {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-accent);
}

.process-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.94rem;
}

.process-steps h3 {
  margin: 0 0 8px;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
}

.process-steps p {
  max-width: 40ch;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Preguntas frecuentes
   <details> nativo: accesible por teclado, anunciado por lectores de pantalla
   y encontrable con la búsqueda del navegador, sin una línea de JavaScript.
   ========================================================================== */

.faq {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  background: var(--color-surface);
}

.faq__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(40px, 5vw, 86px) clamp(40px, 6vw, 92px);
  align-items: start;
}

.faq__header {
  grid-column: 1 / -1;
}

.faq h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.faq h2 span {
  color: var(--color-accent);
}

.faq-item {
  border-top: 1px solid var(--color-line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 20px;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-weight: 500;
  line-height: 1.25;
  /* Oculta el triángulo por defecto sin perder la semántica del elemento. */
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__chevron {
  flex: 0 0 auto;
  color: var(--color-accent);
  transition: transform 280ms var(--ease-out);
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item p {
  max-width: 62ch;
  margin: 0 0 22px;
  padding-right: 34px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

.faq__aside {
  position: sticky;
  top: 48px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 86% 8%, rgba(212, 175, 55, 0.14), transparent 34%),
    var(--color-bg);
}

.faq__aside p:not(.eyebrow) {
  margin: 0 0 var(--space-lg);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.faq__aside .button {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .format-card,
  .faq__aside {
    transition:
      transform var(--dur-hover) ease-in-out,
      border-color var(--dur-hover) ease-in-out,
      box-shadow var(--dur-glow) ease-in-out;
  }

  .format-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: var(--glow-accent);
  }

  .format-card h3 {
    transition: color 400ms ease-in-out;
  }

  .format-card:hover h3 {
    color: var(--color-accent);
  }

  .faq-item summary {
    transition: color var(--dur-hover) ease-in-out;
  }

  .faq-item summary:hover {
    color: var(--color-accent);
  }
}

@media (max-width: 960px) {
  .faq__inner {
    grid-template-columns: 1fr;
  }

  .faq__aside {
    position: static;
  }

  .process__header,
  .formats .section-heading {
    text-align: center;
  }

  .process__header + .process-steps,
  .formats__cta {
    text-align: center;
  }

  .process-steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .process-steps p {
    margin-inline: auto;
  }

  .format-card {
    align-items: center;
    text-align: center;
  }

  .record-list li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .trajectory__record,
  .trajectory__note {
    text-align: center;
  }

  .trajectory__record > p,
  .trajectory__note {
    margin-inline: auto;
  }

  .faq__header {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .formats,
  .process,
  .faq {
    padding-block: 78px;
  }

  .faq-item summary {
    /* El texto de la pregunta manda; el chevron nunca lo aplasta. */
    align-items: flex-start;
  }

  .faq-item p {
    padding-right: 0;
  }
}

/* Art direction: existing theme, progressively enhanced. */
:root{--ease-luxury:cubic-bezier(.22,1,.36,1);--motion-fast:220ms;--motion-base:520ms;--motion-slow:780ms}
[hidden]{display:none!important}
p{max-width:70ch}
figure{margin:0}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--color-accent);outline-offset:5px}
:where(button,.button,.share-button,.primary-nav a){min-height:44px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(14,11,11,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,175,55,.18)}
.site-header__inner{animation:none;min-height:80px;transition:min-height var(--motion-fast)}
.is-scrolled .site-header__inner{min-height:64px}
.primary-nav a::after{transition:transform 240ms var(--ease-luxury)}
.primary-nav a[aria-current="location"]::after{transform:scaleX(1)}
.menu-toggle{background:transparent;border:1px solid var(--color-line);color:var(--color-ink);font:inherit;padding:8px 14px}
.hero__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:36px;padding-top:44px;padding-bottom:44px}
.hero__visual{min-height:0;height:auto;aspect-ratio:3/2;overflow:visible;background:none;border:0;animation:none;transform:none}
.hero__visual picture{display:block;overflow:hidden;width:100%;height:100%}
.hero__visual img{width:100%;height:100%;object-fit:cover}
.hero__visual::before{display:none}
.hero__visual::after{inset:0;background:linear-gradient(90deg,rgba(14,11,11,.20),transparent 45%),linear-gradient(0deg,rgba(14,11,11,.28),transparent 55%);pointer-events:none}
.hero__visual figcaption{position:static;padding-top:10px;color:var(--color-muted);font-size:11px;line-height:1.5}
.hero h1{font-size:clamp(3rem,6.2vw,6.3rem);line-height:1.08}
.hero__copy::after{content:"";display:block;width:min(260px,75%);height:18px;margin-top:24px;background:var(--color-accent);opacity:.45;clip-path:polygon(0 47%,28% 47%,32% 25%,37% 70%,43% 8%,49% 88%,55% 30%,60% 47%,100% 47%,100% 53%,60% 53%,55% 40%,49% 100%,43% 20%,37% 82%,32% 37%,28% 53%,0 53%)}
.hero__glow{animation:none!important;opacity:.10}
@keyframes cinematic-fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__copy>*{animation:cinematic-fade 900ms var(--ease-luxury) both}
.hero__copy>:nth-child(2){animation-delay:100ms}.hero__copy>:nth-child(3){animation-delay:200ms}.hero__copy>:nth-child(4){animation-delay:300ms}.hero__copy>:nth-child(5){animation-delay:400ms}
.editorial-photo{min-width:0;overflow:hidden}.editorial-photo picture{display:block;overflow:hidden}.editorial-photo img{width:100%;height:auto;object-fit:contain}.editorial-photo figcaption{font-size:12px;color:var(--color-muted);padding:12px 0}
.experience-item{transition:transform 260ms var(--ease-luxury),border-color 260ms,box-shadow 260ms}
.experience-item svg{width:26px;height:26px;color:var(--color-accent);flex-shrink:0}
.timeline{position:relative;padding-left:28px}.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--color-line)}
.timeline li{position:relative}.timeline li::before{content:"";position:absolute;left:-28px;top:0;bottom:0;width:2px;background:var(--color-accent);transform:scaleY(0);transform-origin:top;transition:transform 900ms var(--ease-luxury)}
.timeline li.is-visible::before{transform:scaleY(1)}
.release-cover{display:block;margin-bottom:24px;overflow:hidden;aspect-ratio:16/9}.release-cover img{width:100%;height:100%;object-fit:cover}
.scene{padding:104px 0;background:radial-gradient(ellipse at 80% 5%,rgba(212,175,55,.08),transparent 45%),var(--color-bg)}
.scene__inner{width:var(--container);margin:auto}.scene-gallery{columns:3;column-gap:20px;margin-top:44px}.scene-photo{break-inside:avoid;margin:0 0 20px;overflow:hidden}.scene-photo a{display:block;overflow:hidden}.scene-photo img{width:100%;height:auto}.scene-photo picture{display:block}
.media-credit{font-size:12px;color:var(--color-muted);margin:24px 0 64px}.media-credit a{text-underline-offset:4px}
.scene-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.scene__video-title{font:500 clamp(2rem,4vw,3rem)/1.1 var(--font-heading);margin:0 0 28px}
.video-facade{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}.video-facade picture,.video-facade img{display:block;width:100%;height:100%;object-fit:cover}.video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,11,11,.5),transparent)}
.video-card h4{font:500 28px/1.2 var(--font-heading);margin:20px 0 8px}.video-card p{font-size:13px;color:var(--color-muted)}
.play-mark{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--color-accent);background:rgba(14,11,11,.88);color:var(--color-ink);font:32px/1 Arial;z-index:1}
@keyframes play-halo{50%{box-shadow:0 0 0 8px rgba(212,175,55,.06)}}
.in-viewport .play-mark{animation:play-halo 2.6s ease-in-out infinite}
.media-dialog{width:min(1100px,calc(100vw - 24px));max-height:94dvh;padding:20px;background:var(--color-bg);color:var(--color-ink);border:1px solid var(--color-line)}
.media-dialog::backdrop{background:rgba(14,11,11,.94)}.media-dialog__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.media-dialog__bar h2{font:500 22px/1.3 var(--font-heading);margin:0}.media-dialog button{font:inherit;color:var(--color-ink);background:transparent;border:1px solid var(--color-line);padding:10px 16px;flex-shrink:0}
.media-dialog__content img{max-height:72dvh;width:auto;max-width:100%;height:auto;margin:auto}.media-dialog__content iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.dialog-open{overflow:hidden}
.director__signature{border-left:1px solid var(--color-accent);padding:40px;font:500 clamp(3rem,6vw,5.5rem)/1.05 var(--font-heading);align-self:center}.director__signature span{display:block;color:var(--color-accent)}.director__signature small{display:block;font:400 14px/1.6 var(--font-body);margin-top:24px;color:var(--color-muted)}
.show-card--next{background:linear-gradient(115deg,rgba(212,175,55,.10),transparent 60%),var(--color-surface);border:1px solid var(--color-accent);padding:36px}.show-card--next .show-card__day{font-size:clamp(4rem,9vw,7rem)}
.documented-shows__subtitle{margin-top:64px}.show-card:not(.show-card--next){background:transparent;border-color:var(--color-line)}
.availability-stage{background:var(--color-ink);color:var(--color-bg)}.availability-stage p,.availability-stage .eyebrow,.availability-stage__phone span{color:var(--color-bg)}.availability-stage .button{background:var(--color-bg);color:var(--color-ink);border-color:var(--color-bg)}
.site-footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}.site-footer__nav a{padding:8px 0}.site-footer__legal{max-width:none}
/* Existing CSS hidden states are disabled. Animate on intersection, never conceal waiting content. */
.reveal-ready [data-reveal],.reveal-ready [data-reveal].is-visible{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
@keyframes heading-clip-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes image-curtain-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes stagger-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-motion="heading"].is-visible{animation:heading-clip-reveal 720ms var(--ease-luxury)}
[data-motion="paragraph"].is-visible{animation:fade-up 620ms var(--ease-luxury)}
[data-motion="image"].is-visible{animation:image-curtain-reveal 820ms var(--ease-luxury)}
[data-motion="card"].is-visible{animation:stagger-reveal 620ms var(--ease-luxury);animation-delay:var(--stagger,0ms);animation-fill-mode:backwards}
.button{position:relative;overflow:hidden;transition:transform var(--motion-fast),background var(--motion-fast)}.button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(247,244,238,.23) 50%,transparent 80%);transform:translateX(-110%);transition:transform var(--motion-fast);pointer-events:none}.button:hover::after{transform:translateX(110%)}.button .button-arrow{display:inline-block;transition:transform var(--motion-fast)}.button:hover .button-arrow{transform:translateX(4px)}
@media(hover:hover){.experience-item:hover,.release-card:hover,.video-card:hover{transform:translateY(-4px);border-color:var(--color-accent);box-shadow:0 10px 25px rgba(212,175,55,.045)}.scene-photo img,.editorial-photo img,.release-cover img{transition:transform 480ms var(--ease-luxury)}.scene-photo a:hover img,.editorial-photo:hover img,.release-cover:hover img{transform:scale(1.025)}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:45;opacity:.025;background-image:repeating-conic-gradient(var(--color-ink) 0% 25%,transparent 0% 50%);background-size:3px 3px}
@media(max-width:1023px){.scene-gallery{columns:2}.site-header__territory{display:none}.site-header__inner{flex-wrap:wrap;gap:12px}.has-js .menu-toggle{display:block}.has-js .primary-nav{display:none;width:100%;order:5}.has-js .primary-nav.is-open{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px 24px}.hero__inner{grid-template-columns:1fr}.hero__visual{width:100%;max-width:800px;justify-self:center}.hero h1{font-size:clamp(3rem,9vw,5.5rem)}.hero__intro{max-width:60ch}}
@media(max-width:767px){.scene{padding:64px 0}.hero__inner{padding-top:28px;gap:24px}.hero__visual{aspect-ratio:3/2}.hero__visual figcaption{font-size:10px}.scene-videos{grid-template-columns:1fr}.scene-gallery{column-gap:12px}.scene-photo{margin-bottom:12px}.agenda-filters__group{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:8px 4px 14px;scroll-padding:4px}.agenda-filters__group>*{flex-shrink:0}.show-card--next{padding:24px}.site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}.director__signature{padding:24px}.primary-nav{overflow:visible}.site-header__cta{margin-left:auto}.media-dialog{padding:12px}}
@media(max-width:479px){.scene-gallery{columns:1}.site-header__cta{display:none}.menu-toggle{margin-left:auto}.hero h1{font-size:3.1rem}.hero__intro{font-size:15px}.hero__actions{align-items:flex-start}.hero__visual figcaption{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.hero__copy>*,[data-reveal],[data-motion]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}.timeline li::before{transform:none}.play-mark{transform:translate(-50%,-50%)!important}.experience-item:hover,.release-card:hover,.video-card:hover,.scene-photo a:hover img,.editorial-photo:hover img,.release-cover:hover img,.button:hover{transform:none!important}}
@media print{*{animation:none!important}body::after,.site-header,.mobile-booking,.to-top{display:none!important}[data-motion]{opacity:1!important;transform:none!important;clip-path:none!important}}

/* Corrections verified against the published DOM. */
/* Final mobile composition */
.trust-strip{position:relative;inset:auto;margin-top:24px;animation:none}.hero__visual::after{border:0;transform:none;box-shadow:none}.hero__inner{padding-bottom:36px}.hero__visual figcaption{position:relative;z-index:2}
@media(max-width:767px){.hero__copy{text-align:left}.hero h1{margin:16px 0 20px}.hero__statement{margin:0 0 12px;line-height:1.25}.hero__intro{margin:0 0 20px;line-height:1.6}.hero__actions{margin-top:0}.hero__inner{padding-bottom:28px}.trust-strip{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:0}.trust-strip>div{display:block;min-width:0;min-height:66px;padding:10px 8px;text-align:center;border-right:1px solid var(--color-line)}.trust-strip span,.trust-strip strong{display:block;font-size:10px}.trust-strip strong{font-size:13px}.hero__visual{margin-bottom:20px}}

.menu-toggle{display:none}.site-header__inner{display:flex;justify-content:space-between;gap:20px}.primary-nav{margin-left:auto;gap:20px}.site-header__cta{flex-shrink:0}.site-header__territory{display:none}
.hero{min-height:0}.hero__inner{min-height:min(720px,calc(100svh - 160px))}.hero__visual{align-self:center;border-radius:0}.hero__visual::after{border-radius:0}.hero__copy{padding:0}.hero::after{display:none}
@media(max-width:1023px){.site-header__inner{flex-wrap:wrap}.has-js .menu-toggle{display:block}.primary-nav{margin-left:0}.hero__inner{min-height:0}.hero__visual{grid-row:auto}.hero__copy{max-width:100%}.hero h1{margin-top:16px}}
@media(max-width:479px){.hero__inner{padding-block:24px 40px}.hero__statement{font-size:1.3rem}.hero__actions{gap:14px}.hero__intro{margin-block:12px 20px}.hero__copy::after{display:none}.hero h1{font-size:2.65rem}.hero__visual{margin-top:0}.hero__copy{padding:0}}

/* Editorial refinement · 8 September 2026 */
main h2,main h3{text-wrap:balance}main p{overflow-wrap:break-word}
.section-heading{max-width:850px;margin-inline:auto;text-align:center}
.section-heading>p:last-child{max-width:68ch;margin-inline:auto}
.experience__header h2,.process__header h2,.faq__header h2{max-width:22ch}
.music-grid{align-items:stretch}.release-card{display:flex;flex-direction:column;min-width:0}
.release-card__actions{margin-top:auto;padding-top:20px}.release-card h3{margin-top:12px}
.release-card>p:not(.release-card__type){max-width:60ch}
.music-play{width:100%;display:block;position:relative;padding:0;border:0;border-radius:2px;overflow:hidden;background:#100d0c;cursor:pointer;color:#fff;aspect-ratio:16/9}
.music-play .release-cover{margin:0;width:100%;height:100%;aspect-ratio:16/9}
.music-play img{display:block;width:100%;height:100%;object-fit:cover}
.music-play::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.music-play .play-mark{z-index:2}.music-play__label{position:absolute;z-index:2;bottom:14px;left:0;right:0;font:600 12px/1.4 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.music-play:focus-visible,.festival-pause:focus-visible,.festival-logo:focus-visible{outline:3px solid var(--color-accent);outline-offset:5px}
.format-card,.experience-item,.process-steps>li{height:100%;min-width:0;transition:transform 260ms var(--ease-luxury),border-color 260ms,box-shadow 260ms}
.format-card p,.process-steps p{max-width:60ch}.format-grid,.process-steps{align-items:stretch}
.record-list li{gap:16px}.record-list strong{max-width:65ch}
.booking-form__row>*{min-width:0}.booking__intro p{max-width:58ch}
.festival-band{padding:40px 0;border-block:1px solid rgba(212,175,55,.16);background:#151210}
.festival-band__inner{width:var(--container);margin:auto;text-align:center}
.festival-band h2{font:500 clamp(1.6rem,3vw,2.5rem)/1.2 var(--font-heading);margin:12px 0 24px}
.festival-window{overflow:hidden}.festival-track{display:flex;width:max-content}
.festival-group{display:flex;align-items:center;justify-content:space-around;width:clamp(720px,90vw,1140px);gap:40px;padding:12px 40px;flex-shrink:0}
.festival-logo{display:flex;align-items:center;justify-content:center;flex:0 0 200px;min-height:100px;border-radius:4px;padding:12px}
.festival-logo img{display:block;width:100%;height:74px;object-fit:contain}
.festival-logo--fonnefeesten img{height:88px}.festival-logo--gentse-feesten{background:#f3efe3}
.festival-group[aria-hidden]{display:none}.has-js .festival-group[aria-hidden]{display:flex}
.has-js .festival-track{animation:festival-drift 28s linear infinite;animation-play-state:paused}
.has-js .festival-band.in-viewport:not(.is-paused) .festival-track{animation-play-state:running}
.has-js .festival-band:hover .festival-track,.has-js .festival-band:focus-within .festival-track{animation-play-state:paused}
.festival-band__bottom{display:flex;gap:20px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.festival-pause{background:transparent;border:1px solid rgba(212,175,55,.4);color:var(--color-ink);font:500 11px var(--font-body);padding:10px 16px;min-height:44px;cursor:pointer}
.festival-band__note{max-width:78ch;margin:20px auto 0;color:var(--color-muted);font-size:12px;line-height:1.7}
@keyframes festival-drift{to{transform:translateX(-50%)}}
@media(min-width:1024px){.manifesto__copy>p:not(.eyebrow),.director__copy>p:not(.eyebrow){text-align:justify;hyphens:auto;text-align-last:left}}
@media(hover:hover){.format-card:hover,.process-steps>li:hover{transform:translateY(-4px);border-color:var(--color-accent);box-shadow:0 12px 24px rgba(212,175,55,.06)}}
@media(max-width:767px){.section-heading{text-align:center}.experience__header,.process__header,.faq__header{text-align:center;margin-inline:auto}.experience__header h2,.process__header h2,.faq__header h2{margin-inline:auto}.manifesto__copy>p,.director__copy>p,.booking__intro>p{text-align:left}.festival-band{padding:30px 0}.festival-group{width:660px;gap:20px;padding-inline:20px}.festival-logo{flex-basis:185px}.release-card__actions .button{width:100%;text-align:center}.scene__inner,.music__inner{min-width:0}}
@media(prefers-reduced-motion:reduce){.has-js .festival-track{animation:none;transform:none;width:100%}.has-js .festival-group[aria-hidden]{display:none}.festival-group{width:100%;flex-wrap:wrap}.festival-pause{display:none}.format-card:hover,.process-steps>li:hover{transform:none}}
html:not(.has-js) .festival-track{width:100%}html:not(.has-js) .festival-group{width:100%;flex-wrap:wrap}
.release-card__type{margin:18px 0 6px;padding-bottom:0}.music-play{flex-shrink:0}.release-card__actions{width:100%}

/* Mobile title centering and Summer Latino poster · 8 September 2026 */
@media(max-width:1023px){.hero h1{width:100%;max-width:none;margin-inline:auto;text-align:center}.hero h1 span,.hero h1 em{text-align:center;transform:none}}
.show-card--poster{grid-column:1/-1}.show-card--poster .show-card__head{width:100%;align-items:center}.show-card--poster .show-card__date{padding-bottom:0}
.show-card__layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);width:100%;align-items:center;margin-top:24px}
.event-poster{width:100%;max-width:440px;margin:0;justify-self:center}.event-poster a,.event-poster picture{display:block}.event-poster a{border:1px solid rgba(212,175,55,.25);overflow:hidden;border-radius:3px}.event-poster img{display:block;width:100%;height:auto;object-fit:contain}.event-poster figcaption{margin-top:12px;color:var(--color-muted);text-align:center;font-size:12px;line-height:1.6}
.show-card__details{min-width:0;width:100%}.show-card__details .show-card__title{margin:0 0 24px}.show-card__details .show-card__summary{margin:20px 0;color:var(--color-muted);line-height:1.7;max-width:60ch}.show-card__details .show-card__place{line-height:1.8}.show-card__details .show-card__actions{margin-top:24px}
@media(max-width:767px){.show-card__layout{grid-template-columns:1fr;gap:28px}.show-card--poster{padding:22px}.show-card--poster .show-card__head{gap:12px}.show-card--poster .show-card__status{font-size:9px;letter-spacing:.1em;padding:8px 10px}.show-card__details .show-card__title{text-align:center;font-size:clamp(1.8rem,7vw,2.6rem)}.show-card__details .show-card__place{text-align:center}.show-card__details .show-card__actions{justify-content:center}.event-poster{max-width:420px}}

/* Consistent mobile section alignment · 8 September 2026 */
/* Ampliado de 767 a 960 px el 8 de septiembre de 2026: un movil en horizontal mide
   entre 844 y 956 px de ancho. Ahí el diseño ya es de una sola columna, pero estas
   reglas no llegaban y los antetítulos («La orquesta», «Orquesta de salsa latina»)
   se descentraban respecto al titular. 960 px es el mismo punto en el que las
   rejillas de dos columnas se convierten en una, así que la alineación y la
   maquetación cambian a la vez. */
@media(max-width:960px){
 .hero__copy{padding-left:0}
 main section .eyebrow,.hero__copy>.eyebrow,.manifesto__copy>.eyebrow,.director__copy>.eyebrow,.booking__intro>.eyebrow{
  display:block;width:100%;max-width:none;text-align:center;margin-inline:auto;text-wrap:balance;line-height:1.6;
 }
 main section h2{ text-align:center;margin-inline:auto;text-wrap:balance; }
 .hero__statement{max-width:32ch;text-align:center;margin-inline:auto;text-wrap:balance}
 .hero__actions{justify-content:center;align-items:center;text-align:center}
 .hero__actions>.text-link{align-self:center;margin-inline:auto}
 .hero__intro,.manifesto__copy>p:not(.eyebrow),.director__copy>p:not(.eyebrow),.booking__intro>p:not(.eyebrow),.show-card__summary{
  max-width:65ch;margin-inline:auto;text-align:justify;text-align-last:left;hyphens:auto;line-height:1.7;
 }
 .hero__visual figcaption,.editorial-photo figcaption{text-align:center}
 .availability-stage__territory,.availability-stage__phone{text-align:center}
 .availability-stage__content{text-align:center}
 .formats__cta{text-align:center}
}
@media(max-width:359px){
 .hero__intro,.manifesto__copy>p:not(.eyebrow),.director__copy>p:not(.eyebrow),.booking__intro>p:not(.eyebrow),.show-card__summary{text-align:left}
}

@media(min-width:1100px){.music-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.music-grid .release-card{padding:24px}.music-grid .release-card h3{font-size:2rem}}
@media(min-width:768px) and (max-width:1099px){.music-grid .release-card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 12px);justify-self:center}}

/* Official supplied director portrait · 8 September 2026 */
.director__inner{align-items:center}.director__portrait{width:100%;max-width:480px;margin:0;justify-self:center;overflow:hidden;border:1px solid rgba(212,175,55,.16);border-radius:4px;background:#100d0b}.director__portrait picture,.director__portrait img{display:block;width:100%;height:auto}.director__portrait img{object-fit:contain}.director__copy{min-width:0;align-self:center}.director__copy>p:not(.eyebrow){max-width:60ch}
@media(max-width:767px){.director__inner{grid-template-columns:1fr;gap:32px}.director__portrait{max-width:420px}.director__copy{width:100%;max-width:65ch;margin-inline:auto}.director__copy .eyebrow,.director__copy h2{text-align:center}}

/* ==========================================================================
   Logotipo oficial
   Sustituye a la marca tipografica que habia en cabecera y pie. El H1 del
   hero sigue siendo texto real: un titulo en imagen se pierde para el SEO.
   ========================================================================== */

.wordmark {
  display: inline-flex;
  align-items: center;
  width: max-content;
  line-height: 0;
  text-decoration: none;
}

.wordmark img {
  width: 196px;
  height: auto;
  display: block;
}

/* El isotipo dorado ya tiene brillo propio: en hover basta una elevacion
   minima, no un filtro que lo sature. */
@media (hover: hover) and (pointer: fine) {
  .wordmark img {
    transition: transform var(--dur-hover) var(--ease-out);
  }

  .wordmark:hover img {
    transform: translate3d(0, -2px, 0);
  }
}

.site-footer__brand {
  display: block;
  margin-bottom: 10px !important;
  line-height: 0;
}

.site-footer__brand img {
  width: 168px;
  height: auto;
  display: block;
}

@media (max-width: 960px) {
  .wordmark img {
    width: 172px;
  }
}

@media (max-width: 640px) {
  .wordmark img {
    width: 158px;
  }

  /* Centrado con el resto del pie en movil. */
  .site-footer__brand img {
    width: 150px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Vídeos oficiales
   Miniatura local + botón. El iframe entra solo al pulsar, así que la sección
   no cuesta ninguna petición a YouTube mientras nadie pide ver nada.
   ========================================================================== */

.videos {
  scroll-margin-top: 24px;
  padding-block: var(--space-xxl);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.videos__inner {
  width: var(--container);
  margin-inline: auto;
}

.video-featured {
  margin-top: var(--space-xl);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.video-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.video-card--featured {
  background:
    radial-gradient(circle at 88% 6%, rgba(212, 175, 55, 0.16), transparent 34%),
    var(--color-surface-alt);
}

/* El botón ES la miniatura: un solo objetivo táctil, grande y evidente. */
.video-card__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-card__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card__icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, 0.7);
  border-radius: 50%;
  background: rgba(14, 11, 11, 0.62);
  backdrop-filter: blur(6px);
  color: var(--color-accent);
  transform: translate(-50%, -50%);
  /* El triángulo óptico va ligeramente a la derecha del centro geométrico. */
  padding-left: 4px;
}

.video-card__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 999px;
  background: rgba(14, 11, 11, 0.78);
  color: var(--color-accent);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 30px);
}

.video-card__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.video-card h3,
.video-card h4 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.video-card--featured h3 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}

.video-card__body p:last-child {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Estado reproduciendo: el iframe ocupa el mismo hueco que la miniatura, así
   que no hay salto de maquetación al pulsar. */
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--color-line);
  background: #000;
}

.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.videos__cta {
  margin: var(--space-xl) 0 0;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .video-card {
    transition:
      transform var(--dur-hover) ease-in-out,
      border-color var(--dur-hover) ease-in-out,
      box-shadow var(--dur-glow) ease-in-out;
  }

  .video-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: var(--glow-accent);
  }

  .video-card__play img,
  .video-card__icon {
    transition: transform 380ms ease-in-out, background-color 260ms ease-in-out,
      color 260ms ease-in-out;
  }

  .video-card__play:hover img {
    transform: scale(1.05);
  }

  .video-card__play:hover .video-card__icon,
  .video-card__play:focus-visible .video-card__icon {
    background: var(--color-accent);
    color: var(--color-bg);
  }
}

@media (max-width: 640px) {
  .videos {
    padding-block: 78px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-card__icon {
    width: 54px;
    height: 54px;
  }

  /* Ficha de vídeo alineada a la izquierda: título y descripción se leen mejor
     en bandera que centrados. */
  .video-card__body {
    text-align: left;
  }
}

/* Tira de festivales: escala mas contenida · 8 septiembre 2026 */
.festival-logo {
  flex: 0 0 152px;
  min-height: 68px;
  padding: 8px;
}

.festival-logo img {
  height: 44px;
}

/* Equilibrio optico por proporcion de cada marca, no por altura igual. */
.festival-logo--fonnefeesten img {
  height: 52px;
}

.festival-logo--antilliaanse-feesten {
  flex-basis: 196px;
}

.festival-logo--gentse-feesten img {
  height: 42px;
}

.festival-group {
  width: clamp(640px, 82vw, 980px);
  gap: 32px;
  padding: 10px 32px;
}

@media (max-width: 767px) {
  .festival-group {
    width: 580px;
    gap: 16px;
    padding-inline: 16px;
  }

  .festival-logo {
    flex-basis: 138px;
    min-height: 60px;
  }

  .festival-logo img {
    height: 38px;
  }

  .festival-logo--fonnefeesten img {
    height: 46px;
  }

  .festival-logo--antilliaanse-feesten {
    flex-basis: 172px;
  }

  .festival-logo--gentse-feesten img {
    height: 36px;
  }
}

/* ==========================================================================
   Destello del logotipo
   Un barrido de luz recortado con la silueta del logotipo mediante mask-image:
   la luz solo recorre las letras doradas, nunca el rectangulo de la imagen.
   Sin JS y sin particulas: un unico pseudo-elemento de 196x67 px, animado por
   composicion. Se apaga por completo con prefers-reduced-motion.
   ========================================================================== */
.wordmark {
  position: relative;
}

@supports ((-webkit-mask-image: url("#l")) or (mask-image: url("#l"))) {
  .wordmark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 250, 236, 0.82) 50%,
      rgba(255, 255, 255, 0) 60%
    );
    background-repeat: no-repeat;
    background-size: 260% 100%;
    background-position: 165% 0;
    -webkit-mask-image: url("../images/brand/la-xclusiva-salsa-logotipo-oficial-440.png");
            mask-image: url("../images/brand/la-xclusiva-salsa-logotipo-oficial-440.png");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: lx-logo-sheen 6.5s cubic-bezier(0.36, 0, 0.2, 1) 1.8s infinite;
  }
}

@keyframes lx-logo-sheen {
  0% {
    background-position: 165% 0;
  }

  21% {
    background-position: -65% 0;
  }

  100% {
    background-position: -65% 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .wordmark img {
    transition: transform var(--dur-hover) var(--ease-out), filter var(--dur-hover) var(--ease-out);
  }

  .wordmark:hover img {
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark::after {
    animation: none;
  }
}

/* ==========================================================================
   Cabecera: franja superior y menu movil
   ========================================================================== */

/* En iOS el documento se pinta por debajo de la barra de estado, mientras que
   la cabecera pegajosa se coloca justo debajo de ella. El resultado es una
   franja de unos 60 px en la que se ve el texto de la seccion que se esta
   leyendo, por encima del logotipo. Este pseudo-elemento viaja pegado a la
   cabecera y tapa esa franja con el mismo fondo. En un navegador sin esa
   franja queda siempre fuera de la ventana, asi que no se ve. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: var(--color-bg);
  pointer-events: none;
}

/* El fondo era translucido al 88 %: con la pagina en movimiento por detras se
   llegaban a leer los titulares. Al 97 % conserva la profundidad del cristal
   —el desenfoque sigue activo— sin que nada se lea a traves. */
.site-header {
  background: rgba(14, 11, 11, 0.97);
}

@media (max-width: 1023px) {
  /* El menu abierto era una fila de enlaces que se envolvia en dos o tres
     lineas dentro de la cabecera. Ahora es un panel vertical: un enlace por
     linea, area tactil comoda y separadores finos. */
  .has-js .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    order: 5;
    margin-top: 6px;
    padding-bottom: 8px;
    border-top: 1px solid var(--color-line);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .has-js .primary-nav.is-open a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    font-size: 0.95rem;
  }

  .has-js .primary-nav.is-open a:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Destino de los enlaces del menu
   La cabecera pegajosa mide 80 px, 64 cuando la pagina ya esta desplazada. Con
   `scroll-margin-top: 24px` el titulo de la seccion aterrizaba justo debajo de
   ella: se pulsaba "Formatos" y el encabezado quedaba tapado.
   -------------------------------------------------------------------------- */
main section[id] {
  scroll-margin-top: 96px;
}

@media (max-width: 767px) {
  main section[id] {
    scroll-margin-top: 84px;
  }
}

/* En el panel vertical, el subrayado deslizante caia a 5 px del separador y se
   leia como una linea doble. El enlace de la seccion en pantalla se marca en
   dorado, que es mas claro en una lista. */
@media (max-width: 1023px) {
  .has-js .primary-nav.is-open a::after {
    display: none;
  }

  .has-js .primary-nav.is-open a[aria-current="location"] {
    color: var(--color-accent);
  }
}

/* ==========================================================================
   FASE FINAL · 11 de septiembre de 2026
   1. Titular editorial del hero
   2. Normalizacion del sistema de movimiento
   ========================================================================== */

/* --- 1 · Titular del hero -------------------------------------------------
   El H1 deja de ser el logotipo tipografico gigante y pasa a ser una linea
   editorial con la palabra clave. El logotipo ya vive en la cabecera y en el
   video, asi que repetirlo a pantalla completa era redundante. Las reglas
   antiguas de `.hero h1` siguen en la hoja para otras plantillas; estas ganan
   por especificidad, no por orden. */
.hero h1.hero-title {
  max-width: 18ch;
  font-size: clamp(1.9rem, 4vw, 3.05rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero h1.hero-title .hero-title__brand,
.hero h1.hero-title .hero-title__claim {
  display: block;
  font-size: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  transform: none;
}

.hero h1.hero-title .hero-title__claim {
  margin-top: 0.22em;
  color: var(--color-accent);
  font-size: 0.6em;
  line-height: 1.2;
  letter-spacing: 0;
}

/* El H1 es contenido del primer viewport: se pinta ya, sin fundido de entrada,
   para no retrasar el LCP con opacidad cero. */
.hero__copy > h1 {
  animation: none;
  opacity: 1;
}

@media (max-width: 960px) {
  .hero h1.hero-title {
    max-width: 22ch;
    margin-inline: auto;
    text-align: center;
  }
}

/* --- 2 · Sistema de movimiento -------------------------------------------
   Duraciones y distancias unificadas. Sin desenfoque en los textos: el blur
   restaba nitidez a la tipografia durante medio segundo en cada parrafo. */
:root {
  --motion-base: 560ms;
  --motion-slow: 800ms;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes label-in {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

[data-motion="label"].is-visible {
  animation: label-in 420ms var(--ease-luxury);
}

[data-motion="heading"].is-visible {
  animation: heading-clip-reveal 650ms var(--ease-luxury);
}

[data-motion="paragraph"].is-visible {
  animation: fade-up 500ms var(--ease-luxury);
}

[data-motion="image"].is-visible {
  animation: image-curtain-reveal 750ms var(--ease-luxury);
}

[data-motion="card"].is-visible {
  animation: stagger-reveal var(--motion-base) var(--ease-luxury);
  animation-delay: var(--stagger, 0ms);
  animation-fill-mode: backwards;
}

@media (hover: hover) and (pointer: fine) {
  .experience-item:hover,
  .release-card:hover,
  .video-card:hover,
  .format-card:hover,
  .process-steps > li:hover {
    transform: translate3d(0, -3px, 0);
    transition: transform 240ms var(--ease-luxury), border-color 240ms var(--ease-luxury), box-shadow 240ms var(--ease-luxury);
  }

  .scene-photo a:hover img,
  .editorial-photo:hover img,
  .release-cover:hover img {
    transform: scale(1.025);
  }

  .scene-photo img,
  .editorial-photo img,
  .release-cover img {
    transition: transform 400ms var(--ease-luxury);
  }

  .button:hover .button-arrow {
    transform: translate3d(3px, -3px, 0);
  }

  .button-arrow {
    display: inline-block;
    transition: transform 220ms var(--ease-luxury);
  }
}

/* ==========================================================================
   HERO AUDIOVISUAL · 11 de septiembre de 2026
   Escenario de video arriba, banda de contenido debajo, unidos por un
   degradado. Proporcion nativa del master (3838x1624) y object-fit: contain,
   asi que el logotipo integrado nunca se recorta en ningun fotograma. Sin
   alturas rigidas de 100vh: la altura sale del ancho y de la proporcion.
   ========================================================================== */
.hero {
  min-height: 0;
  overflow: visible;
  background: var(--color-bg);
}

.hero::after {
  display: none;
}

.hero-stage {
  position: relative;
  width: 100%;
  padding-bottom: clamp(10px, 2vw, 18px);
  background: #000;
}

/* En pantallas ultrapanoramicas el video deja de crecer: a 2,36:1 un ancho
   sin limite lo convertiria en una franja desproporcionada. */
.hero-stage__frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  aspect-ratio: 3838 / 1624;
  background: #000;
}

.hero-stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Union entre el escenario y la banda de texto. */
.hero-stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(36px, 6vw, 84px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg));
  pointer-events: none;
}

.hero-stage__start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(14, 11, 11, 0.82);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.hero-stage__start-icon {
  display: inline-flex;
  color: var(--color-accent);
}

.hero-stage__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px 0;
}

.hero-ctl {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-luxury), border-color var(--motion-fast) var(--ease-luxury);
}

.hero-ctl:hover,
.hero-ctl:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-accent);
}

/* Banda de contenido: una sola columna, ya no hay fotografia al lado. */
.hero__inner {
  display: block;
  width: var(--container);
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(26px, 4.5vw, 52px) clamp(16px, 3vw, 34px);
}

.hero__copy {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-left: 0;
  text-align: center;
}

.hero h1.hero-title {
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}

.hero__statement,
.hero__intro {
  margin-inline: auto;
}

.hero__actions {
  justify-content: center;
  align-items: center;
}

.hero__copy::after {
  margin-inline: auto;
}

@media (max-width: 640px) {
  .hero-stage__controls {
    gap: 8px;
    padding-top: 12px;
  }

  .hero-ctl {
    padding: 10px 14px;
    font-size: 0.62rem;
  }
}

/* ==========================================================================
   HERO · TITULAR CON BRILLO
   El logotipo ya lo canta el video: el H1 deja de repetir la marca y se queda
   con la frase que busca la gente. Oro con barrido de luz sobre el texto
   (background-clip), no un filtro sobre toda la caja, para que el resto del
   hero siga plano y legible.
   ========================================================================== */
.hero h1.hero-title {
  max-width: 24ch;
  font-size: clamp(1.62rem, 5.2vw, 3rem);
  line-height: 1.14;
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.16));
}

.hero h1.hero-title .hero-title__claim {
  margin-top: 0;
  font-size: 1em;
  color: var(--color-accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1.hero-title .hero-title__claim {
    background-image: linear-gradient(
      100deg,
      #a8842a 0%,
      #d4af37 34%,
      #fff4d2 48%,
      #d4af37 62%,
      #a8842a 100%
    );
    background-repeat: no-repeat;
    background-size: 280% 100%;
    background-position: 140% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: lx-text-sheen 7.5s cubic-bezier(0.4, 0, 0.25, 1) 1.4s infinite;
  }
}

@keyframes lx-text-sheen {
  0% {
    background-position: 140% 0;
  }

  22% {
    background-position: -40% 0;
  }

  100% {
    background-position: -40% 0;
  }
}

/* La frase de marca gana cuerpo y un halo muy leve, sin perder nitidez. */
.hero__statement {
  color: var(--color-ink);
  text-shadow: 0 0 28px rgba(247, 244, 238, 0.14);
}

.hero__intro {
  color: var(--color-muted);
}

/* Filete dorado entre el titular y la frase: da jerarquia sin mas texto. */
.hero h1.hero-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: clamp(14px, 2.4vw, 22px) auto 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0), var(--color-accent), rgba(212, 175, 55, 0));
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.hero-title .hero-title__claim {
    animation: none;
    background-position: 50% 0;
  }
}

/* ==========================================================================
   DETALLES CON VIDA · 11 de septiembre de 2026
   ========================================================================== */

/* 1 · Refuerzo de la franja superior de la cabecera. El pseudo-elemento ya
   tapaba esa banda, pero una sombra solida no la puede recortar ningun
   overflow ni ningun contexto de apilado. Dos mecanismos, mismo color. */
.site-header {
  box-shadow: 0 -150px 0 var(--color-bg);
}

/* 2 · Los logos de festivales dejan de ser grises al pasar por encima o al
   recibir foco: de adorno pasan a prueba de trayectoria. */
.festival-logo img {
  transition: filter 320ms var(--ease-luxury), opacity 320ms var(--ease-luxury);
}

@media (hover: hover) and (pointer: fine) {
  .festival-logo:hover img,
  .festival-logo:focus-visible img {
    filter: none;
    opacity: 1;
  }
}

/* 3 · Clave salsera como divisor. Cinco golpes con el reparto 3-2 real:
   se dibujan una sola vez al entrar en pantalla y se quedan quietos. */
.clave-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: var(--container);
  margin: clamp(18px, 4vw, 46px) auto;
  padding: 0;
}

.clave-divider span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), var(--color-accent), rgba(212, 175, 55, 0.25));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.9;
}

/* El hueco del tresillo: el silencio tambien es parte de la clave. */
.clave-divider span:nth-child(3) {
  margin-right: 26px;
}

.clave-divider.is-visible span {
  animation: clave-stroke 460ms var(--ease-luxury) both;
}

.clave-divider.is-visible span:nth-child(1) { animation-delay: 0ms; }
.clave-divider.is-visible span:nth-child(2) { animation-delay: 150ms; }
.clave-divider.is-visible span:nth-child(3) { animation-delay: 300ms; }
.clave-divider.is-visible span:nth-child(4) { animation-delay: 560ms; }
.clave-divider.is-visible span:nth-child(5) { animation-delay: 710ms; }

@keyframes clave-stroke {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* 4 · Indicador de reproduccion. Tres barras que se mueven mientras suena la
   intro y se quedan quietas al pausar o silenciar. No analiza el audio: es un
   indicador de estado, no un visualizador. */
.hero-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  margin-left: 2px;
}

.hero-eq i {
  display: block;
  width: 3px;
  height: 5px;
  border-radius: 1px;
  background: var(--color-accent);
  opacity: 0.55;
}

.hero-stage__controls.is-playing .hero-eq i {
  animation: hero-eq-bar 900ms var(--ease-luxury) infinite alternate;
  opacity: 1;
}

.hero-stage__controls.is-playing .hero-eq i:nth-child(2) { animation-delay: 180ms; }
.hero-stage__controls.is-playing .hero-eq i:nth-child(3) { animation-delay: 360ms; }

@keyframes hero-eq-bar {
  from { height: 4px; }
  to { height: 15px; }
}

/* 5 · Fotos secundarias: un grado de giro que se resuelve al entrar. Solo en
   la galeria, nunca en la imagen principal de una seccion. */
.scene-photo[data-reveal].is-visible picture {
  animation: photo-settle 750ms var(--ease-luxury) both;
}

@keyframes photo-settle {
  from {
    transform: rotate(0.9deg) scale(1.025);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clave-divider span,
  .hero-stage__controls.is-playing .hero-eq i,
  .scene-photo[data-reveal].is-visible picture {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .clave-divider span {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   CORRECCION DEL TITULAR · 12 de septiembre de 2026
   El barrido con background-clip: text dejaba la mayor parte del titular sin
   pintar. Con `color: transparent`, todo lo que el degradado no cubre queda
   invisible: se veian solo tres fragmentos sueltos sobre el negro.
   Se sustituye por oro solido con un resplandor que respira. El color nunca
   deja de existir, asi que el fallo no puede repetirse.
   ========================================================================== */
.hero h1.hero-title {
  filter: none;
}

.hero h1.hero-title .hero-title__claim {
  background-image: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--color-accent);
  animation: lx-title-glow 5.5s ease-in-out 600ms infinite alternate;
}

@keyframes lx-title-glow {
  from {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.12);
  }

  to {
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.42), 0 0 4px rgba(255, 244, 214, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.hero-title .hero-title__claim {
    animation: none;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.24);
  }
}

/* Ajuste de calidad: el marco se limita a 1440 px, el ancho exacto del archivo
   de escritorio. Asi no se estira en pantallas normales, y en las de densidad
   doble el script sirve la copia de 1920. */
.hero-stage__frame {
  max-width: 1440px;
}

/* CTA centrados: la regla global `p { max-width: 70ch }` recortaba el parrafo
   del boton a 70 caracteres y, sin margin auto, lo dejaba pegado a la izquierda.
   El boton se centraba dentro de ese parrafo estrecho, no dentro de la seccion. */
.videos__cta,
.formats__cta {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* La cabecera de la franja de festivales esta centrada en su H2 y en su nota,
   pero el antetitulo se quedaba a la izquierda en escritorio: las reglas de
   centrado solo llegaban hasta 960 px. */
.festival-band__inner > header {
  text-align: center;
}

.festival-band__inner > header .eyebrow,
.festival-band__inner > header h2 {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   ALINEACION Y GALERIA - 12 de septiembre de 2026
   ========================================================================== */

/* La regla global `p { max-width: 70ch }` afectaba tambien a los antetitulos.
   Sin margin auto, la caja de 70 caracteres quedaba anclada a la izquierda y el
   texto se centraba DENTRO de esa caja, no dentro de la seccion: por eso 'En
   escena', 'Nuestro archivo', 'Agenda' y 'Escenarios compartidos' aparecian
   descentrados hacia la izquierda en escritorio. */
.eyebrow {
  max-width: none;
}

/* Filtros de la agenda centrados, en linea con el resto de la seccion. */
.agenda-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
}

/* Galeria en rejilla de celdas iguales. El recorte cuadrado ordena fotos de
   orientaciones distintas (hay 3:2, 2:3 y cuadradas) sin dejar el borde
   inferior en escalera, que es lo que hacia la maquetacion por columnas. */
.scene-gallery {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.scene-photo {
  margin: 0;
}

.scene-photo a,
.scene-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.scene-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .scene-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .scene-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   AJUSTES FINOS 12-09-2026
   ========================================================================== */

/* Hero: el marco baja a 1200 px. Con el archivo de 1440 eso supone reducir, no
   estirar, y una imagen reducida siempre se ve mas nitida que una ampliada. En
   pantallas de densidad doble el script sigue sirviendo la copia de 1920. */
.hero-stage__frame {
  max-width: 1200px;
}

/* Los titulares no parten palabras. `body { overflow-wrap: break-word }` es una
   red de seguridad util en parrafos, pero en un titular de 78 px partia
   'disponibilidad' en dos lineas con una 'd.' suelta debajo. */
h1,
h2,
h3,
.hero-title,
.booking h2,
.availability-stage h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.booking h2 {
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  line-height: 1;
}

/* El borde rojo salia en campos vacios que nadie habia tocado: un campo
   obligatorio es invalido desde el primer pintado, y `:placeholder-shown` no
   ayuda cuando el campo no lleva placeholder. `:user-invalid` solo se activa
   despues de que la persona escribe o intenta enviar. */
@supports selector(:user-invalid) {
  .field input:not(:placeholder-shown):invalid,
  .field textarea:not(:placeholder-shown):invalid {
    border-color: var(--color-line);
  }

  .field input:user-invalid,
  .field textarea:user-invalid {
    border-color: #e86a5c;
  }
}

/* --------------------------------------------------------------------------
   Control flotante de la intro
   Cuando la persona activa el sonido, la intro sigue sonando aunque el hero
   salga de pantalla. Este boton aparece entonces para poder pararla sin volver
   arriba: cualquier audio de mas de tres segundos necesita un control visible
   (criterio 1.4.2 de WCAG).
   -------------------------------------------------------------------------- */
.hero-audio-flag {
  position: fixed;
  z-index: 46;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: rgba(14, 11, 11, 0.94);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  animation: fade-up 320ms var(--ease-luxury);
}

.hero-audio-flag:hover,
.hero-audio-flag:focus-visible {
  border-color: var(--color-ink);
}

.hero-audio-flag .hero-eq i {
  animation: hero-eq-bar 900ms var(--ease-luxury) infinite alternate;
  opacity: 1;
}

.hero-audio-flag .hero-eq i:nth-child(2) { animation-delay: 180ms; }
.hero-audio-flag .hero-eq i:nth-child(3) { animation-delay: 360ms; }

@media (max-width: 640px) {
  .hero-audio-flag {
    bottom: 84px;
    left: 12px;
    padding: 9px 14px;
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-audio-flag {
    animation: none;
  }

  .hero-audio-flag .hero-eq i {
    animation: none;
  }
}