/* ==========================================================================
   O QUE VOCÊ RECEBE — mostrar o produto, não descrever (23/09/2026)

   O dono reprovou os seis cartões iguais (ícone + título + texto): "cara de
   feito por IA". Cada entrega agora aparece como o ARTEFATO de verdade, em
   miniatura: a live de venda num celular, a agenda das calls, a planilha do
   catálogo, a trilha com progresso, a conversa da comunidade e a linha do
   tempo do roteiro de 15 s.

   Referências medidas no navegador sem janela (9444), 23/09/2026:
   · Remessa (remessa-blush.vercel.app, seção "Recursos"): bento de larguras
     2/3 + 1/3, cartão #0E0E11 com borda branca a 8%, raio 22px, respiro de
     25,6px, fio de luz de 1px no topo (gradiente que some nas pontas, 55%),
     título 22px peso 400, apoio 14/22,4px. Cada cartão carrega um pedaço da
     interface, não um ícone.
   · Linear (linear.app): a interface real é a protagonista; texto mínimo;
     rótulo em mono; divisória fina em vez de caixa.
   · Apple (apple.com/br/ios): o aparelho grande dentro do bloco, a tela
     falando por si.
   O que nenhuma delas tem e esta seção tem: um produto costura as peças — o
   sérum da live é a 1ª linha do catálogo, a garrafa do "teste do gelo" é o
   vídeo do roteiro e a resposta da comunidade fala do gancho de 3 s.

   Composição:
     < 768      celular: 2 colunas 45/55 — o aparelho à esquerda na altura
                de três itens; calls, trilha e roteiro ao lado; comunidade e
                catálogo embaixo, na mesma divisão
     768–1023   a mesma lógica, com os artefatos inteiros (36/64)
     ≥ 1024     grade de 12 colunas: aparelho nas colunas 1–4, da altura da
                seção; título e mosaico nas colunas 5–12 (8 · 5+3 · 4+4)
     altura ≤ 896px (notebook com a barra do navegador): menos ar em volta
   Os artefatos se ajustam pela largura do PRÓPRIO cartão (container query),
   não pela da tela: o mesmo cartão serve estreito ao lado do aparelho e
   largo no mosaico.

   Movimento (só transform e opacity; tudo parado com menos movimento e fora
   da tela): comentários sobem, espectadores e vendidos mudam (JS), corações
   sobem, o módulo em andamento tem luz andando na barra (fundo animado), a
   agulha do roteiro percorre os 15 s e a trilha enche.
   ========================================================================== */

/* contador inteiro do relógio do roteiro (0:00 → 0:15) */
@property --mgxkit-seg {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

/* ---- tokens da seção ------------------------------------------------------ */
.mgxs.mgxkit {
  /* respiro: 20px no celular, 52px no desktop (a régua comum dá 40–60) */
  --c-respiro: clamp(1.25rem, 3.6vw, 3.25rem);
  --kit-vao: 0.5rem;
  --kit-raio: 14px;
  --kit-pad: 0.625rem 0.6875rem 0.6875rem;
  --kit-sup: #060B12;
  --kit-borda: rgba(255, 255, 255, 0.075);
  --kit-linha: rgba(255, 255, 255, 0.07);
  --kit-forte: #F2F5F8;
  --kit-texto: #C9D3DC;
  --kit-apoio: #8FA0B0;
  --kit-mudo: #6E7F90;
  --kit-azul: var(--ihub-azul, #00A7FF);
  --kit-azul-claro: var(--ihub-azul-claro, #33B8FF);
  --kit-vermelho: var(--ihub-vermelho, #FF192A);
  --kit-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --kit-sans: 'Outfit', system-ui, sans-serif;
  --kit-titulo: 'Montserrat', 'Outfit', sans-serif;
}

/* ---- grade: celular primeiro ---------------------------------------------- */
.mgxkit .mgxkit__grade {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-areas:
    "cab   cab"
    "live  calls"
    "live  trilhas"
    "live  video"
    "comu  cat";
  gap: var(--kit-vao);
}
/* a lista some da caixa (mantém a semântica pelo role) para os itens
   entrarem direto na grade da seção */
.mgxkit .mgxkit__lista { display: contents; list-style: none; margin: 0; padding: 0; }

.mgxkit .mgxkit__cabeca {
  grid-area: cab;
  margin: 0 0 0.375rem;
  max-inline-size: none;
  gap: 0.5rem;
  text-align: start;
  justify-items: start;
}
.mgxkit .mgxkit__cabeca .mgxs__sub { max-inline-size: 34rem; line-height: 1.45; }

.mgxkit .mgxkit__live            { grid-area: live; }
.mgxkit .mgxkit__item--calls     { grid-area: calls; }
.mgxkit .mgxkit__item--trilhas   { grid-area: trilhas; }
.mgxkit .mgxkit__item--video     { grid-area: video; }
.mgxkit .mgxkit__item--comunidade{ grid-area: comu; }
.mgxkit .mgxkit__item--catalogo  { grid-area: cat; }

/* ---- o aparelho da live ---------------------------------------------------- */
.mgxkit .mgxkit__live {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
  margin: 0;
  isolation: isolate;
  /* palco: o deslocamento ciano/rosa do logo do TikTok como luz atrás do
     aparelho (fundo pintado, sem caixa desfocada) */
  background:
    radial-gradient(44% 34% at 36% 36%, rgba(37, 244, 238, 0.17), transparent 72%),
    radial-gradient(44% 34% at 62% 60%, rgba(254, 44, 85, 0.17), transparent 72%);
}
.mgxkit .mgxkit__cel { --cel-w: 100%; max-inline-size: 100%; }
.mgxkit .mgxkit__cel .cel__moldura { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55)); }
.mgxkit .mgxkit__legenda {
  justify-self: stretch;
  text-align: center;
  /* o tema pinta todo figcaption em itálico, #333, 16px */
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.mgxkit .mgxkit__legenda .mgxkit__texto { display: none; }

/* ---- o cartão ------------------------------------------------------------- */
.mgxkit .mgxkit__item {
  position: relative;
  container: mgxkit-item / inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  min-inline-size: 0;
  padding: var(--kit-pad);
  border: 1px solid var(--kit-borda);
  border-radius: var(--kit-raio);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 167, 255, 0.085), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    var(--kit-sup);
  color: var(--kit-texto);
  isolation: isolate;
  transition: border-color 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}
/* fio de luz de 1px no topo, que some nas pontas (medido na Remessa) */
.mgxkit .mgxkit__item::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 14%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--kit-azul-claro), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.mgxkit .mgxkit__titulo {
  margin: 0;
  font-family: var(--kit-titulo);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--kit-forte);
  text-wrap: balance;
}
.mgxkit .mgxkit__texto {
  margin: 0.25rem 0 0;
  font-family: var(--kit-sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kit-apoio);
  text-wrap: balance;
}
/* no celular o artefato fala pelo cartão: o apoio some, o título fica */
.mgxkit .mgxkit__item .mgxkit__texto { display: none; }

.mgxkit .mgxkit__exemplo {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font: 500 0.65625rem/1.5 var(--kit-mono);
  color: var(--kit-apoio);
  white-space: nowrap;
}
.mgxkit .mgxkit__item > .mgxkit__exemplo {
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-end: 0.6875rem;
}

/* ==========================================================================
   2. CALLS — a semana
   ========================================================================== */
.mgxkit .mgxkit__semana {
  container: mgxkit-semana / inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgxkit .mgxkit__dia {
  display: grid;
  gap: 0.125rem;
  align-content: center;
  min-inline-size: 0;
  padding: 0.4375rem 0.5rem;
  border: 1px solid var(--kit-linha);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.mgxkit .mgxkit__dia span {
  font: 500 0.6875rem/1.2 var(--kit-mono);
  color: var(--kit-apoio);
  white-space: nowrap;
}
.mgxkit .mgxkit__dia span em { font-style: normal; color: var(--kit-forte); }
.mgxkit .mgxkit__dia b {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font: 500 0.75rem/1.25 var(--kit-sans);
  color: var(--kit-texto);
  white-space: nowrap;
}
.mgxkit .mgxkit__dia--feito b { color: var(--kit-mudo); }
.mgxkit .mgxkit__dia--feito b::before {
  content: "";
  flex: none;
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  background: var(--kit-azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mgxkit .mgxkit__dia--hoje {
  border-color: rgba(255, 25, 42, 0.5);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 25, 42, 0.16), transparent 70%),
    rgba(255, 25, 42, 0.05);
}
.mgxkit .mgxkit__dia--hoje b { color: #fff; font-weight: 600; }
.mgxkit .mgxkit__ponto {
  flex: none;
  inline-size: 0.4375rem;
  block-size: 0.4375rem;
  border-radius: 50%;
  background: var(--kit-vermelho);
  box-shadow: 0 0 0 3px rgba(255, 25, 42, 0.2);
}
/* três barras de áudio: a call está falando agora */
.mgxkit .mgxkit__onda {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 0.625rem;
  margin-inline-start: 0.125rem;
}
.mgxkit .mgxkit__onda i {
  display: block;
  inline-size: 3px;
  block-size: 100%;
  border-radius: 0;
  background: var(--kit-vermelho);
  transform-origin: 50% 100%;
  transform: scaleY(0.45);
}

/* ==========================================================================
   3. CATÁLOGO — a planilha
   ========================================================================== */
.mgxkit .mgxkit__tabela-caixa { min-inline-size: 0; }
.mgxkit .mgxkit__tabela {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--kit-sans);
  font-size: 0.75rem;
  color: var(--kit-texto);
}
.mgxkit .mgxkit__tabela { margin: 0; background: none; }
.mgxkit .mgxkit__tabela :is(th, td) { border: 0; background: none; line-height: 1.25; }
.mgxkit .mgxkit__tabela tbody tr:hover > :is(th, td) { background: none; }
.mgxkit .mgxkit__legenda-tabela { caption-side: top; padding: 0 0 0.375rem; text-align: start; }
.mgxkit .mgxkit__carimbo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font: 500 0.6875rem/1.4 var(--kit-mono);
  color: var(--kit-mudo);
}
.mgxkit .mgxkit__carimbo > span:first-child { display: inline-flex; align-items: center; gap: 0.3125rem; }
.mgxkit .mgxkit__carimbo > span:first-child::before {
  content: "";
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  background: var(--kit-azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 6.2A5.4 5.4 0 0 0 3.4 4.6M2.8 9.8a5.4 5.4 0 0 0 9.8 1.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M13.6 2.4v3.9H9.7M2.4 13.6V9.7h3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 6.2A5.4 5.4 0 0 0 3.4 4.6M2.8 9.8a5.4 5.4 0 0 0 9.8 1.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M13.6 2.4v3.9H9.7M2.4 13.6V9.7h3.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mgxkit .mgxkit__tabela thead th {
  padding: 0 0 0.3125rem;
  border-block-end: 1px solid var(--kit-linha);
  font: 500 0.65625rem/1.3 var(--kit-mono);
  color: var(--kit-mudo);
  text-align: start;
}
.mgxkit .mgxkit__tabela tbody tr { border-block-end: 1px solid var(--kit-linha); }
.mgxkit .mgxkit__tabela tbody tr:last-child { border-block-end: 0; }
.mgxkit .mgxkit__tabela tbody th,
.mgxkit .mgxkit__tabela td { padding: 0.375rem 0; vertical-align: middle; font-weight: 400; text-align: start; }
.mgxkit .mgxkit__tabela tbody th {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
}
.mgxkit .mgxkit__tabela tbody th img {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 7px;
  object-fit: cover;
  background: #E9EAEC;
}
.mgxkit .mgxkit__tabela tbody th span {
  display: grid;
  min-inline-size: 0;
  font-weight: 500;
  color: var(--kit-forte);
  line-height: 1.25;
}
.mgxkit .mgxkit__tabela tbody th small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: 500 0.625rem/1.3 var(--kit-mono);
  color: #FF7A93;
}
.mgxkit .mgxkit__tabela tbody th small::before {
  content: "";
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  border-radius: 50%;
  background: var(--tt-rosa, #FE2C55);
}
/* comissão: número em mono, azul */
.mgxkit .mgxkit__tabela td:nth-of-type(1) {
  font: 600 0.75rem/1.2 var(--kit-mono);
  color: var(--kit-azul-claro);
  white-space: nowrap;
  padding-inline: 0.5rem;
}
/* ângulo: etiqueta */
.mgxkit .mgxkit__tabela td:nth-of-type(2) { color: var(--kit-apoio); line-height: 1.25; }

/* ==========================================================================
   4. COMUNIDADE — a conversa
   ========================================================================== */
.mgxkit .mgxkit__conversa { display: grid; gap: 0.375rem; }
.mgxkit .mgxkit__balao {
  margin: 0;
  max-inline-size: 92%;
  padding: 0.4375rem 0.5625rem 0.3125rem;
  border-radius: 12px;
  font: 400 0.75rem/1.35 var(--kit-sans);
  text-wrap: pretty;
}
.mgxkit .mgxkit__balao time {
  display: block;
  margin-block-start: 0.125rem;
  font: 500 0.625rem/1.3 var(--kit-mono);
  text-align: end;
  opacity: 0.6;
}
.mgxkit .mgxkit__balao--pergunta {
  justify-self: start;
  border-end-start-radius: 4px;
  background: #141B24;
  color: #DCE4EA;
}
.mgxkit .mgxkit__balao--resposta {
  justify-self: end;
  border-end-end-radius: 4px;
  background: linear-gradient(160deg, #0A6DB3, var(--ihub-azul-profundo, #005591));
  color: #fff;
}

/* ==========================================================================
   5. TRILHAS — o progresso
   ========================================================================== */
.mgxkit .mgxkit__modulos { display: grid; margin: 0; padding: 0; list-style: none; }
.mgxkit .mgxkit__modulo {
  display: grid;
  grid-template-columns: 0.875rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.4375rem;
  padding-block: 0.25rem;
  font: 400 0.75rem/1.25 var(--kit-sans);
  color: var(--kit-apoio);
}
.mgxkit .mgxkit__modulo > i {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
}
.mgxkit .mgxkit__modulo > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgxkit .mgxkit__modulo > b { font: 500 0.65625rem/1.2 var(--kit-mono); color: var(--kit-mudo); }
.mgxkit .mgxkit__modulo--feito > span { color: var(--kit-texto); }
.mgxkit .mgxkit__modulo--feito > i {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.4l2.4 2.4 4.8-5' fill='none' stroke='%2300111E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--kit-azul);
}
.mgxkit .mgxkit__modulo--agora > span { color: #fff; font-weight: 600; }
.mgxkit .mgxkit__modulo--agora > b { color: var(--kit-azul-claro); }
/* anel com o quanto já foi feito (centro pintado com a cor do cartão, sem
   máscara: o fio da linha de etapas não aparece no furo) */
.mgxkit .mgxkit__modulo--agora > i {
  border: 0;
  background:
    radial-gradient(circle, var(--kit-sup) 0 3.1px, transparent 3.6px),
    conic-gradient(var(--kit-azul) calc(var(--feito, 0.5) * 1turn), rgba(255, 255, 255, 0.16) 0);
}
/* barra do módulo em andamento: a luz anda pelo FUNDO (sem caixa animada) */
.mgxkit .mgxkit__progresso {
  grid-column: 2 / -1;
  block-size: 3px;
  margin-block: 0.25rem 0.125rem;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70% 100%) -120% 0 / 40% 100% no-repeat,
    linear-gradient(90deg, var(--kit-azul) 0 calc(var(--feito, 0.5) * 100%), rgba(255, 255, 255, 0.09) 0);
}

/* ==========================================================================
   6. O VÍDEO QUE CONVERTE — a linha do tempo do editor
   ========================================================================== */
.mgxkit .mgxkit__roteiro { position: relative; display: grid; gap: 0.375rem; }
.mgxkit .mgxkit__trilha {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 3fr 9fr 3fr;
  gap: 2px;
  block-size: 1.875rem;
}
.mgxkit .mgxkit__corte {
  position: relative;
  border-radius: 5px;
  background: url('../images/tiktok/video-garrafa.jpg') 0 50% / auto 100% repeat-x;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* três enquadramentos do mesmo vídeo: o gelo (gancho), a garrafa inteira
   (prova) e a tampa (chamada) */
.mgxkit .mgxkit__corte--gancho  { background-size: auto 260%; background-position: 22% 66%; }
.mgxkit .mgxkit__corte--chamada { background-size: auto 180%; background-position: 70% 22%; }
/* o que já tocou fica azulado: a trilha enche */
.mgxkit .mgxkit__trilha::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(0, 167, 255, 0.28);
  mix-blend-mode: screen;
  transform-origin: 0 50%;
  transform: scaleX(0.47);
  pointer-events: none;
}
/* agulha: 2px que andam a largura da trilha em unidades do contêiner */
.mgxkit .mgxkit__agulha {
  position: absolute;
  inset-block: -0.25rem;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translateX(calc(47cqw - 1px));
  pointer-events: none;
}
.mgxkit .mgxkit__agulha::before {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  inline-size: 8px;
  block-size: 6px;
  border-radius: 2px 2px 4px 4px;
  background: #fff;
}
.mgxkit .mgxkit__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mgxkit .mgxkit__marcas li { display: grid; gap: 0.0625rem; min-inline-size: 0; }
.mgxkit .mgxkit__marcas b { font: 600 0.6875rem/1.25 var(--kit-sans); color: var(--kit-forte); }
.mgxkit .mgxkit__marcas span { display: none; font: 500 0.625rem/1.25 var(--kit-mono); color: var(--kit-mudo); }
/* cabeçalho do editor: o nome do clipe e o relógio */
.mgxkit .mgxkit__editor {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font: 500 0.625rem/1.2 var(--kit-mono);
  color: var(--kit-mudo);
}
.mgxkit .mgxkit__clipe { display: inline-flex; align-items: center; gap: 0.3125rem; min-inline-size: 0; white-space: nowrap; }
.mgxkit .mgxkit__clipe::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  border-block: 0.25rem solid transparent;
  border-inline-start: 0.375rem solid var(--kit-texto);
}
.mgxkit .mgxkit__tempo {
  --mgxkit-seg: 7;
  counter-reset: mgxkit-seg var(--mgxkit-seg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mgxkit .mgxkit__tempo::before { content: "0:" counter(mgxkit-seg, decimal-leading-zero) " / 0:15"; }

/* ==========================================================================
   ARTEFATOS PELA LARGURA DO CARTÃO
   ========================================================================== */
/* semana estreita (ao lado do aparelho): só o dia e o estado; sem horário
   (sem número, sem "exemplo") */
@container mgxkit-semana (max-width: 16rem) {
  .mgxkit .mgxkit__dia { justify-items: center; padding: 0.25rem 0.125rem; border-radius: 8px; gap: 0.125rem; }
  .mgxkit .mgxkit__dia span { font-size: 0.59375rem; }
  .mgxkit .mgxkit__dia span em { display: none; }
  .mgxkit .mgxkit__dia b { font-size: 0.59375rem; gap: 0.1875rem; }
  .mgxkit .mgxkit__dia--feito b { font-size: 0; }
  .mgxkit .mgxkit__dia--feito b::before { inline-size: 0.625rem; block-size: 0.625rem; }
  /* o próximo dia: um anel vazio no lugar do horário */
  .mgxkit .mgxkit__dia:last-child b { font-size: 0; }
  .mgxkit .mgxkit__dia:last-child b::before {
    content: "";
    inline-size: 0.5625rem;
    block-size: 0.5625rem;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
  }
  .mgxkit .mgxkit__onda { display: none; }
  .mgxkit .mgxkit__ponto { inline-size: 0.3125rem; block-size: 0.3125rem; box-shadow: 0 0 0 2px rgba(255, 25, 42, 0.2); }
}
/* catálogo estreito: o ângulo desce para baixo do nome */
@container mgxkit-item (max-width: 22rem) {
  .mgxkit .mgxkit__tabela thead { display: none; }
  .mgxkit .mgxkit__tabela tbody tr {
    display: grid;
    grid-template-columns: 1.625rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.4375rem;
    padding-block: 0.3125rem;
  }
  /* a célula do produto se desmonta: foto na coluna 1 (duas linhas), nome
     na linha 1 e o ângulo embaixo dele — o nome em 2 linhas empurra o
     ângulo em vez de passar por cima */
  .mgxkit .mgxkit__tabela tbody th { display: contents; }
  .mgxkit .mgxkit__tabela tbody th img { grid-column: 1; grid-row: 1 / 3; align-self: center; inline-size: 1.625rem; block-size: 1.625rem; border-radius: 6px; }
  .mgxkit .mgxkit__tabela tbody th span { grid-column: 2; grid-row: 1; font-size: 0.6875rem; }
  .mgxkit .mgxkit__carimbo { font-size: 0.625rem; }
  .mgxkit .mgxkit__longo { display: none; }
  .mgxkit .mgxkit__tabela td { padding: 0; }
  .mgxkit .mgxkit__tabela td:nth-of-type(1) { grid-column: 3; grid-row: 1 / 3; align-self: center; padding-inline: 0.25rem 0; font-size: 0.6875rem; }
  .mgxkit .mgxkit__tabela td:nth-of-type(2) { grid-column: 2; grid-row: 2; font-size: 0.625rem; color: var(--kit-mudo); }
  .mgxkit .mgxkit__tabela tbody th small { display: none; }
}
/* trilha estreita (ao lado do aparelho): vira uma linha de etapas —
   ✓ ✓ ◐ ○ ligadas por um fio — e embaixo só o módulo de agora */
@container mgxkit-item (max-width: 13rem) {
  .mgxkit .mgxkit__modulos {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0.375rem;
  }
  .mgxkit .mgxkit__modulos::before {
    content: "";
    position: absolute;
    inset-block-start: calc(0.4375rem - 0.75px);
    inset-inline: 12.5%;
    block-size: 1.5px;
    /* azul do 1º ao módulo de agora (2 de 3 trechos), cinza até o próximo */
    background: linear-gradient(90deg, var(--kit-azul) 0 66.667%, rgba(255, 255, 255, 0.16) 0);
  }
  .mgxkit .mgxkit__modulo { display: contents; }
  .mgxkit .mgxkit__modulo > i { grid-row: 1; justify-self: center; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--kit-sup); }
  .mgxkit .mgxkit__modulo:not(.mgxkit__modulo--feito):not(.mgxkit__modulo--agora) > i { background: var(--kit-sup); }
  .mgxkit .mgxkit__modulo > span,
  .mgxkit .mgxkit__modulo > b,
  .mgxkit .mgxkit__progresso { display: none; }
  .mgxkit .mgxkit__modulo--agora > span:not(.mgxkit__progresso) { display: block; grid-row: 2; grid-column: 1 / 4; font-size: 0.6875rem; }
  .mgxkit .mgxkit__modulo--agora > b { display: block; grid-row: 2; grid-column: 4; justify-self: end; align-self: center; }
}
/* roteiro largo: o tempo de cada corte embaixo do corte, na proporção */
@container mgxkit-item (min-width: 18rem) {
  .mgxkit .mgxkit__editor { display: flex; }
  .mgxkit .mgxkit__marcas { display: grid; grid-template-columns: 3fr 9fr 3fr; gap: 2px; }
  .mgxkit .mgxkit__marcas span { display: block; }
  .mgxkit .mgxkit__trilha { block-size: 2.5rem; }
}
@container mgxkit-item (max-width: 13rem) {
  .mgxkit .mgxkit__trilha { block-size: 1.5rem; }
  .mgxkit .mgxkit__roteiro { gap: 0.3125rem; }
}
/* calls estreita: colunas mais justas; sem horário à vista, sem "exemplo" */
@container mgxkit-item (max-width: 17rem) {
  .mgxkit .mgxkit__semana { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.1875rem; }
  .mgxkit .mgxkit__item--calls > .mgxkit__exemplo { display: none; }
}
/* semana média (desktop de 1024–1200): o dia feito vira só o ✓, o resto fica */
@container mgxkit-semana (min-width: 16rem) and (max-width: 22rem) {
  .mgxkit .mgxkit__dia { padding-inline: 0.4375rem; }
  .mgxkit .mgxkit__dia--feito b { font-size: 0; }
  .mgxkit .mgxkit__dia--feito b::before { inline-size: 0.75rem; block-size: 0.75rem; }
  .mgxkit .mgxkit__onda { display: none; }
}

/* ==========================================================================
   TABLET — 768 a 1023: a mesma lógica, artefatos inteiros
   ========================================================================== */
@media (min-width: 48rem) {
  .mgxs.mgxkit { --kit-vao: 0.75rem; --kit-raio: 16px; --kit-pad: 0.875rem 1rem 1rem; }
  .mgxkit .mgxkit__grade { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
  .mgxkit .mgxkit__cabeca { margin-block-end: 0.75rem; }
  .mgxkit .mgxkit__titulo { font-size: 0.9375rem; }
  .mgxkit .mgxkit__item .mgxkit__texto,
  .mgxkit .mgxkit__legenda .mgxkit__texto { display: block; }
  .mgxkit .mgxkit__legenda { text-align: start; }
  .mgxkit .mgxkit__item > .mgxkit__exemplo { inset-block-start: 0.875rem; inset-inline-end: 1rem; }
  .mgxkit .mgxkit__item--calls .mgxkit__cabeca-item { padding-inline-end: 4.5rem; }
  .mgxkit .mgxkit__tabela { font-size: 0.8125rem; }
  .mgxkit .mgxkit__balao { font-size: 0.8125rem; }
  .mgxkit .mgxkit__modulo { font-size: 0.8125rem; padding-block: 0.3125rem; }
}

/* ==========================================================================
   DESKTOP — 1024+: grade de 12 colunas
   aparelho 1–4 (da altura da seção) · título e mosaico 5–12
   ========================================================================== */
@media (min-width: 64rem) {
  .mgxs.mgxkit { --kit-vao: 1rem; --kit-raio: 18px; --kit-pad: 1.125rem 1.25rem 1.25rem; }
  .mgxkit .mgxkit__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    grid-template-rows: auto auto auto auto;
    column-gap: var(--kit-vao);
    row-gap: var(--kit-vao);
  }
  .mgxkit .mgxkit__live             { grid-column: 1 / 5;  grid-row: 1 / 5; align-content: center; justify-items: start; }
  .mgxkit .mgxkit__cabeca           { grid-column: 5 / 13; grid-row: 1; margin-block-end: 0.75rem; align-self: end; }
  .mgxkit .mgxkit__item--calls      { grid-column: 5 / 13; grid-row: 2; }
  .mgxkit .mgxkit__item--catalogo   { grid-column: 5 / 10; grid-row: 3; }
  .mgxkit .mgxkit__item--trilhas    { grid-column: 10 / 13; grid-row: 3; }
  .mgxkit .mgxkit__item--comunidade { grid-column: 5 / 9;  grid-row: 4; }
  .mgxkit .mgxkit__item--video      { grid-column: 9 / 13; grid-row: 4; }
  /* "tudo isto" não se separa no título largo */
  .mgxkit .mgxkit__junto { white-space: nowrap; }

  /* o aparelho cabe na altura da janela: tira o respiro da seção (2×60),
     a legenda e uma folga. A largura mora no figure para a legenda seguir. */
  .mgxkit .mgxkit__live { --live-w: min(100%, calc((100vh - 13rem) * 0.4923)); }
  .mgxkit .mgxkit__live { --live-w: min(100%, calc((100svh - 13rem) * 0.4923)); }
  .mgxkit .mgxkit__cel { --cel-w: var(--live-w); }
  .mgxkit .mgxkit__legenda { justify-self: start; inline-size: var(--live-w); max-inline-size: 100%; }
  .mgxkit .mgxkit__titulo { font-size: 1.0625rem; }

  /* calls: texto à esquerda, semana à direita e embaixo */
  .mgxkit .mgxkit__item--calls { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
  .mgxkit .mgxkit__item--calls .mgxkit__cabeca-item { flex: 0 1 19.5rem; align-self: flex-start; padding-inline-end: 0; }
  .mgxkit .mgxkit__item--calls .mgxkit__semana { flex: 1 1 0; margin-block-start: 1.5rem; }
}

/* ==========================================================================
   DESKTOP BAIXO (altura ≤ 896px: 1280×800, 1024×768, 1440×790 de um
   notebook com a barra do navegador): menos ar, mesmo conteúdo
   ========================================================================== */
@media (min-width: 64rem) and (max-height: 56rem) {
  .mgxs.mgxkit { --c-respiro: 2rem; --kit-vao: 0.625rem; --kit-pad: 0.875rem 1rem 1rem; }
  .mgxkit .mgxkit__cabeca { margin-block-end: 0.25rem; }
  .mgxkit .mgxkit__live { --live-w: min(100%, calc((100vh - 10rem) * 0.4923)); }
  .mgxkit .mgxkit__live { --live-w: min(100%, calc((100svh - 10rem) * 0.4923)); }
}

/* ==========================================================================
   CELULAR BAIXO (360×740 e afins): menos ar em volta, o conteúdo inteiro
   ========================================================================== */
@media (max-width: 47.99rem) and (max-height: 50rem) {
  .mgxs.mgxkit { --c-respiro: 1rem; --kit-vao: 0.4375rem; }
}

/* ==========================================================================
   A LIVE — interface do TikTok desenhada em DOM (tudo em cq, nos FILHOS da
   .cel__tela). --k aumenta a escala quando o aparelho fica pequeno.
   ========================================================================== */
.mgxkit .mgxlive {
  --k: 1;
  --rosa: var(--tt-rosa, #FE2C55);
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--tt-fonte, 'TikTok Sans', system-ui, sans-serif);
  font-size: calc(3.2cqw * var(--k));
  line-height: 1.25;
  color: #fff;
}
.mgxkit .mgxlive__fundo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 42% 30%;
}
/* véus de leitura em cima e embaixo */
.mgxkit .mgxlive::before,
.mgxkit .mgxlive::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  pointer-events: none;
}
.mgxkit .mgxlive::before { inset-block-start: 0; block-size: 24%; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); }
.mgxkit .mgxlive::after { inset-block-end: 0; block-size: 52%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.78)); }

.mgxkit .mgxlive .cel__status { z-index: 3; }
.mgxkit .mgxlive .cel__home { z-index: 3; }
.mgxkit .mgxlive .cel__exemplo { inset-block-start: 13.4cqh; inset-inline-end: 3cqw; font-size: calc(2.6cqw * var(--k)); }

/* topo: quem transmite · AO VIVO · espectadores */
.mgxkit .mgxlive__topo {
  position: absolute;
  z-index: 2;
  inset-block-start: 6.6cqh;
  inset-inline: 2.8cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6cqw;
}
.mgxkit .mgxlive__anfitriao {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  min-inline-size: 0;
  padding: 0.8cqw 0.9cqw 0.8cqw 0.8cqw;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}
.mgxkit .mgxlive__avatar {
  position: relative;
  flex: none;
  inline-size: calc(7.4cqw * var(--k));
  block-size: calc(7.4cqw * var(--k));
  border-radius: 50%;
  background: linear-gradient(140deg, var(--tt-ciano, #25F4EE), var(--rosa));
  overflow: hidden;
}
.mgxkit .mgxlive__avatar::after {
  content: "";
  position: absolute;
  inset: 18% 14% -8%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6.4' r='4.2'/%3E%3Cpath d='M1.6 20c.6-5 4-7.6 8.4-7.6s7.8 2.6 8.4 7.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6.4' r='4.2'/%3E%3Cpath d='M1.6 20c.6-5 4-7.6 8.4-7.6s7.8 2.6 8.4 7.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mgxkit .mgxlive__quem { display: grid; min-inline-size: 0; }
.mgxkit .mgxlive__quem b { font-size: calc(3cqw * var(--k)); font-weight: 700; white-space: nowrap; }
.mgxkit .mgxlive__quem small { font-size: calc(2.3cqw * var(--k)); font-weight: 400; opacity: 0.82; white-space: nowrap; }
.mgxkit .mgxlive__seguir {
  flex: none;
  padding: calc(1cqw * var(--k)) calc(2.3cqw * var(--k));
  border-radius: 999px;
  background: var(--rosa);
  font-size: calc(2.6cqw * var(--k));
  font-weight: 700;
}
.mgxkit .mgxlive__sala { display: flex; align-items: center; gap: 1.2cqw; flex: none; }
.mgxkit .mgxlive__aovivo {
  padding: calc(0.7cqw * var(--k)) calc(1.6cqw * var(--k));
  border-radius: calc(1cqw * var(--k));
  background: var(--rosa);
  font-size: calc(2.5cqw * var(--k));
  font-weight: 800;
  line-height: 1.2;
}
.mgxkit .mgxlive__vendo {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: calc(0.7cqw * var(--k)) calc(1.8cqw * var(--k));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  font-size: calc(2.6cqw * var(--k));
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mgxkit .mgxlive__pessoa {
  inline-size: calc(2.5cqw * var(--k));
  block-size: calc(2.5cqw * var(--k));
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6' r='4'/%3E%3Cpath d='M2 19c.5-4.6 3.7-7.2 8-7.2s7.5 2.6 8 7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6' r='4'/%3E%3Cpath d='M2 19c.5-4.6 3.7-7.2 8-7.2s7.5 2.6 8 7.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* corações que sobem do canto */
.mgxkit .mgxlive__coracoes {
  position: absolute;
  z-index: 2;
  inset-inline-end: 3cqw;
  inset-block-end: 17cqh;
  inline-size: 12cqw;
  block-size: 30cqh;
  pointer-events: none;
}
.mgxkit .mgxlive__coracoes i {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 3cqw;
  inline-size: calc(6cqw * var(--k));
  block-size: calc(5.4cqw * var(--k));
  background: var(--rosa);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17.4 8.6 16.1C3.6 11.6.4 8.7.4 5.1.4 2.3 2.6.1 5.4.1c1.6 0 3.1.7 4.6 2 1.5-1.3 3-2 4.6-2 2.8 0 5 2.2 5 5 0 3.6-3.2 6.5-8.2 11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17.4 8.6 16.1C3.6 11.6.4 8.7.4 5.1.4 2.3 2.6.1 5.4.1c1.6 0 3.1.7 4.6 2 1.5-1.3 3-2 4.6-2 2.8 0 5 2.2 5 5 0 3.6-3.2 6.5-8.2 11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mgxkit .mgxlive__coracoes i:nth-child(2) { background: var(--tt-ciano, #25F4EE); inset-inline-start: 5cqw; }
.mgxkit .mgxlive__coracoes i:nth-child(3) { background: #fff; inset-inline-start: 1cqw; }

/* embaixo: produto fixado, comentários, barra */
.mgxkit .mgxlive__baixo {
  position: absolute;
  z-index: 2;
  inset-inline: 2.8cqw;
  inset-block-end: 3cqh;
  display: grid;
  gap: calc(2cqw * var(--k));
}
.mgxkit .mgxlive__produto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(1.8cqw * var(--k));
  inline-size: min(100%, calc(66cqw * var(--k)));
  padding: calc(1.5cqw * var(--k));
  border-radius: calc(2.2cqw * var(--k));
  background: #fff;
  color: #161823;
  box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, 0.3);
}
.mgxkit .mgxlive__foto {
  inline-size: calc(11cqw * var(--k));
  block-size: calc(11cqw * var(--k));
  border-radius: calc(1.3cqw * var(--k));
  object-fit: cover;
}
.mgxkit .mgxlive__info { display: grid; min-inline-size: 0; }
.mgxkit .mgxlive__nome {
  overflow: hidden;
  font-size: calc(2.5cqw * var(--k));
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mgxkit .mgxlive__preco {
  font-size: calc(3.6cqw * var(--k));
  font-weight: 800;
  line-height: 1.15;
  color: var(--rosa);
  white-space: nowrap;
}
.mgxkit .mgxlive__preco small { font-size: 0.66em; font-weight: 700; margin-inline-end: 0.12em; }
.mgxkit .mgxlive__vendidos {
  font-size: calc(2.1cqw * var(--k));
  color: rgba(22, 24, 35, 0.55);
  white-space: nowrap;
}
.mgxkit .mgxlive__vendidos > span { display: inline-block; font-weight: 700; color: #161823; }
.mgxkit .mgxlive__comprar {
  padding: calc(1.5cqw * var(--k)) calc(2.4cqw * var(--k));
  border-radius: calc(1.2cqw * var(--k));
  background: var(--rosa);
  color: #fff;
  font-size: calc(2.7cqw * var(--k));
  font-weight: 700;
  white-space: nowrap;
}

/* comentários: linhas de altura fixa, posição por índice (--i) — o script
   só muda o índice; a subida é transição de transform */
.mgxkit .mgxlive__comentarios {
  --lin: calc(6.2cqw * var(--k));
  --vao: calc(1.2cqw * var(--k));
  --n: 4;
  position: relative;
  inline-size: 80cqw;
  block-size: calc(var(--n) * var(--lin) + (var(--n) - 1) * var(--vao));
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-mask-image: linear-gradient(transparent, #000 34%);
          mask-image: linear-gradient(transparent, #000 34%);
}
.mgxkit .mgxlive__comentarios li {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: calc(1.3cqw * var(--k));
  max-inline-size: 100%;
  block-size: var(--lin);
  padding-inline: calc(0.7cqw * var(--k)) calc(2.2cqw * var(--k));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-size: calc(2.9cqw * var(--k));
  font-weight: 500;
  white-space: nowrap;
  transform: translateY(calc(var(--i, 0) * -1 * (var(--lin) + var(--vao))));
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease;
}
.mgxkit .mgxlive__comentarios li[data-saindo] { opacity: 0; }
.mgxkit .mgxlive__comentarios li.mgxlive__novo { opacity: 0; transform: translateY(calc(var(--lin) * 0.7)) scale(0.94); transform-origin: 0 100%; }
.mgxkit .mgxlive__comentarios li > i {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(4.6cqw * var(--k));
  block-size: calc(4.6cqw * var(--k));
  border-radius: 50%;
  background: var(--av, #555);
  font-size: calc(2.3cqw * var(--k));
  font-style: normal;
  font-weight: 700;
}
/* a compra ganha o laranja-amarelo da cesta */
.mgxkit .mgxlive__comentarios li.mgxlive__compra { background: rgba(255, 176, 32, 0.34); }
.mgxkit .mgxlive__comentarios li.mgxlive__compra::after {
  content: "";
  inline-size: calc(2.6cqw * var(--k));
  block-size: calc(2.6cqw * var(--k));
  background: #FFC21A;
  -webkit-mask: var(--mgxlive-sacola) center / contain no-repeat;
          mask: var(--mgxlive-sacola) center / contain no-repeat;
}

.mgxkit .mgxlive__barra { display: flex; align-items: center; gap: calc(1.6cqw * var(--k)); }
.mgxkit .mgxlive {
  --mgxlive-sacola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 6.2V5a3.8 3.8 0 0 1 7.6 0v1.2h2.6c.6 0 1 .4 1.1 1l.9 9.6c.1 1-.7 1.9-1.7 1.9H3.3c-1 0-1.8-.9-1.7-1.9l.9-9.6c.1-.6.5-1 1.1-1zm1.8 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E");
}
.mgxkit .mgxlive__cesta,
.mgxkit .mgxlive__icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(8.6cqw * var(--k));
  block-size: calc(8.6cqw * var(--k));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.36);
}
.mgxkit .mgxlive__cesta > i {
  inline-size: 55%;
  block-size: 55%;
  background: #FFC21A;
  -webkit-mask: var(--mgxlive-sacola) center / contain no-repeat;
          mask: var(--mgxlive-sacola) center / contain no-repeat;
}
.mgxkit .mgxlive__cesta > b {
  position: absolute;
  inset-block-start: -0.6cqw;
  inset-inline-end: -0.8cqw;
  display: grid;
  place-items: center;
  min-inline-size: calc(3.8cqw * var(--k));
  block-size: calc(3.8cqw * var(--k));
  border-radius: 999px;
  background: var(--rosa);
  font-size: calc(2.2cqw * var(--k));
  font-weight: 700;
}
.mgxkit .mgxlive__campo {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  block-size: calc(8.6cqw * var(--k));
  padding-inline: calc(3cqw * var(--k));
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  font-size: calc(2.7cqw * var(--k));
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mgxkit .mgxlive__icone::before {
  content: "";
  inline-size: 50%;
  block-size: 50%;
  background: #fff;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}
.mgxkit .mgxlive__icone--presente {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 7.2h16v3.4H2zM3.2 10.6h13.6V18H3.2z'/%3E%3Cpath d='M10 7.2C8.6 4 5.2 3.2 5.2 5.4c0 1.2 1.6 1.8 4.8 1.8zm0 0c1.4-3.2 4.8-4 4.8-1.8 0 1.2-1.6 1.8-4.8 1.8z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.mgxkit .mgxlive__icone--enviar {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.4 2.6 19 9.8l-7.6 7.2v-4.2c-4.4 0-7.4 1.3-9.6 4.5.6-5.2 3.4-8.6 9.6-9.4z'/%3E%3C/svg%3E");
}

/* aparelho pequeno (ao lado dos cartões no celular): letra maior, menos peças */
@container (max-width: 12.5rem) {
  .mgxkit .mgxlive { --k: 1.6; }
  .mgxkit .mgxlive__quem small,
  .mgxkit .mgxlive__seguir,
  .mgxkit .mgxlive__vendo .mgxlive__pessoa,
  .mgxkit .mgxlive__icone--enviar,
  .mgxkit .mgxlive__vendidos,
  .mgxkit .mgxlive__coracoes i:nth-child(3) { display: none; }
  .mgxkit .mgxlive__comentarios { --n: 3; inline-size: 100%; }
  .mgxkit .mgxlive__produto { inline-size: 100%; }
  .mgxkit .mgxlive__topo { inset-block-start: 6.3cqh; }
  .mgxkit .mgxlive .cel__exemplo { inset-block-start: 12.6cqh; font-size: calc(2.2cqw * var(--k)); padding: 0.4cqw 1.6cqw; }
  .mgxkit .mgxlive__anfitriao { padding: 0.6cqw 2.2cqw 0.6cqw 0.6cqw; }
}
@container (min-width: 12.5rem) and (max-width: 17rem) {
  .mgxkit .mgxlive { --k: 1.25; }
  .mgxkit .mgxlive__quem small,
  .mgxkit .mgxlive__icone--enviar { display: none; }
  .mgxkit .mgxlive__produto { inline-size: 100%; }
  .mgxkit .mgxlive__comentarios { inline-size: 92cqw; }
}

/* ==========================================================================
   MOVIMENTO — só com a seção na tela (classe posta pelo script; sem script,
   roda sempre) e nunca com "menos movimento"
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mgxkit .mgxkit__onda i { animation: mgxkit-onda 0.9s ease-in-out infinite alternate; }
  .mgxkit .mgxkit__onda i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
  .mgxkit .mgxkit__onda i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }

  .mgxkit .mgxkit__progresso { animation: mgxkit-luz 3.2s cubic-bezier(.6, 0, .2, 1) infinite; }

  .mgxkit .mgxkit__trilha::after { animation: mgxkit-enche 15s linear infinite; }
  .mgxkit .mgxkit__agulha { animation: mgxkit-agulha 15s linear infinite; }
  .mgxkit .mgxkit__tempo { animation: mgxkit-relogio 15s linear infinite; }
  .mgxkit .mgxkit__marca--gancho  { animation: mgxkit-marca-gancho 15s linear infinite; }
  .mgxkit .mgxkit__marca--prova   { animation: mgxkit-marca-prova 15s linear infinite; }
  .mgxkit .mgxkit__marca--chamada { animation: mgxkit-marca-chamada 15s linear infinite; }

  .mgxkit .mgxlive__coracoes i { animation: mgxlive-coracao 3.6s cubic-bezier(.3, .6, .4, 1) infinite; }
  .mgxkit .mgxlive__coracoes i:nth-child(2) { animation-delay: -1.2s; animation-duration: 4.1s; }
  .mgxkit .mgxlive__coracoes i:nth-child(3) { animation-delay: -2.5s; animation-duration: 3.2s; }

  /* com o script: parado fora da tela */
  /* (pseudo-elemento não entra em :is() — invalidaria a regra inteira) */
  html.mgxkit-js .mgxkit:not(.mgxkit--em-cena) :is(.mgxkit__onda i, .mgxkit__progresso,
    .mgxkit__agulha, .mgxkit__tempo, .mgxkit__marcas li, .mgxlive__coracoes i) { animation-play-state: paused; }
  html.mgxkit-js .mgxkit:not(.mgxkit--em-cena) .mgxkit__trilha::after { animation-play-state: paused; }
}
@keyframes mgxkit-onda { to { transform: scaleY(1); } }
@keyframes mgxkit-luz {
  0%, 35% { background-position: -120% 0, 0 0; }
  100%    { background-position: 260% 0, 0 0; }
}
@keyframes mgxkit-enche  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* a cabeça da agulha tem 8px: o percurso vai de 3px a 100% − 5px para ela
   nunca sair da trilha (nada entra na área de rolagem) */
@keyframes mgxkit-agulha { from { transform: translateX(3px); } to { transform: translateX(calc(100cqw - 5px)); } }
@keyframes mgxkit-relogio { from { --mgxkit-seg: 0; } to { --mgxkit-seg: 15; } }
@keyframes mgxkit-marca-gancho  { 0%, 19%  { opacity: 1; } 21%, 100% { opacity: 0.45; } }
@keyframes mgxkit-marca-prova   { 0%, 19%  { opacity: 0.45; } 21%, 79% { opacity: 1; } 81%, 100% { opacity: 0.45; } }
@keyframes mgxkit-marca-chamada { 0%, 79%  { opacity: 0.45; } 81%, 100% { opacity: 1; } }
@keyframes mgxlive-coracao {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  12%  { opacity: 1; transform: translate(-1cqw, -3cqh) scale(1); }
  100% { opacity: 0; transform: translate(2.5cqw, -27cqh) scale(0.85) rotate(14deg); }
}
/* o número que muda dá um pulo curto */
.mgxkit .mgxlive__pulo { animation: mgxlive-pulo 480ms cubic-bezier(.22, 1, .36, 1); }
@keyframes mgxlive-pulo { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ---- revelação ao entrar (o script marca; sem script tudo já aparece) ---- */
html.mgxkit-js .mgxkit [data-mgxkit-revela] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 480ms cubic-bezier(.22, 1, .36, 1) var(--mgxkit-atraso, 0ms),
    transform 560ms cubic-bezier(.22, 1, .36, 1) var(--mgxkit-atraso, 0ms),
    border-color 260ms ease;
}
html.mgxkit-js .mgxkit [data-mgxkit-revela].mgxkit-visivel { opacity: 1; transform: none; }
html.mgxkit-js .mgxkit .mgxkit__item.mgxkit-pronto {
  transition: border-color 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .mgxkit .mgxkit__item:hover { border-color: rgba(51, 184, 255, 0.32); }
  html.mgxkit-js .mgxkit .mgxkit__item.mgxkit-pronto:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  html.mgxkit-js .mgxkit [data-mgxkit-revela] { opacity: 1; transform: none; transition: none; }
  .mgxkit .mgxlive__comentarios li { transition: none; }
  .mgxkit .mgxlive__coracoes { display: none; }
  .mgxkit .mgxlive__pulo { animation: none; }
}