/* ========== HERO ========== */
.hero{
  position: relative;
  height: 55vh;
  background: url('../assets/img/products/Envidraçamento/IMG-20250401-WA0002.jpg') center left / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;

  /* “puxa” o hero para cima para ficar sob a navbar */
  margin-top: -60px;               /* igual à altura da navbar desktop */
  padding-top: 60px;               /* compensa o conteúdo interno */
  z-index: 1;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.4);
}
.hero-overlay{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
}
.hero-overlay h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 60px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2em;
  color: #EBEBEB;
}

/* ========== RESPONSIVE HERO ========== */
@media (max-width: 768px){
  .hero{
    height: 40vh;
    margin-top: -52px;            /* altura da navbar mobile */
    padding-top: 52px;
  }
  .hero-overlay{
    margin-bottom: 1rem;
  }
  .hero-overlay h1{
    font-size: 2rem;
    padding: 0 1rem;
  }
}