/* ==========================================================================
   MGX — versão ENXUTA (23/09/2026)

   Pedido do dono: "o site está muito grande, rolagem excessiva; tem de ser
   focado em captação e prender na leitura desde a hero". Medido antes:
   23,1 telas no desktop (1440) e 22,7 no celular (390). Blocos de 2 a 3,7
   telas viraram componentes de cerca de uma tela, cada um fechando com a
   chamada. Esta folha é a casca comum (.mgxs), o botão (.mgx-cta) e as
   seções próprias novas. Tokens: css/mgx-ihub.css e css/mgx-escala.css.
   ========================================================================== */

/* ---- casca de seção ------------------------------------------------------- */
.mgxs.mgxs {
  position: relative;
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  background: #000;
  color: #C9D3DC;
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-corpo, 1rem);
  line-height: var(--e-texto, 1.6);
  isolation: isolate;
}
.mgxs .mgxs__in { max-inline-size: 72rem; margin-inline: auto; }
.mgxs .mgxs__cabeca {
  display: grid;
  gap: 0.875rem;
  max-inline-size: 46rem;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.mgxs .mgxs__cabeca--centro { margin-inline: auto; text-align: center; justify-items: center; }
.mgxs .mgxs__titulo {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: var(--t-secao, clamp(2.125rem, 1.4rem + 3vw, 3.5rem));
  line-height: var(--e-display, 1.1);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.mgxs .mgxs__titulo b { font-weight: inherit; color: var(--ihub-azul, #00A7FF); }
.mgxs .mgxs__sub {
  margin: 0;
  max-inline-size: 40rem;
  font-size: var(--t-lead, 1.125rem);
  line-height: var(--e-texto, 1.6);
  color: #AEB9C4;
  text-wrap: pretty;
}
.mgxs .mgxs__sub strong { color: #fff; font-weight: 600; }
.mgxs .mgxs__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  margin: 0;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pilula, 999px);
  border: 1px solid rgba(0, 167, 255, 0.30);
  background: rgba(0, 167, 255, 0.08);
  color: #CFEAFF;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}
.mgxs .mgxs__selo-ponto {
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: var(--ihub-azul, #00A7FF);
  box-shadow: 0 0 0 4px rgba(0, 167, 255, 0.18);
}
.mgxs .mgxs__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
}
.mgxs .mgxs__acao--centro { justify-content: center; }
.mgxs .mgxs__nota { margin: 0; font-size: 0.9375rem; color: #8FA0B0; max-inline-size: 26rem; }

/* ---- botão de chamada: o mesmo hexágono do iHub dos botões da página ------
   Forma = o SVG da página (svg/rectangle-2088…), como FUNDO do próprio botão.
   O reflexo anda por background-position — luz de botão é fundo, nunca caixa
   animada (regra de 22/09/2026: caixa animada vaza e engana o medidor). */
.mgx-cta-caixa {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}
.mgx-cta-caixa::before {                /* brilho parado atrás do botão */
  content: "";
  position: absolute;
  inset: 12% 6%;
  z-index: -1;
  border-radius: var(--r-pilula, 999px);
  background: var(--ihub-azul, #00A7FF);
  filter: blur(22px);
  opacity: 0.45;
  pointer-events: none;
}
.mgxs a.mgx-cta,
.mgx-cta-caixa a.mgx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 3.75rem;
  padding: 0 2.75rem;
  color: #00111E;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%) -160% 0 / 55% 100% no-repeat,
    url('../svg/rectangle-2088_2fe8412c.svg') center / 100% 100% no-repeat;
  -webkit-mask: url('../svg/rectangle-2088_2fe8412c.svg') center / 100% 100% no-repeat;
          mask: url('../svg/rectangle-2088_2fe8412c.svg') center / 100% 100% no-repeat;
  animation: mgx-cta-luz 4.8s cubic-bezier(.6, 0, .2, 1) infinite;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.mgx-cta-caixa a.mgx-cta:hover { transform: translateY(-2px); color: #00111E; }
.mgx-cta-caixa a.mgx-cta:focus-visible { outline: 3px solid #7AD4FF; outline-offset: 4px; }
.mgx-cta-caixa .mgx-cta__seta { flex: 0 0 auto; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.mgx-cta-caixa a.mgx-cta:hover .mgx-cta__seta { transform: translateX(3px); }
@keyframes mgx-cta-luz {
  0%, 55% { background-position: -160% 0, center; }
  100%    { background-position: 260% 0, center; }
}
@media (prefers-reduced-motion: reduce) {
  .mgx-cta-caixa a.mgx-cta { animation: none; }
}

/* ==========================================================================
   1. VOCÊ SE RECONHECE — 2×2. No desktop cada cartão é texto | ilustração;
   no celular, só o texto (lado a lado, duas colunas).
   ========================================================================== */
.mgxsit-secao .mgxsit-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.625rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgxsit-secao .mgxsit-cartao {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-cartao, 16px);
  background: radial-gradient(120% 90% at 0% 0%, rgba(0, 167, 255, 0.14) 0%, rgba(0, 85, 145, 0.12) 45%, rgba(4, 12, 22, 0.94) 100%);
  border: 1px solid rgba(0, 167, 255, 0.18);
  list-style: none;
}
.mgxsit-secao .mgxsit-cartao__texto { display: grid; gap: 0.5rem; align-content: start; }
.mgxsit-secao .mgxsit-cartao__n {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ihub-azul, #00A7FF);
}
.mgxsit-secao .mgxsit-cartao__titulo {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: var(--t-cartao, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.mgxsit-secao .mgxsit-cartao__titulo b { font-weight: inherit; color: var(--ihub-azul, #00A7FF); }
.mgxsit-secao .mgxsit-cartao__linha { margin: 0; font-size: 1rem; line-height: 1.5; color: #AEB9C4; }
.mgxsit-secao .mgxsit-cartao__arte { min-inline-size: 0; }
.mgxsit-secao .mgxsit.mgxsit { padding: 0.875rem; gap: 0.625rem; }

/* tablet: o cartão empilha texto em cima e ilustração embaixo */
@media (max-width: 63.99rem) {
  .mgxsit-secao .mgxsit-cartao { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* celular: duas colunas lado a lado, só o texto — a ilustração é do desktop */
@media (max-width: 47.99rem) {
  .mgxsit-secao .mgxsit-cartao { gap: 0.5rem; padding: 0.875rem; align-content: start; }
  .mgxsit-secao .mgxsit-cartao__arte { display: none; }
  .mgxsit-secao .mgxsit-cartao__titulo { font-size: 1.0625rem; }
  .mgxsit-secao .mgxsit-cartao__linha { font-size: 0.875rem; }
  .mgxsit-secao .mgxs__acao { justify-content: center; text-align: center; }
  .mgxsit-secao .mgxs__nota { text-align: center; }
}

/* ==========================================================================
   2. POR QUE AGORA — texto | dois fatos com fonte
   ========================================================================== */
.mgxjanela .mgxjanela__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.mgxjanela .mgxjanela__texto { display: grid; gap: 1rem; }
.mgxjanela .mgxjanela__fatos { display: grid; gap: 0.875rem; }
.mgxjanela .mgxfato {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-cartao, 16px);
  background: radial-gradient(120% 100% at 100% 0%, rgba(0, 167, 255, 0.16) 0%, rgba(0, 85, 145, 0.10) 45%, rgba(4, 12, 22, 0.94) 100%);
  border: 1px solid rgba(0, 167, 255, 0.18);
}
.mgxjanela .mgxfato__grande {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ihub-azul, #00A7FF);
  font-variant-numeric: tabular-nums;
}
.mgxjanela .mgxfato__frase { margin: 0; padding: 0; border: 0; }
.mgxjanela .mgxfato__frase p {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.4;
  color: #fff;
  text-wrap: pretty;
}
.mgxjanela .mgxfato__legenda { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #C9D3DC; }
.mgxjanela .mgxfato__fonte { margin: 0; font-size: 0.875rem; color: #7F90A1; }
.mgxjanela .mgxfato__fonte a { color: #7AD4FF; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 63.99rem) {
  .mgxjanela .mgxjanela__grade { grid-template-columns: minmax(0, 1fr); }
  .mgxjanela .mgxjanela__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .mgxjanela .mgxjanela__fatos { gap: 0.625rem; }
  .mgxjanela .mgxfato { padding: 0.875rem; }
  .mgxjanela .mgxfato__grande { font-size: 2.25rem; }
  .mgxjanela .mgxfato__frase p { font-size: 0.9375rem; }
  .mgxjanela .mgxfato__legenda { font-size: 0.875rem; }
}

/* ==========================================================================
   3. ENTREGÁVEIS — 3×2 no desktop, 2×3 no celular (lado a lado)
   ========================================================================== */
.mgxent .mgxent__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.625rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgxent .mgxent__item {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-cartao, 16px);
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.10), rgba(0, 167, 255, 0.03));
  border: 1px solid rgba(0, 167, 255, 0.16);
  list-style: none;
  transition: border-color 240ms cubic-bezier(.16, 1, .3, 1), transform 240ms cubic-bezier(.16, 1, .3, 1);
}
.mgxent .mgxent__item:hover { border-color: rgba(0, 167, 255, 0.45); transform: translateY(-3px); }
.mgxent .mgxent__icone {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-controle, 10px);
  background: rgba(0, 167, 255, 0.12);
  border: 1px solid rgba(0, 167, 255, 0.28);
  color: var(--ihub-azul, #00A7FF);
}
.mgxent .mgxent__icone svg { inline-size: 1.375rem; block-size: 1.375rem; }
.mgxent .mgxent__titulo {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}
.mgxent .mgxent__texto { margin: 0; font-size: 1rem; line-height: 1.55; color: #AEB9C4; }
@media (max-width: 47.99rem) {
  .mgxent .mgxent__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgxent .mgxent__item { padding: 0.875rem; gap: 0.5rem; }
  .mgxent .mgxent__icone { inline-size: 2.25rem; block-size: 2.25rem; }
  .mgxent .mgxent__icone svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .mgxent .mgxent__titulo { font-size: 1rem; }
  .mgxent .mgxent__texto { font-size: 0.875rem; line-height: 1.5; }
}

/* ==========================================================================
   4. BÔNUS — 4 colunas com o primeiro em destaque (2 colunas de largura)
   ========================================================================== */
.mgxbonus .mgxbonus__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.625rem, 1.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgxbonus .mgxbonus__item {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-cartao, 16px);
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.08), rgba(0, 167, 255, 0.02));
  border: 1px solid rgba(0, 167, 255, 0.16);
  list-style: none;
}
.mgxbonus .mgxbonus__item--destaque {
  grid-column: span 2;
  background: var(--ihub-grad-fundo, radial-gradient(67.54% 100.03% at 50% 0%, #00A7FF 0%, #005591 100%));
  border-color: rgba(122, 212, 255, 0.55);
}
.mgxbonus .mgxbonus__n {
  justify-self: start;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pilula, 999px);
  background: rgba(0, 167, 255, 0.14);
  color: #7AD4FF;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.mgxbonus .mgxbonus__item--destaque .mgxbonus__n { background: rgba(0, 17, 30, 0.28); color: #fff; }
.mgxbonus .mgxbonus__titulo {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: #fff;
}
.mgxbonus .mgxbonus__item--destaque .mgxbonus__titulo { font-size: var(--t-cartao, 1.375rem); }
.mgxbonus .mgxbonus__texto { margin: 0; font-size: 1rem; line-height: 1.55; color: #AEB9C4; }
.mgxbonus .mgxbonus__item--destaque .mgxbonus__texto { color: #EAF6FF; }
@media (max-width: 63.99rem) {
  .mgxbonus .mgxbonus__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .mgxbonus .mgxbonus__item { padding: 0.875rem; }
  .mgxbonus .mgxbonus__titulo { font-size: 1rem; }
  .mgxbonus .mgxbonus__item--destaque .mgxbonus__titulo { font-size: 1.125rem; }
  .mgxbonus .mgxbonus__texto { font-size: 0.875rem; line-height: 1.5; }
}

/* ==========================================================================
   5. OFERTA — lista em duas colunas, aviso da turma e comparativo recolhido
   ========================================================================== */
.mgx-aviso-turma {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.625rem;
  margin: 1.25rem auto 0;
  max-inline-size: 34rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #C9D3DC;
  text-align: center;
}
.mgx-aviso-turma__ponto {
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: 0.45em;
  border-radius: 50%;
  background: var(--ihub-vermelho, #FF192A);
  box-shadow: 0 0 0 4px rgba(255, 25, 42, 0.2);
}

.mgxcmp-sanfona {
  max-inline-size: 72rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  inline-size: 100%;
}
.mgxcmp-sanfona > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 3rem;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pilula, 999px);
  border: 1px solid rgba(0, 167, 255, 0.30);
  background: rgba(0, 167, 255, 0.06);
  color: #CFEAFF;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.mgxcmp-sanfona > summary::-webkit-details-marker { display: none; }
.mgxcmp-sanfona > summary::after {
  content: "";
  inline-size: 0.5rem; block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms ease;
}
.mgxcmp-sanfona[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mgxcmp-sanfona > summary:hover { border-color: rgba(0, 167, 255, 0.6); }

/* ==========================================================================
   6. CHAMADA FINAL
   ========================================================================== */
.mgxfim {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  text-align: center;
  font-family: 'Outfit', sans-serif;
}
.mgxfim .mgxfim__titulo {
  margin: 0;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: var(--t-titulo, clamp(1.75rem, 1.3rem + 1.8vw, 2.125rem));
  line-height: 1.15;
  color: #fff;
  text-wrap: balance;
}
.mgxfim .mgxfim__titulo b { font-weight: inherit; color: var(--ihub-azul, #00A7FF); }
.mgxfim .mgxfim__texto { margin: 0 0 0.5rem; font-size: 1rem; color: #C9D3DC; }
.mgxfim .mgxfim__duvida { margin: 0.25rem 0 0; font-size: 0.9375rem; color: #8FA0B0; }
.mgxfim .mgxfim__duvida a { color: #7AD4FF; text-decoration: underline; text-underline-offset: 3px; }

/* ---- oferta: o cartão de preço ------------------------------------------
   · A seção tem um ::after (degradê preto de baixo para cima) e um ::before
     (brilho borrado, z-index 1) pintados POR CIMA do conteúdo. Eles cobriam
     o comparativo recolhido (invisível, embora "visível" no DOM — o
     elementsFromPoint ignora camada com pointer-events:none) e desenhavam
     uma quina dura atravessando o cartão translúcido. O cartão e o
     comparativo sobem acima das camadas e o cartão ganha fundo opaco. */
.mgxcmp-sanfona { position: relative; z-index: 2; }
.elementor-3386 .elementor-element.elementor-element-d1e9c40 {
  position: relative;
  z-index: 2;
  background: radial-gradient(120% 70% at 50% 0%, rgba(0, 167, 255, 0.20) 0%, rgba(0, 85, 145, 0.16) 42%, #040C16 100%) !important;
  border: 1px solid rgba(0, 167, 255, 0.24) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* a lista do que entra: duas colunas onde há largura (8 itens em 506px
   viravam 8 linhas; em duas colunas, 4) */
@media (min-width: 64rem) {
  .elementor-element-b662254 .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0.25rem;
  }
  .elementor-element-b662254 .elementor-icon-list-item:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   7. QUEM ESTÁ POR TRÁS — texto curto | vídeo institucional (a gravar)
   Antes: quatro parágrafos num título de 880px de altura e o vídeo embaixo.
   ========================================================================== */
.mgxsobre .mgxsobre__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.mgxsobre .mgxsobre__texto { display: grid; gap: 1rem; }
.mgxsobre .mgxsobre__fatos { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.mgxsobre .mgxsobre__fatos li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  margin: 0; font-size: 1rem; line-height: 1.5; color: #D4DEE7; list-style: none;
}
.mgxsobre .mgxsobre__fatos li::before {
  content: ""; flex: 0 0 auto; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.15em;
  border-radius: 50%;
  background: var(--ihub-azul, #00A7FF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300111E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.mgxsobre .mgxsobre__video { min-inline-size: 0; border-radius: var(--r-cartao, 16px); overflow: clip; }
.mgxsobre .mgxsobre__video .elementor-wrapper { aspect-ratio: 16 / 9; }
@media (max-width: 63.99rem) {
  .mgxsobre .mgxsobre__grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .mgxsobre .mgxsobre__fatos li { font-size: 0.9375rem; }
}

/* ==========================================================================
   8. HERO — cabe numa tela e prova o que diz
   · 178px de respiro embaixo e 40px entre cada peça: a hero passava de uma
     tela (1039px a 1440). Agora fecha em ~900.
   · O logo do topo renderizava com ~45px de largura (o construtor dá largura
     fixa pequena ao <img>). Volta a ser legível.
   · "Alunos em todo o Brasil" com avatares genéricos contradizia a própria
     página ("turma nova, a prova ainda está sendo feita"). No lugar, três
     fatos da oferta que qualquer um pode conferir.
   ========================================================================== */
.elementor-3386 .elementor-element.elementor-element-a75144b > .e-con-inner {
  padding-block-end: clamp(2.5rem, 5vw, 4rem) !important;
  row-gap: clamp(1.25rem, 2.2vw, 1.75rem) !important;
}
.elementor-element-8d4fcd6 img { width: clamp(8rem, 10vw, 10rem) !important; height: auto !important; max-width: none !important; }
.mgx-hero-provas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Outfit', sans-serif;
  position: relative;
  z-index: 2;
}
.mgx-hero-provas li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-pilula, 999px);
  border: 1px solid rgba(0, 167, 255, 0.28);
  background: rgba(0, 20, 36, 0.62);
  color: #E3F2FF;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  list-style: none;
}
.mgx-hero-provas svg {
  inline-size: 1.125rem; block-size: 1.125rem; flex: 0 0 auto;
  fill: none; stroke: var(--ihub-azul, #00A7FF); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 47.99rem) {
  .mgx-hero-provas { gap: 0.375rem; }
  .mgx-hero-provas li { font-size: 0.875rem; padding: 0.4375rem 0.75rem; }
  .mgx-hero-provas li:last-child { display: none; }   /* duas pílulas cabem numa linha em 360px */
}

/* ---- respiros da versão enxuta -------------------------------------------
   · A seção de oferta tinha --min-height: 1560px gravado pelo construtor
     (para caber a tabela comparativa, que agora está recolhida): 370px de
     preto depois do cartão.
   · Respiro das seções próprias: 96px → 72px por lado no desktop. */
.elementor-3386 .elementor-element.elementor-element-ebcb730 {
  --min-height: 0px !important;
  min-height: 0 !important;
  padding-block: clamp(2.5rem, 5vw, 4rem) !important;
}
.mgxs.mgxs { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.mgxsit-secao .mgxs__cabeca { max-inline-size: 62rem; }

/* ---- preço no celular ------------------------------------------------------
   · Os rótulos de pendência (ancora-de-preco, condicoes-de-parcelamento) são
     absolutos logo abaixo do campo e, no celular, tapavam a linha seguinte
     ("12x de" sumia). Enquanto o campo estiver pendente, ele reserva a faixa.
   · "R$49,70" encostava nas bordas do cartão e o botão quebrava em 2 linhas. */
.elementor-element-c0b0ab7:has([data-preencher]),
.elementor-element-9f693cc:has([data-preencher]) { margin-block-end: 1.6rem !important; }
@media (max-width: 47.99rem) {
  .elementor-3386 .elementor-element.elementor-element-28f19d6 .elementor-heading-title { font-size: clamp(2.75rem, 13vw, 3.5rem) !important; }
  .elementor-3386 .elementor-element.elementor-element-2e07f0e .elementor-button {
    white-space: nowrap;
    padding-inline: 1.5rem !important;
    font-size: 1.0625rem !important;
  }
}

/* o botão próprio tem texto escuro sempre: a regra de compra do iHub
   (`a[data-cta='compra']…`) pintava de branco sobre o azul (contraste ~2,6:1) */
.mgx-cta-caixa a.mgx-cta[data-cta],
.mgx-cta-caixa a.mgx-cta[data-cta] :is(.mgx-cta__texto, .mgx-cta__seta) { color: #00111E !important; }

/* ---- voltar ao topo: botão redondo discreto, no lugar do paralelogramo
   cinza da origem (que no celular virava uma placa de 60px sem rótulo) */
.elementor-element-afae82c .elementor-button {
  inline-size: 3rem !important;
  block-size: 3rem !important;
  min-inline-size: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 167, 255, 0.35) !important;
  background: rgba(0, 167, 255, 0.08) !important;
}
.elementor-element-afae82c .elementor-button::before,
.elementor-element-afae82c .elementor-button::after,
.elementor-element-afae82c .elementor-button-wrapper::after { display: none !important; }
.elementor-element-afae82c .elementor-button-text {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.elementor-element-afae82c .elementor-button-icon { margin: 0 !important; font-size: 1.25rem !important; }

/* ==========================================================================
   9. GARANTIA — selo | texto
   Antes: faixa diagonal azul, fita "GARANTIA -" girada e letras gigantes
   cortadas atrás do texto (a frase atravessava a quina azul/preto e perdia
   leitura), tudo em negrito. Agora um selo com o texto circular girando
   devagar e o texto limpo ao lado.
   ========================================================================== */
.mgxgarantia .mgxgarantia__cartao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--r-cartao, 16px);
  background: radial-gradient(90% 120% at 0% 50%, rgba(0, 167, 255, 0.22) 0%, rgba(0, 85, 145, 0.14) 40%, #040C16 100%);
  border: 1px solid rgba(0, 167, 255, 0.24);
}
.mgxgarantia .mgxgarantia__texto { display: grid; gap: 0.875rem; }
.mgxgarantia .mgxgarantia__como { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #8FA0B0; max-inline-size: 36rem; }
/* o 7 tipográfico — o mesmo desenho do selo do AlyMaps, que o dono aprovou:
   numeral alto e pesado com o degradê da marca por dentro e a legenda curta
   embaixo. Substitui o selo redondo com texto em volta (reprovado 23/09). */
.mgxgarantia .mgxgarantia__selo {
  display: grid;
  justify-items: center;
  align-content: center;
  padding-inline: clamp(0.25rem, 1vw, 0.75rem);
}
.mgxgarantia .mgxgarantia__selo b {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(4.25rem, 3rem + 4.5vw, 7rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  background: linear-gradient(160deg, #7AD4FF 0%, var(--ihub-azul, #00A7FF) 45%, var(--ihub-azul-profundo, #005591) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mgxgarantia .mgxgarantia__selo span {
  margin-block-start: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
}
/* celular: selo e título lado a lado; o texto corre embaixo, na largura toda */
@media (max-width: 47.99rem) {
  .mgxgarantia .mgxgarantia__cartao {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "selo titulo" "sub sub" "como como";
    column-gap: 1rem;
    row-gap: 0.875rem;
  }
  .mgxgarantia .mgxgarantia__texto { display: contents; }
  .mgxgarantia .mgxgarantia__selo { grid-area: selo; }
  .mgxgarantia .mgxgarantia__selo b { font-size: 4.5rem; }
  .mgxgarantia .mgxgarantia__selo span { font-size: 0.875rem; }
  .mgxgarantia .mgxgarantia__texto > .mgxs__titulo { grid-area: titulo; font-size: 1.75rem; }
  .mgxgarantia .mgxgarantia__texto > .mgxs__sub { grid-area: sub; font-size: 1rem; }
  .mgxgarantia .mgxgarantia__como { grid-area: como; }
}

/* ---- alvo de toque dos links dentro do texto (fonte da notícia, WhatsApp):
   a área clicável cresce para 44px sem mexer na linha */
.mgxjanela .mgxfato__fonte a,
.mgxfim .mgxfim__duvida a {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}
/* rótulos da trinca do simulador: 12px ficava abaixo do piso de leitura */
.mgxsim .mgxsim-trinca__rotulo { font-size: 0.875rem !important; line-height: 1.25; }

/* o cartão de preço tinha --width: 969px gravado: entre 768 e 1000px ele
   ficava mais largo que a tela e cortado dos dois lados (medido: -106→863px
   a 768). Largura máxima em vez de fixa. */
.elementor-3386 .elementor-element.elementor-element-d1e9c40 {
  --width: min(969px, 100%) !important;
  width: min(969px, 100%) !important;
  max-inline-size: 100% !important;
}

/* a seção do simulador ainda levava o fundo de PAPEL BRANCO da origem
   (images/sess-1…webp); no celular ele aparecia como duas faixas brancas de
   10px dos lados do simulador */
.elementor-3386 .elementor-element.elementor-element-f3335d5 {
  background-color: #000 !important;
  background-image: none !important;
}