.podcast-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    justify-content: center; /* Centrar las tarjetas horizontalmente */
    align-items: center; /* Centrar las tarjetas verticalmente */
}


.podcast-card {
    background-size: cover;
    background-position: center;
    width: 400px;
    height: 400px;
    position: relative;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: none; /* Eliminar cualquier borde que pueda estar causando la línea gris */
}

.podcast-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px 10px;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar la legibilidad */
}

.podcast-title {
    font-size: 18px!important;
    color: white !important; /* Asegurar que el título sea blanco */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Sombra para el texto */
}

.podcast-date {
    font-size: 1em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

audio {
    width: 100%;
    outline: none;
    border: none;
    background-color: #60a9a9;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-box-shadow: none;    
}

/* Personalización para los controles del reproductor en WebKit */
audio::-webkit-media-controls-panel {
    background-color: #60a9a9;
    border-radius: 0px !important;
    color: #fff;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-overflow-button,
audio::-webkit-media-controls-time-remaining-display {
    filter: invert(100%); /* Invierte los colores para hacerlos blancos */
    box-shadow: none !important;
    text-shadow: none !important;  
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0px;
    background-color: #60a9a9;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Estilos para otros controles como tiempo y menús podrían no ser personalizables */


/* Para otros navegadores, como Firefox, es posible que necesites usar selectores específicos del navegador */



/* Estilos responsivos para pantallas más pequeñas */
@media (max-width: 300px) {
    .podcast-card {
        width: 100%; /* Ajustar el ancho en pantallas pequeñas */
        height: auto; /* Altura automática para mantener la proporción */
    }

    .podcast-content {
        position: relative; /* Cambiar la posición para adaptarse al nuevo tamaño */
    }
}