/* Pagliacci — Estética Sobria, Gráfica y Atemporal (Monocromo Grafito y Acero) */
:root {
  --bg-stage: #ECEFF3;      /* Gris frío neutro, muy limpio y sobrio */
  --bg-panel: #FFFFFF;      /* Blanco puro */
  --bg-tint: #DFE3E8;       /* Gris acero suave */
  
  --ink: #111418;           /* Negro grafito profundo */
  --ink-soft: #38404B;      /* Gris oscuro templado */
  --ink-muted: #5A6473;     /* Gris neutro medio. Antes #6B7685: ~4:1 sobre
                               --bg-stage, por debajo del 4.5:1 que exige AA
                               para texto normal (no grande/negrita). Este
                               valor da >=4.65:1 contra los tres fondos que
                               usa el sitio (blanco, --bg-stage, --bg-tint). */
  
  --accent: #242E3B;        /* Azul acero grafito oscuro, sobrio y sin estridencias */
  --accent-hover: #111418;  /* Tinta plena */
  --accent-light: #F0F3F6;  /* Tinte acero sutil */
  --accent-border: #C4CCD6;
  
  --border-ink: #111418;
  --shadow-hard: 4px 4px 0px #111418;
  --shadow-hard-sm: 2px 2px 0px #111418;
  
  --font-display: "Impact", "Arial Black", -apple-system, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#notificationBanner.notification-error {
  background: #7A1F1F;
  border-color: #7A1F1F;
}

/* outline:none sin ningún estilo :focus-visible que lo reemplace deja a un
   usuario de teclado sin saber dónde está el foco. Se restaura acá para los
   controles que lo habían removido sin sustituto. */
.dvd-player-btn:focus-visible,
.bulk-tools-row input:focus-visible,
.bulk-tools-row select:focus-visible,
#settingStudioRate:focus-visible,
#settingWhatsappNumber:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Oculta visualmente pero deja el texto disponible para lectores de pantalla y buscadores */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-stage);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Escenario general: 100vh sin scroll de ventana */
.stage-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  gap: 24px;
  box-sizing: border-box;
}

/* Sidebar flotante a la izquierda */
aside.floating-sidebar {
  width: 310px;
  min-width: 310px;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  z-index: 20;
}

.brand-logo-anchor {
  text-decoration: none;
  display: block;
  margin-bottom: 24px;
  text-align: center;
  cursor: pointer;
}

.logo-graphic {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.15s ease;
}

.logo-graphic:hover {
  transform: scale(1.02);
}

/* Opciones de la sidebar */
.nav-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nav-btn {
  background: transparent;
  border: 2px solid transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-btn:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.nav-btn.active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
}

.sidebar-bottom-info {
  border-top: 2px solid var(--bg-tint);
  padding-top: 14px;
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.sidebar-status-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.sidebar-status-desc {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

/* Área principal */
main.main-viewport {
  flex: 1;
  height: calc(100vh - 48px);
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Vista 1: INICIO & BUSCADOR CON ANIMACIÓN */
.home-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 36px 44px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  z-index: 1;
}

.home-screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.home-melting-vinyl {
  --melt-x: 76%;
  --melt-y: -13px;
  --melt-w: 90%;
  --melt-max-w: 301px;
  --melt-opacity: 0.9;
  position: absolute;
  top: var(--melt-y);
  left: var(--melt-x);
  width: min(var(--melt-max-w), var(--melt-w));
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(1.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-18px) rotate(-3deg) scale(0.94);
  z-index: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-screen.is-searching .home-melting-vinyl {
  opacity: var(--melt-opacity);
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
}

.home-screen.anim-entering {
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.home-screen.anim-leaving {
  visibility: visible;
  pointer-events: none;
  z-index: 1;
}

/* Bloque Hero */
.hero-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  margin: auto auto 20px auto;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.hero-box.active-search {
  margin: 0 0 16px 0;
  max-width: 100%;
  text-align: left;
}

/* Durante el pasaje inicio <-> catálogo las transiciones CSS se apagan: el
   movimiento lo maneja el script midiendo antes y después (si no, la barra
   salta de lugar en vez de viajar). */
.hero-box.is-morphing,
.hero-box.is-morphing * {
  transition: none !important;
}

/* Grupo de cabecera (texto y logo tipográfico) */
.hero-header-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuando se activa la búsqueda: logo a la DERECHA del texto */
.hero-box.active-search .hero-header-group {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.hero-question {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
  transition: all 0.3s ease;
}

/* Contenedor del logo Pagliacci para orquestar el pop épico independiente del loop continuo */
.hero-logo-wrap {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hero-logo-type {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  /* Animación en loop continuo MUY sutil del logo Pagliacci */
  animation: heroLogoSubtleLoop 4.4s ease-in-out infinite;
}

.hero-box.active-search .hero-question {
  font-size: 24px;
  margin-bottom: 0;
  white-space: nowrap;
}

.hero-box.active-search .hero-logo-wrap {
  width: auto;
  max-width: 180px;
  margin: 0;
  display: inline-flex;
}

.hero-box.active-search .hero-logo-type {
  max-width: 180px;
  margin: 0;
  animation: none;
}

.hero-caption {
  font-size: 17px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 24px;
}

.hero-box.active-search .hero-caption {
  display: none;
}


/* Barra de búsqueda interactiva */
.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}

.hero-box.active-search .search-wrapper {
  max-width: 100%;
  margin: 0;
}

.search-input-box {
  width: 100%;
  height: 62px;
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  background: var(--bg-stage);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  padding: 0 20px 0 54px;
  outline: none;
  transition: all 0.2s ease;
}

.search-input-box:focus {
  background: #FFFFFF;
  border-color: var(--ink);
  box-shadow: var(--shadow-hard);
}

.search-icon-symbol {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-soft);
  pointer-events: none;
}

.search-key-hint {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-muted);
  background: #FFFFFF;
  border: 1px solid var(--border-ink);
  border-radius: 3px;
  padding: 2px 7px;
  pointer-events: none;
  box-shadow: 1px 1px 0px var(--border-ink);
  transition: opacity 0.15s ease;
}

.search-input-box:focus + .search-key-hint {
  opacity: 0.4;
}

.search-pointer-hand {
  position: absolute;
  right: clamp(-148px, -13vw, -98px);
  top: 50%;
  width: clamp(78px, 9vw, 118px);
  height: auto;
  z-index: 3;
  filter: grayscale(100%) contrast(1.06);
  opacity: 0.86;
  pointer-events: none;
  transform: translateY(-50%) scaleX(-1) rotate(-4deg);
  transform-origin: center;
  animation: searchPointerNudge 1.65s ease-in-out infinite;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.search-wrapper:focus-within .search-pointer-hand,
.hero-box.active-search .search-pointer-hand {
  opacity: 0;
  transform: translate(10px, -50%) scaleX(-1) rotate(-4deg);
  animation: none;
}

@keyframes searchPointerNudge {
  0%, 100% {
    transform: translateY(-50%) scaleX(-1) rotate(-4deg);
  }
  50% {
    transform: translate(-10px, -50%) scaleX(-1) rotate(-4deg);
  }
}

/* Personaje Pagliacci mirando hacia arriba con viñeta cartoon asimétrica a la derecha */
.hero-character-wrap {
  width: 100%;
  max-width: 1020px;
  margin: 10px auto 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-character-mira-arriba {
  width: 350px;
  max-width: 50vw;
  max-height: 50vh;
  height: auto;
  object-fit: contain;
  margin-left: -40px;
  margin-top: 0;
  filter: drop-shadow(5px 5px 0px rgba(17, 20, 24, 0.18));
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  flex-shrink: 0;
}

/* Cuadro de texto cartoon grande, texturizado y asimétrico a la derecha */
.character-speech-bubble {
  position: relative;
  margin-top: 28px; /* Desfasado verticalmente para romper la simetría rígida */
  transform: rotate(-1.2deg); /* Sutil inclinación viva tipo cómic */
  background-color: #FFFFFF;
  /* Textura de imprenta / trama de puntos Ben-Day clásica de historieta vintage */
  background-image: 
    radial-gradient(circle, rgba(17, 20, 24, 0.085) 1.2px, transparent 1.2px),
    linear-gradient(to bottom, #FFFFFF, #F5F7FA);
  background-size: 7px 7px, 100% 100%;
  border: 3px solid var(--border-ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0px #111418;
  padding: 24px 28px;
  max-width: 550px;
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cuando se pone a reproducir el video, el globo se agranda y el texto
   de invitación se retrae para dar lugar al reproductor de video. */
.character-speech-bubble.is-video-mode {
  max-width: 720px;
}

.speech-bubble-kicker,
.speech-bubble-title,
.speech-bubble-text,
.speech-bubble-footer {
  max-height: 120px;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
}

.character-speech-bubble.is-video-mode .speech-bubble-kicker,
.character-speech-bubble.is-video-mode .speech-bubble-title,
.character-speech-bubble.is-video-mode .speech-bubble-text,
.character-speech-bubble.is-video-mode .speech-bubble-footer {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* Pico / cola tipo cómic apuntando hacia el personaje, situada BIEN ARRIBA en la parte lateral */
.character-speech-bubble::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 36px; /* Arriba en la parte lateral, a la altura de la cabeza del personaje */
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 22px solid var(--border-ink);
}

.character-speech-bubble::after {
  content: '';
  position: absolute;
  left: -16px;
  top: 38px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #FFFFFF;
}

.speech-bubble-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-soft);
}

.speech-bubble-title {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.speech-bubble-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.4;
  font-weight: 600;
}

/* Reproductor cartoon sobrio de audio */
.cartoon-player-card {
  background: var(--bg-stage);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(17, 20, 24, 0.03),
    rgba(17, 20, 24, 0.03) 2px,
    transparent 2px,
    transparent 6px
  );
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  box-shadow: var(--shadow-hard-sm);
}

.player-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Discman/reproductor de disco con la tapa abierta: carcasa + disco a la
   vista + pantalla LCD con ecualizador, dibujados a línea gruesa como el
   resto de los íconos del sitio. Late suavemente para invitar al click,
   y al reproducir el disco gira de verdad y el ecualizador se anima. */
.dvd-player-btn {
  position: relative;
  flex-shrink: 0;
  width: 108px;
  height: 82px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  animation: dvdBreath 2.6s ease-in-out infinite;
}

.dvd-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dvd-case {
  fill: var(--ink);
}

.dvd-vent-dot {
  fill: var(--bg-panel);
  opacity: 0.4;
}

.dvd-bay {
  fill: var(--bg-panel);
  stroke: var(--ink);
  stroke-width: 2;
}

.dvd-disc-group {
  transform-box: fill-box;
  transform-origin: center;
}

.dvd-disc {
  fill: #1A1D21;
  stroke: var(--ink);
  stroke-width: 2;
}

.dvd-disc-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.dvd-disc-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 6;
  stroke-linecap: round;
}

.dvd-disc-center {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.dvd-disc-hole {
  fill: var(--bg-panel);
}

.dvd-lcd {
  fill: var(--bg-panel);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.dvd-eq-bar {
  fill: var(--ink-muted);
  transition: fill 0.15s ease;
}

.dvd-play-glyph {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #FFFFFF;
  border: 2px solid var(--border-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1.5px 1.5px 0px #111418;
}

@keyframes dvdBreath {
  0%, 100% { transform: scale(1) translateY(0); }
  38% { transform: scale(1.05) translateY(-1.5px); }
  65% { transform: scale(1.01) translateY(-0.5px); }
}

.dvd-player-btn:hover {
  animation: none;
  transform: scale(1.06) translateY(-1px);
}

.dvd-player-btn:active {
  transform: scale(0.97);
}

@keyframes dvdSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dvdEqBounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.4); }
}

/* Al reproducir: el disco gira de verdad y las barras del ecualizador de
   la pantalla LCD saltan, en vez de barras de volumen flotando afuera. */
.dvd-player-btn.is-playing {
  animation: none;
}

.dvd-player-btn.is-playing .dvd-disc-group {
  animation: dvdSpin 1.4s linear infinite;
}

.dvd-player-btn.is-playing .dvd-eq-bar {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: dvdEqBounce 0.5s ease-in-out infinite;
}

.dvd-player-btn.is-playing .dvd-eq-bar-1 { animation-delay: 0s; }
.dvd-player-btn.is-playing .dvd-eq-bar-2 { animation-delay: 0.08s; }
.dvd-player-btn.is-playing .dvd-eq-bar-3 { animation-delay: 0.16s; }
.dvd-player-btn.is-playing .dvd-eq-bar-4 { animation-delay: 0.24s; }
.dvd-player-btn.is-playing .dvd-eq-bar-5 { animation-delay: 0.12s; }
.dvd-player-btn.is-playing .dvd-eq-bar-6 { animation-delay: 0.2s; }
.dvd-player-btn.is-playing .dvd-eq-bar-7 { animation-delay: 0.04s; }

.dvd-caption-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dvd-caption-col .player-track-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dvd-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* El reproductor cartoon se transforma en un reproductor de video */
.cartoon-player-card.is-video-mode .player-controls-row {
  display: none;
}

.cartoon-player-card.is-video-mode .speech-bubble-video-wrap {
  display: block;
}

.speech-bubble-video-wrap {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-hard-sm);
}

.speech-bubble-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-ink);
  background: var(--ink);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: background 0.15s, transform 0.15s;
}

.video-close-btn:hover {
  background: var(--accent);
  transform: rotate(90deg);
}

.speech-bubble-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.btn-bubble-action {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-bubble-action:hover {
  color: var(--accent);
  text-decoration: underline;
}

.hero-box.active-search .hero-character-wrap {
  display: none;
}

/* Contenedor de Resultados con scroll interno */
.results-drawer {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 8px 0 0;
  box-sizing: border-box;
}

.results-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Entran apenas después de que la barra empezó a subir, para que se lea como
     una consecuencia del movimiento y no como otra pantalla. */
  transition-delay: 0.12s;
}

.drawer-top-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 4px;
}

.drawer-results-headline {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.filter-and-sort-bar,
#recordsGrid {
  position: relative;
  z-index: 2;
}

/* Grilla de discos */
.records-stream {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 10px 2px 20px 2px;
}

.stream-card {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
}

.stream-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.stream-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.stream-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-stage);
  border-bottom: 2px solid var(--border-ink);
}

.stream-cover-wrap .stream-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lomo de cartón de vinilo en el borde izquierdo de la funda */
.stream-cover-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to right, rgba(17, 20, 24, 0.4), rgba(17, 20, 24, 0.08) 60%, transparent);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}

.stream-details {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stream-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stream-item-num {
  color: var(--ink);
  font-weight: 800;
}

.stream-composer {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.stream-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}

.stream-title a,
.featured-card-title a {
  color: inherit;
  text-decoration: none;
}

.stream-title a:hover,
.featured-card-title a:hover {
  text-decoration: underline;
}

.stream-title a:focus-visible,
.featured-card-title a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.stream-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.stream-tag {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-stage);
  border: 1px solid var(--bg-tint);
  color: var(--ink-soft);
  padding: 2px 6px;
  border-radius: 2px;
}

.stream-tag.stream-tag-uruguay {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.stream-action-row {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--bg-tint);
}

.stream-price {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #FFFFFF;
  background: var(--ink);
  padding: 7px 11px;
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  line-height: 1;
  white-space: nowrap;
}

.price-currency {
  font-family: var(--font-body);
  font-size: 0.6em;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 3px;
}

.btn-wa-compact {
  background: var(--ink);
  color: #FFFFFF;
  border: 1px solid var(--border-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.12s;
  cursor: pointer;
}

.btn-wa-compact:hover {
  background: var(--accent);
}

/* --- VISTA DE ESCAPARATE POR DEFECTO: SLIDER DESTACADOS + CATÁLOGO DIRECTO --- */
.catalog-default-showcase {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 4px 2px 24px 2px;
}

.catalog-error-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-weight: 600;
  grid-column: 1 / -1;
}
.catalog-error-state button {
  margin-left: 8px;
  border: 2px solid var(--border-ink);
  background: var(--bg-panel);
  color: var(--ink);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* Sección del carrusel / deslizador de destacados */
.featured-slider-section {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 14px 16px 16px 16px;
  position: relative;
}

.featured-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--bg-tint);
}

.featured-slider-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.featured-slider-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink);
  margin: 0;
}

.featured-slider-subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.featured-slider-controls {
  display: flex;
  gap: 6px;
}

.slider-nav-btn {
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid var(--border-ink);
  border-radius: 3px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}

.slider-nav-btn:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.slider-nav-btn:active {
  transform: translateY(0);
}

/* Pista desplazable del carrusel */
.featured-slider-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 6px 2px;
}

.featured-slider-track::-webkit-scrollbar {
  display: none;
}

/* Tarjeta compacta del carrusel */
.featured-slider-card {
  flex: 0 0 160px;
  width: 160px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-ink);
  border-radius: 3px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}

.featured-slider-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard-sm);
}

.featured-slider-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard-sm);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.featured-card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-stage);
  border: 1px solid var(--border-ink);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}

.featured-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--ink);
  color: #FFFFFF;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.2px;
}

.featured-card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.featured-card-artist {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.featured-card-title {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 28px;
}

.featured-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--bg-tint);
}

.featured-card-price {
  display: inline-flex;
  align-items: baseline;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--ink);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.featured-card-tag {
  font-size: 9px;
  font-weight: 800;
  background: var(--bg-stage);
  border: 1px solid var(--border-ink);
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75px;
}

/* Tira de Bateas Rápidas en la cabecera del catálogo */
.quick-bateas-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0 8px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quick-bateas-bar::-webkit-scrollbar {
  display: none;
}

.quick-batea-btn {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid var(--border-ink);
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.quick-batea-btn:hover {
  background: var(--bg-stage);
  transform: translateY(-1px);
}

.quick-batea-btn.active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

.quick-batea-btn.quick-batea-pressing {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
}

.quick-batea-btn.quick-batea-pressing:hover {
  background: var(--bg-stage);
}

.quick-batea-btn.quick-batea-pressing.active {
  background: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: #FFFFFF;
}

/* Secciones de Bateas Temáticas con Cabezales de Cartón Vintage */
.batea-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.batea-card-divider {
  position: relative;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 12px 16px;
  box-sizing: border-box;
}

.batea-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--bg-tint);
}

.batea-tab-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 2px;
}

.batea-count-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-stage);
  border: 1px solid var(--border-ink);
  padding: 2px 8px;
  border-radius: 2px;
}

.batea-header-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.batea-titles-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.batea-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.batea-lead {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.3;
}

.batea-filter-shortcut {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid var(--border-ink);
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.batea-filter-shortcut:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.batea-filter-shortcut:active {
  transform: translateY(0);
}

.batea-expand-bar {
  display: flex;
  justify-content: center;
  margin: 4px 0 6px 0;
}

.btn-batea-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-batea-expand:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0px var(--border-ink);
}

.btn-batea-expand:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .batea-header-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .batea-filter-shortcut {
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
}

/* Sub-encabezado del catálogo general en el escaparate */
.showcase-stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px 2px 2px;
}

.showcase-stream-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin: 0;
}

.showcase-stream-count {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Bloques de Tasación y Revisión Artesanal al pie del escaparate */
.catalog-service-banner {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .catalog-service-banner {
    grid-template-columns: 1fr;
  }
}

.catalog-service-text-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 16px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.service-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  max-width: 72%;
}

.service-card-bg-illustration {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  max-width: 36%;
  height: auto;
  max-height: 94%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 720px) {
  .service-card-content {
    max-width: 100%;
  }
  .service-card-bg-illustration {
    opacity: 0.14;
    width: 150px;
    right: -10px;
  }
}

.service-card-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
}

.service-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}

.service-card-copy {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.service-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.catalog-service-review-card {
  position: relative;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  background: var(--ink);
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  overflow: visible;
  margin-top: 6px;
  padding: 16px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

/* Marquesina ondulada superior teatral de Pagliacci */
.catalog-service-review-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background-image: radial-gradient(circle at 8px 8px, var(--ink) 7px, transparent 7.5px);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: 4px 0;
  pointer-events: none;
}

.catalog-service-review-card:hover,
.catalog-service-review-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--border-ink);
}

.catalog-service-review-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.service-review-kicker {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  text-align: center;
  display: block;
}

.service-review-text {
  display: block;
}

.service-review-copy {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  text-align: center;
  margin-top: 4px;
  display: block;
}

.service-review-photo {
  width: 58%;
  max-width: 120px;
  height: auto;
  margin-top: 8px;
  display: block;
  filter: drop-shadow(4px 4px 0px rgba(17, 20, 24, 0.35));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.catalog-service-review-card:hover .service-review-photo {
  transform: translateY(-4px) scale(1.04);
}

/* Barra para desplegar el resto del catálogo sin obligar a scrollear todo de entrada */
.showcase-expand-bar {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px 0;
}

.btn-showcase-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-showcase-expand:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0px var(--border-ink);
}

.btn-showcase-expand:active {
  transform: translateY(0);
}

.search-empty-state {
  grid-column: 1 / -1;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 22px 24px 28px;
  text-align: center;
  max-width: 560px;
  margin: 20px auto;
  overflow: hidden;
}

.search-empty-illustration {
  width: min(230px, 62vw);
  height: auto;
  display: block;
  margin: -8px auto 6px;
  filter: grayscale(100%) contrast(1.06);
  opacity: 0.9;
}

.search-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.search-empty-copy {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 16px;
}

.search-empty-btn {
  background: var(--bg-stage);
  color: var(--ink);
  border: 2px solid var(--border-ink);
}

.wanted-request-box {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-ink);
}

.wanted-request-copy {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.wanted-request-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.wanted-request-input {
  flex: 1;
  min-width: 180px;
  height: 38px;
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  outline: none;
}

.wanted-request-confirm {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* --- VISTA DE BÚSQUEDA AGRUPADA EN SECCIONES EXPANDIBLES --- */
.search-grouped-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 2px 28px 2px;
}

.format-search-section {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
}

.format-search-section-header {
  background: var(--bg-stage);
  border-bottom: 2px solid var(--border-ink);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.format-search-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.format-search-section-badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--ink);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 2px;
}

.format-search-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 16px;
}

.expand-section-bar {
  padding: 10px 16px 14px 16px;
  background: #FAFAFA;
  border-top: 1px dashed var(--border-ink);
  display: flex;
  justify-content: center;
}

.btn-expand-section {
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-expand-section:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}


/* ==========================================================================
   VISTAS DE CONTENIDO Y MOTOR DE ANIMACIONES INMERSIVAS
   ========================================================================== */
.view-content-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 36px 44px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  z-index: 1;
}

.view-content-pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.view-content-pane.anim-entering {
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.view-content-pane.anim-leaving {
  visibility: visible;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   1. ANIMACIONES DIRECCIONALES SEGÚN SENTIDO DE NAVEGACIÓN
   -------------------------------------------------------------------------- */

/* Avance hacia adelante (Forward: Inicio -> Sala, Inicio -> Local, Sala -> Local) */
.anim-entering.enter-dir-forward {
  animation: paneEnterForward 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-leaving.leave-dir-forward {
  animation: paneLeaveForward 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneEnterForward {
  0% {
    opacity: 0;
    transform: translate3d(55px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes paneLeaveForward {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-45px, 0, 0) scale(0.97);
  }
}

/* Retroceso hacia atrás (Backward: Local -> Sala, Local -> Inicio, Sala -> Inicio) */
.anim-entering.enter-dir-backward {
  animation: paneEnterBackward 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-leaving.leave-dir-backward {
  animation: paneLeaveBackward 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneEnterBackward {
  0% {
    opacity: 0;
    transform: translate3d(-55px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes paneLeaveBackward {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(45px, 0, 0) scale(0.97);
  }
}

/* --------------------------------------------------------------------------
   2. COREOGRAFÍA TEMÁTICA: ENTRADA A SALA DE ENSAYO
   Sensación: Cortina acústica, faders de consola subiendo y golpe de redoblante
   -------------------------------------------------------------------------- */
.anim-entering.enter-to-studio {
  animation: paneStudioAcousticEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneStudioAcousticEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.anim-entering.enter-to-studio .studio-title-img {
  animation: studioTitlePunch 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes studioTitlePunch {
  0% {
    opacity: 0;
    /* Entra desde arriba: si entrara desde la izquierda, la ilustración
       centrada se vería descolgada del eje mientras dura la animación. */
    transform: translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bandas: chips entrando escalonadamente */
.anim-entering.enter-to-studio .studio-band-chip:nth-child(1) {
  animation: studioFaderRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
.anim-entering.enter-to-studio .studio-band-chip:nth-child(2) {
  animation: studioFaderRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.13s both;
}
.anim-entering.enter-to-studio .studio-band-chip:nth-child(3) {
  animation: studioFaderRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.anim-entering.enter-to-studio .studio-band-chip:nth-child(4) {
  animation: studioFaderRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.23s both;
}
.anim-entering.enter-to-studio .studio-band-chip:nth-child(5) {
  animation: studioFaderRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

@keyframes studioFaderRise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-entering.enter-to-studio .studio-cta-panel {
  animation: studioRatePop 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

@keyframes studioRatePop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pagliacci en la batería: entrada rítmica */
.anim-entering.enter-to-studio .studio-character-img {
  animation: drummerSnareHit 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}

@keyframes drummerSnareHit {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(35px) rotate(-3deg);
  }
  70% {
    transform: scale(1.03) translateY(-4px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
  }
}

/* --------------------------------------------------------------------------
   3. COREOGRAFÍA TEMÁTICA: ENTRADA A EL LOCAL
   Sensación: Cartel marquesina colgante cayendo y lluvia suave de vinilos
   -------------------------------------------------------------------------- */
.anim-entering.enter-to-local {
  animation: paneLocalStorefrontEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneLocalStorefrontEnter {
  0% {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Marquesina de tienda cayendo con peso físico */
.anim-entering.enter-to-local .storefront-masthead {
  animation: storefrontMarqueeStamp 0.46s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes storefrontMarqueeStamp {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.96);
  }
  75% {
    transform: translateY(2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3 Pilares de mostrador */
.anim-entering.enter-to-local .gear-card:nth-child(1) {
  animation: localCardSlide 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both;
}
.anim-entering.enter-to-local .gear-card:nth-child(2) {
  animation: localCardSlide 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.anim-entering.enter-to-local .gear-card:nth-child(3) {
  animation: localCardSlide 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@keyframes localCardSlide {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ilustración Pagliacci bajo la lluvia de discos descendiendo */
.anim-entering.enter-to-local .local-character-img {
  animation: vinylRainDescend 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

@keyframes vinylRainDescend {
  0% {
    opacity: 0;
    transform: translateY(-38px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   3.5 COREOGRAFÍA TEMÁTICA: ENTRADA A ACERCA DE NOSOTROS
   Sensación: telón que se abre, logo con golpe elástico y párrafos que van
   entrando en cascada como si se leyeran uno por uno.
   -------------------------------------------------------------------------- */
.anim-entering.enter-to-about {
  animation: paneAboutCurtainEnter 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneAboutCurtainEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.anim-entering.enter-to-about .about-masthead {
  animation: aboutLogoPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

@keyframes aboutLogoPop {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.anim-entering.enter-to-about .about-copy > * {
  opacity: 0;
  animation: aboutParagraphRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anim-entering.enter-to-about .about-copy > *:nth-child(1) { animation-delay: 0.12s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(2) { animation-delay: 0.17s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(3) { animation-delay: 0.22s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(4) { animation-delay: 0.27s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(5) { animation-delay: 0.32s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(6) { animation-delay: 0.37s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(7) { animation-delay: 0.42s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(8) { animation-delay: 0.47s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(9) { animation-delay: 0.52s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(10) { animation-delay: 0.57s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(11) { animation-delay: 0.62s; }
.anim-entering.enter-to-about .about-copy > *:nth-child(12) { animation-delay: 0.67s; }

@keyframes aboutParagraphRise {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-entering.enter-to-about .about-team-card:nth-child(1) {
  animation: aboutTeamSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.76s both;
}
.anim-entering.enter-to-about .about-team-card:nth-child(2) {
  animation: aboutTeamSlideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.84s both;
}

@keyframes aboutTeamSlideLeft {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes aboutTeamSlideRight {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   4. COREOGRAFÍA TEMÁTICA: RETORNO A INICIO
   Sensación: Vuelta al escenario principal con personaje mirando arriba y globo
   -------------------------------------------------------------------------- */
.anim-entering.enter-to-home {
  animation: paneHomeStageEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneHomeStageEnter {
  0% {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.anim-entering.enter-to-home .hero-header-group {
  animation: homeHeaderDrop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes homeHeaderDrop {
  0% {
    opacity: 0;
    transform: translateY(-22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-entering.enter-to-home .search-wrapper {
  animation: homeSearchPop 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.09s both;
}

@keyframes homeSearchPop {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Entrada del logo Pagliacci abajo de "¿Querés un disco?": pop épico y llamativo al cargar inicio */
.home-screen.is-active .hero-logo-wrap,
.anim-entering.enter-to-home .hero-logo-wrap,
.hero-box.anim-logo-pop .hero-logo-wrap {
  animation: heroLogoEpicPop 0.72s cubic-bezier(0.22, 1.25, 0.36, 1) both;
}

/* Entrada del cuadro cartoon: pop elástico desfasado para lograr narrativa visual homogénea */
.home-screen.is-active .character-speech-bubble,
.anim-entering.enter-to-home .character-speech-bubble,
.hero-box.anim-logo-pop .character-speech-bubble {
  transform-origin: -12px 38px;
  animation: heroSpeechBubblePop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both;
}

/* Pop épico y llamativo del logo con expansión táctil, sombra de tinta y resorte cartoon */
@keyframes heroLogoEpicPop {
  0% {
    opacity: 0;
    transform: scale(0.35) translateY(32px) rotate(-3.5deg);
    filter: drop-shadow(0 0 0 transparent);
  }
  38% {
    opacity: 1;
    transform: scale(1.18) translateY(-10px) rotate(1.8deg);
    filter: drop-shadow(0 6px 14px rgba(17, 20, 24, 0.24));
  }
  64% {
    transform: scale(0.95) translateY(4px) rotate(-0.8deg);
  }
  82% {
    transform: scale(1.03) translateY(-1.5px) rotate(0.3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* Animación en loop continuo MUY sutil del logo Pagliacci: respiración e ingravidez orgánica */
@keyframes heroLogoSubtleLoop {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  35% {
    transform: translateY(-2.8px) scale(1.015);
  }
  70% {
    transform: translateY(0.8px) scale(0.995);
  }
}

/* Pop elástico del cuadro de diálogo con desfasaje natural tipo historieta */
@keyframes heroSpeechBubblePop {
  0% {
    opacity: 0;
    transform: scale(0.2) translate(-24px, 18px) rotate(-6.5deg);
  }
  46% {
    opacity: 1;
    transform: scale(1.08) translate(2px, -3px) rotate(0.4deg);
  }
  72% {
    transform: scale(0.97) translate(-1px, 1px) rotate(-1.7deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0) rotate(-1.2deg);
  }
}

/* --------------------------------------------------------------------------
   5. TRANSICIÓN LATERAL DIRECTA: SALA <-> EL LOCAL
   -------------------------------------------------------------------------- */
/* Sala -> Local: paso lateral hacia la tienda */
.leave-from-studio.leave-to-local {
  animation: paneSlideOutLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.enter-to-local.enter-from-studio {
  animation: paneSlideInRight 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneSlideOutLeft {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(-60px, 0, 0); }
}
@keyframes paneSlideInRight {
  0% { opacity: 0; transform: translate3d(60px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Local -> Sala: paso lateral hacia el fondo acústico */
.leave-from-local.leave-to-studio {
  animation: paneSlideOutRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.enter-to-studio.enter-from-local {
  animation: paneSlideInLeft 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paneSlideOutRight {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(60px, 0, 0); }
}
@keyframes paneSlideInLeft {
  0% { opacity: 0; transform: translate3d(-60px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   6. HOJEO TÁCTIL DE VINILOS AL ENTRAR AL CATÁLOGO
   -------------------------------------------------------------------------- */
.stream-card.crate-flip-enter {
  animation: streamCrateFlip 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--card-idx, 0) * 35ms);
}

@keyframes streamCrateFlip {
  0% {
    opacity: 0;
    transform: translateY(22px) rotateX(10deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}


/* Retroalimentación táctil al hacer clic en los botones de navegación */
.nav-btn:active {
  transform: scale(0.96) translateY(2px);
  box-shadow: 1px 1px 0px #111418;
}

.section-head {
  font-family: var(--font-display);
  font-size: 38px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.section-lead {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 700px;
  margin-bottom: 28px;
}

/* ==========================================================================
   VISTA: ACERCA DE NOSOTROS
   ========================================================================== */
.about-view {
  max-width: 820px;
}

.about-masthead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 30px;
}

.about-logo-img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
}

.about-masthead-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.about-copy p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.about-copy p.about-lede {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

.about-copy p.about-standalone {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--ink);
  text-align: center;
}

.about-copy p.about-closing {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  margin-top: 8px;
}

.about-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0;
}

.about-divider::before,
.about-divider::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--border-ink);
  opacity: 0.35;
}

.about-divider span {
  font-size: 20px;
  color: var(--ink);
}

.about-divider-wide {
  margin: 34px 0;
}
.about-divider-wide::before,
.about-divider-wide::after {
  max-width: 220px;
}

.about-team-section {
  margin-top: 8px;
  margin-bottom: 40px;
}

.about-team-heading {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
  margin-bottom: 18px;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.about-team-card {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.about-team-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard);
}

.about-team-role {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.about-team-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 2px;
}

.about-team-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.about-team-wa-btn {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 12.5px;
  padding: 9px 14px;
}

.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.gear-card {
  background: var(--bg-stage);
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  padding: 20px;
  box-shadow: var(--shadow-hard-sm);
}

.gear-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.gear-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.rate-banner {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.rate-amount {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
}

.rate-sub {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Fila asimétrica de "Sala de Ensayo": lista de equipamiento (más ancha,
   sin cajas repetidas) junto a un panel angosto con precio y acciones, en
   vez de barras apiladas de ancho completo. */
.studio-top-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* En vez de un listado de equipamiento (info que nadie necesita para
   decidir), este espacio muestra bandas reales que ensayan en la sala:
   contenido propio del negocio, no relleno genérico. Reusa /api/bands y
   abre el mismo modal de "Bandas que ensayan acá". */
.studio-bands-strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.studio-bands-strip-heading-static {
  border-bottom: 2px solid var(--border-ink);
  padding-bottom: 10px;
  width: 100%;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink);
}

.studio-bands-strip-heading-img {
  width: min(260px, 100%);
  height: auto;
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-ink);
  filter: grayscale(100%) contrast(1.04);
}

.studio-bands-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.studio-band-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.studio-band-chip-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  background: var(--bg-stage);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.studio-band-chip:hover .studio-band-chip-photo {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--border-ink);
}

.studio-band-chip-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ficha de Papelina, reusa el lenguaje del modal de disponibilidad. La
   foto va en blanco y negro a propósito: es un placeholder a reemplazar
   por el logo real de la banda. */
.papelina-modal-card {
  max-width: 380px;
  align-items: center;
  text-align: center;
}

.papelina-modal-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  filter: grayscale(100%);
  margin-top: 4px;
}

.papelina-modal-genre {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-muted);
}

.papelina-modal-bio {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 300px;
}

/* Marco ilustrado (el mismo cartel de la sala, rotado a horizontal) como
   fondo de la tarjeta de precio. Va como imagen de fondo en un pseudo-
   elemento (no como border-image) para poder aplicarle un drop-shadow
   que sigue el contorno real de la placa (esquinas cortadas) en vez de
   una sombra rectangular que no combina con la forma del PNG. */
.studio-cta-panel {
  position: relative;
  padding: 15% 12%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  z-index: 0;
}

.studio-cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/images/marco-horizontal.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.04) drop-shadow(3px 3px 0px var(--border-ink));
}

.studio-cta-panel .rate-amount {
  font-size: 23px;
}

.studio-cta-panel .rate-sub {
  font-size: 11px;
}

.studio-cta-panel .studio-availability-trigger {
  padding: 7px 12px;
  font-size: 12px;
}

.btn-big-wa.studio-cta-wa-btn {
  text-align: center;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 4px;
}

/* Botón chico que abre el modal de disponibilidad, en vez de una tabla
   gigante siempre visible que empujaba la ilustración fuera de la vista. */
.studio-availability-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-stage);
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.studio-availability-trigger:hover {
  background: #FFFFFF;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

/* Modal de disponibilidad: mismo lenguaje gráfico que el resto de la
   página (tipografía de afiche, bordes duros, sombra dura), pensado como
   una tarjeta por día en vez de una planilla. */
.availability-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.72);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.availability-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.availability-modal-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 8px;
  box-shadow: var(--shadow-hard);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(24px) scale(0.94);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.availability-modal-backdrop.is-open .availability-modal-card {
  transform: translateY(0) scale(1);
}

.availability-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 14px;
}

.availability-modal-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.availability-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
}

.availability-modal-title-block h3 {
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}

.availability-close-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.availability-close-btn:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.availability-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.availability-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.availability-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.availability-nav-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.availability-week-label {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 110px;
  text-align: center;
}

.availability-legend {
  display: flex;
  gap: 8px;
}

.legend-chip {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid var(--border-ink);
}

.legend-chip-free {
  background: #FFFFFF;
  color: var(--ink);
}

.legend-chip-busy {
  background: var(--ink);
  color: #FFFFFF;
}

.availability-hint {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

/* Grilla de tarjetas por día, cada una entrando animada y escalonada
   cuando se abre el modal o se cambia de semana. */
.availability-day-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.availability-day-card {
  background: var(--bg-stage);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  animation: availabilityDayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.availability-day-card:nth-child(1) { animation-delay: 0.02s; }
.availability-day-card:nth-child(2) { animation-delay: 0.06s; }
.availability-day-card:nth-child(3) { animation-delay: 0.10s; }
.availability-day-card:nth-child(4) { animation-delay: 0.14s; }
.availability-day-card:nth-child(5) { animation-delay: 0.18s; }
.availability-day-card:nth-child(6) { animation-delay: 0.22s; }

@keyframes availabilityDayIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.availability-day-head {
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-ink);
}

.availability-day-name {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--ink);
}

.availability-day-date {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.availability-day-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.availability-slot {
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.2px;
}

.availability-slot-free {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.availability-slot-free:hover {
  background: var(--accent-light);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.availability-slot-busy {
  background: var(--ink);
  border: 2px solid var(--ink);
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
  .availability-day-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 400px) {
  .availability-day-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.btn-big-wa {
  background: var(--ink);
  color: #FFFFFF;
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 24px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.12s;
}

.btn-big-wa:hover {
  background: var(--accent);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--ink-muted);
  border-radius: 3px;
}

@media (max-width: 860px) {
  html, body {
    height: auto;
    overflow-y: auto;
  }
  .stage-layout {
    flex-direction: column;
    height: auto;
    padding: 16px;
    gap: 16px;
  }
  aside.floating-sidebar {
    width: 100%;
    min-width: 100%;
  }
  main.main-viewport {
    height: auto;
    min-height: 80vh;
  }
  .home-screen,
  .view-content-pane {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: 80vh;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 24px 16px;
  }
  .home-screen.is-active,
  .home-screen.anim-entering {
    display: flex;
  }
  .view-content-pane.is-active,
  .view-content-pane.anim-entering {
    display: block;
  }
  .hero-question {
    font-size: 32px;
  }
  .hero-logo-type {
    max-width: 320px;
  }
  .hero-box.active-search .hero-header-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-character-wrap {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
  }
  .hero-character-figure {
    margin-left: 0;
  }
  .character-speech-bubble::before,
  .character-speech-bubble::after {
    display: none;
  }
  .character-speech-bubble {
    transform-origin: 50% 0%;
  }
  .hero-character-mira-arriba {
    margin-left: 0;
    width: 160px;
  }
  #viewLocal.is-active {
    overflow-y: auto;
    height: auto;
    padding: 24px 20px;
  }
  .local-bottom-row {
    flex-direction: column;
  }
  .local-character-wrap {
    flex: none;
    margin-top: 24px;
    padding-bottom: 0;
  }
  .local-character-img {
    max-height: 240px;
  }
  .local-map-card {
    flex: none;
    width: 100%;
    max-width: 220px;
  }
  .local-map-frame {
    aspect-ratio: 1 / 1;
  }
  #viewStudio.is-active {
    overflow-y: auto;
    height: auto;
    padding: 24px 20px;
  }
  .studio-top-row {
    grid-template-columns: 1fr;
  }
  .studio-character-wrap {
    flex: none;
    margin-top: 20px;
    padding-bottom: 24px;
  }
  .studio-character-img {
    max-height: 240px;
    max-width: 280px;
  }
}

/* Diseño específico y elegante para la sección El Local */
#viewLocal.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 22px 36px 14px 36px;
}

#viewLocal .storefront-masthead {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#viewLocal .section-lead {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
  max-width: 750px;
}

#viewLocal .gear-grid {
  gap: 12px;
  margin-bottom: 12px;
}

#viewLocal .gear-card {
  padding: 10px 14px;
}

#viewLocal .gear-card h4 {
  font-size: 15px;
  margin-bottom: 3px;
}

#viewLocal .gear-card p {
  font-size: 12px;
  line-height: 1.35;
}

#viewLocal .rate-banner {
  padding: 10px 18px;
  margin-top: 0;
}

#viewLocal .rate-banner h4 {
  font-size: 16px;
}

#viewLocal .rate-banner p {
  font-size: 12px;
}

#viewLocal .btn-big-wa {
  padding: 8px 16px;
  font-size: 13px;
}

.storefront-masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--border-ink);
  padding-bottom: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.storefront-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.storefront-logo-img {
  max-width: 280px;
  height: auto;
  display: block;
}

.storefront-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
}

/* Fila inferior de El Local: personaje a la izquierda, mapa a la derecha */
.local-bottom-row {
  margin-top: 8px;
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 34px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Personaje Pagliacci bajo lluvia de discos en El Local */
.local-character-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  flex: 0 1 42%;
  min-height: 0;
  overflow: hidden;
}

.local-character-img {
  max-height: 100%;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(4px 4px 0px rgba(17, 20, 24, 0.15));
  display: block;
}

/* Mapa de ubicación: mismo lenguaje visual del sitio (marco duro, sombra
   dura), completamente en blanco y negro para que no desentone con la
   paleta grafito, y con toda la superficie clickeable hacia Google Maps.
   Tamaño acotado a propósito para no competir con el personaje. */
.local-map-card {
  position: relative;
  flex: 0 0 auto;
  width: 230px;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: clamp(34px, 5vw, 76px);
  animation: localMapCardEnter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both 0.15s;
}

@keyframes localMapCardEnter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.local-map-card-corner-wrap {
  position: relative;
}

/* Personaje esquinero saliendo de atrás del mapa a la derecha, con dedos apoyados sobre el borde */
.local-map-corner-character {
  --corner-top: 2px;
  --corner-right: clamp(-198px, -15.5vw, -120px);
  --corner-width: clamp(120px, 16.25vw, 208px);
  position: absolute;
  top: var(--corner-top);
  right: var(--corner-right);
  width: var(--corner-width);
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  pointer-events: none;
  z-index: 4;
  animation: cornerCharacterPeep 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.35s;
  transition: transform 0.2s ease;
}

@keyframes cornerCharacterPeep {
  0% {
    opacity: 0;
    transform: translate(25px, 10px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.local-map-card-corner-wrap:hover .local-map-corner-character {
  transform: translate(6px, -2px) scale(1.035);
}

@media (max-width: 768px) {
  .local-map-card {
    margin-right: clamp(18px, 9vw, 42px);
  }

  .local-map-corner-character {
    --corner-top: 2px;
    --corner-right: clamp(-132px, -21vw, -86px);
    --corner-width: clamp(98px, 26vw, 126px);
  }
}

.local-map-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
  background: var(--bg-stage);
}

.local-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(100%) contrast(1.05) brightness(1.02);
}

.local-map-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.local-map-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 7px;
  border-radius: 3px;
  box-shadow: var(--shadow-hard-sm);
  pointer-events: none;
}

.local-map-address {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
}

.local-map-address:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.local-map-pin {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink);
}

.local-map-address-text {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.local-map-address-text strong {
  font-size: 12.5px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Sala de Ensayo contenida en 100vh sin scroll */
#viewStudio.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 22px 38px 12px 38px;
}

#viewStudio .section-head {
  margin-bottom: 4px;
}

/* Título ilustrado de la Sala de Ensayo, reemplaza el título de texto.
   Va centrado horizontalmente, como la bajada que viene abajo, en vez de
   pegado al margen izquierdo. El margen negativo de arriba solo recorta el
   aire interno de la ilustración. */
.studio-title-img {
  display: block;
  max-width: 380px;
  width: 100%;
  height: auto;
  margin: -16px auto 12px;
}

/* Tagline a modo de programa de mano: centrada, con reglas y fleurones,
   en vez de un párrafo suelto pegado al margen izquierdo. */
.studio-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 6px auto 18px;
  padding: 9px 4px;
  border-top: 2px solid var(--border-ink);
  border-bottom: 2px solid var(--border-ink);
}

.studio-tagline-mark {
  flex-shrink: 0;
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
}

#viewStudio .studio-top-row {
  flex-shrink: 0;
}

/* Personaje Pagliacci en la batería en Sala de Ensayo (elástico, grande y sin scroll) */
.studio-character-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.studio-character-img {
  max-height: 100%;
  max-width: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(4px 4px 0px rgba(17, 20, 24, 0.15));
  display: block;
}

/* Filtros rápidos por formato sobrios */
.format-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.format-pill-btn {
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.format-pill-btn:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.format-pill-btn.active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
}

/* Consola de filtros compacta del catálogo (sin sobrecarga visual) */
.catalog-filter-console {
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  box-shadow: 3px 3px 0px var(--border-ink);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-console-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-console-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botón táctil para desplegar filtros avanzados */
.btn-facet-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-stage);
  border: 1.5px solid var(--border-ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-facet-toggle:hover {
  background: #FFFFFF;
  border-color: var(--ink);
}

.btn-facet-toggle.is-open {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

.facet-active-badge {
  background: var(--ink);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1;
}

.btn-facet-toggle.is-open .facet-active-badge {
  background: #FFFFFF;
  color: var(--ink);
}

.facet-toggle-arrow {
  font-size: 10px;
}

/* Barra de tags de filtros activos */
.active-filter-tags-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light);
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.active-filter-tag:hover {
  opacity: 0.85;
}

.active-filter-tag-x {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.7;
}

/* Panel Desplegable de Facetas */
.filter-facet-drawer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

/* Pastillas de orden táctil */
.sort-pills-bar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-stage);
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  padding: 2px 4px;
}

.sort-bar-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  padding: 0 4px 0 2px;
}

.sort-pill-btn {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sort-pill-btn:hover {
  color: var(--ink);
  background: rgba(17, 20, 24, 0.08);
}

.sort-pill-btn.active {
  background: var(--ink);
  color: #FFFFFF;
}

/* Sección de facetas táctiles (Estilo, Década, Origen) */
.filter-facet-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facet-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.facet-label {
  flex-shrink: 0;
  width: 54px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  padding-top: 4px;
}

.facet-chips-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.genre-chip-btn {
  background: var(--bg-stage);
  border: 1.5px solid var(--border-ink);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.genre-chip-btn:hover {
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--ink);
}

.genre-chip-btn.active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  box-shadow: 2px 2px 0px rgba(17, 20, 24, 0.4);
}

.genre-chip-more {
  background: transparent;
  border: 1.5px dashed var(--border-ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.genre-chip-more:hover {
  background: var(--bg-stage);
  border-style: solid;
}

.btn-reset-filters {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.12s;
}

.btn-reset-filters:hover {
  color: var(--ink);
}

/* Modal de Detalle de Disco — vidriera de producto: portada a la izquierda
   con marco elaborado, ficha a la derecha con el precio como protagonista. */
.record-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.7);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
}

.record-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Doble anillo (blanco + tinta) por fuera del borde: efecto "marco de
   certificado" en vez de un simple recuadro. */
.record-modal-card {
  position: relative;
  background: var(--bg-panel);
  border: 3px solid var(--border-ink);
  border-radius: 8px;
  box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 8px var(--border-ink), 10px 10px 0px rgba(17, 20, 24, 0.25);
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 38px 32px 30px 32px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: start;
  transform: scale(0.9) translateY(30px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.record-modal-backdrop.is-open .record-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Marquesina de picos arriba del marco, mismo recurso que la vidriera de
   tasación: rompe la esquina recta y le da aire de vitrina. */
.record-modal-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -3px;
  right: -3px;
  height: 20px;
  background-image: radial-gradient(circle at 10px 10px, var(--ink) 9px, transparent 9.5px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: 8px 0;
  pointer-events: none;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s;
  z-index: 2;
}

.modal-close-btn:hover {
  background: var(--accent);
  transform: rotate(90deg);
}

@media (max-width: 700px) {
  .record-modal-card {
    grid-template-columns: 1fr;
    padding: 34px 22px 24px 22px;
  }
}

/* Columna de portada: la funda con un disco asomando detrás, como si se
   estuviera sacando de adentro. */
.modal-cover-col {
  display: flex;
  justify-content: center;
}

.modal-cover-frame {
  position: relative;
  width: 100%;
  max-width: 250px;
}

.modal-cover-frame::before {
  content: '';
  position: absolute;
  top: 6%;
  right: -10px;
  width: 92%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, #34383f 0px, #34383f 2px, #1a1d21 3px, #1a1d21 4px),
    radial-gradient(circle at center, #46484d 0%, #1a1d21 70%);
  background-blend-mode: overlay;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  z-index: 0;
}

.modal-cover-img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 2px solid var(--border-ink);
  border-radius: 3px;
  background: var(--bg-stage);
  box-shadow: var(--shadow-hard-sm);
}

.modal-vinyl-seal {
  position: absolute;
  z-index: 3;
  right: clamp(-10px, -1.4vw, -4px);
  bottom: clamp(-12px, -1.6vw, -6px);
  width: clamp(58px, 7vw, 82px);
  height: auto;
  display: none;
  filter: grayscale(100%) contrast(1.06);
  opacity: 0.78;
  pointer-events: none;
  transform: rotate(-8deg);
}

.modal-vinyl-seal.is-visible {
  display: block;
}

.modal-info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.modal-item-kicker {
  font-weight: 800;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-title-big {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.08;
  color: var(--ink);
  margin-top: 2px;
}

.modal-artist {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* El precio, protagonista: mucho más grande, con el mismo lenguaje de
   "ficha estampada" que el resto del sitio, con un leve giro a mano alzada. */
.modal-price-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--ink);
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: var(--shadow-hard);
  line-height: 1;
  transform: rotate(-1.5deg);
  margin: 16px 0 18px 0;
}

.modal-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.modal-spec-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-stage);
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  padding: 8px 10px;
}

.modal-spec-chip .spec-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.modal-spec-chip strong {
  font-size: 13px;
  color: var(--ink);
}

.modal-notes-card {
  display: none;
  flex-direction: column;
  gap: 3px;
  background: var(--accent-light);
  border-left: 3px solid var(--border-ink);
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 16px;
}

.modal-notes-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.modal-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--bg-tint);
  margin-top: auto;
}

.modal-wa-btn {
  width: 100%;
  text-align: center;
  font-size: 16px;
  padding: 14px 18px;
}

/* Fila de "compartir con alguien": distinta del botón de compra, con
   íconos chicos y consistentes en vez de un link de texto subrayado. */
.modal-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-share-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
}

.modal-share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-share-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.modal-share-icon-btn svg {
  width: 16px;
  height: 16px;
}

.modal-share-icon-btn:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.modal-share-icon-btn.is-copied {
  background: var(--accent);
  color: var(--ink);
}

/* Entrada escalonada de cada bloque de la ficha: no todo aparece de golpe. */
@keyframes modalItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.record-modal-backdrop.is-open .modal-cover-col { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; }
.record-modal-backdrop.is-open .modal-item-kicker { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.1s; }
.record-modal-backdrop.is-open .modal-title-big { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.14s; }
.record-modal-backdrop.is-open .modal-artist { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.18s; }
.record-modal-backdrop.is-open .modal-price-tag { animation: modalItemIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.22s; }
.record-modal-backdrop.is-open .modal-specs-grid { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.28s; }
.record-modal-backdrop.is-open .modal-notes-card { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.32s; }
.record-modal-backdrop.is-open .modal-actions-row { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.36s; }
.record-modal-backdrop.is-open .modal-related-wrap { animation: modalItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.4s; }

/* "También te puede interesar": discos parecidos, en tira horizontal. */
.modal-related-wrap {
  display: none;
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 2px solid var(--bg-tint);
}

.modal-related-heading {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.modal-related-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.modal-related-card {
  flex: 0 0 108px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.modal-related-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--border-ink);
  border-radius: 3px;
  background: var(--bg-stage);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.modal-related-card:hover .modal-related-cover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.modal-related-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modal-related-composer {
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   BANDAS QUE ENSAYAN ACÁ — tarjetas dentro del modal (reusa
   .availability-modal-backdrop / .availability-modal-card)
   -------------------------------------------------------------------------- */

.bands-modal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
}

.band-card {
  display: flex;
  gap: 14px;
  background: var(--bg-stage);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 12px;
  opacity: 0;
  transform: translateY(14px);
  animation: availabilityDayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.band-card-photo {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.band-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.band-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ink);
}

.band-card-genre {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
}

.band-card-bio {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.band-card-audio {
  width: 100%;
  height: 32px;
  margin-top: 2px;
}

.band-card-links {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.band-card-links a {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   NOVEDADES — disco destacado, agenda, avisos del local e ingresos por semana
   -------------------------------------------------------------------------- */

.blog-view {
  max-width: 1060px;
}

/* Dos columnas: los ingresos ocupan el ancho grande y al costado va la columna
   angosta (fechas y avisos), para cortar la fila de bloques todos iguales. */
.blog-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  position: relative;
}

.blog-main {
  min-width: 0;
  position: relative;
}

.blog-side {
  min-width: 0;
  position: relative;
  z-index: 10;
}

.blog-side .blog-block-title {
  font-size: 17px;
}

.blog-side .blog-post {
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  position: relative;
  z-index: 10;
  background: var(--bg-panel, #FDFBF7);
}

.blog-side .blog-post-image {
  width: 100%;
  height: 150px;
}

.blog-side .blog-post-title {
  font-size: 18px;
}

.blog-side .blog-post-text {
  font-size: 13.5px;
}

.blog-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-muted);
}

.blog-block {
  margin-top: 34px;
}

.blog-block-title {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  padding-bottom: 8px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--border-ink);
}

/* Disco destacado ---------------------------------------------------------- */

.blog-featured {
  display: flex;
  gap: 24px;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 8px;
  box-shadow: var(--shadow-hard);
  padding: 20px;
  animation: availabilityDayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.blog-featured-cover {
  width: 230px;
  height: 230px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  background: var(--bg-stage);
}

.blog-featured-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.blog-featured-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}

.blog-featured-composer {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.blog-featured-performers {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.blog-featured-meta {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 2px;
}

.blog-featured-notes {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  border-left: 2px solid var(--accent-border);
  padding-left: 10px;
  margin-top: 4px;
}

.blog-featured-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}

.blog-featured-price {
  --price-tag-x: -6px;
  --price-tag-y: -50%;
  --price-tag-w: 159px;
  --price-tag-text-x: 56px;
  --price-tag-text-r: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 126px;
  min-height: 46px;
  padding: 8px var(--price-tag-text-r) 7px var(--price-tag-text-x);
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ink);
  line-height: 1;
  transform: none;
  isolation: isolate;
}

.blog-featured-price::before {
  content: '';
  position: absolute;
  left: var(--price-tag-x);
  top: 50%;
  width: var(--price-tag-w);
  aspect-ratio: 1600 / 1024;
  z-index: -1;
  background-image: url('/images/pagliaccipricetag.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.92;
  transform: translateY(var(--price-tag-y));
}

.price-tag-tuner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 260px;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  color: var(--ink);
}

.price-tag-tuner[data-place="tl"] {
  left: 18px;
  top: 18px;
  right: auto;
  bottom: auto;
}

.price-tag-tuner[data-place="tr"] {
  right: 18px;
  top: 18px;
  left: auto;
  bottom: auto;
}

.price-tag-tuner[data-place="bl"] {
  left: 18px;
  bottom: 18px;
  right: auto;
  top: auto;
}

.price-tag-tuner:not([data-place]) {
  left: auto;
  top: auto;
}

.price-tag-tuner[data-place="br"] {
  right: 18px;
  bottom: 18px;
  left: auto;
  top: auto;
}

.layout-tuner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: move;
  user-select: none;
}

.price-tag-tuner strong {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
}

.layout-tuner-move-buttons {
  display: flex;
  gap: 3px;
}

.layout-tuner-move-buttons button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-ink);
  background: var(--bg-stage);
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.price-tag-tuner small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.25;
}

.price-tag-tuner code {
  font-family: monospace;
}

.price-tag-tuner details {
  border-top: 1px solid rgba(17, 20, 24, 0.12);
  padding-top: 7px;
}

.price-tag-tuner summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.price-tag-tuner label {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.price-tag-tuner input {
  width: 100%;
}

.price-tag-tuner textarea {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  border: 1px solid var(--border-ink);
  font-family: monospace;
  font-size: 11px;
  color: var(--ink);
  background: var(--bg-stage);
  padding: 8px;
}

.blog-featured-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 18px;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  background: var(--bg-stage);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.blog-featured-btn.is-wa {
  background: var(--ink);
  color: #FFFFFF;
}

.blog-featured-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-sm);
}

/* Agenda ------------------------------------------------------------------- */

.blog-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-agenda-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 12px 16px;
}

.blog-agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  background: var(--bg-stage);
}

.blog-agenda-day {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}

.blog-agenda-month {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}

.blog-agenda-body {
  min-width: 0;
}

.blog-agenda-title {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}

.blog-agenda-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Avisos del local --------------------------------------------------------- */

.blog-posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-post {
  display: flex;
  gap: 18px;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 16px;
}

.blog-post-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  background: var(--bg-stage);
}

.blog-post-body {
  min-width: 0;
}

.blog-post-title {
  font-family: var(--font-display);
  font-size: 21px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
  margin: 3px 0 8px;
}

.blog-post-text {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 8px;
}

.blog-post-text:last-child {
  margin-bottom: 0;
}

/* Ingresos agrupados por semana -------------------------------------------- */

.blog-week {
  margin-bottom: 26px;
}

.blog-week-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-week-label {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  color: var(--ink);
}

.blog-week-count,
.blog-week-bands {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.blog-week-bands {
  margin-top: 4px;
}

.blog-week-covers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.blog-week-cover {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 116px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.blog-week-cover img {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border: 2px solid var(--border-ink);
  border-radius: 5px;
  background: var(--bg-stage);
  transition: box-shadow 0.12s ease;
}

.blog-week-cover:hover {
  transform: translate(-2px, -2px);
}

.blog-week-cover:hover img {
  box-shadow: var(--shadow-hard-sm);
}

.blog-week-cover-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-week-cover-sub {
  font-size: 11.5px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-week-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 116px;
  height: 116px;
  border: 2px dashed var(--accent-border);
  border-radius: 5px;
  background: var(--bg-panel);
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.blog-week-more span {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: none;
}

.blog-week-more:hover {
  border-style: solid;
  box-shadow: var(--shadow-hard-sm);
}

/* La semana más reciente es una ficha; las de atrás son renglones chicos, así
   la página se va cerrando hacia abajo en vez de repetir el mismo bloque. */
.blog-week.is-lead {
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-hard-sm);
  padding: 16px;
  margin-bottom: 22px;
}

.blog-week:not(.is-lead) {
  margin-bottom: 16px;
}

.blog-week:not(.is-lead) .blog-week-label {
  font-size: 14px;
  color: var(--ink-soft);
}

.blog-week:not(.is-lead) .blog-week-count,
.blog-week:not(.is-lead) .blog-week-bands {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.blog-week:not(.is-lead) .blog-week-covers {
  gap: 8px;
  margin-top: 10px;
}

.blog-week:not(.is-lead) .blog-week-cover,
.blog-week:not(.is-lead) .blog-week-cover img,
.blog-week:not(.is-lead) .blog-week-more {
  width: 64px;
  height: 64px;
}

.blog-week:not(.is-lead) .blog-week-more {
  font-size: 13px;
}

.blog-week:not(.is-lead) .blog-week-more span {
  display: none;
}

/* Cierre: lo más viejo no se dibuja, se cuenta en un renglón. */
.blog-week-tail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 2px solid var(--border-ink);
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.blog-week-more.is-inline {
  flex-direction: row;
  width: auto;
  height: auto;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

@media (max-width: 900px) {
  .blog-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* En pantalla angosta primero lo que pasa esta semana, después el archivo. */
  .blog-side {
    order: -1;
  }
}

@media (max-width: 720px) {
  .blog-featured,
  .blog-post {
    flex-direction: column;
  }

  .blog-featured-cover,
  .blog-post-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* --------------------------------------------------------------------------
   RESEÑAS / TESTIMONIOS — dentro de "El Local"
   -------------------------------------------------------------------------- */

.testimonials-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.testimonial-card {
  flex: 0 0 220px;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testimonial-stars {
  color: #D9A02B;
  font-size: 14px;
  letter-spacing: 1px;
}

.testimonial-text {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  font-style: italic;
}

.testimonial-author {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
}

/* Crédito chico al pie de "Acerca de Nosotros" — discreto a propósito */
.about-credit {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 20, 24, 0.12);
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
}

.about-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-weight: 700;
  text-decoration: underline;
  margin-left: 4px;
  vertical-align: middle;
}

.about-credit-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.85;
}

/* Papelina Modal: imagen de título */
.papelina-modal-title-img {
  max-width: 180px;
  height: auto;
  display: block;
  margin-top: 2px;
  filter: grayscale(100%);
}

/* Novedades: imagen de título */
.novedades-logo-img {
  max-width: 320px;
  height: auto;
  display: block;
  filter: grayscale(100%);
}

/* --------------------------------------------------------------------------
   Page Loader Inicial con Apertura Teatral de Telón (curtainleft.png)
   -------------------------------------------------------------------------- */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--bg-stage, #ECEFF3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-loader-spinner-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-loader-spinner-wrap.is-fade-out {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

.page-loader-overlay.is-visible .page-loader-spinner-wrap:not(.is-fade-out) {
  animation: pageLoaderEntrance 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.page-loader-overlay.is-visible .page-loader-img {
  animation: pageLoaderVinylSpin 2.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.page-loader-img {
  width: 140px;
  height: 140px;
  max-width: 32vw;
  max-height: 32vw;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(17,20,24,0.4));
}

/* Telones teatrales izquierdo y derecho cruzados (overlap generoso sin franjas laterales) */
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 62%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
  pointer-events: none;
  background-color: transparent;
}

.curtain-left {
  left: 0;
  z-index: 6;
  transform: translateX(0);
  transition: transform 1.1s cubic-bezier(0.25, 1, 0.35, 1);
  box-shadow: 14px 0 32px rgba(17, 20, 24, 0.35);
}

.curtain-right {
  right: 0;
  z-index: 5;
  transform: translateX(0);
  transition: transform 1.1s cubic-bezier(0.25, 1, 0.35, 1);
  box-shadow: -14px 0 32px rgba(17, 20, 24, 0.35);
}

.curtain-panel .curtain-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}

.curtain-panel .curtain-flipped {
  transform: scaleX(-1);
  object-position: right top;
}

/* Estado de apertura del telón teatral */
.page-loader-overlay.is-curtains-opening .curtain-left {
  transform: translateX(-115%);
}

.page-loader-overlay.is-curtains-opening .curtain-right {
  transform: translateX(115%);
}

.page-loader-overlay.is-hiding {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.4s, visibility 0.3s ease 0.4s;
}

@keyframes pageLoaderEntrance {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pageLoaderVinylSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Ilustración Mano con aguja contenida en el bloque principal de Novedades
   -------------------------------------------------------------------------- */
.blog-lead-row-wrap {
  position: relative;
  isolation: isolate;
  margin-bottom: 22px;
  padding-right: 0;
  overflow: visible;
}

.blog-lead-row-wrap .blog-week.is-lead {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 0;
}

.blog-mano-aguja-hero {
  position: absolute;
  z-index: 1;
  right: 14px;
  top: 14px;
  width: 80px;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.15;
  pointer-events: none;
  display: block;
}

@media (max-width: 800px) {
  .blog-lead-row-wrap {
    padding-right: 0;
    padding-bottom: 0;
  }

  .blog-mano-aguja-hero {
    right: 8px;
    top: 8px;
    bottom: auto;
    width: 60px;
    max-height: 70px;
    opacity: 0.12;
  }
}

/* --------------------------------------------------------------------------
   Separador ornamental y contención 100vh sin scroll de "Acerca de Nosotros"
   -------------------------------------------------------------------------- */
.about-separator-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto;
  width: 100%;
  max-width: 580px;
}

.about-separator-img {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  filter: grayscale(100%);
}

@media (min-width: 861px) {
  #viewAbout.is-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 24px 44px 16px 44px;
    max-width: 880px;
  }

  #viewAbout .about-masthead {
    margin-bottom: 12px;
    gap: 4px;
  }

  #viewAbout .about-logo-img {
    max-width: 240px;
  }

  #viewAbout .about-copy {
    gap: 8px;
    margin-bottom: 4px;
  }

  #viewAbout .about-copy p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  #viewAbout .about-copy p.about-lede {
    font-size: 16px;
    line-height: 1.35;
  }

  #viewAbout .about-team-section {
    margin-top: 4px;
    margin-bottom: 8px;
  }

  #viewAbout .about-team-heading {
    font-size: 20px;
    margin-top: 2px;
    margin-bottom: 10px;
  }

  #viewAbout .about-team-grid {
    gap: 14px;
  }

  #viewAbout .about-team-card {
    padding: 14px 16px;
    gap: 4px;
  }

  #viewAbout .about-team-name {
    font-size: 18px;
  }

  #viewAbout .about-team-card p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  #viewAbout .about-team-wa-btn {
    margin-top: 4px;
    padding: 7px 12px;
    font-size: 11.5px;
  }

  #viewAbout .about-credit {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   Badge ornamental pagliacci3tipos (Vinilo, Cassette y CD) en barra de catálogo
   -------------------------------------------------------------------------- */
.drawer-formats-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.drawer-formats-img {
  width: 48px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.82;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.drawer-formats-badge:hover .drawer-formats-img {
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 680px) {
  .drawer-formats-badge {
    display: none;
  }
}

/* --- Etiquetas Físicas Imprimibles de Pagliacci --- */
.print-tag-card {
  background: #FFFFFF;
  border: 2px solid #111418;
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 2px 0px #111418;
  color: #111418;
  font-family: var(--font-body);
  min-height: 120px;
}
.print-tag-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #111418;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.print-tag-brand {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.print-tag-code {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
}
.print-tag-body {
  flex: 1;
  margin-bottom: 8px;
}
.print-tag-composer {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.print-tag-title {
  font-size: 13px;
  font-style: italic;
  color: #242E3B;
  margin-top: 2px;
  line-height: 1.2;
}
.print-tag-details {
  font-size: 11px;
  font-weight: 600;
  color: #555E6C;
  margin-top: 4px;
}
.print-tag-location {
  font-size: 11px;
  color: #555E6C;
  margin-top: 2px;
}
.print-tag-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #111418;
  padding-top: 6px;
  margin-top: 4px;
}
.print-tag-label {
  font-size: 11px;
  font-weight: 700;
  color: #38404B;
}
.print-tag-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: #111418;
}

@media print {
  @page {
    margin: 8mm;
    size: A4 portrait;
  }
  body.is-printing-tags * {
    visibility: hidden !important;
  }
  body.is-printing-tags #printableTagsArea,
  body.is-printing-tags #printableTagsArea * {
    visibility: visible !important;
  }
  body.is-printing-tags #printableTagsArea {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8mm !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.is-printing-tags .print-tag-card {
    border: 1.5pt solid #111418 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 5mm 6mm !important;
    min-height: 48mm !important;
  }
}

/* --- Botón "Disco al azar" & Desplegable Visual de Bateas --- */
.btn-surprise-record {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-surprise-record:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-bateas-toggle.active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

.bateas-visual-drawer {
  background: #FFFFFF;
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  padding: 16px 18px 20px 18px;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(17, 20, 24, 0.06);
  animation: fadeInDrawer 0.15s ease-out;
}

.bateas-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.bateas-drawer-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.bateas-drawer-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.btn-bateas-drawer-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.1s ease;
}

.btn-bateas-drawer-close:hover {
  color: var(--ink);
  background: var(--bg-stage);
}

.bateas-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.batea-visual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.batea-visual-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(17, 20, 24, 0.08);
}

.batea-visual-card.active {
  border-color: var(--accent);
  background: var(--bg-stage);
}

.batea-visual-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  z-index: 3;
}

.batea-card-media {
  position: relative;
  width: 100%;
  height: 150px;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.batea-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.batea-visual-card:hover .batea-card-cover {
  transform: scale(1.03);
}

.batea-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(17, 20, 24, 0.24) 100%);
  pointer-events: none;
}

.batea-card-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(17, 20, 24, 0.85);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.batea-card-body {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.batea-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.batea-card-sub {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.batea-card-artists {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tracklist en la Ficha Modal */
.modal-tracklist-card {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg-stage);
  border: 1px solid var(--border-light);
  border-radius: 4px;
}

.modal-tracklist-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.modal-tracklist-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.modal-tracklist-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.modal-tracklist-content {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-line;
  padding-right: 4px;
}

.modal-tracklist-content::-webkit-scrollbar {
  width: 4px;
}

.modal-tracklist-content::-webkit-scrollbar-thumb {
  background: var(--border-ink);
  border-radius: 2px;
}

/* ==========================================================================
   CARRITO DE COMPRAS (PEDIDOS POR WHATSAPP)
   ========================================================================== */

.nav-cart-badge {
  display: inline-block;
  margin-left: auto;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.2;
}

.stream-card-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-card-cart {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--border-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-card-cart:hover {
  background: var(--bg-tint);
}

.btn-card-cart.in-cart {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.btn-modal-cart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-panel);
  color: var(--ink);
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-modal-cart:hover {
  background: var(--bg-tint);
}

.btn-modal-cart.in-cart {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.cart-floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #FFFFFF;
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard);
  padding: 11px 18px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, box-shadow 0.18s ease;
  user-select: none;
}

.cart-floating-btn:hover {
  transform: translateY(-2px);
  background: var(--accent);
  box-shadow: 6px 6px 0px var(--border-ink);
}

.cart-floating-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-hard-sm);
}

.cart-floating-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-floating-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 10px;
  border: 1.5px solid var(--border-ink);
  line-height: 1.1;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.cart-floating-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.cart-floating-total {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.65);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cart-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-card {
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--bg-panel);
  border-left: 3px solid var(--border-ink);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-backdrop.is-open .cart-drawer-card {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 2px solid var(--border-ink);
  background: var(--bg-stage);
}

.cart-drawer-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-transform: uppercase;
}

.cart-drawer-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
}

.cart-drawer-close-btn {
  background: transparent;
  border: 1px solid var(--border-ink);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cart-drawer-close-btn:hover {
  background: var(--ink);
  color: #FFFFFF;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-empty-state {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
}

.cart-empty-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.cart-empty-sub {
  font-size: 12px;
  color: var(--ink-muted);
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-stage);
  border: 1px solid #DFE3E8;
  border-radius: 4px;
}

.cart-item-cover {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border-ink);
  flex-shrink: 0;
  background: var(--ink);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.cart-item-artist {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.cart-item-price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.btn-cart-remove {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  transition: color 0.15s;
}

.btn-cart-remove:hover {
  color: #991b1b;
}

.cart-drawer-footer {
  border-top: 2px solid var(--border-ink);
  padding: 16px 20px;
  background: var(--bg-stage);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-drawer-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cart-total-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}

.cart-total-amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.cart-checkout-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.btn-cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard-sm);
  transition: background 0.15s, transform 0.15s;
  cursor: pointer;
}

.btn-cart-checkout:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.btn-cart-clear {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  padding: 4px 0;
  transition: color 0.15s;
}

.btn-cart-clear:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .cart-drawer-card {
    max-width: 100%;
  }
  .cart-floating-btn {
    bottom: 16px;
    right: 16px;
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ==========================================================================
   ESTRUCTURA PRE-RENDERIZADA PARA MOTORES DE BÚSQUEDA (SEO SSR)
   ========================================================================== */

.seo-prerender-card,
.seo-prerender-batea {
  display: block;
  background: var(--bg-panel);
  border: 2px solid var(--border-ink);
  box-shadow: var(--shadow-hard);
  padding: 24px 28px;
  margin: 16px 20px;
  border-radius: 4px;
  max-width: 820px;
}

.seo-breadcrumb-nav {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
  letter-spacing: 0.4px;
}

.seo-breadcrumb-nav a {
  color: var(--ink);
  text-decoration: underline;
}

.seo-card-header {
  margin-bottom: 16px;
}

.seo-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}

.seo-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 4px;
  margin-bottom: 4px;
}

.seo-artist {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.seo-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.5;
}

.seo-specs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-stage);
  padding: 12px 16px;
  border: 1px solid var(--border-ink);
  border-radius: 4px;
  margin-bottom: 20px;
}

.seo-tracklist-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--bg-tint);
}

.seo-tracklist-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 8px;
}

.seo-tracklist-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--ink);
  background: var(--bg-stage);
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #DFE3E8;
}

.seo-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.seo-item-card {
  padding: 12px 14px;
  background: var(--bg-stage);
  border: 1px solid var(--border-ink);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-item-card a {
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
}

.seo-item-card a:hover {
  text-decoration: underline;
}

.seo-item-card span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.seo-cta-row {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--border-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.btn-seo-home {
  display: inline-block;
  align-self: flex-start;
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.15s;
}

.btn-seo-home:hover {
  background: var(--accent);
}

/* ==========================================================================
   TANDA 19: RECIÉN LLEGADOS, VISTOS RECIENTEMENTE Y BÚSQUEDA INSTANTÁNEA
   ========================================================================== */

/* Pastilla 'Recién llegado' en cards del catálogo */
.stream-tag.stream-tag-new {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.quick-batea-btn.quick-batea-new {
  border-color: var(--ink);
  font-weight: 800;
}

.quick-batea-btn.quick-batea-new.active {
  background: var(--ink);
  color: #FFFFFF;
}

/* Sugerencias instantáneas bajo el buscador */
.instant-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(17, 20, 24, 0.16), var(--shadow-hard-sm);
  z-index: 1000;
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
}

.instant-group {
  border-bottom: 1px solid var(--bg-tint);
}

.instant-group:last-child {
  border-bottom: none;
}

.instant-group-heading {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  background: var(--bg-stage);
  padding: 8px 14px;
  border-bottom: 1px solid var(--bg-tint);
}

.instant-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}

.instant-item:hover,
.instant-item:focus-visible {
  background: var(--bg-stage);
  outline: none;
}

.instant-record-cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--border-ink);
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--bg-stage);
}

.instant-record-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.instant-record-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.instant-record-artist {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.instant-record-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.instant-batea-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--ink);
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.instant-batea-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.instant-batea-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.instant-batea-count {
  font-size: 11px;
  color: var(--ink-soft);
}

.instant-arrow {
  color: var(--ink-soft);
  font-size: 13px;
  flex-shrink: 0;
}

.instant-search-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Sección 'Discos que estuviste hojeando' (Vistos recientemente) */
.recently-viewed-section {
  margin-top: 36px;
  margin-bottom: 24px;
  padding: 18px 20px 20px;
  background: #FFFFFF;
  border: 2px solid var(--border-ink);
  border-radius: 4px;
  box-shadow: var(--shadow-hard-sm);
}

.recently-viewed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--border-ink);
  padding-bottom: 8px;
}

.recently-viewed-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  display: block;
}

.recently-viewed-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2px 0 0 0;
  letter-spacing: 0.3px;
}

.btn-clear-recent {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.12s;
  text-decoration: underline;
}

.btn-clear-recent:hover {
  color: var(--ink);
}

.recently-viewed-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.recently-viewed-track::-webkit-scrollbar {
  height: 6px;
}

.recently-viewed-track::-webkit-scrollbar-track {
  background: var(--bg-stage);
  border-radius: 3px;
}

.recently-viewed-track::-webkit-scrollbar-thumb {
  background: var(--ink-soft);
  border-radius: 3px;
}

.recent-card {
  flex: 0 0 148px;
  max-width: 156px;
  background: var(--bg-stage);
  border: 1.5px solid var(--border-ink);
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.14s, box-shadow 0.14s;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.recent-card:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px var(--border-ink);
}

.recent-cover {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--border-ink);
  border-radius: 2px;
  background: #FFFFFF;
}

.recent-info {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.recent-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.recent-artist {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.recent-price {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 3px;
}