/* Capa de experiencia: hero con letra, reproductor propio, vinilo, inclinación 3D.
   Tres curvas para toda la capa: entradas, movimientos de estado y hover. */
:root {
  --xp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --xp-spring: linear(
    0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%,
    0.25 9.9%, 0.601 16.5%, 0.815 21.0%, 0.929 25.2%,
    0.987 29.0%, 1.025 33.5%, 1.042 38.0%, 1.04 43.5%,
    1.027 50.0%, 1.013 57.5%, 1.005 67.0%, 1.001 79.0%, 1
  );
  --xp-snap: cubic-bezier(0.22, 1, 0.36, 1);
  /* Garamond clásica para títulos y detalles */
  --serif: 'EB Garamond', 'Cormorant Garamond', Garamond, serif;
}

/* ---------- Hero: portada que respira ---------- */
.hero-bg-tease {
  transform-origin: 50% 55%;
  animation: xp-settle 1.6s var(--xp-ease-out) both, xp-breathe 38s cubic-bezier(0.65, 0, 0.35, 1) 1.6s infinite alternate;
}
@keyframes xp-settle {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes xp-breathe {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

/* ---------- Hero: botón de play ---------- */
.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font: inherit;
}
.hero-play .hp-icon {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}
.hero-play .hp-icon::before,
.hero-play .hp-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  transition: transform 0.35s var(--xp-snap), opacity 0.2s var(--xp-snap);
}
/* triángulo de play */
.hero-play .hp-icon::before {
  left: 1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.7rem;
  border-color: transparent transparent transparent currentColor;
}
/* barras de pausa */
.hero-play .hp-icon::after {
  left: 0;
  width: 0.8rem;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
  opacity: 0;
  transform: scale(0.9);
}
.hero-play.is-playing .hp-icon::before { opacity: 0; transform: scale(0.9); }
.hero-play.is-playing .hp-icon::after { opacity: 1; transform: scale(1); }
.hero-play:active,
.player-toggle:active { transform: scale(0.97); }

/* ---------- Hero: letra sincronizada ---------- */
.hero-lyrics {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.7s var(--xp-spring), opacity 0.5s var(--xp-ease-out), margin 0.7s var(--xp-spring);
  font-family: var(--serif);
}
.hero.is-listening .hero-lyrics {
  max-height: 11rem;
  opacity: 1;
  margin: 0.5rem 0 1.4rem;
}
.hero.is-listening .release-date,
.hero.is-listening .hero-sub {
  display: none;
}
.lyric-current {
  min-height: 2.6em;
  font-size: clamp(1.45rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.lyric-current.in {
  animation: xp-line-in 0.55s var(--xp-ease-out) both;
}
@keyframes xp-line-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.lyric-current .lw {
  color: rgba(244, 241, 236, 0.32);
  transition: color 0.18s var(--xp-snap), text-shadow 0.4s var(--xp-ease-out);
}
.lyric-current .lw.sung {
  color: #f4f1ec;
  text-shadow: 0 0 18px rgba(179, 18, 44, 0.55);
}
.lyric-next {
  margin-top: 0.5rem;
  min-height: 1.4em;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: rgba(244, 241, 236, 0.28);
  font-style: italic;
}

/* ---------- Portadas: inclinación 3D y brillo ---------- */
.disco-art {
  position: relative;
  overflow: visible;
  background: transparent;
  perspective: 900px;
  transition: transform 0.7s var(--xp-spring);
}
.disco-art .sleeve {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--xp-snap), box-shadow 0.5s var(--xp-snap);
}
.disco-art.tilting .sleeve {
  transition: transform 0.12s var(--xp-snap), box-shadow 0.5s var(--xp-snap);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
}
.disco-card:hover .disco-art img { transform: none; }
.disco-art .glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--xp-snap);
  mix-blend-mode: soft-light;
}
.disco-art.tilting .glare { opacity: 1; }

/* ---------- Vinilo que sale de la portada ---------- */
#musica, #fotos { overflow-x: clip; }
/* Como en un vinilo real: los surcos no se ven girar y los reflejos de luz
   se quedan quietos; lo único que se ve dar vueltas es la etiqueta. */
.vinyl {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background:
    /* borde fino que brilla */
    radial-gradient(circle closest-side, transparent 0 97.2%, rgba(255,255,255,0.55) 98%, rgba(255,255,255,0.12) 98.8%, #000 99.4%, transparent 100%),
    /* zona lisa alrededor de la etiqueta */
    radial-gradient(circle closest-side, #070707 0 39%, #0f0f10 40%, transparent 41%),
    #030303;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: translateX(0);
  transition: transform 0.8s var(--xp-spring);
}
/* la luz: dos abanicos brillantes y fijos; dentro de ellos se ven los surcos */
.vinyl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* bandas entre canciones */
    radial-gradient(circle closest-side, transparent 0 55%, rgba(0,0,0,0.6) 55.5% 56%, transparent 56.6%),
    radial-gradient(circle closest-side, transparent 0 68%, rgba(0,0,0,0.6) 68.5% 69%, transparent 69.5%),
    radial-gradient(circle closest-side, transparent 0 80%, rgba(0,0,0,0.55) 80.5% 80.9%, transparent 81.4%),
    /* surcos */
    repeating-radial-gradient(circle closest-side, rgba(255,255,255,0.95) 0 0.6px, rgba(150,150,150,0.55) 0.9px, rgba(255,255,255,0.85) 1.4px 2px),
    #fff;
  -webkit-mask:
    radial-gradient(circle closest-side, transparent 0 41.5%, #000 42.5% 96.8%, transparent 97.2%),
    conic-gradient(from 0deg,
      transparent 0deg 18deg, rgba(0,0,0,0.25) 32deg, rgba(0,0,0,0.85) 52deg, rgba(0,0,0,0.25) 74deg, transparent 96deg 196deg,
      rgba(0,0,0,0.3) 214deg, rgba(0,0,0,0.95) 240deg, rgba(0,0,0,0.9) 258deg, rgba(0,0,0,0.3) 282deg, transparent 304deg 360deg);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle closest-side, transparent 0 41.5%, #000 42.5% 96.8%, transparent 97.2%),
    conic-gradient(from 0deg,
      transparent 0deg 18deg, rgba(0,0,0,0.25) 32deg, rgba(0,0,0,0.85) 52deg, rgba(0,0,0,0.25) 74deg, transparent 96deg 196deg,
      rgba(0,0,0,0.3) 214deg, rgba(0,0,0,0.95) 240deg, rgba(0,0,0,0.9) 258deg, rgba(0,0,0,0.3) 282deg, transparent 304deg 360deg);
          mask-composite: intersect;
  opacity: 0.78;
}
/* surcos apenas visibles fuera de la luz */
.vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, rgba(255,255,255,0.035) 0 0.6px, transparent 0.9px 2px);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 41.5%, #000 42.5% 96.8%, transparent 97.2%);
          mask: radial-gradient(circle closest-side, transparent 0 41.5%, #000 42.5% 96.8%, transparent 97.2%);
}
.vinyl-label {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 36%;
  margin: -18% 0 0 -18%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.8), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.vinyl-label::before {
  /* papel de la etiqueta: viñeta y un leve brillo */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.12), transparent 45%), radial-gradient(circle, transparent 60%, rgba(0,0,0,0.35) 100%);
}
.vinyl-label::after {
  /* agujero central con anillo metálico */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  height: 10%;
  margin: -5% 0 0 -5%;
  border-radius: 50%;
  background: radial-gradient(circle, #050505 0 45%, #9a9aa0 52%, #3b3b40 70%, #1b1b1e 100%);
}
.disco-card.is-playing .disco-art { transform: translateX(-12%); }
.disco-card.is-playing .vinyl {
  transform: translateX(40%);
}
.disco-card.is-playing .vinyl-label {
  animation: xp-spin 1.8s linear infinite;
}
.disco-card.is-paused .vinyl-label {
  animation-play-state: paused;
}
@keyframes xp-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Reproductor propio ---------- */
.player-bar {
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: bottom 0.6s var(--xp-spring);
}
.player-bar audio { display: none; }
.player-cover {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-alt);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.player-info { flex: 0 1 18rem; }
.player-lyric {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(244, 241, 236, 0.55);
  min-height: 1.1em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 236, 0.35);
  background: transparent;
  color: #f4f1ec;
  cursor: pointer;
  transition: transform 0.16s var(--xp-snap), border-color 0.3s var(--xp-snap), background-color 0.3s var(--xp-snap);
}
.player-toggle:hover { border-color: var(--accent); background-color: rgba(179, 18, 44, 0.12); }
.player-toggle::before,
.player-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity 0.2s var(--xp-snap), transform 0.3s var(--xp-snap);
}
.player-toggle::before {
  margin: -7px 0 0 -4px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
.player-toggle::after {
  width: 12px;
  height: 14px;
  margin: -7px 0 0 -6px;
  background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 67%, currentColor 67% 100%);
  opacity: 0;
  transform: scale(0.9);
}
.player-bar.is-playing .player-toggle::before { opacity: 0; transform: scale(0.9); }
.player-bar.is-playing .player-toggle::after { opacity: 1; transform: scale(1); }

.player-timeline {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
}
.player-progress {
  position: relative;
  flex: 1;
  height: 18px;
  cursor: pointer;
}
.player-progress::before,
.player-progress-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.player-progress::before { background: rgba(244, 241, 236, 0.14); }
.player-progress-fill {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.player-progress:hover .player-progress-fill { box-shadow: 0 0 10px rgba(179, 18, 44, 0.6); }

@media (max-width: 640px) {
  .player-bar { flex-wrap: wrap; gap: 0.6rem 0.8rem; }
  .player-info { flex: 1 1 0; }
  .player-timeline { order: 5; flex-basis: 100%; }
  .disco-card.is-playing .disco-art { transform: translateX(-8%); }
  .disco-card.is-playing .vinyl { transform: translateX(14%); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-tease { animation: none; }
  .lyric-current.in { animation: none; }
  .disco-art, .vinyl, .sleeve, .player-bar { transition-duration: 0.01s; }
  .disco-card.is-playing .vinyl-label { animation: none; }
}

#player-title {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Escenario: el disco que suena pasa al frente ---------- */
.disco-stage { display: none; }
#musica.has-stage .disco-stage {
  display: block;
  max-width: 1040px;
  margin: 0 auto 3.5rem;
}
.disco-stage .disco-card {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 9vw, 7.5rem);
  align-items: center;
  text-align: left;
}
.disco-stage .disco-art { margin-bottom: 0; }
.disco-stage .disco-card.is-playing .disco-art { transform: none; }
.disco-stage .disco-card.is-playing .vinyl { transform: translateX(36%); }
.disco-stage .disco-art .sleeve { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.disco-stage .disco-info {
  container-type: inline-size;
  padding-left: clamp(1.5rem, 5vw, 4.75rem);
}
.disco-stage .disco-info h3,
.disco-stage .disco-info h3.title-long {
  font-size: min(3.4rem, 15cqi);
  line-height: 1.1;
  white-space: nowrap;
  margin-bottom: 0.4rem;
}
.disco-stage .disco-info h3.title-long { font-size: min(3.4rem, 8.4cqi); }
.disco-stage .disco-meta { font-size: 0.95rem; }
.disco-stage .disco-links { justify-content: flex-start; }
.disco-stage .tracklist-toggle { display: none; }
.disco-stage .tracklist {
  max-height: 19rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.stage-lyric {
  min-height: 1.3em;
  margin: 0.6rem 0 0.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(244, 241, 236, 0.6);
}
.stage-lyric:empty { display: none; }

/* la fila de discos que esperan */
#musica.has-stage .disco-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: center;
  gap: 2.25rem;
}
#musica.has-stage .disco-grid .disco-art { cursor: pointer; margin-bottom: 0.8rem; }
#musica.has-stage .disco-grid .disco-info h3 { font-size: 1.1rem; line-height: 1.6rem; }
#musica.has-stage .disco-grid .disco-info h3.title-long { font-size: min(1.1rem, 8.6cqi); }
#musica.has-stage .disco-grid .disco-links,
#musica.has-stage .disco-grid .tracklist-toggle,
#musica.has-stage .disco-grid .tracklist { display: none; }
#musica.has-stage .disco-grid .disco-meta { font-size: 0.75rem; }

/* el viaje entre la cuadrícula y el escenario */
::view-transition-group(*) {
  animation-duration: 0.75s;
  animation-timing-function: var(--xp-spring);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

@media (max-width: 720px) {
  .disco-stage .disco-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .disco-stage .disco-art { width: 78%; margin: 0 auto; }
  .disco-stage .disco-card.is-playing .disco-art { transform: translateX(-9%); }
  .disco-stage .disco-card.is-playing .vinyl { transform: translateX(22%); }
  .disco-stage .disco-links { justify-content: center; }
  .disco-stage .disco-info { padding-left: 0; }
  #musica.has-stage .disco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  #musica.has-stage .disco-grid .disco-meta { display: none; }
}

/* ---------- Tipografía: Cormorant Garamond en títulos y detalles ---------- */
h1, h2, h3, h4,
.eyebrow,
.release-date,
.btn,
.nav-links a,
.lang-toggle,
.disco-meta,
.disco-links a,
.tracklist li,
.tracklist-toggle,
.video-thumb-title,
#player-title,
.player-timeline,
.section-head p,
.hero-sub {
  font-family: var(--serif);
}
.eyebrow {
  font-weight: 600;
  letter-spacing: 0.32em;
}
.release-date,
.btn,
.tracklist-toggle,
.disco-links a {
  font-weight: 600;
  letter-spacing: 0.2em;
}
.btn { font-size: 0.95rem; }
.nav-links a { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.14em; }
.disco-meta { font-size: 1.02rem; letter-spacing: 0.04em; }
.disco-links a { font-size: 0.9rem; }
.tracklist li { font-size: 1.08rem; }
.tracklist-toggle { font-size: 0.85rem; }
#player-title { font-size: 1rem; font-weight: 500; }
.player-timeline { font-size: 0.9rem; font-variant-numeric: lining-nums tabular-nums; }
.section-head p { font-size: 1.2rem; font-style: italic; }
.hero-sub { font-size: 1.3rem; font-style: italic; }
.video-thumb-title { font-size: 0.95rem; }

/* ---------- El escenario cabe en la pantalla ---------- */
body.player-open { padding-bottom: 84px; }
@media (max-width: 640px) { body.player-open { padding-bottom: 124px; } }

.disco-stage .disco-art {
  width: min(100%, 50vh);
  justify-self: end;
}
.disco-stage .tracklist {
  max-height: max(9rem, calc(50vh - 10.5rem));
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
          mask: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  padding-bottom: 1.5rem;
}
.stage-row-label {
  display: none;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 1.4rem;
  color: var(--fg-dim);
}
#musica.has-stage .stage-row-label { display: block; }
#musica.has-stage .disco-stage { margin-bottom: 2.75rem; }
@media (max-width: 720px) {
  .disco-stage .disco-art { width: min(78%, 46vh); justify-self: center; }
  .disco-stage .tracklist { max-height: 15rem; }
}

/* ---------- El giro se ve ---------- */
/* polvo y marcas tenues que giran con el disco, como en un vinilo real */
.vinyl-spin {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 71% 30%, rgba(255,255,255,0.55) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 24% 62%, rgba(255,255,255,0.45) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 63% 81%, rgba(255,255,255,0.5) 0 0.5px, transparent 1.3px),
    radial-gradient(circle at 84% 58%, rgba(255,255,255,0.4) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 38% 18%, rgba(255,255,255,0.35) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 15% 40%, rgba(255,255,255,0.4) 0 0.5px, transparent 1.3px),
    conic-gradient(from 20deg, transparent 0 8deg, rgba(255,255,255,0.10) 9deg, transparent 11deg 140deg, rgba(255,255,255,0.08) 141deg, transparent 143deg 250deg, rgba(255,255,255,0.09) 251deg, transparent 253deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 43%, #000 45% 95%, transparent 96.5%);
          mask: radial-gradient(circle closest-side, transparent 0 43%, #000 45% 95%, transparent 96.5%);
}
.disco-card.is-playing .vinyl-spin { animation: xp-spin 1.8s linear infinite; }
.disco-card.is-paused .vinyl-spin { animation-play-state: paused; }

/* en el escenario el disco sale lo suficiente para ver la etiqueta girar */
.disco-stage .disco-card.is-playing .vinyl { transform: translateX(58%); }
.disco-stage .disco-info { padding-left: clamp(2rem, 11vw, 11rem); }
@media (max-width: 720px) {
  .disco-stage .disco-art { width: min(62%, 40vh); }
  .disco-stage .disco-card.is-playing .disco-art { transform: translateX(-24%); }
  .disco-stage .disco-card.is-playing .vinyl { transform: translateX(56%); }
  .disco-stage .disco-info { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .disco-card.is-playing .vinyl-spin { animation: none; }
}

/* ---------- Archivo: camiseta firmada del primer show grande y tarjeta del showcase ---------- */
.keepsake {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.keepsake .eyebrow { font-size: 0.8rem; margin-bottom: 2.75rem; }
.keepsake-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.5rem;
  width: 100%;
}
.keepsake-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.keepsake-shirt {
  display: block;
  width: min(100%, 27rem);
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
  transform: rotate(2deg);
  transition: transform 0.6s var(--xp-snap);
  -webkit-tap-highlight-color: transparent;
}
.keepsake-shirt img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.7));
}
.keepsake-shirt:hover, .keepsake-shirt:focus-visible { transform: rotate(0deg) scale(1.03); outline: none; }
#lightbox img.cutout {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
}
@media (max-width: 760px) {
  .keepsake-row { gap: 3.5rem; }
  .keepsake-shirt { width: min(88%, 24rem); }
}
.keepsake-card {
  width: min(100%, 31rem);
  aspect-ratio: 1200 / 686;
  perspective: 1100px;
  cursor: pointer;
  transform: rotate(-2.5deg);
  transition: transform 0.6s var(--xp-snap);
  -webkit-tap-highlight-color: transparent;
}
.keepsake-card.is-flipped { transform: rotate(1.5deg); }
.keepsake-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(calc(var(--ty, 0deg) + var(--flip, 0deg)));
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.keepsake-card.tilting .keepsake-inner { transition-duration: 0.15s; }
.keepsake-card.is-flipped .keepsake-inner { --flip: 180deg; }
.keepsake-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 18px 40px -12px rgba(0, 0, 0, 0.85);
}
.keepsake-back { transform: rotateY(180deg); }
.keepsake-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.keepsake-face .glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.28), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--xp-snap);
  mix-blend-mode: soft-light;
}
.keepsake-card.tilting .glare { opacity: 1; }
.keepsake-hot { position: absolute; border-radius: 2px; }
.keepsake-hot:hover, .keepsake-hot:focus-visible { background: rgba(179, 18, 44, 0.16); outline: none; }
.keepsake-caption {
  margin-top: 2.25rem;
  max-width: 26rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--fg-dim);
}
.keepsake-flip {
  margin-top: 1rem;
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-family: 'Oswald', var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.keepsake-flip:hover, .keepsake-flip:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
@media (prefers-reduced-motion: reduce) {
  .keepsake-card, .keepsake-inner, .keepsake-shirt { transition: none; }
}

/* ---------- Letras en el escenario: pestañas Canciones / Letra ---------- */
.stage-tabs {
  display: flex;
  gap: 1.4rem;
  margin-top: 1rem;
}
.stage-tabs[hidden] { display: none; }
.stage-tab {
  padding: 0 0 0.3rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--fg-dim);
  font-family: 'Oswald', var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.stage-tab:hover, .stage-tab:focus-visible { color: var(--fg); outline: none; }
.stage-tab[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); }
.disco-stage .stage-tabs + .tracklist { margin-top: 0.6rem; }
.stage-lyrics {
  display: none;
  margin-top: 0.6rem;
  padding: 0.9rem 0.5rem 2rem 0.25rem;
  border-top: 1px solid var(--border);
}
/* la letra se muestra entera; la portada acompaña mientras se lee */
.disco-stage .disco-card.show-lyrics { align-items: start; }
.disco-stage .show-lyrics .disco-art { position: sticky; top: 6rem; }
.disco-stage .show-lyrics .tracklist { display: none; }
.disco-stage .show-lyrics .stage-lyrics { display: block; }
.stage-lyrics-title {
  margin-bottom: 0.7rem;
  font-family: 'Oswald', var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.stage-lyrics-body {
  white-space: pre-line;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: rgba(244, 241, 236, 0.82);
}
@media (max-width: 720px) {
  .stage-tabs { justify-content: center; }
  .stage-lyrics { text-align: center; }
  .disco-stage .show-lyrics .disco-art { position: relative; top: auto; }
}