/* ==========================================================================
   MGX — A ESCALA. Um só lugar, e nenhum degrau a mais.

   Medido em 23/09/2026, antes desta folha: a página tinha **42 tamanhos de
   tipo**, 7 pesos, 12 raios e 10 entrelinhas — herança da sopa de `font-size`
   por widget que o construtor da página deixa (13,5px · 14,1px · 14,3px ·
   15,2px · 12,8px…). É isso que faz uma página parecer gerada, e nenhuma
   reescrita de texto conserta.

   O padrão é o da Remessa, que a gente construiu e funciona: tamanho, cor e
   espaço fazem a hierarquia; **peso quase nunca**. Oito degraus de tipo, dois
   pesos, dois raios, três entrelinhas.

   Esta folha carrega por ÚLTIMO e fecha o que a varredura mecânica não
   alcançou (valor em `em`, atalho de quatro lados, folha de biblioteca).
   ========================================================================== */

:root {
  /* ---- tipo: 5 degraus de texto + 4 de display, e nenhum a mais ---- */
  --t-micro:   0.75rem;   /* 12px — rótulo, legenda de tabela */
  --t-pequeno: 0.875rem;  /* 14px — texto de cartão, apoio  ← PISO no celular */
  --t-corpo:   1rem;      /* 16px — texto corrido */
  --t-lead:    1.125rem;  /* 18px — abertura de seção */
  --t-cartao:  1.375rem;  /* 22px — título de cartão */
  --t-titulo:  clamp(1.75rem, 1.3rem + 1.8vw, 2.125rem);  /* 28 → 34px */
  --t-secao:   clamp(2.125rem, 1.4rem + 3vw, 3.5rem);     /* 34 → 56px */
  --t-hero:    clamp(2.75rem, 1.6rem + 5.2vw, 4.5rem);    /* 44 → 72px */

  /* ---- peso: dois. O terceiro só existe no lettering gigante ---- */
  --p-corpo: 400;
  --p-forte: 600;

  /* ---- entrelinha: três. Quanto maior o tipo, mais apertada ---- */
  --e-display: 1.1;
  --e-titulo:  1.35;
  --e-texto:   1.6;

  /* ---- raio: dois. Pílula é forma, não degrau ---- */
  --r-controle: 10px;
  --r-cartao:   16px;
  --r-pilula:   999px;

  /* ---- medida de leitura: a linha que o olho acompanha sem se perder ---- */
  --leitura: 62ch;
}

/* --------------------------------------------------------- entrelinha
   Por papel, não por elemento: é o que impede o valor solto de voltar. */
:where(p, li, dd, figcaption, blockquote, .elementor-widget-text-editor) {
  line-height: var(--e-texto);
}
:where(h3, h4, h5, h6, summary, .mgxcmp-td, .mgxfaq-p) {
  line-height: var(--e-titulo);
}
:where(h1, h2, .elementor-heading-title) {
  line-height: var(--e-display);
}

/* ------------------------------------------------------------- raio
   O construtor grava 6, 8, 11, 12, 20px em lugares diferentes do mesmo
   componente. Dois degraus por tamanho de caixa, e pronto. */
:where(button, input, select, textarea, .elementor-button, [role='button']) {
  border-radius: var(--r-controle);
}
:where(.mgxcmp-cartao, .mgxfaq-item, .mgxsim-campo, .mgx-ilustra__arte,
       .elementor-widget-image img, figure) {
  border-radius: var(--r-cartao);
}

/* ------------------------------------------------ piso de 14px no celular
   Medido: 20 textos abaixo de 14px em 360px, o menor com 12,6px. Abaixo de
   14 o texto corrido deixa de ser lido e passa a ser decifrado — e o público
   desta página lê no celular. O rótulo miúdo (12px) continua permitido:
   é etiqueta, não leitura. */
@media (max-width: 47.99rem) {
  :where(p, li, dd, td, figcaption, blockquote, .elementor-widget-text-editor) {
    font-size: max(var(--t-pequeno), 1em);
  }
}

/* ------------------------------------------------------ medida da linha

   ERRO CORRIGIDO EM 23/09/2026. A primeira versão desta regra aplicava
   `max-inline-size` a TODO título e parágrafo da página. Num bloco com
   texto centralizado e sem `margin-inline: auto`, isso encosta a CAIXA na
   esquerda: o texto continua centralizado dentro dela, mas a caixa inteira
   fica fora do centro. Medido na hero: o subtítulo deslocado 277px para a
   esquerda, espremido em 380px. O dono viu antes de mim.

   Regra que fica: medida de linha só onde EU controlo o alinhamento — nas
   seções próprias. A página herdada já tem a largura dela; impor medida por
   cima, sem saber se o bloco é centralizado, quebra o que estava certo. */
:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { text-wrap: balance; }

:where(.mgxprova, .mgxsim, .mgxcmp, .mgxfaq) :where(p, li, dd, blockquote) {
  max-inline-size: var(--leitura);
}
:where(.mgxprova, .mgxsim, .mgxcmp, .mgxfaq) :where(h2) { max-inline-size: 22ch; }

/* dentro da tabela e do painel do simulador a célula decide a largura */
:where(.mgxcmp, .mgxsim, .mgx-barra) :where(td, th, .mgxsim-painel) :where(p, li) {
  max-inline-size: none;
}

/* -------------------------------------------------------------- peso
   Dois pesos. O construtor usava sete, e peso é a pior forma de fazer
   hierarquia: some no texto pequeno e engorda o grande. */
:where(b, strong, th, summary, .elementor-button-text) { font-weight: var(--p-forte); }

/* --------------------------------------------------------------------------
   EXCEÇÃO: o letreiro é dispositivo, não texto de leitura

   A fita animada repete a mesma frase dezenas de vezes e corre na horizontal.
   Ela precisa ficar em UMA linha; a régua de leitura (medida de 62ch e
   entrelinha de texto) não se aplica e, aplicada, destrói o dispositivo.

   Medido em 23/09/2026, depois de impor a escala: o `<p>` da fita quebrou em
   doze linhas, e o bloco que tinha 104px passou a ter **6.561px — 8,2 telas**.
   A página inteira inchou 3.515px por causa disto. É o tipo de estrago que
   uma varredura mecânica faz quando não declara a exceção.
   -------------------------------------------------------------------------- */
:is(p, h1, h2, h3, h4, div, span):has(> .dgfaixa),
:is(p, h1, h2, h3, h4, div, span):has(> .mgx-losango-fita),
.dgfaixa,
.mgx-losango-fita,
.mgx-esteira,
.swiper-wrapper {
  white-space: nowrap;
  max-inline-size: none;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   ALVO DE TOQUE: 44px é o mínimo, e o dedo não tem mira

   Medido em 360 e 390px: "Política", "Termos" e "Contato" no rodapé tinham
   16,5px de altura. Três links de 16px encostados um no outro numa linha são
   três erros de toque esperando acontecer.

   A área clicável cresce sem inchar o texto: `padding` no link e a linha do
   rodapé vira lista com respiro. O tamanho da letra não muda.
   -------------------------------------------------------------------------- */
footer :is(a, button),
.mgx-barra :is(a, button),
.elementor-icon-list-item > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 0.5rem;
  /* o primeiro da linha não ganha respiro à esquerda: alinhamento quebra */
  margin-inline-start: -0.5rem;
}
footer :is(a, button):focus-visible { outline: 2px solid #00A7FF; outline-offset: 2px; border-radius: 6px; }

/* a linha de links do rodapé respira e não gruda um no outro */
footer .container.mini > div:has(a) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

/* --------------------------------------------------------------------------
   HERO: o vídeo cobre de ponta a ponta

   Medido em 23/09/2026: o vídeo de fundo começava em top: 25px e o contêiner
   da hero tinha, por trás, a arte da marca de ORIGEM (um soldado armado com
   olhos dourados, no dourado da marca antiga). A faixa de cima vazava essa
   arte. O dono viu antes de mim. A arte saiu para .fora-do-ar/; aqui o vídeo
   e o fundo próprio passam a cobrir a hero inteira, sem fresta.
   -------------------------------------------------------------------------- */
/* SELETOR EXATO, e o porquê: o construtor reusa a classe `hero` em mais de
   um nível — no contêiner da seção E no widget do título. A primeira versão
   desta regra usava `.hero` e pintou de preto a caixa do título, que passou
   a cortar o fundo num retângulo sólido. Medido e corrigido no mesmo dia.
   Aqui só o contêiner da seção (e-parent) recebe fundo. */
.hero.e-parent > .elementor-background-video-container,
.hero.e-parent .elementor-background-video-hosted {
  inset: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover;
  /* O construtor centraliza o vídeo com top/left 50% + translate(-50%,-50%).
     Zerar o top/left SEM zerar o translate empurra o vídeo metade da largura
     para a esquerda e metade da altura para cima: medido, −714px e −475px,
     e só o canto do vídeo aparecia, com borda reta no meio da tela. Foi erro
     meu, introduzido pela primeira versão desta regra. */
  transform: none !important;
}
.hero.e-parent {
  /* A rede azul fica EMBAIXO, na largura toda — é assim que a imagem foi
     desenhada. Medido em 23/09/2026: ela aparecia recortada num canto, com
     borda reta vertical e horizontal no meio da tela. A causa não era a
     imagem: era a camada de paralaxe do construtor (motion-effects-layer),
     que o JS da origem dimensionava e movia. Sem esse JS, a camada pinta um
     pedaço ampliado e fixo da imagem. A camada sai; o contêiner pinta. */
  background-color: #000 !important;
  background-image:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 72%),
    url('../images/mgx-fundo.jpg') !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center bottom !important;
  background-repeat: no-repeat !important;
}
/* a camada de paralaxe morta: some */
.hero.e-parent > .elementor-motion-effects-container,
.hero.e-parent .elementor-motion-effects-layer {
  display: none !important;
}