/* Carrusel */
.carrusel {
  display: flex;
  overflow-x: auto; /* Permite hacer scroll horizontal */
  gap: 10px;
  padding: 20px 0;
  scroll-behavior: smooth;
  width: 100%; /* Asegura que el carrusel ocupe todo el ancho disponible */
}

.carrusel .tarjetas-container {
  display: flex;
  gap: 15px;
  flex-wrap: nowrap; /* No se permite el salto de línea de las tarjetas */
  width: 100%; /* Asegura que el contenedor de las tarjetas ocupe todo el espacio */
}

/* Estilo para las tarjetas dentro del carrusel */
/* Estilo para la tarjeta única */
.tarjeta {
   width: 100%; /* La tarjeta ocupa el 100% del ancho disponible dentro de la columna */
  max-width: 150px; /* Limita el ancho máximo de la tarjeta */
  background-color: #FF8000;
  border: 2px solid #7006D;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* Centra la tarjeta en la columna */
}



/* Estilo para los títulos dentro de las tarjetas */
.tarjetas-container .tarjeta h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

/* Efecto hover sobre la tarjeta */
.tarjeta:hover {
  background-color: #D3014D; /* Fondo púrpura al pasar el mouse */
  border-color: #FF8000; /* Borde naranja al pasar el mouse */
  color: white; /* Aseguramos que el texto se mantenga blanco */
}