/* ==========================================================================
   MGX — COMPACTO, PARTE DE CIMA (23/09/2026)

   O dono: "tá gigante, dá para compactar — o leitor cansa só de ver o tamanho
   e acaba nem lendo". Antes: "focado em captação, prender desde a hero, sem
   rolagem excessiva". Régua de acabamento: a Remessa — tipografia contida,
   espaçamento preciso, nada gritando.

   Esta folha cuida SÓ das quatro seções de cima: hero, situações, "por que
   agora" e entregáveis. A parte de baixo é da mgx-compacto-fecho.css. A régua
   comum (título de seção, respiro, cabeça) é a da mgx-compacto.css e não é
   redefinida aqui.

   Nenhum texto sai da página: a altura sai de tipografia, vão e composição.

   Medido ANTES desta folha (navegador sem janela, 9444), altura da seção:
                     1440     390     360
     hero             900     744     744
     situações        973     721     741
     por que agora    522     709     761
     entregáveis      694     921     983
   ========================================================================== */


/* ==========================================================================
   1. HERO — a primeira tela inteira; o conteúdo, compacto e no centro

   · Correção do dono (23/09/2026, 17h): "compactou demais — a faixa não
     precisa ficar legível de cara na hero, deixe para ser vista logo na 1ª
     rolagem, mas não na chegada ao site". A hero ocupa exatamente a primeira
     tela em toda largura (100svh) e a faixa #categorias começa em y ≥ altura
     da janela. O construtor gravava 900px fixos (744px no celular), o que no
     celular de 844px deixava a faixa aparecer na chegada.
   · O que encolhe é o CONTEÚDO, centralizado na vertical:
   · Título a 72px em três linhas → até 56px em duas (a caixa alarga).
   · Subtítulo a 28px: pedia Montserrat 400, mas a página só carrega a
     Montserrat em 700/800/900, então o navegador desenhava em NEGRITO —
     três linhas de texto pesado. Vira Outfit 500 (a fonte de texto), 19px,
     duas linhas.
   · Um widget HTML vazio (f6c51dd) ainda cobrava um vão da coluna.
   ========================================================================== */
.elementor-3386 .elementor-element.elementor-element-a75144b {
  /* svh = a tela com a barra do navegador aberta: é o que se vê na chegada.
     A propriedade direta leva o 100vh de reserva (variável não tem reserva). */
  --min-height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  /* tamanhos da hero num lugar só (o letreiro repete a conta da mgx-marca-hero.css) */
  --mgx-h1: clamp(1.75rem, 1.1rem + 2.9vw, 3.5rem);        /* 28 → 56px */
  --mgx-marca: clamp(2.5rem, 11.2vw, 13.4rem);
  --mgx-vao: clamp(1rem, 1.4vw, 1.25rem);                  /* 16 → 20px */
}
.elementor-3386 .elementor-element.elementor-element-a75144b > .e-con-inner {
  /* o bloco fica um pouco ACIMA do meio (centro ótico, ~47% da tela): mais
     respiro embaixo do que em cima, e a rede azul do fundo aparece inteira
     abaixo das pílulas */
  padding-block: clamp(1.5rem, 2.2vw, 2rem) clamp(3.5rem, 8vh, 6rem) !important;
  padding-block: clamp(1.5rem, 2.2vw, 2rem) clamp(3.5rem, 8svh, 6rem) !important;
  row-gap: var(--mgx-vao) !important;
}
/* widget HTML vazio: não tem conteúdo, só cobrava um vão */
.elementor-3386 .elementor-element.elementor-element-f6c51dd { display: none; }

/* o letreiro: mesmo tamanho (o dono gosta dele assim), menos ar em cima */
.elementor-3386 .elementor-element-a75144b .mgx-marca-hero {
  margin-block-start: calc(clamp(0.25rem, 1vw, 0.75rem) - 1.2em);
}

/* título: a primeira linha pousa onde o letreiro já se apagou (≈62% da
   altura da letra). A conta: 0,12 × letreiro − vão − meia entrelinha. */
.elementor-3386 .elementor-element.elementor-element-9bd8dd7 {
  --container-widget-width: min(100%, 58rem);
  width: min(100%, 58rem);
  max-width: 100%;
  margin-block-start: calc(0.12 * var(--mgx-marca) - var(--mgx-vao) - 0.2 * var(--mgx-h1));
}
.elementor-3386 .elementor-element.elementor-element-9bd8dd7 .elementor-heading-title {
  font-size: var(--mgx-h1);
  font-weight: 700;              /* o que já era desenhado (400 caía no 700) */
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* subtítulo: texto de apoio, não segundo título */
.elementor-3386 .elementor-element.elementor-element-0ef38f6 {
  --container-widget-width: min(100%, 44rem);
  width: min(100%, 44rem);
  max-width: 100%;
}
.elementor-3386 .elementor-element.elementor-element-0ef38f6 .elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);      /* 16 → 19px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ação: o vão de 16px por cima do par de botões sai; um respiro curto e igual */
.elementor-3386 .elementor-element.elementor-element-5d47307 {
  margin-block-start: clamp(0.375rem, 0.6vw, 0.5rem);
}
.elementor-3386 .elementor-element.elementor-element-4cb9c50 {
  --margin-top: 0px;
  margin-block-start: 0;
}

/* ---- celular: par de botões LADO A LADO, numa linha, dividindo a largura --
   O construtor põe o contêiner em coluna abaixo de 768px. Em linha, os dois
   rótulos cabem em 360px com 14px de letra e 12px de respiro lateral:
   medido 146 + 163 + 8 = 317px de 328 disponíveis. Abaixo de ~340px
   (aparelho raro) eles quebram em duas linhas, sem rolagem lateral. */
@media (max-width: 47.99rem) {
  .elementor-3386 .elementor-element.elementor-element-a75144b {
    --padding-left: 1rem;
    --padding-right: 1rem;
  }
  .elementor-3386 .elementor-element.elementor-element-4cb9c50 {
    --flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem !important;
  }
  .elementor-3386 .elementor-element.elementor-element-02c68c7 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .elementor-3386 .elementor-element.elementor-element-02c68c7 a.elementor-button[data-cta='turma'] {
    inline-size: 100% !important;
  }
  .elementor-3386 .elementor-element.elementor-element-02c68c7 a.elementor-button[data-cta='turma'],
  .hero.e-parent a.mgx-cta-sec {
    padding: 0 0.75rem !important;
    font-size: clamp(0.875rem, 3.85vw, 0.9375rem) !important;   /* 14 → 15px */
  }
  .hero.e-parent a.mgx-cta-sec { flex: 1 1 auto; }
  /* a seta do botão principal fica, mais perto do rótulo */
  .elementor-3386 .elementor-element.elementor-element-02c68c7 a.elementor-button[data-cta='turma'] .elementor-button-text::after {
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: 0.375rem;
  }

  /* pílulas: as duas numa linha. Medido: com ícone pedem 349px; a linha tem
     358px em 390 e 343px em 375. Abaixo de 384px de tela o ícone (decorativo)
     sai; o texto nunca sai.
     NÃO usar container query aqui: contêiner de tamanho num item de coluna
     flexível é medido com largura zero, as pílulas empilham no cálculo da
     altura e depois esticam para 68px (medido em 23/09/2026). */
  .elementor-3386 .elementor-element-a75144b .mgx-hero-provas { gap: 0.375rem; }
  .elementor-3386 .elementor-element-a75144b .mgx-hero-provas li {
    padding: 0.375rem 0.5625rem;
    gap: 0.375rem;
  }
  .elementor-3386 .elementor-element-a75144b .mgx-hero-provas svg {
    inline-size: 0.9375rem;
    block-size: 0.9375rem;
  }
}
@media (max-width: 23.99rem) {
  .elementor-3386 .elementor-element-a75144b .mgx-hero-provas svg { display: none; }
}


/* ==========================================================================
   TELAS — regra do dono (23/09/2026, 17h30): a página vira uma sequência de
   telas do tamanho da hero; cada tópico CABE numa tela do aparelho. O
   embrulho de 100svh e as linhas entre telas são de outra folha — aqui só
   se garante que o conteúdo caiba, com folga:
     situações + faixa #categorias  →  situações ≤ altura da tela − 150px
     por que agora                  →  ≤ altura da tela
     entregáveis                    →  ≤ altura da tela
   Em celular baixo (até 800px de altura: 360×740, 360×800) o respiro da
   seção cai de 40 para 20px — dentro de uma tela centralizada, o ar em volta
   vem do próprio embrulho.
   ========================================================================== */
@media (max-width: 47.99rem) and (max-height: 50rem) {
  .mgxsit-secao, .mgxjanela, .mgxent { --c-respiro: 1.25rem; --c-cabeca: 0.875rem; }
}
/* subtítulo de seção no celular: entrelinha de 1,45 (23px) em vez de 1,55 */
@media (max-width: 47.99rem) {
  .mgxjanela .mgxs__sub, .mgxent .mgxs__sub { line-height: 1.45; }
}


/* ==========================================================================
   2. SITUAÇÕES — 2×2, texto | ilustração no desktop; só texto no celular

   · O título cabia numa linha e quebrava em duas por limite de 62rem.
   · A altura de cada cartão era a da ILUSTRAÇÃO (236–282px): coluna de arte
     estreita (276px) fazia o "Ângulo" do catálogo e o nome do produto
     quebrarem, e as barras dos vídeos tinham 72px. Coluna de arte mais
     larga, painel com 12px de respiro, letra de 14px e barras de 48px.
   · Tablet e celular: o número "01" deixa de ocupar uma linha própria e vai
     para o canto do cartão, ao lado da primeira linha do título.
   ========================================================================== */
.mgxsit-secao .mgxs__cabeca { max-inline-size: 72rem; }
.mgxsit-secao .mgxsit-grade { gap: clamp(0.5rem, 0.9vw, 0.75rem); }
.mgxsit-secao .mgxsit-cartao {
  gap: 0.75rem;
  padding: clamp(0.75rem, 1.2vw, 1rem);
}
/* texto | arte só onde o cartão tem as duas colunas (a partir de 1024px);
   abaixo disso a mgx-enxuto.css empilha e o celular esconde a arte */
@media (min-width: 64rem) {
  .mgxsit-secao .mgxsit-cartao { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 1rem; }
}
.mgxsit-secao .mgxsit-cartao__texto { gap: 0.375rem; }
.mgxsit-secao .mgxsit-cartao__titulo { font-size: 1.25rem; line-height: 1.2; }
.mgxsit-secao .mgxsit-cartao__linha { font-size: 0.9375rem; line-height: 1.5; }

/* painéis ilustrados */
.mgxsit-secao .mgxsit.mgxsit { padding: 0.75rem; gap: 0.5rem; font-size: 0.875rem; }
.mgxsit-secao .mgxsit--chat.mgxsit--chat { gap: 0.5rem; }
.mgxsit-secao .mgxsit .mgxsit__topo { font-size: 0.875rem; line-height: 1.3; }
.mgxsit-secao .mgxsit .mgxsit__tag { padding: 0.0625rem 0.4375rem; line-height: 1.25; }
.mgxsit-secao .mgxsit .mgxsit__msg { padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.4; }
.mgxsit-secao .mgxsit .mgxsit__col { gap: 0.25rem; }
.mgxsit-secao .mgxsit .mgxsit__views { line-height: 1.3; }
.mgxsit-secao .mgxsit .mgxsit__barra { block-size: calc(var(--h, 0.5) * 3rem); }
.mgxsit-secao .mgxsit .mgxsit__itens { gap: 0.375rem; }
.mgxsit-secao .mgxsit .mgxsit__item { padding: 0.4375rem 0.625rem; row-gap: 0; line-height: 1.35; }
.mgxsit-secao .mgxsit .mgxsit__produto { font-size: 0.875rem; }
.mgxsit-secao .mgxsit .mgxsit__angulo { line-height: 1.4; }
.mgxsit-secao .mgxsit .mgxsit__dia { gap: 0.25rem; }
.mgxsit-secao .mgxsit .mgxsit__nome { line-height: 1.3; }
.mgxsit-secao .mgxsit .mgxsit__tarefa { block-size: 1.875rem; }
.mgxsit-secao .mgxsit .mgxsit__legenda { gap: 0.25rem 0.75rem; line-height: 1.4; }

.mgxsit-secao .mgxs__acao { margin-block-start: clamp(0.75rem, 1.4vw, 1.25rem); gap: 0.5rem 1.5rem; }

/* tablet e celular: o cartão empilha, e o número sobe para o canto,
   flutuando ao lado da 1ª linha do título (fluxo em bloco, não grade) */
@media (max-width: 63.99rem) {
  .mgxsit-secao .mgxsit-cartao__texto { display: block; }
  /* a margem de baixo negativa mantém o número MAIS BAIXO que a 1ª linha do
     título: com 0,05px a mais ele encurtava também a 2ª linha, e "renda
     previsível" caía em três linhas em 360px (medido em 23/09/2026) */
  .mgxsit-secao .mgxsit-cartao__n {
    float: right;
    margin: 0.0625rem 0 -0.25rem 0.375rem;
    line-height: 1.2;
  }
  .mgxsit-secao .mgxsit-cartao__linha { margin-block-start: 0.375rem; }
  /* quebra comum: com o número flutuando, "balance" deixava "Quer" sozinho
     na 1ª linha (390px) e "pretty" partia "renda previsível" em três linhas
     (360px). A órfã de 360px ("zero" sozinho) saiu com o título a 15px. */
  .mgxsit-secao .mgxsit-cartao__titulo { text-wrap: wrap; }
}
@media (max-width: 47.99rem) {
  .mgxsit-secao .mgxsit-cartao { padding: 0.75rem; }
  .mgxsit-secao .mgxsit-cartao__titulo { font-size: 1rem; line-height: 1.25; }
  .mgxsit-secao .mgxsit-cartao__linha { font-size: 0.875rem; line-height: 1.4; }
  .mgxsit-secao .mgxs__nota { font-size: 0.875rem; line-height: 1.4; text-wrap: balance; }
}
/* celular estreito (360–374px): coluna de 138px; título a 15px para caber em
   duas linhas ao lado do número */
@media (max-width: 23.4375rem) {
  .mgxsit-secao .mgxsit-cartao { padding: 0.625rem; }
  .mgxsit-secao .mgxsit-cartao__titulo { font-size: 0.9375rem; }
}


/* ==========================================================================
   3. POR QUE AGORA — texto | dois fatos com fonte

   A altura era a da coluna dos fatos (402px): 24px de respiro em cada
   cartão, número a 60px e citação a 20px em três linhas. Mesmos fatos, mesma
   fonte citada, em cartões mais justos.
   ========================================================================== */
.mgxjanela .mgxjanela__grade { gap: clamp(1rem, 3.5vw, 3rem); }
.mgxjanela .mgxjanela__texto { gap: 0.875rem; }
.mgxjanela .mgxjanela__fatos { gap: 0.625rem; }
.mgxjanela .mgxfato {
  gap: 0.375rem;
  padding: clamp(0.75rem, 1.3vw, 1.125rem) clamp(0.75rem, 1.5vw, 1.25rem);
}
.mgxjanela .mgxfato__grande { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.mgxjanela .mgxfato__frase p {
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
  line-height: 1.35;
}
.mgxjanela .mgxfato__legenda { line-height: 1.45; }
.mgxjanela .mgxfato__fonte { line-height: 1.4; }
@media (max-width: 47.99rem) {
  .mgxjanela .mgxjanela__texto { gap: 0.75rem; }
  .mgxjanela .mgxfato__grande { font-size: 2rem; }
  /* a citação em coluna de 150px ia a sete linhas de negrito: 14px */
  .mgxjanela .mgxfato__frase p { font-size: 0.875rem; }
  .mgxjanela .mgxfato__legenda { line-height: 1.4; }
}


/* ==========================================================================
   4. ENTREGÁVEIS — 3×2 no desktop, 2×3 no celular

   · Título em duas linhas por limite de 46rem: cabe em uma.
   · Cartão com ícone de 44px, título de 19px e texto de 16px em três
     linhas: ícone de 36px, título de 18px, texto de 15px em duas.
   · Celular: o ícone deixava uma linha só para ele (36px + vão) em cada um
     dos seis cartões. Vira um selo de 20px no canto, flutuando ao lado da
     1ª linha do título — como o número das situações.
   ========================================================================== */
.mgxent .mgxs__cabeca { max-inline-size: 60rem; }
.mgxent .mgxent__grade { gap: clamp(0.5rem, 1.2vw, 1rem); }
.mgxent .mgxent__item {
  gap: 0.375rem;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
}
.mgxent .mgxent__icone {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: 0.25rem;
}
.mgxent .mgxent__icone svg { inline-size: 1.125rem; block-size: 1.125rem; }
.mgxent .mgxent__titulo { font-size: 1.125rem; line-height: 1.3; }
.mgxent .mgxent__texto { font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 47.99rem) {
  .mgxent .mgxent__grade { gap: 0.5rem; }
  /* fluxo em bloco (não grade) para o selo flutuar ao lado do título */
  .mgxent .mgxent__item { display: flow-root; padding: 0.75rem; }
  .mgxent .mgxent__icone {
    float: right;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0 0 -0.125rem 0.375rem;   /* fica dentro da 1ª linha do título */
    border-radius: 6px;
  }
  .mgxent .mgxent__icone svg { inline-size: 0.75rem; block-size: 0.75rem; }
  /* entrelinha de 20,25px ≥ selo de 20px: o selo encosta só na 1ª linha */
  .mgxent .mgxent__titulo { font-size: 0.9375rem; line-height: 1.35; letter-spacing: -0.01em; text-wrap: wrap; }
  .mgxent .mgxent__texto { margin-block-start: 0.25rem; font-size: 0.875rem; line-height: 1.4; }
}
@media (max-width: 23.4375rem) {
  .mgxent .mgxent__grade { gap: 0.375rem; }
  .mgxent .mgxent__item { padding: 0.625rem; }
}