/* V294 - Barra de título curvada igual ao efeito do rodapé */
.page-hero{
  position:relative!important;
  overflow:hidden!important;
  margin:0 0 36px!important;
  padding:56px 0 74px!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Remove linhas antigas e cria curva limpa no fundo da barra */
.page-hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:72px!important;
  z-index:3!important;
  pointer-events:none!important;
  background:var(--site-bg,#f8fafc)!important;
  mask:none!important;
  -webkit-mask:none!important;
  clip-path:ellipse(76% 72% at 50% 100%)!important;
}

/* Detalhe fino curvado, suave, como acabamento */
.page-hero::before{
  content:""!important;
  position:absolute!important;
  left:-5%!important;
  right:-5%!important;
  bottom:41px!important;
  height:42px!important;
  z-index:4!important;
  pointer-events:none!important;
  background:none!important;
  border-bottom:1px solid rgba(255,255,255,.24)!important;
  border-radius:0 0 50% 50%!important;
  opacity:.85!important;
  box-shadow:none!important;
}

/* Mantém o conteúdo acima do efeito */
.page-hero > .container{
  position:relative!important;
  z-index:6!important;
}

/* Brilho decorativo separado, sem interferir na curva */
.page-hero .container::before{
  content:""!important;
  position:absolute!important;
  width:320px!important;
  height:320px!important;
  right:4%!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)!important;
  z-index:-1!important;
  pointer-events:none!important;
}

/* Se algum CSS antigo tentar criar onda/máscara, esta versão ganha */
.page-hero[style]::after{
  background:var(--site-bg,#f8fafc)!important;
}

/* Mobile */
@media(max-width:760px){
  .page-hero{
    margin:0 0 26px!important;
    padding:38px 0 56px!important;
  }

  .page-hero::after{
    height:54px!important;
    clip-path:ellipse(82% 72% at 50% 100%)!important;
  }

  .page-hero::before{
    bottom:31px!important;
    height:34px!important;
    opacity:.62!important;
  }

  .page-hero .container::before{
    width:200px!important;
    height:200px!important;
    right:-40px!important;
    opacity:.45!important;
  }
}

@media(max-width:420px){
  .page-hero{
    padding:34px 0 52px!important;
  }

  .page-hero::after{
    height:50px!important;
  }
}