/* ==========================================================
   M3 TECHNOLOGY — HERO DO USUÁRIO V1.5
   Usa exatamente o arquivo enviado pelo usuário (1600 x 533).
   Sem redimensionar o arquivo, sem cortar e sem distorcer.
   ========================================================== */

@media(min-width:761px){
  .project-hero,
  .project-hero-layered{
    position:relative!important;
    width:100%!important;

    /* mesma proporção nativa da imagem: 1600 / 533 */
    aspect-ratio:1600 / 533!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;

    background-color:#04142a!important;
    background-image:url('/assets/images/hero-m3-panorama-4k.webp')!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;

    /* como a seção tem a mesma proporção da imagem,
       100% 100% não distorce o conteúdo */
    background-size:100% 100%!important;
  }

  /* Desativa qualquer camada antiga que possa sobrepor ou duplicar a imagem. */
  .hero-visual-layer,
  .project-hero-art{
    display:none!important;
  }

  .project-hero-layered::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    /* leve proteção do texto; não altera a imagem original */
    background:linear-gradient(
      90deg,
      rgba(1,9,21,.18) 0%,
      rgba(1,9,21,.10) 26%,
      rgba(1,9,21,.025) 42%,
      rgba(1,9,21,0) 54%
    )!important;
  }

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

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

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

/* Em telas muito largas, mantém rigorosamente a proporção da imagem. */
@media(min-width:1600px){
  .project-hero,
  .project-hero-layered{
    aspect-ratio:1600 / 533!important;
  }
}

/* Esta correção não redesenha o hero mobile. */