/* hero-shelf: Expanding Link Shelf (referencia GSAP Vault). Fondo transparente y textos con los colores de la web. Todo con prefijo .dls */
.dls {
  --dls-ink: var(--text-primary);
  --dls-ink-soft: var(--text-secondary);
  --dls-rule: var(--border-strong);
  --dls-width: 96rem;
  --dls-gutter: clamp(1rem, 4.2vw, 4rem);
  --dls-space-y: clamp(1.2rem, 2vw, 1.6rem);
  --dls-gap: clamp(.35rem, .8vw, .7rem);
  --dls-panel-height: clamp(28rem, 38vw, 34rem);
  --dls-motion: 620ms cubic-bezier(.2, .72, .18, 1);
  --dls-serif: Georgia, 'Times New Roman', serif;
  --dls-sans: Arial, 'Helvetica Neue', sans-serif;
  --dls-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  box-sizing: border-box;
  background: transparent;
  color: var(--dls-ink);
  font-family: var(--dls-sans);
  -webkit-font-smoothing: antialiased;
}
.dls *, .dls ::after, .dls ::before { box-sizing: inherit; }
.dls :where(h2, h3, p, ul) { margin: 0; }

.dls__wrap {
  container: dls-content / inline-size;
  width: min(100%, var(--dls-width));
  margin-inline: auto;
  padding: var(--dls-space-y) var(--dls-gutter);
}
.dls__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .7fr);
  gap: clamp(1.5rem, 5cqi, 5rem);
  align-items: end;
  padding-bottom: clamp(.85rem, 1.5cqi, 1.2rem);
  margin-bottom: clamp(.8rem, 1.2cqi, 1rem);
  border-bottom: 1px solid var(--dls-rule);
}
.dls__action, .dls__eyebrow, .dls__label, .dls__number {
  font-size: .67rem;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dls__eyebrow {
  margin-bottom: clamp(.65rem, 1.15cqi, .9rem) !important;
  color: var(--dls-ink-soft);
}
.dls__title {
  max-width: 18ch;
  color: var(--dls-ink);
  font-family: var(--dls-serif);
  font-size: clamp(3rem, 6.1cqi, 5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.07em;
}
.dls__lead {
  max-width: 38ch;
  padding-bottom: .15rem;
  color: var(--dls-ink-soft);
  font-size: clamp(1rem, 1.4cqi, 1.18rem);
  line-height: 1.48;
}
.dls__nav { min-width: 0; }
.dls__rail {
  display: flex;
  min-width: 0;
  min-height: var(--dls-panel-height);
  gap: var(--dls-gap);
  padding: 0;
  list-style: none;
}

.dls__door {
  --dls-door-bg: #f0ddd2;
  --dls-door-ink: #5a211c;
  --dls-door-face: var(--dls-serif);
  --dls-door-size: clamp(2.1rem, 4.25cqi, 3.2rem);
  --dls-door-weight: 400;
  --dls-door-style: normal;
  --dls-door-track: -.065em;
  --dls-door-align: flex-start;
  --dls-door-position: center;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--dls-panel-height);
  overflow: hidden;
  border-radius: .5rem;
  background: var(--dls-door-bg);
  color: var(--dls-door-ink);
  transition: flex-grow var(--dls-motion);
}
.dls__door--film {
  --dls-door-bg: #244d88;
  --dls-door-ink: #f8f3e8;
  --dls-door-face: var(--dls-sans);
  --dls-door-size: clamp(2.05rem, 4cqi, 3rem);
  --dls-door-weight: 800;
  --dls-door-track: -.075em;
  --dls-door-position: 52% center;
}
.dls__door--workshops {
  --dls-door-bg: #d5e975;
  --dls-door-ink: #243116;
  --dls-door-face: var(--dls-mono);
  --dls-door-size: clamp(1.85rem, 3.8cqi, 2.9rem);
  --dls-door-weight: 700;
  --dls-door-track: -.09em;
  --dls-door-position: 50% center;
}
.dls__door--conversations {
  --dls-door-bg: #e5a5b0;
  --dls-door-ink: #49232c;
  --dls-door-face: var(--dls-serif);
  --dls-door-size: clamp(2rem, 3.9cqi, 2.95rem);
  --dls-door-weight: 400;
  --dls-door-style: italic;
  --dls-door-track: -.055em;
  --dls-door-align: center;
  --dls-door-position: 54% center;
}
.dls__door--visit {
  --dls-door-bg: #efc958;
  --dls-door-ink: #282651;
  --dls-door-face: var(--dls-sans);
  --dls-door-size: clamp(2.1rem, 4.1cqi, 3.1rem);
  --dls-door-weight: 800;
  --dls-door-track: -.075em;
  --dls-door-position: 50% center;
}

.dls__link {
  position: relative;
  display: block;
  min-height: var(--dls-panel-height);
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--dls-door-bg);
  color: inherit;
  text-decoration: none;
}
.dls__link:focus-visible { z-index: 4; outline: 3px solid #fff; outline-offset: -8px; }
.dls__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--dls-door-position);
  transition: transform var(--dls-motion);
}
.dls__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgb(12 14 17 / 22%), transparent 37%, rgb(12 14 17 / 38%));
  pointer-events: none;
}
.dls__number {
  position: absolute;
  z-index: 3;
  top: clamp(.8rem, 1.5cqi, 1.1rem);
  right: clamp(.8rem, 1.5cqi, 1.1rem);
  padding: .38rem .48rem;
  border-radius: 999px;
  background: rgb(22 22 20 / 75%);
  color: #fff;
  font-size: .62rem;
}
.dls__tab {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: clamp(.8rem, 1.5cqi, 1.1rem);
  left: clamp(.8rem, 1.5cqi, 1.1rem);
  max-width: calc(100% - 1.6rem);
  padding: .62rem .72rem;
  border-radius: .3rem;
  background: var(--dls-door-bg);
  color: var(--dls-door-ink);
  font-family: var(--dls-door-face);
  font-size: clamp(.74rem, 1.02cqi, .9rem);
  font-style: var(--dls-door-style);
  font-weight: var(--dls-door-weight);
  letter-spacing: -.025em;
  line-height: 1.05;
  text-align: left;
  transition: opacity 160ms ease;
}
.dls__door--film .dls__tab, .dls__door--visit .dls__tab { text-transform: uppercase; }
.dls__door--conversations .dls__tab { text-align: center; }

.dls__open {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: clamp(.8rem, 1.5cqi, 1.1rem);
  left: clamp(.8rem, 1.5cqi, 1.1rem);
  width: min(40cqi, 36rem);
  display: flex;
  flex-direction: column;
  align-items: var(--dls-door-align);
  gap: clamp(.45rem, .8cqi, .65rem);
  padding: clamp(.9rem, 1.65cqi, 1.35rem);
  border-radius: .35rem;
  background: var(--dls-door-bg);
  color: var(--dls-door-ink);
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 180ms ease;
  text-align: left;
}
.dls__label { width: 100%; font-size: .61rem; font-weight: 700; }
.dls__title-card {
  display: block;
  width: 100%;
  max-width: 18ch;
  color: currentColor;
  font-family: var(--dls-door-face);
  font-size: var(--dls-door-size);
  font-style: var(--dls-door-style);
  font-weight: var(--dls-door-weight);
  line-height: .94;
  letter-spacing: var(--dls-door-track);
}
.dls__door--film .dls__title-card, .dls__door--visit .dls__title-card { text-transform: uppercase; }
.dls__door--conversations .dls__open { text-align: center; }
.dls__door--conversations .dls__title-card { max-width: 16ch; }
.dls__description {
  max-width: 48ch;
  font-size: clamp(.86rem, 1cqi, .95rem);
  line-height: 1.42;
}
.dls__action {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
  margin-top: .15rem;
  padding-top: .65rem;
  border-top: 1px solid currentColor;
  font-size: .61rem;
  font-weight: 700;
}
/* hero-shelf/circulo/01: botón circular con texto (IR, VER, MÁS...), sobre la imagen abajo a la derecha, solo en cards sin video */
.dls__circle {
  position: absolute;
  z-index: 5;
  right: clamp(.8rem, 1.5cqi, 1.1rem);
  bottom: clamp(.8rem, 1.5cqi, 1.1rem);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: 50%;
  background: var(--dls-door-ink);
  color: var(--dls-door-bg);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-indent: .08em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 .25rem .9rem rgb(12 14 17 / 35%);
  opacity: 0; /* aparece junto con el panel (circulo/03) */
  pointer-events: none;
  transition: opacity 180ms ease; /* solo opacity: el transform lo maneja GSAP */
}
/* hero-shelf/circulo/02: anillos del efecto GSAP (los crea hero-shelf.js) */
.dls__circle-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dls-door-ink);
  border-radius: 50%;
  box-shadow: 0 0 .7rem var(--dls-door-ink);
  opacity: 0; /* lo anima GSAP; sin GSAP los anillos no se ven */
  pointer-events: none;
}
/* respaldo si no hay GSAP */
.dls__circle:not([data-gsap]):hover { transform: scale(1.08); }

/* === Acordeón con hover: la puerta bajo el mouse se ensancha, la última con hover queda abierta === */
@media (hover: hover) and (pointer: fine) {
  @container dls-content (min-width: 721px) {
    /* Reposo (sin mouse): abierta la primera */
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child { flex-grow: 4; }
    .dls__rail:hover .dls__door { flex-grow: 1; }
    .dls__rail:hover .dls__door:hover { flex-grow: 4; }

    .dls__rail:hover .dls__door:hover .dls__open,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child .dls__open { opacity: 1; transition-delay: 220ms; }
    .dls__rail:hover .dls__door:not(:hover) .dls__open,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:not(:first-child) .dls__open { opacity: 0; transition-delay: 0s; }

    .dls__rail:hover .dls__door:hover .dls__tab,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child .dls__tab { opacity: 0; transition-delay: 220ms; }

    .dls__rail:hover .dls__door:hover .dls__image,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child .dls__image { transform: scale(1.025); }

    /* Última puerta con hover (la marca hero-shelf.js con data-pointer-active) */
    .dls__rail[data-pointer-active] .dls__door { flex-grow: 1; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] { flex-grow: 4; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] .dls__open { opacity: 1; transition-delay: 220ms; }
    .dls__rail[data-pointer-active] .dls__door:not([data-pointer-active]) .dls__open { opacity: 0; transition-delay: 0s; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] .dls__tab { opacity: 0; transition-delay: 220ms; }
    .dls__rail[data-pointer-active] .dls__door:not([data-pointer-active]) .dls__tab { opacity: 1; transition-delay: 0s; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] .dls__image { transform: scale(1.025); }
    .dls__rail[data-pointer-active] .dls__door:not([data-pointer-active]) .dls__image { transform: none; }

    /* Teclado */
    .dls__rail:focus-within .dls__door:not(:focus-within) { flex-grow: 1; }
    .dls__rail:focus-within .dls__door:focus-within { flex-grow: 4; }
    .dls__rail:focus-within .dls__door:not(:focus-within) .dls__open { opacity: 0; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:focus-within .dls__open { opacity: 1; transition-delay: 220ms; }
    .dls__rail:focus-within .dls__door:not(:focus-within) .dls__tab { opacity: 1; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:focus-within .dls__tab { opacity: 0; transition-delay: 220ms; }
    .dls__rail:focus-within .dls__door:not(:focus-within) .dls__image { transform: none; }
    .dls__rail:focus-within .dls__door:focus-within .dls__image { transform: scale(1.025); }

    /* hero-shelf/circulo/03: el círculo aparece y desaparece junto con el panel */
    .dls__rail:hover .dls__door:hover .dls__circle,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child .dls__circle { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
    .dls__rail:hover .dls__door:not(:hover) .dls__circle,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:not(:first-child) .dls__circle { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] .dls__circle { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
    .dls__rail[data-pointer-active] .dls__door:not([data-pointer-active]) .dls__circle { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:not(:focus-within) .dls__circle { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:focus-within .dls__circle { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
  }
}

/* === Angosto / táctil: todas abiertas, apiladas === */
@container dls-content (max-width: 720px) {
  .dls__wrap { padding-inline: clamp(1rem, 5cqi, 1.5rem); }
  .dls__intro { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .dls__title { max-width: 18ch; font-size: clamp(2.7rem, 10.5cqi, 4rem); }
  .dls__lead { max-width: 42ch; }
  .dls__rail { display: grid; min-height: 0; gap: .65rem; }
  .dls__door { min-height: 0; transition: none; }
  .dls__link { display: flex; flex-direction: column; min-height: 0; height: auto; }
  .dls__image { position: relative; inset: auto; width: 100%; height: clamp(9.5rem, 36cqi, 12.5rem); }
  .dls__veil { inset: 0 0 auto; height: clamp(9.5rem, 36cqi, 12.5rem); }
  .dls__number { top: .75rem; right: .8rem; }
  .dls__tab { display: none; }
  .dls__open {
    position: relative; inset: auto; width: 100%; gap: .65rem;
    padding: 1rem 1.1rem 1.1rem; border-radius: 0;
    opacity: 1; pointer-events: auto; transform: none; transition: none;
  }
  .dls__label { font-size: .62rem; }
  .dls__title-card { max-width: 20ch; font-size: clamp(1.9rem, 7cqi, 2.6rem); }
  .dls__description { max-width: 42ch; font-size: .88rem; }
  .dls__action { padding-top: .6rem; }
  /* hero-shelf/circulo/04: angosto, abajo a la derecha de la imagen y siempre visible */
  .dls__circle {
    top: calc(clamp(9.5rem, 36cqi, 12.5rem) - 3.25rem - clamp(.8rem, 1.5cqi, 1.1rem));
    bottom: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}
@media (hover: none) {
  .dls__rail { display: grid; min-height: 0; gap: .65rem; }
  .dls__door { min-height: 0; transition: none; }
  .dls__link { display: flex; flex-direction: column; min-height: 0; height: auto; }
  .dls__image { position: relative; inset: auto; width: 100%; height: clamp(9.5rem, 36cqi, 12.5rem); }
  .dls__veil { inset: 0 0 auto; height: clamp(9.5rem, 36cqi, 12.5rem); }
  .dls__number { top: .75rem; right: .8rem; }
  .dls__tab { display: none; }
  .dls__open {
    position: relative; inset: auto; width: 100%; gap: .65rem;
    padding: 1rem 1.1rem 1.1rem; border-radius: 0;
    opacity: 1; pointer-events: auto; transform: none; transition: none;
  }
  .dls__label { font-size: .62rem; }
  .dls__title-card { max-width: 20ch; font-size: clamp(1.9rem, 7cqi, 2.6rem); }
  .dls__description { max-width: 42ch; font-size: .88rem; }
  .dls__action { padding-top: .6rem; }
  /* hero-shelf/circulo/05: táctil, abajo a la derecha de la imagen y siempre visible */
  .dls__circle {
    top: calc(clamp(9.5rem, 36cqi, 12.5rem) - 3.25rem - clamp(.8rem, 1.5cqi, 1.1rem));
    bottom: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dls *, .dls ::after, .dls ::before { transition: none !important; }
}

/* === Título como imagen (tituloImagen del hero.json) === */
.dls__title-img { display: block; max-width: 100%; height: auto; max-height: clamp(3.5rem, 6.1cqi, 5rem); }

/* === Hero: las cards ocupan toda la pantalla === */
.hero-section .dls {
  --dls-width: 120rem;
  --dls-panel-height: 24rem;
  width: 100%;
  height: 100vh;
  display: flex;
}
.hero-section .dls__wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-section .dls__nav { flex: 1; min-height: 0; }
.hero-section .dls__rail { height: 100%; }


/* ===== ESCALA DEL HERO (achica todo junto, centrado) ===== */
/* hero-shelf/escala/01 */
.hero-section .dls__wrap {
  --dls-escala: .85; /* 1 = tamaño actual · .78 = como tu imagen 2 · más bajo = más chico */
  transform: scale(var(--dls-escala));
  transform-origin: center center;
}


/* ===== BORDE DE COLOR EN LAS CARDS (fondo oscuro detrás de la imagen) ===== */
/* hero-shelf/borde/01 */
.hero-section .dls__door,
.hero-section .dls__link {
  background: #0c0e11;
}


/* ===== TIPOGRAFÍA ÚNICA DE LAS CARDS (la de la card 02) ===== */
/* hero-shelf/tipografia/01 */
.hero-section .dls__door {
  --dls-door-face: var(--dls-sans);
  --dls-door-size: clamp(2.05rem, 4cqi, 3rem);
  --dls-door-weight: 800;
  --dls-door-style: normal;
  --dls-door-track: -.075em;
}
/* hero-shelf/tipografia/02 */
.hero-section .dls__tab,
.hero-section .dls__title-card {
  text-transform: uppercase;
}

/* ===== PALETA DE LAS CARDS (fondo del badge y del panel · color del texto) ===== */
/* hero-shelf/paleta/01 */
.hero-section .dls__door--exhibitions { --dls-door-bg: #EF476F; --dls-door-ink: #ffffff; }
/* hero-shelf/paleta/02 */
.hero-section .dls__door--film { --dls-door-bg: #FFD166; --dls-door-ink: #073B4C; }
/* hero-shelf/paleta/03 */
.hero-section .dls__door--workshops { --dls-door-bg: #06D6A0; --dls-door-ink: #073B4C; }
/* hero-shelf/paleta/04 */
.hero-section .dls__door--conversations { --dls-door-bg: #118AB2; --dls-door-ink: #ffffff; }
/* hero-shelf/paleta/05 */
.hero-section .dls__door--visit { --dls-door-bg: #073B4C; --dls-door-ink: #FFD166; }


/* ===== VIDEO DE YOUTUBE: BOTÓN ▶ EN LA CARD Y VENTANA FLOTANTE ===== */
/* hero-shelf/video/01 */
.dls__play {
  position: absolute;
  z-index: 5;
  top: clamp(.8rem, 1.5cqi, 1.1rem);
  left: clamp(.8rem, 1.5cqi, 1.1rem); /* posición provisoria: arriba a la izquierda */
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dls-door-bg);
  color: var(--dls-door-ink);
  box-shadow: 0 .25rem .9rem rgb(12 14 17 / 35%);
  cursor: pointer;
}
/* hero-shelf/video/02 */
.dls__play-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .15rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* hero-shelf/video/03 */
.dls__play:not([data-gsap]):hover { transform: scale(1.08); } /* respaldo: si no hay GSAP */
/* hero-shelf/video/04 */
.dls__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* hero-shelf/video/05 */
.dls-video {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 4vw, 3rem);
  background: rgb(12 14 17 / 82%);
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 200ms ease;
}
/* hero-shelf/video/06 */
.dls-video, .dls-video *, .dls-video ::after, .dls-video ::before { box-sizing: border-box; }
/* hero-shelf/video/07 */
.dls-video.is-open { opacity: 1; }
/* hero-shelf/video/08 */
.dls-video__frame {
  position: relative;
  width: min(100%, 80rem, calc((100vh - 7rem) * 16 / 9));
  width: min(100%, 80rem, calc((100dvh - 7rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .5rem;
  background: #000;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 55%);
}
/* hero-shelf/video/09 */
.dls-video__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* hero-shelf/video/10 */
.dls-video__close {
  position: absolute;
  z-index: 1;
  top: clamp(.6rem, 2vw, 1.25rem);
  right: clamp(.6rem, 2vw, 1.25rem);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: rgb(12 14 17 / 70%);
  color: #fff;
  font: 400 1.6rem/1 Arial, 'Helvetica Neue', sans-serif;
  cursor: pointer;
}
/* hero-shelf/video/11 */
.dls-video__close:hover { background: #fff; color: #0c0e11; }
/* hero-shelf/video/12 */
.dls-video__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* hero-shelf/video/13 */
.dls__play-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dls-door-bg);
  border-radius: 50%;
  box-shadow: 0 0 .7rem var(--dls-door-bg);
  opacity: 0; /* lo anima GSAP; sin GSAP los anillos no se ven */
  pointer-events: none;
}

/* hero-shelf/video-motion/01 */
@media (prefers-reduced-motion: reduce) {
  .dls-video { transition: none; }
}

/* ===== MINI REPRODUCTOR DE AUDIO (card 05 "Banda del mes": arriba a la izquierda de la imagen) ===== */
/* hero-shelf/audio/01: pill oscuro arriba a la izquierda, mismo margen que el ▶; aparece junto con el panel (audio/15) */
.dls__audio {
  --dls-audio-h: 3rem; /* alto del pill */
  position: absolute;
  z-index: 5;
  top: clamp(.8rem, 1.5cqi, 1.1rem);
  left: clamp(.8rem, 1.5cqi, 1.1rem);
  display: flex;
  align-items: center;
  gap: .75rem;
  box-sizing: border-box;
  width: min(16rem, calc(100% - 1.6rem));
  height: var(--dls-audio-h);
  padding: .3rem 1rem .3rem .3rem;
  border-radius: 999px;
  background: rgb(12 14 17 / 82%);
  color: #fff;
  box-shadow: 0 .25rem .9rem rgb(12 14 17 / 35%);
  opacity: 0; /* aparece junto con el panel (audio/15) */
  pointer-events: none;
  transition: opacity 180ms ease; /* solo opacity: el transform del botón lo maneja GSAP */
}
/* hero-shelf/audio/02: botón redondo play/pausa (mismos colores que el ▶) */
.dls__audio-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dls-door-bg);
  color: var(--dls-door-ink);
  cursor: pointer;
}
/* hero-shelf/audio/03: anillos del efecto GSAP (los crea hero-shelf.js) */
.dls__audio-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dls-door-bg);
  border-radius: 50%;
  box-shadow: 0 0 .7rem var(--dls-door-bg);
  opacity: 0; /* lo anima GSAP; sin GSAP los anillos no se ven */
  pointer-events: none;
}
/* hero-shelf/audio/04: ícono play (triángulo) */
.dls__audio-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-left: .12rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* hero-shelf/audio/05: ícono pausa (dos barras) mientras suena */
.dls__audio.is-playing .dls__audio-icon {
  margin-left: 0;
  background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
  clip-path: none;
}
/* hero-shelf/audio/06: los anillos se ocultan mientras suena */
.dls__audio.is-playing .dls__audio-ring { display: none; }
/* hero-shelf/audio/07: columna con nombre, barra y tiempo */
.dls__audio-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
/* hero-shelf/audio/08: nombre de la canción (una línea, con puntos suspensivos) */
.dls__audio-name {
  display: block;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* hero-shelf/audio/09: barra de progreso (un clic adelanta o atrasa; el ::before agranda la zona de clic) */
.dls__audio-bar {
  position: relative;
  display: block;
  height: .28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 25%);
  cursor: pointer;
}
.dls__audio-bar::before { content: ""; position: absolute; inset: -.5rem 0; }
/* hero-shelf/audio/10: relleno de la barra (avanza con scaleX desde la izquierda) */
.dls__audio-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--dls-door-bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms linear;
}
/* hero-shelf/audio/11: tiempo (0:00 / 3:45) */
.dls__audio-time {
  display: block;
  font-size: .6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 70%);
}
/* hero-shelf/audio/12: respaldo si no hay GSAP */
.dls__audio-btn:not([data-gsap]):hover { transform: scale(1.08); }
/* hero-shelf/audio/13: foco de teclado */
.dls__audio-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* hero-shelf/audio/14: error al cargar el mp3 (el JS pone .is-error y deshabilita el botón) */
.dls__audio.is-error .dls__audio-btn { opacity: .45; cursor: not-allowed; }
.dls__audio.is-error .dls__audio-ring { display: none; }
.dls__audio.is-error .dls__audio-bar { cursor: default; }
.dls__audio.is-error .dls__audio-time { color: #ffb4a8; }

/* hero-shelf/audio/15: el reproductor aparece y desaparece junto con el panel (mismas reglas que circulo/03) */
@media (hover: hover) and (pointer: fine) {
  @container dls-content (min-width: 721px) {
    .dls__rail:hover .dls__door:hover .dls__audio,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:first-child .dls__audio { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
    .dls__rail:hover .dls__door:not(:hover) .dls__audio,
    .dls__rail:not([data-pointer-active]):not(:hover):not(:focus-within) .dls__door:not(:first-child) .dls__audio { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail[data-pointer-active] .dls__door[data-pointer-active] .dls__audio { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
    .dls__rail[data-pointer-active] .dls__door:not([data-pointer-active]) .dls__audio { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:not(:focus-within) .dls__audio { opacity: 0; pointer-events: none; transition-delay: 0s; }
    .dls__rail:focus-within .dls__door:focus-within .dls__audio { opacity: 1; pointer-events: auto; transition-delay: 220ms; }
  }
}
/* hero-shelf/audio/16: angosto, siempre visible (la posición arriba a la izquierda sale de audio/01) */
@container dls-content (max-width: 720px) {
  .dls__audio {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}
/* hero-shelf/audio/17: táctil, siempre visible (la posición arriba a la izquierda sale de audio/01) */
@media (hover: none) {
  .dls__audio {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}

/* ===== VOLUMEN DEL MINI REPRODUCTOR (parlante + slider siempre visible en PC) ===== */
/* hero-shelf/audio/18: el pill se ensancha para que entren el slider y el parlante (pisa el width de audio/01) */
.dls__audio { width: min(20rem, calc(100% - 1.6rem)); }
/* hero-shelf/audio/19: grupo del volumen, a la derecha del pill: [slider][parlante] */
.dls__audio-vol {
  flex: none;
  display: flex;
  align-items: center;
}
/* hero-shelf/audio/20: botón parlante (silenciar / activar sonido) */
.dls__audio-vol-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.dls__audio-vol-btn:hover { background: rgb(255 255 255 / 15%); }
.dls__audio-vol-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* hero-shelf/audio/21: ícono del parlante y sus ondas según el nivel (alto: 2 ondas, bajo: 1, silenciado: cruz) */
.dls__audio-vol-icon { display: block; width: 1.15rem; height: 1.15rem; }
.dls__audio-vol-x { display: none; }
.dls__audio.is-low .dls__audio-vol-wave2 { display: none; }
.dls__audio.is-muted .dls__audio-vol-wave1,
.dls__audio.is-muted .dls__audio-vol-wave2 { display: none; }
.dls__audio.is-muted .dls__audio-vol-x { display: block; }
/* hero-shelf/audio/22: slider de volumen siempre visible */
.dls__audio-vol-range {
  width: 4rem;
  min-width: 0;
  height: 1rem;
  margin: 0 .3rem 0 0;
  padding: 0;
  accent-color: var(--dls-door-bg);
  cursor: pointer;
}
/* hero-shelf/audio/23: foco de teclado del slider */
.dls__audio-vol-range:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* hero-shelf/audio/24: si el mp3 no carga, el volumen queda apagado */
.dls__audio.is-error .dls__audio-vol { opacity: .45; pointer-events: none; }
/* hero-shelf/audio/25: táctil: sin volumen (en celular manda el volumen del teléfono) y pill más angosto */
@media (hover: none) {
  .dls__audio-vol { display: none; }
  .dls__audio { width: min(16rem, calc(100% - 1.6rem)); }
}

/* ===== CARD 05 "BANDA DEL MES": ESTILO PROPIO (título chico, géneros en pastillas, emoji y lore en cursiva) ===== */
/* hero-shelf/banda/01: título más chico que el de las otras cards (la card 05 es .dls__door--visit) */
.hero-section .dls__door--visit .dls__title-card {
  max-width: none;
  font-size: clamp(1.15rem, 2.2cqi, 1.7rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
/* hero-shelf/banda/02: panel más bajo (menos padding y menos aire entre líneas) */
.hero-section .dls__door--visit .dls__open {
  padding: clamp(.7rem, 1.2cqi, 1rem) clamp(.9rem, 1.5cqi, 1.2rem);
  gap: .4rem;
}
/* hero-shelf/banda/03: contenedor de las pastillas de género */
.hero-section .dls__door--visit .dls__genres {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
/* hero-shelf/banda/04: cada género, en su pastilla rellena de negro con letras blancas (sin contorno) */
.dls__genre {
  padding: .12rem .6rem;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: .61rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;
}
/* hero-shelf/banda/05: emoji junto al nombre de la banda */
.dls__emoji {
  display: inline-block;
  margin-left: .3em;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
/* hero-shelf/banda/06: lore en cursiva y un poco más chico */
.hero-section .dls__door--visit .dls__description {
  max-width: 44ch;
  font-size: clamp(.78rem, .9cqi, .86rem);
  font-style: italic;
  line-height: 1.4;
}