/* ==========================================================================
   CAMADA DO CELULAR — revisão com aparelhos emulados (24/09/2026)

   Pedido do Victor: "desktop tá tudo legal, agora a responsividade no mobile,
   a mesma presença e efeitos, da maneira mais perfeita e sem ser cansativa".
   Revisado em iPhone 15 (393×659 úteis), Galaxy S9+ e iPhone SE (320 de
   largura), com toque e densidade de tela reais. Só mexe abaixo de 48rem
   (e um ajuste de âncora que vale para todas as larguras): o desktop fica
   como está.
   ========================================================================== */

/* rótulo curto só no celular: <span class="mgx-so-estreito"> */
.mgx-so-estreito { display: none; }

/* âncoras da navbar: o título não para embaixo da pílula flutuante */
#como-funciona, #por-que-agora, #entregaveis, #mgx-simulador, #bonus, #mgx-perguntas, #fechamento {
  scroll-margin-block-start: 5.5rem;
}

@media (max-width: 47.99rem) {
  .mgx-so-estreito { display: inline; }

  /* HERO — no desktop os botões descem 12vh (pedido de 23/09); no celular
     isso abria um buraco de ~110px entre o texto e os botões. Aqui descem
     pouco, e os dois botões voltam a dividir a linha com o rótulo curto. */
  .hero.e-parent .elementor-element-5d47307,
  .hero.e-parent .mgx-hero-provas { translate: 0 clamp(0.75rem, 3.5vh, 1.75rem); }
  /* as pílulas (garantia, call) saem do celular a pedido do Victor (24/09/2026);
     a garantia continua nas perguntas e na chamada final */
  .elementor-3386 .elementor-element-a75144b .mgx-hero-provas { display: none !important; }

  /* BÔNUS — o botão tinha sumido no celular para caber na tela; sobra espaço
     embaixo do cupom, então ele volta, DEPOIS do cupom (título → cupom → ação) */
  .mgxpedido .mgxpedido__texto { display: contents; }
  .mgxpedido .mgxpedido__texto > .mgxs__titulo { order: 1; }
  .mgxpedido .mgxpedido__cupom { order: 2; }
  .mgxpedido .mgxpedido__texto > .mgxs__acao { order: 3; display: flex; justify-content: center; margin: 0; }
  .mgxpedido .mgxpedido__texto > .mgxs__acao .mgx-cta-caixa,
  .mgxpedido .mgxpedido__texto > .mgxs__acao a.mgx-cta { inline-size: 100%; justify-content: center; }
}

/* 320–359px (iPhone SE 1ª geração, Android pequeno) ------------------------- */
@media (max-width: 22.4375rem) {
  /* passos do "Como funciona": o número em círculo era cortado na borda */
  .mgxcf .mgxcf-botao { gap: 0.25rem; padding: 0 0.25rem; font-size: 0.8125rem; }
  .mgxcf .mgxcf-botao__n { inline-size: 1rem; block-size: 1rem; font-size: 0.625rem; }
}

/* dias das calls num cartão de ~130px (celular de 320px, 2 colunas): os
   nomes estouravam 3px cada e o "ao vivo" 10px. Abaixo de 9,5rem de cartão o
   "ao vivo" vira só o ponto vermelho e os cinco dias ficam iguais. */
@container mgxkit-semana (max-width: 9.5rem) {
  .mgxkit .mgxkit__semana { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.125rem; }
  .mgxkit .mgxkit__dia { padding-inline: 1px; }
  .mgxkit .mgxkit__dia--hoje b { font-size: 0; gap: 0; }
}