/* Fundo cinematográfico compartilhado, com enquadramento por fotografia. */
:is(.home-premium #inicio, [data-cinematic-hero]) {
  min-height: calc(100vh - var(--cinematic-header-flow, 0px));
  background: #0b0b0b;
  isolation: isolate;
  overflow: hidden;
}

@supports (min-height: 100svh) {
  :is(.home-premium #inicio, [data-cinematic-hero]) { min-height: calc(100svh - var(--cinematic-header-flow, 0px)); }
}

:is(.home-premium #inicio, [data-cinematic-hero]) > .hero-grid {
  position: relative;
  z-index: 2;
}

:is(.home-premium #inicio, [data-cinematic-hero]) > .hero-art.hero-editorial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background: #0b0b0b;
  box-shadow: none;
  pointer-events: none;
}

:is(.home-premium #inicio, [data-cinematic-hero]) .hero-editorial > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--cinematic-image-position, 100% 50%);
  -webkit-mask-image: none;
  mask-image: none;
  border: 0;
  border-radius: 0;
  transform: none;
  filter: none;
}

:is(.home-premium #inicio, [data-cinematic-hero]) .hero-editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.90) 26%, rgba(8,8,8,.78) 45%, rgba(8,8,8,.25) 64%, rgba(8,8,8,.02) 82%, transparent 100%),
    linear-gradient(0deg, rgba(8,8,8,.60), transparent 12%);
  pointer-events: none;
}

@media (max-width: 800px) {
  :is(.home-premium #inicio, [data-cinematic-hero]) .hero-editorial > img {
    object-position: var(--cinematic-image-position-mobile, var(--cinematic-image-position, 100% 50%));
  }

  :is(.home-premium #inicio, [data-cinematic-hero]) .hero-editorial::after {
    background: linear-gradient(180deg, rgba(8,8,8,.97) 0%, rgba(8,8,8,.96) 30%, rgba(8,8,8,.88) 45%, rgba(8,8,8,.35) 62%, rgba(8,8,8,.07) 80%, rgba(8,8,8,.30) 100%);
  }
}

/* Configuração das duas páginas: apenas cabeçalho em fluxo e ponto focal da fotografia. */
[data-cinematic-hero] { --cinematic-header-flow: var(--hero-header-flow, 86.8px); }
.servicos-page [data-cinematic-hero] { --cinematic-image-position: 100% 50%; --cinematic-image-position-mobile: 85% 50%; }
.portfolio-page [data-cinematic-hero] { --cinematic-image-position: 50% 40%; --cinematic-image-position-mobile: 75% 45%; }

/* O original panorâmico da Home é enquadrado pela largura, sem ampliar pela altura.
   A máscara acompanha a borda real da foto para integrar o ambiente ao fundo inteiro. */
.home-premium #inicio .hero-editorial > img {
 inset:50% 0 auto; width:100%; height:auto;
 object-fit:contain; object-position:100% 50%;
 transform:translateY(-50%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
}
.servicos-page [data-cinematic-hero] {--cinematic-image-position:100% 55%;}
.portfolio-page [data-cinematic-hero] {--cinematic-image-position:100% 50%;}

/* Nas telas verticais o cenário se abre na base da mesma Hero; a altura da foto
   segue sua proporção natural, evitando o recorte lateral extremo do cover. */
@media (max-width:800px) {
 :is(.home-premium #inicio,[data-cinematic-hero]) .hero-editorial > img {
  inset:auto 0 0 auto; width:var(--cinematic-mobile-width,160%); height:auto;
  object-fit:contain; object-position:100% 100%; transform:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 100%);
 }
 .home-premium #inicio {--cinematic-mobile-width:155%;}
 .servicos-page [data-cinematic-hero] {--cinematic-mobile-width:160%;}
 .portfolio-page [data-cinematic-hero] {--cinematic-mobile-width:150%;}
}