/* =========================================================
   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:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:16px;

  box-shadow:0 12px 28px color-mix(in srgb, var(--texto) 7%, transparent);

  font-family:"Poppins",sans-serif;
  color:var(--texto);

  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:color-mix(in srgb, var(--primary) 62%, transparent);
    box-shadow:0 20px 42px color-mix(in srgb, var(--texto) 8%, transparent);
  }

}


/* =========================================================
   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,sans-serif;
  font-size:58px;
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;

  color:var(--primary);
}

.np-ab-divider{
  width:1px;
  height:54px;
  background:var(--line);
}


/* =========================================================
   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:var(--texto);
}

.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:var(--muted);
}


/* 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:var(--primary);
  color:var(--blanco);

  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:var(--primary);
}

.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 var(--line);
  border-radius:9px;

  background:var(--surface-soft);
}

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

  padding:0 8px;

  border:0;

  background:transparent;

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

  color:var(--texto);

  cursor:pointer;

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

.np-ab-btn.active{
  background:var(--primary);
  color:var(--blanco);
}


/* =========================================================
   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:var(--line);
  box-shadow:none;
  opacity:1;
  transform:none;
  overflow:hidden;
}

.np-ab-stick::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  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:10px;
  font-weight:400;
  line-height:1;

  color:var(--muted);
}


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

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

  border:1px solid var(--line);
  border-radius:11px;

  background:var(--surface-soft);

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

  color:var(--primary-dark);
}


/* =========================================================
   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:var(--blanco) !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 var(--blanco) !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:var(--blanco) !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 color-mix(in srgb, var(--blanco) 42%, transparent) !important;
  border-top-color:var(--blanco) !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;
  }
}

.audio-proof .proof-heading{justify-content:center;margin-bottom:18px}
.np-ab-info{text-align:center}
@media(max-width:480px){main>.audio-proof{padding:20px 16px}.np-ab-player{padding:28px 24px}}

/* Una sola tarjeta para la comparación. */
main>.audio-proof{padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.audio-proof .np-ab-player{max-width:none;border-color:var(--border-gold)}
.audio-proof .np-ab-top{grid-template-columns:minmax(0,1fr);gap:0}
.audio-proof .np-ab-info{gap:1px!important;text-align:center}
.audio-proof .np-ab-info h3{font-family:Bebas,sans-serif!important;font-size:28px!important;font-weight:400!important;line-height:1.1!important}
.audio-proof .np-ab-info p{font-size:12px!important;line-height:1.5!important}
.audio-proof .np-ab-middle{margin-top:20px}

.np-ab-tracks{display:flex;justify-content:center;gap:8px;margin-top:18px}.np-ab-tracks button{padding:8px 18px;min-height:38px;border:1px solid var(--theme-border);border-radius:8px;background:transparent;color:var(--theme-muted);font:500 12px Poppins,sans-serif;cursor:pointer}.np-ab-tracks button[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}.np-ab-tracks button:disabled{cursor:wait;opacity:.6}.audio-proof .np-ab-middle{margin-top:12px}