/* =====================================================
   Fondo Xolito para sección principal
   Cargar después de styles.css
   ===================================================== */

.hero-xolito {
  position: relative !important;
  overflow: hidden !important;
  background-color: #eaf8ff !important;
  background-image: url("../img/fondo-xolito-hero.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Capa suave para conservar lectura del texto */
.hero-xolito::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(234, 248, 255, 0.48) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Contenido encima del fondo */
.hero-xolito > .container,
.hero-xolito > .hero-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* Mantiene visible el fondo detrás de las tarjetas */
.hero-xolito .hero-content,
.hero-xolito .campaign-card {
  position: relative !important;
  z-index: 2 !important;
}

/* Tablet */
@media (max-width: 980px) {
  .hero-xolito {
    background-position: center top !important;
  }

  .hero-xolito::before {
    background: rgba(234, 248, 255, 0.68) !important;
  }
}

/* Celular */
@media (max-width: 640px) {
  .hero-xolito {
    background-size: auto 100% !important;
    background-position: center center !important;
  }

  .hero-xolito::before {
    background: rgba(234, 248, 255, 0.78) !important;
  }
}