.banner-animado {
  position: relative;
  overflow: hidden
}

.banner-animado__background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #e8c11b
}

.banner-animado__background--desktop {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center
}

.banner-animado__wrapper {
  max-width: 1132px;
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  box-sizing: border-box
}

.banner-animado__grid {
  position: relative;
  display: grid;
  grid: auto/500px auto;
  gap: 32px;
  z-index: 2;
  height: 650px
}

.banner-animado__left {
  display: flex;
  flex-direction: column;
  gap: 112px;
  padding: 64px 0;
  position: relative;
  z-index: 3
}

.banner-animado__logo img {
  display: block;
  object-fit: contain;
  object-position: center;
  width: 280px;
  height: 36px
}

.banner-animado__texto img {
  display: block;
  width: 508px;
  height: 220px;
  object-fit: contain;
  object-position: center
}

.banner-animado__right {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0
}

.img-linhas {
  position: absolute;
  top: 0;
  left: -20px
}

.img-circulo {
  position: absolute;
  top: 0;
  left: -180px
}

.banner-animado__tunel {
  position: relative;
  top: 80px;
  width: 100%;
  height: 100%
}

.banner-animado__tunel img {
  display: block;
  position: absolute;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  transition: transform .1s linear
}

.banner-animado__tunel .img-tunel {
  width: 330px;
  height: 460px;
  top: 0;
  right: 130px
}

.banner-animado__tunel .img-nuvem {
  top: -50px;
  left: 100px
}

.banner-animado__tunel .img-caixa {
  right: 210px;
  top: 110px
}

.banner-animado__tunel .banner-animado__lampada {
  position: absolute;
  top: 120px;
  left: 60px;
  width: 170px;
  height: 174px
}

.banner-animado__tunel .img-lampada__content {
  position: relative;
  display: inline-block;
  width: 94px;
  height: 161px
}

.banner-animado__tunel .img-lampada__content:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -8px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgb(255, 244, 180) 0%, rgb(255, 223, 100) 70%, rgba(255, 200, 50, 0.3) 60%, rgba(255, 200, 50, 0) 75%);
  filter: blur(25px);
  opacity: 1;
  z-index: -1;
  background-blend-mode: overlay
}

.banner-animado__tunel .img-lampada {
  filter: brightness(1.15) drop-shadow(0 0 25px rgba(255, 220, 120, 0.9))
}

.banner-animado__tunel .img-linhas-ondas {
  bottom: 0;
  left: -40px
}

.banner-animado__tunel .img-barras {
  right: 90px;
  top: 10px;
  width: 30px;
  height: 60px;
  object-fit: contain;
  opacity: .5
}

.banner-animado__tunel .img-esteira {
  bottom: 70px;
  right: -130px
}

.banner-animado__grade {
  position: absolute;
  right: -110px;
  bottom: 0
}

.banner-animado__grade .img-grade {
  display: block
}

.banner-animado__mobile {
  display: none
}

@media only screen and (max-width: 992px) {
  .banner-animado__grid {
    display: block;
    z-index: 2;
    height: 400px;
    padding-top: 24px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto
  }

  .banner-animado__left {
    display: block;
    padding: 0
  }

  .banner-animado__logo {
    display: none
  }

  .banner-animado__texto img {
    width: 320px;
    height: 130px
  }

  .banner-animado__right {
    position: initial;
    height: 270px
  }

  .img-linhas {
    left: 0;
    height: 330px
  }

  .img-circulo {
    left: 0;
    width: 180px
  }

  .banner-animado__tunel {
    top: 0;
    height: 270px
  }

  .banner-animado__tunel img {
    display: block;
    position: absolute;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
    transition: transform .1s linear
  }

  .banner-animado__tunel .img-tunel {
    width: 170px;
    height: 230px;
    top: -10px;
    right: 100px
  }

  .banner-animado__tunel .img-nuvem {
    top: -30px;
    left: auto;
    width: 70px;
    height: 50px;
    right: 230px
  }

  .banner-animado__tunel .img-caixa {
    right: 135px;
    top: 40px;
    width: 50px;
    height: 50px
  }

  .banner-animado__tunel .banner-animado__lampada {
    top: 40px;
    left: auto;
    width: 40px;
    height: 60px;
    right: 250px
  }

  .banner-animado__tunel .img-lampada__content {
    width: 40px;
    height: 60px
  }

  .banner-animado__tunel .img-lampada__content:before {
    content: "";
    position: absolute;
    top: -4px;
    left: -8px;
    width: 60px;
    height: 80px
  }

  .banner-animado__tunel .img-lampada {
    width: 40px;
    height: 60px;
    object-fit: contain
  }

  .banner-animado__tunel .img-linhas-ondas {
    bottom: 0;
    left: -20px;
    width: 40px
  }

  .banner-animado__tunel .img-barras {
    right: 90px;
    top: 0px;
    width: 20px;
    height: 50px
  }

  .banner-animado__tunel .img-esteira {
    bottom: 0;
    right: 30px;
    width: 300px
  }

  .banner-animado__grade {
    right: auto;
    left: -16px;
    width: 100px;
    height: 80px;
    bottom: 100px
  }

  .banner-animado__grade .img-grade {
    width: 100%;
    height: 100%
  }
}

@media only screen and (max-width: 500px) {
  .banner-animado {
    display: none
  }

  .banner-animado__mobile {
    display: block;
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden
  }

  .banner-animado__mobile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
  }
}