/* ==========================================================================
   MGX — COMPACTAÇÃO DA METADE DE BAIXO (23/09/2026)

   O dono: "tá gigante, dá para compactar — o leitor cansa só de ver o tamanho
   e acaba nem lendo". Antes, "site focado em captação, sem rolagem
   excessiva". Nível pedido: o da Remessa — tipografia contida, espaçamento
   preciso, nada gritando.

   Regra nova do dono, que vale acima das metas de altura: a página vira uma
   sequência de TELAS. Cada tópico mora dentro de um <div class="mgx-tela">
   (altura mínima de uma tela, conteúdo centralizado, linha divisória entre
   uma tela e outra) — isso é de outra folha. Aqui o trabalho é o conteúdo de
   cada tópico CABER numa tela: 1440×900, 768×1024, 390×844 e 360×740.
   Nenhuma altura fixa nem min-height nesta folha.

   Escopo desta folha: simulador, bônus, oferta, garantia, placas, quem está
   por trás e perguntas. Ficaram FORA de propósito: a chamada final e o
   rodapé (refeitos com marcação nova; o aviso legal foi para dentro do
   rodapé) e a metade de cima (mgx-compacto-topo.css).

   Regras que valem aqui:
   · Nenhuma informação sai. Compactar é tipografia, espaço e composição
     lado a lado. Só-leitor apenas para texto auxiliar cujo conteúdo já está
     à vista (as dicas dos controles do simulador).
   · Régua comum de mgx-compacto.css (--c-titulo, --c-sub, --c-respiro,
     --c-cabeca). No celular o respiro das seções daqui é --fecho-respiro
     (24px): a tela que embrulha cada tópico já centraliza e dá o ar.
   · Seletor com #id da seção sempre que ela tem id: vence as regras de
     classe herdadas sem precisar de !important. O !important só aparece
     onde uma folha anterior já usava !important.
   ========================================================================== */

:root { --fecho-respiro: var(--c-respiro); }
@media (max-width: 47.99rem) {
  :root { --fecho-respiro: 1.5rem; }
}


/* ==========================================================================
   1. SIMULADOR — .elementor-element-f3335d5 › #mgx-simulador

   Medido antes: 1.390px a 1440 e 1.556px a 390.
   · Respiro em dobro: 56px do contêiner do construtor + 72px da seção.
   · As dicas de cada controle somavam 3 linhas por cartão no desktop.
   · Desktop: título numa faixa inteira (194px) acima da grade, e o aviso
     noutra faixa inteira embaixo. Celular: cinco cartões de 155–175px.

   Composição nova:
   · A partir de 768: duas colunas. Esquerda = título + controles; direita
     = resultado + conta aberta + aviso. Cabe numa tela, então o painel
     deixa de grudar (grudado, ele cobria a conta e o aviso ao rolar).
   · Controles: cartões em 2 colunas no desktop; abaixo de 1024 viram uma
     lista de linhas — rótulo | faixa | valor — alinhadas por subgrade.
   · Celular: o painel continua GRUDADO no topo, com os cinco controles
     inteiros embaixo dele na mesma tela.
   ========================================================================== */

.elementor-3386 .elementor-element.elementor-element-f3335d5 > .e-con-inner {
  padding-block: 0 var(--fecho-respiro) !important;
  row-gap: clamp(1.25rem, 2.2vw, 1.75rem) !important;
}
#mgx-simulador { padding-block: var(--fecho-respiro) 0; }

#mgx-simulador .mgxsim__cabeca { max-inline-size: none; }
#mgx-simulador .mgxsim__titulo { max-inline-size: 24ch; margin-block-end: 0.5rem; }
#mgx-simulador .mgxsim__linha { font-size: var(--c-sub); line-height: 1.55; max-inline-size: 60ch; }

/* a dica vira só-leitor: o rótulo já diz o que o controle é, e o texto
   continua ligado à faixa pelo aria-describedby */
#mgx-simulador .mgxsim-ctrl__dica {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* o campo de valor herdava do tema 8px de respiro e borda própria (44px de
   altura DENTRO de uma caixa de 52px). Agora a caixa tem 44px — o alvo de
   toque — e o campo ocupa ela inteira. */
#mgx-simulador .mgxsim-ctrl__valor {
  box-sizing: border-box;
  min-block-size: 2.75rem;
  padding-block: 0;
  padding-inline: 0.625rem;
}
#mgx-simulador .mgxsim-ctrl__campo {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  block-size: 2.625rem !important;
  min-block-size: 0 !important;
  line-height: 1.2 !important;
}
#mgx-simulador .mgxsim__aviso-forte { line-height: 1.5; }

/* ---- a partir de 768: título e controles | resultado, conta e aviso -------- */
@media (min-width: 48rem) {
  #mgx-simulador .mgxsim__caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "cabeca    painel"
      "controles conta"
      "controles aviso"
      "controles .";
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: 1rem;
    align-items: start;
  }
  /* o corpo some da árvore de caixas: painel, controles e conta viram itens
     da grade da caixa, ao lado do cabeçalho e do aviso */
  #mgx-simulador .mgxsim__corpo { display: contents; }
  #mgx-simulador .mgxsim__cabeca { grid-area: cabeca; margin: 0; }
  #mgx-simulador .mgxsim__painel {
    grid-area: painel;
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.125rem 1.25rem;
    gap: 0.75rem;
  }
  #mgx-simulador .mgxsim-res,
  #mgx-simulador .mgxsim-trinca { grid-column: 1; }
  #mgx-simulador .mgxsim__controles { grid-area: controles; }
  #mgx-simulador .mgxsim-conta { grid-area: conta; }
  #mgx-simulador .mgxsim__aviso { grid-area: aviso; margin: 0; }
}

/* ---- desktop: controles em cartões de 2 colunas --------------------------- */
@media (min-width: 64rem) {
  #mgx-simulador .mgxsim__controles { gap: 0.75rem; }
  #mgx-simulador .mgxsim-ctrl { padding: 0.75rem 0.875rem 0.5rem; row-gap: 0.125rem; }
  #mgx-simulador .mgxsim-ctrl__pontas { margin-block-start: -0.5rem; }
  /* o quinto controle e o "voltar" dividem a última linha: 5 + 1 = 3 × 2,
     sem linha órfã e sem uma faixa inteira só para o botão */
  #mgx-simulador .mgxsim-ctrl--largo { grid-column: auto; }
  #mgx-simulador .mgxsim__acoes { grid-column: auto; align-self: center; justify-content: center; }
  #mgx-simulador .mgxsim-res__numero { font-size: 3rem; line-height: 1.05; }
}

/* ---- abaixo de 1024: uma linha por controle — rótulo | faixa | valor -------
   A grade dos controles tem as três colunas; cada controle é uma subgrade
   que usa as mesmas trilhas, então faixas e valores ficam alinhados de uma
   linha para a outra. Uma superfície só, com fio entre as linhas. */
@media (max-width: 63.99rem) {
  #mgx-simulador .mgxsim__controles {
    grid-template-columns: minmax(6.25rem, 1fr) minmax(0, 1.25fr) auto;
    column-gap: 0.625rem;
    row-gap: 0;
    border: 1px solid var(--mgxsim-borda);
    border-radius: var(--mgxsim-raio-p);
    background: linear-gradient(180deg, rgba(0, 167, 255, 0.07), rgba(0, 85, 145, 0.05));
  }
  #mgx-simulador .mgxsim-ctrl {
    grid-column: 1 / -1;
    grid-template-columns: subgrid !important;
    grid-template-rows: auto;
    align-items: center;
    row-gap: 0 !important;
    column-gap: 0.625rem !important;
    padding: 0.125rem 0.625rem !important;
    border: 0;
    border-block-start: 1px solid var(--mgxsim-borda);
    border-radius: 0;
    background: none !important;
  }
  #mgx-simulador .mgxsim-ctrl:first-child { border-block-start: 0; }
  #mgx-simulador .mgxsim-ctrl:focus-within { background: rgba(0, 167, 255, 0.08) !important; }
  #mgx-simulador .mgxsim-ctrl__rotulo {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }
  #mgx-simulador .mgxsim-ctrl__faixa { grid-column: 2; grid-row: 1; }
  #mgx-simulador .mgxsim-ctrl__valor { grid-column: 3; grid-row: 1; justify-self: end; padding-inline: 0.5rem; }
  #mgx-simulador .mgxsim-ctrl__pontas { display: none !important; }
  /* 4,5 caracteres cabem o maior valor de cada campo ("2,95", "500");
     visualizações chega a "200.000" */
  #mgx-simulador .mgxsim-ctrl__campo { width: 4.5ch !important; inline-size: 4.5ch !important; }
  #mgx-simulador .mgxsim-ctrl__campo[data-mgxsim-campo="views"] { width: 7ch !important; inline-size: 7ch !important; }
  #mgx-simulador .mgxsim__acoes {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 0.25rem;
    border-block-start: 1px solid var(--mgxsim-borda);
  }
  #mgx-simulador .mgxsim__voltar { padding-block: 0.5rem; font-size: 0.9375rem; }
}

/* ---- tablet (768–1023): a coluna da direita tem ~330px ------------------- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  #mgx-simulador .mgxsim-conta__linha { font-size: 0.9375rem; line-height: 1.5; }
  #mgx-simulador .mgxsim__aviso-forte { font-size: 0.9375rem; line-height: 1.45; }
}

/* ---- celular --------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  #mgx-simulador .mgxsim__cabeca { margin-block-end: 0.75rem !important; }
  #mgx-simulador .mgxsim__titulo { margin-block-end: 0.375rem; }
  #mgx-simulador .mgxsim__linha { font-size: 0.9375rem; line-height: 1.45; }
  #mgx-simulador .mgxsim__corpo { gap: 0.625rem; }

  /* painel grudado mais baixo = mais tela livre para os controles */
  #mgx-simulador .mgxsim__painel { padding: 0.625rem 0.75rem; gap: 0.5rem; }
  #mgx-simulador .mgxsim-res__rotulo { margin: 0; font-size: 0.875rem; line-height: 1.3; }
  #mgx-simulador .mgxsim-res__numero { font-size: 2rem; line-height: 1.05; }
  #mgx-simulador .mgxsim-trinca { gap: 0.375rem; }
  #mgx-simulador .mgxsim-trinca__item { padding: 0.375rem 0.375rem 0.4375rem; }
  #mgx-simulador .mgxsim-trinca__valor { font-size: 1rem; }

  /* a conta aberta volta INTEIRA: a nota (o que é GMV, as 4,33 semanas do
     mês, o valor de curso da conta de retorno) estava escondida no celular */
  #mgx-simulador .mgxsim-conta { padding: 0.625rem 0.75rem !important; gap: 0.25rem; }
  #mgx-simulador .mgxsim-conta__linha { font-size: 0.875rem; line-height: 1.45 !important; }
  #mgx-simulador .mgxsim-conta__nota { display: block; font-size: 0.875rem; line-height: 1.45; }
  #mgx-simulador .mgxsim__aviso { margin-block-start: 0.625rem; padding: 0.625rem 0.75rem !important; }
  #mgx-simulador .mgxsim__aviso-forte { font-size: 0.875rem; line-height: 1.45; }
}


/* ==========================================================================
   2. BÔNUS — #bonus

   Medido antes: 805px a 1440 e 1.091px a 390. O rótulo "Bônus 0X" era uma
   pílula numa linha só dela (33px por cartão) e o título da seção quebrava
   em duas linhas numa cabeça de 736px.
   Agora o rótulo corre NA MESMA LINHA do título ("Bônus 02 Banco de
   ganchos"), o título da seção cabe numa linha no desktop, e no tablet a
   grade vai a 3 colunas (destaque + 2 × 3).
   ========================================================================== */
#bonus { padding-block: var(--fecho-respiro); }
#bonus .mgxs__cabeca { max-inline-size: 72rem; }
#bonus .mgxbonus__grade { gap: 0.75rem; }
#bonus .mgxbonus__item {
  display: block;
  padding: 1.125rem 1.25rem 1.25rem;
  line-height: 1.3;
}
#bonus .mgxbonus__n {
  display: inline;
  margin-inline-end: 0.375rem;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ihub-azul-claro, #33B8FF);
}
#bonus .mgxbonus__item--destaque .mgxbonus__n { background: none; color: #D6F1FF; }
#bonus .mgxbonus__titulo { display: inline; font-size: 1.0625rem; line-height: 1.3; }
#bonus .mgxbonus__item--destaque .mgxbonus__titulo { font-size: 1.25rem; }
#bonus .mgxbonus__texto { margin-block-start: 0.5rem; font-size: 0.9375rem; line-height: 1.5; }

@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  #bonus .mgxbonus__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bonus .mgxbonus__item--destaque { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  #bonus .mgxs__cabeca { gap: 0.375rem; margin-block-end: 0.875rem; }
  #bonus .mgxs__sub { font-size: 0.9375rem; line-height: 1.4; }
  #bonus .mgxs__acao { margin-block-start: 0.875rem; }
}
@media (max-width: 37.49rem) {
  #bonus .mgxbonus__grade { gap: 0.375rem; }
  #bonus .mgxbonus__item--destaque { grid-column: 1 / -1; }
  #bonus .mgxbonus__item { padding: 0.625rem 0.625rem 0.6875rem; }
  #bonus .mgxbonus__titulo { font-size: 0.9375rem; line-height: 1.25; }
  #bonus .mgxbonus__item--destaque .mgxbonus__titulo { font-size: 1.0625rem; }
  #bonus .mgxbonus__texto { margin-block-start: 0.25rem; font-size: 0.875rem; line-height: 1.4; }
}


/* ==========================================================================
   3. OFERTA — .elementor-element-ebcb730 › #valor (o cartão) + comparativo

   Medido antes: 1.496px a 1440 e 1.399px a 390. O cartão tinha 130px de
   respiro lateral e 40px entre cada peça, tudo empilhado e centralizado.
   Composição nova:
   · Desktop: título na largura toda; embaixo, a lista do que entra (uma
     coluna) | o bloco de preço num painel próprio à direita.
   · "12x de" e "R$49,70" na mesma linha.
   · Celular: a barra decorativa do topo deixa de ocupar 40px de fluxo; a
     lista vai à largura inteira (antes presa em 299px) e o preço também.
   · Os rótulos laranja de pendência seguem com a faixa reservada embaixo de
     cada campo (margem de 1,6rem de mgx-enxuto.css e as margens daqui).
     Quando os dados entrarem, os rótulos somem e o cartão encolhe ~75px.
   · A seção tinha margem de baixo de -42px (da composição antiga, que
     encavalava na faixa diagonal da garantia). Com as telas, ela puxava a
     linha divisória seguinte para cima do comparativo: zerada.
   ========================================================================== */
.elementor-3386 .elementor-element.elementor-element-ebcb730 {
  padding-block: var(--fecho-respiro) !important;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --margin-bottom: 0px;
  margin-block-end: 0 !important;
}
.elementor-3386 .elementor-element.elementor-element-ebcb730 > .e-con-inner {
  padding-block: 0 !important;
  row-gap: 0 !important;
}

#valor {
  row-gap: 0 !important;
  column-gap: 0 !important;
}
/* barra decorativa: presa na borda de cima, fora do fluxo, em toda largura */
#valor > .elementor-element-8bdd209 {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  right: auto !important;
  translate: -50% 0;
  margin: 0 !important;
}
#valor > .elementor-element-dc12b0b,
#valor > .elementor-element-b662254,
#valor .elementor-element-9f693cc {
  --container-widget-width: 100%;
  width: 100%;
  max-width: none;
}
#valor > .elementor-element-dc12b0b > .elementor-widget-container { padding: 0; }
#valor .elementor-element-dc12b0b .elementor-heading-title { text-wrap: balance; }

/* a lista: ícone menor, texto de leitura, sem os 15px entre itens */
#valor > .elementor-element-b662254 { --e-icon-list-icon-size: 1.625rem; }
#valor .elementor-element-b662254 .elementor-icon-list-items { display: grid; row-gap: 0.5rem; }
#valor .elementor-element-b662254 .elementor-icon-list-item {
  align-items: flex-start;
  padding: 0;
  margin: 0;
}
#valor .elementor-element-b662254 .elementor-icon-list-text { font-size: 1rem; line-height: 1.45; }
#valor .elementor-element-b662254 .elementor-icon-list-icon { padding-inline-end: 0.5rem; }

/* o bloco de preço */
#valor > .elementor-element-c0b0ab7 { --container-widget-width: auto; width: auto; max-width: none; }
#valor .elementor-element-c0b0ab7 .elementor-heading-title { font-size: 1rem; line-height: 1.4; }
#valor > .elementor-element-75eb067 {
  --flex-direction: row;
  --flex-wrap: wrap;
  --justify-content: center;
  --align-items: baseline;
  --gap: 0.25rem 0.625rem;
  --row-gap: 0.25rem;
  --column-gap: 0.625rem;
  --margin-top: 0px;
  flex-wrap: wrap;
  margin-block-start: 0.25rem;
}
#valor .elementor-element-1e632b6,
#valor .elementor-element-28f19d6 { --container-widget-width: auto; width: auto; max-width: none; }
#valor .elementor-element-1e632b6 > .elementor-widget-container { margin: 0; }
#valor .elementor-element-1e632b6 .elementor-heading-title { font-size: 1.375rem; line-height: 1.1; }
#valor .elementor-element-28f19d6 .elementor-heading-title { font-size: 3.5rem !important; line-height: 1 !important; }
#valor .elementor-element-9f693cc { flex-basis: 100%; }
#valor .elementor-element-9f693cc .elementor-heading-title { font-size: 1.375rem; line-height: 1.2; }
#valor .elementor-element-9f693cc .mgx-preco__total { margin: 0.375rem auto 0; }
#valor > .elementor-element-2e07f0e { margin-block-start: 0.25rem; }

/* aviso da turma: o ponto vermelho anda com a primeira linha do texto (antes
   ficava preso na borda esquerda com o texto centralizado longe dele) */
#valor > .mgx-aviso-turma {
  display: block;
  max-inline-size: 26rem;
  margin: 1.75rem auto 0;
  text-align: center;
}
#valor .mgx-aviso-turma__ponto {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  vertical-align: 0.1em;
}

/* comparativo recolhido: encosta no cartão */
.elementor-3386 .elementor-element.elementor-element-ebcb730 .mgxcmp-sanfona { margin-block-start: 1.25rem; }

/* ---- desktop: título | lista + painel de preço ---------------------------- */
@media (min-width: 64rem) {
  #valor {
    --width: min(70rem, 100%) !important;
    width: min(70rem, 100%) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto auto 1fr;
    grid-template-areas:
      "titulo titulo"
      "lista  ."
      "lista  de"
      "lista  preco"
      "lista  botao"
      "lista  turma"
      "lista  .";
    column-gap: clamp(2rem, 4vw, 3.5rem) !important;
    align-items: start;
    padding: 2.5rem clamp(2rem, 4vw, 3.5rem) !important;
  }
  /* o painel do preço é o ::after do cartão, posto na grade atrás da coluna
     da direita (o ::after estava vazio; o ::before é do construtor) */
  #valor::after {
    content: "";
    grid-column: 2;
    grid-row: 2 / -1;
    align-self: stretch;
    z-index: -1;
    border-radius: 14px;
    border: 1px solid rgba(0, 167, 255, 0.22);
    background: linear-gradient(180deg, rgba(0, 167, 255, 0.10), rgba(0, 85, 145, 0.06) 60%, rgba(4, 12, 22, 0.4));
  }
  #valor > .elementor-element-dc12b0b { grid-area: titulo; text-align: left; margin-block-end: 1.75rem; }
  #valor > .elementor-element-b662254 { grid-area: lista; align-self: center; }
  #valor .elementor-element-b662254 .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); row-gap: 0.625rem; }
  #valor > .elementor-element-c0b0ab7 { grid-area: de; justify-self: center; margin-block-start: 1.5rem; }
  #valor > .elementor-element-75eb067 { grid-area: preco; margin-inline: 1.5rem; }
  #valor > .elementor-element-2e07f0e { grid-area: botao; justify-self: center; }
  #valor > .mgx-aviso-turma { grid-area: turma; margin: 1.75rem 1.5rem 1.5rem; justify-self: center; }
}

/* ---- tablet e celular: uma coluna ------------------------------------------ */
@media (max-width: 63.99rem) {
  #valor { padding: 1.75rem 1.125rem 1.5rem !important; }
  #valor > .elementor-element-dc12b0b { margin-block-end: 1.25rem; }
  #valor > .elementor-element-c0b0ab7 { margin-block-start: 1.5rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  #valor { padding-inline: 2rem !important; }
  #valor .elementor-element-b662254 .elementor-icon-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  #valor .elementor-element-b662254 .elementor-icon-list-item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  #valor { padding: 1.5rem 0.875rem 1.25rem !important; }
  #valor > .elementor-element-dc12b0b { margin-block-end: 1rem; }
  #valor > .elementor-element-b662254 { --e-icon-list-icon-size: 1.375rem; }
  #valor .elementor-element-b662254 .elementor-icon-list-items { row-gap: 0.375rem; }
  #valor .elementor-element-b662254 .elementor-icon-list-text { font-size: 0.875rem; line-height: 1.35; }
  #valor > .elementor-element-c0b0ab7 { margin-block-start: 1.125rem; }
  #valor .elementor-element-1e632b6 .elementor-heading-title { font-size: 1.25rem; }
  #valor .elementor-element-28f19d6 .elementor-heading-title { font-size: clamp(2.5rem, 12vw, 3rem) !important; }
  #valor .elementor-element-9f693cc .elementor-heading-title { font-size: 1.25rem; }
  #valor > .mgx-aviso-turma { margin-block-start: 1.5rem; font-size: 0.875rem; }
  .elementor-3386 .elementor-element.elementor-element-ebcb730 .mgxcmp-sanfona > summary {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.35;
  }
}


/* ==========================================================================
   4. GARANTIA — #garantia: vira faixa
   (divide a tela com as placas, logo abaixo)

   Medido antes: 410px a 1440 (texto em quatro blocos empilhados) e 394px
   a 390.
   Desktop: [7] | rótulo, título e frase | "sem formulário…" ao lado, atrás
   de um fio. Celular: o 7 ao lado do título, as duas frases embaixo.
   O "7" (.mgxgarantia__selo e o que tem dentro) NÃO é estilizado aqui: foi
   redesenhado como 7 tipográfico em outra folha.
   ========================================================================== */
#garantia { padding-block: var(--fecho-respiro) calc(var(--fecho-respiro) / 2); }
#garantia .mgxgarantia__cartao { padding: 1.25rem 1.75rem; column-gap: 1.75rem; }
#garantia .mgxgarantia__texto { gap: 0.5rem; }
#garantia .mgxs__selo { padding: 0.25rem 0.75rem; }

@media (min-width: 64rem) {
  #garantia .mgxgarantia__texto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    grid-template-areas:
      "rotulo como"
      "titulo como"
      "sub    como";
    column-gap: 2rem;
    align-items: center;
  }
  #garantia .mgxgarantia__texto > .mgxs__selo { grid-area: rotulo; }
  #garantia .mgxgarantia__texto > .mgxs__titulo { grid-area: titulo; }
  #garantia .mgxgarantia__texto > .mgxs__sub { grid-area: sub; }
  #garantia .mgxgarantia__como {
    grid-area: como;
    padding-inline-start: 2rem;
    border-inline-start: 1px solid rgba(0, 167, 255, 0.22);
  }
}
@media (max-width: 47.99rem) {
  #garantia .mgxgarantia__cartao { padding: 0.875rem; column-gap: 0.875rem; row-gap: 0.625rem; }
  #garantia .mgxgarantia__texto > .mgxs__sub { font-size: 0.9375rem; line-height: 1.45; }
  #garantia .mgxgarantia__como { font-size: 0.875rem; line-height: 1.45; }
}


/* ==========================================================================
   5. PLACAS — .elementor-element-81852d0 › .mgx-placas
   (divide a tela com a garantia, logo acima)

   Medido antes: 589px a 1440 e 685px a 390. A arte tem as placas só entre
   9% e 64% da altura; de 86% para baixo a máscara já deixava tudo
   transparente — era altura vazia. A arte agora é recortada (object-fit)
   entre 6% e 80%, com a mesma luz azul embaixo.
   Os cinco degraus viram uma régua de uma linha: número grande em cima,
   unidade embaixo (antes 3 + 2 no desktop e 2 + 2 + 1 no celular).
   Texto | arte lado a lado já no tablet.
   ========================================================================== */
.elementor-element-81852d0 .mgx-placas {
  padding-block: calc(var(--fecho-respiro) / 2) var(--fecho-respiro);
  row-gap: 1.25rem;
}
@media (min-width: 48rem) {
  .elementor-element-81852d0 .mgx-placas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
  }
}
.elementor-element-81852d0 .mgx-placas__titulo { margin-block-end: 0.625rem; max-inline-size: 20ch; }
.elementor-element-81852d0 .mgx-placas__texto {
  margin-block-end: 1.125rem;
  font-size: var(--c-sub);
  line-height: 1.55;
}
.elementor-element-81852d0 .mgx-placas__degraus {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
  max-inline-size: 34rem;
}
/* cada palavra numa linha: o espaço largo força a quebra; o espaço no fim
   da linha é descartado, então nada estoura */
.elementor-element-81852d0 .mgx-placas__degraus li {
  padding: 0.5rem 0.25rem 0.5625rem;
  word-spacing: 8rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.15;
  color: #AEB9C4;
  border-color: rgba(0, 167, 255, 0.18);
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.08), rgba(0, 85, 145, 0.04));
}
.elementor-element-81852d0 .mgx-placas__degraus li::first-line {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
}
.elementor-element-81852d0 .mgx-placas__arte img {
  aspect-ratio: 3509 / 1943;
  object-fit: cover;
  object-position: 50% 23%;
  -webkit-mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%);
}
@media (max-width: 47.99rem) {
  .elementor-element-81852d0 .mgx-placas { row-gap: 1rem; }
  .elementor-element-81852d0 .mgx-placas__texto { font-size: 0.9375rem; line-height: 1.45; margin-block-end: 0.875rem; }
  .elementor-element-81852d0 .mgx-placas__degraus li { padding-inline: 0.125rem; }
}


/* ==========================================================================
   6. QUEM ESTÁ POR TRÁS — #sobre

   Medido antes: 443px a 1440 (o vídeo 16:9 de 574px ditava a altura) e
   580px a 390. O vídeo fica um pouco mais estreito que o texto, e o rótulo
   de pendência do vídeo desce para a base do vão — antes o botão de play
   ficava em cima dele.
   ========================================================================== */
#sobre { padding-block: var(--fecho-respiro); }
@media (min-width: 64rem) {
  #sobre .mgxsobre__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
#sobre .mgxsobre__texto { gap: 0.75rem; }
#sobre .mgxsobre__fatos { gap: 0.375rem; }
#sobre .mgx-slot-video {
  place-items: end center;
  padding-block-end: 0.75rem;
}
@media (max-width: 47.99rem) {
  #sobre .mgxs__sub { font-size: 0.9375rem; line-height: 1.5; }
  #sobre .mgxsobre__grade { row-gap: 1.25rem; }
}


/* ==========================================================================
   7. PERGUNTAS — .elementor-element-49d57cc › #mgx-perguntas

   Medido antes: 56px de respiro do contêiner + 83px da seção antes do
   título, e 83px depois do botão "ver mais". Cabeçalho empilhado (177px).
   Só a seção de perguntas é mexida aqui: o vão até a chamada final, a
   chamada e o rodapé estão sendo refeitos em outra frente.
   ========================================================================== */
.elementor-3386 .elementor-element.elementor-element-49d57cc > .e-con-inner {
  padding-block-start: 0 !important;
}
#mgx-perguntas { padding-block: var(--fecho-respiro) 0; }
#mgx-perguntas .mgxfaq__topo { gap: 0.625rem; margin-block-end: var(--c-cabeca); }
#mgx-perguntas .mgxfaq__titulo { max-inline-size: 18ch; }
#mgx-perguntas .mgxfaq__linhafina { font-size: var(--c-sub); line-height: 1.55; }
#mgx-perguntas .mgxfaq-item__p { min-block-size: 3rem; padding-block: 0.625rem; }

@media (min-width: 64rem) {
  #mgx-perguntas .mgxfaq__topo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: end;
  }
}
@media (max-width: 47.99rem) {
  #mgx-perguntas { --mgxfaq-vao: 0.5rem; padding-inline: 0; }
  #mgx-perguntas .mgxfaq__linhafina { font-size: 0.9375rem; line-height: 1.45; }
  #mgx-perguntas .mgxfaq-item__p {
    min-block-size: 2.75rem;
    padding: 0.5rem 0.875rem 0.5rem 1rem;
    gap: 0.625rem;
  }
  #mgx-perguntas .mgxfaq-item__txt { font-size: 0.9375rem; line-height: 1.3; }
}