.container {
  max-width: 800px;
  margin: 0 auto; /* Centrar el carrusel */
}

.cards-container {
  display: flex;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  opacity: 1;
  width: 250px; /* Ajustar el ancho de las tarjetas */
  transition: opacity 1.5s ease, transform 0.5s ease; /* Añadimos transiciones para la opacidad y las transformaciones */
  transform-origin: top; /* Configuramos el origen de la transformación */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 5px; /* Agregamos un margen entre las tarjetas */
}

.card img {
  width: 100%;
  height: 300px; /* Altura fija para las imágenes (ajustar según tus preferencias) */
  object-fit: cover;
  border-radius: 8px;
  max-width: 100%;
}

.info {
  text-align: center;
  margin-bottom: 10px; /* Agregamos un margen inferior para separar el texto de la imagen */
}

/* Estilos para el enlace de cada título de libro */
.card .book-title {
  font-size: 14px;
  font-weight: bold;
  color: #007bff; /* Color de resaltado para el título */
  margin-bottom: 10px; /* Espacio adicional para separar el título de los otros párrafos */
  text-decoration: none; /* Eliminamos el subrayado del enlace */
}

/* Estilos para el efecto hover del enlace */
.card .book-title:hover {
  text-decoration: underline; /* Subrayado al pasar el cursor sobre el enlace */
  cursor: pointer; /* Cambiar el cursor al estilo de un puntero */
}

/* Estilos para el resto de las etiquetas <p> de cada tarjeta */
.card p:not(:first-child) {
  font-size: 11px;
  font-weight: 100;
  color: #333; /* Color para el texto normal */
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination .dots-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination .dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.pagination .dot.selected {
  background-color: #007bff;
}

.fade {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.contenido ol {
  margin: 10px 30px;
}

.contenido li {
  margin-bottom: 5px;
  font-size: 15px;
  text-align: justify;
}

.contenido a {
  display: block;
  margin: 10px auto;
  text-align: center;
}

.contenido strong {
  color: #012c5a;
  font-size: 17px;

}


.contenido img {
  display: block;
  margin: 10px auto;
  max-width: 100%;
}



@media (max-width: 768px) {
  .contenido li {
    font-size: 13px;
  }

  
  .contenido strong {
    color: #012c5a;
    font-size: 15px;
  
  }
}

@media(max-width: 500px){
  .card img {
    width: 100%;
    height: 185px; /* Altura fija para las imágenes (ajustar según tus preferencias) */
    object-fit: cover;
    border-radius: 8px;
    max-width: 100%;
  }
  
}



@media(max-width: 400px){
  .card  {
    width: 110px;

}

.card img {
  width: 100%;
  height: 135px; /* Altura fija para las imágenes (ajustar según tus preferencias) */
  object-fit: cover;
  border-radius: 8px;
  max-width: 100%;
}

}