/* MGX — camada de identidade sobre o clone. So identidade: nada de layout. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* titulos na tipografia de display da identidade (iHub: Montserrat) */
h1.elementor-heading-title, h2.elementor-heading-title, h3.elementor-heading-title {
  font-family: 'Montserrat', 'Outfit', sans-serif !important;
}

/* video de fundo saiu (era a marca do outro produto): o poster segura o slot */
.elementor-background-video-hosted { object-fit: cover; background: #000 url('../images/mgx-fundo.jpg') center/cover no-repeat; }

/* esteira dos carrosseis sem o Swiper: mesmo trilho, laco continuo em CSS */
@keyframes mgx-esteira { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.mgx-esteira { animation: mgx-esteira 36s linear infinite; will-change: transform; }
.mgx-esteira:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mgx-esteira { animation: none; } }

/* divisor raster da origem (vector-2*.png) e dourado dentro do PNG: sem
   editor de imagem na maquina, o giro de matiz leva ouro (~40deg) ao azul da
   marca (~205deg). So nesses arquivos. */
img[src*="vector-2"] { filter: hue-rotate(163deg) saturate(1.15); }

/* ==========================================================================
   HERO — conteúdo e fundo um pouco mais altos (pedido do Victor, 22/09/2026)

   Medido antes: o <h1> começava a 204px do topo. O conteúdo é centrado numa
   caixa com 100px de respiro em cima e embaixo, dentro de um hero de 900px de
   altura mínima. Subir só o padding faria o bloco encostar na barra fixa, e
   subir só o fundo descolaria a luz do título.

   Então sobem os dois, na mesma proporção: ~56px de conteúdo (respiro de cima
   de 100→44px, com o de baixo crescendo para manter a caixa) e o enquadramento
   do fundo de `center` para 38% da altura, que traz a malha de luz junto.
   ========================================================================== */
.hero > .e-con-inner {
  padding-block-start: 44px;
  padding-block-end: 156px;
}

/* o fundo acompanha: a região clara da imagem sobe com o texto */
.elementor-background-video-hosted,
.elementor-background-video-container {
  background-position: center 38% !important;
  object-position: center 38%;
}

/* No celular o hero já é mais curto: metade da subida basta, senão o título
   nasce colado na barra de urgência. */
@media (max-width: 47.99rem) {
  .hero > .e-con-inner {
    padding-block-start: 68px;
    padding-block-end: 132px;
  }
}

/* --------------------------------------------------------------------------
   HERO, 2º ajuste (22/09/2026): o rótulo pequeno fica onde está; o conteúdo
   abaixo dele sobe; a base do hero não se mexe.

   Medido: o contêiner do hero é flex com `row-gap: 40px`. O logo termina em
   108px e o <h1> começa em 148px — os 40px do vão. Mexer no gap encolheria
   TODOS os seis vãos da coluna (−108px no total) e derrubaria o bloco inteiro.

   Então o puxão é só no bloco do título: margem negativa de 22px nele arrasta
   ele e todos os irmãos seguintes (subtítulo, botão, selo) para cima, e o
   rótulo acima permanece intacto. Os mesmos 22px voltam como respiro embaixo,
   para a altura do hero seguir em 961px.
   -------------------------------------------------------------------------- */
.hero .e-con-inner > .elementor-element-9bd8dd7 { margin-block-start: -22px; }
.hero > .e-con-inner { padding-block-end: 178px; }

@media (max-width: 47.99rem) {
  /* no celular o vão já é menor e o título é mais alto: metade do puxão */
  .hero .e-con-inner > .elementor-element-9bd8dd7 { margin-block-start: -12px; }
  .hero > .e-con-inner { padding-block-end: 144px; }
}