/* ==========================================================================
   HERO — mídia full-bleed, headline em linhas, régua de stats
   Prefixo: hero-
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --accent --dark --dark-rgb
                  --display --nav-h --ease
   ========================================================================== */

.hero{position:relative;overflow:hidden;background:var(--dark);min-height:100vh}

/* ---- mídia ----
   A imagem é maior que a caixa (top:-10% / height:120%) para ter margem de
   deslocamento no parallax sem nunca mostrar borda. */
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-img{
  position:absolute;top:-10%;left:0;width:100%;height:120%;
  object-fit:cover;object-position:50% 42%;
  will-change:transform;opacity:.46;
}

/* Dois gradientes cruzados: um horizontal que ancora o texto à esquerda,
   um vertical que segura o topo (menu) e o pé (emenda com a próxima seção). */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(var(--dark-rgb),.92) 0%,
      rgba(var(--dark-rgb),.76) 34%,
      rgba(var(--dark-rgb),.34) 64%,
      rgba(var(--dark-rgb),.18) 100%),
    linear-gradient(to bottom,
      rgba(var(--dark-rgb),.5) 0%,
      rgba(var(--dark-rgb),0) 28%,
      rgba(var(--dark-rgb),0) 58%,
      rgba(var(--dark-rgb),.4) 100%);
}

/* Dissolve a foto no fundo da página. Sem isso aparece um corte reto entre
   o hero e a seção seguinte. */
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(to bottom,
    rgba(var(--dark-rgb),0) 0%,
    rgba(var(--dark-rgb),.4) 48%,
    rgba(var(--dark-rgb),.86) 80%,
    rgb(var(--dark-rgb)) 100%);
}

/* ---- corpo ----
   Conteúdo ancorado embaixo: o topo fica para a foto respirar sob o menu. */
.hero-body{
  position:relative;z-index:2;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--nav-h) + clamp(48px,9vh,96px));
  padding-bottom:clamp(56px,9vh,104px);
}
.hero-copy{max-width:min(820px,100%)}

/* ---- headline ----
   Reveal por linha: a máscara é o overflow do .hero-ln, quem se move é o
   span de dentro. Não use data-split aqui — a quebra por palavra desmonta
   a força de uma headline curta. */
.hero-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,5.4vw,62px);line-height:1.08;letter-spacing:-.035em;
  color:var(--fg);margin-top:22px;
}
.hero-ln{display:block;overflow:hidden}
.hero-ln > span{
  display:block;transform:translateY(112%);opacity:0;
  transition:transform .95s var(--ease),opacity .95s;
}
.hero.in .hero-ln > span{transform:none;opacity:1}
.hero .hero-ln:nth-child(2) > span{transition-delay:.09s}
.hero-title em{font-style:italic;font-weight:700;letter-spacing:-.01em;color:var(--accent)}

/* ---- apoio, CTA e stats ----
   Cascata em delays fixos: 0,55s / 0,78s / 0,95s. É o que dá a leitura de
   "a página se monta" em vez de "tudo apareceu junto". */
.hero-desc{
  font-size:17px;line-height:1.6;color:var(--fg-2);max-width:58ch;margin-top:26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .55s,transform .8s ease .55s;
}
.hero.in .hero-desc{opacity:1;transform:none}

.hero-cta{
  margin-top:34px;opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .78s,transform .8s ease .78s;
}
.hero.in .hero-cta{opacity:1;transform:none}

.hero-stats{
  margin-top:clamp(44px,7vh,76px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--rule);padding-top:26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .95s,transform .8s ease .95s;
}
.hero.in .hero-stats{opacity:1;transform:none}
.hero-k{font-family:var(--display);font-weight:700;font-size:19px;color:var(--accent);letter-spacing:-.02em}
.hero-v{font-size:12px;line-height:1.7;color:var(--fg-muted);margin-top:8px;letter-spacing:.02em}

/* ---- variação: banner de página interna ----
   Mesma linguagem visual, sem régua de stats nem CTA. */
.hero-compact{min-height:56vh}
.hero-compact .hero-body{min-height:56vh;padding-bottom:clamp(40px,6vh,64px)}
.hero-compact .hero-copy .eyebrow{margin-bottom:4px}

@media(max-width:760px){
  .hero-stats{grid-template-columns:1fr 1fr;row-gap:22px}
}