body {
  font-family: 'Inter', sans-serif;
  background-color: #1a1a1a; /* Dark background */
  color: #f0f0f0; /* Light text */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.hero-background {
  position: relative;
  background-image: url('../images/banner.webp'); /* Ruta relativa al CSS */
  background-size: cover;
  background-position: center;
}

.hero-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* superposición oscura para texto legible */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}