/* ==========================================================================
   "Você se reconhece em alguma dessas situações?" — cartões e ilustrações

   Refeito em 23/09/2026. O que havia nos quatro cartões era sobra da origem:
   · 01: balão "O MVM Brasil é até pra quem nunca abriu o TikTok antes!" com o
     logo da marca de origem, sob uma faixa de rede sem relação com o texto;
   · 02: cartão BRANCO da origem — com os títulos já claros, o texto ficou
     branco no branco (ilegível) e o logo da MGX borrado no lugar da imagem;
   · 03: print do TikTok de uma pessoa real (prova de outra marca);
   · 04: tela de bloqueio de celular POR CIMA do título do cartão.
   Agora cada cartão tem uma ilustração em HTML que mostra a situação dele com
   o que a página já promete: trilha que começa no cadastro, catálogo da
   semana, calls de segunda a sexta. Número com cara de dado leva "exemplo".
   ========================================================================== */

/* ---- os quatro cartões: uma superfície só, na cor do iHub ---------------
   A origem tingia a sombra interna de marrom-dourado (a cor da marca de lá)
   e usava desfoque de fundo de 86px, que não desfoca nada num fundo preto. */
.elementor-3386 .elementor-element:is(.elementor-element-bab0ceb, .elementor-element-1d7b9c3, .elementor-element-09d64e5, .elementor-element-0bb0d27) {
  background: radial-gradient(120% 90% at 0% 0%, rgba(0, 167, 255, 0.16) 0%, rgba(0, 85, 145, 0.16) 42%, rgba(4, 12, 22, 0.94) 100%) !important;
  border: 1px solid rgba(0, 167, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---- painel base ---------------------------------------------------------- */
.mgxsit.mgxsit {
  margin: 0;
  inline-size: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: var(--r-controle, 10px);
  background: rgba(2, 10, 18, 0.74);
  border: 1px solid rgba(0, 167, 255, 0.16);
  color: #D4D4D8;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: start;
  text-transform: none;
  container-type: inline-size;
}
.mgxsit :where(p, ul, ol, li, figcaption, b, i) {
  margin: 0;
  padding: 0;
  list-style: none;
  font-style: normal;
}
.mgxsit .mgxsit__oculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mgxsit .mgxsit__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}
.mgxsit .mgxsit__tag {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #8FB8D6;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(143, 184, 214, 0.30);
  border-radius: var(--r-pilula, 999px);
}
.mgxsit .mgxsit__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  font-size: 0.875rem;
  color: #B9C6D3;
}
.mgxsit .mgxsit__legenda > span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ---- 01 · conversa -------------------------------------------------------- */
.mgxsit--chat.mgxsit--chat { gap: 0.625rem; }
.mgxsit .mgxsit__linha { display: flex; align-items: flex-end; gap: 0.5rem; }
.mgxsit .mgxsit__linha--eu { justify-content: flex-end; }
.mgxsit .mgxsit__avatar {
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
}
.mgxsit .mgxsit__msg {
  max-inline-size: min(82%, 24rem);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mgxsit .mgxsit__msg--eu {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-cartao, 16px) var(--r-cartao, 16px) var(--r-controle, 10px) var(--r-cartao, 16px);
  color: #fff;
}
.mgxsit .mgxsit__msg--mgx {
  background: rgba(0, 167, 255, 0.14);
  border: 1px solid rgba(0, 167, 255, 0.32);
  border-radius: var(--r-cartao, 16px) var(--r-cartao, 16px) var(--r-cartao, 16px) var(--r-controle, 10px);
  color: #EAF6FF;
}

/* ---- 02 · vídeos sem venda ------------------------------------------------ */
.mgxsit .mgxsit__colunas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: end;
}
.mgxsit .mgxsit__col { display: grid; justify-items: center; gap: 0.375rem; }
.mgxsit .mgxsit__views {
  font-size: 0.875rem;
  color: #B9C6D3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mgxsit .mgxsit__barra,
.mgxsit .mgxsit__amostra {
  display: block;
  background: linear-gradient(180deg, var(--ihub-azul-claro, #33B8FF), var(--ihub-azul-profundo, #005591));
}
.mgxsit .mgxsit__barra {
  inline-size: 100%;
  max-inline-size: 2.75rem;
  block-size: calc(var(--h, 0.5) * 4.5rem);
  min-block-size: 0.75rem;
  border-radius: var(--r-controle, 10px) var(--r-controle, 10px) 0 0;
}
.mgxsit .mgxsit__amostra {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 3px;
}
.mgxsit .mgxsit__zero {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: var(--ihub-vermelho, #FF192A);
}

/* ---- 03 · catálogo da semana ---------------------------------------------- */
.mgxsit .mgxsit__itens { display: grid; gap: 0.5rem; }
.mgxsit .mgxsit__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  align-items: baseline;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-controle, 10px);
  background: rgba(0, 167, 255, 0.06);
  border: 1px solid rgba(0, 167, 255, 0.12);
}
.mgxsit .mgxsit__produto { font-weight: 600; font-size: 0.9375rem; color: #fff; }
.mgxsit .mgxsit__comissao { font-weight: 600; font-size: 0.875rem; color: var(--ihub-azul-claro, #33B8FF); white-space: nowrap; }
.mgxsit .mgxsit__angulo { grid-column: 1 / -1; font-size: 0.875rem; color: #AFC0CF; }

/* ---- 04 · a semana -------------------------------------------------------- */
.mgxsit .mgxsit__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}
.mgxsit .mgxsit__dia { display: grid; gap: 0.375rem; text-align: center; }
.mgxsit .mgxsit__nome { font-size: 0.875rem; color: #B9C6D3; }
.mgxsit .mgxsit__curto { display: none; }
.mgxsit .mgxsit__tarefa {
  display: grid;
  place-items: center;
  block-size: 2.5rem;
  border-radius: var(--r-controle, 10px);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}
.mgxsit :is(.mgxsit__tarefa--gravar, .mgxsit__cor--gravar) { background: var(--ihub-azul, #00A7FF); color: #00111E; }
.mgxsit :is(.mgxsit__tarefa--postar, .mgxsit__cor--postar) { background: var(--ihub-azul-profundo, #005591); color: #fff; box-shadow: inset 0 0 0 1px rgba(51, 184, 255, 0.5); }
.mgxsit :is(.mgxsit__tarefa--revisar, .mgxsit__cor--revisar) { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(51, 184, 255, 0.7); }
.mgxsit .mgxsit__tarefa--folga { background: rgba(255, 255, 255, 0.04); color: #8A97A5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mgxsit .mgxsit__call {
  display: block;
  block-size: 0.375rem;
  border-radius: var(--r-pilula, 999px);
  background: var(--ihub-vermelho, #FF192A);
}
.mgxsit .mgxsit__call--sem { background: transparent; }
.mgxsit .mgxsit__cor {
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 3px;
}
.mgxsit .mgxsit__cor--call { block-size: 0.375rem; border-radius: var(--r-pilula, 999px); background: var(--ihub-vermelho, #FF192A); }

/* painel estreito (celular, coluna apertada): o dia vira letra e a tarefa
   vira cor — a legenda embaixo explica. O texto continua para leitor de tela. */
@container (max-width: 26rem) {
  .mgxsit .mgxsit__longo { display: none; }
  .mgxsit .mgxsit__curto { display: inline; }
  .mgxsit .mgxsit__tarefa { block-size: 2rem; }
  .mgxsit .mgxsit__txt {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mgxsit .mgxsit__msg { max-inline-size: 86%; }
}