/* background único + overlay via pseudo-elemento (não "mistura" color+image) */
html,
body {
  height: 100%;
  margin: 0;
}

/* imagem de fundo no body — apenas 1 definição */
body {
  background-image: url("static/images/corpo/bloco1/backgroud.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* cuidado em mobile, abaixo removemos em small screens */
  background-position: top center;
  background-size: min(100%, 1200px) auto;
  /* z-index do pseudo-elemento garante que o overlay fique entre imagem e conteúdo */
  position: relative;
}

/* overlay sem tocar o fluxo: */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #080808;
  /* sua "cor" sem usar background-color do body */
  pointer-events: none;
  /* não interfere em cliques */
  z-index: 0;
}

/* seu header fica acima do overlay */
.site-header {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* conteudo do main deve ficar acima do overlay também */
main {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

/* imagens dentro dos blocos — evita distorção */
.blocos-area img,
.blocos-area picture img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* se o background-attachment fixed causar problemas em mobile, troca por scroll */
@media (max-width: 700px) {
  body {
    background-attachment: scroll;
  }
}