/* HERO — tamaño recomendado */
.mbqFront .mbqHero .mbqHeroBlock{
  position:relative;
  width:100%;
  height:420px;
  border-radius:22px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 15px 35px rgba(0,0,0,0.18);
}

/* background image */
.mbqFront .mbqHero .mbqHeroBg{
  position:absolute;
  inset:0;
  background-image:url('https://mybeautyqueens.com/uploads/pages_media/12_heroImgHome.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
}

/* overlay para texto claro */
.mbqFront .mbqHero .mbqHeroOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.35)
  );
  z-index:2;
}

/* contenido */
.mbqFront .mbqHero .mbqHeroContent{
  position:relative;
  z-index:3;
  text-align:center;
  color:#ffffff;
  max-width:700px;
  padding:0 20px;
}

/* título */
.mbqFront .mbqHero .mbqHeroTitle{
  font-size:36px;
  font-weight:900;
  margin-bottom:12px;
  line-height:1.2;
  text-shadow:0 3px 8px rgba(0,0,0,0.45);
}

/* subtítulo */
.mbqFront .mbqHero .mbqHeroSubtitle{
  font-size:18px;
  font-weight:500;
  margin-bottom:28px;
  opacity:0.95;
  text-shadow:0 2px 6px rgba(0,0,0,0.45);
}

/* contenedor de botones */
.mbqFront .mbqHero .mbqHeroButtons{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* botón base */
.mbqFront .mbqHero .mbqHeroBtn{
  padding:12px 26px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none !important;
  font-size:16px;
  transition:all .15s ease;
  display:inline-block;
}

/* botón principal */
.mbqFront .mbqHero .mbqHeroBtnPrimary{
  background:#8b2fa3;
  color:#ffffff !important;
}

.mbqFront .mbqHero .mbqHeroBtnPrimary:hover{
  background:#ffffff;
  color:#8b2fa3 !important;
}

/* botón secundario */
.mbqFront .mbqHero .mbqHeroBtnSecondary{
  background:rgba(255,255,255,0.18);
  color:#ffffff !important;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.35);
}

.mbqFront .mbqHero .mbqHeroBtnSecondary:hover{
  background:#ffffff;
  color:#8b2fa3 !important;
}

/* responsive */
@media (max-width:768px){
  .mbqFront .mbqHero .mbqHeroTitle{
    font-size:28px;
  }
  .mbqFront .mbqHero .mbqHeroSubtitle{
    font-size:16px;
  }
  .mbqFront .mbqHero .mbqHeroBlock{
    height:380px;
  }
}