/* Hero das páginas internas (Figma: Blog / Hero, 510:4139 — mesmo
   gradiente e textura da Home, reutilizados aqui em todas as páginas
   internas do site). Diferente do hero da Home, este é só texto
   centralizado, sem ilustração. */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112.5deg, rgb(25, 32, 46) 41.5%, rgb(236, 66, 8) 93.1%);
  padding-top: 120px;
  padding-bottom: 72px;
  color: var(--color-white);
  text-align: center;
}
@media (min-width: 1024px) {
  .page-hero { padding-top: 172px; padding-bottom: 120px; }
}

/* A imagem (assets/img/hero-bg-texture.jpg) é um padrão de linhas escuras
   sobre fundo BRANCO. No Figma ela entra com blend mode "multiply", que
   ignora o branco e só escurece onde tem linha — daí o efeito sutil de
   textura. Em opacity comum (sem blend mode) o branco do fundo da própria
   imagem clareava a seção inteira, deixando o gradiente esbranquiçado. */
.page-hero-bg-texture {
  position: absolute;
  left: 50%;
  top: -419px;
  width: 1933px;
  height: 1289px;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  display: none;
}
@media (min-width: 900px) {
  .page-hero-bg-texture { display: block; }
}

/* Algumas páginas internas usam uma foto de fundo em vez da textura
   abstrata de pontos/linhas (ver "bgPhoto" no bloco) — por baixo do
   mesmo gradiente navy→laranja, bem apagada (opacity 10%, sem blend
   mode, já que aqui a foto não tem fundo branco pra "multiply" tratar
   como transparente). */
.page-hero-bg-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  pointer-events: none;
}

.page-hero-stage {
  position: relative;
  z-index: 1;
  /* O título da página Sobre é mais longo que os das outras páginas
     internas e quebrava em 3 linhas com a largura antiga (820px). O
     Figma media 902px, mas essa largura é do texto em si — como esta
     caixa também é ".container" (20px de padding-inline de cada
     lado), o max-width real precisa ser 902 + 40px de padding pra a
     área de texto ficar com os mesmos 902px de fato. */
  max-width: 960px;
}

/* Sobre o fundo escuro/foto do hero, o badge padrão (cinza, pensado
   pra fundos mais neutros) não tem contraste suficiente — o Figma
   pede contorno e texto brancos aqui (272:1142), igual ao badge do
   Hero da Home. */
.page-hero .badge { margin-bottom: 24px; border-color: var(--color-white); }
.page-hero .badge span:last-child { color: var(--color-white); }

/* Título usa o mesmo estilo tipográfico do H2 do site (28/44px,
   semibold) — o hero das páginas internas é mais discreto que o da
   Home, que usa o H1 cheio (36/64px, bold). Continua sendo a tag <h1>
   da página por semântica (só um H1 por página). */
.page-hero h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.28px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .page-hero h1 { font-size: 44px; letter-spacing: -0.44px; }
}

.page-hero-lead {
  max-width: 709px;
  margin: 0 auto;
  font-size: 16px;
}
@media (min-width: 768px) {
  .page-hero-lead { font-size: 20px; }
}

/* Botões opcionais (Figma: O Mercanet / Hero, 507:4067) — Blog e
   Notícias não usam, então o hero segue funcionando sem eles. */
.page-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
  margin-top: 32px;
}
.page-hero-actions .btn-primary,
.page-hero-actions .btn-ghost,
.page-hero-actions .btn-outline {
  justify-content: center;
  /* Pílula (50px), igual aos outros botões de hero do site — o
     Figma pede esse estilo aqui (272:1136/272:1140), mas ".btn-primary"
     sozinho cai no radius padrão (12px) do componente compartilhado. */
  border-radius: 50px;
}

/* Entrada suave: mesmo efeito do Hero da Home (título, texto, botões
   em sequência ao carregar a página) — a seção já está visível de
   cara, sem precisar de scroll, então não depende de
   IntersectionObserver como o resto das animações do site. Keyframe
   duplicado aqui (não só em hero.css) pra não depender da ordem de
   carregamento entre os dois arquivos. */
.page-hero-stage .badge,
.page-hero h1,
.page-hero-lead,
.page-hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: mercanet-page-hero-in 700ms ease forwards;
}
.page-hero-stage .badge { animation-delay: 0ms; }
.page-hero h1 { animation-delay: 120ms; }
.page-hero-lead { animation-delay: 260ms; }
.page-hero-actions { animation-delay: 400ms; }

@keyframes mercanet-page-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-stage .badge,
  .page-hero h1,
  .page-hero-lead,
  .page-hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (min-width: 500px) {
  .page-hero-actions { flex-direction: row; justify-content: center; width: auto; margin-left: 0; margin-right: 0; }
}