/* Hero: fondo y background opcional con --hero-bg */
.hero {
  position: relative;
  background: linear-gradient(180deg, rgba(0, 4, 154, .04) 0%, rgba(43, 133, 255, .06) 100%);
}

.hero[style*="--hero-bg"] {
  /* Capa blanca translúcida encima para mejorar contraste del texto */
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    linear-gradient(180deg, rgba(0, 4, 154, .08) 0%, rgba(43, 133, 255, .12) 100%),
    var(--hero-bg) center/cover no-repeat;
}