/* ==========================================================================
   MGX — marca visível do que ainda espera dado real

   A página é um clone estrutural com a identidade trocada. O que ainda era
   material ou endereço da marca de ORIGEM saiu, e o lugar ficou MARCADO em vez
   de preenchido por invenção. Esta folha faz a marca aparecer: pendência que
   só existe num arquivo de texto é pendência que vai ao ar sem ninguém ver.

   CORRIGIDO EM 23/09/2026. A primeira versão punha a etiqueta ACIMA do
   elemento (`inset-block-end: 100%`) e deixava o vão da ilustração com altura
   zero. Resultado medido na tela: as três etiquetas caíam em cima do texto do
   cartão ("Não que…", "dá para…") e o cartão perdia a composição, porque os
   três blocos que saíram sustentavam a coluna. Marcar não pode estragar.

   Agora: a etiqueta vive DENTRO da própria caixa do vão, e o vão guarda o
   tamanho do que saiu. Em link e título, onde não há caixa para ocupar, a
   etiqueta fica ABAIXO e à direita — nunca sobre a linha de cima.

   Some sozinha quando o dado entra (o mgx-destinos.js tira o atributo assim
   que o botão ganha destino). Para desligar tudo depois de preenchido,
   apague este arquivo e a linha que o carrega no index.html.
   ========================================================================== */

/* ------------------------------------------------------------------ o vão
   Um vão é um lugar de conteúdo que ainda não chegou: ele OCUPA espaço, com a
   proporção do que vai entrar, para o resto da página não se mexer depois. */
.mgx-slot-ilustra,
.mgx-slot-video,
#mgx-slot-simulador {
  display: grid;
  place-items: center;
  inline-size: 100%;
  border-radius: 0.875rem;
  border: 1px dashed rgba(0, 167, 255, 0.4);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.022) 0 10px,
      transparent 10px 20px);
  isolation: isolate;
}

/* proporção de cada tipo, medida no que saiu do lugar */
.mgx-slot-ilustra { aspect-ratio: 270 / 94; max-inline-size: 270px; }
.mgx-slot-video   { aspect-ratio: 16 / 9;   max-inline-size: 100%; }
#mgx-slot-simulador {
  min-block-size: 15rem;
  margin-block: clamp(2rem, 5vw, 3.5rem);
  margin-inline: auto;
  inline-size: min(100% - 2.5rem, 68rem);
}

/* a etiqueta do vão mora dentro dele: não há o que cobrir */
.mgx-slot-ilustra::after,
.mgx-slot-video::after,
#mgx-slot-simulador::after {
  content: 'a preencher: ' attr(data-preencher);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight:600;
  line-height:1.1;
  text-align: center;
  color: #F59E0B;                    /* 8,6:1 sobre o preto do fundo */
  padding-inline: 0.75rem;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

/* ------------------------------------------ link e texto: marca discreta
   Aqui não há caixa para ocupar — o elemento já tem conteúdo. A marca é só um
   contorno e uma etiqueta ABAIXO, que nunca encosta na linha de cima. */
a[data-preencher],
span[data-preencher],
p[data-preencher],
s[data-preencher] {
  /* classe repetida no seletor não existe aqui, então a posição vai com
     !important: o construtor de página declara `position` nos botões dele e
     sem ancoragem a etiqueta se posiciona por um avô qualquer — foi assim
     que ela virou uma faixa âmbar de largura inteira embaixo do botão do
     WhatsApp, medido na tela em 23/09/2026. */
  position: relative !important;
  outline: 1px dashed rgba(245, 158, 11, 0.5);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

a[data-preencher]::after,
span[data-preencher]::after,
p[data-preencher]::after,
s[data-preencher]::after {
  content: attr(data-preencher);
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: 40;

  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight:600;
  line-height:1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;

  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  background: #F59E0B;
  color: #1C1917;                    /* 10,9:1 sobre o âmbar */
  pointer-events: none;              /* nunca rouba o clique do botão */

  /* etiqueta é etiqueta: tem a largura do próprio texto e nunca vira faixa */
  inline-size: max-content;
  max-inline-size: 14rem;
  block-size: auto;
  min-block-size: 0;
  display: inline-block;
  box-sizing: content-box;
}

/* ------------------------------------------------------------------ preço
   O total parcelado tem de aparecer: 12 × R$ 49,70 = R$ 596,40, R$ 99,40 (20%)
   acima do à vista. O Código de Defesa do Consumidor (art. 52) manda mostrar o
   total e o acréscimo, não escondê-los no checkout. */
.mgx-preco__total {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  line-height:1.35;
  color: #A1A1AA;
  margin: 0.6rem 0 0;
  max-inline-size: 34ch;
}
.mgx-preco__total b { color: #fff; font-weight:600; }

/* Menos movimento não muda nada aqui — a marca é estática de propósito. */