/* ==========================================================================
   COMO FUNCIONA — três celulares, do catálogo à comissão (23/09/2026)

   Substitui "Você se reconhece em alguma dessas situações?". O dono: "tirar a
   cara de feito por IA, cores e imagens do TikTok Shop, referências reais,
   celulares, curto e preciso". A seção divide a 2ª tela com a faixa
   #categorias (164px no desktop, 141–161px no celular) e tem de CABER no resto.

   Referências abertas antes de desenhar (navegador sem janela, 9444):
   · Remessa (remessa-blush.vercel.app): celular por cima do notebook, tela com
     poucos elementos e hierarquia grande — o padrão de acabamento aprovado.
   · Apple (apple.com/br/iphone e /ios): aparelhos em escala, título à esquerda
     com a ação à direita, controle de carrossel com a barra de progresso.
   · TikTok Shop Brasil — Academia seller-br ("Adição de produtos a vídeos
     curtos (cesta amarela)", 14/04/2025) e vídeos do @tiktokshopcreators.br:
     rótulos em PT-BR do Mercado de produtos ("Procurar produtos | Pesquisar",
     "Ganhe R$ X", "20% comissão", "Adicionar"), a cesta amarela no feed e a
     barra de baixo ("Início, Loja, +, Caixa de entrada, Perfil").

   Composição:
   · ≥ 768px: fileira com profundidade. O do meio é maior e fica na frente; os
     dos lados giram no eixo VERTICAL (rotateY), virados para o centro. Girar
     no plano (rotate) faria a borda do celular da frente cruzar a tela de trás
     na diagonal e partir palavras; no eixo vertical a faixa tapada é uma
     coluna reta da tela de trás, e cada tela foi desenhada para que essa
     coluna só tenha margem, borda de imagem ou ícone.
   · < 768px: um celular por vez no centro e os outros dois espiando atrás
     (leque), com a tela apagada; troca sozinho a cada 3,5 s (secao-como-
     funciona.js) e pelos três botões de passo.

   Dentro da tela, tudo em cqw/cqh e SÓ nos filhos da .cel__tela (cq escrito
   na própria tela resolve contra o contêiner de fora).
   ========================================================================== */

.mgxcf {
  --cf-ease: cubic-bezier(.22, 1, .36, 1);
  --cf-rosa: #FE2C55;                 /* rosa do TikTok (mgx-tiktok.css) */
  --cf-rosa-fundo: #FFEEF1;
  --cf-tinta: #161823;                /* texto do app no tema claro */
  --cf-cinza: #8A8B91;
  --cf-campo: #F1F1F2;
  /* amarelo da cesta, medido no print do app na Academia do TikTok Shop
     (seller-br, 14/04/2025): #EDBA45 */
  --cf-cesta: #EDBA45;
  --cf-respiro: clamp(0.875rem, 2.4vh, 1.75rem);
}

/* ---- casca: a seção centraliza no espaço que a faixa deixa -------------- */
.mgxs.mgxcf { padding-block: var(--cf-respiro); }
/* luz azul do iHub atrás dos aparelhos + grão (fundo, nunca caixa animada) */
.mgxs.mgxcf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(42% 46% at 50% 62%, rgba(0, 167, 255, 0.13), rgba(0, 85, 145, 0.05) 55%, transparent 78%);
}

.mgxcf .mgxcf__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabeca" "palco" "botoes" "acao";
  row-gap: clamp(0.625rem, 1.4vh, 1rem);
}
.mgxcf .mgxcf__cabeca { grid-area: cabeca; gap: 0.5rem; margin: 0; max-inline-size: none; }
.mgxcf .mgxcf__sub { max-inline-size: 36rem; line-height: 1.5; }
.mgxcf .mgxcf-passos { grid-area: palco; }
.mgxcf .mgxcf-botoes { grid-area: botoes; }
.mgxcf .mgxcf__acao { grid-area: acao; display: flex; justify-content: center; }

.mgxcf .mgxcf-passos { margin: 0; padding: 0; list-style: none; }
.mgxcf .mgxcf-passo { margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.mgxcf .mgxcf-cel { --cel-w: var(--wm); }

/* ---- legenda de cada passo (≥ 768px) ------------------------------------ */
.mgxcf .mgxcf-legenda {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #E6EDF3;
  text-align: start;
  text-wrap: balance;
  align-self: start;
}
.mgxcf .mgxcf-legenda__n {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: -0.0625rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 167, 255, 0.45);
  background: rgba(0, 167, 255, 0.10);
  color: #7AD4FF;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/* ==========================================================================
   CELULAR (< 768px): um por vez, os outros dois espiando atrás
   ========================================================================== */
@media (max-width: 47.99rem) {
  .mgxcf {
    /* altura que sobra para o aparelho: janela − faixa (≤ 161px) − título,
       texto, botões e chamada (≈ 280px). Largura: nunca mais que 60% da tela */
    --wm: clamp(7.5rem, min(calc((100svh - 27rem) * 0.4923), 60vw), 15rem);
    --cf-respiro: clamp(0.75rem, 1.6vh, 1.25rem);
    --desvio: max(0px, calc(50vw - 1rem - var(--wm) * 0.483));
  }
  .mgxs.mgxcf { padding-inline: 1rem; }
  .mgxcf .mgxcf__sub { font-size: 1rem; line-height: 1.45; }

  .mgxcf .mgxcf-passos {
    position: relative;
    block-size: calc(var(--wm) * 977 / 481);
    touch-action: pan-y;               /* o dedo na horizontal troca a tela */
    -webkit-user-select: none;
            user-select: none;
  }
  .mgxcf .mgxcf-passo {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
  }
  .mgxcf .mgxcf-passo .mgxcf-cel {
    transition: transform 650ms var(--cf-ease);
  }
  .mgxcf .mgxcf-passo[data-pos="esq"] .mgxcf-cel {
    transform: translateX(calc(-1 * var(--desvio))) scale(0.8) rotate(-6deg);
  }
  .mgxcf .mgxcf-passo[data-pos="dir"] .mgxcf-cel {
    transform: translateX(var(--desvio)) scale(0.8) rotate(6deg);
  }
  .mgxcf .mgxcf-passo[data-pos="esq"],
  .mgxcf .mgxcf-passo[data-pos="dir"] { cursor: pointer; z-index: 1; }
  .mgxcf .mgxcf-passo[data-pos="centro"] { z-index: 3; }
  /* os de trás ficam com a TELA apagada (sem meia palavra legível) e a
     moldura um pouco mais escura: estão atrás */
  .mgxcf .mgxcf-cel::after,
  .mgxcf .mgxcf-tela::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 500ms var(--cf-ease);
  }
  .mgxcf .mgxcf-cel::after { inset: 0.4% 1.2%; z-index: 6; border-radius: 15% / 7.3%; }
  .mgxcf .mgxcf-tela::after { inset: 0; z-index: 7; }
  .mgxcf .mgxcf-passo[data-pos="esq"] .mgxcf-cel::after,
  .mgxcf .mgxcf-passo[data-pos="dir"] .mgxcf-cel::after { opacity: 0.35; }
  .mgxcf .mgxcf-passo[data-pos="esq"] .mgxcf-tela::after,
  .mgxcf .mgxcf-passo[data-pos="dir"] .mgxcf-tela::after { opacity: 0.84; }

  /* legenda vira texto de leitor de tela: quem vê usa os botões */
  .mgxcf .mgxcf-legenda {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---- os três botões de passo ---- */
  .mgxcf .mgxcf-botoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
  }
  .mgxcf .mgxcf-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-block-size: 2.75rem;
    padding: 0 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #AEB9C4;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--cf-ease);
  }
  .mgxcf .mgxcf-botao:active { transform: scale(0.97); }
  .mgxcf .mgxcf-botao:focus-visible { outline: 2px solid #7AD4FF; outline-offset: 2px; }
  .mgxcf .mgxcf-botao__n {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
  }
  .mgxcf .mgxcf-botao[aria-current="true"] {
    border-color: rgba(0, 167, 255, 0.55);
    background: rgba(0, 167, 255, 0.12);
    color: #fff;
  }
  /* progresso do avanço automático: uma linha que se enche no pé do botão */
  .mgxcf .mgxcf-botao__barra {
    position: absolute;
    inset-inline: 1.1rem;
    inset-block-end: 0.3125rem;
    block-size: 2px;
    border-radius: 2px;
    background: #00A7FF;
    transform: scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
  }
  .mgxcf.is-auto .mgxcf-botao[aria-current="true"] .mgxcf-botao__barra {
    opacity: 1;
    animation: mgxcf-barra var(--cf-intervalo, 3.5s) linear both;
  }
  .mgxcf.is-pausado .mgxcf-botao[aria-current="true"] .mgxcf-botao__barra { animation-play-state: paused; }
  .mgxcf .mgxcf__acao { margin-block-start: 0.125rem; }
}
@keyframes mgxcf-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   TABLET E DESKTOP (≥ 768px): fileira com profundidade
   ========================================================================== */
@media (min-width: 48rem) {
  .mgxcf {
    /* altura que sobra para o do meio: janela − faixa (164px) − cabeçalho,
       legenda e respiros (≈ 236px); largura: a fileira inteira ocupa ≈ 2,36×
       o do meio */
    --wm: clamp(11rem, min(calc((100svh - 27.5rem) * 0.4923), calc((100vw - 3rem) / 2.4)), 18.5rem);
    --ws: calc(var(--wm) * 0.84);
    /* sobreposição na grade: a moldura do lado (5,2%) + 5% da tela dele + o
       quanto a borda de dentro recua com o giro */
    --sobre: calc(var(--ws) * 0.215);
    --giro: 17deg;
  }
  .mgxcf .mgxcf__in {
    grid-template-areas: "cabeca" "palco" "acao";
    row-gap: clamp(0.875rem, 2.2vh, 1.5rem);
  }
  .mgxcf .mgxcf__sub { max-inline-size: 44rem; }
  .mgxcf .mgxcf-botoes { display: none; }

  .mgxcf .mgxcf-passos {
    display: grid;
    grid-template-columns: calc(var(--ws) - var(--sobre)) var(--wm) calc(var(--ws) - var(--sobre));
    grid-template-rows: auto auto;
    justify-content: center;
    row-gap: clamp(0.625rem, 1.6vh, 0.875rem);
  }
  .mgxcf .mgxcf-passo {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    /* coluna presa à trilha: a legenda larga transborda, não empurra o aparelho */
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
  }
  .mgxcf .mgxcf-passo--2 { position: relative; z-index: 2; }
  .mgxcf .mgxcf-passo--1 .mgxcf-cel,
  .mgxcf .mgxcf-passo--3 .mgxcf-cel { --cel-w: var(--ws); }
  .mgxcf .mgxcf-passo--1 .mgxcf-cel {
    justify-self: end;
    margin-inline-end: calc(-1 * var(--sobre));
    transform-origin: 0% 50%;
    transform: translateX(0) perspective(56rem) rotateY(var(--giro)) scale(1);
  }
  .mgxcf .mgxcf-passo--3 .mgxcf-cel {
    justify-self: start;
    margin-inline-start: calc(-1 * var(--sobre));
    transform-origin: 100% 50%;
    transform: translateX(0) perspective(56rem) rotateY(calc(-1 * var(--giro))) scale(1);
  }
  /* a sombra do da frente cai sobre os de trás */
  .mgxcf .mgxcf-passo--2 .mgxcf-cel::before {
    content: "";
    position: absolute;
    inset: 1.2% 2.5%;
    z-index: -1;
    border-radius: 15% / 7.3%;
    box-shadow:
      0 1.75rem 3.5rem -0.75rem rgba(0, 0, 0, 0.9),
      0 0 2.25rem 0.25rem rgba(0, 0, 0, 0.75);
    pointer-events: none;
  }
  /* os de trás escurecem um pouco perto do da frente (profundidade) */
  .mgxcf .mgxcf-passo--1 .mgxcf-cel::after,
  .mgxcf .mgxcf-passo--3 .mgxcf-cel::after {
    content: "";
    position: absolute;
    inset: 0.4% 1.2%;
    z-index: 6;
    border-radius: 15% / 7.3%;
    pointer-events: none;
  }

  /* a legenda pode passar da coluna estreita do aparelho de trás: cabe em
     13rem e fica centrada nele, sem encostar na do meio */
  .mgxcf .mgxcf-legenda { inline-size: max-content; max-inline-size: 13rem; justify-self: center; }
  .mgxcf .mgxcf-passo--1 .mgxcf-cel::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent 24%); }
  .mgxcf .mgxcf-passo--3 .mgxcf-cel::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 24%); }
}
/* desktop: a chamada sobe para a direita do título (padrão da Apple) e os
   aparelhos ganham a altura que ela liberou */
@media (min-width: 64rem) {
  .mgxcf { --wm: clamp(11rem, min(calc((100svh - 23.75rem) * 0.4923), calc((100vw - 3rem) / 2.4)), 18.5rem); }
  .mgxcf .mgxcf__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cabeca acao" "palco palco";
    align-items: end;
    column-gap: 2rem;
  }
  .mgxcf .mgxcf__acao { justify-content: flex-end; padding-block-end: 0.25rem; }
}

/* ==========================================================================
   AS TELAS — interface do app em DOM vivo (TikTok Sans, cqw/cqh)
   ========================================================================== */
.mgxcf .mgxcf-tela { font-size: 3.4cqw; }
.mgxcf .mgxcf-tela p { margin: 0; }
.mgxcf .mgxcf-tela--claro {
  background: #fff;
  color: var(--cf-tinta);
  --cel-status-cor: #000;
  --cel-home-cor: rgba(0, 0, 0, 0.85);
}
.mgxcf .mgxcf-ico { display: block; flex: none; inline-size: 5.6cqw; block-size: 5.6cqw; }
/* o nome "TikTok Shop" recebe .tts do montar.py; dentro da tela é texto do app */
.mgxcf .cel .tts { color: inherit !important; -webkit-text-fill-color: currentColor !important; }

/* ---- 1 · Mercado de produtos -------------------------------------------- */
.mgxcf .mgxcf-cat {
  position: absolute;
  inset: 0;
  padding-block-start: 6.6cqh;
  font-size: 3.4cqw;
  line-height: 1.3;
}
.mgxcf .mgxcf-cat__topo {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  block-size: 10cqw;
  padding-inline: 3cqw 7cqw;            /* o lado direito é a faixa que o do meio tapa */
}
.mgxcf .mgxcf-cat__topo > .mgxcf-ico:last-child { inline-size: 6.4cqw; block-size: 6.4cqw; }
.mgxcf .mgxcf-cat__busca {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  min-inline-size: 0;
  block-size: 8.6cqw;
  padding-inline: 2.2cqw 2.6cqw;
  border-radius: 1.6cqw;
  background: var(--cf-campo);
  color: var(--cf-cinza);
  font-size: 3.4cqw;
}
.mgxcf .mgxcf-cat__busca .mgxcf-ico { inline-size: 4.4cqw; block-size: 4.4cqw; }
.mgxcf .mgxcf-cat__busca b { margin-inline-start: auto; color: var(--cf-tinta); font-weight: 700; }
.mgxcf .mgxcf-cat__dica { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgxcf .mgxcf-cat__abas {
  display: flex;
  gap: 4.2cqw;
  padding: 3cqw 3.6cqw 0;
  color: var(--cf-cinza);
  font-size: 3.6cqw;
  font-weight: 500;
  white-space: nowrap;
}
.mgxcf .mgxcf-cat__abas b { color: var(--cf-tinta); font-weight: 700; }
.mgxcf .mgxcf-cat__titulo { padding: 3.6cqw 3.6cqw 0; font-size: 4.4cqw; font-weight: 700; }
.mgxcf .mgxcf-cat__chips { display: flex; gap: 2cqw; padding: 2.4cqw 3.6cqw 0; }
.mgxcf .mgxcf-cat__chips span {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  block-size: 6.4cqw;
  padding-inline: 2.2cqw;
  border-radius: 1.2cqw;
  background: var(--cf-campo);
  font-size: 3cqw;
  font-weight: 600;
}
.mgxcf .mgxcf-cat__chips .mgxcf-ico { inline-size: 3.6cqw; block-size: 3.6cqw; }
.mgxcf .mgxcf-cat__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3cqw 2.4cqw;
  padding: 3cqw 3.6cqw 0;
}
.mgxcf .mgxcf-prod { display: flex; flex-direction: column; gap: 0.9cqw; min-inline-size: 0; }
.mgxcf .mgxcf-prod img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  block-size: auto;
  border-radius: 1.8cqw;
  object-fit: cover;
  background: var(--cf-campo);
}
.mgxcf .mgxcf-prod__nome {
  padding-block-start: 0.6cqw;
  font-size: 3.4cqw;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgxcf .mgxcf-prod__taxa {
  align-self: flex-start;
  padding: 0.35cqw 1.3cqw;
  border-radius: 0.9cqw;
  background: var(--cf-rosa-fundo);
  color: #E0224A;
  font-size: 2.8cqw;
  font-weight: 600;
  line-height: 1.3;
}
.mgxcf .mgxcf-prod__ganhe { color: var(--cf-rosa); font-size: 3.7cqw; font-weight: 700; line-height: 1.2; }
.mgxcf .mgxcf-prod__preco { color: var(--cf-cinza); font-size: 2.8cqw; white-space: nowrap; }
.mgxcf .mgxcf-prod__preco b { color: var(--cf-tinta); font-weight: 600; }
.mgxcf .mgxcf-add {
  position: relative;
  display: grid;
  margin-block-start: 1cqw;
  block-size: 6.8cqw;
  border-radius: 999px;
  font-size: 3.3cqw;
  font-weight: 600;
}
.mgxcf .mgxcf-add > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  border-radius: inherit;
}
.mgxcf .mgxcf-add__a { background: var(--cf-rosa); color: #fff; }
.mgxcf .mgxcf-add__b { background: var(--cf-campo); color: var(--cf-tinta); opacity: 0; }
.mgxcf .mgxcf-add__b .mgxcf-ico { inline-size: 3.6cqw; block-size: 3.6cqw; }
.mgxcf .mgxcf-toque {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 11cqw;
  block-size: 11cqw;
  margin: -5.5cqw 0 0 -5.5cqw;
  border-radius: 50%;
  background: rgba(22, 24, 35, 0.22);
  opacity: 0;
  pointer-events: none;
}
.mgxcf .mgxcf-passo--1 .cel__exemplo { inset-block-start: 16.3cqh; inset-inline-end: 12cqw; }

/* ---- 2 · vídeo no feed, com a cesta amarela ----------------------------- */
.mgxcf .mgxcf-vid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  color: #fff;
  font-size: 3.4cqw;
  line-height: 1.3;
}
.mgxcf .mgxcf-vid__quadro {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 40%;
  transform-origin: 62% 44%;
}
.mgxcf .mgxcf-vid::before,
.mgxcf .mgxcf-vid::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}
.mgxcf .mgxcf-vid::before { inset-block-start: 0; block-size: 20cqh; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); }
.mgxcf .mgxcf-vid::after { inset-block-end: 10cqh; block-size: 40cqh; background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); }
.mgxcf .mgxcf-vid > * { z-index: 1; }
.mgxcf .mgxcf-vid__topo {
  position: absolute;
  inset-block-start: 6.7cqh;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 4cqw;
  block-size: 6cqh;
}
.mgxcf .mgxcf-vid__topo .mgxcf-ico { inline-size: 6.2cqw; block-size: 6.2cqw; }
.mgxcf .mgxcf-vid__live {
  padding: 0.5cqw 1.1cqw 0.4cqw;
  border: 0.6cqw solid #fff;
  border-radius: 1.4cqw;
  font-size: 2.5cqw;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.mgxcf .mgxcf-vid__abas { display: flex; gap: 4.4cqw; font-size: 4.2cqw; font-weight: 600; }
.mgxcf .mgxcf-vid__abas span { color: rgba(255, 255, 255, 0.66); }
.mgxcf .mgxcf-vid__abas b { position: relative; font-weight: 700; }
.mgxcf .mgxcf-vid__abas b::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -1.9cqw;
  inline-size: 6.4cqw;
  block-size: 0.7cqw;
  margin-inline-start: -3.2cqw;
  border-radius: 1cqw;
  background: #fff;
}
.mgxcf .mgxcf-vid__trilho {
  position: absolute;
  inset-inline-end: 2.2cqw;
  inset-block-end: 17.5cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4cqw;
  font-size: 2.9cqw;
  font-weight: 600;
  text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.45);
}
.mgxcf .mgxcf-vid__avatar {
  position: relative;
  display: grid;
  place-items: end center;
  inline-size: 11.4cqw;
  block-size: 11.4cqw;
  margin-block-end: 1.4cqw;
  border: 0.55cqw solid #fff;
  border-radius: 50%;
  background: linear-gradient(160deg, #47505e, #1c2027);
  color: #b9c0cb;
  overflow: visible;
}
.mgxcf .mgxcf-vid__avatar svg { inline-size: 76%; block-size: 76%; border-radius: 0 0 50% 50%; }
.mgxcf .mgxcf-vid__avatar i {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -2.4cqw;
  inline-size: 4.8cqw;
  block-size: 4.8cqw;
  margin-inline-start: -2.4cqw;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 2.3cqw 0.55cqw no-repeat,
    linear-gradient(#fff, #fff) center / 0.55cqw 2.3cqw no-repeat,
    var(--cf-rosa);
}
.mgxcf .mgxcf-vid__acao { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; }
.mgxcf .mgxcf-vid__acao .mgxcf-ico { inline-size: 8.6cqw; block-size: 8.6cqw; }
.mgxcf .mgxcf-vid__acao--curtida .mgxcf-ico { color: var(--cf-rosa); }
.mgxcf .mgxcf-vid__disco {
  display: grid;
  place-items: center;
  inline-size: 10.4cqw;
  block-size: 10.4cqw;
  margin-block-start: 1cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #2f2f33 0 38%, #151517 39% 100%);
  box-shadow: inset 0 0 0 0.35cqw #26262a;
}
.mgxcf .mgxcf-vid__disco i {
  inline-size: 44%;
  block-size: 44%;
  border-radius: 50%;
  background: conic-gradient(from 30deg, #25F4EE, #FE2C55, #25F4EE);
}
.mgxcf .mgxcf-vid__base {
  position: absolute;
  inset-inline: 3.6cqw 21cqw;
  inset-block-end: 11.6cqh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5cqw;
  text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.4);
}
.mgxcf .mgxcf-cesta {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  max-inline-size: 100%;
  margin-block-end: 1cqw;
  padding: 1.1cqw 2.6cqw 1.1cqw 1.1cqw;
  border-radius: 1.6cqw;
  /* a luz corre pelo FUNDO (background-position), nunca por uma caixa animada */
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%) -160% 0 / 60% 100% no-repeat,
    rgba(72, 72, 76, 0.62);
  font-size: 3.3cqw;
  font-weight: 600;
  text-shadow: none;
  white-space: nowrap;
}
.mgxcf .mgxcf-cesta__ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 6.6cqw;
  block-size: 6.6cqw;
  border-radius: 1.3cqw;
  background: var(--cf-cesta);
}
.mgxcf .mgxcf-cesta__ico svg { inline-size: 78%; block-size: 78%; }
.mgxcf .mgxcf-cesta__txt { overflow: hidden; text-overflow: ellipsis; }
.mgxcf .mgxcf-vid__perfil { font-size: 3.9cqw; font-weight: 700; }
.mgxcf .mgxcf-vid__legenda {
  font-size: 3.4cqw;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mgxcf .mgxcf-vid__legenda b { font-weight: 700; }
.mgxcf .mgxcf-vid__nav {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  block-size: 10.6cqh;
  padding-block-start: 1.3cqh;
  background: #000;
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.35cqw;
  font-weight: 500;
  line-height: 1.1;
}
.mgxcf .mgxcf-vid__nav > span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  white-space: nowrap;
}
.mgxcf .mgxcf-vid__nav .mgxcf-ico { inline-size: 6.6cqw; block-size: 6.6cqw; }
.mgxcf .mgxcf-vid__nav .is-on { color: #fff; font-weight: 700; }
.mgxcf .mgxcf-vid__loja::after {
  content: "";
  position: absolute;
  inset-block-start: -0.4cqw;
  inset-inline-start: 57%;
  inline-size: 2cqw;
  block-size: 2cqw;
  border-radius: 50%;
  background: var(--cf-rosa);
}
.mgxcf .mgxcf-vid__criar { padding-block-start: 0.2cqw; }
.mgxcf .mgxcf-vid__criar i {
  display: grid;
  place-items: center;
  inline-size: 10.2cqw;
  block-size: 6.8cqw;
  border-radius: 2cqw;
  background: #fff;
  color: #000;
  font-size: 5.4cqw;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  box-shadow: -0.9cqw 0 0 var(--tt-ciano, #25F4EE), 0.9cqw 0 0 var(--cf-rosa);
}
.mgxcf .mgxcf-vid__caixa i {
  position: absolute;
  inset-block-start: -1cqw;
  inset-inline-start: 54%;
  min-inline-size: 3.8cqw;
  padding: 0.2cqw 1cqw;
  border-radius: 999px;
  background: var(--cf-rosa);
  color: #fff;
  font-size: 2.2cqw;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.mgxcf .mgxcf-passo--2 .cel__exemplo { inset-block-start: 13.4cqh; }

/* ---- 3 · a venda vira comissão ------------------------------------------ */
.mgxcf .mgxcf-com {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6.6cqh 6.6cqw 0 7.4cqw;     /* o lado esquerdo é a faixa que o do meio tapa */
  font-size: 3.4cqw;
  line-height: 1.3;
}
.mgxcf .mgxcf-com__topo {
  display: grid;
  grid-template-columns: 6cqw 1fr 6cqw;
  align-items: center;
  block-size: 10cqw;
  margin-inline: -1.6cqw -1cqw;
}
.mgxcf .mgxcf-com__topo b { text-align: center; font-size: 4.4cqw; font-weight: 700; }
.mgxcf .mgxcf-com__periodo {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  align-self: flex-start;
  block-size: 6.8cqw;
  margin-block-start: 2.4cqw;
  padding-inline: 2.8cqw 2cqw;
  border-radius: 999px;
  border: 1px solid rgba(22, 24, 35, 0.14);
  font-size: 3.1cqw;
  font-weight: 600;
}
.mgxcf .mgxcf-com__periodo .mgxcf-ico { inline-size: 3.6cqw; block-size: 3.6cqw; }
.mgxcf .mgxcf-com__rotulo { margin-block-start: 5cqw; color: var(--cf-cinza); font-size: 3.6cqw; font-weight: 500; }
.mgxcf .mgxcf-com__valor {
  margin-block-start: 0.6cqw;
  font-size: 11cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.mgxcf .mgxcf-com__grafico { display: block; inline-size: 100%; block-size: 17cqh; margin-block-start: 3cqw; overflow: visible; }
.mgxcf .mgxcf-com__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3cqw;
  margin-block-start: 3.6cqw;
  padding-block-start: 3.6cqw;
  border-block-start: 1px solid rgba(22, 24, 35, 0.1);
}
.mgxcf .mgxcf-com__duo p { color: var(--cf-cinza); font-size: 3.4cqw; }
.mgxcf .mgxcf-com__duo b { font-size: 6.6cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.mgxcf .mgxcf-com__lista { margin-block: 5.6cqw 1.4cqw; font-size: 4cqw; font-weight: 700; }
.mgxcf .mgxcf-com__pedido {
  display: grid;
  grid-template-columns: 11.4cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.8cqw;
  padding: 2cqw 0;
}
.mgxcf .mgxcf-com__pedido--novo {
  margin-inline: -2.2cqw;
  padding-inline: 2.2cqw;
  border-radius: 2cqw;
  background: #FFF1F4;
}
.mgxcf .mgxcf-com__pedido img { inline-size: 11.4cqw; block-size: 11.4cqw; border-radius: 2cqw; object-fit: cover; }
.mgxcf .mgxcf-com__pedido span { display: flex; flex-direction: column; font-size: 3.6cqw; font-weight: 600; white-space: nowrap; }
.mgxcf .mgxcf-com__pedido small { color: var(--cf-cinza); font-size: 3cqw; font-weight: 500; }
.mgxcf .mgxcf-com__pedido b { font-size: 3.7cqw; font-weight: 700; }
.mgxcf .mgxcf-com__pedido--novo b { color: #E0224A; }

/* o número que vira: duas linhas num visor de uma; o estado parado é o final */
.mgxcf .mgxcf-rolo {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  block-size: 1.15em;
  overflow: clip;
}
.mgxcf .mgxcf-rolo > span { display: block; line-height: 1.15; transform: translateY(-100%); }

/* notificação do iOS que desce do topo */
.mgxcf .mgxcf-notif {
  position: absolute;
  z-index: 5;
  inset-block-start: 6.9cqh;
  inset-inline: 2.6cqw;
  display: grid;
  grid-template-columns: 9.6cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.8cqw;
  padding: 3cqw 3.6cqw 3cqw 3cqw;
  border-radius: 5.8cqw;
  background: rgba(246, 246, 247, 0.97);
  box-shadow: 0 2.4cqw 7cqw rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  color: var(--cf-tinta);
  font-size: 3.3cqw;
  line-height: 1.25;
}
.mgxcf .mgxcf-notif img {
  inline-size: 9.6cqw;
  block-size: 9.6cqw;
  padding: 1.7cqw;
  border-radius: 2.3cqw;
  background: #000;
  box-sizing: border-box;
}
.mgxcf .mgxcf-notif__txt { display: flex; flex-direction: column; gap: 0.2cqw; min-inline-size: 0; }
.mgxcf .mgxcf-notif__txt b { font-size: 3.4cqw; font-weight: 700; }
.mgxcf .mgxcf-notif__txt span { font-weight: 500; }
.mgxcf .mgxcf-notif__txt small { color: #6C6C72; font-size: 3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgxcf .mgxcf-notif__hora { align-self: start; color: var(--cf-cinza); font-size: 2.8cqw; }
.mgxcf .mgxcf-passo--3 .cel__exemplo { inset-block-start: 17.6cqh; inset-inline-end: 6.6cqw; }

/* ==========================================================================
   MOVIMENTO — só transform e opacity, e só com a preferência do sistema livre
   · entrada: os de trás abrem de trás do do meio (desktop)
   · história de cada ciclo: toque em "Adicionar" → a cesta entra → desce a
     notificação e o total gira de R$ 274,92 para R$ 288,40
   · contínuo: Ken Burns no vídeo, coração pulsando, disco girando
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mgxcf {
    --t-toque: 0.9s;
    --t-cesta: 1.7s;
    --t-notif: 2.9s;
  }
  @media (max-width: 47.99rem) {
    .mgxcf { --t-toque: 0.55s; --t-cesta: 0.45s; --t-notif: 0.45s; }
  }

  /* entrada (≥ 768px): antes de aparecer, os três esperam fora de vista */
  @media (min-width: 48rem) {
    .mgxcf.js-cf:not(.is-entrou) .mgxcf-cel { opacity: 0; }
    .mgxcf.is-entrou .mgxcf-passo--2 .mgxcf-cel { animation: mgxcf-sobe 900ms var(--cf-ease) backwards; }
    .mgxcf.is-entrou .mgxcf-passo--1 .mgxcf-cel { animation: mgxcf-abre-esq 1100ms var(--cf-ease) 120ms backwards; }
    .mgxcf.is-entrou .mgxcf-passo--3 .mgxcf-cel { animation: mgxcf-abre-dir 1100ms var(--cf-ease) 120ms backwards; }
    .mgxcf.js-cf:not(.is-entrou) .mgxcf-legenda { opacity: 0; }
    .mgxcf.is-entrou .mgxcf-legenda { animation: mgxcf-aparece 700ms var(--cf-ease) 520ms backwards; }
  }
  /* celular: o aparelho do centro sobe ao aparecer */
  @media (max-width: 47.99rem) {
    .mgxcf.js-cf:not(.is-entrou) .mgxcf-passos { opacity: 0; }
    .mgxcf.is-entrou .mgxcf-passos { animation: mgxcf-sobe 800ms var(--cf-ease) backwards; }
  }

  /* 1 · o toque em Adicionar */
  .mgxcf-passo.is-ativo .mgxcf-toque { animation: mgxcf-toque 700ms ease-out var(--t-toque) both; }
  .mgxcf-passo.is-ativo .mgxcf-add__b { animation: mgxcf-aparece 260ms ease-out calc(var(--t-toque) + 0.22s) both; }
  .mgxcf-passo.is-ativo .mgxcf-prod--escolhido .mgxcf-add__a { animation: mgxcf-some 200ms ease-out calc(var(--t-toque) + 0.3s) both; }
  .mgxcf-passo.is-ativo .mgxcf-prod--escolhido .mgxcf-add { animation: mgxcf-aperta 360ms ease-out var(--t-toque) both; }

  /* 2 · o vídeo */
  .mgxcf-passo.is-ativo .mgxcf-vid__quadro { animation: mgxcf-ken 16s ease-in-out infinite alternate; }
  .mgxcf-passo.is-ativo .mgxcf-vid__acao--curtida .mgxcf-ico { animation: mgxcf-pulsa 2.4s var(--cf-ease) 0.6s infinite; }
  .mgxcf-passo.is-ativo .mgxcf-vid__disco { animation: mgxcf-gira 5s linear infinite; }
  .mgxcf-passo.is-ativo .mgxcf-cesta {
    animation:
      mgxcf-cesta 700ms var(--cf-ease) var(--t-cesta) backwards,
      mgxcf-luz 4.2s cubic-bezier(.6, 0, .2, 1) calc(var(--t-cesta) + 0.8s) infinite;
  }

  /* 3 · a comissão */
  .mgxcf-passo.is-ativo .mgxcf-notif { animation: mgxcf-notif 8s var(--cf-ease) var(--t-notif) infinite both; }
  .mgxcf-passo.is-ativo .mgxcf-rolo > span { animation: mgxcf-rola 700ms var(--cf-ease) calc(var(--t-notif) + 0.35s) backwards; }
  @media (max-width: 47.99rem) {
    /* no celular a tela fica 3,5 s à vista: a notificação desce e fica */
    .mgxcf-passo.is-ativo .mgxcf-notif { animation: mgxcf-notif-fica 650ms var(--cf-ease) var(--t-notif) backwards; }
  }
}

@keyframes mgxcf-sobe { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes mgxcf-abre-esq { from { opacity: 0; transform: translateX(45%) perspective(56rem) rotateY(0deg) scale(0.92); } }
@keyframes mgxcf-abre-dir { from { opacity: 0; transform: translateX(-45%) perspective(56rem) rotateY(0deg) scale(0.92); } }
@keyframes mgxcf-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgxcf-some { to { opacity: 0; } }
@keyframes mgxcf-toque {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes mgxcf-aperta { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.95); } }
@keyframes mgxcf-ken {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}
@keyframes mgxcf-pulsa {
  0%, 36%, 100% { transform: scale(1); }
  9% { transform: scale(1.2); }
  18% { transform: scale(0.96); }
  27% { transform: scale(1.1); }
}
@keyframes mgxcf-gira { to { transform: rotate(360deg); } }
@keyframes mgxcf-cesta { from { opacity: 0; transform: translateY(40%) scale(0.92); } }
@keyframes mgxcf-luz {
  0%, 50% { background-position: -160% 0, 0 0; }
  100% { background-position: 260% 0, 0 0; }
}
@keyframes mgxcf-notif {
  0% { opacity: 0; transform: translateY(-135%); }
  7%, 62% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(-135%); }
}
@keyframes mgxcf-notif-fica { from { opacity: 0; transform: translateY(-135%); } }
@keyframes mgxcf-rola { from { transform: translateY(0); } to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .mgxcf .mgxcf-passo .mgxcf-cel,
  .mgxcf .mgxcf-cel::after { transition-duration: 1ms; }
}

/* ==========================================================================
   ORDEM (23/09/2026, 20h20 — "corrija a ordem desta seção, tá estranha")
   O botão ficava no canto de cima, à direita, ANTES dos celulares: a pessoa
   era chamada a entrar antes de ver o que ia fazer. Agora a leitura é uma
   coluna só, no eixo dos aparelhos: título → três telas com os passos →
   chamada. E a faixa virou seção própria: a tela inteira é desta seção, então
   os aparelhos crescem para ocupar a altura que a faixa usava.
   ========================================================================== */
.mgxcf .mgxcf__cabeca { justify-items: center; text-align: center; margin-inline: auto; }
.mgxcf .mgxcf__sub { margin-inline: auto; }
@media (min-width: 48rem) {
  .mgxcf { --wm: clamp(11rem, min(calc((100svh - 22rem) * 0.4923), calc((100vw - 3rem) / 2.4)), 19rem); }
  .mgxcf .mgxcf__in { grid-template-areas: "cabeca" "palco" "acao"; }
  .mgxcf .mgxcf__acao { justify-content: center; }
}
@media (min-width: 64rem) {
  .mgxcf { --wm: clamp(11rem, min(calc((100svh - 25.75rem) * 0.4923), calc((100vw - 3rem) / 2.4)), 19rem); }
  .mgxcf .mgxcf__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cabeca" "palco" "acao";
    align-items: start;
  }
  .mgxcf .mgxcf__acao { justify-content: center; padding-block-end: 0; }
}