.beat-detalle { display: flex; flex-direction: column; gap: var(--space-12); }

.beat-detalle-header {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .beat-detalle-header { grid-template-columns: minmax(0, 380px) 1fr; align-items: start; }
}

.beat-detalle-portada {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 56px -22px rgba(0, 0, 0, 0.65), var(--glow-brand);
}
.beat-detalle-portada img { width: 100%; height: 100%; object-fit: cover; }

.beat-detalle-info { display: flex; flex-direction: column; gap: var(--space-3); }
.beat-detalle-genero { color: var(--color-text-muted); margin: 0; }
.beat-detalle-genero a { color: var(--color-text-muted); }
.beat-detalle-genero a:hover { color: var(--color-primary-hover); }
.beat-detalle-genero .dot { margin: 0 var(--space-1); opacity: .5; }
.beat-detalle-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem);
  line-height: 1.04; letter-spacing: -0.02em;
}

.beat-detalle-specs {
  display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0;
}
.beat-detalle-specs > div { display: flex; flex-direction: column; gap: 2px; }
.beat-detalle-specs dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.beat-detalle-specs dd { margin: 0; font-weight: 500; }
.beat-detalle-specs .mono { font-family: var(--font-mono); }

.beat-detalle-play { margin-top: var(--space-4); }
.beat-detalle-play-btn { padding: 0 var(--space-6); box-shadow: var(--glow-brand); }

.beat-detalle-etiquetas {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0 0; padding: 0; list-style: none;
}
.beat-detalle-etiquetas .chip {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-sm);
  color: var(--color-text); text-decoration: none;
}
.beat-detalle-etiquetas .chip:hover { border-color: var(--color-primary-hover); color: var(--color-primary-hover); }

.beat-detalle-descripcion h2 { margin-bottom: var(--space-3); }
.md-source {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
  white-space: pre-wrap; font-family: var(--font-body); margin: 0;
}

.beat-detalle-licencias h2 { margin-bottom: var(--space-4); }
.licencias-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .licencias-grid { grid-template-columns: 1fr 1fr; } }

.licencia {
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.licencia:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.licencia-destacada { border-color: var(--color-primary); box-shadow: var(--glow-brand); }
.licencia h3 { margin: 0; }
.licencia .precio {
  margin: var(--space-1) 0 0; font-weight: 700; font-size: var(--fs-xl);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.licencia .precio small { color: var(--color-text-muted); font-size: var(--fs-xs); -webkit-text-fill-color: var(--color-text-muted); }
.licencia .descripcion { color: var(--color-text-muted); margin: 0; flex: 1; }
.licencia .btn-primary-gradient, .licencia .btn-secondary { align-self: flex-start; }

.beat-detalle-relacionados .seccion-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.beat-detalle-relacionados .seccion-head h2 { margin: 0; }