/* Hero interno (Figma: O Mercanet 2470:8932 e Cases 2449:2547 — seção de
   1920×700): gradiente navy→laranja (138,56°) com uma foto por cima a
   20% de opacidade, título (58px) centralizado na vertical (centro em
   y≈350,5 nas duas páginas, qualquer que seja o número de linhas) e
   breadcrumb a 103px da borda de baixo. O header do site é fixo (não
   ocupa espaço no fluxo). */

.omercanet-hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(138.559deg, #19202E 15.803%, #672A1C 51.298%, #EC4208 87.082%);
  color: var(--color-white);
}

/* Medido no Figma (O Mercanet 2472:9854): a foto ocupa 108,28% × 132% da
   seção, deslocada -8,23% / -32% — "object-fit: cover" garante que não
   distorça se a seção ficar mais larga/estreita que o canvas de 1920.
   Cases (2472:9853) usa outro recorte: 100,01% × 121,86%, -0,01% /
   -21,86%. */
.omercanet-hero-bg {
  position: absolute;
  left: -8.23%;
  top: -32%;
  width: 108.28%;
  height: 132%;
  max-width: none;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}

.omercanet-hero--cases .omercanet-hero-bg { left: -0.01%; top: -21.86%; width: 100.01%; height: 121.86%; }
/* Notícias (2472:9856): 100,01% × 121,86%, -0,01% / -21,86% (igual ao recorte de Cases). */
.omercanet-hero--noticias .omercanet-hero-bg { left: -0.01%; top: -21.86%; width: 100.01%; height: 121.86%; }
/* Blog (2472:9855): 100,08% × 122%, deslocada -0,04% / -22%. */
.omercanet-hero--blog .omercanet-hero-bg { left: -0.04%; top: -22%; width: 100.08%; height: 122%; }
/* Sobre (2472:9851): 100% × 121,84%, deslocada -20,63% na vertical. */
.omercanet-hero--sobre .omercanet-hero-bg { left: 0; top: -20.63%; width: 100%; height: 121.84%; }

.omercanet-hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 140px;
  padding-bottom: 40px;
}
@media (min-width: 1024px) {
  /* Título centralizado na altura de 700px (o 1px de padding-top leva o
     centro de 350 pra 350,5, como no Figma); o breadcrumb sai do fluxo
     e fica fixo a 103px da base. */
  .omercanet-hero-stage {
    justify-content: center;
    gap: 0;
    min-height: 700px;
    padding: 1px 20px 0;
  }
  .omercanet-hero-breadcrumb {
    position: absolute;
    left: var(--container-padding);
    bottom: 103px;
  }
}

.omercanet-hero h1 {
  /* Quebra "gulosa" como no Figma (as linhas enchem a caixa) — o
     "text-wrap: balance" global dos títulos igualaria as linhas e
     quebraria "Quem vende em / grande escala, vende / com a Mercanet"
     em vez de "Quem vende em grande / escala, vende com a / Mercanet". */
  text-wrap: wrap;
  max-width: 822px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.34px;
}
@media (min-width: 768px) {
  .omercanet-hero h1 { font-size: 46px; letter-spacing: -0.46px; }
}
@media (min-width: 1024px) {
  .omercanet-hero h1 { font-size: 58px; letter-spacing: -0.58px; }
  .omercanet-hero--cases h1 { max-width: 847px; }
  .omercanet-hero--sobre h1 { max-width: 791px; }
  .omercanet-hero--blog h1 { max-width: 802px; }
  .omercanet-hero--noticias h1 { max-width: 815px; }
}

.omercanet-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-white);
}
.omercanet-hero-breadcrumb a { font-weight: 300; }
.omercanet-hero-breadcrumb a:hover { text-decoration: underline; }
.omercanet-hero-breadcrumb [aria-current] { font-weight: 500; }
.omercanet-hero-breadcrumb-sep {
  width: 1px;
  height: 17px;
  background: rgba(255, 255, 255, 0.5);
}

/* Entrada suave ao carregar (seção acima da dobra, não depende de
   IntersectionObserver). */
.omercanet-hero h1,
.omercanet-hero-breadcrumb {
  opacity: 0;
  transform: translateY(24px);
  animation: mercanet-hero-in 700ms ease forwards;
}
.omercanet-hero h1 { animation-delay: 120ms; }
.omercanet-hero-breadcrumb { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .omercanet-hero h1,
  .omercanet-hero-breadcrumb {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Páginas legais (Privacidade, Termos, Cookies): sem foto e com a faixa
   mais baixa (440px), título menor, breadcrumb a 56px da base. */
.omercanet-hero--legal .omercanet-hero-stage { padding-top: 120px; }
@media (min-width: 1024px) {
  .omercanet-hero--legal .omercanet-hero-stage { min-height: 440px; padding-top: 85px; }
  .omercanet-hero--legal .omercanet-hero-breadcrumb { bottom: 56px; }
  .omercanet-hero--legal h1 { font-size: 46px; letter-spacing: -0.46px; max-width: 822px; }
}