/* Hero */
/* O texto já chega escrito sobre a foto: não há mais reveal ligado à
   rolagem, e por isso o invólucro tem a altura de uma tela e nada mais.
   Ele ainda existe (com o hero sticky dentro) porque é o que segura a
   foto no lugar enquanto o parallax do 17-animacao.css a desloca. */
/* 88svh, e não 100: a dobra para um pouco antes do fim da tela para a
   próxima aparecer por baixo. É esse pedaço espiando que convida a
   rolar — uma tela cheia até a borda não dá pista de que há mais. */
.auvp-hero-pin { position: relative; height: 88svh; }
.auvp-hero {
  position: sticky;
  top: 0;
  min-height: 88svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.auvp-hero__media { position: absolute; inset: 0; z-index: 0; }
/* Overlay preto: uma camada chapada sobre a foto inteira e um degradê
   que fecha no rodapé da dobra, onde o texto mora. A soma das duas
   deixa ~75% de preto embaixo (branco legível) e ~45% no meio (a foto
   continua aparecendo). */
.auvp-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.24) 55%, rgba(0,0,0,0.58) 100%),
    rgba(0, 0, 0, 0.5);
}
.auvp-hero__content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); align-self: end; }
.auvp-hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
/* Sobre o overlay preto o texto é branco. O verde escuro do site some
   nesse fundo, então a palavra destacada usa o acento clareado. */
.auvp-hero__title {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 15ch;
  color: var(--paper);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}
.auvp-hero__title em { white-space: nowrap; color: var(--verde-claro); }
.auvp-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

/* A entrada é no carregamento, não na rolagem: title e frase sobem uma
   vez, em menos de um segundo, e ficam. Quem abre a página e não rola
   lê a dobra inteira. */
@media (prefers-reduced-motion: no-preference) {
  .auvp-hero__title { animation: auvp-sobe 0.9s var(--ease) both; }
  .auvp-hero__row,
  .auvp-hero__nota { animation: auvp-sobe 0.9s var(--ease) 0.15s both; }
}
.auvp-hero__lede {
  max-width: 48ch;
  color: rgba(247, 245, 241, 0.88);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.auvp-hero__lede strong { font-weight: 400; color: var(--paper); }
/* O aviso da próxima missão vem embaixo da frase, não ao lado dela. É
   informação de canto: menor, em caixa alta, sem marcador na frente. */
.auvp-hero__nota {
  margin-top: clamp(0.9rem, 1.8vw, 1.4rem);
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 245, 241, 0.9);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
@media (max-width: 760px) {
  .auvp-hero__row { grid-template-columns: 1fr; align-items: start; }
}