/* =================================================== */
/* HERO IMAGE - SOLUÇÃO DEFINITIVA V2 */
/* =================================================== */

/* Reset do hero para garantir comportamento correto */
.hero {
  position: relative;
  overflow: hidden !important; /* Evitar scroll horizontal */
}

/* Wrapper adicional para controlar overflow */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: -100vw;
  bottom: 0;
  left: 100%;
  background: transparent;
  pointer-events: none;
}

/* Container do hero */
.hero__content {
  position: relative;
  z-index: 2;
}

/* Imagem do hero - usar viewport width para garantir que chegue na borda */
.hero__image {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100vw - 50vw) !important; /* 50% da viewport */
  max-width: calc(100vw - 600px) !important; /* Garantir espaço para conteúdo */
  height: 100% !important;
  pointer-events: none;
  z-index: 1;
}

/* Imagem dentro do container */
.hero__image img {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  height: 60rem !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
}

/* Media queries para diferentes resoluções */
@media (min-width: 1440px) {
  .hero__image {
    width: calc(100vw - 45vw) !important; /* 55% da viewport */
    max-width: calc(100vw - 700px) !important;
  }
  
  .hero__image img {
    height: 65rem !important;
  }
}

@media (min-width: 1920px) {
  .hero__image {
    width: calc(100vw - 40vw) !important; /* 60% da viewport */
    max-width: none !important;
  }
  
  .hero__image img {
    height: 70rem !important;
  }
}

/* Para monitores ultra-wide */
@media (min-width: 2560px) {
  .hero__image {
    width: calc(100vw - 35vw) !important; /* 65% da viewport */
  }
  
  .hero__image img {
    height: 75rem !important;
  }
}

/* Garantir que em mobile a imagem continue oculta */
@media (max-width: 1023px) {
  .hero__image {
    display: none !important;
  }
}

/* Fallback para navegadores antigos */
@supports not (object-fit: contain) {
  .hero__image img {
    width: auto !important;
    height: 100% !important;
  }
}