/* ==========================================================
   M3 TECHNOLOGY — HERO DO USUÁRIO V1.6
   A imagem entra como <img> real, não como background CSS.
   ========================================================== */

@media(min-width:761px){
  .project-hero.project-hero-layered{
    position:relative!important;
    width:100%!important;
    aspect-ratio:1600 / 533!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#04142a!important;
  }

  /* Desativa qualquer imagem/background anterior do hero. */
  .project-hero.project-hero-layered{
    background-image:none!important;
  }

  .hero-visual-layer,
  .project-hero-art{
    display:none!important;
  }

  .m3-hero-direct{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    display:block!important;
    object-fit:fill!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    filter:none!important;
    transform:none!important;
  }

  /* A seção tem exatamente a mesma proporção da imagem,
     portanto object-fit:fill não deforma o conteúdo. */
  .project-hero-layered::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(
      90deg,
      rgba(1,9,21,.13) 0%,
      rgba(1,9,21,.07) 28%,
      rgba(1,9,21,.02) 43%,
      rgba(1,9,21,0) 56%
    )!important;
  }

  .project-hero-layered::after{
    display:none!important;
  }

  .project-hero-grid{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    display:block!important;
  }

  .project-hero-copy{
    width:44%!important;
    max-width:610px!important;
    height:100%!important;
    min-height:100%!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    position:relative!important;
    z-index:3!important;
  }
}

/* Esta versão não altera o hero mobile. */
@media(max-width:760px){
  .m3-hero-direct{display:none!important;}
}