@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+QLD:wght@100..400&display=swap');
body {
    font-family: "Playwrite AU QLD", cursive;
    background-color: rgb(255, 171, 0);
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    flex-flow: column;
}

.container {
    background-color: #fff;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 600px;
    width: 90%;
}

h1 {
    color: #0056b3;
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

p {
    font-size: 1.2em;
    line-height: 1.5;
}

.reproductor {
    margin-top: 2em;
}

.reproductor iframe {
    width: 100%;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.reproductor-moderno {
  /* Contenedor principal */
  background-color: #f8f9fa; /* Fondo gris claro */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
  padding: 15px;
  max-width: 400px; /* Ancho máximo para que no se estire demasiado */
  margin: auto; /* Centrar el reproductor */
}

.reproductor-moderno audio {
  width: 100%;
  outline: none; /* Elimina el borde de enfoque por defecto */
}

/* Estilos para los controles del reproductor (esto es más complejo ya que depende del navegador) */
.reproductor-moderno audio::-webkit-media-controls-panel {
  background-color: #ffffff; /* Fondo blanco */
  border-radius: 10px;
}

.reproductor-moderno audio::-webkit-media-controls-play-button,
.reproductor-moderno audio::-webkit-media-controls-current-time-display,
.reproductor-moderno audio::-webkit-media-controls-time-remaining-display {
  color: #333;
}


/* Estilos generales para los botones sociales */
.btn-social {
    width: 45px;
    height: 45px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Color del icono */
    transition: transform 0.3s ease; /* Transición para el efecto hover */
}

.btn-social:hover {
    transform: translateY(-5px); /* Pequeño desplazamiento hacia arriba */
    color: #fff; /* Asegura que el color del icono se mantenga blanco */
}

/* Colores específicos para cada red social */
.facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}

.twitter {
    background-color: #00acee;
    border-color: #00acee;
}

.instagram {
    /* Gradiente de Instagram */
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #f09433;
}

.tiktok {
    background-color: #000;
    border-color: #000;
}

.whatsapp {
    background-color: #25d366;
    border-color: #25d366;
}

.youtube {
    background-color: #ff0000;
    border-color: #ff0000;
}