/* =========================================================
   NOISEPLUGINS A/B PLAYER
   SOLO BEBAS NEUE + POPPINS
   ========================================================= */

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

.np-ab-player{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:35px;

  background:#fcfaf6;
  border:1px solid #d9cfbf;
  border-radius:16px;

  box-shadow:0 12px 28px rgba(60,47,30,.07);

  font-family:"Poppins",sans-serif;
  color:#28241f;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease;
}

@media(hover:hover){

  .np-ab-player:hover{
    transform:translateY(-4px);
    border-color:rgba(189,130,24,.62);
    box-shadow:0 20px 42px rgba(55,39,17,.08);
  }

}


/* =========================================================
   CABECERA
   ========================================================= */

.np-ab-top{
  display:grid;
  grid-template-columns:auto 1px minmax(0,1fr);
  gap:18px;
  align-items:center;
}

.np-ab-number{
  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Bebas Neue",sans-serif;
  font-size:58px;
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;

  color:#bd8218;
}

.np-ab-divider{
  width:1px;
  height:54px;
  background:#d8cebd;
}


/* =========================================================
   TÍTULO + SUBTÍTULO
   SEPARACIÓN REAL DE 3PX
   ========================================================= */

.np-ab-info{
  min-width:0;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  gap:3px !important;

  padding:0 !important;

  margin:0 !important;
}

.np-ab-info h3{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  font-family:"Poppins",sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;

  line-height:1 !important;
  letter-spacing:-.015em;

  color:#28241f;
}

.np-ab-info p{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  font-family:"Poppins",sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;

  line-height:1 !important;

  color:#766f64;
}


/* BLOQUEA ESPACIADOS DE DIVI */

.et_pb_module .np-ab-info,
.et_pb_module .np-ab-info h3,
.et_pb_module .np-ab-info p,
.et_pb_text .np-ab-info,
.et_pb_text .np-ab-info h3,
.et_pb_text .np-ab-info p,
.et_pb_code .np-ab-info,
.et_pb_code .np-ab-info h3,
.et_pb_code .np-ab-info p{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.et_pb_module .np-ab-info,
.et_pb_text .np-ab-info,
.et_pb_code .np-ab-info{
  gap:3px !important;
}


/* =========================================================
   PLAY + SELECTOR
   ========================================================= */

.np-ab-middle{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:center;

  margin-top:10px;
}

.np-ab-play{
  min-width:42px;
  min-height:42px;
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  padding:0;
  border:0;
  border-radius:50%;

  background:#bd8218;
  color:#fff;

  font-family:"Poppins",sans-serif;
  font-size:10px;
  line-height:1;

  cursor:pointer;

  transition:
    transform .16s ease,
    background .16s ease;
}

.np-ab-play:hover{
  background:#bd8218;
}

.np-ab-play:active{
  transform:scale(.94);
}

.np-ab-play span{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  line-height:1;
  transform:none;
}


/* =========================================================
   PAUSA CENTRADA
   ========================================================= */

.np-pause-bars{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:3px;

  width:100%;
  height:100%;
}

.np-pause-bars i{
  display:block;

  width:3px;
  height:10px;

  border-radius:1px;

  background:currentColor;
}


/* =========================================================
   BOTONES A/B
   ========================================================= */

.np-ab-switch{
  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  overflow:hidden;

  border:1px solid #d6ccb9;
  border-radius:9px;

  background:#fbf8f2;
}

.np-ab-btn{
  height:42px;

  padding:0 8px;

  border:0;

  background:transparent;

  font-family:"Poppins",sans-serif;
  font-size:11px;
  font-weight:800;

  color:#28241f;

  cursor:pointer;

  transition:
    background-color .15s ease,
    color .15s ease;
}

.np-ab-btn.active{
  background:#bd8218;
  color:#fff;
}


/* =========================================================
   WAVEFORM / PROGRESO
   PALITOS REALES — SIN GRADIENTES NI MASCARAS
   ========================================================= */

.np-ab-waveform{
  position:relative;
  width:100%;
  height:54px;
  margin-top:12px;
  margin-bottom:0;
  overflow:hidden;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  -webkit-mask-image:none;
  mask-image:none;
}

.np-ab-waveform::after{
  display:none;
  content:none;
}

.np-ab-wave-bars{
  position:absolute;
  inset:0;
  display:block;
  opacity:1;
  background:none;
  background-image:none;
  -webkit-mask-image:none;
  mask-image:none;
  pointer-events:none;
}

.np-ab-stick{
  position:absolute;
  top:0;
  width:2px;
  height:54px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:#e3ddd3;
  box-shadow:none;
  opacity:1;
  transform:none;
  overflow:hidden;
}

.np-ab-stick::after{
  content:"";
  position:absolute;
  inset:0;
  background:#bd8218;
  opacity:var(--np-fill, 0);
  transition:opacity .14s linear;
}

.np-ab-wave-progress{
  display:none;
}


/* =========================================================
   TIEMPO
   ========================================================= */

.np-ab-time-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:7px;
}

.np-ab-time{
  min-width:62px;

  text-align:right;

  font-family:"Poppins",sans-serif;
  font-size:8px;
  font-weight:400;
  line-height:1;

  color:#766f64;
}


/* =========================================================
   ERROR
   ========================================================= */

.np-ab-error{
  padding:12px 14px;

  border:1px solid #d9cfbf;
  border-radius:11px;

  background:#faf7f1;

  font-family:"Poppins",sans-serif;
  font-size:12px;
  line-height:1.5;

  color:#8a3a2e;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:480px){

  .np-ab-player{
    max-width:none;
    padding:35px;
  }

  .np-ab-top{
    grid-template-columns:auto 1px minmax(0,1fr);
    gap:13px;
  }

  .np-ab-number{
    font-size:50px;
  }

  .np-ab-info{
    gap:3px !important;
  }

  .np-ab-info h3{
    font-size:14px !important;
  }

  .np-ab-info p{
    font-size:11px !important;
  }

  .np-ab-waveform{
    height:54px;
  }

}


/* =========================================================
   PLAY / PAUSA — FIX VISUAL SEGURO
   El motor de audio y JavaScript NO se modifican.
   ========================================================= */

.np-ab-play .np-safe-play-icon,
.np-ab-play [data-np-play-icon]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:14px !important;
  height:14px !important;

  margin:0 !important;
  padding:0 !important;

  font-family:"Poppins",sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:14px !important;

  color:#fff !important;

  /* Compensación óptica solo del triángulo tipográfico */
  transform:translateX(1px) !important;
}

/* Cuando el JS inserta la pausa, su propio contenedor queda centrado */
.np-ab-play [data-np-play-icon] .np-pause-bars{
  transform:translate(-50%,-50%) !important;
}


/* =========================================================
   FIX PLAY IOS / SAFARI
   SOLO VISUAL — NO TOCA AUDIO NI JAVASCRIPT
   ========================================================= */

/* Oculta el carácter ▶ para evitar que iOS lo convierta en emoji */
.np-ab-play [data-np-play-icon]{
  position:relative !important;

  width:14px !important;
  height:14px !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  font-size:0 !important;
  line-height:0 !important;

  color:transparent !important;

  transform:none !important;
}


/* Triángulo Play dibujado con CSS */
.np-ab-play [data-np-play-icon]::before{
  content:"" !important;

  position:absolute !important;

  top:50% !important;
  left:50% !important;

  width:0 !important;
  height:0 !important;

  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  border-left:9px solid #ffffff !important;

  transform:translate(-42%,-50%) !important;
}


/* Cuando JS inserta la pausa, ocultamos el triángulo */
.np-ab-play [data-np-play-icon]:has(.np-pause-bars)::before{
  display:none !important;
}


/* Pausa centrada */
.np-ab-play .np-pause-bars{
  position:absolute !important;

  top:50% !important;
  left:50% !important;

  width:12px !important;
  height:12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:3px !important;

  transform:translate(-50%,-50%) !important;
}

.np-ab-play .np-pause-bars i{
  width:3px !important;
  height:10px !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  background:#ffffff !important;

  border-radius:1px !important;
}


/* =========================================================
   ESTADO DE CARGA
   ========================================================= */

.np-ab-play.is-loading{
  cursor:wait !important;
  opacity:.88;
}

.np-ab-play.is-loading [data-np-play-icon]::before{
  display:none !important;
}

.np-ab-play .np-loading-ring{
  position:absolute !important;
  top:50% !important;
  left:50% !important;

  width:13px !important;
  height:13px !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  border:2px solid rgba(255,255,255,.42) !important;
  border-top-color:#fff !important;
  border-radius:50% !important;

  transform:translate(-50%,-50%) !important;
  animation:np-ab-spin .7s linear infinite !important;
}

@keyframes np-ab-spin{
  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce){
  .np-ab-player{
    transition:none !important;
  }

  .np-ab-play .np-loading-ring{
    animation-duration:1.4s !important;
  }
}