/* Fondo con degradado más elegante */
.gradient-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #000000 100%);
  color: #f1f5f9; /* Texto claro para contraste */
}

/* Sección principal con imagen + capa oscura */
.hero-bg {
  background: linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(0, 0, 0, 0.5)
    ),
    url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 100px 20px;
}

/* Tarjetas de autos con mejor efecto */
.car-card {
  background-color: #1e293b;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #e2e8f0;
}

.car-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Desplazamiento suave */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Animación de aparición elegante */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}