/* -------------------------------------------------------------------------- */
/* Hero editorial: mídia fixa, evidência de credibilidade e saída por scroll  */
/* -------------------------------------------------------------------------- */

/* A promessa curta preserva duas linhas explícitas em telas amplas. */
.hero--landing .display--hero {
  max-width: 22ch;
}

/* A matéria ocupa um percurso maior que a viewport para permitir o pin. */
.hero-proof {
  position: relative;
  height: 185svh;
  margin-top: 11rem;
  background: var(--color-paper);
}

/* O palco permanece fixo enquanto imagem e conteúdo respondem ao progresso. */
.hero-proof__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 1.2rem;
  overflow: hidden;
  opacity: 1;
  will-change: opacity, transform;
}

/* A mídia cobre o palco e mantém os cantos do design system. */
.hero-proof__media {
  position: absolute;
  inset: 1.2rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-ink);
  box-shadow: 0 3rem 8rem rgb(10 26 58 / 20%);
  transform-origin: center;
  will-change: transform;
}

/* O ativo original permanece como fundo, agora integrado a uma narrativa. */
.hero-proof__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

/* A sombra concentra contraste no texto sem esconder a trajetória da imagem. */
.hero-proof__shade {
  position: absolute;
  inset: 1.2rem;
  z-index: 1;
  border-radius: var(--radius-media);
  background:
    linear-gradient(90deg, rgb(10 26 58 / 86%) 0%, rgb(10 26 58 / 50%) 44%, transparent 74%),
    linear-gradient(0deg, rgb(10 26 58 / 32%), transparent 46%);
  pointer-events: none;
}

/* O bloco editorial substitui a estrela isolada por contexto verificável. */
.hero-proof__article {
  position: absolute;
  z-index: 2;
  bottom: clamp(7rem, 12vh, 13rem);
  left: 3.2rem;
  max-width: 49rem;
  color: var(--color-paper);
  text-align: left;
  will-change: opacity, transform;
}

/* As estrelas funcionam como sinal visual de confiança, não como avaliação. */
.hero-proof__stars {
  margin-bottom: 2.6rem;
  color: var(--color-paper);
  font-size: 1.8rem;
  letter-spacing: 0.45em;
}

/* O crédito da pesquisa usa o label técnico do sistema. */
.hero-proof__article .eyebrow {
  color: rgb(247 245 235 / 62%);
}

/* A frase principal mantém escala editorial e leitura rápida. */
.hero-proof__article h2 {
  max-width: 12ch;
  margin: 2rem 0;
  font-size: clamp(4rem, 10vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

/* O dado complementa a manchete sem competir com ela. */
.hero-proof__article > p:last-of-type {
  max-width: 42ch;
  margin: 0;
  color: rgb(247 245 235 / 72%);
  font-size: 1.55rem;
  line-height: 1.55;
}

/* A fonte permanece acessível como ação editorial secundária. */
.hero-proof__source {
  margin-top: 2.6rem;
  overflow: hidden;
  border-bottom: 1px solid rgb(247 245 235 / 42%);
  font-size: 1.5rem;
}

/* O indicador desaparece cedo para não competir com o conteúdo na saída. */
.hero-proof__scroll {
  position: absolute;
  z-index: 2;
  right: 3.2rem;
  bottom: 3.2rem;
  color: rgb(247 245 235 / 55%);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  will-change: opacity, transform;
}

/* Em desktop, a mídia recupera os gutters panorâmicos do sistema. */
@media (min-width: 768px) {
  .hero-proof__stage {
    padding: 3rem 12rem;
  }

  /* O frame amplo continua contido no limite oficial de mídia. */
  .hero-proof__media,
  .hero-proof__shade {
    inset: 3rem 12rem;
  }

  /* O conteúdo alinha com o gutter interno da imagem. */
  .hero-proof__article {
    bottom: clamp(9rem, 14vh, 15rem);
    left: 18rem;
    max-width: 64rem;
  }

  /* A manchete cresce sem ocupar toda a largura da fotografia. */
  .hero-proof__article h2 {
    font-size: clamp(5.8rem, 4.3vw, 7.4rem);
  }

  /* O corpo acompanha a escala desktop do lead editorial. */
  .hero-proof__article > p:last-of-type {
    font-size: 1.8rem;
  }

  /* O indicador usa o mesmo alinhamento direito do frame. */
  .hero-proof__scroll {
    right: 18rem;
    bottom: 6rem;
  }
}

/* O fallback preserva a matéria completa sem depender da timeline. */
@media (prefers-reduced-motion: reduce) {
  .hero-proof {
    height: auto;
    padding: 2rem 0;
  }

  /* O palco volta ao fluxo e mantém altura suficiente para a leitura. */
  .hero-proof__stage {
    position: relative;
    height: min(88rem, 92svh);
  }

  /* Nenhuma camada deve receber transformações residuais. */
  .hero-proof__stage,
  .hero-proof__media,
  .hero-proof__article,
  .hero-proof__scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}