/* TODO ESTO ES EL CARRUSEL de usados*/

.carousel-inner img {
  height: 250px;
  /* Ajusta la altura del carrusel */
  object-fit: cover;
  /* Asegura que la imagen se ajuste al contenedor */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: black; /* Color de fondo de los iconos */
  border-radius: 50%;
  /* Bordes redondeados */
  padding: 10px; /* Añade espacio alrededor del icono */
}
.carousel-control-prev-icon:after,
.carousel-control-next-icon:after {
  font-size: 30px; /* Tamaño del icono */
  color: white; /* Color del icono */
}
.vehicle-card {
  border: 1px solid #ddd; /* Borde alrededor del contenedor */
  border-radius: 10px; /* Bordes redondeados */
  padding: 15px; /* Espacio interno */
  margin-bottom: 20px; /* Espacio inferior */
  background-color: #f9f9f9;
  /* Fondo claro */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
.vehicle-card .vehicle-info {
  display: flex;
  justify-content: space-between;
}

.vehicle-content {
  font-family: "Merriweather", serif;
  /* Fuente Merriweather */
  font-size: 13px; /* Tamaño de fuente mayor */
  color: #000; /* Color negro */
  font-weight: bold; /* Negrita */
}
   /* Clase personalizada para controlar la altura del modal */
.modal-dialog-custom-height {
  height: 100vh; /* Ajusta este valor a la altura deseada */
  max-height:100vh; /* Asegura que no exceda el viewport */
}
.modal-content {
  overflow: auto; /* Permite scroll si el contenido excede la altura */
}
.ver-imagenes-btn {
  position: absolute;
  bottom: 10px; /* Ajusta la posición vertical */
  left: 25%; /* Centra el botón horizontalmente */
  transform: translateX(-50%);
  z-index: 10; /* Asegura que el botón esté por encima de las imágenes */
}

#mainCarousel{
    margin-top: 70px;
}
/* Altura específica para el carrusel principal */

/* Establece una altura grande para el carrusel */
#mainCarousel .carousel-inner .carousel-item::before 
{ content: ''; 
position: absolute; 
top: 0; left: 0; 
width: 100%; height: 100%; 
background-size: cover; /* Asegura que el fondo cubra el contenedor */ 
background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */ 
opacity: 0.3; /* Ajusta la opacidad de la imagen de fondo */ 
z-index: 1; /* Asegura que el pseudo-elemento esté detrás de la imagen principal */ 
}

#mainCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta para que la imagen se vea completa dentro del contenedor */
    object-position: center;
  }
#mainCarousel .carousel-fade .carousel-item {
    transition: opacity 0.65s ease-in-out; /* Personaliza la duración del fundido si es necesario */
  }
  
/* Media query para dispositivos móviles */ 
@media (max-width: 768px) 
{ #mainCarousel .carousel-container 
{ margin-top: 100px; /* Ajusta este valor según sea necesario para evitar solapamiento */ } }

/* botones de las cards de info */
.boton-whats {
    background-color: #0b0638; /* Color personalizado */
    color: rgb(230, 217, 217); /* Color del texto */
    border: none; /* Sin borde */
    padding: 15px 30px; /* Espaciado interno para hacerlo más grande */
    font-size: 18px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Texto en negrita */
    border-radius: 50px; /* Bordes redondeados */
    text-decoration: none; /* Quitar la línea subrayada */
    display: inline-block; /* Mantener el comportamiento de botón */
    transition: background-color 0.3s ease; /* Animación al pasar el ratón */
  }

  .boton-whats:hover {
    background-color: #00010a; /* Color más oscuro al pasar el ratón */
    color: rgb(230, 217, 217); /* Color del texto */
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
  }
 /* .card img{
    height: 250px;
 } */
 #letra {
  font-family: 'Concert One', sans-serif; /* Aplica la fuente */
  text-indent: 35px; /* Ajusta la sangría, puedes modificar el valor */
}
.carousel-inner img:hover {
  cursor: pointer; /* Cambia el cursor a una manita */
}
/* Estilo base para la tarjeta del vehículo */
.vehicle-card {
  transition: all 0.3s ease; /* Suaviza la transición de los estilos */
}

/* Efecto al pasar el mouse sobre la tarjeta del vehículo */
.vehicle-card:hover {
  transform: scale(1.02); /* Aumenta ligeramente el tamaño */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
  border-color: #007bff; /* Cambia el color del borde */
  cursor: pointer; /* Cambia el cursor a una manita */
}
.vehicle-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.vehicle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Estilos para los detalles del vehículo */
.vehicle-info {
  font-size: 0.9rem;
  color: #555;
}

.vehicle-info i {
  margin-right: 5px;
  color: #3498db; /* Color azul para los iconos */
}
  /* Estilo para el nombre del vehículo */
  .vehicle-title {
    font-size: 1.2rem; /* Tamaño por defecto */
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%; /* Limita el ancho */
}

/* Clase para reducir el tamaño del texto si es muy largo */
.small-text {
    font-size: 1rem !important;
}
/* Estilo para el precio */
.price-span {
    font-size: 1.5em; /* Aumenta el tamaño de la fuente */
    background-color: #070a03; /* Fondo azul */
    color: white; /* Letras blancas */
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}
.card.h-100 {
    display: flex;
    flex-direction: column;
}
.card-body {
    flex: 1 1 auto;
}
.card-img-top {
    height: 270px;
    object-fit: cover;
}