/* -----------------------------------------
   MEJORA DEL HERO: CAPA OSCURA PARA CONTRASTE
----------------------------------------- */
.qi-hero {
  position: relative !important;
  /* Capa oscura (50% negro) sobre la imagen de fondo */
  background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('URL_DE_TU_IMAGEN') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 140px 0 90px 0 !important;
}

/* Si pusiste la imagen como etiqueta <img> adentro del HTML, usa esta capa: */
.qi-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important; /* Ajusta la opacidad aquí (0.5 = 50%) */
  z-index: 1 !important;
}

.qi-hero-wrapper {
  position: relative !important;
  z-index: 2 !important; /* Mantiene el texto y botones por encima de la capa oscura */
}

.qi-hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important; /* Sombra sutil para mayor nitidez */
  font-weight: 800 !important;
}

.qi-hero-subtitle {
  color: #f8f8f8 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}