/* ==========================================================================
   MGX — IDENTIDADE iHUB AFFILIATES, À RISCA

   Ordem do dono (23/09/2026): "deve seguir à risca a identidade visual que o
   iHub Affiliates entrega". A paleta abaixo NÃO é de memória: foi extraída do
   código capturado do ihubaffiliates.com.br pelo CodeMirror
   (~/.jarvis/referencias/lp-afiliado-tiktok-shop/ihubaffiliates.com.br/),
   contando ocorrência de cor em 13 arquivos.

   Dois achados que explicam por que o clone "não parecia iHub":
   1. O AZUL PROFUNDO #005591 é a cor MAIS usada do iHub (72×, mais que o
      próprio #00A7FF, 68×). O clone não usava em lugar nenhum.
   2. Os cartões do iHub são TINGIDOS DE AZUL (rgba(0,167,255, .1 a .3)).
      Os do clone eram cinza (branco a 5%).
   ========================================================================== */

:root {
  /* ---- azuis: o corpo da marca ---- */
  --ihub-azul:          #00A7FF;   /* 68× — primário, CTA, destaque */
  --ihub-azul-profundo: #005591;   /* 72× — a cor mais usada: profundidade, fim de gradiente */
  --ihub-azul-claro:    #33B8FF;   /* superfície clara, borda acesa */

  /* ---- acento: urgência, não decoração ---- */
  --ihub-vermelho:      #FF192A;   /* 38× — aviso, escassez */

  /* ---- base e neutros ---- */
  --ihub-preto:         #0A0A0A;
  --ihub-cinza-700:     #374151;
  --ihub-cinza-600:     #4B5563;

  /* ---- superfícies: tingidas de azul, como no iHub ---- */
  --ihub-sup-1: rgba(0, 167, 255, 0.10);
  --ihub-sup-2: rgba(0, 167, 255, 0.15);
  --ihub-sup-3: rgba(0, 167, 255, 0.20);
  --ihub-borda: rgba(0, 167, 255, 0.30);
  --ihub-borda-neutra: rgba(255, 255, 255, 0.10);

  /* ---- os dois gradientes de marca ---- */
  --ihub-grad-botao:  radial-gradient(67.54% 100.03% at 50% 0%, var(--ihub-azul-claro) 0%, var(--ihub-azul) 100%);
  --ihub-grad-fundo:  radial-gradient(67.54% 100.03% at 50% 0%, var(--ihub-azul) 0%, var(--ihub-azul-profundo) 100%);
  --ihub-grad-cartao: radial-gradient(120% 100% at 50% 0%, rgba(0, 167, 255, 0.16) 0%, rgba(0, 85, 145, 0.10) 45%, rgba(10, 10, 10, 0.92) 100%);
}

/* --------------------------------------------------------------------------
   VIOLAÇÕES QUE O DESTRAVE DOS FUNDOS REVELOU

   Estes blocos tinham fundo da marca de ORIGEM (verde-limão e cartões brancos)
   escondido pelo lazy-load do construtor. A troca de identidade foi feita com
   eles INVISÍVEIS — então nunca foram trocados. Quando os 586 fundos voltaram,
   voltaram com a cor antiga. Seletor de três classes + !important porque é o
   peso exato da regra herdada que eles vencem.
   -------------------------------------------------------------------------- */

/* verde #22C55E → #15803D: o selo e a pílula da garantia */
.elementor-3386 .elementor-element.elementor-element-45cb817,
.elementor-3386 .elementor-element.elementor-element-10c7f22 {
  background: var(--ihub-grad-fundo) !important;
  border-color: var(--ihub-azul-claro) !important;
}

/* cartões BRANCOS numa página preta → superfície iHub, tingida de azul.
   O texto de dentro já foi clareado (os 43 títulos escuros de 23/09);
   em cartão branco, ele ficaria branco sobre branco. */
.elementor-3386 .elementor-element.elementor-element-6b30c08,
.elementor-3386 .elementor-element.elementor-element-88cb505 {
  background: var(--ihub-grad-cartao) !important;
  border: 1px solid var(--ihub-borda) !important;
}
.elementor-3386 .elementor-element.elementor-element-6b30c08 :is(p, span, li, h1, h2, h3, h4, div),
.elementor-3386 .elementor-element.elementor-element-88cb505 :is(p, span, li, h1, h2, h3, h4, div) {
  color: #fff;
}

/* o bloco "Um aviso": o iHub usa vermelho de acento — fica, na cor exata */
.elementor-3386 .elementor-element.elementor-element-fdb39ff {
  background:
    radial-gradient(103.68% 100.53% at 28.95% 1.7%, rgba(255, 25, 42, 0.12) 0%, rgba(255, 25, 42, 0.03) 60%, transparent 100%),
    var(--ihub-preto) !important;
  border: 1px solid rgba(255, 25, 42, 0.30) !important;
}

/* --------------------------------------------------------------------------
   O LETREIRO GIGANTE "MGX" (620px) atrás da garantia

   Tinha a classe `.verde` e gradiente verde #22C55E → #15803D recortado no
   texto — design da origem, escondido pelo lazy-load até 23/09. Com os
   fundos destravados, as letras M, G e X apareceram como formas verdes
   enormes cortadas pela borda do cartão.

   No iHub, letreiro gigante é marca-d'água: o azul profundo, baixo, para
   não disputar com o texto da garantia que fica por cima.
   -------------------------------------------------------------------------- */
/* ERRO CORRIGIDO 23/09/2026: a primeira versão desta regra valia para TODO
   `.verde` da página — e a classe também é o destaque de títulos ("O que muda
   NA ROTINA DE QUEM ENTRA para a comunidade"). O destaque ficou a 7% de
   opacidade, quase invisível. Agora são dois usos, separados: */

/* 1) o letreiro gigante (620px) atrás da garantia: marca-d'água.
   São os widgets 0438167 e 12c3983 — conferido pelo texto ("MGX"), não pelo
   primeiro `.verde` da página, que é o destaque de um título. */
.elementor-element-0438167 .verde {   /* só o gigante (1411×781); o 12c3983 é um MGX pequeno, visível */
  background: none !important;
  -webkit-text-fill-color: rgba(0, 167, 255, 0.07) !important;
  color: rgba(0, 167, 255, 0.07) !important;
}

/* 2) o destaque de título: o azul do iHub, em gradiente como o resto dos
   destaques da página (.deg2) */
:is(h1, h2, h3) .verde {
  background: linear-gradient(180deg, #4DC3FF 0%, #00A7FF 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #00A7FF !important;
}

/* CAMADAS. Medido em 23/09/2026: o widget do letreiro (1ef145d) vem DEPOIS do
   texto da garantia (8d3769e) no HTML, os dois com position:relative e
   z-index:auto — então o letreiro, ao acender pela revelação, pintava POR
   CIMA do texto e cortava as frases ("Sem f[M]rmulário"). O letreiro vai
   para trás; o texto vem para a frente. */
.elementor-3386 .elementor-element.elementor-element-0438167 {
  z-index: 0 !important;
  pointer-events: none;
}
.elementor-3386 .elementor-element.elementor-element-8d3769e,
.elementor-3386 .elementor-element.elementor-element-8d3769e ~ .elementor-element {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Título "Garantia MGX": preenchimento transparente sem gradiente = texto
   que some. Ele esperava um gradiente que o construtor carregava por JS.
   Branco firme, que é o que o iHub usa em título sobre fundo escuro.
   -------------------------------------------------------------------------- */
:is(h1, h2, h3).elementor-heading-title {
  -webkit-text-fill-color: currentColor;
}
/* …mas o que TEM gradiente próprio continua com ele (preço, destaques) */
:is(.deg, .deg2, .dgfaixa, .verde) {
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   BOTÃO DE COMPRA — "Garantir minha vaga"

   Estava apagado: texto rgb(28,28,28) sobre um fundo que a regra da origem
   pintava de preto (`.elementor-element-2e07f0e .elementor-button`
   { background: #000 }). É o botão mais importante da página. No iHub, o
   botão de conversão é o gradiente azul com texto escuro por cima.
   -------------------------------------------------------------------------- */
.elementor-3386 .elementor-element.elementor-element-2e07f0e .elementor-button,
a[data-cta='compra'].elementor-button {
  background-color: var(--ihub-azul) !important;
  background-image: var(--ihub-grad-botao) !important;
  color: #04121C !important;                 /* 11,4:1 sobre o azul */
  border: 0 !important;
  box-shadow: 0 10px 40px -12px rgba(0, 167, 255, 0.55);
}
a[data-cta='compra'].elementor-button :is(.elementor-button-text, .elementor-button-icon, svg) {
  color: #04121C !important;
  fill: #04121C !important;
}

/* ==========================================================================
   CARTÕES TINGIDOS DE AZUL — a troca que o iHub pede e o clone não tinha

   Medido no código do iHub: as superfícies são rgba(0,167,255, .10 a .30)
   e rgba(0,85,145, .10 a .30). As do clone eram branco translúcido — cinza.
   Nas folhas herdadas a troca foi feita no próprio CSS (20 regras de fundo,
   23/09/2026: cinza claro → azul iHub, cinza escuro → azul profundo, mesma
   opacidade ×1,15). Nas seções próprias, a troca é por variável, aqui.
   ========================================================================== */

/* simulador */
.mgxsim {
  --mgxsim-borda: rgba(0, 167, 255, 0.22);
  --mgxsim-borda-forte: rgba(0, 167, 255, 0.40);
}
.mgxsim .mgxsim-ctrl,
.mgxsim .mgxsim-conta {
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.07), rgba(0, 85, 145, 0.05)) !important;
}
.mgxsim .mgxsim-trinca__item {
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.11), rgba(0, 85, 145, 0.07)) !important;
}
.mgxsim .mgxsim__voltar { background: rgba(0, 167, 255, 0.08) !important; }

/* tabela comparativa e perguntas: as linhas divisórias deixam de ser cinza */
.mgxcmp { --mgxcmp-linha: #0E2233; }
.mgxfaq { --mgxfaq-linha: #0E2233; }

/* os cartões que a folha de composição criou */
.elementor-element-c04a76a > .e-con-inner > .e-con.e-child {
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.08), rgba(0, 85, 145, 0.05)) !important;
}

/* borda de cartão herdada em branco a 10%: no iHub, é a borda acesa em azul */
:where(.e-con.e-child)[class*='elementor-element-'] {
  border-color: rgba(0, 167, 255, 0.20);
}

/* --------------------------------------------------------------------------
   Botão do WhatsApp — estava em verde-limão #22C55E → #15803D com o brilho
   diagonal da origem. É o CTA SECUNDÁRIO (o principal é "Garantir minha
   vaga"), então no iHub ele é azul-profundo com borda acesa, e o ícone do
   WhatsApp é quem diz para onde leva.
   -------------------------------------------------------------------------- */
.elementor-3386 .elementor-element.elementor-element-04dfc4a .elementor-button,
a[data-cta='whatsapp'].elementor-button {
  background-color: #062338 !important;
  background-image: linear-gradient(180deg, rgba(0, 167, 255, 0.22), rgba(0, 85, 145, 0.30)) !important;
  border: 1px solid rgba(51, 184, 255, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 8px 30px -12px rgba(0, 167, 255, 0.5);
}
a[data-cta='whatsapp'].elementor-button :is(svg, path) { fill: #fff !important; color: #fff !important; }

/* "Ficou com dúvida?" — estava à esquerda num cartão com todo o resto no centro */
.elementor-3386 .elementor-element.elementor-element-77b7933 .elementor-heading-title {
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   `.dest` — na origem, destaque VERMELHO e RISCADO (estilo "de/por"). A cor
   foi trocada pelo azul em 23/09, mas o risco ficou: "no dia a dia" aparecia
   riscado no subtítulo dos bônus, o que não faz sentido na frase da MGX.
   -------------------------------------------------------------------------- */
.dest { text-decoration: none !important; }

/* --------------------------------------------------------------------------
   O "MGX" gigante em cada cartão de bônus: 7 logos de 258px, um por cartão.
   Era o lugar do logo da origem; trocado pelo losango MGX, virou exatamente
   a repetição de marca que o dono reprovou. Sai — a ilustração de cada bônus
   já diz o que ele é, e a marca aparece onde identifica (topo e rodapé).
   -------------------------------------------------------------------------- */
img[src$='mgx-losango.svg'][width='258'],
img[data-src$='mgx-losango.svg'][width='258'] {
  display: none !important;
}

/* o título dos bônus: a origem forçava caixa alta pela tipografia global */
.elementor-3386 .elementor-element.elementor-element-0af0b6c .elementor-heading-title {
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   SEÇÃO "Sobre a MGX" — alcance conferido com scripts/alcance.mjs antes:
   · fb5c98d = o logo "MGX DIGITAL" de 80×17 colado ao lado do título que já
     diz "Sobre a MGX" (1 elemento). Redundante: sai.
   · 745dea1 = o corpo da seção (1 elemento), parágrafo longo inteiro em
     negrito pesado. Texto de leitura em peso normal; os trechos em <span>
     ficam como destaque, em branco.
   · 12c3983 = o título; a origem forçava caixa alta pela tipografia global.
   -------------------------------------------------------------------------- */
.elementor-3386 .elementor-element.elementor-element-fb5c98d { display: none !important; }
.elementor-3386 .elementor-element.elementor-element-745dea1 .elementor-heading-title {
  font-weight: 400 !important;
  color: #C9D2DC !important;
  line-height: 1.6 !important;
}
.elementor-3386 .elementor-element.elementor-element-745dea1 .elementor-heading-title span {
  font-weight: 600 !important;
  color: #fff !important;
}
.elementor-3386 .elementor-element.elementor-element-12c3983 .elementor-heading-title {
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   Carrossel "Categorias do TikTok Shop" — no lugar de 8 logos de MARCAS
   REAIS que vieram da origem ("eco nomizare" e outras). Logo de marca sem
   relação comprovada sugere parceria que não existe (e uso indevido de
   marca). Categoria da plataforma é fato, e continua dizendo o que o
   carrossel queria dizer: tem produto de todo tipo para divulgar.
   Quando a MGX tiver a lista real das marcas do catálogo, volta a ser logo.
   -------------------------------------------------------------------------- */
.mgx-categoria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-block-size: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 167, 255, 0.14), rgba(0, 85, 145, 0.10));
  border: 1px solid rgba(0, 167, 255, 0.30);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.mgx-carrossel--marcas > .swiper-slide:has(.mgx-categoria),
.swiper-slide:has(> .mgx-categoria) {
  inline-size: auto !important;
  min-inline-size: 0 !important;
  padding-inline: 0.5rem;
  display: flex !important;
  align-items: center;
}