/* Foto vertical preservada: proporção natural, sem cover nem parallax sobre o rosto. */
.hero {
  display: grid;
  grid-template-areas: "photo" "copy";
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: clip;
  background: var(--bg);
  color: var(--ink);
}

.hero .hero-background {
  grid-area: photo;
  position: relative;
  inset: auto;
  width: 100%;
  align-self: start;
  transform: none;
  transition: opacity 400ms ease;
}

.hero .hero-background img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  transform: none;
  will-change: auto;
}

.hero .hero-copy {
  grid-area: copy;
  align-self: center;
  max-width: none;
  min-width: 0;
  padding: 2.5rem var(--content-pad) 3rem;
  translate: none;
}

.hero .eyebrow-light { color: var(--rose-deep); }
.hero h1 { color: var(--ink); font-size: clamp(2.6rem, 10vw, 4rem); text-wrap: balance; }
.hero h1 em { color: var(--rose-deep); }
.hero .hero-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.hero .hero-trust { color: var(--ink-soft); flex-wrap: wrap; line-height: 1.8; }
.hero .button-outline-light { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.hero .button-outline-light:active { background: var(--surface-soft); }
.hero .hero-scroll { display: none; }
.jewel-intro-active .hero .hero-background { transform: none; }

/* Um único relógio de scroll para encaixe, foto e texto; sem atrasos por tempo. */
.jewel-intro.is-locking { z-index: 200; }
.jewel-intro-active .announcement,
.jewel-intro-active.jewel-transitioning .announcement,
.jewel-intro-active .site-header,
.jewel-intro-active.jewel-transitioning .site-header {
  opacity: var(--jewel-site-reveal, 0);
  transform: none;
  filter: none;
  transition: none;
}

.site-header .brand > img { transition: none; }
.jewel-intro-active .site-header .brand > img { transform: none; }

html.js .hero .hero-background {
  opacity: var(--jewel-photo-reveal, 1);
  transform: translate3d(0, var(--jewel-photo-lift, 0px), 0);
  transition: none;
}
html.js .hero .hero-copy.reveal {
  opacity: var(--jewel-site-copy-reveal, 1);
  transform: translate3d(0, var(--jewel-site-copy-lift, 0px), 0);
  filter: none;
  transition: none;
}
.jewel-transitioning .hero .hero-background { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  html.js .hero .hero-background,
  html.js .hero .hero-copy.reveal { transform: none; }
  html.js .hero .hero-background,
  html.js .hero .hero-copy.reveal,
  .jewel-intro .jewel-medallion,
  .jewel-intro .jewel-intro__chain,
  .jewel-intro__fallback,
  .site-header,
  .site-header .brand > img,
  .announcement { transition: none !important; }
}

@media (min-width: 48rem) {
  .hero {
    grid-template-areas: "copy photo";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .hero .hero-copy { padding: 3rem clamp(1.5rem, 4vw, 5rem) 3rem var(--content-pad); }
  .hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.9rem); }
  .hero .hero-actions { flex-direction: column; align-items: stretch; max-width: 23rem; }
  .hero .hero-actions .button { min-width: 0; width: 100%; }
}