/* ================= HERO · Sangria =================
   A foto ocupa o lado direito até ao limite do conteúdo (alinhada com o cabeçalho)
   e dissolve-se no fundo por baixo do texto. */
.hero { --edge: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); --cw: calc(100% - 2 * var(--edge)); }
.hero .wrap { padding-block: 72px 64px; min-height: 600px; }
.hero-copy { position: relative; z-index: 2; max-width: 540px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }

.hero .hero-stage { position: absolute; top: 32px; bottom: 32px; right: var(--edge); width: calc(var(--cw) * .84);
  aspect-ratio: auto; max-width: none; z-index: 0; border-radius: 0 12px 12px 0; overflow: hidden; }
.hero .hero-stage .photo {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 14%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.9) 44%, #000 54%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 14%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.9) 44%, #000 54%); }
.hero .hero-stage.has-photo::after { background:
  linear-gradient(90deg, rgba(11,12,15,.55) 0%, rgba(11,12,15,.25) 30%, transparent 46%),
  linear-gradient(0deg, var(--bg) 0%, transparent 26%),
  linear-gradient(180deg, rgba(11,12,15,.5) 0%, transparent 18%); }
.hero .hero-tag { right: 0; bottom: 0; }

@media (max-width: 1080px) {
  .hero .hero-stage { width: calc(var(--cw) * .8); }
}
@media (max-width: 760px) {
  .hero .wrap { min-height: 0; padding-block: 0 32px; }
  .hero .hero-stage { position: relative; top: auto; bottom: auto; right: auto; width: auto; aspect-ratio: 16 / 11; margin-inline: -16px; border-radius: 0; }
  .hero .hero-stage .photo { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 38%); mask-image: linear-gradient(0deg, transparent 0%, #000 38%); }
  .hero .hero-stage.has-photo::after { background: none; }
}