/* ==========================================================================
   Khris Woo · tienda de beats
   Dirección visual: táctica. Esquinas duras, rojo sangre para la acción y
   verde bosque oscuro para la estructura. Sin dependencias externas.
   ========================================================================== */

/* Las familias Anton, Barlow Semi Condensed, Pirata One y Kingthings ya no
   se usan en la web: el sitio funciona con Archivo (titulos) y Manrope (todo
   lo demas). Sus .ttf siguen en src/fonts porque el build los usa para
   componer las portadas con Pillow, pero no se declaran aqui ni se copian. */

:root {
  /* superficies: casi negro con sesgo verde bosque */
  --bg: #040605;
  --bg-deep: #020403;
  --surface: #090e0b;
  --surface-2: #0e1511;
  --surface-3: #141c16;
  --line: rgba(132, 178, 150, .08);
  --line-strong: rgba(132, 178, 150, .16);
  --border-w: 1px;
  --hairline: 1px solid rgba(255, 255, 255, .035);
  --shadow-soft: 0 16px 34px -20px rgba(0, 0, 0, .95);
  --pop: 0 22px 40px -22px rgba(0, 0, 0, 1);
  /* Un filo de luz arriba: el toque de gloss. */
  --gloss-top: inset 0 1px 0 rgba(255, 255, 255, .06);
  --gloss-soft: inset 0 1px 0 rgba(255, 255, 255, .035);
  --sheen: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .085) 46%, transparent 62%);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --silk: .34s var(--ease-soft);

  /* texto */
  --text: #e4e9e5;
  --muted: #88968e;
  --muted-2: #616e66;

  /* rojo sangre: acción, precio, atención */
  --blood: #9c1519;
  --blood-bright: #b81d22;
  --blood-deep: #4d0b0e;
  --blood-text: #dc4a45;
  --blood-line: rgba(184, 29, 34, .38);
  --on-blood: #f4efec;

  /* verde bosque oscuro: estructura, estados, chips */
  --forest: #10291f;
  --forest-2: #163828;
  --forest-3: #245c43;
  --forest-text: #7cbf9b;
  --forest-line: rgba(52, 122, 90, .32);

  /* radios: intermedios, ni píldoras ni esquinas vivas */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, .95);
  --header-h: 66px;
  --player-h: 82px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --font: "Barlow Semi Condensed", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.has-player { padding-bottom: calc(var(--player-h) + 12px); }
body.drawer-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .004em;
  line-height: .98;
}

:focus-visible { outline: 2px solid var(--blood-bright); outline-offset: 2px; }

.wrap { width: min(1240px, 100% - 44px); margin-inline: auto; }
.muted { color: var(--muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- aviso interno (solo en la vista de revisión) ---------- */
.internal-banner {
  background: linear-gradient(90deg, #360b0e, #1c0607);
  color: #dcb9b7;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--blood-line);
}
.internal-banner strong { color: #f08b85; letter-spacing: .08em; }

/* ---------- cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(3, 5, 4, .92);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--blood);
  color: var(--on-blood);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.main-nav { display: flex; gap: 22px; margin-left: 10px; }
.main-nav a {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .main-nav a:hover { color: var(--text); border-color: var(--blood); }
}

.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search svg { position: absolute; left: 10px; width: 15px; height: 15px; fill: var(--muted-2); pointer-events: none; }
.search input {
  width: 210px;
  min-width: 0;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px 10px 32px;
  font-family: var(--font);
  font-size: .85rem;
  letter-spacing: .04em;
  transition: border-color .16s var(--ease), width .2s var(--ease), background .16s var(--ease);
}
.search input::placeholder { color: var(--muted-2); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.search input:focus { outline: none; border-color: var(--blood); background: var(--surface-2); width: 248px; }

.lang { display: flex; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
.lang button {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  color: var(--muted-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .lang button:hover { color: var(--text); }
}
.lang button.is-active { background: var(--forest-2); color: var(--forest-text); }

.cart-btn {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .cart-btn:hover { border-color: var(--blood); background: var(--surface-2); }
}
.cart-btn svg { width: 18px; height: 18px; fill: var(--text); }
.cart-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--blood); color: var(--on-blood);
  border-radius: var(--radius-sm);
  font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-count[data-empty="true"] { display: none; }

/* ---------- héroe ---------- */
.hero { position: relative; overflow: hidden; padding: 78px 0 62px; }
.hero::before {
  content: ""; position: absolute; inset: -40% 45% 20% -15%;
  background:
    radial-gradient(closest-side, rgba(156, 21, 25, .14), transparent 72%),
    radial-gradient(closest-side at 70% 80%, rgba(22, 56, 40, .26), transparent 70%);
  pointer-events: none;
}
.hero::after {
  /* Fondo liso: el resplandor del ::before basta, sin rejilla. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .014), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 900px; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); margin-top: 20px; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- botones: rectangulares y en mayúsculas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  padding: 12px 20px;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.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(--blood); color: var(--blood-text); }
}
.btn-ghost { background: var(--surface-2); color: var(--text); }@media (hover: hover) and (pointer: fine) {

  .btn-ghost:hover { background: var(--surface-3); }
}
.btn-sm { padding: 8px 13px; font-size: .72rem; letter-spacing: .1em; }
.btn-block { width: 100%; }
.btn.is-added { background: var(--forest-3); color: #eafff2; box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- filtros ---------- */
.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(3, 5, 4, .94);
  backdrop-filter: blur(12px);
  border: 0;
  padding: 15px 0 19px;
  margin-bottom: 42px;
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.filters-top { display: flex; align-items: center; gap: 14px; }
.filters-top h2 { font-size: 1.3rem; letter-spacing: .03em; }
.results { color: var(--muted-2); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.filters-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.filters-toggle { display: none; }

.view-toggle { display: flex; gap: 3px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); padding: 3px; }
.view-toggle button {
  display: grid; place-items: center;
  width: 36px; height: 32px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.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(--forest-2); color: var(--forest-text); }

.filters-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
/* El par de deslizadores del BPM necesita dos columnas para no pisar la tonalidad. */
.filter-row:last-child > .filter-group:first-child { grid-column: span 2; }
/* El par de deslizadores llena su espacio: sin hueco muerto junto al BPM. */
.range-pair { width: 100%; }
.range-pair input[type="range"] { flex: 1 1 auto; width: auto; min-width: 84px; }
.range-value { min-width: 58px; }
/* «Limpiar» es un botón, no una columna. */
.filter-row:last-child > .btn { justify-self: start; }
.filter-group { display: flex; flex-direction: column; gap: 7px; }
.filter-label {
  color: var(--muted-2);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.chip-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filter {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 15px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .chip-filter:hover { color: var(--text); border-color: var(--forest-line); }
}
.chip-filter.is-active { background: var(--blood); border-color: var(--blood); color: var(--on-blood); }

select {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 11px;
  font-family: var(--font);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 152px;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--blood); }

.range-pair { position: relative; display: flex; align-items: center; gap: 10px; }
.range-pair input[type="range"] { width: 116px; }
.range-value { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 74px; }

/* margin: 0 explicito: el input[type=range] trae 2px de margen en los estilos del
   navegador. Con width:100% y box-sizing:border-box eso suma 4px de mas, asi que
   la barra se sale 2px por cada lado de su contenedor. Se veia en el planificador
   de compases del compositor, donde la barra ocupa el ancho entero de la columna. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  margin: 0;
  height: 3px; border-radius: 0; background: var(--surface-3); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--blood); border: var(--border-w) solid rgba(255, 255, 255, .2);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 4px; border: var(--border-w) solid rgba(255, 255, 255, .2); background: var(--blood);
}

/* ---------- catálogo ---------- */
.catalog { display: flex; flex-direction: column; gap: 54px; }

.album-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: -28px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.album-rail::-webkit-scrollbar { height: 6px; }
.album-rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.album-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.album-chip span { color: var(--blood-text); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {

  .album-chip:hover { border-color: var(--blood); color: var(--text); background: var(--surface-2); }
}
.album-block { scroll-margin-top: 190px; }
.album-head {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-bottom: 22px;
  padding: 2px 0 14px 18px;
  border-bottom: var(--hairline);
}
.album-head::before {
  content: "";
  position: absolute; left: 0; top: .35em; bottom: .9em;
  width: 3px;
  background: var(--blood);
  border-radius: 3px;
}
.album-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: .02em; }
.album-meta { color: var(--muted-2); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

.beat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 22px 18px;
}

.beat-card {
  position: relative;
  display: grid;
  grid-template-areas: "visual" "body" "actions";
  /* Tres filas con el cuerpo flexible: todas las tarjetas de una fila miden lo
     mismo y sus botones caen a la misma altura, tengan los chips que tengan. */
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  height: 100%;
}
.beat-card-visual { grid-area: visual; position: relative; }

.beat-card-media {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 1 / 1;
}
.beat-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }@media (hover: hover) and (pointer: fine) {

  .beat-card:hover .beat-card-media img { transform: scale(1.04); }
}
.beat-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 6, .55) 0%, rgba(5, 8, 6, .05) 44%, transparent 70%);
}
.beat-card-badge {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  background: rgba(4, 7, 5, .74);
  backdrop-filter: blur(8px);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--blood-text);
}

.play-btn {
  position: absolute;
  left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blood); color: var(--on-blood);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .95);
  transition: transform .16s var(--ease), background .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  /* Efecto de raton: dentro de su consulta, para que en tactil no exista. */
  @media (hover: hover) and (pointer: fine) {
    .play-btn:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--blood-bright); }
  }
}
.play-btn svg { width: 21px; height: 21px; fill: currentColor; }
.play-btn .icon-pause, .play-btn.is-playing .icon-play { display: none; }
.play-btn.is-playing .icon-pause { display: block; }
.play-btn-lg { width: 62px; height: 62px; }
.play-btn-lg svg { width: 28px; height: 28px; }

.beat-card-body { grid-area: body; padding: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.beat-card-title {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.25;
}@media (hover: hover) and (pointer: fine) {

  .beat-card-title a:hover { color: var(--blood-text); }
}
.beat-card-album { color: var(--muted-2); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.beat-card-track { display: none; }
.beat-card-duration, .beat-card-price { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-camelot { color: var(--blood-text); background: rgba(156, 21, 25, .16); }
.chip-genre { color: var(--forest-text); background: rgba(22, 56, 40, .5); }

.beat-card-actions { grid-area: actions; display: flex; gap: 6px; margin-top: 6px; }
.beat-card-actions .btn { flex: 1; }

.beat-card.is-playing .beat-card-media { border-color: var(--blood); }

/* ---------- vista de lista ---------- */
.catalog.view-list .beat-grid { display: flex; flex-direction: column; gap: 6px; }
.catalog.view-list .album-block { margin-bottom: 28px; }

.catalog.view-list .beat-card {
  grid-template-columns: 38px 52px minmax(0, 1fr) 52px auto 34px;
  grid-template-areas: "play art body duration actions open";
  align-items: center;
  gap: 4px 16px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}
.catalog.view-list .beat-card.is-playing { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--blood), var(--gloss-top); }

.catalog.view-list .beat-card-visual { display: contents; }
.catalog.view-list .beat-card-media {
  grid-area: art;
  width: 54px; height: 54px;
  aspect-ratio: auto;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.catalog.view-list .beat-card-media::after { display: none; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover .beat-card-media img { transform: none; }
}
.catalog.view-list .beat-card-badge { display: none; }

/* En el MOSAICO el precio tambien va junto al boton, no pegado sobre la
   portada. La pegatina tapaba el titulo impreso en el arte ("NARCORAP, VOL. I")
   y competia con el distintivo de pista que ya trae la propia imagen.
   Ademas, el precio junto a "Comprar" es donde se decide la compra. */
.catalog:not(.view-list) .beat-card-badge { display: none; }
.catalog:not(.view-list) .beat-card-price { display: block; }
/* La tarjeta del mosaico mide 174px. Con precio y boton en la misma linea no
   caben: "Comprar" necesita 65px y se quedaba en 58, recortado a "ompr".
   Se apilan: el precio arriba y el boton a ancho completo, que ademas da un
   objetivo tactil mucho mejor en el movil. */
/* El selector lleva .beat-card extra a proposito: theme.css define
   ".beat-card:not(.track-row) .beat-card-actions" con la MISMA especificidad
   (0,3,0) y carga despues, asi que sin ese nivel extra su relleno y su
   align-items:center ganaban y el boton no llegaba a ancho completo. */
.catalog:not(.view-list) .beat-card .beat-card-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 10px 14px 14px;
}
.catalog:not(.view-list) .beat-card-price { font-size: 1.02rem; }
.catalog:not(.view-list) .beat-card-actions .btn { padding: 9px 12px; }

.catalog.view-list .play-btn {
  grid-area: play;
  position: static;
  transform: none;
  width: 38px; height: 38px;
  background: var(--surface-3);
  color: var(--text);
  border: 0;
  box-shadow: none;
}
.catalog.view-list .play-btn svg { width: 16px; height: 16px; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .play-btn:hover { background: var(--blood); color: var(--on-blood); }
}
.catalog.view-list .play-btn.is-playing { background: var(--blood); color: var(--on-blood); }

.catalog.view-list .beat-card-body {
  grid-area: body;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
}
.catalog.view-list .beat-card-title { grid-column: 1 / -1; font-size: 1.02rem; }
.catalog.view-list .beat-card-album { grid-column: 1; display: flex; align-items: center; gap: 8px; }
/* Los datos técnicos van junto a la duración: la fila se lee en dos bloques. */
.catalog.view-list .beat-card-body .chips { grid-column: 3; grid-row: 2; justify-content: flex-end; }
.catalog.view-list .beat-card-body .chip-genre { display: none; }

/* Lo que ya dice la cabecera del álbum no se repite en cada fila. Cuando el
   orden es global (lista plana) el nombre del álbum sí hace falta. */
.catalog.view-list:not(.is-flat) .beat-card-album-name { display: none; }
.catalog.view-list.is-flat .beat-card-album-name { display: inline; }

.beat-card-open { display: none; }
.catalog.view-list .beat-card-open {
  grid-area: open;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: 0; border-radius: var(--radius-sm);
  color: var(--muted-2);
  transition: transform var(--silk), background var(--silk), color var(--silk);
}
.catalog.view-list .beat-card-open svg { width: 16px; height: 16px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card-open:hover { background: var(--surface-3); color: var(--blood-text); }
}
.catalog.view-list .beat-card-open:active { transform: scale(.92); }
.catalog.view-list .beat-card-track {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 19px; padding: 0 5px;
  background: var(--surface-3);
  font-size: .68rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
}
.catalog.view-list .beat-card-duration {
  display: block; grid-area: duration;
  text-align: right;
  font-size: .8rem; color: var(--muted);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.catalog.view-list .beat-card-actions { grid-area: actions; margin-top: 0; align-items: center; gap: 6px; }
.catalog.view-list .beat-card-actions .btn { flex: 0 0 auto; }
.catalog.view-list .beat-card-price {
  display: block; margin-right: 6px;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 400;
  color: var(--blood-text);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.catalog.view-list .beat-card-price small { font-size: .64rem; font-weight: 700; color: var(--muted-2); letter-spacing: .12em; }

.empty-state { text-align: center; color: var(--muted); padding: 70px 0; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }

/* El carrito vacío también respira. */
.cart-empty { margin-bottom: 4px; }

/* ---------- cómo funciona ---------- */
.how { margin: 88px auto 66px; }
.how h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 28px; }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.how-steps li {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
}
.how-steps h3 { font-size: 1.16rem; margin-bottom: 8px; letter-spacing: .03em; }
.how-steps p { color: var(--muted); font-size: .88rem; }

/* ---------- pie ---------- */
.site-footer { background: var(--bg-deep); padding: 54px 0 28px; margin-top: 44px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-footer :is(h2, h3) {
  font-family: var(--font);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--forest-text);
  margin-bottom: 14px;
}
.site-footer p, .site-footer li { color: var(--muted); font-size: .85rem; }
.site-footer li { margin-bottom: 7px; }@media (hover: hover) and (pointer: fine) {

  .site-footer a:hover { color: var(--blood-text); }
}
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 40px; padding-top: 20px;
  border-top: var(--hairline);
  font-size: .7rem; color: var(--muted-2);
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- reproductor ---------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(3, 5, 4, .97);
  backdrop-filter: blur(14px);
  border-top: var(--hairline);
  box-shadow: 0 -20px 40px -34px rgba(0, 0, 0, 1);
}
.player-inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(180px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 11px 0;
}
.player-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-track img { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.player-meta { display: flex; flex-direction: column; min-width: 0; }
.player-meta a, .player-name { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta span:not(.player-name) { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player-center { display: flex; flex-direction: column; gap: 4px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.player-controls button {
  background: transparent; border: 0; cursor: pointer;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  transition: background var(--silk), color var(--silk);
}@media (hover: hover) and (pointer: fine) {

  .player-controls button:hover { background: var(--surface-3); }
}
.player-controls svg { width: 18px; height: 18px; fill: var(--text); }
/* El !important del fondo hace falta para ganar a `.player-controls button`
   (más específico), pero el del ancho y el alto bloqueaba el tamaño que declara
   theme.css: los 46px de la capa nueva no llegaban a aplicarse nunca y el botón
   principal de reproducir se quedaba en 38px, MÁS PEQUEÑO que los 40px de
   anterior y siguiente. El tamaño lo posee ahora theme.css. */
.player-play { background: var(--blood) !important; }
.player-play svg { fill: var(--on-blood); }
.player-play .icon-pause { display: none; }
.player-play.is-playing .icon-play { display: none; }
.player-play.is-playing .icon-pause { display: block; }

.player-seek { display: flex; align-items: center; gap: 10px; }
.player-seek input { flex: 1; }
.player-seek span { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; letter-spacing: .06em; }

.player-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* Precio, añadir y carrito con la misma altura. */
.player-right > * { height: 38px; }
.player-price { display: inline-flex; align-items: center; }

/* El botón de añadir del reproductor es solo icono: cuadrado y con los dos
   dibujos intercambiándose según el estado. */
.player-add { width: 38px; min-width: 38px; padding: 0; display: grid; place-items: center; }
.player-add svg { width: 18px; height: 18px; fill: var(--on-blood); }
.player-add .icon-view { display: none; }
.player-add.is-in-cart { background: var(--forest-3) !important; }
.player-add.is-in-cart .icon-view { display: block; }
.player-add.is-in-cart .icon-add { display: none; }
.volume { display: flex; align-items: center; gap: 8px; }
.volume svg { width: 16px; height: 16px; fill: var(--muted); }
.volume input { width: 80px; }

/* ---------- carrito ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(1, 2, 2, .78);
  opacity: 0; transition: opacity .24s var(--ease);
}
.drawer-overlay.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(410px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-deep);
  border-left: 3px solid var(--blood);
  transform: translateX(102%);
  transition: transform .28s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: var(--hairline);
}
.drawer-head h2 { font-size: 1.2rem; letter-spacing: .04em; }
.drawer-close { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }@media (hover: hover) and (pointer: fine) {

  .drawer-close:hover { color: var(--blood-text); }
}
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer-foot { border-top: var(--hairline); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
/* Los dos botones del carrito, de la misma altura. */
.drawer-foot .btn { height: 46px; padding-top: 0; padding-bottom: 0; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.drawer-total strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--blood-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.drawer-note { color: var(--muted-2); font-size: .72rem; }

.cart-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); }
.cart-item img { width: 54px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-info a { display: block; font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-info span { display: block; color: var(--muted-2); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.cart-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cart-item-side strong { font-size: .86rem; color: var(--blood-text); font-variant-numeric: tabular-nums; }
.cart-item-remove {
  background: transparent; border: 0; color: var(--muted-2); cursor: pointer; padding: 0;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}@media (hover: hover) and (pointer: fine) {

  .cart-item-remove:hover { color: var(--blood-text); }
}
.cart-empty { color: var(--muted); text-align: center; padding: 40px 10px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- ficha de beat ---------- */
.breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--muted-2); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 28px 0 24px; }@media (hover: hover) and (pointer: fine) {

  .breadcrumb a:hover { color: var(--blood-text); }
}
.breadcrumb span:last-child { color: var(--muted); }

.beat-page { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 48px; align-items: start; }
.beat-page-media {
  position: sticky; top: calc(var(--header-h) + 24px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.beat-page-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.beat-page-info h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 14px; }
.beat-page-info .chips { margin-bottom: 24px; }

.license-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 var(--blood), var(--gloss-top), var(--shadow-soft);
  padding: 26px 24px 22px;
}
.license-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 16px; border-bottom: var(--hairline); }
.license-kicker { color: var(--muted-2); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.license-head :is(h2, h3) { font-size: 1.5rem; letter-spacing: .03em; }
.license-price { color: var(--muted-2); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.license-price span { font-family: var(--font-display); font-size: 2rem; color: var(--blood-text); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.license-list { display: flex; flex-direction: column; gap: 9px; padding: 18px 0; }
.license-list li { position: relative; padding-left: 20px; color: var(--muted); font-size: .86rem; }
.license-list li::before {
  content: ""; position: absolute; left: 1px; top: .48em;
  width: 8px; height: 2px; background: var(--forest-3);
}
.license-excl { color: var(--muted-2); font-size: .76rem; padding-bottom: 18px; }
.license-actions { display: flex; flex-direction: column; gap: 8px; }
.license-foot { color: var(--muted-2); font-size: .72rem; text-align: center; margin-top: 14px; letter-spacing: .06em; }
.license-foot a { text-decoration: underline; text-decoration-color: var(--forest-line); text-underline-offset: 3px; }@media (hover: hover) and (pointer: fine) {

  .license-foot a:hover { color: var(--blood-text); text-decoration-color: var(--blood); }
}

.beat-page-extra { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.beat-page-extra .muted { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.beat-meta-foot { margin-top: 24px; padding-top: 18px; border-top: var(--hairline); color: var(--muted); font-size: .8rem; display: flex; flex-direction: column; gap: 6px; }

.beat-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 60px 0 0; }
.beat-nav-link {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 15px 18px;
  box-shadow: inset 3px 0 0 var(--forest-2), var(--gloss-soft);
}@media (hover: hover) and (pointer: fine) {

  .beat-nav-link:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--blood), var(--gloss-soft); }
}
.beat-nav-link.is-next { text-align: right; align-items: flex-end; box-shadow: inset -3px 0 0 var(--forest-2), var(--gloss-soft); }@media (hover: hover) and (pointer: fine) {

  .beat-nav-link.is-next:hover { box-shadow: inset -3px 0 0 var(--blood), var(--gloss-soft); }
}
.beat-nav-link.is-disabled { opacity: .35; pointer-events: none; }
.beat-nav-dir { color: var(--muted-2); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.beat-nav-title { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }

.related { margin: 70px 0 0; }
.related-shell { position: relative; display: flex; align-items: center; }
/* Sin este ancho la rejilla se colapsa a una columna dentro del flex. */
.related-shell .beat-grid { flex: 1 1 auto; min-width: 0; }

/* Flechas circulares a los lados, con salto y presión. */
.related-arrow {
  position: absolute; top: 50%; z-index: 6;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  background: var(--surface-2);
  border: 0; border-radius: 50%;
  box-shadow: var(--gloss-top), var(--shadow-soft);
  color: var(--text); cursor: pointer;
  transition: transform var(--silk), background var(--silk), color var(--silk),
              box-shadow var(--silk), opacity var(--silk);
}
.related-arrow.is-prev { left: -22px; }
.related-arrow.is-next { right: -22px; }
.related-arrow svg { width: 18px; height: 18px; fill: currentColor; }@media (hover: hover) and (pointer: fine) {

  .related-arrow:hover { background: var(--blood); color: var(--on-blood); transform: translateY(-50%) scale(1.09); }
}
.related-arrow:active { transform: translateY(-50%) scale(.93); }
.related-arrow:disabled { opacity: 0; pointer-events: none; }

/* Transiciones, no animaciones: la red de seguridad de las entradas
   desactiva `animation`, así que aquí el movimiento va por transición. */
.related .beat-grid .beat-card {
  transition: opacity .36s var(--ease-soft), transform .36s var(--ease-soft),
              box-shadow var(--silk);
}
.related .beat-grid.is-enter-right .beat-card { opacity: 0; transform: translateX(38px); }
.related .beat-grid.is-enter-left .beat-card { opacity: 0; transform: translateX(-38px); }

.related-status {
  margin-top: 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.related-more { display: block; margin: 14px auto 0; }
.related h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 22px; text-align: center; }
/* La rejilla se centra como grupo en lugar de estirarse de lado a lado. */
.related .beat-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 228px));
  justify-content: center;
  justify-items: stretch;
  gap: 20px 18px;
}
.related h2::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px; margin-right: 12px;
  background: var(--blood); vertical-align: 0;
}

/* ==========================================================================
   Movimiento: entradas, respuesta al puntero y estado de reproducción
   Todo con transform/opacity para no forzar repintados costosos.
   ========================================================================== */

@keyframes kwFadeUp { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes kwRowIn { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kwFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwSlideUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes kwPop { 0% { transform: scale(1); } 34% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes kwEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes kwSweep { from { transform: translateX(-115%); } to { transform: translateX(115%); } }

/* entrada del héroe, escalonada */
.has-js .hero-inner > * { animation: kwFadeUp .62s var(--ease) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .12s; }
.hero-inner > *:nth-child(3) { animation-delay: .19s; }
.hero-inner > *:nth-child(4) { animation-delay: .26s; }
.hero-inner > *:nth-child(5) { animation-delay: .33s; }
.has-js .hero-stats { animation: kwFadeUp .7s var(--ease) .38s both; }

/* revelado al desplazar: lo prepara app.js, así sin JavaScript nada queda oculto */
.reveal { opacity: 0; }
.reveal.is-visible { animation: kwFadeUp .6s var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }

/* tarjetas y filas: cascada al cargar y respuesta al puntero */
.has-js .beat-card {
  animation: kwFadeUp .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 42ms);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .beat-grid .beat-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .95); }
}
.has-js .catalog.view-list .beat-card { animation-name: kwRowIn; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover { transform: translateX(4px); }
}
.catalog.is-animating .beat-grid { animation: kwFadeIn .3s var(--ease) both; }

/* subrayado que crece en la navegación */
.main-nav a { position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--blood);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .main-nav a:hover { border-color: transparent; }
  .main-nav a:hover::after { transform: scaleX(1); }
}

/* barrido luminoso en el botón principal */
.btn { position: relative; overflow: hidden; }
.btn > *, .btn { z-index: 0; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: translateX(-115%);
}@media (hover: hover) and (pointer: fine) {

  .btn-primary:hover::after { animation: kwSweep .8s var(--ease); }
}

/* el reproductor entra deslizando */
.has-js .player { animation: kwSlideUp .42s var(--ease) both; }

/* insignia del carrito cuando cambia la cuenta */
.cart-count.is-bump { animation: kwPop .42s var(--ease); }

/* ecualizador del beat que suena */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: 8px; vertical-align: -1px; }
.eq i {
  width: 3px; height: 100%;
  background: var(--blood-text);
  border-radius: 1px;
  transform-origin: bottom;
  animation: kwEq .92s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: .17s; }
.eq i:nth-child(3) { animation-delay: .33s; }
.player-meta .eq { height: 9px; margin-right: 7px; vertical-align: 0; }

/* filas del carrito: entrada escalonada */
.has-js .cart-item { animation: kwRowIn .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* rail de álbumes y chips: elevación suave */
.album-chip { transition: transform .2s var(--ease), border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease); }@media (hover: hover) and (pointer: fine) {

  .album-chip:hover { transform: translateY(-2px); }
}
.chip-filter:active, .btn:active { transform: translateY(1px) scale(.99); }

/* botón de reproducción: latido discreto mientras suena */
.play-btn.is-playing::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--blood-line);
  border-radius: inherit;
  animation: kwPulse 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes kwPulse {
  0% { opacity: .85; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.34); }
  100% { opacity: 0; transform: scale(1.34); }
}

/* barra de progreso de lectura, bajo la cabecera */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--blood);
  transform: scaleX(0); transform-origin: left;
  /* Sin transition. El ancho lo escribe app.js en cada fotograma con
     requestAnimationFrame, asi que el valor ya viene suave; una transicion de
     0.1s encima solo hacia que la linea persiguiera al scroll, porque cada
     fotograma arrancaba una transicion nueva que no llegaba a terminar.
     Medido: iba hasta 63px por detras. will-change la sube a su propia capa
     para que el navegador solo tenga que componerla, sin repintar. */
  will-change: transform;
}

/* ---------- bloc de notas del compositor ---------- */
.tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 13px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.tool-btn svg { width: 17px; height: 17px; fill: var(--forest-text); }@media (hover: hover) and (pointer: fine) {

  .tool-btn:hover { border-color: var(--blood); background: var(--surface-2); }
  .tool-btn:hover svg { fill: var(--blood-text); }
}
.tool-btn.is-active { background: var(--forest-2); border-color: var(--forest-3); color: var(--forest-text); }

.cart-btn { width: auto; padding: 0 12px; gap: 9px; display: inline-flex; align-items: center; }
.cart-btn-label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.notes {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-deep);
  border-left: 3px solid var(--forest-3);
  transform: translateX(102%);
  transition: transform .28s var(--ease);
}
.notes.is-open { transform: none; }
.notes-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px;
}
.notes-kicker { color: var(--forest-text); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.notes-head h2 { font-size: 1.45rem; letter-spacing: .03em; }

.notes-context { padding: 14px 20px 16px; background: var(--surface); border-radius: var(--radius); margin: 0 20px; }@media (hover: hover) and (pointer: fine) {
}
.notes-transport { display: flex; gap: 6px; }
.notes-transport button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.notes-transport button svg { width: 16px; height: 16px; fill: var(--text); }@media (hover: hover) and (pointer: fine) {

  .notes-transport button:hover { background: var(--surface-3); }
}
.notes-transport button.is-playing { background: var(--blood); }
.notes-transport button.is-playing svg { fill: var(--on-blood); }
.notes-transport .notes-cart {
  background: var(--blood);
  color: var(--on-blood);
}
.notes-transport .notes-cart svg { fill: var(--on-blood); }@media (hover: hover) and (pointer: fine) {

  .notes-transport .notes-cart:hover { background: var(--blood-bright); }
}
.notes-transport .notes-cart.is-added { background: var(--forest-3); }
.notes-transport .icon-pause { display: none; }
.notes-transport button.is-playing .icon-play { display: none; }
.notes-transport button.is-playing .icon-pause { display: block; }

/* Progreso, tiempos y saltos del beat dentro del panel. */
.notes-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.notes-progress input[type="range"] { width: 100%; }
.notes-times { display: flex; justify-content: space-between; color: var(--muted-2); font-size: .68rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.notes-seek { display: flex; gap: 6px; margin-top: 10px; }
.notes-seek button {
  flex: 1;
  padding: 9px 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}@media (hover: hover) and (pointer: fine) {

  .notes-seek button:hover { background: var(--surface-3); color: var(--text); }
}

/* Alineación del compás al beat: marcar el 1 y ajustar. */
.notes-sync { display: flex; gap: 6px; margin-top: 10px; }
.notes-sync button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 10px;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.notes-sync .notes-sync-mark { flex: 1; background: rgba(156, 21, 25, .16); color: var(--blood-text); }@media (hover: hover) and (pointer: fine) {

  .notes-sync .notes-sync-mark:hover { background: var(--blood); color: var(--on-blood); }
  .notes-sync button:hover { background: var(--surface-3); color: var(--text); }
}
.notes-sync button:active { transform: scale(.94); }
.notes-sync-state { color: var(--muted-2); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.notes-seek button:active { transform: scale(.95); }

.notes-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.notes-bar strong { color: var(--blood-text); font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; }
.notes-switch {
  display: block; width: 100%; margin-top: 12px;
  background: rgba(156, 21, 25, .14);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--blood-text);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 12px; cursor: pointer; text-align: left;
}@media (hover: hover) and (pointer: fine) {

  .notes-switch:hover { background: rgba(156, 21, 25, .2); }
}

.notes-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; }
.notes-tool {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  color: var(--muted); padding: 8px 12px; cursor: pointer;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}@media (hover: hover) and (pointer: fine) {

  .notes-tool:hover { background: var(--surface-3); color: var(--text); }
  .notes-tool.is-danger:hover { background: rgba(156, 21, 25, .22); color: var(--blood-text); }
}

.notes-text {
  flex: 1;
  margin: 12px 20px 0;
  padding: 16px 17px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  resize: none;
  min-height: 220px;
}
.notes-text::placeholder { color: var(--muted-2); }
.notes-text:focus { outline: none; border-color: var(--forest-3); background: var(--surface-2); }

.notes-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px 18px;
}
.notes-count { color: var(--muted-2); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.notes-saved { color: var(--forest-text); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.notes-saved.is-flashing { animation: kwFadeIn .3s var(--ease); }

.compose-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--forest-3), var(--gloss-soft);
}
.compose-kicker { color: var(--forest-text); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 5px; }
.compose-text { color: var(--muted); font-size: .86rem; max-width: 46ch; }

.license-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: var(--hairline); counter-reset: step; }
.license-steps li {
  position: relative; padding-left: 27px;
  color: var(--muted); font-size: .78rem;
  counter-increment: step;
}
.license-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05em;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--surface-3);
  border-radius: 3px;
  color: var(--forest-text);
  font-size: .64rem; font-weight: 700;
}

.player-price {
  color: var(--blood-text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .related-arrow { width: 38px; height: 38px; }
  .related-arrow.is-prev { left: -6px; }
  .related-arrow.is-next { right: -6px; }
  /* En móvil el bloc de notas es una hoja inferior y asume el control del audio. */
  .notes {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 92vh;
    border-left: 0;
    border-top: 3px solid var(--forest-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(102%);
  }
  .notes.is-open { transform: none; }
  .notes-text { font-size: 1rem; min-height: 34vh; }
  .notes-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  body.notes-open .player { display: none; }
  body.notes-open.has-player { padding-bottom: 0; }
  .compose-cta { flex-direction: column; align-items: stretch; }
  .cart-btn-label, .tool-btn-label { display: none; }
  .tool-btn { padding: 0 11px; }
}

/* ---------- aviso de añadido: informa sin interrumpir ---------- */
.toast {
  position: fixed;
  right: 22px;
  bottom: calc(var(--player-h) + 18px);
  z-index: 78;
  display: flex; align-items: center; gap: 12px;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 14px 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--pop), inset 0 0 0 1px var(--line);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast-mark {
  width: 9px; height: 9px; flex-shrink: 0;
  background: var(--forest-3);
  border-radius: 3px;
}
.toast-text { font-size: .84rem; color: var(--muted); min-width: 0; }
.toast-text strong { color: var(--text); }
.toast-action {
  flex-shrink: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--blood-text);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 4px;
}@media (hover: hover) and (pointer: fine) {

  .toast-action:hover { color: #fff; }
}

@media (max-width: 820px) {
  .toast { right: 14px; left: 14px; bottom: calc(var(--player-h) + 12px); max-width: none; }
}

/* Navegación sin recarga: barra de carga y respiración del contenido. */
.scroll-progress.is-loading {
  animation: kwLoad 1.1s ease-in-out infinite;
  transform: scaleX(1);
  opacity: .9;
}
@keyframes kwLoad {
  0% { transform: scaleX(.12); }
  50% { transform: scaleX(.62); }
  100% { transform: scaleX(.98); }
}
#main { transition: opacity .24s var(--ease-soft), transform .24s var(--ease-soft); }
/* Salida suave al cambiar de página: el contenido se apaga, el audio sigue. */
#main.is-leaving { opacity: .38; transform: translateY(6px); }

/* Red de seguridad: pasadas las entradas, ninguna animación puede ocultar contenido. */
.animations-done .hero-inner > *,
.animations-done .hero-stats,
.animations-done .beat-card,
.animations-done .player,
.animations-done .cart-item,
.animations-done .reveal { animation: none !important; opacity: 1 !important; }
.btn, .chip-filter, .album-chip, .cart-btn, .tool-btn, .view-toggle button, .notes-tool, .notes-transport button, .lang button, .how-steps li, .beat-nav-link {
  transition: transform .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), color .2s var(--ease);
}@media (hover: hover) and (pointer: fine) {.btn:hover, .chip-filter:hover, .album-chip:hover, .cart-btn:hover, .tool-btn:hover, .view-toggle button:hover, .notes-tool:hover, .notes-transport button:hover, .how-steps li:hover, .beat-nav-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
}

.btn:active, .chip-filter:active, .album-chip:active, .cart-btn:active, .tool-btn:active,
.view-toggle button:active, .notes-tool:active, .notes-transport button:active,
.beat-nav-link:active, .lang button:active {
  transform: translateY(0) scale(.97);
  box-shadow: none;
}@media (hover: hover) and (pointer: fine) {


  /* La fila de la lista salta poco y se presiona suave: es información densa. */
  .catalog.view-list .beat-card:hover { background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
}
.catalog.view-list .beat-card:active { transform: scale(.995); box-shadow: none; }@media (hover: hover) and (pointer: fine) {


  /* La tarjeta del mosaico se eleva y se presiona. */
  .beat-grid .beat-card:hover { transform: translateY(-3px); box-shadow: var(--pop); }
}
.beat-grid .beat-card:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-soft); }@media (hover: hover) and (pointer: fine) {


  /* El botón de reproducción va centrado: hay que conservar su translate. */
  /* Efecto de raton: dentro de su consulta, para que en tactil no exista. */
  @media (hover: hover) and (pointer: fine) {
    .play-btn:hover { transform: translate(-50%, -50%) translateY(-2px) scale(1.05); box-shadow: var(--pop); }
  }
}
.play-btn:active { transform: translate(-50%, -50%) scale(.94); box-shadow: none; }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .play-btn:hover { transform: translateY(-2px); }
}
.catalog.view-list .play-btn:active { transform: scale(.94); }.how-steps li, .notes-context, .catalog.view-list .beat-card, .album-chip, .chip-filter, .btn-ghost, .tool-btn, .cart-btn, .lang, .view-toggle, .notes-text, .how-steps li, .notes-context, .catalog.view-list .beat-card, .album-chip, .chip-filter, .btn-ghost, .tool-btn, .cart-btn, .lang, .view-toggle, .notes-text, .beat-card-media {
  box-shadow: var(--gloss-top);
}
.search input, select, .notes-tool, .notes-transport button, .drawer, .notes {
  box-shadow: var(--gloss-soft);
}
.btn-outline { box-shadow: inset 0 0 0 1px var(--line-strong), var(--gloss-soft); }@media (hover: hover) and (pointer: fine) {

  .btn-outline:hover { box-shadow: inset 0 0 0 1px var(--blood), var(--gloss-soft); }
}
.toast { box-shadow: var(--pop), inset 0 0 0 1px var(--line), var(--gloss-top); }
.license-card { box-shadow: inset 0 2px 0 var(--blood), var(--gloss-top), var(--shadow-soft); }

/* El botón de reproducción, con relieve. */
.play-btn {
  background: linear-gradient(180deg, #bb1e23, #8b1114);
  box-shadow: var(--gloss-top), 0 12px 26px -14px rgba(0, 0, 0, .95);
}@media (hover: hover) and (pointer: fine) {

  /* Efecto de raton: dentro de su consulta, para que en tactil no exista. */
  @media (hover: hover) and (pointer: fine) {
    .play-btn:hover { background: linear-gradient(180deg, #cf2b30, #9c1519); }
  }
}
.catalog.view-list .play-btn { background: var(--surface-3); box-shadow: var(--gloss-soft); }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .play-btn:hover,
  .catalog.view-list .play-btn.is-playing { background: var(--blood); }
}.btn, .chip-filter, .album-chip, .cart-btn, .tool-btn, .view-toggle button, .notes-tool, .notes-transport button, .lang button, .how-steps li, .beat-nav-link {
  transition: transform var(--silk), background var(--silk),
              box-shadow var(--silk), color var(--silk);
}@media (hover: hover) and (pointer: fine) {.btn:hover, .chip-filter:hover, .album-chip:hover, .cart-btn:hover, .tool-btn:hover, .view-toggle button:hover, .notes-tool:hover, .notes-transport button:hover, .how-steps li:hover, .beat-nav-link:hover, .tool-tab:hover, .mix-play:hover {
    transform: translateY(-3px);
    box-shadow: var(--gloss-top), var(--shadow-soft);
  }
}.tool-tab, .mix-play {
  transition: transform var(--silk), background var(--silk), box-shadow var(--silk), color var(--silk);
}.tool-tab:active, .mix-play:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* La fila de la lista respira y su título se desplaza. */
.catalog.view-list .beat-card { transition: transform var(--silk), background var(--silk), box-shadow var(--silk); }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover { transform: translateY(-3px); box-shadow: var(--gloss-top), var(--shadow-soft); }
}
.catalog.view-list .beat-card-title { transition: transform var(--silk); }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover .beat-card-title { transform: translateX(2px); }
  /* Efecto de raton: dentro de su consulta, para que en tactil no exista. */
  @media (hover: hover) and (pointer: fine) {
    .catalog.view-list .beat-card:hover .play-btn { transform: scale(1.07); }
  }
}
.catalog.view-list .beat-card .play-btn { transition: transform var(--silk), background var(--silk); }@media (hover: hover) and (pointer: fine) {

  .catalog.view-list .beat-card:hover .beat-card-media img { transform: scale(1.06); }
}

/* La tarjeta del mosaico se eleva con su sombra de color. */
.beat-grid .beat-card { transition: transform var(--silk), box-shadow var(--silk); }@media (hover: hover) and (pointer: fine) {

  .beat-grid .beat-card:hover { transform: translateY(-4px); box-shadow: var(--pop); }
  .beat-grid .beat-card:hover .beat-card-media img { transform: scale(1.055); }
}
.beat-card.is-playing .beat-card-media { box-shadow: 0 0 0 1px rgba(187, 30, 35, .4), 0 20px 44px -28px rgba(187, 30, 35, .8); }

/* El resplandor del héroe respira muy despacio. */
.hero::before { animation: kwDrift 28s ease-in-out infinite; }
@keyframes kwDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -1.5%, 0) scale(1.07); }
}

/* La cabecera y el pie, con un filo de luz. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07) 22%, rgba(255, 255, 255, .07) 78%, transparent);
  pointer-events: none;
}

/* La barra de progreso del reproductor, con brillo. */
.player-seek input[type="range"] { background: linear-gradient(90deg, rgba(187, 30, 35, .5), var(--surface-3) 62%); }

/* Cambios de filtro y orden: la rejilla se disuelve y vuelve. */
.catalog.is-animating .beat-grid { animation: kwFadeIn .34s var(--ease-soft) both, kwSettle .34s var(--ease-soft) both; }
@keyframes kwSettle {
  from { transform: translateY(6px); }
  to { transform: none; }
}@media (hover: hover) and (pointer: fine) {
}

/* Pestañas del panel */
.tool-tabs { display: flex; gap: 4px; padding: 12px 20px 0; overflow-x: auto; scrollbar-width: none; }
.tool-tabs::-webkit-scrollbar { display: none; }
.tool-tab {
  flex: 0 0 auto;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--muted-2);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}@media (hover: hover) and (pointer: fine) {

  .tool-tab:hover { color: var(--text); background: var(--surface-2); }
}
.tool-tab.is-active { background: var(--surface-2); color: var(--text); box-shadow: var(--gloss-soft); }

.tool-pane {
  flex: 1; min-height: 0;
  display: none; flex-direction: column;
  overflow-y: auto;
  padding: 0 20px 20px;
}
.tool-pane.is-active { display: flex; }
.tool-lead { color: var(--muted); font-size: .86rem; padding: 14px 0 12px; }
.tool-hint { color: var(--muted-2); font-size: .72rem; line-height: 1.5; margin-top: 12px; }

/* Grabadora */
.rec-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 14px; }
.rec-meter {
  width: 100%; height: 10px;
  background: var(--surface-2);
  border-radius: 6px; overflow: hidden;
  box-shadow: var(--gloss-soft);
}
.rec-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--forest-3), var(--blood)); transition: width .08s linear; }
.rec-time { font-family: var(--font-display); font-size: 2.1rem; letter-spacing: .04em; }
.tool-pane[data-pane="record"] .btn-block { margin-bottom: 10px; }
.tool-pane[data-pane="record"] audio { width: 100%; margin-bottom: 10px; }
.rec-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rec-status { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.rec-status.is-live { color: var(--blood-text); }

/* Planificador de compases */
.bars-list { display: flex; flex-direction: column; gap: 6px; }
.bars-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 13px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--gloss-soft);
  font-size: .86rem;
}
.bars-list li span { color: var(--muted); }
.bars-list li strong { font-variant-numeric: tabular-nums; color: var(--blood-text); }
.bars-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 13px 15px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--gloss-top);
}
.bars-total span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.bars-total strong { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .02em; }
.bars-controls { display: flex; gap: 16px; margin-top: 14px; }
.bars-controls label { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.bars-controls input {
  width: 60px; padding: 7px 9px;
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Mezcla armónica */
.mix-pick { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 14px; }
.mix-pick span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.mix-groups { display: flex; flex-direction: column; gap: 16px; }
.mix-group h4 {
  font-family: var(--font);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--forest-text);
  margin-bottom: 8px;
}
.mix-items { display: flex; flex-direction: column; gap: 6px; }
.mix-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--gloss-soft);
}
.mix-item img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.mix-item-info { flex: 1; min-width: 0; }
.mix-item-info strong { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-item-info span { color: var(--muted-2); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.mix-play {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.mix-play svg { width: 15px; height: 15px; fill: var(--text); }
.mix-play.is-playing { background: var(--blood); }
.mix-play.is-playing svg { fill: var(--on-blood); }
.mix-empty { color: var(--muted-2); font-size: .8rem; }

/* Cantidades del carrito */
.cart-qty { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cart-qty button {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--surface-3); border: 0; border-radius: 6px;
  color: var(--text); cursor: pointer;
  font-size: .85rem; line-height: 1;
}@media (hover: hover) and (pointer: fine) {

  .cart-qty button:hover { background: var(--blood); color: var(--on-blood); }
}
.cart-qty button:active { transform: scale(.92); }
.cart-qty span { min-width: 20px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-unit { color: var(--muted-2); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* Acción del reproductor y acceso al carrito */

/* Efecto de presión en lo que faltaba */
select:active, .search input:active, .bars-controls input:active, .notes-text:active { transform: scale(.995); }
.cart-item-remove:active, .toast-action:active, .drawer-close:active { transform: scale(.92); }
.player-controls button:active { transform: scale(.9); }
.mix-play:active, .mix-item:active { transform: scale(.985); }
.cart-item-remove, .toast-action, .drawer-close, .player-controls button, .mix-play, .mix-item {
  transition: transform var(--silk), background var(--silk), color var(--silk), box-shadow var(--silk);
}

/* Cabecera: todos los controles con la misma altura y centrados. */
.search input, .lang, .tool-btn, .cart-btn { height: 42px; }
.search input { padding-top: 0; padding-bottom: 0; }
.lang button { height: 100%; display: grid; place-items: center; padding: 0 11px; }
.tool-btn, .cart-btn { display: inline-flex; align-items: center; }
.tool-btn { height: 42px; }
.player-right .btn-sm { height: 38px; padding: 0 16px; }
.notes-transport button, .view-toggle button { display: grid; place-items: center; }

/* El panel con pestañas necesita sus propios márgenes internos. */
.notes-tools { padding: 12px 0 0; }
.notes-text { margin: 12px 0 0; }
.notes-foot { padding: 12px 0 0; }

@media (max-width: 820px) {
  .tool-pane { max-height: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .beat-page { grid-template-columns: 1fr; gap: 32px; }
  .beat-page-media { position: static; max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .player-inner { grid-template-columns: 1fr auto; gap: 14px; }
  .player-center { grid-column: 1 / -1; order: 3; }
  .player-right { gap: 10px; }
  .catalog.view-list .beat-card {
    grid-template-columns: 38px 48px minmax(0, 1fr) auto;
    grid-template-areas: "play art body actions";
  }
  .catalog.view-list .beat-card-duration { display: none; }
}

@media (max-width: 820px) {
  .search input { width: 100%; }
  .search { flex: 1 1 auto; min-width: 0; }
  .header-inner { gap: 12px; flex-wrap: wrap; padding: 10px 0; }
  .header-tools { width: 100%; order: 3; }
  .filters-toggle { display: inline-flex; }
  .filters-body { display: none; }
  .filters-body.is-open { display: flex; }
  .hero { padding: 52px 0 42px; }
  .beat-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 20px 14px; }
  .beat-card-title { font-size: .92rem; }
  .beat-card-actions .btn { padding: 7px 9px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .beat-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 36px;
  }
  .beat-nav-link { min-width: 0; min-height: 78px; padding: 12px 10px; }
  .beat-nav-link.is-next {
    text-align: right;
    align-items: flex-end;
    border: 0;
    box-shadow: inset -3px 0 0 var(--forest-2), var(--gloss-soft);
  }
  .beat-nav-title { overflow-wrap: anywhere; }
  .player-track img { width: 40px; height: 40px; }
  .volume { display: none; }
  .wrap { width: min(1240px, 100% - 28px); }
  .album-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .catalog.view-list .beat-card {
    grid-template-columns: 36px 48px minmax(0, 1fr);
    grid-template-areas: "play art body" "play art actions";
    row-gap: 9px;
    padding: 12px;
  }
  .catalog.view-list .beat-card-body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .catalog.view-list .beat-card-body .chips { grid-column: 1; grid-row: auto; }
  .catalog.view-list .beat-card-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .license-card { padding: 20px 18px; }
  .beat-page-extra { flex-wrap: wrap; }
  .how-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}