.hero {
  /* Desktop */
  --hero-media-min-height: 700px; /* altura minima da coluna da imagem */
  --hero-image-wrap-width-desktop: 760px; /* largura da area da imagem */
  --hero-image-width-desktop: 680px; /* largura real da imagem */
  --hero-image-offset-x-desktop: -8px; /* move para direita/esquerda */
  --hero-image-offset-y-desktop: -68px; /* move para baixo/cima */
  --hero-glow-size-desktop: 86%; /* tamanho do brilho */
  --hero-glow-right-desktop: 2%; /* distancia do brilho da direita */
  --hero-glow-bottom-desktop: 10%; /* distancia do brilho da base */

  /* Tablet */
  --hero-image-wrap-width-tablet: 560px; /* largura da area no tablet */
  --hero-image-width-tablet: 460px; /* largura da imagem no tablet */
  --hero-image-offset-x-tablet: 0px; /* posicao horizontal no tablet */
  --hero-image-offset-y-tablet: -18px; /* posicao vertical no tablet */
  --hero-glow-size-tablet: 84%; /* brilho no tablet */
  --hero-glow-right-tablet: 6%; /* brilho afastado da direita no tablet */
  --hero-glow-bottom-tablet: 8%; /* brilho afastado da base no tablet */

  /* Mobile */
  --hero-image-wrap-width-mobile: 360px; /* largura da area no celular */
  --hero-image-width-mobile: 320px; /* largura da imagem no celular */
  --hero-image-offset-x-mobile: 0px; /* posicao horizontal no celular */
  --hero-image-offset-y-mobile: -10px; /* posicao vertical no celular */
  --hero-glow-size-mobile: 82%; /* brilho no celular */
  --hero-glow-right-mobile: 6%; /* brilho afastado da direita no celular */
  --hero-glow-bottom-mobile: 8%; /* brilho afastado da base no celular */

  --hero-image-mask: linear-gradient( /* fade aplicado na imagem */
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.16) 8%,
    rgba(0, 0, 0, 0.52) 18%,
    rgba(0, 0, 0, 0.86) 28%,
    #000 100%
  );
}

.hero--image-centered {
  --hero-image-wrap-width-desktop: 680px; /* area mais equilibrada */
  --hero-image-width-desktop: 600px; /* imagem centralizada */
  --hero-image-offset-x-desktop: 0px; /* sem deslocamento horizontal */
  --hero-image-offset-y-desktop: -52px; /* sobe a imagem */
  --hero-glow-size-desktop: 78%; /* brilho mais suave */
  --hero-glow-right-desktop: 6%; /* brilho mais central */
  --hero-glow-bottom-desktop: 8%; /* brilho um pouco mais alto */
}

.hero--image-right {
  --hero-image-wrap-width-desktop: 760px; /* area larga para empurrar a imagem */
  --hero-image-width-desktop: 670px; /* imagem grande */
  --hero-image-offset-x-desktop: 56px; /* empurra para a direita */
  --hero-image-offset-y-desktop: -60px; /* sobe a imagem */
  --hero-glow-size-desktop: 80%; /* brilho equilibrado */
  --hero-glow-right-desktop: 1%; /* brilho acompanha o lado direito */
  --hero-glow-bottom-desktop: 7%; /* brilho ligeiramente elevado */
}

.hero--image-featured {
  --hero-image-wrap-width-desktop: 820px; /* area maxima para destaque */
  --hero-image-width-desktop: 716px; /* imagem maior */
  --hero-image-offset-x-desktop: 16px; /* desloca para a direita */
  --hero-image-offset-y-desktop: -64px; /* sobe a imagem */
  --hero-glow-size-desktop: 88%; /* brilho mais forte */
  --hero-glow-right-desktop: 0%; /* brilho encostado na direita */
  --hero-glow-bottom-desktop: 10%; /* brilho mais baixo */
}

.hero__media {
  position: relative;
  display: flex;
  justify-content: flex-end; /* alinha a imagem no lado direito */
  align-items: center; /* centraliza a imagem na coluna */
  min-height: var(--hero-media-min-height); /* usa a altura minima configurada */
}

.hero__image-wrap {
  position: relative;
  width: min(100%, var(--hero-image-wrap-width-desktop)); /* limite externo da area */
  display: flex;
  justify-content: flex-end; /* posiciona o conteudo na direita */
  align-items: center; /* mantem tudo alinhado ao centro */
  transform: translate(
    var(--hero-image-offset-x-desktop),
    var(--hero-image-offset-y-desktop)
  ); /* move a imagem sem alterar o grid */
}

.hero__image-wrap::before {
  /* Soft halo helps the portrait feel intentionally embedded into the composition. */
  content: "";
  position: absolute;
  inset: 12% 12% 12% 20%;
  border-radius: 40px;
  background:
    radial-gradient(circle at 48% 42%, rgba(177, 220, 248, 0.42) 0%, rgba(177, 220, 248, 0.18) 38%, transparent 72%);
  filter: blur(18px);
  z-index: 0;
}

.hero__image-wrap::after {
  /* A restrained base shadow avoids the cut-out look near the fade at the bottom. */
  content: "";
  position: absolute;
  inset: auto 8% 2% 24%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 28, 56, 0.16) 0%, rgba(12, 28, 56, 0.05) 44%, transparent 74%);
  filter: blur(18px);
  z-index: 0;
}

.hero__glow {
  position: absolute;
  right: var(--hero-glow-right-desktop); /* posicao horizontal do brilho */
  bottom: var(--hero-glow-bottom-desktop); /* posicao vertical do brilho */
  width: var(--hero-glow-size-desktop); /* largura do brilho */
  height: var(--hero-glow-size-desktop); /* altura do brilho */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(177, 220, 248, 0.3) 0%,
    rgba(177, 220, 248, 0.16) 42%,
    transparent 74%
  );
  filter: blur(34px); /* suaviza o brilho */
  z-index: 0; /* brilho fica atras da imagem */
}

.hero__image {
  position: relative;
  z-index: 1; /* imagem fica acima do brilho */
  width: min(100%, var(--hero-image-width-desktop)); /* largura final da imagem */
  max-width: none; /* impede travas extras de crescimento */
  height: auto;
  object-fit: contain;
  display: block;
  filter:
    saturate(1.02)
    drop-shadow(0 24px 42px rgba(19, 39, 72, 0.18))
    drop-shadow(0 10px 22px rgba(19, 39, 72, 0.08)); /* sombra refinada sem parecer pesada */
  -webkit-mask: var(--hero-image-mask) center / 100% 100% no-repeat; /* suporte para Chrome/Safari */
  mask: var(--hero-image-mask) center / 100% 100% no-repeat; /* suporte padrao */
}