/* ==========================================================================
   FUNDO DAS SEÇÕES — a grade do iHub, à risca (23/09/2026, 20h45)

   A foto fixa da mesa com celulares foi reprovada: "ficou paia, não realça o
   conteúdo" — as luzes brigavam com os títulos. Troca de direção: o fundo
   passa a ser o da identidade do iHub, MEDIDO no código da LP deles
   (`.section-grid`, "shared across all sections"): grade azul de 40px a 8%,
   com máscara em elipse que acende no meio e some nas bordas, pontos de luz
   nas cruzes da grade e um brilho azul que desce do topo de cada tela.
   O efeito é de holofote: cada tela tem o centro aceso atrás do conteúdo e as
   bordas pretas — o conteúdo fica em evidência, nada compete com ele.
   Estático (nenhuma animação). A hero tem o fundo dela.
   ========================================================================== */
html { background: #000 !important; }

.mgx-tela {
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(0, 167, 255, 0.2), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 58%, rgba(0, 85, 145, 0.14), transparent 72%),
    #000 !important;
}
/* a grade (iHub .section-grid) + os pontos nas cruzes (iHub .hero-grid-dots) */
.mgx-tela::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.5px, rgba(0, 167, 255, 0.45) 0%, transparent 100%),
    linear-gradient(rgba(0, 167, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 167, 255, 0.1) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px, 40px 40px;
  background-position: calc(50% + 0.5px) -0.5px, 50% 0, 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, #000 20%, transparent 70%);
}
@media (max-width: 47.99rem) {
  .mgx-tela::after {
    background-size: 64px 64px, 32px 32px, 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 110% 70% at 50% 55%, #000 25%, transparent 72%);
            mask-image: radial-gradient(ellipse 110% 70% at 50% 55%, #000 25%, transparent 72%);
  }
}
/* a faixa é tira, não tela: fundo liso, sem grade */
.mgx-tela.mgx-tela--faixa { background: #02060C !important; }
.mgx-tela.mgx-tela--faixa::after { content: none; }

/* ---- as seções por cima ficam transparentes, para a grade aparecer ------- */
.mgxs.mgxs,
.mgxsim.mgxsim,
.mgxfaq.mgxfaq,
.mgxfecho,
.mgx-faixa {
  background: transparent !important;
}
.elementor-3386 .elementor-element:is(.elementor-element-f3335d5, .elementor-element-ebcb730, .elementor-element-49d57cc) {
  background-color: transparent !important;
  background-image: none !important;
}
:is(.e-con, .e-con-inner, .elementor-element, .elementor-widget-container):has(.mgxsim, .mgxfaq, .mgxcmp) {
  background-color: transparent !important;
  background-image: none !important;
}
/* o grão próprio do simulador e o brilho/degradê da origem na oferta saem:
   a tela já tem o fundo dela */
.mgxsim .mgxsim__grao { display: none !important; }
.elementor-3386 .elementor-element.elementor-element-ebcb730::before,
.elementor-3386 .elementor-element.elementor-element-ebcb730::after { content: none !important; }
.mgxs.mgxcf::before { content: none !important; }
.mgxrodape { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6)) !important; }
/* a trama da origem (svg/pattern-3) sobre as perguntas desenhava uma faixa
   cinza de borda reta no meio da tela */
.elementor-3386 .elementor-element.elementor-element-49d57cc::before { content: none !important; }
/* o grão próprio das perguntas desenhava um retângulo na tela: a grade da
   tela já é o fundo */
.mgxfaq.mgxfaq::before { content: none !important; }
.mgxcmp.mgxcmp::before { content: none !important; }