@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Serif:ital@0;1&family=News+Cycle:wght@400;700&family=Roboto:ital,wght@0,300;0,700;1,400&display=swap');

:root {
    --font-dm: 'DM Serif Display', serif;
    --font-instrument: 'Instrument Serif', serif;
    --font-news: 'News Cycle', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
}

html {
    font-family: var(--font-roboto);
}

h1, h2, h3, h4 {
    font-family: var(--font-dm);
}

 h5, h6{
    font-family: var(--font-instrument);
}

a, button, small {
    font-family: var(--font-news);
}

p {
    font-family: var(--font-roboto);
}
   /* Estilos para el contenedor del carrusel */
#carouselExample {
    max-width: 300px; /* Ajusta el ancho máximo del carrusel */
    max-height: 400px; /* Ajusta la altura máxima del carrusel */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    overflow: hidden; /* Evita que cualquier contenido sobresalga */
    display: flex; /* Asegura que el contenido esté alineado */
    justify-content: center; /* Centra las imágenes dentro del contenedor */
}

/* Estilos para las imágenes dentro del carrusel */
#carouselExample .carousel-item img {
    width: 100%; /* Ajusta la imagen al ancho del contenedor */
    height: auto; /* Mantiene las proporciones originales de la imagen */
    max-height: 100%; /* Limita la altura máxima a la del contenedor */
    object-fit: contain; /* Asegura que no se recorte ninguna parte de la imagen */
    display: block; /* Asegura que no existan espacios extra */
    margin: auto; /* Centra la imagen dentro de su contenedor */
}
.carousel-item {
    transition: transform 0.2s ease-in-out; /* Transición de 0.5 segundos */
}
.card-header img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
    margin: auto;
}
h1 {
    font-family: Arial, sans-serif;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.titulo-noticias {
    color: black;
    text-decoration: underline;
    text-align: center; /* Opcional: centra el texto */
    margin-top: 20px; /* Espaciado superior */
}
/* Audio player personalizado */
.custom-audio-player {
  background: none;
  min-height: 60px;
  gap: 32px;
}
#waveform {
  background: none;
  width: 320px;
  height: 60px;
  margin: 0;
}
.btn-audio-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ff1493;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 2px 8px #ff149344;
  transition: background 0.2s;
}
.btn-audio-play:hover {
  background: #ff6d1b;
}
#volumeSlider {
  accent-color: #ff1493;
}