/*
Theme Name:  MusicDJ
Description: Theme para MusicDJ — Venta de packs de música para DJs. Construido sobre Hello Elementor con WooCommerce.
Author:      MusicDJ
Template:    hello-elementor
Version:     2.0.0
Text Domain: musicdj
License:     GPL-2.0-or-later
*/

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --dark:         #0A0412;
  --dark-2:       #0F0620;
  --purple:       #6B21E8;
  --purple-glow:  #7C3AED;
  --purple-light: #9B59F5;
  --accent:       #C4A3FF;
  --white:        #F0EAFF;
  --border:       rgba(155,89,245,0.2);
  --glow:         0 0 30px rgba(107,33,232,0.4);
  --transition:   0.25s ease;
  --font-title:   'Bebas Neue', sans-serif;
  --font-body:    'Syne', sans-serif;
  --font-mono:    'Space Mono', monospace;
}

/* ── RESET BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--dark) !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fuerza fondo oscuro pisando Hello Elementor */
#page, #content, .site-content, .site-main,
main, .page, .home, .woocommerce,
.entry-content, .elementor-page {
  background: var(--dark) !important;
  color: var(--white) !important;
}

img { max-width: 100%; display: block; }
a { color: var(--purple-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--white); }

/* ── TIPOGRAFÍAS ───────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--white);
}

/* ── GRAIN OVERLAY ─────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
}

/* ── SECTION LABEL ─────────────────────────────────────────── */
.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 0.75rem;
}

/* ── BOTONES ───────────────────────────────────────────────── */
.btn-primary,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--purple) !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem 2.5rem;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-decoration: none;
}
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--purple-glow) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 50px rgba(107,33,232,0.6) !important;
  color: var(--white) !important;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--purple-light); color: var(--white); }

/* ── HEADER ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10,4,18,0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: padding var(--transition), background var(--transition);
}
.site-header.scrolled { padding: 0.8rem 2.5rem; background: rgba(10,4,18,0.95); }

.site-logo {
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  color: var(--white) !important;
  text-decoration: none;
}
.site-logo span { color: var(--purple-light); }

.main-nav { display: flex; align-items: center; gap: 2rem; list-style: none; }
.main-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--transition);
}
.main-nav a:hover { color: var(--white); }
.main-nav .nav-cta a {
  background: var(--purple);
  color: var(--white) !important;
  padding: 0.5rem 1.2rem;
  box-shadow: var(--glow);
}
.main-nav .nav-cta a:hover { background: var(--purple-glow); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: transform 0.3s, opacity 0.3s; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo { font-family: var(--font-title); font-size: 1.4rem; letter-spacing: 0.1em; }
.footer-logo span { color: var(--purple-light); }
.footer-copy { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(196,163,255,0.4); letter-spacing: 0.1em; }

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(107,33,232,0.08);
  padding: 0.9rem 0;
}
.marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-light);
  padding: 0 2rem;
}
.marquee-item .sep { color: var(--purple); margin-right: 2rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 5rem;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(107,33,232,0.5) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 15% 80%, rgba(74,16,184,0.35) 0%, transparent 60%),
              var(--dark);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(107,33,232,0.025) 2px, rgba(107,33,232,0.025) 4px);
  pointer-events: none;
}

.hero-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--purple-light);
  border: 1px solid rgba(155,89,245,0.35);
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.8s ease both;
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(5rem, 16vw, 16rem);
  line-height: 0.85;
  letter-spacing: 0.04em;
  color: var(--white);
  animation: fadeUp 0.8s 0.1s ease both;
}
.hero-title .outline {
  -webkit-text-stroke: 2px var(--purple-light);
  color: transparent;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--accent);
  line-height: 1.7;
  max-width: 560px;
  margin: 1.5rem auto 2.5rem;
  animation: fadeUp 0.8s 0.2s ease both;
}
.hero-sub2 {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--white);
  letter-spacing: 0.05em;
  line-height: 1.2;
  max-width: 650px;
  margin: 0 auto 2.5rem;
  opacity: 0.85;
  animation: fadeUp 0.8s 0.3s ease both;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.8s 0.3s ease both;
  margin-bottom: 3rem;
}

.hero-price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: rgba(107,33,232,0.15);
  border: 1px solid var(--border);
  padding: 0.8rem 1.8rem;
  animation: fadeUp 0.8s 0.4s ease both;
}
.hero-price-badge .amount {
  font-family: var(--font-title);
  font-size: 2.5rem;
  color: var(--white);
}
.hero-price-badge .period {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Orbs animados */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: floatOrb 8s ease-in-out infinite;
  pointer-events: none;
}
.orb-1 { width: 350px; height: 350px; background: rgba(107,33,232,0.35); top: 5%; left: -8%; animation-delay: 0s; }
.orb-2 { width: 250px; height: 250px; background: rgba(155,89,245,0.25); bottom: 10%; right: -5%; animation-delay: 3s; }
.orb-3 { width: 180px; height: 180px; background: rgba(196,163,255,0.15); bottom: 25%; left: 15%; animation-delay: 5.5s; }

/* ── PACK DEL MES (HERO INFERIOR) ─────────────────────────── */
.pack-mes {
  padding: 6rem 2rem;
  background: var(--dark);
  border-top: 1px solid var(--border);
}
.pack-mes__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.pack-mes__cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.pack-mes__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pack-mes__cover:hover img { transform: scale(1.04); }
.pack-mes__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107,33,232,0.2), transparent);
  pointer-events: none;
}
.pack-mes__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.3rem 0.8rem;
  z-index: 2;
}

.pack-mes__info { display: flex; flex-direction: column; gap: 1.5rem; }
.pack-mes__name {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--white);
}
.pack-mes__desc { font-size: 1rem; color: var(--accent); line-height: 1.7; }
.pack-mes__meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pack-mes__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pack-mes__meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(196,163,255,0.5);
}
.pack-mes__meta-value {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--white);
}

.pack-mes__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pack-mes__price .currency { font-family: var(--font-mono); font-size: 1.2rem; color: var(--purple-light); }
.pack-mes__price .amount { font-family: var(--font-title); font-size: 4rem; color: var(--white); line-height: 1; }
.pack-mes__price .period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.1em; }

/* ── CATÁLOGO ──────────────────────────────────────────────── */
.catalogo {
  padding: 6rem 2rem;
  background: rgba(45,10,107,0.1);
  border-top: 1px solid var(--border);
}
.catalogo__inner { max-width: 1200px; margin: 0 auto; }
.catalogo__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.catalogo__title { font-family: var(--font-title); font-size: clamp(2.5rem, 6vw, 5rem); color: var(--white); line-height: 1; }

.catalogo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5px;
  background: rgba(155,89,245,0.1);
}

.pack-card {
  background: var(--dark);
  transition: background var(--transition);
  cursor: pointer;
}
.pack-card:hover { background: rgba(107,33,232,0.1); }

.pack-card__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(107,33,232,0.12);
}
.pack-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pack-card:hover .pack-card__thumb img { transform: scale(1.06); }
.pack-card__thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: radial-gradient(ellipse, rgba(107,33,232,0.25), transparent 70%);
}

.pack-card__body { padding: 1.2rem; }
.pack-card__title { font-family: var(--font-title); font-size: 1.4rem; color: var(--white); margin-bottom: 0.4rem; }
.pack-card__meta { font-family: var(--font-mono); font-size: 0.65rem; color: rgba(196,163,255,0.5); margin-bottom: 1rem; }
.pack-card__price { font-family: var(--font-title); font-size: 1.8rem; color: var(--purple-light); margin-bottom: 1rem; }

.pack-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  background: rgba(107,33,232,0.2);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.pack-card__btn:hover { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* ── WOOCOMMERCE OVERRIDES ─────────────────────────────────── */
.woocommerce-page .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce { background: var(--dark) !important; }

/* Página de producto */
.woocommerce div.product { background: var(--dark) !important; padding: 8rem 2rem 4rem; max-width: 1100px; margin: 0 auto; }
.woocommerce div.product .product_title { font-family: var(--font-title) !important; font-size: clamp(2rem, 5vw, 4rem) !important; color: var(--white) !important; }
.woocommerce div.product .price { font-family: var(--font-title) !important; font-size: 2.5rem !important; color: var(--purple-light) !important; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--accent) !important; font-size: 1rem; line-height: 1.7; }

/* Checkout */
.woocommerce-checkout { padding-top: 6rem; }
.woocommerce-checkout h3 { font-family: var(--font-title) !important; color: var(--white) !important; font-size: 1.8rem !important; margin-bottom: 1rem; }
.woocommerce form .form-row label { color: var(--accent) !important; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  background: rgba(107,33,232,0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--purple-light) !important; box-shadow: 0 0 0 3px rgba(155,89,245,0.15) !important; outline: none; }
.woocommerce-checkout #order_review { background: rgba(107,33,232,0.08) !important; border: 1px solid var(--border) !important; padding: 1.5rem; }
.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td { color: var(--white) !important; border-color: var(--border) !important; }

/* Página de confirmación */
.woocommerce-order-received h1, .woocommerce-order-received h2 { font-family: var(--font-title) !important; color: var(--white) !important; }
.woocommerce-order-received { padding-top: 6rem; }
.woocommerce-thankyou-order-details { background: rgba(107,33,232,0.08) !important; border: 1px solid var(--border) !important; }
.woocommerce-order-details__title { color: var(--white) !important; font-family: var(--font-title) !important; }
.woocommerce-table--order-details { background: transparent !important; }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { color: var(--accent) !important; border-color: var(--border) !important; }

/* Downloads en thank you page */
.woocommerce-order-downloads { margin-top: 2rem; }
.woocommerce-order-downloads__title { font-family: var(--font-title) !important; color: var(--white) !important; font-size: 2rem !important; margin-bottom: 1rem; }
.woocommerce-order-downloads td a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--purple) !important;
  color: var(--white) !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  box-shadow: var(--glow) !important;
}

/* ── ANIMACIONES ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatOrb {
  0%,100% { transform: translate(0, 0); }
  33%     { transform: translate(20px, -30px); }
  66%     { transform: translate(-15px, 15px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── REVEAL ON SCROLL ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 1rem 1.5rem; }
  .main-nav { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--dark); justify-content: center; align-items: center; gap: 2rem; z-index: 999; }
  .main-nav.open { display: flex; }
  .menu-toggle { display: flex; z-index: 1001; position: relative; }
  .pack-mes__inner { grid-template-columns: 1fr; gap: 2rem; }
  .catalogo__grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: clamp(4rem, 20vw, 8rem); }
}
@media (max-width: 480px) {
  .catalogo__grid { grid-template-columns: 1fr; }
  .pack-mes__price .amount { font-size: 3rem; }
}

/* Pack cover clickeable */
a.pack-mes__cover {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.pack-card__thumb {
    display: block;
    text-decoration: none;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════
   PÁGINA DE TRACKS — DISEÑO COMPLETO
══════════════════════════════════════════════════════════════ */
.tracks-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7rem 2rem 8rem;
}

/* ── Buscador ── */
.tracks-search { margin-bottom: 1.2rem; }
.tracks-search input {
  width: 100%;
  background: rgba(107,33,232,0.08);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.85rem 1.2rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tracks-search input::placeholder { color: rgba(196,163,255,0.3); }
.tracks-search input:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(155,89,245,0.1);
}

/* ── Filtros ── */
.tracks-filters {
  background: rgba(107,33,232,0.05);
  border: 1px solid var(--border);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tracks-filters__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tracks-filter-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-light);
  min-width: 52px;
  flex-shrink: 0;
}
.tracks-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tracks-pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(155,89,245,0.2);
  color: rgba(196,163,255,0.6);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.tracks-pill:hover { border-color: var(--purple-light); color: var(--white); }
.tracks-pill--active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* ── Contador ── */
.tracks-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(196,163,255,0.4);
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.tracks-count span { color: var(--purple-light); }

/* ── Lista ── */
.tracks-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(155,89,245,0.08);
}

/* ── Fila de track ── */
.track-row {
  display: grid;
  grid-template-columns: 42px 1fr 160px 160px;
  align-items: center;
  gap: 1.2rem;
  background: var(--dark);
  padding: 1rem 1.2rem;
  border-left: 2px solid transparent;
  transition: background 0.18s, border-color 0.18s;
}
.track-row:hover { background: rgba(107,33,232,0.07); border-left-color: var(--purple); }
.track-row.playing { background: rgba(107,33,232,0.13); border-left-color: var(--purple-light); }
.track-row.hidden, .track-row.search-hidden { display: none; }

/* ── Play button ── */
.track-play {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(107,33,232,0.2);
  border: 1px solid rgba(155,89,245,0.3);
  color: var(--white);
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
  padding-left: 2px;
}
.track-play:hover { background: var(--purple); border-color: var(--purple); transform: scale(1.08); }
.track-play.playing { background: var(--purple-light); border-color: var(--purple-light); }
.track-play:disabled { opacity: 0.25; cursor: default; }

/* ── Info ── */
.track-info { min-width: 0; }
.track-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.track-genre {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-light);
  background: rgba(107,33,232,0.18);
  padding: 0.15rem 0.5rem;
}
.track-bpm, .track-mes {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(196,163,255,0.4);
}

/* ── Badge NUEVO ── */
.track-badge-new {
  display: inline-flex;
  align-items: center;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.15em;
  padding: 0.12rem 0.4rem;
  flex-shrink: 0;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,33,232,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(107,33,232,0); }
}

/* ── Waveform ── */
.track-wave { width: 160px; height: 36px; overflow: hidden; }
.track-wave__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.track-wave__bar {
  flex: 1;
  background: rgba(155,89,245,0.2);
  border-radius: 1px;
  min-height: 3px;
  transition: background 0.2s;
}
.track-row.playing .track-wave__bar { background: rgba(155,89,245,0.6); }
.track-row:hover .track-wave__bar { background: rgba(155,89,245,0.35); }

/* ── Acciones ── */
.track-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}
.track-price {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.track-price small {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(196,163,255,0.5);
  letter-spacing: 0.08em;
}
.track-buy-btn {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(107,33,232,0.15);
  border: 1px solid rgba(155,89,245,0.25);
  color: var(--white);
  padding: 0.35rem 0.8rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s;
  cursor: pointer;
}
.track-buy-btn:hover { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* ── Sin resultados ── */
.tracks-no-results {
  text-align: center;
  padding: 3rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(196,163,255,0.35);
  letter-spacing: 0.12em;
  display: none;
  background: var(--dark);
}
.tracks-no-results.visible { display: block; }

/* ── Player flotante ── */
.tracks-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,4,18,0.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(20px);
  padding: 0.9rem 2rem;
  z-index: 2000;
  animation: slideUp 0.3s ease both;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.player-close {
  position: absolute;
  top: 0.7rem; right: 1.5rem;
  background: none; border: none;
  color: rgba(196,163,255,0.4);
  font-size: 1rem; cursor: pointer;
  transition: color 0.2s;
}
.player-close:hover { color: var(--white); }
.player-info { display: flex; align-items: center; gap: 1.2rem; max-width: 800px; margin: 0 auto; }
.player-play-btn { font-size: 1.4rem; cursor: pointer; color: var(--white); flex-shrink: 0; transition: transform 0.2s; }
.player-play-btn:hover { transform: scale(1.1); }
.player-title { display: block; font-weight: 600; font-size: 0.85rem; color: var(--white); margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar-wrap { height: 3px; background: rgba(155,89,245,0.15); border-radius: 2px; overflow: hidden; width: 100%; min-width: 150px; cursor: pointer; }
.player-bar { height: 100%; background: var(--purple-light); width: 0%; transition: width 0.4s linear; border-radius: 2px; }

/* ══ RESPONSIVE TRACKS ══ */
@media (max-width: 900px) {
  .track-row { grid-template-columns: 38px 1fr 130px; }
  .track-wave { display: none; }
}

@media (max-width: 600px) {
  .tracks-page { padding: 5.5rem 1rem 6rem; }
  .track-row {
    grid-template-columns: 38px 1fr auto;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
  }
  .track-wave { display: none; }
  .track-name { font-size: 0.82rem; }
  .track-price { font-size: 1rem; }
  .track-buy-btn { font-size: 0.55rem; padding: 0.3rem 0.65rem; }
  .tracks-player { padding: 0.7rem 1rem 0.9rem; }
  .player-title { font-size: 0.78rem; }
}

@media (max-width: 380px) {
  .track-row { grid-template-columns: 34px 1fr auto; gap: 0.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIOS
══════════════════════════════════════════════════════════════ */
.testimonios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(155,89,245,0.1);
}

.testimonio-card {
  background: var(--dark);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background var(--transition);
  position: relative;
}
.testimonio-card::before {
  content: '"';
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(107,33,232,0.15);
  pointer-events: none;
}
.testimonio-card:hover { background: rgba(107,33,232,0.07); }

.testimonio-stars {
  color: #F5A623;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.testimonio-texto {
  font-size: 0.9rem;
  color: var(--accent);
  line-height: 1.7;
  flex: 1;
}
.testimonio-autor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.testimonio-avatar {
  width: 38px; height: 38px;
  background: rgba(107,33,232,0.3);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--purple-light);
  flex-shrink: 0;
}
.testimonio-nombre {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
}
.testimonio-rol {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(196,163,255,0.4);
  text-transform: uppercase;
}

@media (max-width: 900px) { .testimonios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .testimonios__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════ */
.faq__list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }

.faq__item { background: var(--dark); }

.faq__pregunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.3rem 1.5rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.faq__pregunta:hover { background: rgba(107,33,232,0.07); color: var(--white); }
.faq__pregunta.open { color: var(--purple-light); background: rgba(107,33,232,0.08); }

.faq__ico {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--purple-light);
  transition: transform 0.25s;
  flex-shrink: 0;
  line-height: 1;
}
.faq__pregunta.open .faq__ico { transform: rotate(45deg); }

.faq__respuesta {
  display: none;
  padding: 0 1.5rem 1.3rem;
  border-top: 1px solid var(--border);
}
.faq__item--open .faq__respuesta { display: block; }
.faq__respuesta p {
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1.75;
  padding-top: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
══════════════════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #25D366;
  color: #fff !important;
  padding: 0.9rem 1.4rem 0.9rem 1.1rem;
  border-radius: 50px;
  box-shadow: 0 6px 25px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.3);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: waBounce 2.5s ease 2s both;
}
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 35px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.3);
  color: #fff !important;
}
.whatsapp-float svg { width: 32px; height: 32px; flex-shrink: 0; }
.whatsapp-float__label { white-space: nowrap; letter-spacing: 0.01em; }

@keyframes waBounce {
  0%   { transform: translateY(100px); opacity: 0; }
  60%  { transform: translateY(-8px); opacity: 1; }
  80%  { transform: translateY(4px); }
  100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 1.2rem;
    right: 1.2rem;
    padding: 0.85rem;
    border-radius: 50%;
  }
  .whatsapp-float svg { width: 30px; height: 30px; }
  .whatsapp-float__label { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   TRACKS — BUSCADOR + BADGE NUEVO + DURACIÓN
══════════════════════════════════════════════════════════════ */

/* Buscador */
.tracks-search { margin-bottom: 1rem; }
.tracks-search input {
  width: 100%;
  background: rgba(107,33,232,0.08);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.8rem 1.2rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tracks-search input::placeholder { color: rgba(196,163,255,0.35); }
.tracks-search input:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(155,89,245,0.12);
}

/* Badge NUEVO */
.track-badge-new {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  padding: 0.15rem 0.45rem;
  vertical-align: middle;
  margin-left: 0.4rem;
  position: relative;
  top: -1px;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,33,232,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(107,33,232,0); }
}

/* Track row hidden por búsqueda */
.track-row.search-hidden { display: none; }

/* Sin resultados */
.tracks-no-results {
  text-align: center;
  padding: 3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(196,163,255,0.4);
  letter-spacing: 0.1em;
  display: none;
}
.tracks-no-results.visible { display: block; }


/* ══════════════════════════════════════════════════════════════
   SUSCRIPCIÓN — BOTONES Y ESTADOS
══════════════════════════════════════════════════════════════ */
.track-sub-btn {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(155,89,245,0.2);
  color: var(--purple-light);
  padding: 0.25rem 0.6rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s;
  display: block;
  text-align: center;
}
.track-sub-btn:hover {
  background: rgba(107,33,232,0.2);
  border-color: var(--purple-light);
  color: var(--white);
}

/* Botón secundario header */
.btn-secondary {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-secondary:hover {
  border-color: var(--purple-light);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════════
   MENÚ DROPDOWN
══════════════════════════════════════════════════════════════ */
.nav-dropdown { position: relative; }
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dark-2);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 9999;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}
.nav-dropdown:hover .nav-dropdown__menu { display: block; }
.nav-dropdown__menu li a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown__menu li a:hover {
  background: rgba(107,33,232,0.15);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════════
   HEADER — MEJORAS MENÚ
══════════════════════════════════════════════════════════════ */
.nav-suscripcion {
  color: var(--purple-light) !important;
  position: relative;
}
.nav-suscripcion::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--purple-light);
  transform: scaleX(0);
  transition: transform 0.2s;
}
.nav-suscripcion:hover::after { transform: scaleX(1); }

.nav-account a {
  font-size: 0.7rem !important;
  opacity: 0.5;
  letter-spacing: 0.05em;
}
.nav-account a:hover { opacity: 1; }

.nav-btn-cta {
  margin-left: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-count {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════════════════════
   DROPDOWN — MEJORAS
══════════════════════════════════════════════════════════════ */
.nav-dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 0.4rem 0;
  padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   PÁGINA LOGIN / REGISTRO
══════════════════════════════════════════════════════════════ */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.login-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(196,163,255,0.4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.login-tab:hover { color: var(--white); }
.login-tab.active {
  color: var(--white);
  border-bottom-color: var(--purple-light);
}

.login-panel { display: none; }
.login-panel.active { display: block; }

.login-form { display: flex; flex-direction: column; gap: 1.2rem; }

.login-field { display: flex; flex-direction: column; gap: 0.4rem; }
.login-field label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(196,163,255,0.5);
}
.login-field input {
  background: rgba(107,33,232,0.08);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-field input::placeholder { color: rgba(196,163,255,0.2); }
.login-field input:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(155,89,245,0.1);
}

.login-msg {
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.login-msg--error  { background: rgba(220,50,50,0.1); border: 1px solid rgba(220,50,50,0.3); color: #ff8080; }
.login-msg--success { background: rgba(70,180,80,0.1); border: 1px solid rgba(70,180,80,0.3); color: #80e890; }


/* ══════════════════════════════════════════════════════════════
   LOGIN — FIX CAMPOS BLANCOS Y TABS
══════════════════════════════════════════════════════════════ */
.login-field input[type="text"],
.login-field input[type="email"],
.login-field input[type="password"] {
  background: rgba(107,33,232,0.08) !important;
  border: 1px solid rgba(155,89,245,0.25) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a0933 inset !important;
  -webkit-text-fill-color: var(--white) !important;
}
.login-tab {
  border: none !important;
  outline: none !important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES
══════════════════════════════════════════════════════════════ */

/* Carrito mobile */
@media (max-width: 768px) {
  .woocommerce-cart table.cart,
  .woocommerce-cart .cart-collaterals,
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce table.shop_table {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .woocommerce table.cart td,
  .woocommerce table.cart th {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  .woocommerce table.cart .product-name {
    font-size: 0.8rem !important;
  }
  .woocommerce-page .woocommerce {
    padding: 0 1rem !important;
  }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  /* Planes mobile — una columna */
  .page-id-planes .planes-grid,
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Home dos opciones — una columna */
  section [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Checkout mobile */
  .woocommerce-checkout .woocommerce {
    padding: 0 1rem !important;
  }
  .woocommerce form .form-row {
    width: 100% !important;
    float: none !important;
  }
  #order_review, #order_review_heading {
    width: 100% !important;
    float: none !important;
  }

  /* Tracks mobile — ocultar columna waveform */
  .track-waveform { display: none !important; }
  .track-row {
    grid-template-columns: 44px 1fr auto !important;
    gap: 0.5rem !important;
    padding: 0.75rem 0.5rem !important;
  }
  .track-actions {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.3rem !important;
  }
  .track-buy-btn, .track-sub-btn {
    font-size: 0.55rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Pack cards mobile */
  .catalogo-grid {
    grid-template-columns: 1fr !important;
  }

  /* Header mobile — fix botón comprar */
  .nav-btn-cta {
    display: none !important;
  }
}

/* Planes page — forzar una columna en mobile */
@media (max-width: 600px) {
  .page-template-page-planes div[style*="grid-template-columns"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* Grids → una columna en mobile */
@media (max-width: 600px) {
  .planes-cards-grid,
  .home-options-grid {
    grid-template-columns: 1fr !important;
  }
}


/* BIBLIOTECA DE TRACKS - NUEVO */
.mdjlib__banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:linear-gradient(135deg,rgba(107,33,232,.2),rgba(107,33,232,.05));border:1px solid rgba(155,89,245,.3);padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.mdjlib__banner-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;color:var(--purple-light);margin-bottom:.3rem}
.mdjlib__banner-text{font-size:.85rem;color:var(--white)}
.mdjlib__filters{background:rgba(107,33,232,.06);border:1px solid var(--border);padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.mdjlib__filter-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mdjlib__filter-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;color:rgba(196,163,255,.4);min-width:4rem}
.mdjlib__pills{display:flex;flex-wrap:wrap;gap:.4rem}
.mdjlib__pill{background:none;border:1px solid var(--border);color:var(--accent);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;padding:.3rem .8rem;cursor:pointer;transition:all .15s;text-transform:uppercase}
.mdjlib__pill:hover{border-color:var(--purple-light);color:var(--white)}
.mdjlib__pill--active{background:var(--purple);border-color:var(--purple);color:var(--white)}
.mdjlib__search{display:flex;align-items:center;gap:.75rem;background:rgba(107,33,232,.06);border:1px solid var(--border);padding:.8rem 1.25rem;margin-bottom:1rem;transition:border-color .2s}
.mdjlib__search:focus-within{border-color:var(--purple-light)}
.mdjlib__search-icon{font-size:.9rem;opacity:.5}
.mdjlib__search input{background:none;border:none;color:var(--white);font-family:var(--font-body);font-size:.9rem;outline:none;width:100%}
.mdjlib__search input::placeholder{color:rgba(196,163,255,.25)}
.mdjlib__count{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:rgba(196,163,255,.35);margin-bottom:.75rem;padding:0 .25rem}
.mdjlib__header{display:grid;grid-template-columns:48px 1fr 120px 70px 90px 90px;padding:.5rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.mdjlib__col{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.15em;color:rgba(196,163,255,.3);display:flex;align-items:center}
.mdjlib__col--action{justify-content:flex-end}
.mdjlib__row{display:grid;grid-template-columns:48px 1fr 120px 70px 90px 90px;padding:.6rem 1rem;border-bottom:1px solid rgba(155,89,245,.06);align-items:center;transition:background .15s}
.mdjlib__row:hover{background:rgba(107,33,232,.1)}
.mdjlib__num{font-family:var(--font-mono);font-size:.7rem;color:rgba(196,163,255,.3)}
.mdjlib__play{display:none;background:none;border:none;color:var(--purple-light);cursor:pointer;padding:0;width:28px;height:28px;align-items:center;justify-content:center;transition:color .15s,transform .15s}
.mdjlib__play svg{width:18px;height:18px}
.mdjlib__row:hover .mdjlib__play{display:flex}
.mdjlib__row:hover .mdjlib__num{display:none}
.mdjlib__play:hover{color:var(--white);transform:scale(1.15)}
.mdjlib__play--active{display:flex !important;color:var(--purple-light)}
.mdjlib__title{font-size:.88rem;color:var(--white);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;display:inline-block}
.mdjlib__badge-new{display:inline-block;background:var(--purple);color:var(--white);font-family:var(--font-mono);font-size:.45rem;letter-spacing:.1em;padding:.15rem .4rem;margin-left:.5rem;vertical-align:middle}
.mdjlib__genre-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;color:var(--purple-light);border:1px solid rgba(155,89,245,.3);padding:.15rem .5rem;text-transform:uppercase}
.mdjlib__bpm{font-family:var(--font-mono);font-size:.7rem;color:var(--accent)}
.mdjlib__date{font-family:var(--font-mono);font-size:.65rem;color:rgba(196,163,255,.35)}
.mdjlib__dl-btn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;padding:.35rem .75rem;text-decoration:none;transition:all .15s;border:1px solid transparent}
.mdjlib__dl-btn--active{background:var(--purple);color:var(--white);border-color:var(--purple)}
.mdjlib__dl-btn--active:hover{background:#7c3aed}
.mdjlib__dl-btn--lock{background:none;color:rgba(196,163,255,.4);border-color:rgba(155,89,245,.2);font-size:.75rem}
.mdjlib__dl-btn--lock:hover{border-color:var(--purple-light);color:var(--purple-light)}
.mdjlib__empty{text-align:center;padding:3rem;font-family:var(--font-mono);font-size:.7rem;color:rgba(196,163,255,.3)}

/* REPRODUCTOR FIJO */
.mdjplayer{position:fixed;bottom:-90px;left:0;right:0;height:70px;background:rgba(10,5,20,.97);border-top:1px solid var(--border);display:flex;align-items:center;gap:1.5rem;padding:0 2rem;z-index:9999;transition:bottom .3s ease;backdrop-filter:blur(12px)}
.mdjplayer--active{bottom:0}
.mdjplayer__left{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.mdjplayer__prev,.mdjplayer__next{background:none;border:none;color:rgba(196,163,255,.4);font-size:.9rem;cursor:pointer;padding:.25rem;transition:color .15s}
.mdjplayer__prev:hover,.mdjplayer__next:hover{color:var(--white)}
.mdjplayer__play{background:var(--purple);border:none;color:var(--white);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
.mdjplayer__play:hover{background:#7c3aed;transform:scale(1.05)}
.mdjplayer__info{flex-shrink:0;min-width:160px;max-width:220px}
.mdjplayer__title{display:block;font-size:.82rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdjplayer__genre{display:block;font-family:var(--font-mono);font-size:.55rem;color:rgba(196,163,255,.4);letter-spacing:.08em;margin-top:.15rem}
.mdjplayer__progress{flex:1;display:flex;align-items:center;gap:.75rem}
.mdjplayer__time{font-family:var(--font-mono);font-size:.6rem;color:rgba(196,163,255,.4);white-space:nowrap}
.mdjplayer__bar{flex:1;height:3px;background:rgba(155,89,245,.15);cursor:pointer;position:relative}
.mdjplayer__bar:hover{height:5px}
.mdjplayer__fill{height:100%;background:var(--purple-light);transition:width .1s linear}
.mdjplayer__vol{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.mdjplayer__vol span{font-size:.8rem;opacity:.5}
.mdjplayer__vol input[type=range]{width:70px;accent-color:var(--purple);cursor:pointer}

@media (max-width:768px){
  .mdjlib__header{display:none}
  .mdjlib__row{grid-template-columns:40px 1fr 80px}
  .mdjlib__col--genre,.mdjlib__col--bpm,.mdjlib__col--date{display:none}
  .mdjlib__title{max-width:180px;font-size:.8rem}
  .mdjplayer{gap:.75rem;padding:0 1rem}
  .mdjplayer__info{min-width:100px;max-width:140px}
  .mdjplayer__vol{display:none}
}

.mdjlib__dl-btn--wav{background:rgba(107,33,232,.15);color:var(--purple-light);border:1px solid rgba(155,89,245,.4);font-size:.6rem;padding:.35rem .65rem}
.mdjlib__dl-btn--wav:hover{background:rgba(107,33,232,.3);color:var(--white)}

.site-logo { white-space: nowrap !important; font-size: 1.5rem !important; }

/* Carrito vacío — ocultar productos sugeridos */
.woocommerce-cart .woocommerce > h2,
.woocommerce-cart .woocommerce > ul.products,
.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop { display:none !important; }

.page-id-588 {
    background: var(--dark) !important;
}
.page-id-588 .entry-content,
.page-id-588 .wp-block-post-content,
.page-id-588 .elementor-section,
.page-id-588 article {
    background: var(--dark) !important;
    color: var(--accent) !important;
    max-width: 100% !important;
    padding: 0 !important;
}