* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
     margin: 0;
 }

 body {
     display: flex;
     flex-direction: column;
 }

 body {
     background-color: #FFFFFF;
     font-family: 'Montserrat', sans-serif;
 }

 img {
     display: block;
 }

 .logo {
     width: 266px;
     height: auto;
     margin: 0 auto;
     margin-bottom: 32px;
 }

 h1 {
     margin-bottom: 24px;
     font-size: 20px;
     line-height: 28px;
     font-weight: 800;
 }

 main {
     border-top: solid 8px #0e75bb;
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .player-card {
     text-align: center;
     padding: 32px;
     background-color: #FFFFFF;
     border: solid 1px #f3f4f6;
     border-radius: 16px;
     width: 448px;
     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     margin: 0 auto;
 }

 footer {
     background-color: #1d1d1b;
     padding: 24px 16px;
 }

 footer p {
     text-align: center;
     color: #FFFFFF;
     letter-spacing: 0.35px;
     font-weight: 300;
     font-size: 14px;
     letter-spacing: 0.35px;
     line-height: 20px;
 }

 footer span {
     color: #a1a1aa;
     display: block;
     font-size: 12px;
     line-height: 16px;
     margin-top: 8px;
     text-align: center;
     font-weight: 300;
 }

 /* Botón de Play/Stop */
 .btn-play {
     background-color: #0e75bb;
     color: white;
     border: none;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto 32px;
     transition: transform 0.2s, background-color 0.3s;
 }

 .btn-play:hover {
     transform: scale(1.05);
     filter: brightness(1.1);
 }

 .btn-play .material-symbols-outlined {
     font-size: 45px;
 }

 /* Contenedor de Volumen */
 .volume-container {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #555;
 }

 .volume-slider {
     flex-grow: 1;
     cursor: pointer;
     accent-color: #0e75bb;
     -webkit-appearance: none;
     appearance: none;
     background-color: #e5e7eb;
     height: 6px;
     border-radius: 8px;
 }

 .volume-container .material-symbols-rounded {
     font-size: 24px;
     color: #9ca3af;
 }

 .icon-solid {
     font-variation-settings: 'FILL' 1;
 }

 #play-icon {
     font-size: 48px;
 }

 .badge-live {
     color: #0e75bb;
     text-transform: uppercase;
     font-weight: 800;
     font-size: 12px;
     line-height: 16px;
     padding: 4px 12px;
     background-color: #eff6ff;
     border-radius: 9999px;
     letter-spacing: 0.6px;
     margin-bottom: 16px;
     display: inline-flex;
     align-items: center;
 }

 .animate-ping {
     animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     position: absolute;
     width: 8px;
     height: 8px;
     display: inline-flex;
     background-color: #60a5fa;
     border-radius: 9999px;
     opacity: 1;
     top: calc(50% - 4px);
     left: calc(50% - 4px);
 }
.redes{display: flex; justify-content: center; list-style: none; margin-top: 32px;}
 .redes li{margin: 0 8px;}
  .redes li a:hover svg{fill:#0e75bb;}

 @keyframes ping {

     75%,
     100% {
         transform: scale(2);
         opacity: 0;
     }
 }

 @media (max-width: 576px) {
     .player-card {
         width: 90%;
     }

     .logo {
         width: 186px;
     }
 }