/* Adicional CSS para hero com imagem de fundo */

.hero--with-image{
  position: relative;
  overflow: hidden;
}

.hero__image{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  height: 120%;
  background-image: url('../assets/images/hero-person.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 100%);
}

.hero__inner--neon{
  position: relative;
  z-index: 2;
}

/* Responsive para hero com imagem */
@media (max-width: 980px){
  .hero__image{ 
    width: 70%; 
    opacity: 0.2; 
  }
}

@media (max-width: 620px){
  .hero__image{ 
    width: 90%; 
    opacity: 0.15; 
  }
}