/* ═══════════════════════════════════════════════════════════════════════════════════════
   O AMBIENTE MONEYGRAM — decisão do dono, 11/09/2026.

   Palavras dele: *"o visual das paginas de moneygram é diferente. a ideia é que o cliente se
   sinta num ambiente da propria moneygram, entao as cores devem ser as da moneygram, deve ter a
   logo da moneygram no topo junto da express change, pode tirar o rodape"*.

   ⚠ ESTA FOLHA NÃO SUBSTITUI A `cambio.css`, ELA VEM DEPOIS. Cartão, grade, FAQ, benefícios,
   ficha de unidade e botão continuam sendo os mesmos componentes do resto do site; o que muda é
   a COR de cada um. Reescrevê-los aqui criaria duas versões do mesmo componente, e a segunda
   envelheceria sozinha no dia em que alguém consertasse a primeira.

   ⚠ O VERMELHO É MEDIDO, NÃO ESCOLHIDO: `#DA291C` saiu do selo da MoneyGram que a empresa já
   publica no rodapé (26.768 pixels dele). É o Pantone 485 da marca.

   ⚠ A FAIXA DO TOPO É PRETA, E NÃO VERMELHA, e isso é consequência do arquivo. O logotipo oficial
   que a empresa publica é a versão para fundo escuro: globo VERMELHO com a palavra em branco.
   Sobre uma faixa vermelha o globo desaparece no fundo e sobra uma seta branca flutuando. O preto
   é a outra cor primária da marca, os dois logotipos funcionam em cima dele, e o vermelho fica
   onde ele trabalha: botão, numeral, destaque. Se a MoneyGram mandar a versão para fundo claro,
   a faixa pode virar vermelha em uma linha.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

body.mg {
  --mg-vermelho: #DA291C;
  /* ⚠ O ESCURO, para texto e borda sobre fundo claro: o `#DA291C` dá 4,87 sobre branco, que passa
     raspando no AA e reprova assim que o fundo deixa de ser branco puro. Medido: 7,07 no branco e
     6,74 no creme. */
  --mg-vermelho-escuro: #A81A10;
  /* ⚠ E O CLARO, para texto sobre a faixa preta: o vermelho da marca dá 3,04 sobre `#111`,
     reprovado para texto normal. Medido: 6,32. */
  --mg-vermelho-claro: #FF8A7E;
  --mg-preto: #111111;
  --mg-preto-2: #1F1F1F;
}

/* ── a faixa do topo, com os dois logotipos ──────────────────────────────────────────── */
.mg-topo { background: var(--mg-preto); color: #FFFFFF; }
.mg-topo__in { max-width: 1100px; margin: 0 auto; padding: var(--e4) var(--e5);
               display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.mg-marcas { display: flex; align-items: center; gap: var(--e4); text-decoration: none; }
/* ⚠ ALTURA IGUAL, largura livre: as duas marcas têm proporções diferentes, e travar a largura
   deformaria uma e deixaria a outra minúscula. `width`/`height` no HTML são os do ARQUIVO, para o
   navegador reservar o espaço e a faixa não pular quando a imagem chega. */
.mg-marcas img { height: 34px; width: auto; display: block; }
.mg-marcas__risco { width: 1px; height: 26px; background: rgba(255,255,255,.28); flex: none; }
.mg-topo__saida { margin-left: auto; color: rgba(255,255,255,.82); text-decoration: none;
                  font-size: .9rem; }
.mg-topo__saida:hover { color: #FFFFFF; text-decoration: underline; }
.mg-topo a:focus-visible { outline: 3px solid var(--mg-vermelho-claro); outline-offset: 3px; }

/* ── o pé, que é só a divulgação obrigatória ─────────────────────────────────────────────
   ⚠ O RODAPÉ DO SITE SAI (pedido do dono), MAS A LINHA LEGAL NÃO SAI COM ELE. A Resolução
   Conjunta BCB/CMN nº 17/2025 (art. 8º, II) e a Res. CMN 4.935/2021 (art. 14, III) exigem que a
   condição de correspondente e o nome da instituição contratante estejam na apresentação ao
   público. Some a navegação, somem as agências, some a faixa de credenciais; fica a frase. */
.mg-pe { background: var(--mg-preto); color: rgba(255,255,255,.66); padding: var(--e5) 0;
         font-size: .82rem; line-height: 1.6; }
.mg-pe__in { max-width: 1100px; margin: 0 auto; padding: 0 var(--e5); }
.mg-pe p { margin: 0 0 var(--e2); max-width: 90ch; }
.mg-pe strong { color: rgba(255,255,255,.92); font-weight: 600; }
.mg-pe a { color: var(--mg-vermelho-claro); }
.mg-pe__contato { display: flex; gap: var(--e5); flex-wrap: wrap; margin-bottom: var(--e4);
                  padding-bottom: var(--e4); border-bottom: 1px solid rgba(255,255,255,.14); }
.mg-pe__contato a { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600; }
.mg-pe__contato a:hover { color: var(--mg-vermelho-claro); }

/* ── o herói e as faixas escuras trocam de cor, não de forma ─────────────────────────── */
body.mg .cx-topo-pagina { background: linear-gradient(160deg, var(--mg-preto), var(--mg-preto-2)); }
body.mg .cx-faixa--escura { background: var(--mg-preto); }
body.mg .cx-cta { background: linear-gradient(160deg, var(--mg-vermelho), #B81F13); }

/* ── botões ──────────────────────────────────────────────────────────────────────────── */
body.mg .cx-btn { background: var(--mg-vermelho); color: #FFFFFF; }
body.mg .cx-btn:hover { background: #C3241A; }
body.mg .cx-btn--ouro { background: var(--mg-vermelho); color: #FFFFFF; }
body.mg .cx-btn--ouro:hover { background: #C3241A; }
body.mg .cx-btn--sec { background: transparent; color: var(--mg-vermelho-escuro);
                       border: 1px solid var(--areia-200); }
body.mg .cx-btn--sec:hover { background: #FFFFFF; color: var(--mg-vermelho);
                             border-color: var(--mg-vermelho); }
/* ⚠ O ANEL DE FOCO TAMBÉM MUDA. Ele era dourado sobre o verde escuro; sobre o preto o dourado
   ainda passa, mas destoa da marca, e sobre o vermelho do botão ele some. */
body.mg .cx-topo-pagina .cx-btn:focus-visible,
body.mg .cx-faixa--escura .cx-btn:focus-visible,
body.mg .cx-cta .cx-btn:focus-visible,
body.mg .cx-topo-pagina a:focus-visible,
body.mg .cx-faixa--escura a:focus-visible { outline: 3px solid var(--mg-vermelho-claro); }
body.mg .cx-btn:focus-visible { outline: 3px solid var(--mg-vermelho-escuro); }

/* ── os destaques: rótulo, marcador e o "+" do FAQ ───────────────────────────────────── */
body.mg .cx-eyebrow { color: var(--mg-vermelho-escuro); }
body.mg .cx-topo-pagina .cx-eyebrow,
body.mg .cx-faixa--escura .cx-eyebrow { color: var(--mg-vermelho-claro); }
body.mg .cx-beneficios .cx-tick { background: var(--mg-vermelho); color: #FFFFFF; }
body.mg .cx-faixa--clara .cx-beneficios .cx-tick,
body.mg .cx-faixa--creme .cx-beneficios .cx-tick { background: var(--mg-vermelho); color: #FFFFFF; }
body.mg .cx-topo-pagina .cx-beneficios .cx-tick { background: var(--mg-vermelho); color: #FFFFFF; }
body.mg .cx-faq summary::after { color: var(--mg-vermelho-escuro); }
body.mg .cx-unid__nome { color: var(--mg-preto); }
body.mg .cx-faixa--escura .cx-etiq { color: var(--mg-vermelho-claro); }

/* ── cor de link ─────────────────────────────────────────────────────────────────────────
   ⚠ A ORDEM DESTE BLOCO É O COMPORTAMENTO, e ele já me mordeu uma vez aqui. `body.mg a` tem
   especificidade 0,1,1 e `.mg-topo__saida` tem 0,1,0: a regra genérica vencia a específica e
   pintava o link do topo de vermelho ESCURO sobre a faixa preta, razão 1,6. O mesmo valia para o
   pé. A regra genérica vem primeiro e as superfícies escuras vêm depois, com um seletor que ganha
   por especificidade e não por sorte de ordem.

   É a mesma mina de `css-global-antigo-e-mina` e da exceção `--tres` no fim da `cambio.css`: HTML
   certo, classe certa, cascata contra. Só medindo no navegador aparece. */
body.mg a { color: var(--mg-vermelho-escuro); }
body.mg .mg-topo a,
body.mg .mg-pe a,
body.mg .cx-faixa--escura a,
body.mg .cx-topo-pagina a,
body.mg .cx-cta a { color: var(--mg-vermelho-claro); }
body.mg .mg-topo__saida { color: rgba(255,255,255,.82); }
body.mg .mg-topo__saida:hover { color: #FFFFFF; }
body.mg .mg-pe__contato a { color: rgba(255,255,255,.88); }
body.mg .mg-pe__contato a:hover { color: var(--mg-vermelho-claro); }
body.mg .cx-faixa--escura .cx-unid__link { color: var(--mg-vermelho-claro); }
/* ⚠ E O BOTÃO NÃO É LINK COMUM: a regra genérica acima o alcançaria (ele é um `<a>`) e pintaria o
   texto do botão vermelho em cima do fundo vermelho.

   ⚠ `a.cx-btn`, E NÃO `.cx-btn`, e a diferença é um botão ilegível. `body.mg .cx-topo-pagina a`
   tem especificidade 0,2,2 e `body.mg .cx-btn` tem 0,2,1: dentro do herói, a regra de superfície
   escura vencia a do botão e pintava "Quero enviar para o exterior" de vermelho claro em cima do
   vermelho da marca. Razão 2,13, medida. Com `a.cx-btn` as duas empatam em 0,2,2 e esta, que vem
   depois, ganha. */
body.mg a.cx-btn { color: #FFFFFF; }
body.mg a.cx-btn--sec { color: var(--mg-vermelho-escuro); }

/* ⚠ E O NOME DA AGÊNCIA VOLTA A SER BRANCO NA FAIXA ESCURA. A regra de cima
   (`body.mg .cx-unid__nome`, 0,2,0) empata com a `.cx-faixa--escura .cx-unid__nome` da
   `cambio.css` (0,2,0) e, por vir numa folha posterior, vencia: o nome da loja ficava em `#111`
   sobre o preto, razão 1,15. Mesmo empate, mesmo desfecho, outro elemento. */
body.mg .cx-faixa--escura .cx-unid__nome { color: #FFFFFF; }

/* ⚠ E O PARÁGRAFO DA CHAMADA FINAL PERDE A TRANSPARÊNCIA. Branco a 85% sobre o verde escuro
   passava com folga; sobre o vermelho da marca dá 3,85, reprovado. Em branco cheio, 4,87. */
body.mg .cx-cta p { color: #FFFFFF; }

/* ── o passo a passo numerado, grande ────────────────────────────────────────────────── */
.mg-passos { counter-reset: mg; list-style: none; margin: 0; padding: 0; display: grid;
             gap: var(--e5); }
.mg-passos li { position: relative; padding-left: 60px; }
.mg-passos li::before { counter-increment: mg; content: counter(mg); position: absolute; left: 0;
                        top: -2px; width: 42px; height: 42px; border-radius: 50%;
                        background: var(--mg-vermelho); color: #FFFFFF; display: grid;
                        place-items: center; font-weight: 800; font-size: 1.05rem; }
.mg-passos strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.mg-passos span { color: var(--tinta-fraca); font-size: .94rem; line-height: 1.55; }
.cx-faixa--escura .mg-passos span { color: rgba(255,255,255,.78); }
/* ⚠ O LINK DENTRO DA FRASE É SUBLINHADO, e não só colorido: "Para ir agora clique aqui" mora no
   meio de um parágrafo cinza, e quem não distingue matiz não veria que ali há um caminho. */
.mg-passos a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
/* dentro do cartão do hub os passos ficam mais compactos: são dois blocos lado a lado */
.cx-cartao .mg-passos { gap: var(--e4); }
.cx-cartao .mg-passos li { padding-left: 46px; }
.cx-cartao .mg-passos li::before { width: 32px; height: 32px; font-size: .92rem; top: 0; }
.cx-cartao .mg-passos strong { font-size: 1rem; }

/* ── a página focada é mais estreita: uma coisa de cada vez ──────────────────────────── */
.mg-foco .cx-faixa__in { max-width: 880px; }
.mg-foco .cx-topo-pagina { padding: var(--e7) 0; }

@media (max-width: 600px) {
  .mg-topo__in { padding: var(--e3) var(--e4); gap: var(--e3); }
  .mg-marcas { gap: var(--e3); }
  .mg-marcas img { height: 26px; }
  .mg-topo__saida { font-size: .82rem; }
}


/* ⚠ O BANNER DE CONSENTIMENTO TAMBÉM É DO AMBIENTE. Ele nasce verde (a cor do site do câmbio) e
   aqui o ambiente é o da MoneyGram: um retângulo verde flutuando sobre o preto entregaria que são
   dois sites colados. E não é só cor — sem estas três linhas, o link sai em `--mg-vermelho-escuro`
   sobre verde-escuro e o "Só o necessário" some, porque `body.mg .cx-btn--sec` (0,2,1) vence
   `.cx-cookies__acoes .cx-btn--sec` (0,2,0). Especificidade, de novo. */
body.mg .cx-cookies { background: var(--mg-preto); }
body.mg .cx-cookies a { color: var(--mg-vermelho-claro); }
body.mg .cx-cookies .cx-btn--sec { color: #FFFFFF; background: transparent;
                                   border-color: rgba(255, 255, 255, .55); }