/* Imagens decorativas dos Heroes M. O conteúdo principal permanece em HTML. */
section.qs-ph.header-scene {
  background-color: #030724;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center right;
}

section.qs-ph.header-scene--company {
  --hero-scene-image: url("headers/header-quem-somos-soft.webp");
  background-image:
    linear-gradient(90deg, rgba(3, 7, 36, .94) 0%, rgba(3, 7, 36, .82) 46%, rgba(3, 7, 36, .66) 100%),
    var(--hero-scene-image);
}

section.qs-ph.header-scene--ai {
  --hero-scene-image: url("headers/header-ai-operations-soft.webp");
  background-image:
    linear-gradient(90deg, rgba(3, 7, 36, .94) 0%, rgba(3, 7, 36, .82) 46%, rgba(3, 7, 36, .66) 100%),
    var(--hero-scene-image);
}

section.qs-ph.header-scene--hyper {
  --hero-scene-image: url("headers/header-hiperautomacao-soft.webp");
  background-image:
    linear-gradient(90deg, rgba(3, 7, 36, .94) 0%, rgba(3, 7, 36, .82) 46%, rgba(3, 7, 36, .66) 100%),
    var(--hero-scene-image);
}

section.qs-ph.header-scene--quality {
  --hero-scene-image: url("headers/header-qualidade-experiencia-soft.webp");
  background-image:
    linear-gradient(90deg, rgba(3, 7, 36, .94) 0%, rgba(3, 7, 36, .82) 46%, rgba(3, 7, 36, .66) 100%),
    var(--hero-scene-image);
}

section.qs-ph.header-scene--sap {
  --hero-scene-image: url("headers/header-servicos-sap-soft.webp");
  background-image:
    linear-gradient(90deg, rgba(3, 7, 36, .94) 0%, rgba(3, 7, 36, .82) 46%, rgba(3, 7, 36, .66) 100%),
    var(--hero-scene-image);
}

html.clean section.qs-ph.header-scene {
  background-color: #f5f8ff;
  background-image:
    linear-gradient(90deg, rgba(245, 248, 255, .96) 0%, rgba(245, 248, 255, .87) 48%, rgba(245, 248, 255, .68) 100%),
    var(--hero-scene-image);
}

html.clean section.qs-ph.header-scene--company {
  background-image:
    linear-gradient(90deg, rgba(245, 248, 255, .96) 0%, rgba(245, 248, 255, .87) 48%, rgba(245, 248, 255, .68) 100%),
    var(--hero-scene-image);
}

@media (max-width: 700px) {
  section.qs-ph.header-scene {
    background-position: center, 68% center;
  }

  section.qs-ph.header-scene--ai,
  section.qs-ph.header-scene--company,
  section.qs-ph.header-scene--hyper,
  section.qs-ph.header-scene--quality,
  section.qs-ph.header-scene--sap {
    background-image:
      linear-gradient(180deg, rgba(3, 7, 36, .88) 0%, rgba(3, 7, 36, .79) 100%),
      var(--hero-scene-image);
  }

  html.clean section.qs-ph.header-scene--ai,
  html.clean section.qs-ph.header-scene--company,
  html.clean section.qs-ph.header-scene--hyper,
  html.clean section.qs-ph.header-scene--quality,
  html.clean section.qs-ph.header-scene--sap {
    background-image:
      linear-gradient(180deg, rgba(245, 248, 255, .92) 0%, rgba(245, 248, 255, .84) 100%),
      var(--hero-scene-image);
  }
}

@media (prefers-reduced-motion: reduce) {
  section.qs-ph.header-scene { scroll-behavior: auto; }
}