/* Hero principal com artes responsivas para mobile e desktop. */
body.hero-test-page.style-light .section--prod{
  background:#0b0c0e;
  color:#fff;
}

body.hero-test-page.style-light .section--prod .prod-head .lead{
  color:var(--on-dark-mut);
}

body.hero-test-page.style-light .section--prod .prod-counter{
  color:var(--on-dark-mut);
}

body.hero-test-page.style-light .section--prod .prod-cur{
  color:#fff;
}

body.hero-test-page.style-light .section--prod .prod-dot{
  background:rgba(255,255,255,.22);
}

body.hero-test-page.style-light .section--prod .prod-dot.active{
  background:var(--red);
}

.hero--test{
  min-height:100svh;
  background-image:url("img/hero-banner-mobile-correto.webp");
  background-position:center center;
  background-size:cover;
}

.hero--test .hero__bg::after{
  background:linear-gradient(180deg,rgba(5,6,8,.08),rgba(5,6,8,.18));
}

.hero--test .hero__inner{
  min-height:100svh;
  max-width:none;
  padding-top:230px;
  padding-bottom:52px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

.hero-test__content{
  position:relative;
  isolation:isolate;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero-test__content::before{
  content:"HSL";
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%,-55%) skewX(-8deg);
  font-family:"Arial Black","Helvetica Neue","Archivo",Arial,sans-serif;
  font-size:clamp(7rem,30vw,13rem);
  font-weight:900;
  font-style:italic;
  line-height:.75;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.045);
  text-shadow:0 1px 0 rgba(255,255,255,.025);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.hero--test .hero-test__title{
  max-width:none;
  margin:0 0 18px;
  width:100%;
  font-family:"Arial Black","Helvetica Neue","Archivo",Arial,sans-serif;
  font-weight:900;
  font-style:italic;
  font-size:clamp(1.65rem,8.4vw,2.25rem);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.55);
}

.hero-test__title span{
  display:block;
  color:var(--red);
  font-size:1.22em;
  margin-bottom:10px;
}

.hero-test__copy{
  max-width:100%;
  color:#fff;
  font-family:"Helvetica Neue","Archivo",Arial,sans-serif;
  font-weight:700;
  font-style:italic;
  letter-spacing:.015em;
  font-size:clamp(.86rem,3.55vw,1.05rem);
  line-height:1.38;
  text-shadow:0 3px 14px rgba(0,0,0,.75);
}

.hero-test__copy strong{
  color:#f01a20;
  font-weight:700;
}

.hero-test__copy-line{
  display:inline-block;
  transform:translateY(5px);
}

.hero--test .hero__cta{
  width:100%;
  margin-top:28px;
}

.hero--test .hero__cta .btn{
  font-family:"Helvetica Neue","Archivo",Arial,sans-serif;
  font-weight:800;
  font-style:italic;
  letter-spacing:.01em;
}

@media(max-width:420px){
  .hero--test .hero__inner{
    padding-top:205px;
    padding-bottom:40px;
  }

  .hero--test .hero-test__title{
    font-size:clamp(1.6rem,8.3vw,2.15rem);
  }
}

@media(min-width:768px) and (max-width:899px){
  .hero--test{
    background-position:center top;
  }

  .hero--test .hero__inner{
    padding-top:260px;
  }

  .hero--test .hero-test__title{
    font-size:clamp(3rem,8vw,4rem);
  }

  .hero-test__copy{
    font-size:1.35rem;
  }
}

@media(min-width:900px){
  .hero--test{
    min-height:clamp(650px,56.25vw,940px);
    background-image:url("img/hero-banner-desktop-novo.webp");
    background-position:center center;
  }

  .hero--test .hero__bg::after{
    background:linear-gradient(90deg,rgba(5,6,8,.08),rgba(5,6,8,.02) 65%,rgba(5,6,8,.08));
  }

  .hero--test .hero__inner{
    min-height:clamp(650px,56.25vw,940px);
    padding:0;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .hero-test__content{
    position:relative;
    top:auto;
    left:auto;
    width:min(90vw,820px);
    margin:0 auto;
  }

  .hero-test__content::before{
    font-size:clamp(15rem,27vw,27rem);
    transform:translate(-50%,-52%) skewX(-8deg);
    color:rgba(255,255,255,.038);
  }

  .hero--test .hero-test__title{
    font-size:clamp(3.4rem,5.25vw,5.25rem);
    margin-bottom:24px;
  }

  .hero-test__copy{
    font-size:clamp(1.2rem,1.8vw,1.75rem);
  }

  .hero--test .hero__cta{
    width:auto;
    margin-top:32px;
  }
}

@media(min-width:900px) and (max-width:1100px){
  .hero-test__content{
    width:min(90vw,720px);
  }

  .hero--test .hero-test__title{
    font-size:clamp(3rem,5.2vw,4rem);
  }
}