/* Hero da Gera IA — arte responsiva com art direction por proporcao.
   Fonte: herooficial.png (1824x862, 2.116) - a marca da Gera IA em
   chamas entre a mao humana e a robotica. O frame cheio vira o recorte
   wide; os estreitos sao centrados em cx=0.55, o que mantem a marca
   inteira no 1:1 e no 4:5 (no 9:16 ela perde ~1% da perna direita).
   Nao ha reenquadramento extra: a composicao ja nasce centrada.
   Como .hero-nav-area tem altura vindo do conteudo (~986px no desktop,
   ~813px no mobile), a proporcao do container e ditada pela LARGURA da
   viewport: vai de 2.60 em 2560px ate 0.36 em 320px.
   O dimensionamento e CONTAIN, nao cover: a arte nunca e cortada, so
   escala proporcionalmente, entao redimensionar a janela nao produz
   efeito de zoom. O espaco que sobra (4% a 36% conforme a tela) fica
   invisivel porque as bordas dos .webp ja vem fundidas em #120707 —
   mesma cor de fundo da banda. A arte fica ancorada embaixo, deixando
   o topo escuro para a headline. Os 4 recortes continuam existindo
   para manter a sobra pequena e dar ao celular um enquadramento
   proprio em vez de uma faixa 16:9 achatada. */

.hero-nav-area.hero-gera {
  background-color: #120707;
  background-image:
    linear-gradient(90deg, rgba(18, 7, 7, .95) 0%, rgba(18, 7, 7, .86) 34%, rgba(18, 7, 7, .5) 60%, rgba(18, 7, 7, .15) 80%, transparent 92%),
    linear-gradient(180deg, transparent 65%, #120707 100%),
    url("herogera-wide.webp");
  background-position: center, center, center bottom;
  background-repeat: no-repeat;
  background-size: auto, auto, contain;
}

.hero-gera .hero-top-overlay {
  display: none;
}

/* Tablet e laptop estreito — container ~0.9 a 1.3. Recorte 1:1. */
@media (max-width: 1199px) {
  .hero-nav-area.hero-gera {
    background-image:
      linear-gradient(180deg, rgba(18, 7, 7, .88) 0%, rgba(18, 7, 7, .76) 40%, rgba(18, 7, 7, .55) 62%, rgba(18, 7, 7, .7) 85%, #120707 100%),
      url("herogera-square.webp");
    background-position: center, center bottom;
    background-size: auto, contain;
  }
}

/* Celular grande e tablet em retrato — container ~0.6 a 0.9. Recorte 4:5. */
@media (max-width: 767px) {
  .hero-nav-area.hero-gera {
    background-image:
      linear-gradient(180deg, rgba(18, 7, 7, .86) 0%, rgba(18, 7, 7, .72) 32%, rgba(18, 7, 7, .5) 58%, rgba(18, 7, 7, .7) 85%, #120707 100%),
      url("herogera-portrait.webp");
    background-position: center, center bottom;
    background-size: auto, contain;
  }
}

/* Celular pequeno — container ~0.36 a 0.55. Recorte 9:16. */
@media (max-width: 479px) {
  .hero-nav-area.hero-gera {
    background-image:
      linear-gradient(180deg, rgba(18, 7, 7, .84) 0%, rgba(18, 7, 7, .7) 34%, rgba(18, 7, 7, .5) 60%, rgba(18, 7, 7, .7) 86%, #120707 100%),
      url("herogera-tall.webp");
    background-position: center, center bottom;
    background-size: auto, contain;
  }
}