/* Sección de novedades */
.novedades-section {
    padding: 20px 0;
    background-size: cover;
    background-position: center;
  }
  .carousel-control-prev {
    left: -10vw;
}
.carousel-control-next {
    right: -10vw;
}

/* Ocultar los controles en dispositivos móviles */
@media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
      display: none; /* Oculta los controles en pantallas pequeñas */
    }
  }

  /* Ajuste de títulos */
  .novedades-section h2 {
    font-size: 3rem; /* Tamaño del título para pantallas grandes */
  }
  
  /* Configurar el carrusel como contenedor scrolleable en móviles */
  .carousel-inner {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Scroll snapping */
  }
  
  .carousel-inner::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento */
  }
  
  .item {
    scroll-snap-align: start;
    flex: 0 0 auto; /* Hace que las columnas no se redimensionen */
  }
  
  /* Estilos para pantallas grandes */
  @media (min-width: 769px) {
    .item {
      flex-basis: calc(33.333% - 10px); /* 3 ítems visibles */
    }
  }
  
  /* Estilos para pantallas pequeñas */
  @media (max-width: 768px) {
    .novedades-section h2 {
      font-size: 2.5rem;
    }
  
    /* Imágenes en el carrusel para pantallas móviles */
    .novedades-section img {
      max-width: 100%;
      max-height: 180px;
      object-fit: cover;
    }
  
    .novedad-texto {
      margin-top: 10px;
      padding: 0 15px;
      text-align: center;
    }
  
    .novedad-texto p {
      font-size: 0.9rem;
    }
  }
  
  /* Ajustes para pantallas más pequeñas */
  @media (max-width: 576px) {
    .novedades-section h2 {
      font-size: 2rem;
    }
  
    .novedad-texto p {
      font-size: 0.8rem;
    }
  
    .novedades-section img {
      max-height: 150px;
    }
  }
  
  /* Efecto hover para las imágenes */
  .novedades-section img {
    transition: transform 0.5s ease;
  }
  
  .novedades-section img:hover {
    transform: translateY(-10px);
  }
  
  /* Establece la altura máxima para todas las imágenes en el carrusel */
  #carouselNovedadesPersonalizado img {
    max-height: 194px;
    object-fit: cover; /* Para mantener la proporción de la imagen */
  }