/* =====================================================================
   SITIO EN PÁGINAS — sistema visual
   ---------------------------------------------------------------------
   Páginas: bienvenida (/), catálogo (/catalogo/), discos (/discos/) y cada
   disco (/discos/<slug>/), licencia, contacto y ficha de beat.
   Cada disco lleva un color de acento propio (--accent) sacado de su
   portada. Sin gótica: titulares en Archivo, texto en Manrope y datos en
   JetBrains Mono (todas OFL 1.1).
   Capa cargada después de site.css; quitarla revierte el diseño.
   ===================================================================== */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono quedo sin uso al unificar la tipografia en Manrope, y con el
   tambien el token --font-mono: cero reglas lo referenciaban. */

:root {
  --bg: #0a0806;
  --bg-deep: #050403;
  --surface: #14100d;
  --surface-2: #1c1613;
  --surface-3: #272019;
  --line: rgba(226, 208, 176, .10);
  --line-strong: rgba(226, 208, 176, .22);
  --hairline: 1px solid rgba(226, 208, 176, .09);
  --hairline-strong: 1px solid rgba(226, 208, 176, .18);
  --shadow-soft: 0 14px 30px -22px rgba(0, 0, 0, .95);
  --shadow: 0 24px 50px -28px rgba(0, 0, 0, .98);
  --gloss-top: inset 0 0 0 rgba(0, 0, 0, 0);
  --gloss-soft: inset 0 0 0 rgba(0, 0, 0, 0);
  --sheen: none;

  --text: #f1eadd;
  --muted: #a99c88;
  /* El tono anterior (#7d7263) daba 4.35 de contraste y no llegaba al minimo
     AA de 4.5: los textos secundarios costaba leerlos. Este da 5.1. */
  --muted-2: #8e8271;

  --blood: #b21f1a;
  --blood-bright: #d1332a;
  --blood-deep: #4a0d0b;
  --blood-text: #e3574d;
  --blood-line: rgba(209, 51, 42, .42);
  --on-blood: #fdf7f0;

  --forest: #1a1610;
  --forest-2: #241d14;
  --forest-3: #6d5220;
  --forest-text: #d9ac5a;
  --forest-line: rgba(217, 172, 90, .32);

  --accent: #b21f1a;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --header-h: 72px;
  --player-h: 92px;

  /* Una sola familia para todo el sitio. Antes habia dos: Archivo para
     titulares y Manrope para el resto. Manrope es variable y cubre de 200
     a 800, asi que los titulares conservan el 800 que piden y no se aplanan. */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

}

/* ----------------------------------------------------------- base ------ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 450;
  line-height: 1.62;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.025em;
  line-height: 1.05;
}
::selection { background: var(--accent); color: var(--on-blood); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(1280px, 100% - 48px); }
.kicker {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .62rem;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.hero::before, .hero::after, .site-header::after, .btn-primary::after { content: none !important; display: none !important; }
.hero-inner > *, .hero-layout > *, .reveal,
.has-js .beat-card, .has-js .cart-item, .has-js .player,
.catalog.is-animating .beat-grid {
  animation: none !important;
  opacity: 1 !important;
}
.has-js .beat-card { transform: none; }
.scroll-progress { background: var(--accent); height: 2px; }

/* --------------------------------------------------------- cabecera ---- */
.internal-banner {
  background: var(--blood);
  color: var(--on-blood);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .09em;
}
.site-header {
  /* Opaco a proposito: sin desenfoque, un 96% deja ver el texto y los bordes
     que pasan por detras de la cabecera fija al hacer scroll. */
  background: rgb(10, 8, 6);
  border-bottom: var(--hairline);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-inner { height: var(--header-h); gap: 20px; }
.brand { gap: 12px; }
.brand-mark {
  background: var(--blood);
  color: var(--on-blood);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.03em;
}
.brand-logo { height: 42px; width: auto; display: block; }
.main-nav a {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.main-nav a::after { background: var(--accent); height: 2px; }
.header-tools { gap: 10px; align-items: center; }
/* La navegación de escritorio ocupa el hueco entre la marca y las herramientas
   y centra sus enlaces: antes quedaba pegada al logo y dejaba todo el aire a
   la derecha. */
@media (min-width: 1081px) {
  .main-nav { flex: 1; justify-content: center; margin-left: 0; }
  .header-tools { margin-left: 0; }
}
.index-btn, .menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.index-btn svg, .menu-btn svg { width: 16px; height: 16px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .index-btn:hover, .menu-btn:hover { border-color: var(--accent); color: var(--text); background: var(--surface); }
}
.menu-btn { display: none; }
/* El botón de menú aparece desde 1080 px, pero las reglas que alternan las
   rayitas y la X vivían dentro del bloque móvil (<=820). Entre 821 y 1080 se
   veían los dos iconos a la vez. Estas reglas son globales para que el estado
   cerrado/abierto sea correcto en todo el rango en que el botón existe. */
.menu-btn .icon-close { display: none; }
.menu-btn.is-open .icon-burger { display: none; }
.menu-btn.is-open .icon-close { display: block; }
.lang { border: var(--hairline); border-radius: var(--radius); background: var(--surface); }
.lang button { font-family: var(--font); font-size: .66rem; letter-spacing: .08em; }
.lang button.is-active { background: var(--accent); color: var(--on-blood); }
.tool-btn, .cart-btn {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 600;
}@media (hover: hover) and (pointer: fine) {

  .tool-btn:hover, .cart-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
}
.cart-count { background: var(--blood); color: var(--on-blood); font-family: var(--font); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 24px 22px;
  background: var(--bg-deep);
  border-bottom: var(--hairline-strong);
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 1);
  /* Flota SOBRE el contenido: no lo empuja hacia abajo. */
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 88;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .24s var(--ease), transform .3s cubic-bezier(.22, .85, .25, 1);
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a,
.mobile-nav button {
  display: block;
  width: 100%;
  padding: 13px 4px;
  border: 0;
  border-bottom: var(--hairline);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {

  .mobile-nav a:hover,
  .mobile-nav button:hover { color: var(--accent); }
}
/* Selector de idioma: menudo, en linea y centrado con el resto del menu. */
.mobile-nav-lang {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: auto;
  padding: 18px 4px 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  justify-content: center;
  align-items: center;
}
.mobile-nav-lang button {
  display: inline-flex; align-items: center; justify-content: center;
  /* 38x28 quedaba por debajo del minimo tactil comodo (44). Al agrandarlo a
     44x40 el pulgar acierta y la pastilla gana una proporcion mas redonda. */
  width: 44px; min-width: 44px; height: 40px; padding: 0;
  border: var(--hairline); border-radius: 999px; background: transparent;
  color: var(--muted); font-family: var(--font); font-size: .62rem;
  font-weight: 500; letter-spacing: .06em; line-height: 1; text-align: center;
}
@media (hover: hover) and (pointer: fine) {

  .mobile-nav-lang button:hover { border-color: var(--line-strong); color: var(--text); }
}
.mobile-nav-lang button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-blood);
}

/* ------------------------------------------- asa del reproductor ------ */
/* Rayita para desplegar el reproductor completo. Late con el mismo pulso
   que los botones de compra, para que se entienda que ahi se puede pulsar. */
.player-grip {
  display: block;
  width: 100%;
  /* Va ARRIBA del todo, pegada al filo del reproductor: asi no queda techo
     entre la linea divisoria y la rayita. El aire va debajo, no encima. */
  height: 16px;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.player-grip-bar {
  display: block;
  width: 46px;           /* tamano fijo: solo cambia el color y la luz */
  height: 3px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--accent);
  /* El color y el brillo salen de la portada del beat que suena (--accent).
     El parpadeo lo mueve site.js con tiempos y fuerza al azar: sin animacion
     fija, para que nunca se sienta mecanico. */
  transition: background-color .55s ease, box-shadow .8s ease, opacity .8s ease;
  opacity: .5;   /* en reposo, apagada: la enciende la luz al pasar */
}@media (hover: hover) and (pointer: fine) {

  .player-grip:hover .player-grip-bar { opacity: 1; }
}
.player-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Desplegado: la rayita se queda encendida, sin parpadear. */
.player.is-expanded .player-grip-bar {
  animation: none !important;
  opacity: 1;
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Auras de la vista completa: manchas desenfocadas que bailan despacio, con
   los colores de la portada que suena. Al cambiar de beat NO se reinician: el
   color entra con una transicion larga, asi que cambian de tono sin moverse. */
.auras {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  /* Suficiente para verse sobre el negro, sin tapar el contenido. */
  opacity: .72;
  will-change: transform;
}
/* Las auras se colocan DENTRO de la caja: sus porcentajes se resuelven contra
   el contenedor, y valores negativos las sacaban fuera del recorte. */
.aura-1 {
  width: 78%; aspect-ratio: 1;
  left: 0%; top: 2%;
  background: radial-gradient(closest-side, var(--aura-1, #b21f1a), transparent 70%);
  animation: auraBailar1 26s ease-in-out infinite;
}
.aura-2 {
  width: 72%; aspect-ratio: 1;
  right: 0%; top: 22%;
  background: radial-gradient(closest-side, var(--aura-2, #6d5220), transparent 70%);
  animation: auraBailar2 34s ease-in-out infinite;
}
.aura-3 {
  width: 76%; aspect-ratio: 1;
  left: 6%; bottom: 3%;
  background: radial-gradient(closest-side, var(--aura-3, #4a0d0b), transparent 72%);
  animation: auraBailar3 42s ease-in-out infinite;
}
/* Cada aura con su propio recorrido: asi nunca coinciden ni se sincronizan. */
/* Recorridos amplios: antes eran del 5-8% del tamano con ciclos de 34-52s, es
   decir 2-3 px por segundo. El ojo no lo percibia: parecian estaticas. */
@keyframes auraBailar1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30%      { transform: translate3d(26%, 16%, 0) scale(1.16); }
  65%      { transform: translate3d(-14%, 22%, 0) scale(.9); }
}
@keyframes auraBailar2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(-28%, 18%, 0) scale(1.12); }
  70%      { transform: translate3d(-10%, -16%, 0) scale(.92); }
}
@keyframes auraBailar3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  32%      { transform: translate3d(22%, -20%, 0) scale(.88); }
  68%      { transform: translate3d(-24%, -12%, 0) scale(1.18); }
}
/* El color entra fundido: al cambiar de beat las auras no saltan de tono. */
.aura-1 { transition: background 1.6s ease; }
.aura-2 { transition: background 1.9s ease; }
.aura-3 { transition: background 2.2s ease; }

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

/* El Panel del compositor vive por encima de la pantalla de reproduccion:
   son las herramientas del rapero y no deben quedar tapadas. */
.notes { z-index: 400; }
.notes-overlay { z-index: 380; }

/* Panel completo.
   SIN border-top: el filo de color ya lo dibuja .player-panel::before, y ese
   borde de 1px restaba altura util al contenido y provocaba una barra de
   desplazamiento de un solo pixel. */
.player-panel {
  background: var(--bg-deep);
}
.player-panel[hidden] { display: none; }
/* Pantalla completa: sube desde abajo y tapa todo. La barra de abajo sigue
   debajo, intacta, para que al volver no haya que reconstruir nada. */
.player-panel {
  position: fixed;
  inset: 0;
  /* Por debajo del panel de herramientas (400) y del carrito (420): las
     herramientas del compositor son lo principal y deben verse encima. */
  z-index: 300;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sin barra visible: en una pantalla completa a sangre la barra del sistema
     afea el conjunto. El desplazamiento sigue funcionando si hiciera falta. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .46s cubic-bezier(.22, .85, .25, 1), visibility 0s linear .46s;
  will-change: transform;
}
/* El panel ya no vive dentro del reproductor, asi que el estado se marca en
   <html>: funciona sin importar donde este el panel en el arbol. */
.player-panel::-webkit-scrollbar { width: 0; height: 0; }
/* Con la pantalla completa abierta, la pagina de fondo se bloquea: si no, su
   barra de desplazamiento sigue a la vista en el borde y el dedo mueve el
   catalogo que hay detras. */
html.player-full, html.player-full body { overflow: hidden; }

html.player-full .player-panel {
  transform: translateY(0);
  visibility: visible;
  transition: transform .46s cubic-bezier(.22, .85, .25, 1), visibility 0s linear 0s;
}
/* Entrada ESCALONADA: cada bloque aparece un poco despues que el anterior.
   Es lo que hace que la pantalla se sienta montada y no volcada de golpe. */
.player-panel .player-panel-inner > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s ease, transform .52s cubic-bezier(.22, .85, .25, 1);
}
html.player-full .player-panel .player-panel-inner > * { opacity: 1; transform: translateY(0); }

/* El retardo crece con cada bloque: portada, titulo, datos, transporte, compra. */
html.player-full .player-panel .full-head      { transition-delay: .06s; }
html.player-full .player-panel .full-stage     { transition-delay: .14s; }
html.player-full .player-panel .full-buy       { transition-delay: .30s; }
/* Dentro del escenario, el escalonado sigue. */
.player-panel .full-stage > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s ease, transform .52s cubic-bezier(.22, .85, .25, 1);
}
html.player-full .player-panel .full-stage > * { opacity: 1; transform: translateY(0); }
html.player-full .player-panel .full-stage > .full-art      { transition-delay: .18s; }
html.player-full .player-panel .full-stage > .full-meta     { transition-delay: .26s; }
html.player-full .player-panel .full-stage > .full-specs    { transition-delay: .33s; }
html.player-full .player-panel .full-stage > .full-transport { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .player-panel, .player-panel .player-panel-inner,
  .player-panel .player-panel-inner > *,
  .player-panel .full-stage > * { transition: none; }
}
/* La pantalla se reparte: cabecera y compra fijas arriba y abajo, y la zona
   central (portada + datos + controles) se estira para ocupar lo que sobre.
   Asi no queda nunca un hueco muerto al final. */
/* Rejilla de tres filas: cabecera, cuerpo elastico y pie. Con flexbox el
   gap y el margin-top:auto se repartian el aire de forma impredecible; con
   rejilla, el cuerpo absorbe exactamente lo que sobra. */
.player-panel-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 14px;
  padding: 14px 0 max(12px, env(safe-area-inset-bottom));
  /* 100% de la caja del panel (que es fixed e inset:0, o sea altura definida).
     Con 100dvh el contenido pedia 844px cuando solo habia 843 disponibles. */
  min-height: 100%;
  box-sizing: border-box;
}
/* Portada y datos arriba; el transporte cae al fondo de esta caja. Asi el
   transporte queda junto al pie, como en la referencia. */
.full-stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12px, 2.6vh, 22px);
  min-height: 0;
  padding: 3vh 0 0;
}
.full-stage .full-transport { margin-top: auto; }
/* El aire sobrante se queda entre el titulo y el bloque de abajo: la portada
   sube y el transporte baja, como en la referencia. */
/* El transporte (progreso + controles) es un bloque unico que baja al fondo:
   asi queda junto al borde inferior y el aire sobrante sube al medio. */
.full-transport {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(10px, 2vh, 18px);
}
.full-stage .full-art { margin-top: 0; }

/* --- Cabecera: chevron para salir y acceso a las herramientas --- */
.full-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.full-collapse, .full-tools {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text); cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.full-collapse svg, .full-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }@media (hover: hover) and (pointer: fine) {

  .full-collapse:hover, .full-tools:hover { background: rgba(255, 255, 255, .07); color: var(--accent); }
}
.full-collapse:active, .full-tools:active { transform: scale(.94); }
/* Sin filo de color: esa linea es del reproductor basico y ahi se queda. En
   la pantalla completa el borde superior lo marca el propio fondo. */
.full-head-label { display: none; }

/* --- Portada grande --- */
/* La portada se ajusta a lo que quede libre: nunca desborda ni deja hueco.
   Al cambiar de beat se funde en vez de saltar: se atenua, cambia y vuelve. */
.full-art {
  flex: 0 1 auto;
  /* La referencia deja ~11% de aire a cada lado: ese margen es lo que hace
     que la portada se vea cuidada y no pegada a los bordes. */
  width: min(88%, 43vh);   /* el 88% del contenedor deja el 78.5% del ancho de pantalla */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 1);
}
.full-art img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: opacity .42s ease, transform .5s cubic-bezier(.22, .85, .25, 1);
}
/* Mientras se cambia de pista: la portada se difumina y encoge un pelo.
   El salto de imagen queda tapado por el fundido. */
.full-art.is-switching img { opacity: 0; transform: scale(.965); }

/* --- Titulo y autor --- */
.full-meta { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.full-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* Contenido y elegante, como la referencia: antes era un 65% mas grande. */
  font-size: clamp(1.15rem, 4.8vw, 1.6rem);
  letter-spacing: -.015em;
  line-height: 1.2;
}@media (hover: hover) and (pointer: fine) {

  .full-title:hover { color: var(--accent); }
}
.full-artist {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .56rem;
  color: var(--muted-2);
}
/* El disco, debajo del titulo: enlace discreto al album completo. */
.full-album {
  font-family: var(--font);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  transition: color .3s ease;
}@media (hover: hover) and (pointer: fine) {

  .full-album:hover { color: var(--accent); }
}
/* Un punto separador antes, para que se lea como dato y no como titulo. */
.full-album::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  margin-right: 7px;
  vertical-align: middle;
}

/* --- Datos del beat: cuatro columnas discretas que llenan el centro --- */
.full-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  width: min(88%, 420px);
  margin-inline: auto;
}
.full-specs > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
  padding: 12px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.full-specs dt {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .48rem;
  color: var(--muted-2);
}
.full-specs dd {
  margin: 0;
  font-family: var(--font);
  font-size: .72rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Progreso: linea fina, pulgar redondo y tiempos alineados --- */
/* Progreso y transporte van juntos, como en la referencia: forman un solo
   bloque abajo, y el aire se queda arriba, entre el titulo y este bloque. */
/* El progreso arranca el bloque de abajo. El aire sobrante se reparte entre
   encima de la portada y antes de este bloque, para que el transporte quede
   cerca del borde inferior como en la referencia. */
.full-seek { display: flex; align-items: center; gap: 12px; }

/* Fuera del escritorio, mandos y progreso no deben estirarse por toda la
   pantalla: en una tablet quedaban a 851px de ancho. Se acotan y se centran. */
.full-controls, .full-seek { max-width: 540px; margin-inline: auto; width: 100%; }
.full-seek span {
  font-family: var(--font);
  font-size: .62rem;
  color: var(--muted-2);
  min-width: 36px;
  font-variant-numeric: tabular-nums;
}
.full-seek span:first-child { text-align: left; }
.full-seek span:last-child { text-align: right; }
.full-seek input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  /* Tan fina como la rayita del reproductor: 3px, no 4.
     El degradado pinta la parte reproducida: sin el, la pista era uniforme y
     no se veia el avance. --progreso lo actualiza site.js. */
  height: 3px;
  border-radius: 999px;
  /* El relleno tiene que acabar justo en el CENTRO del pulgar, y el pulgar no
     recorre la pista entera: va de pulgar/2 a ancho-pulgar/2. Un tope en "pct%"
     a secas se queda corto al principio y largo al final -- hasta 5px de
     separacion con un pulgar de 11px. --progreso lo calcula site.js con esta
     misma medida, por eso el tamano vive aqui y no repetido en cada regla. */
  --pulgar: 11px;
  background: linear-gradient(to right,
    var(--accent) var(--progreso, 0%),
    var(--surface-3) var(--progreso, 0%));
  cursor: pointer;
}
.full-seek input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pulgar); height: var(--pulgar);
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  /* Sin anillo permanente: el acento translucido sobre negro se veia como un
     disco marron sucio alrededor del pulgar. El halo aparece solo al pulsar. */
  box-shadow: none;
  transition: box-shadow .28s ease, background .55s ease;
}@media (hover: hover) and (pointer: fine) {

  .full-seek input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
.full-seek input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 26%, transparent);
}
.full-seek input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 0;
}
.full-seek input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--surface-3); }

/* --- Controles: modo, anterior, play, siguiente, wishlist --- */
/* Rejilla de cinco columnas iguales: el play queda centrado exacto y los
   laterales alineados, sin el baile del space-between. */
.full-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 10px 0 0;
}
.full-controls > button { justify-self: center; }
.full-controls button {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: transparent; border: 0; border-radius: 50%;
  /* Tenue, no blanco pleno: los controles acompanan sin competir con la
     portada ni con el play. */
  color: color-mix(in srgb, var(--text) 60%, transparent);
  cursor: pointer;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}@media (hover: hover) and (pointer: fine) {

  /* Al pasar el cursor recuperan presencia. */
  .full-controls button:hover { color: var(--text); }
}
/* Los iconos de control son a TRAZO: fill:none en la base. Antes ponia
   currentColor y, al tener mas especificidad que la regla de fill:none, los
   rellenaba ademas de contornearlos: de ahi los artefactos deformes. */
.full-controls button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }
/* Solo el corazon marcado se rellena. Su especificidad (0,2,1) supera a la
   de la base (0,1,2), asi que gana sin necesidad de !important. */
.full-wish[aria-pressed="true"] svg { fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .full-controls button:hover { color: var(--accent); background: rgba(255, 255, 255, .06); }
}
.full-controls button:active { transform: scale(.92); }

/* Play mas contenido: en la referencia el circulo no domina la fila y el
   icono va pequeno dentro, con aire alrededor. */
.full-play {
  width: 56px !important; height: 56px !important;
  /* Tambien tenue: el acento atenuado, no el color puro. */
  background: color-mix(in srgb, var(--accent) 80%, transparent) !important;
  color: color-mix(in srgb, #0a0806 80%, var(--accent)) !important;
  transition: background .55s ease, transform .3s ease !important;
}
.full-play svg { width: 21px !important; height: 21px !important; }
/* Los laterales, mas ligeros que antes. */
.full-controls button svg { width: 22px; height: 22px; }@media (hover: hover) and (pointer: fine) {

  .full-play:hover { background: color-mix(in srgb, var(--accent) 80%, white) !important; }
}
.full-play .icon-pause, .full-play.is-playing .icon-play { display: none; }
.full-play.is-playing .icon-pause { display: block; }

/* REGLA GENERAL para cualquier boton que lleve los dos iconos.
   Antes esto se listaba boton por boton (.play-btn, .player-play, .full-play,
   .notes-transport...) y .mix-play se quedo fuera: mostraba el triangulo de
   play y las barras de pausa SUPERPUESTOS. Con una regla general no puede
   volver a pasar cuando se agregue otro boton. */
.icon-pause { display: none; }
.is-playing .icon-play { display: none; }
.is-playing .icon-pause { display: block; }

/* --- Boton de modo: un solo boton, tres iconos, fundido entre ellos --- */
.full-mode { position: relative; }
.full-mode svg {
  position: absolute;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, .85, .25, 1);
}
.full-mode[data-mode="shuffle"] .mode-shuffle,
.full-mode[data-mode="one"] .mode-one,
.full-mode[data-mode="order"] .mode-order {
  opacity: 1;
  transform: scale(1);
}
/* El boton de modo se queda neutro, como sus vecinos: antes salia en rojo
   permanente y parecia un error. Solo se enciende cuando el modo NO es el de
   fabrica (en orden), y aun asi con el acento atenuado. */
.full-mode { color: color-mix(in srgb, var(--text) 60%, transparent); }
.full-mode:not([data-mode="order"]) { color: color-mix(in srgb, var(--accent) 62%, var(--text) 38%); }

/* --- Corazon de wishlist --- */
.full-wish svg { transition: fill .35s ease, stroke .35s ease, transform .4s cubic-bezier(.22, .85, .25, 1); }
.full-wish[aria-pressed="true"] { color: var(--accent); }
.full-wish[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.12); }

/* --- Compra --- */
/* La compra se ancla al fondo: el hueco sobrante se queda en medio, que es
   donde respira la portada, y no como un vacio al final. */
/* Franja de compra fina: el transporte debe quedar cerca del borde inferior,
   como en la referencia, sin perder el boton de venta. */
/* Sin el boton de compra, esta franja solo lleva el precio: se centra para
   que se lea como un dato y no como algo a lo que le falta un boton. */
.full-buy {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 14px;
  margin-bottom: 0;
}
/* Si el boton vuelve, space-between y listo. */
.full-buy:has(.full-cart) { justify-content: space-between; }
.full-cart { padding: 10px 18px; font-size: .84rem; }
.full-cart svg { width: 17px; height: 17px; }
.full-price {
  font-family: var(--font);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.full-price::after { content: "\00B7 licencia"; color: var(--muted-2); margin-left: .4em; }
.full-cart {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--accent);
  color: #0a0806;
  border: 0; border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: background .55s ease, transform .3s ease;
}
.full-cart svg { width: 19px; height: 19px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .full-cart:hover { transform: translateY(-2px); }
}
.full-cart:active { transform: scale(.97); }

@media (max-width: 820px) {
  .player-panel-inner { gap: 16px; padding: 12px 0 22px; }
  .full-art { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-grip-bar { animation: none !important; opacity: .9; }
}

/* ------------------------------------------- destello del carrito ------ */
/* Un brillo que recorre el contorno del carrito para llevar la mirada a
   comprar. Se dibuja con un trazo SVG (stroke-dasharray) en vez de un
   degradado: asi el filo es nitido y sigue la forma exacta del icono. */
.cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cart-icon svg { display: block; overflow: visible; }
.cart-solid { fill: currentColor; }
.cart-glow {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* El trazo se dibuja una vez y se apaga: el destello "pasa". */
  stroke-dasharray: 26 200;
  stroke-dashoffset: 26;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px var(--accent));
  animation: kwCartGlint 3.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes kwCartGlint {
  /* pausa */
  0%, 42%   { stroke-dashoffset: 26; opacity: 0; }
  /* el filo aparece y recorre el contorno */
  46%       { opacity: 1; }
  68%       { stroke-dashoffset: -190; opacity: 1; }
  /* se apaga al terminar el recorrido */
  74%, 100% { stroke-dashoffset: -190; opacity: 0; }
}

/* Un latido muy leve del icono, acompasado con el destello. */
.cart-btn .cart-icon { animation: kwCartBeat 3.4s ease-in-out infinite; }
@keyframes kwCartBeat {
  0%, 42%, 74%, 100% { transform: scale(1); }
  56% { transform: scale(1.06); }
}

/* Con el carrito lleno el destello va mas vivo: ya hay algo que comprar. */
/* El brillo SOLO corre cuando hay algo en el carrito.
   kwCartGlint anima stroke-dashoffset sobre un SVG, y esa propiedad no se
   compone en la GPU: cada fotograma obliga a recalcular estilo y repintar el
   icono. Daba igual que el carrito estuviera vacio, que es lo normal: la
   animacion corria igual, en las nueve paginas.

   Medido sobre el catalogo quieto, apagando animaciones por grupos:
       todo encendido          ->  3,9% de CPU y 240 recalculados en 4s
       sin ninguna animacion   ->  0,1% de CPU y   0 recalculados
   Casi todo ese gasto era este brillo.

   Con animation-play-state no se paga nada mientras esta en pausa: el
   navegador no pide ni un fotograma. Y cuando el carrito tiene articulos, el
   brillo vuelve, que es justo cuando significa algo. */
.cart-glow { animation-play-state: paused; }
.cart-count:not([data-empty="true"]) ~ .cart-icon .cart-glow,
.cart-btn.has-items .cart-glow {
  animation-play-state: running;
  animation-duration: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
  .cart-glow { animation: none; opacity: 0; }
  .cart-btn .cart-icon { animation: none; }
}

/* ------------------------------------------- latido de los botones ----- */
/* Pulso de luz sutil y lento en las llamadas a comprar. Una sola animacion
   sobre box-shadow: barata de pintar y no mueve nada de sitio. */
@keyframes kwBuyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209, 51, 42, 0), 0 6px 16px -10px rgba(0, 0, 0, .9); }
  50%      { box-shadow: 0 0 0 4px rgba(209, 51, 42, .13), 0 10px 26px -12px rgba(178, 31, 26, .55); }
}
@keyframes kwBuyPulseSoft {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 0 rgba(209, 51, 42, 0); }
  50%      { box-shadow: inset 0 0 0 1px var(--blood-line), 0 0 0 4px rgba(209, 51, 42, .10); }
}
/* Todos los botones de compra laten. Los que tienen relleno (primary) usan
   resplandor exterior; los de contorno (ghost, outline) laten por dentro,
   que es lo unico que se ve en un boton transparente. */
.buy-cta { /* El latido vive ahora en ::before. Animaba box-shadow, que no */
  /* se compone: 42 botones repintando a la vez. Ver kwBuyHalo al final. */ }
.btn-ghost.buy-cta,
.btn-ghost.buy-cta, .btn-outline.buy-cta { /* idem, via ::before */ }
/* Los botones pequenos laten algo menos: hay muchos en pantalla. */
.btn-sm.buy-cta::before { animation-duration: 4.4s; }
/* El carrito de la cabecera ya lleva el destello: sin pulso, para no cargarlo. */
.cart-btn.buy-cta { animation: none; }@media (hover: hover) and (pointer: fine) {

  /* Con el raton encima o el foco, manda el estado normal del boton. */
  .buy-cta:hover, .buy-cta:focus-visible { animation-play-state: paused; }
}
.buy-cta.is-added { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .buy-cta { animation: none !important; }
}

/* ------------------------------------------------- cambio de idioma ----- */
/* Al traducir, el texto no debe saltar: se desvanece, cambia y vuelve. */
html.is-switching-lang [data-i18n],
html.is-switching-lang [data-i18n-placeholder],
html.is-switching-lang [data-en] {
  opacity: 0;
  transform: translateY(3px);
}
html.is-switching-lang [data-i18n],
html.is-switching-lang [data-i18n-placeholder],
html.is-switching-lang [data-en] {
  transition: opacity .17s ease, transform .17s ease;
}
/* Los titulares tardan un pelo mas: asi el cambio se lee como una oleada. */
html.is-switching-lang .hero-copy h1,
html.is-switching-lang .page-head h1,
html.is-switching-lang .album-head h2,
html.is-switching-lang .section-head h2,
html.is-switching-lang .disco-copy h1 { transition-duration: .22s; }
html.lang-settle [data-i18n],
html.lang-settle [data-i18n-placeholder],
html.lang-settle [data-en] { transition: none; }


@media (prefers-reduced-motion: reduce) {
  html.is-switching-lang [data-i18n],
  html.is-switching-lang [data-i18n-placeholder],
  html.is-switching-lang [data-en] { transition: none; transform: none; }

}

/* ----------------------------------------------------------- héroe ----- */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 72px); border-bottom: var(--hairline); }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.3rem);
  letter-spacing: -.035em;
  line-height: 1.02;
}
.hero-kicker {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .62rem;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.12rem); margin-top: 20px; max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-release {
  position: relative;
  display: block;
  justify-self: center;
  /* 2026-10-04: antes era 80% de la columna. La portada quedaba centrada en su
     renglon, pero sus dos bordes caian 57 px dentro del margen: el borde derecho
     no coincidia con el de la cabecera, las tarjetas de "Para empezar" ni el pie,
     asi que el bloque entero parecia corrido hacia la izquierda. Al ocupar su
     columna, el borde derecho cae exactamente en el margen del contenido (1360
     a 1440) y el izquierdo en el arranque de la columna. En movil sigue mandando
     el 80% de movil.css. */
  width: 100%;
  margin-inline: auto;
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.hero-release img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.hero-release::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.hero-release-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 40px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(5, 4, 3, .94) 55%);
}
.hero-release-tag small {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .56rem;
  color: var(--accent);
}
.hero-release-tag strong { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; }

/* --------------------------------------------------------- secciones --- */
.section { padding: clamp(54px, 6.5vw, 100px) 0; }
.section-alt { background: var(--bg-deep); border-block: var(--hairline); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 30px;
}
/* El reproductor marca el tono con titulos decididos; las secciones del sitio
   se quedaban en 1.6rem y la jerarquia se desplomaba justo donde debia
   sostener la pagina. */
.section-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.link-more {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .6rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

  .link-more:hover { color: var(--text); border-color: var(--accent); }
}
.section-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ----------------------------------------------------- tarjetas disco -- */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.disc-grid-lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.disc-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .disc-card:hover { border-color: var(--accent); transform: translateY(-3px); }
}
.disc-card-art { position: relative; display: block; }
.disc-card-art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.disc-card-art::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.disc-card-numeral {
  position: absolute; left: 12px; top: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(5, 4, 3, .72);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  color: var(--accent);
}
.disc-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.disc-card-body strong {
  font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.02em;
  /* Dos lineas reservadas: sin esto los discos del mismo renglon medían 269,
     298 o 328px segun si el titulo ocupaba una, dos o tres lineas, y la
     rejilla quedaba escalonada.
     El tamano baja de 1.14 a 1.08rem a proposito: a 1.14 "Black Light (Need
     For Speed)" no cabia en dos lineas y el recorte le comia el nombre. A
     1.08 entra justo, asi que se gana la rejilla pareja sin ocultar nada. */
  line-height: 1.2;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.disc-card-body small { font-family: var(--font); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

/* ------------------------------------------------ tarjetas de beat ----- */
.beat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.beat-card:not(.track-row) {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .beat-card:not(.track-row):hover { border-color: var(--accent); transform: translateY(-3px); }
}
.beat-card-visual { position: relative; display: block; }
.beat-card-media { display: block; }
.beat-card-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.beat-card-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 5px 9px;
  background: rgba(5, 4, 3, .78);
  border: var(--hairline);
  border-radius: 6px;
  font-family: var(--font);
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--text);
}
.play-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(5, 4, 3, .6);
  border: 1px solid rgba(241, 234, 221, .35);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .beat-card:not(.track-row):hover .play-btn,
  .beat-card:not(.track-row) .play-btn:focus-visible,
  .play-btn.is-playing { opacity: 1; }
  .play-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-blood); }
}
/* En táctil no hay hover que revele nada, y el botón quedaba en opacity: 0 para
   siempre: invisible pero con su caja de 52px y z-index 3 encima del enlace de
   la portada. En un teléfono, tocar el centro de la carátula arrancaba la
   reproducción en vez de abrir la ficha, y no había nada en pantalla que lo
   anunciara. Peor: al sonar un beat tampoco se veía el botón de pausa, así que
   no había forma de pararlo desde la tarjeta.
   Las filas de los discos (.track-row) y la vista de lista ya llevan opacity: 1
   en su propia regla; esto cubre el mosaico y el carrusel de relacionados. */
@media (hover: none), (pointer: coarse) {
  .beat-card:not(.track-row) .play-btn { opacity: 1; }
}
.play-btn svg { width: 20px; height: 20px; }
.play-btn .icon-pause, .play-btn.is-playing .icon-play { display: none; }
.play-btn.is-playing .icon-pause { display: block; }
.beat-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 6px; }
.beat-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; }
/* Dos lineas reservadas en las TARJETAS. Sin esto, un titulo de una linea daba
   363px de alto y uno de dos lineas 385px, y la rejilla quedaba escalonada.
   Se limita a dos lineas para que un titulo largo no rompa la fila.
   Las filas de los discos NO lo llevan: ahi el titulo va en una sola linea. */
.beat-card:not(.track-row) .beat-card-title {
  line-height: 1.2;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.beat-card-album {
  font-family: var(--font);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex; align-items: center; gap: 8px;
}
.beat-card-track {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.catalog.view-list .beat-card-album-name,
.catalog:not(.is-flat) .beat-card-album-name { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .035em;
  font-size: .58rem;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  color: var(--muted);
}
/* --accent es #b21f1a: sobre el fondo casi negro da 2.96:1 y NO pasa WCAG AA
   para texto pequeno (hace falta 4.5:1). site.css ya usaba --blood-text
   (#e3574d, 5.46:1) y esta capa lo pisaba. Se restaura el color legible. */
.chip-camelot { color: var(--blood-text); border-color: var(--line-strong); }
.chip-genre { display: none; }
.beat-card-duration { display: none; }
.beat-card:not(.track-row) .beat-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px 16px;
  margin-top: auto;
}
.beat-card-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--text);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.beat-card-price small { font-family: var(--font); font-size: .56rem; color: var(--muted-2); letter-spacing: .08em; }
.beat-card-open { display: none; }

/* ------------------------------------------------------- página head --- */
.page-head { padding: clamp(36px, 5vw, 70px) 0 clamp(20px, 3vw, 36px); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.035em; }
.page-lead { color: var(--muted); margin-top: 16px; max-width: 62ch; font-size: clamp(1rem, 1.2vw, 1.08rem); }

/* ---------------------------------------------------------- catálogo --- */
.filters { border-block: var(--hairline); background: var(--bg-deep); position: sticky; top: var(--header-h); z-index: 55; }
.filters-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  padding: 11px 0;
}
.filters-inner .search { flex: 1 1 220px; max-width: 380px; }
.filters-inner .results { flex: 0 0 auto; }
.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.search svg { position: absolute; left: 16px; width: 18px; height: 18px; fill: var(--muted-2); pointer-events: none; }
.search input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: transparent; border: 0; outline: none;
  color: var(--text); font-family: var(--font); font-size: .95rem;
  padding: 13px 16px 13px 46px;
}
.search input::placeholder { color: var(--muted-2); text-transform: none; letter-spacing: 0; font-size: .92rem; }
.search input:focus { width: 100%; background: transparent; border: 0; }
.search:focus-within { border-color: var(--line-strong); }
.filters-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chip-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-filter {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .62rem;
  padding: 6px 11px;
  background: transparent;
  border: var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {

  .chip-filter:hover { border-color: var(--line-strong); color: var(--text); }
}
.chip-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-blood); }
.filters-toggle { display: inline-flex; }
.filters-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.view-toggle { display: flex; border: var(--hairline); border-radius: var(--radius); overflow: hidden; }
.view-toggle button {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted-2);
}
.view-toggle button svg { width: 16px; height: 16px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .view-toggle button:hover { color: var(--text); background: var(--surface-2); }
}
.view-toggle button.is-active { background: var(--surface-3); color: var(--text); }
.filters-body {
  flex: 1 1 100%;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  align-items: end;
  margin-top: 4px;
  padding-top: 14px;
  border-top: var(--hairline);
}
.filters-body.is-open { display: grid; }
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-label {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .56rem;
  color: var(--muted-2);
}
select {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .82rem;
  color: var(--text);
  padding: 9px 10px;
}
.range-pair { display: flex; align-items: center; gap: 10px; }
.range-value { font-family: var(--font); font-size: .64rem; color: var(--muted); }
.results { font-family: var(--font); text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; color: var(--muted-2); }
.catalog-wrap { padding: clamp(34px, 4vw, 60px) 0 80px; }
.album-block { padding: clamp(28px, 3.5vw, 48px) 0; border-top: var(--hairline); }
.album-block:first-child { border-top: 0; padding-top: 0; }
.album-head { display: block; border-bottom: 2px solid var(--accent); padding-bottom: 16px; margin-bottom: 24px; }
.album-head::before { content: none !important; display: none !important; }
.album-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }@media (hover: hover) and (pointer: fine) {

  .album-head h2 a:hover { color: var(--accent); }
}
.album-meta {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .58rem;
  color: var(--muted-2);
  margin-top: 10px;
}
.empty-state {
  text-align: center; color: var(--muted);
  padding: 100px 0; font-family: var(--font);
  letter-spacing: .14em; text-transform: uppercase; font-size: .68rem;
}

/* ----------------------------------------------------------- página disco */
.disco { padding-top: 26px; padding-bottom: 40px; }
.breadcrumb { font-family: var(--font); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; color: var(--muted-2); }@media (hover: hover) and (pointer: fine) {

  .breadcrumb a:hover { color: var(--accent); }
}
.disco-head {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  margin: 26px 0 clamp(30px, 4vw, 52px);
}
.disco-cover {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.disco-copy h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.035em; }
.disco-copy .kicker { color: var(--accent); }
.disco-meta {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .62rem;
  color: var(--muted);
  margin-top: 14px;
}
.disco-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.tracklist { border-top: var(--hairline-strong); }
.track-row {
  display: grid;
  grid-template-columns: 46px 52px minmax(0, 1fr) auto 62px max-content max-content;
  align-items: center;
  column-gap: 16px;
  padding: 12px 10px;
  border-bottom: var(--hairline);
  transition: background .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .track-row:hover { background: var(--surface); }
}
.track-row .play-btn {
  position: static; transform: none; opacity: 1;
  width: 38px; height: 38px;
  background: transparent;
  border: var(--hairline-strong);
}@media (hover: hover) and (pointer: fine) {

  .track-row .play-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-blood); }
}
.track-thumb {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--hairline);
}
.track-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  letter-spacing: -.02em;
}@media (hover: hover) and (pointer: fine) {

  .track-row:hover .track-title { color: var(--accent); }
}
.track-specs, .track-time {
  font-family: var(--font);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.track-price { font-family: var(--font-display); font-weight: 800; font-size: 1rem; white-space: nowrap; }
.track-price small { font-family: var(--font); font-size: .54rem; color: var(--muted-2); }
.disc-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: clamp(34px, 4vw, 56px);
}
.disc-nav-link {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 20px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .disc-nav-link:hover { border-color: var(--accent); }
}
.disc-nav-link.is-next { text-align: right; }
.disc-nav-link.is-disabled { visibility: hidden; }
.disc-nav-link span { font-family: var(--font); text-transform: uppercase; letter-spacing: .14em; font-size: .56rem; color: var(--muted-2); }
.disc-nav-link strong { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

/* ------------------------------------------------------------- pasos --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 2px solid var(--accent); }
.step-num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--accent); line-height: 1; }
.steps h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.steps p { color: var(--muted); font-size: .94rem; }

/* -------------------------------------------------------- legal/contacto */
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.legal-card {
  background: var(--surface);
  border: var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.legal-card h2 { font-size: 1.3rem; margin-bottom: 16px; }
.legal-list { display: flex; flex-direction: column; gap: 12px; }
.legal-list li { position: relative; padding-left: 20px; color: var(--muted); font-size: .94rem; }
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
}
.legal-list-no li::before { background: var(--muted-2); }
.legal-text { color: var(--muted); font-size: .98rem; }
.legal-text a { color: var(--text); border-bottom: 1px solid var(--line-strong); }@media (hover: hover) and (pointer: fine) {

  .legal-text a:hover { color: var(--accent); border-color: var(--accent); }
}

/* ------------------------------------------------------------ botones -- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: var(--radius);
  padding: 13px 22px;
}
.btn-sm { padding: 9px 14px; font-size: .78rem; }
.btn-primary { background: var(--blood); color: var(--on-blood); }@media (hover: hover) and (pointer: fine) {

  .btn-primary:hover { background: var(--blood-bright); }
}
.btn-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); }@media (hover: hover) and (pointer: fine) {

  .btn-outline:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
}
.btn-ghost { background: var(--surface-2); color: var(--text); }@media (hover: hover) and (pointer: fine) {

  .btn-ghost:hover { background: var(--surface-3); }
}
.btn.is-added { background: var(--forest-3); color: #fbf3e2; }

/* ------------------------------------------------------- ficha (dossier) */
/* Pegada a la portada, sin franja.
   Tenia 22px de margen superior, y como .beat-page-media lleva fondo propio
   (rgb(28,22,19)), ese hueco se veia como una franjita de color entre la
   portada y la tabla. Sin margen, la tabla arranca justo donde acaba la
   portada y su propio borde superior hace la separacion. */
.spec-list { margin-top: 0; border-top: var(--hairline-strong); }
.spec-list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  /* Con padding lateral: sin el, el valor mas largo ("Eb Minor/Mib Menor")
     llegaba hasta el borde mismo de la tarjeta y parecia cortado. */
  padding: 10px 16px; border-bottom: var(--hairline);
}
.spec-list dt {
  font-family: var(--font); text-transform: uppercase;
  letter-spacing: .13em; font-size: .58rem; color: var(--muted-2);
}
.spec-list dd {
  font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; letter-spacing: -.01em; text-align: right; margin: 0;
}
.dossier-kicker {
  font-family: var(--font); text-transform: uppercase;
  /* Mismo caso que .chip-camelot: 9,9 px en --accent daban 2,96:1. */
  letter-spacing: .18em; font-size: .62rem; color: var(--blood-text);
  margin-bottom: 14px;
}
.beat-page-info h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.035em; }
.beat-page-info .chips { margin: 18px 0 26px; }
.license-card {
  background: var(--surface);
  border: var(--hairline);
  border-left: 3px solid var(--blood);
  border-radius: var(--radius);
  box-shadow: none;
}
.license-kicker { font-family: var(--font); text-transform: uppercase; letter-spacing: .16em; font-size: .58rem; color: var(--muted-2); }
.license-head :is(h2, h3) { font-size: 1.6rem; }
.license-price { font-family: var(--font-display); }
.license-price span { font-family: var(--font-display); font-size: 2.3rem; font-weight: 900; letter-spacing: -.03em; color: var(--blood-text); }
.license-list li { color: var(--muted); padding-left: 18px; }
.license-list li::before { width: 5px; height: 5px; border-radius: 1px; background: var(--blood); top: .52em; left: 0; }
.license-foot a { color: var(--blood-text); }
.compose-kicker { font-family: var(--font); text-transform: uppercase; letter-spacing: .15em; font-size: .58rem; color: var(--muted-2); }
.beat-nav-title { font-family: var(--font-display); font-weight: 700; text-transform: none; }
.beat-nav-dir { font-family: var(--font); text-transform: uppercase; letter-spacing: .14em; font-size: .58rem; }
.related h2 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); }
.related h2::before { width: 3px; height: .8em; border-radius: 0; margin-right: 10px; vertical-align: -.04em; background: var(--blood); }

/* -------------------------------------------------------- cabina player */
.player {
  background: var(--surface);
  /* Filo superior redondeado. SIN overflow:hidden: el Panel del compositor
     vive aqui dentro y quedaba recortado y fuera de pantalla. */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* La barra se retira mientras la pantalla completa esta abierta: no debe
     quedarse asomando detras. Al cerrar vuelve a subir, con un retardo para
     que lo haga DESPUES de que la pantalla se haya ido. */
  transition: transform .42s cubic-bezier(.22, .85, .25, 1) .26s;
}
html.player-full .player {
  transform: translateY(115%);
  /* Al abrir desaparece de inmediato, sin retardo. */
  transition-delay: 0s;
}
/* Linea divisoria: mas fina y con el color de la portada. */
.player::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  border-radius: 16px 16px 0 0;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  transition: background .55s ease;
}

/* Luz que recorre la linea superior: un punto brillante que viaja de lado a
   lado, con el color de la portada. La posicion la mueve site.js al azar. */
.player-glow {
  position: absolute;
  top: 0;
  left: 0;
  /* Barrido ancho: ilumina un tramo largo de la linea, no un punto suelto. */
  height: 2px;
  width: 46%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 30%, transparent) 25%,
    color-mix(in srgb, var(--accent) 65%, transparent) 50%,
    color-mix(in srgb, var(--accent) 30%, transparent) 75%,
    transparent);
  /* SIN transición de opacidad. site.js escribe la opacidad en cada fotograma
     (el titileo de la luz), y una transición de .8s reinicia la interpolación
     en cada escritura: el valor pintado nunca alcanzaba el calculado, así que
     el parpadeo rápido no se veía y la luz se quedaba por debajo del brillo
     previsto. Es exactamente el fallo que app.js documenta para la línea de
     progreso. La envolvente de la pasada (un seno) ya hace el encendido y el
     apagado suaves, así que no hace falta transición. */
  will-change: transform, opacity;
}
.player-inner {
/* La tercera columna era auto: media solo lo que ocupaba su contenido (260px)
   mientras la primera era 1fr. Con flancos desiguales el bloque central --
   controles y barra de progreso -- caia a la derecha del centro de la
   pantalla: 46px a 1280 y 58px a 1440. A 1024 coincidia por casualidad.
   Con los dos flancos en 1fr el centro cae donde tiene que caer. La derecha
   lleva justify-content: flex-end, asi que su contenido no se mueve: solo
   cambia el ancho de la columna que lo contiene. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.player-track img { width: 56px; height: 56px; border-radius: var(--radius-sm); border: var(--hairline); }
.player-meta a, .player-name { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; letter-spacing: -.02em; }
.player-meta span:not(.player-name) { font-family: var(--font); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
/* `.player-controls .player-play` y no `.player-play` a secas: la base
   `.player-controls button` de site.css mide 34px y tiene más especificidad
   (0,1,1) que un `.player-play` suelto (0,1,0), así que el tamaño de esta capa
   no se aplicaba. El botón principal tiene que ser el más grande del grupo. */
.player-controls .player-play { width: 46px; height: 46px; }
.player-play svg { width: 20px; height: 20px; }
.player-price { font-family: var(--font-display); font-weight: 800; color: var(--blood-text); }
.player-seek span { font-family: var(--font); font-size: .62rem; color: var(--muted-2); }

/* ------------------------------------------- reproductor en movil ----- */
/* En movil mandan la sencillez y el pulgar. Se quita todo lo que ya esta en
   la pagina o en la cabecera: ni precio repetido, ni segundo carrito, ni
   boton de comprar (la ficha y las filas ya lo tienen).
   Queda una barra: portada y titulo arriba; retroceder, play, avanzar y la
   barra de progreso debajo. */
/* En tactil no hay cursor: cada pulsacion responde al instante. Se aplica en
   toda la pantalla completa y en los controles, sin tocar nada del escritorio. */
@media (hover: none), (pointer: coarse) {
  /* Sin transiciones largas al tocar: la respuesta debe sentirse inmediata. */
  .full-controls button { transition: color .12s ease, background .12s ease, transform .12s ease; }
  .full-controls button:active {
    background: rgba(255, 255, 255, .09);
    transform: scale(.9);
  }
  .full-play:active { transform: scale(.94) !important; }
  .full-collapse:active, .full-tools:active {
    background: rgba(255, 255, 255, .1);
    transform: scale(.9);
  }
  .full-cart:active { transform: scale(.96); }
  .full-album:active, .full-title:active { color: var(--accent); }
  .player-controls button:active { transform: scale(.9); }
  .player-play:active { transform: scale(.93); }
  .player-grip:active .player-grip-bar { opacity: 1; }
  /* Los enlaces y botones de la pagina tambien responden al toque. */
  .beat-card:active, .disc-card:active { border-color: var(--accent); }
  .btn-primary:active, .btn-outline:active, .btn-ghost:active { transform: scale(.985); }
  .chip-filter:active, .view-toggle button:active { color: var(--text); background: var(--surface-2); }
  .track-row:active { background: var(--surface); }
  .cart-btn:active, .menu-btn:active, .tool-btn:active, .index-btn:active { border-color: var(--accent); }
}

/* En pantallas anchas la columna unica dejaba la portada pequeña en el centro
   y los controles estirados de borde a borde: feo y nada premium. A partir de
   aqui se pasa a DOS COLUMNAS: portada a la izquierda, datos y mandos a la
   derecha, todo dentro de un ancho de lectura. */
@media (min-width: 900px) {
  .player-panel-inner { max-width: 1080px; margin: 0 auto; }
  .full-head { width: 100%; }

  .full-stage {
    display: grid;
    /* Dos columnas de ancho acotado y el par centrado: asi los mandos no se
       estiran por toda la pantalla ni queda un hueco en medio. */
    grid-template-columns: minmax(0, 400px) minmax(0, 440px);
    grid-template-rows: auto auto auto;
    justify-content: center;
    column-gap: clamp(36px, 5vw, 80px);
    align-items: start;
    align-content: center;
    row-gap: 22px;
    width: 100%;
    padding: 0;
  }
  /* La portada ocupa la columna izquierda entera, de arriba abajo. */
  .full-art {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    margin: 0;
    align-self: center;
  }
  /* A la derecha: titulo, datos y mandos, alineados a la izquierda. */
  .full-meta {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    align-items: flex-start;
    padding-bottom: 0;
  }
  .full-specs {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin-inline: 0;
    padding-bottom: 0;
  }
  .full-transport {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    align-self: start;
  }
  /* La franja de compra acompana el mismo ancho. */
  .full-buy { max-width: 1080px; margin: 0 auto; width: 100%; }

  /* Todos los bloques de la derecha comparten ancho: quedan alineados. */
  .full-controls, .full-seek { max-width: none; }
}

/* MOVIL EN HORIZONTAL: la pantalla es ancha y muy baja, asi que la columna
   unica dejaba la portada en 133px y el contenido desbordaba 69px. Se pasa
   tambien a dos columnas, con la portada a la izquierda. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
  /* Se antepone .player-panel para GANAR al bloque compacto de pantallas
     bajas: 390px de alto tambien entra alli, y pisaba el tamano de la
     portada dejandola en 133px. */
  .player-panel .player-panel-inner { max-width: 900px; margin: 0 auto; padding: 6px 0 8px; row-gap: 8px; }
  .player-panel .full-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-content: center;
    column-gap: clamp(20px, 4vw, 44px);
    row-gap: 10px;
    align-items: start;
    align-content: center;
    width: 100%;
    padding: 0;
  }
  .player-panel .full-head { width: 100%; }
  .player-panel .full-art {
    grid-column: 1; grid-row: 1 / -1;
    height: 58vh; width: 58vh;
    max-width: 100%;
    margin: 0; align-self: center; justify-self: center;
  }
  .player-panel .full-art img { width: 100%; height: 100%; }
  .player-panel .full-meta { grid-column: 2; grid-row: 1; text-align: left; align-items: flex-start; }
  .player-panel .full-specs { grid-column: 2; grid-row: 2; width: 100%; margin-inline: 0; }
  .player-panel .full-transport { grid-column: 2; grid-row: 3; margin-top: 0; align-self: start; }
  .player-panel .full-controls, .player-panel .full-seek { max-width: none; margin-inline: 0; }
  .player-panel .full-buy { max-width: 900px; margin: 0 auto; width: 100%; padding-top: 8px; }
}

/* Pantallas bajas (iPhone SE y similares): el contenido no cabia y habia que
   desplazarse para llegar al transporte. Se compacta para que quepa entero. */
@media (max-height: 660px) {
  .player-panel-inner { padding: 8px 0 10px; row-gap: 10px; }
  .full-stage { gap: 9px; padding: 1vh 0; }
  .full-art { width: min(84%, 34vh); border-radius: 10px; }
  .full-title { font-size: clamp(1rem, 4.4vw, 1.3rem); }
  .full-album { font-size: .58rem; }
  .full-artist { font-size: .5rem; }
  .full-specs { gap: 7px; }
  .full-specs > div { padding: 8px 4px; gap: 3px; border-radius: 8px; }
  .full-specs dt { font-size: .42rem; }
  .full-specs dd { font-size: .64rem; }
  .full-seek span { font-size: .56rem; min-width: 30px; }
  .full-transport { gap: 6px; margin-top: clamp(6px, 1.4vh, 12px); }
  .full-controls button { width: 42px; height: 42px; }
  .full-controls button svg { width: 20px; height: 20px; }
  .full-play { width: 48px !important; height: 48px !important; }
  .full-play svg { width: 18px !important; height: 18px !important; }
  .full-collapse, .full-tools { width: 36px; height: 36px; }
  .full-collapse svg, .full-tools svg { width: 19px; height: 19px; }
  .full-buy { padding-top: 8px; }
  .full-price { font-size: .68rem; }
}

@media (max-width: 820px) {
  /* Barra minima: portada, ecualizador, nombre y play. Nada mas. El progreso,
     los tiempos, el precio y el segundo carrito ya estan en la pagina. */
  .player {
    background: rgba(5, 4, 3, .99);
    box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, 1);
  }
  .player::before { height: 1px; }

  .player-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 11px;
  }

  .player-track { flex: 1 1 auto; min-width: 0; gap: 11px; }
  .player-track img { width: 38px; height: 38px; border-radius: var(--radius-sm); }
  .player-meta a, .player-name {
    font-size: .92rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.015em;
  }

  /* El ecualizador queda solo en la barra, delante del nombre. */
  .player-meta { flex-direction: row; align-items: center; gap: 0; }
  .player-meta .eq {
    flex: 0 0 auto;
    height: 13px;
    margin-right: 9px;
    gap: 2.5px;
  }
  .player-meta .eq i { width: 2.5px; border-radius: 1px; }
  .player-meta a, .player-name { flex: 1 1 auto; min-width: 0; }

  /* Fuera: datos tecnicos, transporte extra, progreso, precios y compra.
     Ojo: el ecualizador tambien es un <span>, hay que dejarlo vivo. */
  .player-meta > span:not(.eq):not(.player-name):not(.player-name),
  .player-seek,
  .player-volume,
  .volume,
  .player-right,
  .player-right > * { display: none !important; }

  /* Transporte: anterior y siguiente en blanco, flanqueando el play. */
  .player-center { display: block; }
  .player-controls { justify-content: flex-end; gap: 2px; }
  .player-controls button {
    background: transparent;
    color: var(--text);
    width: 40px; height: 40px;
  }
  .player-controls button svg { fill: var(--text); }
  .player-controls .player-play {
    width: 46px; height: 46px;
    background: var(--blood);
    color: var(--on-blood);
    border-radius: 50%;
  }
  .player-play svg { width: 19px; height: 19px; fill: var(--on-blood); }
  /* Los realces de raton solo donde hay raton. */
  @media (hover: hover) and (pointer: fine) {
    .player-controls button:hover { color: var(--blood-text); }
    .player-controls button:hover svg { fill: var(--blood-text); }
    .player-play:hover { background: var(--blood-bright); }
    .player-play:hover svg { fill: var(--on-blood); }
  }
  #player-prev svg, #player-next svg { width: 17px; height: 17px; }

  body.has-player { padding-bottom: calc(var(--player-h) + 6px); }
}

/* ------------------------------------------------- paneles laterales --- */
/* --- Carrito: deslizamiento suave y proporcionado --- */
.drawer {
  width: min(380px, 100%);
  background: var(--bg-deep);
  border-left: var(--hairline-strong);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .95);
  overflow: hidden;                 /* nada se sale del cajon */
  /* Fuera de pantalla por completo: sin esto asomaba una franja al cerrar. */
  transform: translateX(105%);
  /* Cubic-bezier mas suave: arranca y frena sin golpe. */
  transition: transform .34s cubic-bezier(.22, .85, .25, 1);
  will-change: transform;
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { padding: 16px 18px; }
.drawer-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: none; font-size: 1.22rem; letter-spacing: -.02em; }
.drawer-close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; }@media (hover: hover) and (pointer: fine) {

  .drawer-close:hover { background: var(--surface-2); }
}
.drawer-body { padding: 14px 16px; gap: 10px; }
.drawer-body::-webkit-scrollbar { width: 6px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-foot { padding: 16px 18px 20px; gap: 11px; }
.drawer-total { font-family: var(--font); font-size: .66rem; letter-spacing: .12em; }
.drawer-total strong { font-size: 1.45rem; }
.drawer-note { line-height: 1.55; }

/* Fila del carrito: mas aire y proporcion. */
.cart-item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 12px;
  border: var(--hairline);
  border-radius: var(--radius);
}
.cart-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); }
.cart-item-info a { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -.015em; white-space: normal; }
.cart-item-info span { font-family: var(--font); font-size: .58rem; margin-top: 3px; }
.cart-item-side strong { font-family: var(--font-display); font-weight: 800; font-size: .98rem; }
.cart-item-remove { font-family: var(--font); font-size: .58rem; padding: 3px 0; }

/* En movil, a ancho completo pero con aire propio. */
@media (max-width: 820px) {
  .drawer { width: 100%; border-left: 0; box-shadow: none; }
  .drawer-head { padding: 14px 14px; border-bottom: 2px solid var(--blood); }
  .drawer-body { padding: 14px 14px; }
  .drawer-foot { padding: 16px 14px 18px; }
}
.notes-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: none; }
.notes-kicker { font-family: var(--font); text-transform: uppercase; letter-spacing: .16em; font-size: .58rem; color: var(--forest-text); }
.tool-tab { font-family: var(--font); text-transform: none; font-weight: 600; border-radius: var(--radius); }
.tool-tab.is-active { background: var(--blood); color: var(--on-blood); }
/* Boton de borrar ARMADO: el primer toque no borra, solo avisa. Se enciende
   y late despacio para que quede claro que hay que confirmar. */
.notes-tool.is-armed {
  background: var(--blood) !important;
  color: var(--on-blood) !important;
  border-color: var(--blood) !important;
  animation: kwArmado 1.3s ease-in-out infinite;
}
@keyframes kwArmado {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
.notes-tool { font-family: var(--font); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
.toast { background: var(--surface-2); border: var(--hairline); }

/* ------------------------------------------------------------ pie ------ */
.site-footer { background: var(--bg-deep); border-top: var(--hairline); }
.site-footer :is(h2, h3) {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .6rem;
  color: var(--muted-2);
}
.footer-grid { gap: 44px; }
.footer-bottom { border-top: var(--hairline); }

/* -------------------------------------------------- vista de lista ----- */
.catalog.view-list .beat-grid { display: flex; flex-direction: column; gap: 0; }
.catalog.view-list .album-block { padding: clamp(24px, 3vw, 40px) 0; }
.catalog.view-list .beat-card {
  display: grid;
  grid-template-columns: 44px 56px minmax(0, 1fr) 66px max-content 30px;
  grid-template-areas: "play art body duration actions open";
  align-items: center;
  column-gap: 16px;
  padding: 12px 10px;
  border: 0;
  border-bottom: var(--hairline);
  border-radius: 0;
  background: transparent;
  transform: none;
}@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover { background: var(--surface); transform: none; }
}
.catalog.view-list .beat-card-visual { display: contents; }
.catalog.view-list .beat-card-media { grid-area: art; display: block; }
.catalog.view-list .beat-card-media::after { display: none; }
.catalog.view-list .beat-card-media img {
  width: 56px; height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--hairline);
  border-radius: var(--radius-sm);
}
.catalog.view-list .beat-card-badge { display: none; }
.catalog.view-list .play-btn {
  grid-area: play;
  position: static; transform: none; opacity: 1;
  width: 40px; height: 40px;
  background: transparent;
  border: var(--hairline-strong);
}@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .play-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-blood); }
}
.catalog.view-list .play-btn svg { width: 16px; height: 16px; }
.catalog.view-list .beat-card-body {
  grid-area: body;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "track title" "track specs";
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 0;
}
.catalog.view-list .beat-card-album { grid-area: track; display: block; }
.catalog.view-list .beat-card-album-name { display: none; }
/* En la lista ordenada el nombre del disco va debajo del título: así el título
   no se desplaza según el largo del álbum y toda la columna queda alineada. */
.catalog.view-list.is-flat .beat-card-body {
  grid-template-areas: "track title" "track album" "track specs";
}
.catalog.view-list.is-flat .beat-card-album { display: contents; }
.catalog.view-list.is-flat .beat-card-track { grid-area: track; align-self: start; }
.catalog.view-list.is-flat .beat-card-album-name {
  display: block;
  grid-area: album;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-2);
  font-family: var(--font);
  font-size: .68rem;
}
.catalog.view-list .beat-card-track {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 24px; padding: 0 6px;
  background: var(--surface-3);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font);
  font-size: .66rem;
}
.catalog.view-list .beat-card-title { grid-area: title; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.catalog.view-list .beat-card-body .chips {
  grid-area: specs;
  justify-content: flex-start;
  gap: 6px;
}
.catalog.view-list .beat-card-duration {
  grid-area: duration;
  display: block;
  font-family: var(--font);
  font-size: .68rem;
  color: var(--muted-2);
  text-align: right;
}
.catalog.view-list .beat-card-actions {
  grid-area: actions;
  display: flex; align-items: center; gap: 10px;
  padding: 0; margin: 0;
}
.catalog.view-list .beat-card-actions .btn { background: var(--surface-2); }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover .beat-card-actions .btn { background: var(--blood); color: var(--on-blood); }
}
.catalog.view-list .beat-card-open {
  grid-area: open;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  color: var(--muted-2);
}
.catalog.view-list .beat-card-open svg { width: 15px; height: 15px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card-open:hover { color: var(--accent); }
}

@media (max-width: 1080px) {
  .catalog.view-list .beat-card { grid-template-columns: 40px 50px minmax(0, 1fr) max-content 28px; grid-template-areas: "play art body actions open"; }
  .catalog.view-list .beat-card-duration { display: none; }
}
@media (max-width: 820px) {
  /* La vista de lista SI lleva portada, como preveia el diseno original
     ("play art body" / "play art actions"). Esta capa la habia quitado y en
     movil el catalogo se quedaba sin caratulas: se veia una lista de titulos
     sueltos. Se restaura la columna del arte y se deja de ocultar la imagen.

        [▶]  [portada]  Al Todo O Nada        29.99 USD
                        [87 BPM][Eb Minor]    [Comprar]
  */
  .catalog.view-list .beat-card {
    grid-template-columns: 38px 48px minmax(0, 1fr);
    grid-template-areas:
      "play art body"
      "play art actions";
    column-gap: 11px;
    row-gap: 9px;
    padding: 12px 8px;
  }
  .catalog.view-list .beat-card-media {
    display: block;
    /* La portada abarca las dos filas de la rejilla y por defecto se centra
       verticalmente: quedaba 33px por debajo del titulo y parecia que el
       titulo estaba fuera de sitio. Alineada arriba, la fila se lee en orden. */
    align-self: start;
  }
  .catalog.view-list .beat-card-media img {
    width: 48px; height: 48px;
    aspect-ratio: 1 / 1; object-fit: cover;
    border: var(--hairline); border-radius: var(--radius-sm);
  }
  .catalog.view-list .beat-card .play-btn { align-self: start; }
  .catalog.view-list .beat-card-open { display: none; }
  /* El cuerpo conserva su rejilla de dos columnas ("track title" / "track
     specs"), que es la del diseno original: el numero de pista a la izquierda
     y el titulo con los datos a la derecha. Se deja como esta.
     OJO: si algun dia se cambia grid-template-columns aqui, hay que cambiar
     TAMBIEN grid-template-areas. Cambiar solo las columnas deja las areas
     declarando dos columnas y la fila se descuadra. */
  .catalog.view-list .beat-card-actions {
    grid-area: actions;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
  }
  .catalog.view-list .beat-card-actions .btn { padding: 8px 12px; font-size: .64rem; }
}

/* -------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-release { max-width: 420px; }
  .beat-page { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; }
  .track-row { grid-template-columns: 42px 48px minmax(0, 1fr) auto max-content max-content; }
  .track-row .track-time { display: none; }
}

/* La cabecera de tableta se comporta como la de móvil: logo centrado, menú a
   la izquierda y carrito a la derecha. Buscar, idioma y componer viven dentro
   del menú. Antes, entre 900 y 1080, el logo quedaba a la izquierda y la
   botonera ocupaba toda la derecha, rompiendo la lectura de la cabecera móvil. */
@media (max-width: 1080px) {
  .header-inner { position: relative; flex-wrap: nowrap; padding: 0; gap: 0; justify-content: center; }
  .brand { margin: 0 auto; }
  .brand-logo { height: 38px; }
  .header-tools { position: static; width: auto; margin: 0; gap: 0; }
  .header-tools .index-btn,
  .header-tools .lang,
  .header-tools .tool-btn { display: none; }
  .header-tools .menu-btn,
  .header-tools .cart-btn {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 10px 8px;
    color: var(--text);
    box-shadow: none;
  }
  .header-tools .menu-btn { left: 0; }
  .header-tools .cart-btn { right: 0; }
  .header-tools .menu-btn svg,
  .header-tools .cart-btn svg { width: 22px; height: 22px; }
  .cart-btn-label,
  .tool-btn-label { display: none; }
}

/* El disco apila la portada solo donde manda movil.css (<=899 px). De 900 a
   1080 conserva las dos columnas: caben de sobra (la copia mantiene 456 px a
   900) y desaparece el hueco muerto de media pantalla que dejaba el apilado al
   lado de la portada. La ficha del beat ya conservaba sus dos columnas ahi, y
   el motivo es el mismo: la pagina existe para escuchar el disco, asi que la
   lista de pistas tiene que empezar lo antes posible. */
@media (max-width: 899px) {
  .disco-head { grid-template-columns: minmax(0, 1fr); }
  .disco-cover { max-width: 420px; }
}

@media (max-width: 820px) {
  /* Barra de scroll discreta tambien en el telefono: no roba ancho al
     contenido ni corta los bordes de las tarjetas. */
  
  

  .wrap { width: min(1280px, 100% - 28px); }
  .mobile-nav { display: flex; }
  /* Cabecera movil: logo centrado, OPCIONES a la izquierda y CARRITO a la
     derecha. Todo lo demas (buscar, idioma, componer) va dentro del menu. */
  .header-inner { position: relative; flex-wrap: nowrap; padding: 0; gap: 0; justify-content: center; }
  .brand { margin: 0 auto; }
  .brand-logo { height: 38px; }

  .header-tools { position: static; width: auto; margin: 0; gap: 0; }
  .header-tools .index-btn,
  .header-tools .lang,
  .header-tools .tool-btn { display: none; }

  /* Solo el icono: sin caja ni borde de boton. Uno por lado. */
  .header-tools .menu-btn,
  .header-tools .cart-btn {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 10px 8px;
    color: var(--text);
    box-shadow: none;
  }
  .header-tools .menu-btn { left: 0; }
  .header-tools .cart-btn { right: 0; }
  /* Solo donde hay raton: esta regla vive dentro del @media movil, asi que en
     un telefono si se aplicaba y el icono se quedaba encendido tras el toque. */
  @media (hover: hover) and (pointer: fine) {
    .header-tools .menu-btn:hover,
    .header-tools .cart-btn:hover { background: transparent; border: 0; color: var(--accent); }
  }
  .header-tools .menu-btn svg,
  .header-tools .cart-btn svg { width: 22px; height: 22px; }
  /* Las tres rayitas se transforman en X al abrir el menu. */
  .menu-btn .icon-close { display: none; }
  .menu-btn .icon-burger { transition: transform .3s cubic-bezier(.22, .85, .25, 1); }
  .menu-btn.is-open .icon-burger { display: none; }
  .menu-btn.is-open .icon-close { display: block; animation: kwMenuX .3s cubic-bezier(.22, .85, .25, 1); }
  @keyframes kwMenuX {
    from { transform: rotate(-90deg) scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .filters { position: static; }
  .filters-toggle { display: inline-flex; }
  .filters-body { display: none; }
  .filters-body.is-open { display: grid; }
  .beat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .disc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .beat-page { grid-template-columns: minmax(0, 1fr); }
  .beat-page-media { position: static; max-width: 420px; }
  .player-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .player-center { grid-column: 1 / -1; order: 3; }
  /* Fila de pista en pantalla estrecha.
     Antes declaraba TRES columnas para CINCO elementos visibles (se ocultan
     miniatura y precio, pero siguen play, titulo, datos y comprar): los que
     sobraban caian en columnas implicitas de 0px y el boton se recortaba a
     "ompr". Ahora cada uno tiene su area explicita.

        [▶]  Al Todo O Nada        [Comprar]
             87 BPM · Eb Minor · 2A
  */
  .track-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "play titulo comprar"
      "play datos  comprar";
    align-items: center;
    row-gap: 3px;
    column-gap: 12px;
    padding: 14px 10px;
  }
  .track-row .play-btn { grid-area: play; }
  .track-row .track-title { grid-area: titulo; }
  .track-row .track-specs { grid-area: datos; }
  .track-row .js-add {
    grid-area: comprar;
    padding: 9px 15px;
    font-size: .7rem;
    white-space: nowrap;
  }
  .track-row .track-thumb,
  .track-row .track-time,
  .track-row .track-price { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Panel del compositor — reconstruido (2026-10-01)

   Antes: cajon de 460px a la derecha en PC y hoja inferior al 92% en movil.
   Dentro, una tarjeta de contexto de 325-336px que se comia el 41-43% del
   panel y dejaba el area de escritura en un tercio. Y en PC el cajon tapaba
   el reproductor: el titulo salia cortado y los controles quedaban detras.

   Ahora: pantalla completa en PC y en movil, franja de contexto de una linea,
   pestanas con icono (el nombre solo en la activa) y el texto como dueno del
   espacio que sobra.
   ========================================================================== */
.notes {
  position: fixed; inset: 0; z-index: 400;
  width: auto; max-width: none; max-height: none;
  border: 0; border-radius: 0;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  transform: translateY(102%);
  transition: transform .3s var(--ease);
}
.notes.is-open { transform: none; }

/* Cabecera minima: sobraba el antetitulo y el titulo ocupaba 1.45rem. */
.notes-head { padding: 12px 16px 8px; align-items: center; }
.notes-head h2 { font-size: 1.02rem; letter-spacing: .01em; color: var(--muted); font-weight: 700; }
.notes-kicker { display: none; }

/* ---- franja de contexto: quien es el beat, en una sola linea ---- */
.notes-context { margin: 0 14px; padding: 0; background: transparent; border-radius: 0; }
.notes-strip {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--surface); border: var(--hairline); border-radius: var(--radius);
}
.notes-strip img { width: 38px; height: 38px; border-radius: var(--radius-sm); object-fit: cover; display: block; }
.notes-strip-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: -.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-strip-meta { color: var(--muted-2); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; margin-top: 2px; }
.notes-strip .notes-transport { gap: 6px; }
.notes-strip .notes-transport button { width: 36px; height: 36px; }
.notes-strip .notes-transport button svg { width: 15px; height: 15px; }
.notes-strip-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: var(--surface); border: var(--hairline); border-radius: var(--radius); }
.notes-strip-empty p { color: var(--muted-2); font-size: .76rem; }
.notes-switch { margin-top: 0; width: auto; padding: 8px 12px; font-size: .72rem; }

/* ---- pestanas: icono siempre, nombre solo en la activa ---- */
.tool-tabs { padding: 10px 14px 0; gap: 6px; overflow: visible; flex-wrap: nowrap; }
.tool-tab {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto; padding: 9px 11px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--muted-2); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tool-tab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.tool-tab span { display: none; }
.tool-tab.is-active { background: var(--surface-2); color: var(--text); }
.tool-tab.is-active span { display: inline; }

/* ---- paneles: cada uno dueno de su espacio ---- */
.tool-pane {
  flex: 1; min-height: 0; display: none; flex-direction: column;
  padding: 0 14px 14px; overflow: hidden;
}
.tool-pane.is-active { display: flex; }
.tool-pane .pane-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-top: 12px; }
.pane-title {
  font-family: var(--font); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  /* --accent es por album y aqui NO llega: el panel vive fuera de todo ambito
     de album, asi que cae al valor por defecto (#b21f1a) y a 9,9 px da 2,96:1,
     que no pasa WCAG AA. Se usa la variante legible. */
  color: var(--blood-text);
  margin: 16px 0 8px;
}
.pane-title:first-child { margin-top: 4px; }

/* ---- bloc de notas: el texto se lleva todo lo que sobra ---- */
.tool-pane[data-pane="lyrics"] { padding: 0; }
.notes-text {
  flex: 1; min-height: 0;
  margin: 10px 14px 0; padding: 15px 16px;
  background: var(--surface); border: var(--hairline); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 500;
  line-height: 1.7; resize: none;
}
.tool-pane[data-pane="lyrics"] .notes-tools { padding: 10px 14px 0; }
.tool-pane[data-pane="lyrics"] .notes-foot { padding: 8px 14px 12px; }

/* En pantalla ancha, el texto a 1252px son ~150 caracteres por linea y el ojo
   pierde el renglon al volver. Se centra una columna de 820px (~95 caracteres,
   medida comoda para escribir) y todo el panel la sigue. */
@media (min-width: 900px) {
  .notes-head,
  .notes-context,
  .tool-tabs,
  .tool-pane .pane-scroll,
  .tool-pane[data-pane="lyrics"] .notes-tools,
  .tool-pane[data-pane="lyrics"] .notes-foot {
    width: min(820px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .notes-text {
    width: min(792px, calc(100% - 28px));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Proporciones tactiles en movil (2026-10-01)

   Medido antes de tocar nada: 51 de 93 controles estaban por debajo del
   minimo tactil comodo. Los peores eran los filtros (30px de alto), los
   botones de vista (36x36) y los botones normales (40px).

   Se define una medida unica y se aplica a cada familia de control, en vez de
   ir parcheando uno a uno.
   ========================================================================== */
@media (max-width: 899px) {
  :root { --tacto: 44px; }

  /* --- iconos de la cabecera: cuadrados y centrados --- */
  .header-tools .menu-btn,
  .header-tools .cart-btn {
    width: var(--tacto);
    height: var(--tacto);
    padding: 0;
    justify-content: center;
  }
  .header-tools .menu-btn svg,
  .header-tools .cart-btn svg { width: 21px; height: 21px; }

  /* --- campos de formulario --- */
  .search input,
  input[type="search"],
  select { min-height: var(--tacto); }

  /* --- botones: alto comodo sin volverlos macizos --- */
  .btn,
  .filters-toggle,
  .notes-tool,
  .notes-sync button,
  .rec-row .btn { min-height: var(--tacto); }

  /* --- botones de vista (mosaico / lista) --- */
  .view-toggle button { width: var(--tacto); height: var(--tacto); }

  /* --- filtros: 30px era el peor caso.
         Se suben a 38px de dibujo y se les amplia el area sensible 6px por
         arriba y por abajo, que es lo que toca el dedo, sin que el chip
         crezca de mas ni rompa la fila. --- */
  .chip-filter {
    min-height: 38px;
    position: relative;
  }
  .chip-filter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    bottom: -6px;
  }

  /* --- la fila de filtros respira --- */
  .chip-filters { gap: 8px; }
}

/* ==========================================================================
   Panel del compositor — acabado premium (2026-10-01)

   Coherencia con el reproductor: mismo titulo en Archivo, mismas tarjetas con
   etiqueta pequena en mayusculas, mismo aire y mismo punto separador. El panel
   se veia plano al lado del reproductor porque usaba texto corrido y cajas
   genericas en vez del lenguaje que ya tiene el resto.
   ========================================================================== */

/* ---- cabecera: antetitulo + titulo, como el resto ---- */
.notes-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; padding: 16px 16px 10px;
}
.notes-head > div { min-width: 0; }
.notes-kicker {
  display: block;
  font-family: var(--font); text-transform: uppercase;
  letter-spacing: .18em; font-size: .56rem; font-weight: 700;
  color: var(--blood-text); margin: 0 0 3px;
}
.notes-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.06rem, 4.6vw, 1.32rem); letter-spacing: -.015em;
  color: var(--text); line-height: 1.05; margin: 0;
}

/* ---- franja del beat: misma tarjeta que las del reproductor ---- */
.notes-strip {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px; padding: 9px 11px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--gloss-soft);
}
.notes-strip img { width: 42px; height: 42px; border-radius: var(--radius-sm); }
.notes-strip-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -.015em; line-height: 1.1;
}
.notes-strip-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: .56rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2);
  margin-top: 3px;
}
.notes-strip-meta::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5; flex: 0 0 auto;
}

/* ---- pestanas: pastillas con el mismo peso que las tarjetas ---- */
.tool-tabs { padding: 12px 14px 2px; gap: 7px; }
.tool-tab {
  padding: 10px 13px; gap: 8px; border-radius: 999px;
  border: var(--hairline); background: transparent;
  font-size: .63rem; letter-spacing: .1em; font-weight: 700;
}
.tool-tab svg { width: 16px; height: 16px; opacity: .85; }
.tool-tab.is-active {
  background: var(--surface); border-color: var(--line-strong);
  box-shadow: var(--gloss-soft);
}
.tool-tab.is-active svg { opacity: 1; color: var(--blood-text); }

/* ---- superficie de escritura: el objeto principal del panel ---- */
.notes-text {
  margin: 10px 14px 0; padding: 18px 18px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
  font-family: var(--font); font-size: 1rem; font-weight: 500;
  line-height: 1.85; letter-spacing: .002em;
}
.notes-text::placeholder { color: var(--muted-2); font-weight: 450; }

/* ---- acciones: pastillas alineadas con las tarjetas del reproductor ---- */
.tool-pane[data-pane="lyrics"] .notes-tools { padding: 12px 14px 0; gap: 7px; }
.notes-tool {
  min-height: 40px; padding: 0 15px;
  background: var(--surface); border: var(--hairline);
  border-radius: 999px;
  font-family: var(--font); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.notes-tool:active { background: var(--surface-2); color: var(--text); }

/* ---- pie: contador discreto, como los metadatos del reproductor ---- */
.notes-foot { padding: 10px 16px 14px; align-items: baseline; }
.notes-count, .notes-saved {
  font-family: var(--font); font-size: .56rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
}
.notes-saved { color: var(--blood-text); }

/* ---- titulos de bloque dentro de las pestanas ---- */
.pane-title {
  font-family: var(--font); font-size: .56rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blood-text); margin: 18px 0 10px;
}

/* ---- tarjetas de dato (BPM, compas) con el mismo trato que .full-specs ---- */
.bars-total, .mix-pick {
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: var(--hairline);
}
.bars-total span, .mix-pick > span {
  font-family: var(--font); text-transform: uppercase;
  letter-spacing: .11em; font-size: .52rem; font-weight: 700; color: var(--muted-2);
}
.bars-total strong {
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
.bars-list li {
  border-radius: var(--radius-sm);
  background: var(--surface); border: var(--hairline);
  padding: 10px 13px; margin-bottom: 7px;
}

/* Los cuatro botones no cabian en una fila a 390px y BORRAR caia solo a una
   segunda linea, que se ve descuidado. Se ajusta el relleno y el espaciado
   para que entren los cuatro, con el area tactil intacta. */
.tool-pane[data-pane="lyrics"] .notes-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.notes-tool {
  padding: 0 4px;
  letter-spacing: .05em;
  font-size: .55rem;
  min-width: 0;
  justify-content: center;
}

/* La barra de desplazamiento del panel se dibujaba encima del contenido y
   tapaba la ultima cifra de los tiempos ("4:36" salia como "4:3("). Se oculta,
   igual que ya se hace en el reproductor: en tactil la barra no aporta nada. */
.tool-pane .pane-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.tool-pane .pane-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ==========================================================================
   Carrito -> documento (2026-10-01)

   El carrito recoge los datos que van IMPRESOS en la licencia. El motor de
   contratos exige nombre legal y nombre artistico: sin ellos el PDF no se
   emite. Antes no se pedian en ningun sitio.
   ========================================================================== */

.cart-lic {
  margin: 4px 0 12px;
  padding: 13px 14px 12px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.cart-lic-kicker {
  font-family: var(--font); font-size: .56rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blood-text); margin: 0 0 10px;
}
.cart-field { display: block; margin-bottom: 9px; }
.cart-field > span {
  display: block;
  font-family: var(--font); font-size: .54rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 5px;
}
.cart-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: #0a0806;
  border: var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font); font-size: .9rem; font-weight: 500;
}
.cart-field input::placeholder { color: var(--muted-2); font-weight: 450; }
.cart-field input:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(227, 87, 77, .12);
}
.cart-lic-hint {
  font-family: var(--font); font-size: .58rem; line-height: 1.5;
  color: var(--muted-2); margin: 2px 0 0;
}

.cart-accept {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px; margin-bottom: 12px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
}
.cart-accept input {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--blood);
}
.cart-accept > span {
  flex: 1 1 auto;
  font-family: var(--font); font-size: .72rem; line-height: 1.45;
  color: var(--text);
}
.cart-accept a {
  color: var(--blood-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-left: 4px;
}

.cart-pending {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(227, 87, 77, .1);
  border: 1px solid rgba(227, 87, 77, .3);
  color: var(--blood-text);
  font-family: var(--font); font-size: .7rem; line-height: 1.4; font-weight: 600;
}

.cart-lic-line {
  display: block;
  margin-top: 3px;
  font-family: var(--font); font-size: .54rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blood-text);
}

/* ==========================================================================
   Botones de anadir: un solo estado para todos (2026-10-01)

   site.css ya pintaba .btn.is-added, pero el estado del reproductor viaja con
   la clase is-in-cart. Se igualan para que un boton marcado se vea igual este
   donde este: tarjeta, fila de disco, ficha o reproductor.
   ========================================================================== */
.btn.is-in-cart {
  background: var(--forest-3);
  color: #fbf3e2;
  border-color: transparent;
}
.js-add.is-in-cart { box-shadow: none; }

/* ==========================================================================
   Datos del beat en el reproductor (2026-10-01)

   Antes eran tres cajas de 62px con solo 19px de texto dentro: 43px vacios.
   El valor medía 11,5px (mas pequeno que el propio titulo, 16,6px) y la
   etiqueta 7,7px. Tres cajas con fondo y borde parecian un panel de control
   dentro de un reproductor que por lo demas es aireado.

   Ahora es una sola linea con filetes finos, el valor manda en la fuente de
   titulos y la etiqueta lo acompana debajo, igual que el titulo con su
   subtitulo.
   ========================================================================== */
.full-specs {
  gap: 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.full-specs > div {
  flex-direction: column-reverse;   /* el valor arriba, la etiqueta debajo */
  gap: 7px;
  padding: 0 6px;
  background: none;
  border: 0;
  border-radius: 0;
}
/* Un filete entre dato y dato, no una caja alrededor de cada uno. */
.full-specs > div + div { border-left: 1px solid var(--line); }
.full-specs dt {
  font-size: .5rem;
  letter-spacing: .17em;
  color: var(--muted-2);
}
.full-specs dd {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.06;
  color: var(--text);
}
/* En pantallas bajas se aprieta el aire, no el tamano del dato. */
@media (max-height: 660px) {
  .full-specs { padding: 9px 0; }
  .full-specs > div { padding: 0 5px; gap: 5px; border-radius: 0; }
  .full-specs dt { font-size: .46rem; }
  .full-specs dd { font-size: 1.06rem; }
}

/* ==========================================================================
   Arreglos visuales del bloque de datos y la tarjeta de licencia (2026-10-01)

   1) La lista de datos vive dentro de una tarjeta con border-radius: 16px,
      pero TODAS las filas llevan border-bottom, incluida la ultima. Eso dejaba
      una linea recta cruzando justo antes de la esquina redondeada.
   2) "No exclusiva" se partia en dos lineas a 320, 360 y 390px: el precio es
      nowrap a 2.3rem y le dejaba 167px cuando la frase necesita ~180px. Se
      cortaba la frase en el ancho de telefono mas comun.
   ========================================================================== */

/* 1) La ultima fila no lleva linea: el borde de la tarjeta ya cierra el bloque. */
.spec-list > div:last-child { border-bottom: 0; }

/* 2) El nombre de la licencia nunca se parte. El tamano baja con el ancho para
      que quepa entero, en vez de romper la frase. */
.license-head :is(h2, h3) {
  white-space: nowrap;
  font-size: clamp(1.02rem, 5.3vw, 1.6rem);
}
/* En pantallas muy estrechas el precio cede un poco para dejar respirar al
   titulo, que es el que se partia. */
@media (max-width: 400px) {
  .license-price span { font-size: 1.9rem; }
  .license-head { gap: 12px; }
}

/* ==========================================================================
   Listas de seleccion (2026-10-01)

   Se veian baratas y genericas por tres motivos concretos:

   1. appearance: auto -> la flecha la dibujaba el sistema operativo. Una
      flecha gruesa de Windows o Android dentro de una interfaz de trazo fino.
   2. text-transform: uppercase -> el VALOR salia en MAYUSCULAS, como si fuera
      una etiqueta. "CUALQUIERA" en vez de "Cualquiera". El valor es un dato:
      en el resto del sitio los datos van en la fuente de titulos y en su caja.
   3. En las listas anchas (362px) la flecha quedaba a 300px del texto, asi que
      la caja parecia vacia y desequilibrada.

   Ahora la flecha es un trazo propio del mismo grosor que los iconos del
   sitio, el valor va en la fuente de titulos y la caja respira igual por los
   dos lados.
   ========================================================================== */
select {
  appearance: none;
  -webkit-appearance: none;
  text-transform: none;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 10px 13px;
  /* Sin chevron. Se comia 40px de relleno a la derecha y, con el ancho justo,
     el texto tenia que reacomodarse en dos lineas: "Todos los albumes" y
     "Orden del catalogo" crecian de alto y desalineaban la fila entera.
     Los cuatro botones miden ahora lo mismo, y el desplegable se sigue
     abriendo igual: solo se ilumina el boton al pasar por encima. */

  cursor: pointer;
}

/* Al pasar por encima o al enfocar, la caja se aviva sin gritar. */
@media (hover: hover) and (pointer: fine) {
  select:hover {
    border-color: var(--line-strong);

  }
}
select:focus-visible {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(227, 87, 77, .14);
}

/* La lista desplegada: en los navegadores que lo permiten, hereda el tema. */
select option {
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  font-size: .92rem;
}

/* Con el filtro puesto, la caja lo delata: borde mas marcado y valor en el
   color de acento. Asi se ve de un vistazo que hay algo filtrado. */
select.is-set {
  border-color: color-mix(in srgb, var(--blood-text) 42%, transparent);
  color: var(--blood-text);
}

/* ==========================================================================
   La lista desplegable abierta (2026-10-01)

   Lo que quedaba pendiente: al abrir, el panel de opciones lo dibujaba el
   navegador y no habia forma de vestirlo. Se veia oscuro por herencia, pero
   generico: opciones apretadas, sin marca de cual esta elegida y con la
   flecha del sistema.

   Edge 154 soporta el desplegable estilable (appearance: base-select), asi que
   se puede vestir de verdad SIN construir un componente propio: se conserva el
   teclado, los lectores de pantalla y el comportamiento nativo en movil.

   Todo va dentro de @supports: en un navegador que no lo soporte, se queda el
   desplegable nativo y la flecha de repuesto que ya hay mas arriba.
   ========================================================================== */
@supports (appearance: base-select) {
  select,
  select::picker(select) { appearance: base-select; }

  /* El boton ya no necesita la flecha de repuesto: ahora la dibuja
     ::picker-icon, que ademas puede girar al abrir. */
  select { background-image: none; }

  select::picker-icon { display: none; }
  /* Al abrir, la flecha gira y la caja se aviva. */
  
  select:open { border-color: var(--line-strong); }

  /* El panel de opciones. */
  select::picker(select) {
    margin-top: 6px;
    padding: 6px;
    background: var(--surface-2);
    border: var(--hairline);
    border-radius: var(--radius);
    box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .8);
  }

  /* Cada opcion: con aire y con esquina, como el resto de la interfaz. */
  select option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: var(--font);
    font-size: .84rem;
    letter-spacing: .01em;
    transition: background .16s ease, color .16s ease;
  }
  select option:hover,
  select option:focus-visible {
    background: var(--surface-3);
    color: var(--text);
  }
  /* La elegida se distingue sin gritar. */
  select option:checked {
    color: var(--blood-text);
    font-weight: 700;
    background: color-mix(in srgb, var(--blood-text) 9%, transparent);
  }
  /* La marca de la elegida la pone el navegador; se tine para que acompañe. */
  select option::checkmark { color: var(--blood-text); }
}

/* ==========================================================================
   Pozo de talento (2026-10-01)

   Los diez perfiles de entrada al ecosistema se agrupan en cuatro bloques
   (artistas, productores, sellos, ecosistema), y cada tarjeta lleva a su ficha.
   ========================================================================== */
.talent-hero { padding-bottom: 0; }
/* El kicker de cabecera es --muted-2 en TODO el sitio. Talento lo pintaba de
   rojo por una regla suelta, asi que la misma etiqueta salia de dos colores
   segun la pagina. Se quita la excepcion y hereda el color comun. */
.talent-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 5.6vw, 4.3rem); letter-spacing: -.035em;
  line-height: .95; margin: 10px 0 0;
}
.talent-lead {
  max-width: 62ch; margin: 18px 0 0;
  font-family: var(--font); font-size: 1.02rem; line-height: 1.7;
  color: var(--muted);
}

.talent-group { margin-top: clamp(38px, 6vw, 62px); }
.talent-group-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: var(--hairline-strong);
}
.talent-group-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.65rem); letter-spacing: -.02em; margin: 0;
}
.talent-group-head span {
  font-family: var(--font); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}

.talent-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.talent-card {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--gloss-soft);
}
.talent-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.16rem; letter-spacing: -.015em; line-height: 1.25;
  margin: 0 0 10px;
}
.talent-card > p {
  font-family: var(--font); font-size: .86rem; line-height: 1.65;
  color: var(--muted); margin: 0 0 16px;
}
.talent-row { margin-bottom: 13px; }
.talent-row dt {
  font-family: var(--font); font-size: .52rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 5px;
}
.talent-row dd {
  font-family: var(--font); font-size: .82rem; line-height: 1.55;
  color: var(--text); margin: 0;
}
.talent-card .btn { margin-top: auto; align-self: flex-start; }

.talent-detail-hero { padding-top: clamp(38px, 6vw, 66px); }
.talent-detail-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 28px; color: var(--muted-2);
  font-family: var(--font); font-size: .78rem; line-height: 1.5;
}
.talent-detail-path a { color: var(--muted); text-decoration: none; }
.talent-detail-path a:hover { color: var(--blood-text); }
.talent-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; max-width: 980px;
}
.talent-detail-block {
  min-width: 0; padding: clamp(20px, 3vw, 28px);
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--gloss-soft);
}
.talent-detail-block h2 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em;
}
.talent-detail-block p {
  max-width: 56ch; margin: 0; color: var(--muted);
  font-family: var(--font); font-size: .94rem; line-height: 1.75;
}
.talent-detail-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 22px;
}

.talent-note {
  max-width: 62ch;
  padding: 24px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
}
.talent-note h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.015em; margin: 0 0 10px;
}
.talent-note p { font-family: var(--font); font-size: .88rem; line-height: 1.7; color: var(--muted); margin: 0; }
.talent-note .legal-text { margin-top: 14px; }

/* ==========================================================================
   Nosotros (2026-10-01)

   Es un manifiesto, no una pagina de datos. La medida de linea se limita a ~62
   caracteres porque es texto largo y se lee de corrido, y las frases que van
   solas respiran al doble de tamano para que corten el ritmo donde toca.
   ========================================================================== */
.about-hero { padding-bottom: 0; }
/* Mismo caso que .talent-kicker: el kicker de cabecera es --muted-2 en todo
   el sitio. */
.about-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.035em;
  line-height: 1; margin: 10px 0 0; max-width: 22ch;
}

/* La medida de linea se limita a ~62 caracteres porque es texto largo y se lee
   de corrido. Va en un hijo del .wrap, no en el propio .wrap: cuando las dos
   clases caian en la misma caja, el margin-inline: auto del .wrap centraba los
   632 px y el manifiesto arrancaba 324 px a la derecha del titular. */
.about-col { max-width: 62ch; }
.about-body p {
  font-family: var(--font); font-size: 1.02rem; line-height: 1.85;
  color: var(--muted); margin: 0 0 20px;
}
.about-body p:last-of-type { margin-bottom: 0; }

/* Las frases que van solas: el golpe del manifiesto. */
.about-line {
  font-family: var(--font-display) !important;
  font-weight: 600; font-size: clamp(1.3rem, 4.2vw, 1.85rem) !important;
  letter-spacing: -.025em; line-height: 1.25 !important;
  color: var(--text) !important;
  margin: 32px 0 !important;
  padding-left: 18px;
  border-left: 3px solid var(--blood);
}

.about-head {
  font-family: var(--font); font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blood-text);
  margin: 44px 0 14px;
}

/* La promesa: el parrafo que sostiene la pagina entera. */
.about-quote {
  margin: 26px 0; padding: 22px 24px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.06rem, 3.2vw, 1.3rem); line-height: 1.6;
  letter-spacing: -.015em; color: var(--text);
}

.about-sign {
  font-family: var(--font-display) !important; font-weight: 600;
  font-size: 1.1rem !important; color: var(--text) !important;
  margin: 40px 0 26px !important;
}
.about-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  min-height: 54px;
  margin-inline: auto;
  text-align: center;
}

/* 2026-10-04: en escritorio el boton quedaba centrado dentro de la columna de
   62ch, es decir flotando en medio de un manifiesto que va todo alineado a la
   izquierda. Se alinea con el texto (mismo borde izquierdo que los parrafos y la
   firma) y conserva su tamano. En movil no se toca: ahi la columna ya es el
   ancho de la pantalla y el boton centrado se lee como parte del bloque. */
@media (min-width: 900px) {
  .about-cta { margin-inline: 0; }
}

/* ==========================================================================
   El precio convertido en boton de compra (2026-10-01)

   Antes eran dos cosas: un texto suelto "29.99 USD - LICENCIA" y un boton
   "Comprar" que se retiro del reproductor. Ahora es uno solo: el texto ES el
   boton.

   Es SOLO un marco, sin relleno, para no competir con el boton de reproducir
   que es el protagonista de la pantalla. El marco y las olas usan var(--accent),
   que paintPlayerAccent deja puesto en el panel: es el color del album, el mismo
   del boton de play.
   ========================================================================== */
.full-cart {
  position: relative;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
  padding: 8px 18px;
  gap: 7px;
  font-family: var(--font);
  font-size: .62rem;          /* mas pequeno que el texto suelto anterior (.78rem) */
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* El precio dentro del boton: hereda el tamano, no lo aumenta. */
.full-cart .full-price {
  color: var(--muted);
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: 700;
}
/* El "- licencia" del CSS sobraba: ahora lo dice la etiqueta del boton. */
.full-cart .full-price::after { content: ""; }

@media (hover: hover) and (pointer: fine) {
  .full-cart:hover {
    transform: none;          /* sin saltos: solo se aviva el marco */
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }
}
.full-cart:active {
  transform: none;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Ya esta en el carrito: el marco se llena tenue. No se mueve nada. */
.full-cart.is-added {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
/* Con el precio dentro, el boton es el unico hijo: se centra, no se reparte. */
.full-buy:has(.full-cart) { justify-content: center; }

/* --- Las olas -------------------------------------------------------------
   Tres anillos que salen del contorno, se separan 4px y se desvanecen. Se
   anima el box-shadow y no el tamano: asi el anillo crece parejo por los cuatro
   lados y sigue la forma redondeada del marco, en vez de estirarse. */
.full-olas {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* Cada ola es un FILETE de 1px, no una banda. Con box-shadow la sombra
   rellena todo el recorrido y a 3px de expansion el anillo ya se ve grueso;
   con un borde fino y animando inset, el anillo mantiene 1px de grosor
   mientras se separa. */
.full-olas i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  /* Curva tendida, no un ease-out fuerte: con el anterior la opacidad subia
     de 0 a .23 en los primeros 230ms y la ola parecia encenderse de golpe. */
  animation: olaCompra 4.8s cubic-bezier(.38, .1, .3, 1) infinite;
}
/* Escalonadas: mientras una se apaga, la siguiente arranca. */
.full-olas i:nth-child(2) { animation-delay: 1.4s; }
.full-olas i:nth-child(3) { animation-delay: 2.8s; }

@keyframes olaCompra {
  /* Arranca a 1px de separacion, NO a 0: a 0 el anillo se monta justo encima
     del marco y lo duplica en brillo, y el conjunto se lee como un marco
     doble y grueso. Naciendo ya separado, la ola sale hacia afuera en vez de
     parecer parte del borde.

     Y arranca en opacidad 0: antes empezaba en .38, asi que la ola APARECIA de
     golpe en vez de nacer. Ahora sube desde cero, se sostiene un momento en su
     punto mas visible y se apaga mientras se aleja. */
  0%   { inset: -1px; opacity: 0; }
  10%  { opacity: .07; }
  22%  { opacity: .16; }
  36%  { opacity: .26; }
  50%  { opacity: .33; }
  76%  { opacity: .12; }
  100% { inset: -7px; opacity: 0; }
}

/* Si el sistema pide menos movimiento, no hay olas. */
@media (prefers-reduced-motion: reduce) {
  .full-olas { display: none; }
}

/* --- El check que tambalea antes de "En el carrito" ----------------------
   Al anadir no se cambia el texto de golpe: la etiqueta y el precio se apagan,
   entra una marca que tambalea, y solo despues aparece "En el carrito". */
.full-check {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 20px y no 15: el trazo del check solo ocupa 15 de las 24 unidades del
     viewBox, asi que a 15px la marca media 9x7px y casi no se leia. */
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  color: var(--accent);
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}
/* El SVG se rellena, no se traza: la regla .full-cart svg de mas arriba pone
   fill: currentColor, y el CSS gana a los atributos de presentacion del propio
   svg. Sin este fill:none la marca salia como una mancha rellena en vez de un
   trazo. */
.full-check svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Cada trazo gira y crece sobre su propio centro. El grosor se mantiene con
   non-scaling-stroke: sin eso la raya corta engordaria al estirarse para
   igualarse con la larga. */
.full-check path {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

/* La etiqueta y el precio se apartan por DENTRO, span a span, y no apagando el
   contenedor. Esa era la raiz de dos artefactos: el contenedor hacia su propio
   fundido por un lado y las dos etiquetas se cruzaban por otro, asi que al
   quitar del carrito el texto viejo reaparecia entero un instante antes de
   cambiar, y al anadir se veia el texto cambiar a media desaparicion. Ahora
   las dos etiquetas se apartan juntas y el cambio de modo ocurre a oscuras. */
.full-cart-label,
.full-price {
  transition: transform .2s ease-out;
}
.full-cart.is-checking .full-cart-label,
.full-cart.is-removing .full-cart-label,
.full-cart.is-checking .full-price,
.full-cart.is-removing .full-price {
  transform: translateY(-5px);
}
.full-cart.is-checking .full-cart-label > span,
.full-cart.is-removing .full-cart-label > span {
  opacity: 0;
  visibility: hidden;
}
/* Y el precio se apaga entero: no tiene dos versiones que cruzar. */
.full-cart.is-checking .full-price,
.full-cart.is-removing .full-price {
  opacity: 0;
}
.full-cart.is-checking .full-check {
  opacity: 1;
  /* 1.9s, con forwards para que se quede en el ultimo fotograma (opacidad 0) y
     no vuelva de golpe. site.js la deja puesta MARCA_MS. */
  animation: tambaleo 1.9s cubic-bezier(.22, .8, .28, 1) forwards;
}
/* Tambalea: entra girada, se pasa de largo, corrige y se asienta. */
@keyframes tambaleo {
  /* Termina en opacidad 0 y la regla lleva forwards: antes acababa en 1 y sin
     forwards, asi que al terminar la animacion el elemento volvia de golpe a su
     estado base (opacity 0) y la marca DESAPARECIA de un fotograma al
     siguiente. Ese era el salto seco. */
  0%   { transform: scale(.45) rotate(-22deg); opacity: 0; }
  16%  { transform: scale(.7) rotate(-17deg); opacity: 0; }
  30%  { transform: scale(1.18) rotate(11deg); opacity: 1; }
  42%  { transform: scale(1) rotate(-6deg); opacity: 1; }
  56%  { transform: scale(1.04) rotate(4deg); opacity: 1; }
  68%  { transform: scale(1) rotate(-2deg); opacity: 1; }
  80%  { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.05) rotate(0deg); opacity: 0; }
}

/* El ancho tambien acompaña: la etiqueta nueva es mas corta y sin esto el
   boton encogeria de un salto. Lo anima site.js midiendo antes y despues. */
.full-cart { transition: border-color .34s ease, background-color .34s ease, width .42s cubic-bezier(.22, .8, .28, 1); }

@media (prefers-reduced-motion: reduce) {
  .full-check, .full-cart-label, .full-price { transition: none; }
  .full-cart.is-checking .full-check { animation: none; opacity: 1; }
}

/* --- La marca se rompe en una X al quitar del carrito ---------------------
   El check es una V de dos trazos. Para que se crucen y formen la X casi no
   hay que girarlos: ya estan a 45 grados, que son justo los angulos de una X.
   Lo que hace falta es que se DESLICEN uno sobre otro hasta cruzarse, y que la
   raya corta crezca hasta igualarse con la larga para que las dos aspas queden
   parejas. La corta recorre mas porque tiene que compensar su tamano. */
.full-cart.is-removing .marca-corta {
  animation: romperCorta 1.25s cubic-bezier(.32, .08, .24, 1) .62s forwards;
}
.full-cart.is-removing .marca-larga {
  animation: romperLarga 1.25s cubic-bezier(.32, .08, .24, 1) .62s forwards;
}
@keyframes romperCorta {
  0%   { transform: none; }
  /* FASE 1: se despega del vertice Y CRECE a la vez. Si solo se despegara, al
     cruzarse quedaria una raya corta al lado de una larga y se leeria como una
     "y" en vez de una X. Creciendo aqui, cuando las dos se cruzan ya tienen
     largo parecido y el cruce se lee como cruce. */
  32%  { transform: translate(2.4px, -2.4px) scale(1.9); }
  /* FASE 2: termina de igualarse y de centrarse. */
  100% { transform: translate(5px, -3px) scale(2.49); }
}
@keyframes romperLarga {
  0%   { transform: none; }
  32%  { transform: translate(-2.4px, 2.4px) rotate(1deg) scale(1.05); }
  100% { transform: translate(-1.5px, 0) rotate(3deg) scale(1.05); }
}

/* La marca entera: entra, se sostiene mientras se rompe, y se va. */
.full-cart.is-removing .full-check {
  opacity: 1;
  animation: romperMarca 2.1s cubic-bezier(.32, .08, .24, 1) forwards;
}
@keyframes romperMarca {
  0%   { opacity: 0; transform: scale(.55) rotate(-13deg); }
  18%  { opacity: 1; transform: scale(1.04) rotate(2deg); }
  27%  { opacity: 1; transform: scale(1) rotate(0deg); }
  88%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.08) rotate(0deg); }
}

/* La etiqueta ya se aparta con las reglas de arriba; aqui solo queda el sitio
   por si en el futuro se quiere añadir algo propio de la rotura. */

@media (prefers-reduced-motion: reduce) {
  .full-cart.is-removing .full-check,
  .full-cart.is-removing .marca-corta,
  .full-cart.is-removing .marca-larga { animation: none; }
  .full-cart.is-removing .full-check { opacity: 1; }
}

/* --- Las dos etiquetas, apiladas ------------------------------------------
   Ocupan la misma celda de una rejilla, asi que el boton adopta el ancho de la
   mas larga y se queda quieto. Antes el texto cambiaba y el boton crecia o
   encogia al pasar de "Comprar licencia" a "Quitar del carrito", y tambien al
   cambiar de beat. */
.full-cart-label { display: inline-grid; }
.full-cart-label > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  /* visibility y no solo opacity: con opacity a secas la etiqueta escondida
     sigue ahi para un lector de pantalla y se puede seleccionar con el raton.
     visibility se oculta de verdad y ademas se puede transicionar, asi que
     entra y sale igual de suave. */
  transition: opacity .22s ease, visibility .22s;
}
.lbl-dentro { opacity: 0; visibility: hidden; }
.full-cart.is-added .lbl-fuera { opacity: 0; visibility: hidden; }
.full-cart.is-added .lbl-dentro { opacity: 1; visibility: visible; }

/* --- Correccion: el area de texto del compositor en PC ---------------------
   El panel del compositor centra su contenido en una columna de 820px: la
   cabecera, la barra de contexto, las pestanas, la fila de botones y el pie
   entran todos en ella. El area de texto no: se quedaba pegada al borde
   izquierdo mientras todo lo demas estaba centrado, asi que la mitad derecha
   del panel quedaba vacia y el texto no se alineaba con su propio encabezado.

   La causa es el orden de las reglas, no una falta de regla:
     L2242, dentro de min-width:900px, le da margin-left/right:auto.
     L2376, GLOBAL y POSTERIOR, le da "margin: 10px 14px 0", y ese atajo
     resetea los margenes automaticos.
   Esta va al final y con la misma media query, para que gane la centrada.
   Los 792px son los 820px de la columna menos 14px de cada lado: el area de
   texto queda metida dentro de la misma columna que el resto. */
@media (min-width: 900px) {
  .tool-pane .notes-text,
  .tool-pane[data-pane="lyrics"] .notes-text {
    width: min(792px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Las flechas del carrusel de relacionados -----------------------------
   .related-shell mide los 1280px del contenedor y la rejilla se centra dentro.
   Con 4 tarjetas de 228px y 18px de separacion, las tarjetas ocupan 966px y
   sobran 157px por lado, asi que las flechas -- ancladas a los bordes del
   carril -- quedaban a 135px de la primera tarjeta en PC. Parecian sueltas.

   El ancho se fija al que ocupan exactamente las 4 tarjetas que pinta el
   carrusel (pool[:4]). Asi auto-fit elige 4 columnas de 228, la rejilla llena
   el carril de borde a borde y las flechas a -22px quedan pegadas a las
   tarjetas, medio fuera, como en un carrusel.

   Se escribe como suma y no como 966px para que se vea de donde sale, y el
   max-width:100% deja que en movil mande el ancho de la pantalla como antes. */
.related-shell {
  width: min(calc(4 * 228px + 3 * 18px), 100%);
  margin-left: auto;
  margin-right: auto;
}

/* --- La cabecera no debe moverse al cambiar de idioma ---------------------
   .tool-btn y .cart-btn se dimensionan por su texto, y el ingles es mas corto
   que el espanol: "Componer" mide 135px y "Write" 99; "Carrito 0" mide 114 y
   "Cart 0" 90. Como el bloque de la derecha va pegado al borde, al encogerse
   esos dos botones arrastraban todo lo de su izquierda -- la lupa se movia
   60px y los enlaces del menu hasta 32.

   Con min-width fijado al ancho del espanol, los dos idiomas ocupan lo mismo y
   la cabecera se queda quieta. Se usa min-width y no width porque el carrito
   lleva el numero de articulos: con 12 en vez de 0 tiene que poder crecer, y
   crecera igual en los dos idiomas.

   Solo afecta al escritorio: en movil .header-tools .tool-btn esta oculto y el
   carrito es un icono de 44px. */
@media (min-width: 900px) {
  .header-tools .tool-btn { min-width: 135px; justify-content: center; }
  .header-tools .cart-btn { min-width: 118px; justify-content: center; }
}

/* Los enlaces del menu, con el ancho del idioma mas largo de cada uno.
   Medidos en la cabecera: Inicio 35/Home 37, Catalogo 59/Catalog 50,
   Discos 43/Albums 48, Licencia 53/License 49, Nosotros 59/About 39,
   Talento 48/Talent 40, Contacto 60/Contact 53. Se toma el mayor, asi que
   cada enlace ocupa lo mismo en los dos idiomas y ninguno empuja al de al
   lado. Antes "Nosotros" -> "About" encogia 20px y arrastraba "Talento" y
   "Contacto" hasta 32px. */
@media (min-width: 900px) {
  .main-nav a { text-align: center; }
  .main-nav a:nth-child(1) { min-width: 37px; }
  .main-nav a:nth-child(2) { min-width: 59px; }
  .main-nav a:nth-child(3) { min-width: 48px; }
  .main-nav a:nth-child(4) { min-width: 53px; }
  .main-nav a:nth-child(5) { min-width: 59px; }
  .main-nav a:nth-child(6) { min-width: 48px; }
  .main-nav a:nth-child(7) { min-width: 60px; }
}

/* --- Sin barra de desplazamiento lateral --------------------------------
   La linea bajo el encabezado ya dice cuanto queda de pagina y en que punto
   estas, asi que la barra era un segundo indicador redundante comiendo 15px
   de ancho en el escritorio.

   OJO CON DONDE VA ESTO. Las reglas que habia para lo mismo vivian dentro de
   "@media (max-width: 820px)", asi que solo se aplicaban en movil: en el
   escritorio la barra seguia siendo la del navegador y medía 15px en vez de
   los 6 que pedia la hoja. Esta va AL FINAL DEL ARCHIVO, fuera de cualquier
   media query, para que valga en todos los anchos.

   Se cubren los dos motores: scrollbar-width para Firefox, ::-webkit-scrollbar
   para Chrome y Edge. La rueda, el teclado, el tacto y las anclas siguen
   funcionando igual; solo desaparece el indicador. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

/* --- La fila entera abre el beat (solo en la vista de lista) --------------
   Antes solo se podia pulsar el titulo, la portada y la flecha. Ahora toda la
   fila lleva a la ficha del beat.

   Se hace con un enlace estirado: el ::after del titulo se sale de su caja y
   cubre la fila entera, asi que el clic vale en cualquier punto. Es un solo
   enlace de verdad, no un manejador de clic sobre el articulo: el navegador
   ya sabe que es un enlace (se ve en el cursor, en el foco con el tabulador,
   en "abrir en pestana nueva" y en el menu del boton derecho).

   Los controles se suben por encima para que sigan siendo suyos: el boton de
   reproducir, el de comprar y el precio. Los elementos de rejilla aceptan
   z-index sin necesidad de position, por eso basta con esto. */
.catalog.view-list .beat-card { position: relative; }
.catalog.view-list .beat-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Solo los controles de verdad. Antes subia la fila de acciones entera, y
   entonces el hueco entre el precio y el boton de comprar se tragaba el clic
   sin hacer nada: era una zona muerta dentro de una fila que ahora es
   clicable. El precio no es un control, asi que tambien lleva a la ficha. */
.catalog.view-list .play-btn,
.catalog.view-list .beat-card-actions .btn,
.catalog.view-list .beat-card-open { z-index: 2; }

/* --- La fila en movil, cuadrada -----------------------------------------
   Dos desajustes que se veian a simple vista:

   1. La caja de la portada se quedaba con los 54px del escritorio mientras la
      imagen medía 48, asi que el fondo de la caja asomaba 3px por cada lado y
      dibujaba un marco oscuro alrededor de la portada. Ahora la caja mide lo
      mismo que la imagen.

   2. El boton de reproducir mide 40px y su columna era de 38: se salia 2px y
      rompia la linea vertical de la izquierda. La columna pasa a 40.

   Con eso las tres piezas de la izquierda (play, portada, texto) arrancan en
   una retícula limpia, sin solapes ni marcos que no se pidieron. */
@media (max-width: 899px) {
  .catalog.view-list .beat-card { grid-template-columns: 40px 48px minmax(0, 1fr); }
  .catalog.view-list .beat-card-media { width: 48px; height: 48px; background: transparent; }
  .catalog.view-list .beat-card .play-btn { width: 40px; height: 40px; }
}

/* --- El aviso escondido no debe tragarse los clics ----------------------
   .toast se oculta con opacity: 0, pero la opacidad NO quita el elemento del
   reparto de clics: un elemento transparente sigue recibiendo el puntero. El
   aviso mide unos 354x26 y va fijo cerca del borde inferior, asi que esa
   franja se comia los toques en cualquier punto que cayera debajo -- sin que
   se viera nada raro en pantalla.

   Con pointer-events: none mientras esta escondido, los clics pasan de largo
   hacia lo que hay debajo; al aparecer recupera los suyos. */
.toast { pointer-events: none; }
.toast.is-visible { pointer-events: auto; }

/* --- La fila de la lista no lleva una tercera fila de rejilla ------------
   .beat-card define "grid-template-rows: auto 1fr auto" para la vista de
   cuadricula: portada, cuerpo y acciones, una encima de otra.

   En la vista de lista las areas solo definen DOS filas
   ("play art body" / "play art actions"), asi que la tercera quedaba vacia.
   Una fila de rejilla de altura cero parece inofensiva, pero su row-gap se
   cobra igual: 9px por tarjeta que no dibujaban nada. Con 42 filas son casi
   400px de aire repartidos por la lista, que es lo que hacia que se viera
   suelta y desordenada.

   Se declaran las dos filas que de verdad se usan. Vale para los dos anchos,
   porque el numero de areas es el mismo en escritorio y en movil. */
.catalog.view-list .beat-card { grid-template-rows: auto auto; }

/* --- Los filtros del catalogo -------------------------------------------
   Tres cosas.

   1. La barra. Antes era un flex-wrap con cinco piezas de anchos distintos,
      asi que rompia en un sitio diferente en cada tamano: 178px de alto a
      390, 130 a 600, 74 a 768 y 66 a partir de 900. Ahora es una rejilla con
      las zonas declaradas, y cada tramo tiene su reparto:
        - movil: buscador a lo ancho, chips debajo, y una ultima fila con el
          recuento a la izquierda y los mandos a la derecha;
        - a partir de 760: todo en una fila, con los mandos pegados al borde.
      El recuento se queda junto a los chips en movil, no suelto.

   2. El hueco hasta el primer album. La barra tiene margen inferior y el
      bloque de album su relleno: se sumaban y dejaban casi 150px de vacio.
      Se recorta el margen, que el aire ya lo pone el album.

   3. La aparicion. El panel se abria cambiando display:none por display:grid,
      y display no se puede animar: aparecia de golpe. Ahora se anima con
      grid-template-rows de 0fr a 1fr, que si es interpolable, sobre un panel
      interior de una sola pieza. El contenido se recorta mientras dura, asi
      que no se sale nada mientras crece. Se animan tambien la opacidad, el
      relleno y el margen para que no haya un salto al final. */
/* Tres tramos, cada uno con su reparto. Los cortes no son redondos: salen de
   medir cuando deja de caber cada fila.
     - menos de 620: tres filas (buscador, chips, recuento+mandos).
     - 620 a 899: dos filas. El buscador y los chips comparten la primera
       porque a partir de ahi ya caben juntos.
     - 900 en adelante: una sola fila. Por debajo de 900 no cabe: medido a 768,
       las cuatro piezas suman 800px en una caja de 740. */
.filters-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "search  search"
    "chips   chips"
    "results actions";
  align-items: center;
  gap: 10px 14px;
  padding: 11px 0;
}
.filters-inner .search { grid-area: search; max-width: none; }
.filters-inner .chip-filters { grid-area: chips; }
.filters-inner .results { grid-area: results; }
.filters-inner .filters-actions { grid-area: actions; margin-left: 0; }

@media (min-width: 620px) {
  .filters-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search  chips"
      "results actions";
  }
}

/* A 900 el buscador a 380px no dejaba caber la fila: sumaba 879px en una caja
   de 852 y la barra se iba a 89px de alto. Con el buscador acotado a 320 la
   fila entra justa y la barra baja a 66. */
@media (min-width: 900px) {
  .filters-inner {
    grid-template-columns: minmax(160px, 320px) auto minmax(0, 1fr) max-content max-content;
    grid-template-areas: "search chips . results actions";
  }
  .filters-inner .filters-actions { margin-left: 0; }
}

.filters { margin-bottom: 14px; }

.filters-body {
  /* Ya NO es hijo de la rejilla de la barra: vive en su propio .wrap, debajo.
     Hacia falta sacarlo porque el row-gap de una rejilla se aplica entre
     pistas, y un margen negativo en la pieza no lo cancela -- el panel cerrado
     seguia sumando 10px de separacion. Fuera de la rejilla, su altura no
     cuenta como una fila y cerrado mide cero de verdad. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  overflow: hidden;
  transition:
    grid-template-rows .34s cubic-bezier(.22, .85, .25, 1),
    opacity .26s ease,
    margin-top .34s cubic-bezier(.22, .85, .25, 1),
    padding-top .34s cubic-bezier(.22, .85, .25, 1),
    border-top-color .26s ease;
}
.filters-body.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
  padding-top: 14px;
  border-top-color: var(--line);
}
/* align-items: start, no end. Con "end" cada grupo se pegaba al fondo de su
   celda, y como los selects miden distinto segun si su texto ocupa una linea o
   dos ("Todos los álbumes" y "Orden del catálogo" ocupan dos), las cinco
   etiquetas acababan a cuatro alturas distintas: ALBUM y ORDENAR arriba,
   TONALIDAD y CAMELOT en medio, BPM abajo. Con "start" todas arrancan a la
   misma altura y la fila se lee como una sola linea. */
.filters-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  align-items: start;
}
/* El BPM lleva DOS deslizadores de 116px mas su lectura: 294px que no caben en
   una celda de 190 y se aplastaban a dos cuadraditos.
   OJO: span 2 solo vale cuando HAY dos columnas. En movil el panel tiene una,
   y pedir dos crea una columna implicita que se sale de la pantalla 18px. Por
   eso va dentro del tramo a partir de 620, que es donde auto-fit ya da dos. */
@media (min-width: 620px) {
  .filters-panel .filter-group:first-child { grid-column: span 2; }
}
.filter-label { line-height: 1.25; }
/* Los cuatro desplegables, a la escala del resto del sitio. Los botones miden
   44px (--tacto) y los chips 38; estos estaban en 58 porque los subi para
   igualar la fila cuando "Todos los albumes" y "Orden del catalogo" se partian
   en dos lineas. Sin chevron ya caben en una, asi que 58 solo servia para
   que desentonaran con todo lo demas. */
.filters-panel select { min-height: 42px; padding: 8px 12px; font-size: .84rem; }

/* Limpiar: una pastilla del tamano de su texto, no una barra de 195px que
   ocupaba una celda entera de la rejilla. */
.filters-panel #clear-filters {
  justify-self: start;
  padding: 8px 18px;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Sin animacion para quien la haya pedido fuera. */
@media (prefers-reduced-motion: reduce) {
  .filters-body { transition: none; }
}

/* --- El foco de un select no debe verse como un error -------------------
   site.css, la capa vieja, tiene  select:focus { border-color: var(--blood) }.
   theme.css solo define :focus-visible, que NO coincide al enfocar con el
   raton. Resultado: al hacer clic en uno de los cuatro selects del panel de
   filtros, ese quedaba con el borde ROJO de marca mientras los otros tres
   seguian en gris. Parecia un aviso de error en un desplegable, y como solo
   le pasaba a uno, parecia un fallo de pintado.

   Aqui se cubren los dos caminos: al enfocar con el raton el borde se aviva
   sin anillo, y con el teclado ademas aparece el anillo suave. */
select:focus {
  outline: none;
  border-color: var(--line-strong);
}
select:focus-visible {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(227, 87, 77, .14);
}

/* --- El pulso de compra: solo al pasar por encima ----------------------
   Los botones de compra latian solos, sin parar. Eran 42 animaciones
   simultaneas en el catalogo, y animaban box-shadow, que no se compone en la
   GPU: cada fotograma obligaba a recalcular estilos y repintar.

   Intente conservar el latido con un halo compuesto (opacidad y escala, que si
   se componen), pero no cabe: los botones llevan overflow: hidden para el
   barrido de brillo, asi que un halo exterior queda recortado y ademas hace
   que el texto cuente como desbordado.

   Asi que el aviso se queda donde de verdad se usa: al pasar por encima o al
   enfocar. En reposo no hay ninguna animacion, que es lo que pedia el
   rendimiento; y el adorno aparece justo cuando el dedo o el raton estan
   encima, que es cuando se mira. */
.buy-cta:hover,
.buy-cta:focus-visible {
  box-shadow: 0 0 0 4px rgba(209, 51, 42, .13), var(--gloss-top);
}

/* --- El boton de reproducir, centrado en la PORTADA ---------------------
   .beat-page-media contiene la portada Y la tabla de metadatos, y mide 711px
   frente a los 420 de la imagen. El boton esta en posicion absoluta, asi que
   su 50% era el centro del bloque entero: quedaba 145px por debajo del centro
   de la portada y parecia descolgado.

   Con .beat-page-art de por medio, que solo envuelve la imagen, el 50% vuelve
   a ser el centro de la portada. La caja no cambia ningun tamano: es la misma
   columna, solo que ahora sirve de referencia para el boton. */
.beat-page-art {
  position: relative;
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.beat-page-art img { display: block; width: 100%; }
.related .beat-card-media {
  border: var(--hairline-strong);
  border-radius: var(--radius-lg);
}


/* --- El boton de la ficha del beat, siempre visible ---------------------
   La regla que lo revela solo cubre las tarjetas del catalogo:
       .beat-card:not(.track-row):hover .play-btn { opacity: 1 }
   El boton de la ficha vive en .beat-page-art, que no es una tarjeta, asi que
   ninguna de esas condiciones se cumplia nunca: se quedaba en opacity 0 y el
   boton no aparecia jamas. Medido: 52x52 px, con su fondo, su borde y su
   icono, todo correcto y todo invisible.

   La ficha es una pagina de un solo beat y el boton es su accion principal:
   aqui no tiene sentido esconderlo esperando a que alguien pase el raton. */
.beat-page-art .play-btn { opacity: 1; }

/* --- El carrusel de relacionados ---------------------------------------
   Dos cambios.

   1. Las flechas, mas abiertas. Estaban a -22px, medio montadas sobre la
      primera y la ultima caratula: se comian parte de la portada y parecian
      pegatinas encima del arte. Ahora van a -54px, fuera del carril, con aire
      entre la flecha y la tarjeta.

   2. El recorrido. El contenido se reemplazaba de golpe y solo las tarjetas
      nuevas entraban deslizando 38px -- menos de un sexto de una tarjeta. Con
      tan poco recorrido y sin salida para las viejas, el ojo no leia un
      desplazamiento sino un parpadeo. Ahora las que se van salen por un lado y
      las que llegan entran por el otro, y el recorrido es de una tarjeta
      entera mas su separacion (228 + 18 = 246px), asi que se lee como que el
      carril se corre un puesto. */
/* El aire de la flecha depende del ancho de la ventana, porque el carril mide
   966px y va centrado: lo que sobra por fuera cambia con la pantalla.

   A -80 se consiguen 36px de aire entre la flecha y la caratula, pero solo
   caben cuando la ventana es ancha. A 1024 el carril ocupa 966 de los 976
   disponibles y la flecha se salia 51px de la pantalla; a 900, 56px. Asi que
   el desplazamiento se escala: lo justo por debajo de 1180, lo completo a
   partir de ahi. */
.related-arrow.is-prev { left: -14px; }
.related-arrow.is-next { right: -14px; }
@media (min-width: 1180px) {
  /* 36px de aire: la flecha queda fuera del carril, no encima del arte. */
  .related-arrow.is-prev { left: -80px; }
  .related-arrow.is-next { right: -80px; }
}
@media (max-width: 899px) {
  /* En movil no hay sitio para tanto aire: el carril mide 362px y acaba en
     376 sobre una ventana de 390. A -20 la flecha se salia a 396 y el
     documento desbordaba 6px. A -10 queda en 386, dentro y con 4px de margen:
     un poco mas abierta que antes (-6) sin salirse. */
  .related-arrow.is-prev { left: -10px; }
  .related-arrow.is-next { right: -10px; }
}
.related .beat-grid .beat-card {
  transition: opacity .3s var(--ease-soft), transform .34s cubic-bezier(.22, .85, .25, 1);
}
.related .beat-grid.is-enter-right .beat-card,
.related .beat-grid.is-exit-left .beat-card { opacity: 0; transform: translateX(-246px); }
.related .beat-grid.is-enter-left .beat-card,
.related .beat-grid.is-exit-right .beat-card { opacity: 0; transform: translateX(246px); }

/* --- El carril recorta, y en movil cabe una tarjeta --------------------
   1. Recorte. Las tarjetas se deslizan 246px al cambiar de pagina, y el
      carril no recortaba: las que salian se veian volando fuera de la caja,
      reventando los lados. Con overflow:hidden se deslizan y desaparecen por
      el borde, que es lo que se espera de un carrusel.
      El recorte va en .beat-grid y NO en .related-rail, porque las flechas son
      hermanas de la rejilla: si recortara el carril, se comeria las flechas.

   2. Una tarjeta en movil. En un movil de 390px no caben cuatro tarjetas de
      228: se apilaban en columna y el carrusel se veia como una lista larga.
      Ahora el carril solo enseña una, del ancho disponible, y las flechas
      pasan de una a otra. El reparto lo decide site.js, que en movil pide una
      tarjeta por pagina en vez de cuatro. */
.related .beat-grid { overflow: hidden; }
@media (max-width: 899px) {
  .related .beat-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .related .beat-grid .beat-card { width: 100%; }
  .related-arrow { top: 50%; }
}


/* ==========================================================================
   CURSOR SIN SALTOS (fase 32)

   Auditoria en PC (tools/revisar_cursor.mjs a 1440): ningun efecto `:hover` de la
   portada esta muerto —todos cambian algo—, pero varios cambian propiedades que su
   transicion NO cubre, asi que el cambio entra de golpe:

     - la tarjeta del carril: el `box-shadow` del levantamiento;
     - el boton de reproducir del carril: `transform` y `box-shadow`;
     - «Ver todos» y los enlaces del pie: `transition: all 0s`, o sea ninguna;
     - el boton del carrito: el `box-shadow`.

   Aqui se añaden esas propiedades a la transicion. OJO: esto NO toca la escala del
   carril en movil, porque aquella regla fija `transition-property` con `!important`
   (fase 23) justo para que la escala siga al dedo sin retraso.
   ========================================================================== */
.link-more,
footer a,
.foot a {
  transition: color .16s var(--ease-soft), border-color .16s var(--ease-soft);
}

.beat-card,
.beat-grid .beat-card {
  transition: transform .18s var(--ease-soft), border-color .18s var(--ease-soft),
              box-shadow .24s var(--ease-soft);
}

.play-btn {
  transition: opacity .16s var(--ease-soft), background-color .16s var(--ease-soft),
              border-color .16s var(--ease-soft), box-shadow .2s var(--ease-soft),
              transform .16s var(--ease-soft);
}

.cart-btn,
.menu-btn {
  transition: transform .18s var(--ease-soft), background-color .16s var(--ease-soft),
              border-color .16s var(--ease-soft), box-shadow .2s var(--ease-soft),
              color .16s var(--ease-soft);
}

/* ========================================================================== 
   CIERRE DE ESCRITORIO: PORTADA ORDENADA Y MICROTIPOGRAFIA LEGIBLE (fase 36)

   La portada elige seis beats. Con la rejilla automática entraban cinco y el
   sexto quedaba solo en una segunda fila. En escritorio medio se reparten 3+3;
   en pantalla ancha forman una sola fila de seis. La portada muestra cuatro
   discos representativos y «Ver todos» lleva a la discografía completa.
   ========================================================================== */
@media (min-width: 900px) and (max-width: 1199px) {
  body.page-inicio .beat-grid.picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  body.page-inicio .beat-grid.picks {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body.page-inicio .section-alt .disc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.page-inicio .section-alt .disc-grid .disc-card:nth-child(n + 5) {
    display: none;
  }

  /* Suelo de 10,5 px para las etiquetas de contenido. Se excluyen los
     controles del reproductor completo, que conservan su geometría verificada. */
  :is(.kicker, .results, .album-meta, .filter-label, .link-more,
      .beat-card-badge, .beat-card-track, .beat-card-price small,
      .track-price small, .license-price small, .disc-card-body small,
      .solo-ancho, .talent-rows dt, .site-footer h2, .site-footer h3,
      .hero-kicker, .beat-card-album-name, .breadcrumb a,
      .disc-nav-link span, .range-value, .license-foot) {
    font-size: .7rem;
  }
  .beat-card .chip,
  .catalog .chip { font-size: .7rem; }

  :is(.hero-release-tag small, .chip-filter, .breadcrumb span, .disco-meta,
      .spec-list dt, .beat-page-info > .chips .chip, .dossier-kicker,
      .license-kicker, .compose-kicker, .beat-nav-dir,
      .talent-group-head span, .about-head,
      /* El carrito es un FORMULARIO: aquí el usuario escribe su nombre legal y
         sus datos para la licencia. Sus etiquetas se colaron fuera del suelo por
         el nombre (`cart-lic-kicker` no es `license-kicker`), no por criterio.
         Medido antes: 8,64 px las etiquetas de campo y 8,96 px el encabezado. */
      .cart-lic-kicker, .cart-lic-hint, .cart-field span) {
    font-size: .7rem;
  }
}


/* ==========================================================================
   MESA DE COMPOSICIÓN (rediseño del panel del compositor)
   Barra superior con el beat, pestañas con nombre siempre visible, editor con
   acciones arriba y columna lateral de estructura/estado.
   ========================================================================== */
.notes {
  position: fixed; inset: 0; z-index: 400;
  width: auto; max-width: none; max-height: none;
  border: 0; border-radius: 0;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  transform: translateY(102%);
  transition: transform .3s var(--ease);
}
.notes.is-open { transform: none; }

.notes-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 14px 20px 12px;
  border-bottom: var(--hairline);
}
.notes-title { min-width: 0; }
.notes-kicker {
  color: var(--blood-text);
  font-family: var(--font);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 2px;
}
.notes-title h2 {
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 800;
  letter-spacing: .01em; color: var(--text);
}
.notes-context {
  min-width: 0; width: 100%; max-width: 680px;
  margin: 0; padding: 0; justify-self: center;
}
.notes-top .drawer-close { position: static; }
.notes-strip { width: 100%; }
.notes-strip-empty {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface); border: var(--hairline); border-radius: var(--radius);
}
.notes-strip-empty p { margin: 0; color: var(--muted-2); font-size: .8rem; }
.notes-strip-actions { display: flex; align-items: center; gap: 8px; }
.notes-strip-empty .btn { min-height: 34px; padding: 7px 12px; font-size: .66rem; }

/* Pestañas: icono + nombre siempre visible. */
.tool-tabs {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 6px 20px 0;
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: var(--hairline);
}
.tool-tabs::-webkit-scrollbar { display: none; }
.tool-tab {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  background: transparent;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted-2);
  font-family: var(--font);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tool-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tool-tab span { display: inline; }
.tool-tab:hover { color: var(--text); }
.tool-tab.is-active {
  background: transparent;
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Cuerpo: editor a la izquierda, estructura/estado a la derecha. */
.notes-body {
  flex: 1; min-height: 0;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  padding: 16px 20px 20px;
}
.notes-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.notes-side {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.side-block {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 14px;
}
.side-kicker {
  color: var(--blood-text);
  font-family: var(--font);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 10px;
}
.side-structure {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.side-structure li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-bottom: 6px;
  border-bottom: var(--hairline);
  color: var(--text); font-size: .8rem;
}
.side-structure li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-structure small {
  color: var(--muted-2);
  font-size: .6rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.side-empty { margin: 0; color: var(--muted-2); font-size: .76rem; line-height: 1.5; }
.side-stats { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.side-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.side-stats dt {
  color: var(--muted-2);
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.side-stats dd { margin: 0; color: var(--text); font-weight: 700; font-size: .86rem; }
.side-hint { margin: 0; color: var(--muted-2); font-size: .76rem; line-height: 1.5; }

/* Editor: barra de secciones + acciones arriba, texto debajo. */
.tool-pane {
  flex: 1; min-height: 0;
  display: none; flex-direction: column;
  padding: 0; overflow: hidden;
}
.tool-pane.is-active { display: flex; }
.tool-pane .pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.editor-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px;
}
.section-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.section-chip {
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  padding: 6px 11px;
  font-family: var(--font);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.section-chip:hover { color: var(--text); border-color: var(--accent); }
.editor-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.editor-actions .notes-tool { padding: 7px 10px; }
.notes-text {
  flex: 1; min-height: 0;
  margin: 0; padding: 16px 18px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem; font-weight: 500; line-height: 1.7;
  resize: none;
}
.notes-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px 0;
  color: var(--muted-2);
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 1080px) {
  .notes-top { gap: 12px; padding: 12px 16px 10px; }
  .notes-context { max-width: none; }
  .tool-tabs { padding-inline: 16px; }
  .notes-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; padding: 14px 16px 16px; }
}

@media (max-width: 899px) {
  .notes-top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title close" "context context";
    gap: 8px 12px;
    padding: 12px 14px 10px;
  }
  .notes-title { grid-area: title; }
  .notes-top .drawer-close { grid-area: close; }
  .notes-context { grid-area: context; max-width: none; }
  .tool-tabs { padding: 6px 14px 0; gap: 2px; }
  .tool-tab { padding: 9px 10px 11px; font-size: .62rem; gap: 5px; }
  .notes-body { display: block; padding: 12px 14px 14px; }
  .notes-side { display: none; }
  .notes-main { height: 100%; }
  .editor-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .section-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .section-chips::-webkit-scrollbar { display: none; }
  .section-chip { flex: 0 0 auto; }
  .editor-actions { margin-left: 0; justify-content: space-between; }
  .editor-actions .notes-tool { flex: 1; justify-content: center; }
  .notes-text { padding: 14px; }
  .notes-foot { padding: 8px 0 0; }
  .tool-pane .pane-scroll { padding: 12px; }
}


/* Jerarquía del editor: secciones y acciones con su propia etiqueta. */
.editor-bar { align-items: flex-end; }
.editor-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.editor-block-actions { margin-left: auto; align-items: flex-end; }
.editor-label {
  color: var(--muted-2);
  font-family: var(--font);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.editor-actions { margin-left: 0; }
.editor-actions .notes-tool.is-danger {
  color: var(--blood-text);
  border: 1px solid rgba(156, 21, 25, .35);
}
.editor-actions .notes-tool.is-danger:hover {
  background: rgba(156, 21, 25, .22);
  color: var(--blood-text);
}
@media (max-width: 899px) {
  .editor-bar { align-items: stretch; }
  .editor-block-actions { margin-left: 0; align-items: stretch; }
  .editor-actions { justify-content: space-between; }
}


/* ==========================================================================
   CARRITO REDISEÑADO
   Estructura: cabecera con contador, cuerpo desplazable (selección + datos de
   licencia) y pie fijo con resumen y pago. El carrito vacío no enseña el
   formulario ni el botón de compra: solo invita a elegir un beat.
   ========================================================================== */
.cart-drawer {
  width: min(440px, 100%);
  background: var(--bg-deep);
  border-left: var(--hairline-strong);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .95);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.drawer-kicker {
  color: var(--blood-text);
  font-family: var(--font);
  font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 3px;
}
.cart-drawer .drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px 14px;
  border-bottom: var(--hairline);
  flex-shrink: 0;
}
.cart-head-title h2 { display: flex; align-items: center; gap: 8px; }
.cart-head-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--surface-2); border: var(--hairline); border-radius: 999px;
  color: var(--muted); font-family: var(--font); font-size: .64rem; font-weight: 700;
}
.cart-drawer .drawer-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.cart-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.cart-section-head h3 {
  margin: 0; color: var(--muted);
  font-family: var(--font); font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.cart-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--surface-2); border-radius: 999px;
  color: var(--muted); font-size: .64rem; font-weight: 700;
}
.cart-drawer #cart-items {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; flex: 0 0 auto; overflow: visible;
}
.cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 12px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.cart-item img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; }
.cart-item-main { min-width: 0; }
.cart-item-title {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700; line-height: 1.25;
}
.cart-item-title:hover { color: var(--blood-text); }
.cart-item-meta {
  margin: 4px 0 0;
  color: var(--muted-2);
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
}
.cart-item-lic {
  margin: 5px 0 0;
  color: var(--blood-text);
  font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
}
.cart-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-item-price { font-family: var(--font-display); font-size: .95rem; font-weight: 800; color: var(--text); }
.cart-qty {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: var(--hairline); border-radius: 999px;
  overflow: hidden;
}
.cart-qty button {
  width: 26px; height: 26px;
  border: 0; background: transparent;
  color: var(--muted); font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.cart-qty button:hover { color: var(--text); }
.cart-qty span { min-width: 22px; text-align: center; font-size: .72rem; font-weight: 700; }
.cart-item-remove {
  background: none; border: 0; padding: 0;
  color: var(--muted-2);
  font-family: var(--font); font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.cart-item-remove:hover { color: var(--blood-text); }

.cart-lic {
  padding: 14px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
}
.cart-lic .cart-section-head { margin-bottom: 12px; }
.cart-field { display: block; margin-bottom: 10px; }
.cart-field > span {
  display: block; margin-bottom: 5px;
  color: var(--muted-2);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cart-drawer .cart-field input {
  width: 100%; height: 42px; padding: 0 12px;
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font); font-size: .86rem; font-weight: 500;
}
.cart-drawer .cart-field input:focus { border-color: var(--accent); outline: none; }
.cart-drawer .cart-field input::placeholder { color: var(--muted-2); font-weight: 450; }
.cart-lic-hint { margin: 0; color: var(--muted-2); font-size: .66rem; line-height: 1.5; }

.cart-accept {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .74rem; line-height: 1.45;
  cursor: pointer;
}
.cart-accept input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.cart-accept a { margin-left: auto; color: var(--blood-text); white-space: nowrap; }

.cart-drawer .drawer-foot {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-deep);
  border-top: var(--hairline-strong);
}
.cart-summary { display: flex; flex-direction: column; gap: 6px; }
.cart-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-summary-row span {
  color: var(--muted);
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.cart-summary-row strong {
  color: var(--blood-text);
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em;
}
.cart-drawer .drawer-note { margin: 0; color: var(--muted-2); font-size: .66rem; line-height: 1.5; }
.cart-foot-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-foot-links .btn { min-height: 32px; padding: 6px 10px; font-size: .62rem; }
.cart-secure {
  color: var(--muted-2);
  font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; text-align: right;
}

.cart-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 28px 8px;
}
.cart-empty-icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--blood-text);
}
.cart-empty-icon svg { width: 26px; height: 26px; }
.cart-empty-title { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--text); }
.cart-empty-text { margin: 0; max-width: 240px; color: var(--muted-2); font-size: .78rem; line-height: 1.5; }
.cart-empty .btn { margin-top: 6px; }

.cart-drawer.is-empty .cart-section-head,
.cart-drawer.is-empty .cart-lic,
.cart-drawer.is-empty .cart-accept,
.cart-drawer.is-empty .drawer-foot { display: none; }
.cart-drawer.is-empty .drawer-scroll { justify-content: center; overflow: hidden; }

@media (max-width: 820px) {
  .cart-drawer { width: 100%; border-left: 0; box-shadow: none; }
  .cart-drawer .drawer-head { padding: 14px 14px 12px; }
  .cart-drawer .drawer-scroll { padding: 14px; }
  .cart-drawer .drawer-foot { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cart-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  .cart-item img { width: 56px; height: 56px; }
  .cart-head-count { min-width: 20px; height: 20px; }
}

/* El vacío se lee en caja normal, no todo en mayúsculas. */
.cart-empty-title, .cart-empty-text { text-transform: none; letter-spacing: 0; }

/* La nota de cantidad vive con la selección, no en el pie. */
.cart-rule { margin: 8px 2px 0; color: var(--muted-2); font-size: .66rem; line-height: 1.5; }
.cart-drawer.is-empty .cart-rule { display: none; }
.cart-drawer .drawer-foot .cart-accept { margin: 0; }

/* =====================================================================
   BUSCADOR GLOBAL DEL CABEZAL
   ---------------------------------------------------------------------
   Panel de sugerencias que busca en beats, discos y páginas. Las letras
   que coinciden se marcan con <mark>. En móvil se convierte en una hoja
   de pantalla completa para no pelear con el teclado.
   ===================================================================== */
.search-overlay {
  position: fixed; inset: 0;
  z-index: 180;
  background: rgba(5, 4, 3, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.search-panel {
  position: fixed;
  z-index: 190;
  top: calc(var(--header-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100vh - var(--header-h) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(165deg, #17120e 0%, #0d0a08 100%);
  border: 1px solid rgba(226, 208, 176, .2);
  border-radius: 18px;
  box-shadow: 0 34px 90px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.search-panel[hidden], .search-overlay[hidden] { display: none !important; }
body.search-open { overflow: hidden; }
.search-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 20px 22px 0;
}
.search-kicker {
  margin: 0 0 4px;
  color: var(--blood-text);
  font-size: .62rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
}
.search-panel-title-wrap h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--text);
}
.search-close {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: var(--hairline-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.search-close svg { width: 16px; height: 16px; fill: currentColor; }
.search-close:hover, .search-close:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
.search-field {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 18px 22px 12px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(209, 51, 42, .12); }
.search-field-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--muted-2); pointer-events: none; }
.search-field input {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 0;
  border: 0; background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: .01em;
  outline: none;
}
.search-field input::placeholder { color: var(--muted-2); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted-2);
  cursor: pointer;
}
.search-clear svg { width: 13px; height: 13px; fill: currentColor; }
.search-clear:hover { color: var(--text); }
.search-panel-body { min-height: 0; overflow-y: auto; padding: 0 22px 18px; }
.search-hint {
  margin: 0 0 10px;
  color: var(--muted-2);
  font-size: .74rem; line-height: 1.5;
}
.search-results { display: flex; flex-direction: column; gap: 4px; }
.search-result {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.search-result:hover, .search-result:focus-visible, .search-result.is-active {
  background: var(--surface-2);
  border-color: var(--line-strong);
  outline: none;
}
.search-result-type {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted-2);
  font-size: .52rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.search-result-type.is-beat { color: var(--blood-text); border-color: rgba(209, 51, 42, .35); }
.search-result-type.is-album { color: var(--forest-text); border-color: rgba(217, 172, 90, .32); }
.search-result-type.is-page { color: #a8c3d8; border-color: rgba(168, 195, 216, .25); }
.search-result-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-result-title {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 750; line-height: 1.25;
  text-overflow: ellipsis; white-space: nowrap;
}
.search-result-meta {
  overflow: hidden;
  color: var(--muted-2);
  font-size: .7rem; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap;
}
.search-result-meta mark, .search-result-title mark {
  padding: 0 1px;
  border-radius: 2px;
  background: #e3b461;
  color: #1a1208;
  font-weight: 800;
}
.search-result-go { color: var(--muted-2); font-size: 1rem; }
.search-empty {
  margin: 6px 0 12px;
  padding: 18px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: .82rem; line-height: 1.55;
}
.search-all {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 8px; padding: 12px 13px;
  border-top: var(--hairline);
  color: var(--blood-text);
  font-size: .78rem; font-weight: 700;
  text-decoration: none;
}
.search-all svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.search-all:hover { color: var(--text); }
.search-result mark { background: #e3b461; color: #1a1208; }
@media (max-width: 820px) {
  .search-panel {
    top: 0; left: 0; transform: none;
    width: 100%; max-height: none; height: 100dvh;
    border: 0; border-radius: 0;
  }
  .search-panel-head { padding: 18px 16px 0; }
  .search-field { margin: 14px 16px 10px; }
  .search-panel-body { padding: 0 16px 20px; }
  .search-results { padding-bottom: 8px; }
  .search-result { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px; }
  .search-result-title { font-size: .95rem; }
  .search-result-meta { font-size: .67rem; }
  .search-result-type { font-size: .48rem; padding: 0 6px; }
}

.search-clear[hidden], .search-empty[hidden], .search-all[hidden] { display: none !important; }
.search-panel, .search-overlay { box-sizing: border-box; }

/* El filtro marca hidden en tarjetas y bloques. Las reglas de grid/flex del
   tema pisan el display:none nativo del atributo, asi que el catalogo contaba
   resultados pero seguia mostrando todas las tarjetas. */
#catalog .beat-card[hidden],
#catalog .album-block[hidden],
#flat-grid[hidden],
#empty-state[hidden] { display: none !important; }
.search-result-type.is-talent { color: #d9ac5a; border-color: rgba(217, 172, 90, .32); }

/* =====================================================================
   TERMINOS LL-2026
   ===================================================================== */
.terms-version {
  margin: 18px 0 0;
  color: var(--muted-2);
  font-size: .76rem; letter-spacing: .02em;
}
.terms-version strong { color: var(--text); font-weight: 700; }
.terms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.terms-card {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 190px;
  padding: 16px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.terms-card:hover, .terms-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface-2);
  outline: none;
  transform: translateY(-2px);
}
.terms-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.terms-card-kind {
  color: var(--blood-text);
  font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.terms-card-code {
  color: var(--muted-2);
  font-family: var(--font); font-size: .56rem; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.terms-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem; line-height: 1.15; letter-spacing: -.02em;
}
.terms-card-price {
  margin: 0;
  color: var(--blood-text);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 800;
}
.terms-card-meta { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.terms-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
  border-top: var(--hairline);
  color: var(--muted-2); font-size: .56rem;
}
.terms-card-foot code { color: var(--muted); font-size: .58rem; }
.terms-back { margin: 18px 0 0; color: var(--muted); font-size: .76rem; }
.terms-back a { color: var(--blood-text); text-decoration: none; }
.terms-back a:hover { color: var(--text); }

.legal-doc {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 26px 30px;
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.legal-doc-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: var(--hairline);
  color: var(--muted-2); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
}
.legal-doc-meta code {
  color: var(--text); font-size: .62rem; letter-spacing: .02em; text-transform: none;
  overflow-wrap: anywhere;
}
.legal-doc-note {
  margin: 16px 0 24px;
  padding: 12px 14px;
  border-left: 2px solid var(--blood);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .74rem; line-height: 1.55;
}
.legal-doc-body { color: #d8cec0; font-size: .82rem; line-height: 1.68; }
.legal-doc-body h2 {
  margin: 26px 0 8px;
  padding-top: 16px;
  border-top: var(--hairline);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2;
}
.legal-doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc-body h3 {
  margin: 18px 0 5px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .92rem; letter-spacing: -.01em; line-height: 1.3;
}
.legal-doc-body p { margin: 0 0 9px; }
.legal-doc-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .terms-grid { grid-template-columns: 1fr; }
  .legal-doc { padding: 16px 14px 20px; border-radius: var(--radius); }
  .legal-doc-body { font-size: .78rem; line-height: 1.62; }
}

/* =====================================================================
   CATALOGO DE LICENCIAS
   ===================================================================== */
.license-catalog-section { padding-top: clamp(38px, 6vw, 74px); }
.license-catalog-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  margin-bottom: 24px;
}
.license-catalog-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.05; letter-spacing: -.035em;
}
.license-catalog-note {
  max-width: 430px; margin: 0;
  color: var(--muted); font-size: .78rem; line-height: 1.55;
}
.license-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.license-catalog-card {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 17px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
}
.license-catalog-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.license-catalog-kind {
  color: var(--blood-text);
  font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.license-catalog-code {
  color: var(--muted-2);
  font-size: .54rem; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.license-catalog-card h3 {
  margin: 10px 0 4px;
  font-family: var(--font-display);
  font-size: 1.14rem; line-height: 1.15; letter-spacing: -.025em;
}
.license-catalog-price {
  margin: 0;
  color: var(--blood-text);
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
}
.license-catalog-small { margin: 3px 0 0; color: var(--muted-2); font-size: .64rem; line-height: 1.4; }
.license-catalog-available {
  display: inline-flex; align-self: flex-start;
  margin: 9px 0 0; padding: 3px 7px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--muted); font-size: .54rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.license-catalog-requires { margin: 8px 0 0; color: var(--forest-text); font-size: .65rem; line-height: 1.4; }
.license-catalog-list {
  display: flex; flex-direction: column; gap: 5px;
  margin: 13px 0 14px; padding: 0;
  list-style: none;
}
.license-catalog-list li {
  position: relative; padding-left: 13px;
  color: var(--muted); font-size: .69rem; line-height: 1.45;
}
.license-catalog-list li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--blood);
}
.license-catalog-specs {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: auto; padding-top: 11px;
  border-top: var(--hairline);
  color: var(--muted-2); font-size: .61rem; line-height: 1.4;
}
.license-catalog-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 11px;
  border-top: var(--hairline);
  color: var(--blood-text);
  font-size: .7rem; font-weight: 700; text-decoration: none;
}
.license-catalog-link:hover, .license-catalog-link:focus-visible { color: var(--text); outline: none; }
@media (max-width: 1050px) {
  .license-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .license-catalog-head { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 620px) {
  .license-catalog { grid-template-columns: 1fr; }
  .license-catalog-card { padding: 15px; }
}
.search-result-type.is-terms { color: #c8b6e2; border-color: rgba(200, 182, 226, .28); }

/* Selector de licencia en la ficha del beat */
.license-picker {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 12px;
}
.license-picker label {
  color: var(--muted-2);
  font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.license-picker select {
  width: 100%;
  padding: 10px 12px;
  border: var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: .84rem; font-weight: 600;
  cursor: pointer;
}
.license-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Add-ons de la ficha del beat */
.license-addons {
  margin: 14px 0 0;
  padding: 14px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.license-addons h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: .95rem; letter-spacing: -.02em;
}
.license-addons-note { margin: 0 0 10px; color: var(--muted-2); font-size: .68rem; line-height: 1.45; }
.license-addon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-top: var(--hairline);
}
.license-addon > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.license-addon strong { font-size: .82rem; }
.license-addon span { color: var(--blood-text); font-size: .74rem; font-weight: 700; }
.license-addon small { color: var(--muted-2); font-size: .62rem; line-height: 1.4; }
.license-addon .btn { flex: 0 0 auto; }
.cart-base-field[hidden] { display: none !important; }
.cart-base-field small { display: block; margin-top: 5px; }

/* Politicas legales */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 2px 0 14px;
  border-top: var(--hairline);
  color: var(--muted-2);
  font-size: .68rem;
}
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--text); }
.policy-doc { color: #d8cec0; font-size: .86rem; line-height: 1.72; }
.policy-doc h2 {
  margin: 26px 0 8px;
  padding-top: 16px;
  border-top: var(--hairline);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2;
}
.policy-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.policy-doc p { margin: 0 0 10px; }
.policy-doc ul { margin: 6px 0 12px; padding-left: 20px; }
.policy-doc li { margin: 4px 0; }
.policy-doc a { color: var(--blood-text); }
@media (max-width: 620px) { .policy-doc { font-size: .8rem; line-height: 1.65; } }

/* Pagina de upgrades */
.upgrade-panel { max-width: 620px; margin: 0 auto; }
.upgrade-form { display: flex; flex-direction: column; gap: 12px; }
.upgrade-form .cart-field span { color: var(--muted-2); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.upgrade-form .cart-field input,
.upgrade-form .cart-field select {
  width: 100%; padding: 11px 12px;
  border: var(--hairline-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: .86rem;
}
.upgrade-price {
  margin: 2px 0 4px; padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  color: var(--blood-text); font-size: .82rem; font-weight: 700;
}
@media (max-width: 620px) { .upgrade-panel { max-width: none; } }

/* Contenedor del sello: discos, artistas y productores */
.label-doors {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.label-door {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 300px;
  padding: 28px 26px 24px;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--gloss-soft);
  transition: transform .18s ease, border-color .18s ease;
}
.label-door:hover { transform: translateY(-4px); border-color: var(--accent); }
.label-door-num {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: var(--accent);
}
.label-door h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em;
  margin: 0;
}
.label-door p {
  font-family: var(--font); font-size: .92rem; line-height: 1.65;
  color: var(--muted); margin: 0;
}
.label-door-cta {
  margin-top: auto; font-family: var(--font);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blood-text);
}
.label-manifesto {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.label-manifesto h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.15;
  margin: 0;
}
.label-manifesto p {
  font-family: var(--font); font-size: 1rem; line-height: 1.75;
  color: var(--muted); margin: 0;
}
.section-tight { padding-top: 0; }
.talent-cards-page { margin-bottom: 18px; }
.producer-foundation {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 28px; margin-bottom: 26px;
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: var(--radius-lg);
}
.producer-foundation h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 4px 0 8px;
}
.producer-foundation p { color: var(--muted); margin: 0; max-width: 640px; }
.section-note { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
.section-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 980px) {
  .label-doors { grid-template-columns: 1fr; }
  .producer-foundation { flex-direction: column; align-items: flex-start; }
}

.section-subtitle {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em;
  margin: 0 0 6px;
}

/* Discos por año, roster y productores */
.disc-year { margin-bottom: 56px; }
.disc-year:last-child { margin-bottom: 0; }
.disc-year-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: var(--hairline);
}
.disc-year-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin: 0;
}
.disc-year-head p { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.disc-view-toggle { display: inline-flex; border: var(--hairline-strong); border-radius: 999px; overflow: hidden; }
.disc-view-toggle button {
  border: 0; background: transparent; color: var(--muted);
  font-family: var(--font); font-size: .62rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
}
.disc-view-toggle button.is-active { background: var(--blood); color: var(--on-blood); }

.disc-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
.disc-grid.is-list .disc-card {
  display: grid; grid-template-columns: 88px 1fr; align-items: center;
  gap: 16px; padding: 10px; border: var(--hairline); border-radius: var(--radius-md);
}
.disc-grid.is-list .disc-card-art { width: 88px; height: 88px; }
.disc-grid.is-list .disc-card-body { display: flex; flex-direction: column; gap: 2px; }
.disc-grid.is-list .disc-card-numeral { display: none; }

.roster-empty {
  max-width: 760px; padding: 30px 32px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--gloss-soft);
}
.roster-empty h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 12px;
}
.roster-empty p { color: var(--muted); margin: 0 0 8px; line-height: 1.7; }
.roster-future { max-width: 760px; margin-top: 34px; }
.roster-future h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0 0 10px; }
.roster-future ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }

.producer-profile {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; padding: 30px 32px; margin-bottom: 34px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--gloss-soft);
}
.producer-profile-copy { max-width: 620px; }
.producer-profile h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); margin: 4px 0 2px;
}
.producer-profile p { color: var(--muted); line-height: 1.7; margin: 8px 0 0; }
.producer-role { color: var(--blood-text) !important; font-weight: 700; margin-top: 0 !important; }
.producer-stats {
  display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 16px 26px; margin: 0; padding: 0;
}
.producer-stats div { border-left: 2px solid var(--blood); padding-left: 10px; }
.producer-stats dt {
  font-size: .54rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}
.producer-stats dd {
  font-family: var(--font-display); font-size: 1.5rem; margin: 3px 0 0;
}
.producer-works { margin-bottom: 24px; }
.producer-works h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 0 0 12px; }
.producer-discs {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.producer-discs a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; background: var(--surface-2);
  border: var(--hairline); border-radius: var(--radius-sm);
}
.producer-discs a:hover { border-color: var(--accent); }
.producer-discs strong { font-family: var(--font); font-size: .86rem; }
.producer-discs span { color: var(--muted); font-size: .72rem; }

@media (max-width: 900px) {
  .producer-profile { flex-direction: column; }
  .disc-grid.is-list .disc-card { grid-template-columns: 72px 1fr; }
  .disc-grid.is-list .disc-card-art { width: 72px; height: 72px; }
}

/* Hub del sello */
.hub-hero { padding: clamp(36px, 6vw, 84px) 0 clamp(30px, 5vw, 64px); }
.hub-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hub-hero-copy h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: .92;
  letter-spacing: -.055em; margin: 8px 0 18px;
}
.hub-hero-copy .page-lead { max-width: 560px; }
.hub-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 26px 0 24px; padding: 16px 0;
  border-top: var(--hairline); border-bottom: var(--hairline);
}
.hub-stats strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1;
}
.hub-stats span {
  display: block; margin-top: 5px; color: var(--muted-2);
  font-size: .54rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.hub-collage {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 82px;
  gap: 8px; transform: rotate(-2deg);
}
.hub-collage img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(253,247,240,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.hub-collage img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.hub-collage img:nth-child(2) { grid-column: span 2; }
.hub-collage img:nth-child(5) { grid-column: span 2; }

.hub-body { padding-top: 0; }
.hub-feature {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 26px; align-items: center;
  padding: 28px; margin-bottom: 18px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--gloss-soft);
  transition: border-color .18s ease, transform .18s ease;
}
.hub-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-feature-copy h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); margin: 4px 0 8px; letter-spacing: -.03em; }
.hub-feature-copy p { color: var(--muted); line-height: 1.65; margin: 0 0 16px; max-width: 420px; }
.hub-num {
  font-family: var(--font-display); color: var(--accent);
  font-size: 1rem; letter-spacing: .08em;
}
.hub-cta {
  display: inline-block; margin-top: auto;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blood-text);
}
.hub-feature-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hub-feature-art figure { margin: 0; min-width: 0; }
.hub-feature-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.hub-feature-art figcaption {
  display: block; margin-top: 6px; color: var(--muted-2);
  font-size: .52rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hub-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hub-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 270px; padding: 28px;
  background: var(--surface-2); border: var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .18s ease, transform .18s ease;
}
.hub-panel:hover { border-color: var(--accent); transform: translateY(-2px); }
.hub-panel h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; letter-spacing: -.03em; }
.hub-panel p { color: var(--muted); line-height: 1.65; margin: 0 0 16px; max-width: 360px; position: relative; z-index: 1; }
.hub-panel-big {
  position: absolute; right: 18px; top: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5rem, 11vw, 9rem); line-height: 1;
  color: rgba(178,31,26,.20); pointer-events: none; user-select: none;
}
.hub-panel-name { font-size: clamp(3.2rem, 7vw, 6rem); letter-spacing: -.06em; }
.hub-manifesto {
  max-width: 820px; margin: 64px auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hub-manifesto h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.12; letter-spacing: -.03em; margin: 0; }
.hub-manifesto p:not(.kicker) { color: var(--muted); line-height: 1.75; margin: 0; max-width: 680px; }

@media (max-width: 980px) {
  .hub-hero-grid, .hub-feature { grid-template-columns: 1fr; }
  .hub-collage { max-width: 540px; }
  .hub-duo { grid-template-columns: 1fr; }
}

/* Números grandes en Discos y Productores */
.disc-year-head h2 {
  color: var(--accent);
  font-size: clamp(3.4rem, 7.5vw, 6.4rem);
  letter-spacing: -.05em;
}
.producer-profile { position: relative; overflow: hidden; }
.producer-profile-copy, .producer-stats { position: relative; z-index: 1; }
.producer-profile-num {
  position: absolute; right: 18px; bottom: -42px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(9rem, 18vw, 16rem); line-height: .8;
  color: rgba(178,31,26,.18);
  pointer-events: none; user-select: none; z-index: 0;
}

/* Ajuste final: número grande en la tarjeta de Discos y en Productores */
.hub-feature {
  grid-template-columns: auto minmax(0, .82fr) minmax(0, 1.1fr);
  position: relative; overflow: hidden;
}
.hub-feature-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5rem, 10vw, 9rem); line-height: .8;
  color: var(--accent); letter-spacing: -.06em;
  align-self: center;
}
.producer-profile {
  display: block;
  padding: 30px 250px 30px 32px;
}
.producer-stats {
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  margin-top: 20px; max-width: 620px;
}
.producer-profile-num {
  top: 50%; bottom: auto; transform: translateY(-50%);
  right: 34px; font-size: clamp(8rem, 15vw, 13rem);
}
@media (max-width: 980px) {
  .hub-feature { grid-template-columns: 1fr; }
  .hub-feature-big { font-size: 4.5rem; }
  .producer-profile { padding: 26px 26px 28px; }
  .producer-profile-num {
    top: auto; bottom: -18px; transform: none;
    right: 16px; font-size: 8rem;
  }
}

/* Tarjeta Discos: el 7 difuminado va antes de las portadas */
.hub-feature { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.hub-feature-big { display: none; }
.hub-feature-art {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 14px; align-items: center; min-width: 0;
}
.hub-feature-covers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; min-width: 0;
}
.hub-feature-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(5rem, 11vw, 9rem); line-height: 1;
  color: rgba(178,31,26,.20);
  letter-spacing: -.06em; user-select: none; pointer-events: none;
}
@media (max-width: 980px) {
  .hub-feature-art { grid-template-columns: 1fr; }
  .hub-feature-num { font-size: 5.5rem; justify-self: start; }
}
@media (max-width: 620px) {
  .hub-feature-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ajuste del 7: más aire con las portadas y un poco más arriba */
.hub-feature-art { gap: 26px; }
.hub-feature-num { transform: translateY(-14px); }
@media (max-width: 980px) {
  .hub-feature-num { transform: none; }
}

/* Ajuste fino: más aire, un poco más arriba y sin pegarse al borde */
.hub-feature-art { gap: 34px; }
.hub-feature-num { transform: translate(-4px, -18px); }
@media (max-width: 980px) {
  .hub-feature-num { transform: none; }
}

/* Tres tarjetas iguales: Discos, Artistas y Productores */
.hub-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hub-cards .hub-panel { min-height: 300px; }
@media (max-width: 980px) {
  .hub-cards { grid-template-columns: 1fr; }
}

/* Tarjetas largas, una sobre otra */
.hub-cards {
  display: flex; flex-direction: column; gap: 18px;
}
.hub-cards .hub-panel {
  width: 100%; min-height: 230px; padding: 30px 34px;
}
.hub-cards .hub-panel p { max-width: 760px; }
.hub-cards .hub-panel-big { right: 34px; top: 10px; }
@media (max-width: 620px) {
  .hub-cards .hub-panel { min-height: 240px; padding: 26px 24px; }
  .hub-cards .hub-panel h2 { padding-right: 72px; }
  .hub-cards .hub-panel-big { font-size: 4.4rem; right: 16px; top: 12px; }
}

/* Números centrados solo verticalmente, pegados a la derecha */
.hub-cards .hub-panel-big {
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 620px) {
  .hub-cards .hub-panel-big {
    top: 50%;
    transform: translateY(-50%);
  }
  .hub-cards .hub-panel p { padding-right: 58px; }
}

/* Página de Productores: taller del sello */
.producer-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 4vw, 44px); }
.producer-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 5vw, 58px); align-items: center;
  margin-top: 10px;
}
.producer-hero-copy h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: .95;
  letter-spacing: -.05em; margin: 0 0 16px;
}
.producer-hero-copy .page-lead { max-width: 580px; }
.producer-hero-stats { margin-top: 24px; margin-bottom: 0; }
.producer-hero-card {
  position: relative; overflow: hidden;
  padding: 30px 32px 28px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--gloss-soft);
}
.producer-hero-card > * { position: relative; z-index: 1; }
.producer-hero-card h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; margin: 4px 0 2px;
  letter-spacing: -.04em;
}
.producer-hero-role {
  color: var(--blood-text) !important; font-weight: 800;
  font-size: .62rem !important; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 14px !important;
}
.producer-hero-card p { color: var(--muted); line-height: 1.7; margin: 0 0 18px; }
.producer-hero-num {
  position: absolute; right: 24px; top: 2px; z-index: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(7rem, 15vw, 12rem); line-height: .8;
  color: rgba(178,31,26,.18); pointer-events: none; user-select: none;
}
.producer-body { padding-top: 0; }
.producer-works-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: var(--hairline);
}
.producer-works-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; letter-spacing: -.03em;
}
.producer-works-head span {
  color: var(--muted-2); font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.producer-albums { display: flex; flex-direction: column; gap: 10px; }
.producer-album {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 10px 16px 10px 10px;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color .18s ease, transform .18s ease;
}
.producer-album:hover { border-color: var(--accent); transform: translateY(-1px); }
.producer-album img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
}
.producer-album-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.producer-album-copy strong {
  font-family: var(--font); font-size: 1rem; letter-spacing: -.01em;
}
.producer-album-copy span { color: var(--muted); font-size: .74rem; }
.producer-album-arrow { color: var(--blood-text); font-size: 1.2rem; }
.producer-collab {
  max-width: 820px; margin-top: 48px; padding: 30px 32px;
  background: var(--surface-2); border: var(--hairline);
  border-radius: var(--radius-lg);
}
.producer-collab h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 4px 0 10px; letter-spacing: -.03em;
}
.producer-collab p:not(.kicker) { color: var(--muted); line-height: 1.7; margin: 0; }

@media (max-width: 980px) {
  .producer-hero-grid { grid-template-columns: 1fr; }
  .producer-album { grid-template-columns: 68px minmax(0, 1fr) auto; }
  .producer-album img { width: 68px; height: 68px; }
  .producer-works-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 620px) {
  .producer-hero-card { padding: 26px 24px; }
  .producer-album { grid-template-columns: 58px minmax(0, 1fr); }
  .producer-album img { width: 58px; height: 58px; }
  .producer-album-arrow { display: none; }
  .producer-collab { padding: 24px; }
}

.producer-hero-years strong {
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  letter-spacing: -.04em; white-space: nowrap;
}

/* Índice de productores: tarjetas que abren la ficha */
.producer-grid { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.producer-card { min-height: 230px; }
.producer-card p { max-width: 760px; }
.producer-card-role {
  color: var(--blood-text); font-weight: 800;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 620px) {
  .producer-card { min-height: 240px; }
}

.producer-hero-copy h1 {
  font-size: clamp(2.2rem, 3.7vw, 3.8rem);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .producer-hero-copy h1 {
    font-size: clamp(2.2rem, 9vw, 3rem);
    white-space: normal;
  }
}

.producer-index { padding-top: 8px; }

/* Tarjetas de Productores: números iguales al Hub, centrados en vertical */
.producer-grid .hub-panel-big {
  top: 50%;
  transform: translateY(-50%);
  right: 34px;
  font-size: clamp(5rem, 11vw, 9rem);
}
@media (max-width: 620px) {
  .producer-grid .hub-panel-big {
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    font-size: 4.4rem;
  }
}

/* La tarjeta de la ficha de productor usa el mismo número que las demás */
.producer-hero-num {
  top: 50%;
  transform: translateY(-50%);
  right: 34px;
  font-size: clamp(5rem, 11vw, 9rem);
}
@media (max-width: 620px) {
  .producer-hero-num {
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    font-size: 4.4rem;
  }
}

@media (max-width: 620px) {
  .producer-hero-card p { padding-right: 54px; }
}

/* La ficha interna de Khris Woo ya no lleva número */
.producer-hero-card p { padding-right: 0; }