/* ======================================================
   AUDIO BLOCK (CONTENEDOR)
====================================================== */

.audio-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 440px;
  margin: auto;
  margin-top: 1.5rem;
  margin-bottom: 30px;
}

/* ======================================================
   AUDIO TITLE
====================================================== */
.audio-title {
  font-family: 'Montserrat';
  font-weight: bold;
  color: black;
  text-align: center;
}

/* ======================================================
   AUDIO PLAYER
====================================================== */

.audio-player {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background-color: #f6f8fa;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    0 1px 4px rgba(0,0,0,0.1);
}

/* WebKit controls (Safari / Chrome / iOS / Android) */
.audio-player::-webkit-media-controls-panel {
  background-color: #f6f8fa;
  border-radius: 999px;
  padding: 0 10px;
}

.audio-player::-webkit-media-controls-play-button {
  transform: scale(1.08);
}

.audio-player::-webkit-media-controls-volume-slider {
  filter: grayscale(100%);
}

/* Firefox */
.audio-player {
  outline: none;
}

/* ======================================================
   DOWNLOAD BUTTON (CAPSULE)
====================================================== */

.audio-download {
  display: flex;
  justify-content: center;   /* centra el texto horizontalmente */
  font-weight: 700; 
  gap: 0.45rem;

  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;

  background: linear-gradient(135deg, #2b78c5, #1f5fa0);
  padding: 0.55rem 1.05rem;
  border-radius: 999px;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

/* Hover (desktop) */
.audio-download:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.3);
  opacity: 0.96;
}

/* Active (tap / click) */
.audio-download:active {
  transform: scale(0.96);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.22),
    inset 0 2px 4px rgba(0,0,0,0.28);
}

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

@media (max-width: 480px) {

  .audio-block {
    max-width: 100%;
  }

  .audio-player {
    height: 50px;
  }

  .audio-download {
    font-size: 0.92rem;
    padding: 0.6rem 1.15rem;
  }
}

/* Extra small devices */
@media (max-width: 360px) {

  .audio-player {
    height: 48px;
  }

  .audio-download {
    font-size: 0.9rem;
  }
}