.button-container {
      position: relative;
      display: inline-block;
    }

    /* Pulso blanco detrás, centrado */
    .pulse-rect {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%;
      height: 120%;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.2);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .pulse-rect.playing {
      animation: pulse-rect 2s ease-out infinite;
      opacity: 0.25; /* se asegura que se vea mientras anima */
    }

    @keyframes pulse-rect {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0;
      }
    }

    /* Botón */
    .audio-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 24px;
      background-color: #e60000;
      color: white;
      font-family: 'Rubik', sans-serif;
      font-weight: 700;
      font-size: 18px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      z-index: 2;
      transform-origin: center; /* para que el latido escale bien */
    }

    /* Latido del botón */
    .audio-button.pulsing {
      animation: pulse-button 1.5s ease-in-out infinite;
    }

    @keyframes pulse-button {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.03);
      }
    }

    .audio-button svg {
      margin-left: 8px;
      width: 28px;
      height: 28px;
      fill: white;
    }