/* ==========================================================================
   TELAS DO TAMANHO DA HERO, SEPARADAS PELA LINHA DO iHUB (23/09/2026)

   O dono corrigiu o uso da linha divisória: "ela é para dividir tópicos de
   acordo com a tela do aparelho — a hero já mostra o conteúdo inteiro logo de
   primeira; o padrão é linha divisória em campos do tamanho da hero no site
   todo". Então cada tópico é uma TELA (100svh, a altura visível do aparelho),
   com o conteúdo centralizado, e a linha do iHub (azul até 70%, vermelho no
   resto, alternando o lado) marca a passagem de uma tela para a outra.
   Quem garante que o conteúdo CABE na tela são as folhas de compactação.
   ========================================================================== */
.mgx-tela {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 100vh;          /* reserva para navegador sem svh */
  min-block-size: 100svh;
  background: #000;
}
/* a linha fica no topo de cada tela: é a costura entre esta e a anterior */
.mgx-tela::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 6;
  block-size: 4px;
  background: var(--traco, linear-gradient(90deg, #00A7FF 0 70%, #FF192A 70% 100%));
  pointer-events: none;
}
.mgx-tela--inv::before {
  background: var(--traco-inv, linear-gradient(90deg, #FF192A 0 30%, #00A7FF 30% 100%));
}
.mgx-tela > * { flex: none; }

/* tela que abre com a faixa: a faixa encosta na linha e o tópico se centraliza
   no espaço que sobra */
.mgx-tela--com-faixa { justify-content: flex-start; }
.mgx-tela--com-faixa > :not(.mgx-faixa) { margin-block: auto; }

/* última tela: chamada no meio do que sobra, aviso legal e rodapé no pé */
.mgx-tela--fim { justify-content: flex-start; }
.mgx-tela--fim > .mgxfecho { flex: 1 0 auto; display: grid; align-content: center; }

/* a faixa não precisa mais das próprias linhas: a da tela já está em cima */
.mgx-tela > .mgx-faixa::before { content: none; }
.mgx-tela > .mgx-faixa::after {
  block-size: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* ---- a faixa é uma seção do tamanho dela mesma (23/09/2026, 20h) ----------
   O dono: "coloque uma linha divisória nisso aqui, ele deve ser considerado
   uma seção do tamanho dele mesmo". A faixa sai de dentro da tela do tópico:
   tem a linha em cima (a dela) e a linha embaixo (a da tela seguinte), e a
   altura é a do próprio conteúdo, não a da janela. */
.mgx-tela.mgx-tela--faixa {
  min-block-size: 0;
  display: block;
}
/* linhas PRÓPRIAS da faixa, grudadas nela em cima e embaixo (23/09 20h30:
   "duas linhas divisórias próprias, exatamente grudadas na faixa, e não com
   o mesmo comportamento das seções"). A tela da faixa não desenha a linha de
   seção, e a tela logo depois dela também não — senão viravam duas. */
.mgx-tela.mgx-tela--faixa::before { content: none; }
.mgx-tela--faixa + .mgx-tela::before { content: none; }
.mgx-tela--faixa > .mgx-faixa::before,
.mgx-tela--faixa > .mgx-faixa::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  block-size: 2px;
  background: linear-gradient(90deg, transparent 0, var(--traco-azul, #00A7FF) 12%, var(--traco-azul, #00A7FF) 62%, var(--traco-vermelho, #FF192A) 62%, var(--traco-vermelho, #FF192A) 88%, transparent 100%);
}
.mgx-tela--faixa > .mgx-faixa::before { inset-block-start: 0; }
.mgx-tela--faixa > .mgx-faixa::after { inset-block-end: 0; transform: scaleX(-1); }
.mgx-tela--faixa > .mgx-faixa { padding-block: 1.75rem; }
@media (max-width: 47.99rem) {
  .mgx-tela--faixa > .mgx-faixa { padding-block: 1.25rem; }
}

/* 23/09/2026 20h: o grão e a luz passam para a TELA inteira — preso à caixa da
   seção, o grão desenhava um retângulo visível no meio da tela, com borda reta */
.mgxs.mgxcf::before { content: none; }
.mgx-tela:has(> .mgxcf) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(42% 46% at 50% 62%, rgba(0, 167, 255, 0.13), rgba(0, 85, 145, 0.05) 55%, transparent 78%),
    #000;
}

/* ---- rodapé: seção própria, do tamanho dele (23/09/2026, 21h) --------------
   "Esta seção e o rodapé merecem ser seções separadas": a chamada final ocupa
   a tela dela, e o rodapé vem depois, com a linha de seção em cima e a altura
   do próprio conteúdo. */
.mgx-tela.mgx-tela--rodape {
  min-block-size: 0;
  display: block;
  background: #02060C !important;
}
.mgx-tela.mgx-tela--rodape::after { content: none; }