/* =========================================================
   JASON NOISE MUSIC PLAYER
   Negro Carbón + Morado Orquídea
   ========================================================= */

.jnmp-player,
.jnmp-player *{
  box-sizing:border-box;
}

.jnmp-player{
  --jnmp-bg:#09090c;
  --jnmp-surface:#101014;
  --jnmp-surface-2:#15121a;
  --jnmp-orchid:#a855f7;
  --jnmp-orchid-dark:#9333ea;
  --jnmp-lavender:#dcb5ff;
  --jnmp-white:#fff;
  --jnmp-line:rgba(168,85,247,.27);

  position:relative;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0;

  color:var(--jnmp-white);
  font-family:"Poppins",sans-serif;
}

.jnmp-player button{
  font:inherit;
}

.jnmp-featured{
  position:relative;
  isolation:isolate;
  min-height:310px;
  padding:28px;

  display:grid;
  grid-template-columns:210px minmax(250px,330px) minmax(320px,1fr);
  gap:30px;
  align-items:center;

  overflow:hidden;
  border:1px solid var(--jnmp-line);
  border-radius:30px;
  background:
    radial-gradient(circle at 78% 35%,rgba(168,85,247,.09),transparent 32%),
    linear-gradient(145deg,#0d0c11,#08080b 72%);
  box-shadow:
    0 32px 85px rgba(0,0,0,.55),
    0 0 38px rgba(168,85,247,.08),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.jnmp-featured::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:76px 76px;
  pointer-events:none;
}

.jnmp-featured__cover{
  position:relative;
  width:210px;
  height:238px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(145deg,#21142a,#0f0d13);
  box-shadow:0 22px 52px rgba(0,0,0,.48),0 0 28px rgba(168,85,247,.12);
}

.jnmp-featured__cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(8,8,11,.38));
  pointer-events:none;
}

.jnmp-featured__cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.jnmp-featured__cover>span{
  color:var(--jnmp-orchid);
  font:400 68px/1 "Bebas Neue",sans-serif;
}

.jnmp-featured__info{
  min-width:0;
}

.jnmp-featured__info p,
.jnmp-featured__info h3{
  margin:0 !important;
  padding:0 !important;
}

.jnmp-kicker{
  margin-bottom:10px !important;
  color:var(--jnmp-orchid) !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
}

.jnmp-featured__info h3{
  color:var(--jnmp-white) !important;
  font:400 clamp(38px,3vw,56px)/.9 "Bebas Neue",sans-serif !important;
  letter-spacing:.01em !important;
  text-transform:uppercase;
}

.jnmp-artist{
  margin-top:10px !important;
  color:var(--jnmp-white) !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
}

.jnmp-credits{
  margin-top:16px !important;
  color:var(--jnmp-lavender) !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
}

.jnmp-featured__audio{
  min-width:0;
  align-self:center;
}

.jnmp-waveform{
  width:100%;
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  overflow:hidden;
  pointer-events:auto;
  cursor:pointer;
  outline:0;
}

.jnmp-waveform:focus-visible{
  border-radius:10px;
  outline:2px solid var(--jnmp-orchid);
  outline-offset:5px;
}

.jnmp-waveform:hover i{
  background:rgba(220,181,255,.34);
}

.jnmp-waveform i{
  position:relative;
  width:4px;
  min-width:2px;
  height:var(--jnmp-height,40%);
  overflow:hidden;
  border-radius:99px;
  background:rgba(220,181,255,.25);
  box-shadow:0 0 8px rgba(168,85,247,.08);
}

.jnmp-waveform i::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--jnmp-orchid);
  box-shadow:0 0 11px rgba(168,85,247,.8);
  opacity:var(--jnmp-fill,0);
  transition:opacity .08s linear,filter .12s ease;
  filter:brightness(calc(.78 + (var(--jnmp-fill,0) * .22)));
}

.jnmp-transport{
  width:100%;
  margin-top:17px;
  display:grid;
  grid-template-columns:54px 45px minmax(120px,1fr) 45px;
  gap:14px;
  align-items:center;
}

.jnmp-play{
  position:relative;
  width:54px;
  height:54px;
  min-width:54px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--jnmp-orchid);
  border-radius:50%;
  background:var(--jnmp-orchid);
  color:#fff;
  box-shadow:0 14px 30px rgba(168,85,247,.28);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.jnmp-play:hover{
  transform:translateY(-2px);
  background:var(--jnmp-orchid-dark);
  box-shadow:0 18px 36px rgba(168,85,247,.38);
}

.jnmp-play:active{transform:scale(.95)}

.jnmp-play-icon{
  width:0;
  height:0;
  margin-left:4px;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid currentColor;
}

.jnmp-player.is-playing .jnmp-play-icon{
  width:12px;
  height:14px;
  margin:0;
  border:0;
  background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px);
}

.jnmp-player.is-loading .jnmp-play-icon{
  width:17px;
  height:17px;
  margin:0;
  border:2px solid rgba(255,255,255,.32);
  border-top-color:#fff;
  border-radius:50%;
  animation:jnmp-spin .75s linear infinite;
}

@keyframes jnmp-spin{to{transform:rotate(360deg)}}

.jnmp-time{
  position:relative;
  top:-4px;
  color:#fff;
  font-size:10px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.jnmp-progress{
  position:relative;
  height:18px;
  cursor:default;
  pointer-events:none;
  outline:0;
}

.jnmp-progress::before,
.jnmp-progress>span{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  height:4px;
  transform:translateY(-50%);
  border-radius:99px;
}

.jnmp-progress::before,
.jnmp-progress>span{
  display:none;
}

.jnmp-progress::before{
  right:0;
  background:rgba(255,255,255,.13);
}

.jnmp-progress>span{
  width:100%;
  max-width:100%;
  transform:translateY(-50%) scaleX(var(--jnmp-progress,0));
  transform-origin:left center;
  will-change:transform;
  background:var(--jnmp-orchid);
  box-shadow:0 0 14px rgba(168,85,247,.55);
}

.jnmp-progress:focus-visible::before{
  outline:2px solid var(--jnmp-orchid);
  outline-offset:4px;
}

.jnmp-carousel-shell{
  position:relative;
  margin-top:30px;
}

.jnmp-track-rail{
  width:100%;
  padding:3px 4px 16px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(300px,1fr);
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,.5) transparent;
}

.jnmp-track-rail::-webkit-scrollbar{height:5px}
.jnmp-track-rail::-webkit-scrollbar-track{background:transparent}
.jnmp-track-rail::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(168,85,247,.48)}

.jnmp-track-card{
  position:relative;
  min-width:0;
  min-height:164px;
  padding:18px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 46px;
  gap:18px;
  align-items:center;
  scroll-snap-align:start;
  overflow:hidden;
  border:1px solid rgba(233,213,255,.13);
  border-radius:22px;
  background:linear-gradient(145deg,#101014,#0c0b0f);
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.32);
  text-align:left;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.jnmp-track-card:hover,
.jnmp-track-card.is-active{
  transform:translateY(-3px);
  border-color:rgba(168,85,247,.72);
  background:linear-gradient(145deg,#17101d,#0d0c10);
  box-shadow:0 22px 48px rgba(0,0,0,.44),0 0 28px rgba(168,85,247,.12);
}

.jnmp-track-card__cover{
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:15px;
  background:linear-gradient(145deg,#21142a,#0f0d13);
  color:var(--jnmp-orchid);
  font:400 35px/1 "Bebas Neue",sans-serif;
}

.jnmp-track-card__cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.jnmp-track-card__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.jnmp-track-card__copy small{
  color:var(--jnmp-orchid);
  font-size:9px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.jnmp-track-card__copy strong{
  width:100%;
  margin-top:8px;
  overflow:hidden;
  color:#fff;
  font:400 27px/.95 "Bebas Neue",sans-serif;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.jnmp-track-card__copy>span{
  width:100%;
  margin-top:7px;
  overflow:hidden;
  color:#fff;
  font-size:9px;
  font-weight:600;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.jnmp-track-card__copy em{
  width:100%;
  margin-top:8px;
  overflow:hidden;
  color:var(--jnmp-lavender);
  font-size:7px;
  font-style:normal;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.05em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.jnmp-track-card__play{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--jnmp-orchid);
  border-radius:50%;
  box-shadow:0 0 18px rgba(168,85,247,.12);
}

.jnmp-track-card__play::before{
  content:none !important;
  display:none !important;
}

.jnmp-track-card__glyph{
  display:block;
  width:0;
  height:0;
  margin-left:3px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid #fff;
}

.jnmp-track-card.is-active .jnmp-track-card__play{
  background:var(--jnmp-orchid);
  box-shadow:0 10px 24px rgba(168,85,247,.26);
}

/* La tarjeta activa refleja el estado real del audio. */
.jnmp-player.is-playing .jnmp-track-card.is-active .jnmp-track-card__glyph{
  width:10px !important;
  height:12px !important;
  margin:0 !important;
  border:0 !important;
  background:linear-gradient(90deg,#fff 0 3px,transparent 3px 7px,#fff 7px 10px) !important;
}

.jnmp-player>audio{display:none}
.jnmp-error{padding:18px;border:1px solid #dc3232;background:#fff;color:#8a1f11}

/* Divi spacing protection. */
.et_pb_module .jnmp-player h3,
.et_pb_module .jnmp-player p,
.et_pb_text .jnmp-player h3,
.et_pb_text .jnmp-player p,
.et_pb_code .jnmp-player h3,
.et_pb_code .jnmp-player p{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.et_pb_code_inner .jnmp-player,
.et_pb_text_inner .jnmp-player,
.et_pb_module .jnmp-player{
  width:100% !important;
  max-width:none !important;
  margin-right:auto !important;
  margin-left:auto !important;
  padding-right:0 !important;
  padding-left:0 !important;
}

.et_pb_code_inner,
.et_pb_text_inner{
  width:100%;
  max-width:none;
  overflow:visible;
}

.et_pb_code_inner .jnmp-featured,
.et_pb_text_inner .jnmp-featured,
.et_pb_code_inner .jnmp-carousel-shell,
.et_pb_text_inner .jnmp-carousel-shell{
  width:100% !important;
  max-width:none !important;
  margin-right:auto !important;
  margin-left:auto !important;
}

@media(max-width:1100px){
  .jnmp-featured{
    grid-template-columns:170px minmax(220px,280px) minmax(260px,1fr);
    gap:22px;
    padding:24px;
  }
  .jnmp-featured__cover{width:170px;height:210px}
  .jnmp-waveform{height:90px}
  .jnmp-track-rail{grid-auto-columns:minmax(290px,48%)}
}

@media(max-width:820px){
  .jnmp-featured{
    grid-template-columns:150px minmax(0,1fr);
    min-height:0;
  }
  .jnmp-featured__cover{width:150px;height:180px}
  .jnmp-featured__audio{grid-column:1/-1;width:100%}
  .jnmp-waveform{height:78px}
  .jnmp-track-rail{grid-auto-columns:minmax(285px,72%)}
}

@media(max-width:620px){
  .jnmp-featured{
    padding:18px;
    grid-template-columns:1fr;
    gap:20px;
    border-radius:24px;
  }
  .jnmp-featured__cover{
    width:100%;
    height:auto;
    aspect-ratio:16/11;
    border-radius:18px;
  }
  .jnmp-featured__info{text-align:center}
  .jnmp-kicker{font-size:8px !important}
  .jnmp-featured__info h3{font-size:43px !important}
  .jnmp-credits{font-size:8px !important}
  .jnmp-featured__audio{grid-column:auto}
  .jnmp-waveform{height:64px;gap:2px}
  .jnmp-waveform i{width:3px}
  .jnmp-transport{grid-template-columns:50px 38px minmax(80px,1fr) 38px;gap:8px}
  .jnmp-play{width:50px;height:50px;min-width:50px}
  .jnmp-time{font-size:8px}
  .jnmp-carousel-shell{margin-top:20px}
  .jnmp-track-rail{grid-auto-columns:88%;gap:11px;padding-right:12%}
  .jnmp-track-card{min-height:132px;padding:14px;grid-template-columns:88px minmax(0,1fr) 38px;gap:12px;border-radius:18px}
  .jnmp-track-card__cover{width:88px;height:88px;border-radius:12px}
  .jnmp-track-card__copy strong{font-size:23px}
  .jnmp-track-card__play{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  .jnmp-player *,
  .jnmp-player *::before,
  .jnmp-player *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   FEATURED PLAYER — COMPOSICIÓN HORIZONTAL INTEGRADA
   ========================================================= */

@media(min-width:821px){
  .jnmp-featured{
    min-height:276px;
    padding:22px;
    grid-template-columns:220px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:32px;
    row-gap:15px;
    align-items:stretch;
  }

  .jnmp-featured::after{
    content:"";
    position:absolute;
    z-index:-2;
    inset:-24px;
    background:
      linear-gradient(90deg,rgba(8,8,11,.98) 0%,rgba(8,8,11,.82) 32%,rgba(8,8,11,.9) 100%),
      var(--jnmp-cover-image) center 42% / cover no-repeat;
    filter:blur(16px) saturate(.75);
    opacity:.72;
    transform:scale(1.06);
    pointer-events:none;
  }

  .jnmp-featured__cover{
    grid-column:1;
    grid-row:1/3;
    width:220px;
    height:232px;
    align-self:center;
    border-radius:20px;
  }

  .jnmp-featured__info{
    grid-column:2;
    grid-row:1;
    align-self:end;
    padding-right:86px;
  }

  .jnmp-featured__info h3{
    font-size:clamp(38px,3.4vw,55px) !important;
  }

  .jnmp-artist{
    margin-top:7px !important;
  }

  .jnmp-credits{
    margin-top:10px !important;
  }

  .jnmp-featured__audio{
    grid-column:2;
    grid-row:2;
    align-self:end;
    width:100%;
    padding-right:8px;
  }

  .jnmp-waveform{
    height:82px;
  }

  .jnmp-transport{
    grid-template-columns:45px minmax(120px,1fr) 45px;
    grid-template-areas:"current progress duration";
    gap:12px;
    margin-top:7px;
  }

  .jnmp-transport .jnmp-play{
    position:absolute;
    top:30px;
    right:30px;
  }

  .jnmp-transport .jnmp-time:first-of-type{grid-area:current;text-align:left}
  .jnmp-transport .jnmp-progress{grid-area:progress}
  .jnmp-transport .jnmp-time:last-of-type{grid-area:duration;text-align:right}
}

@media(min-width:821px) and (max-width:1100px){
  .jnmp-featured{
    grid-template-columns:185px minmax(0,1fr);
    column-gap:25px;
  }

  .jnmp-featured__cover{
    width:185px;
    height:220px;
  }
}