/* ═══════════════════════════════════════════════════════════════════════════════════════
   O SITE DO CÂMBIO — folha própria.

   ⚠ NÃO HERDA `estilo.css`. As regras globais sem classe do balcão (`input, select {width:100%;
   border:2px solid #333}` e `form label:not(.check){text-transform:uppercase}`) já quebraram
   componente de formulário DUAS VEZES, e esta página é feita de `input` e `label`. O site do ouro
   carrega 28 cópias do bloco de tokens porque é clone fiel de um WordPress; aqui não há essa
   justificativa. Ver a memória `css-global-antigo-e-mina`.

   ⚠ A PALETA JÁ ERA A DO OURO. Medi os tokens do tema do Squarespace: `#063C30` (contra
   `--green-900:#063B2E` do DESIGN.md) e `#DBC076` (que é `--gold-400:#DBC078`, letra por letra).
   "Mais parecido com o site do ouro" nunca foi sobre cor — é sobre layout, componente e ritmo.

   ⚠ SEM BEBAS NEUE (decisão do dono, 11/09/2026). A fonte de título do site velho NÃO TEM
   MINÚSCULA — era ela que produzia fisicamente os títulos em caixa alta que batem de frente com a
   regra permanente do projeto ("caixa alta só em rótulo, nunca em frase"). Enquanto ela estivesse
   aqui, a regra seria impossível de cumprir.

   ⚠ FONTE DO SISTEMA, e não do Google. Zero requisição externa, zero pergunta de LGPD sobre IP do
   visitante indo para o Google Fonts, e a primeira pintura não espera download nenhum.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --verde-900: #063C30;   --verde-800: #0A5142;   --verde-700: #0E6653;
  --ouro-400:  #DBC076;
  /* ⚠ O 800 É PARA TEXTO E BORDA em fundo claro: o 400 reprova em contraste. E ele é #755B26, e
     não #8A6D2E, porque o valor anterior dava 4,42 sobre o creme (--areia-100) contra o mínimo de
     4,5 do AA. Passa raspando é reprovado. Medido, não escolhido a olho: 5,80 no creme, 6,17 no
     areia e 6,40 no branco. */
  --ouro-800:  #755B26;
  --areia-050: #FAFBFB;   --areia-100: #F2F4F4;   --areia-200: #E4E8E7;
  /* ⚠ O CREME É DA FAIXA DE CREDENCIAIS, e de mais nada. A faixa estava em `--areia-100`, que é
     um dos fundos normais da página (o mesmo das seções alternadas) — e credencial que se confunde
     com seção comum não se destaca. Este é o único tom QUENTE da folha, como no ouro.express, onde
     a faixa de confiança usa creme contra o cinza do resto. Medido sobre ele: 5,53 no `--ouro-800`
     (rótulo) e 10,70 no `--verde-900` (título), contra o mínimo de 4,5 do AA. */
  --creme-100: #F4EEDF;   --creme-borda: #E7DCC2;
  --tinta:     #14201C;   --tinta-fraca: #5A6B65;
  --branco:    #FFFFFF;
  --alto:      #1B7A5A;   /* positivo */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
  --raio: 12px; --raio-g: 20px;
  --sombra: 0 1px 2px rgba(6,60,48,.06), 0 8px 24px rgba(6,60,48,.07);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: var(--areia-050);
       line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--verde-700); }
img { max-width: 100%; }

/* ── a casca ─────────────────────────────────────────────────────────────────────────── */
.cx-topo { background: var(--verde-900); color: var(--branco); }
.cx-topo__in { max-width: 1100px; margin: 0 auto; padding: var(--e4) var(--e5);
               display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
/* ⚠ A MARCA É A LOGO (pedido do dono, 11/09/2026), e a altura é o que manda: o arquivo é largo e
   baixo, então travar a largura o deformaria. `display:flex` tira o espaço fantasma que a linha de
   base do texto deixa embaixo de uma imagem inline. */
.cx-marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.cx-marca img { height: 46px; width: auto; display: block; }
@media (max-width: 600px) { .cx-marca img { height: 34px; } }
.cx-nav { margin-left: auto; display: flex; gap: var(--e5); flex-wrap: wrap; }
.cx-nav a { color: rgba(255,255,255,.86); text-decoration: none; font-size: .92rem; }
.cx-nav a:hover { color: var(--ouro-400); }
.cx-nav a[aria-current] { color: var(--branco); font-weight: 700;
                          box-shadow: inset 0 -2px 0 var(--ouro-400); }

.cx-corpo { max-width: 1100px; margin: 0 auto; padding: var(--e6) var(--e5) var(--e7); }

/* ── o herói: a cotação é o conteúdo, não a decoração ────────────────────────────────── */
.cx-heroi { background: linear-gradient(160deg, var(--verde-900), var(--verde-800));
            color: var(--branco); border-radius: var(--raio-g); padding: var(--e6);
            box-shadow: var(--sombra); }
.cx-heroi h1 { margin: 0 0 var(--e2); font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; }
.cx-heroi__linha { margin: 0 0 var(--e5); color: rgba(255,255,255,.82); max-width: 52ch; }
.cx-precos { display: flex; gap: var(--e5); flex-wrap: wrap; }
.cx-preco { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
            border-radius: var(--raio); padding: var(--e4) var(--e5); min-width: 190px; flex: 1; }
.cx-preco__rot { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--ouro-400); margin-bottom: var(--e1); }
/* ⚠ TABULAR-NUMS: sem isso o número "pula" de largura quando o preço muda, e a página parece
   instável justamente no elemento que precisa transmitir firmeza. */
.cx-preco__n { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 700; letter-spacing: -.02em;
               font-variant-numeric: tabular-nums; }
.cx-preco__n small { font-size: .95rem; font-weight: 400; opacity: .7; }
.cx-preco--consulta { display: flex; flex-direction: column; justify-content: center; }

/* ⚠ A HORA NÃO É RODAPÉ DO PREÇO, É PARTE DELE. O boletim do Bacen não muda depois das 13h10 e
   atravessa o fim de semana: preço sem hora aqui seria promessa que o dado não cumpre. */
.cx-fonte { margin: var(--e4) 0 0; font-size: .82rem; color: rgba(255,255,255,.66); }
.cx-fonte strong { color: rgba(255,255,255,.9); font-weight: 600; }
.cx-fonte--velha { color: #FFD9A8; }

/* ── o simulador ─────────────────────────────────────────────────────────────────────── */
.cx-sim { margin-top: var(--e5); background: var(--branco); border-radius: var(--raio);
          padding: var(--e5); color: var(--tinta); }
.cx-sim__titulo { margin: 0 0 var(--e3); font-size: .95rem; font-weight: 700; }
.cx-sim__linha { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; }
.cx-campo { flex: 1; min-width: 150px; }
.cx-campo label { display: block; font-size: .78rem; color: var(--tinta-fraca);
                  margin-bottom: var(--e1); }
/* largura e borda EXPLÍCITAS: é a defesa contra a regra global do balcão, se um dia esta folha
   for carregada junto com aquela. */
.cx-campo input { width: 100%; border: 1px solid #C3CCC9; border-radius: 10px;
                  padding: var(--e3) var(--e4); font: inherit; font-size: 1.05rem;
                  background: var(--areia-050); color: var(--tinta);
                  font-variant-numeric: tabular-nums; text-transform: none; }
.cx-campo input:focus-visible { outline: 3px solid var(--ouro-800); outline-offset: 1px;
                                border-color: var(--verde-700); background: var(--branco); }
.cx-sim__igual { align-self: center; color: var(--tinta-fraca); padding: 0 var(--e1) var(--e3); }
.cx-sim__nota { margin: var(--e3) 0 0; font-size: .8rem; color: var(--tinta-fraca); }

/* ── botões ──────────────────────────────────────────────────────────────────────────── */
.cx-btn { display: inline-block; background: var(--verde-700); color: var(--branco);
          text-decoration: none; border: 0; border-radius: 10px; padding: var(--e3) var(--e5);
          font: inherit; font-weight: 600; cursor: pointer;
          transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cx-btn:hover { background: var(--verde-800); transform: translateY(-1px);
                box-shadow: 0 6px 18px rgba(6,60,48,.22); }
.cx-btn:focus-visible { outline: 3px solid var(--ouro-800); outline-offset: 2px; }

/* ⚠ O ANEL DE FOCO SOME EM FUNDO ESCURO, e `outline-offset: 2px` piora: o anel é desenhado sobre
   o VERDE, não sobre o botão, então o contraste que ele teria contra o dourado do próprio botão
   não socorre. Em fundo escuro o anel vira claro. Sem isto, quem navega por teclado perde de vista
   onde está justamente na chamada final e no rodapé, que são os dois lugares de conversão. */
.cx-topo-pagina .cx-btn:focus-visible,
.cx-faixa--escura .cx-btn:focus-visible,
.cx-cta .cx-btn:focus-visible,
.cx-rodape .cx-btn:focus-visible,
.cx-rodape a:focus-visible,
.cx-faixa--escura a:focus-visible,
.cx-topo-pagina a:focus-visible { outline: 3px solid var(--ouro-400); outline-offset: 2px; }
.cx-btn--ouro { background: var(--ouro-400); color: var(--verde-900); }
.cx-btn--ouro:hover { background: #E8D08C; }
.cx-btn--claro { background: transparent; color: var(--branco);
                 border: 1px solid rgba(255,255,255,.35); }
.cx-btn--sec { background: transparent; color: var(--verde-700);
               border: 1px solid var(--areia-200); }
.cx-btn--sec:hover { background: var(--branco); color: var(--verde-800); border-color: var(--verde-700); }

/* ── blocos de conteúdo ──────────────────────────────────────────────────────────────── */
.cx-secao { margin-top: var(--e7); }
.cx-secao > h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 var(--e4); }
.cx-texto p { max-width: 68ch; }
.cx-cartao { background: var(--branco); border: 1px solid var(--areia-200);
             border-radius: var(--raio); padding: var(--e5); box-shadow: var(--sombra); }
/* ⚠ BRANCO NO BRANCO, DE NOVO. O cartão é branco, e dentro do herói ele herda `color:#fff` do
   `.cx-topo-pagina`: o título e o texto somem. É exatamente o defeito que o `.cx-widget` já teve,
   e ele voltou pelo elemento do lado. Na `.cx-faixa--escura` não acontece porque LÁ o cartão é
   translúcido, com regra própria. Cor de texto declarada, nunca herdada de um ancestral escuro. */
.cx-topo-pagina .cx-cartao { color: var(--tinta); }
/* ⚠ COLUNAS FIXAS, E NÃO `auto-fit`. Com `auto-fit` o número de colunas depende da largura da
   janela, e seis cartões viravam 4+2 num monitor e 3+3 noutro: a última fila ficava capenga sem
   ninguém conseguir prever quando. Com 3 e 2 fixos, basta a contagem de itens ser múltipla de 6
   para toda fila fechar completa em qualquer tela. */
.cx-grade { display: grid; gap: var(--e4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx-grade { grid-template-columns: 1fr; } }

/* Três itens que nunca devem virar 2+1: caem direto para uma coluna. */
.cx-grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Dois parágrafos lado a lado, sempre iguais. */
.cx-duas-iguais { display: grid; gap: var(--e5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .cx-duas-iguais { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .cx-grade--tres { grid-template-columns: 1fr; } }

.cx-faq details { border-bottom: 1px solid var(--areia-200); padding: var(--e4) 0; }
.cx-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: "+"; float: right; color: var(--ouro-800); font-weight: 700; }
.cx-faq details[open] summary::after { content: "–"; }
.cx-faq p { margin: var(--e3) 0 0; max-width: 68ch; color: var(--tinta-fraca); }

/* ── a tabela de cotações ────────────────────────────────────────────────────────────── */
.cx-tab { width: 100%; border-collapse: collapse; background: var(--branco);
          border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.cx-tab th, .cx-tab td { padding: var(--e3) var(--e4); text-align: left;
                         border-bottom: 1px solid var(--areia-100); }
.cx-tab th { background: var(--areia-100); font-size: .74rem; text-transform: uppercase;
             letter-spacing: .08em; color: var(--tinta-fraca); }
.cx-tab td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cx-tab tr:last-child td { border-bottom: 0; }
/* ⚠ SUBLINHADO SEMPRE nos links da tabela. "consultar" aparece como link numa linha e como texto
   simples na outra, e a única diferença era a cor: 1,22 de contraste entre as duas, invisível para
   quem não distingue cor. Sublinhado é a distinção que não depende de enxergar matiz. */
.cx-tab a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cx-tab a:hover { text-decoration-thickness: 2px; }
.cx-rolagem { overflow-x: auto; }
/* ⚠ NO CELULAR A COLUNA "PAÍS" SAI (decisão do dono, 14/09/2026). Com as quatro colunas a tabela
   precisa de 448px, e a caixa de um celular de 390px tem 342: a coluna "Nós pagamos" ficava fora da
   tela, atrás de uma rolagem lateral que nada indicava. A bandeira e o nome da moeda já dizem de
   onde ela é. Só tirar a coluna não basta em 360px, por isso o respiro das células também encolhe.
   Medido no navegador: antes da mudança a tabela vazava em qualquer largura abaixo de 500px. */
@media (max-width: 600px) {
  .cx-tab .cx-tab__pais { display: none; }
  .cx-tab th, .cx-tab td { padding-left: var(--e3); padding-right: var(--e3); }
}
/* ⚠ E ABAIXO DE 400px O RESPIRO ENCOLHE MAIS: sem a coluna País e com o respiro de cima, a tabela
   ainda passava 3px da caixa em 360px de largura. */
@media (max-width: 400px) {
  .cx-tab th, .cx-tab td { padding-left: var(--e2); padding-right: var(--e2); }
  .cx-tab th { letter-spacing: .04em; }
}

/* ── lojas ───────────────────────────────────────────────────────────────────────────── */
.cx-loja__nome { font-weight: 700; margin: 0 0 var(--e2); }
.cx-loja__grade { margin: 0; font-size: .86rem; color: var(--tinta-fraca); }
.cx-loja__grade div { display: flex; justify-content: space-between; gap: var(--e3);
                      padding: 2px 0; }

/* ── rodapé, com a divulgação obrigatória ────────────────────────────────────────────── */
.cx-rodape { background: var(--verde-900); color: rgba(255,255,255,.72); margin-top: var(--e7); }
/* ⚠ A REGRA ANTIGA `.cx-rodape a` FOI EMBORA, e não é limpeza: ela tem especificidade 0,1,1 e
   vencia `.cx-btn--ouro` (0,1,0), pintando o texto do botão dourado DE DOURADO. O botão "Ver
   cotações" do rodapé aparecia como um retângulo vazio. Cor de link agora é declarada por bloco,
   onde ela é escolha, e nunca por descendência genérica. */
.cx-legal { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid rgba(255,255,255,.14);
            max-width: 80ch; }

.cx-aviso { background: #FFF6E6; border: 1px solid #F0DCB4; border-radius: var(--raio);
            padding: var(--e4) var(--e5); }

/* ═══ OS EFEITOS ═══
   Todos em CSS puro, sem biblioteca. Cada um serve à compreensão do produto — nenhum existe
   só para se mexer. E todos desligam em `prefers-reduced-motion`: acessibilidade não é opcional. */

/* 1. o número que TROCA. Quando o preço muda entre recarregamentos, ele acende de leve em vez de
      pular — mostra que mudou sem dar impressão de instabilidade. */
@keyframes cx-acende { from { color: var(--ouro-400); } to { color: inherit; } }
.cx-preco__n { animation: cx-acende .9s ease-out; }

/* 2. revelação ao rolar, sem JavaScript nenhum: puro CSS moderno, e quem não suporta vê o
      conteúdo normalmente (é o comportamento padrão do `animation-timeline` ausente). */
@supports (animation-timeline: view()) {
  .cx-secao { animation: cx-sobe linear both; animation-timeline: view();
              animation-range: entry 0% entry 42%; }
  @keyframes cx-sobe { from { opacity: 0; transform: translateY(14px); }
                       to   { opacity: 1; transform: none; } }
}

/* 3. o cartão que responde ao ponteiro — confirma que é clicável antes do clique. */
.cx-cartao { transition: transform .16s ease, box-shadow .16s ease; }
a.cx-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(6,60,48,.13); }
/* ⚠ E O CARTÃO QUE É LINK NÃO VIRA TEXTO SUBLINHADO. O cartão inteiro é a área clicável; deixar o
   sublinhado do link por cima faz o título parecer um link DENTRO do cartão, e o resto do cartão
   parecer morto.
   ⚠ ISTO JÁ EXISTIA, REPETIDO À MÃO em três templates (`style="text-decoration:none; color:inherit"`
   em cada `<a class="cx-cartao">`). A página de 404 foi a quarta, esqueceu o inline e apareceu com
   os títulos sublinhados. Declaração inline é regra que cada página nova precisa lembrar de copiar;
   aqui ela é estrutural, e os três inlines saíram. */
a.cx-cartao { text-decoration: none; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cx-secao { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 640px) {
  .cx-corpo { padding: var(--e5) var(--e4) var(--e6); }
  .cx-heroi { padding: var(--e5) var(--e4); border-radius: var(--raio); }
  .cx-nav { gap: var(--e4); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   O SIMULADOR — refeito no formato do site antigo (pedido do dono, 11/09/2026).

   A minha primeira versão era dois campos numa linha, e ele recusou: "tem que ser no mínimo muito
   parecido com o do site antigo, só com algumas mudanças pra contemplar o que conversamos".

   A anatomia é a do print que ele mandou: abas COMPRAR/VENDER em cima, painel com a moeda de um
   lado e o valor do outro, divisor, a linha do real embaixo, e só então o resultado.

   ⚠ O QUE MUDA EM RELAÇÃO AO ANTIGO, e é o miolo: onde ele dizia "Cotação final: R$ 5.26. Taxas já
   incluídas. Pagamento em espécie. PIX, acréscimo de 3%", agora diz as DUAS cotações lado a lado,
   em espécie e via PIX, com o "por quê" logo abaixo, pequeno.

   ⚠ E A LINHA DO PIX SÓ EXISTE QUANDO NÓS VENDEMOS (aba COMPRAR). Quando o cliente vende para nós,
   quem paga somos nós, e não há acréscimo nenhum. O site antigo mostrava a frase do PIX nas duas
   abas, o que é errado.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ COR PRÓPRIA, E ELA NÃO É DECORAÇÃO. O widget mora DENTRO do herói escuro, que define
   `color: var(--branco)`. Sem declarar a dele, todo texto do widget que não tivesse cor explícita
   herdava branco e ficava BRANCO SOBRE BRANCO: a linha "Cotação em espécie" sumiu por completo, e
   só a do PIX aparecia, porque essa tinha cor própria. O HTML estava certo; quebrou na cascata, e
   nenhum teste de HTML pegaria. É a mesma mina de `css-global-antigo-e-mina`. */
.cx-widget { color: var(--tinta);
             background: var(--branco); border-radius: var(--raio); padding: var(--e4);
             box-shadow: 0 2px 4px rgba(6,60,48,.05), 0 14px 34px rgba(6,60,48,.11);
             max-width: 400px; }

/* ── as abas ─────────────────────────────────────────────────────────────────────────── */
.cx-abas { display: grid; grid-template-columns: 1fr 1fr; background: var(--areia-100);
           border-radius: 10px; padding: 3px; margin-bottom: var(--e3); }
.cx-abas label { position: relative; }
.cx-abas input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
                 cursor: pointer; }
.cx-abas span { display: block; text-align: center; padding: var(--e2) var(--e2);
                border-radius: 8px; font-weight: 700; font-size: .78rem; letter-spacing: .04em;
                color: var(--tinta-fraca); transition: background .18s ease, color .18s ease; }
.cx-abas input:checked + span { background: var(--verde-700); color: var(--branco);
                                box-shadow: 0 2px 8px rgba(14,102,83,.3); }
.cx-abas input:focus-visible + span { outline: 3px solid var(--ouro-800); outline-offset: 2px; }

/* ── o painel dos dois valores ───────────────────────────────────────────────────────── */
.cx-painel { background: var(--areia-100); border-radius: 12px; padding: var(--e2) var(--e4); }
.cx-linha { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; }
.cx-linha__moeda { display: flex; align-items: center; gap: var(--e2); font-weight: 700;
                   font-size: .95rem; flex: 0 0 auto; }
.cx-linha__moeda select { border: 0; background: transparent; font: inherit; font-weight: 700;
                          color: var(--tinta); padding: 2px 0; cursor: pointer; max-width: 10.5rem;
                          text-transform: none; width: auto; }
.cx-linha__moeda select:focus-visible { outline: 3px solid var(--ouro-800); outline-offset: 2px; }
.cx-linha__bandeira { font-size: 1.15rem; line-height: 1; }
.cx-linha__dir { margin-left: auto; text-align: right; min-width: 0; }
.cx-linha__rot { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--tinta-fraca); font-weight: 600; }
/* ⚠ O campo NÃO parece campo até receber foco, igual ao do print: ele é o número grande, com um
   lápis ao lado. Borda de formulário aqui rouba a atenção do valor, que é o conteúdo. */
.cx-linha__val { display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); }
.cx-linha__val input { border: 0; background: transparent; font: inherit; font-size: 1.32rem;
                       font-weight: 700; letter-spacing: -.02em; text-align: right;
                       font-variant-numeric: tabular-nums; color: var(--tinta); width: 100%;
                       max-width: 9.5rem; padding: 2px 0; text-transform: none; }
.cx-linha__val input:focus-visible { outline: 3px solid var(--ouro-800); outline-offset: 3px;
                                     border-radius: 6px; }
.cx-linha__val svg { flex: 0 0 auto; color: var(--tinta-fraca); }
.cx-divisor { height: 1px; background: var(--areia-200);
              margin-inline: calc(var(--e4) * -1); }

/* ── o resultado ─────────────────────────────────────────────────────────────────────── */
.cx-result { text-align: center; margin: var(--e3) 0 0; }
.cx-result__cot { font-size: .94rem; line-height: 1.45; margin: 0; }
.cx-result__cot strong { font-weight: 700; }
.cx-result__pix { color: var(--tinta-fraca); }
/* ⚠ "Taxas já incluídas." e o "por quê" na MESMA LINHA (pedido do dono, 11/09/2026). Em linhas
   separadas o "por quê" virava um terceiro parágrafo e o bloco de resultado ficava com cara de
   texto corrido; ao lado, ele é o rodapé da frase que explica. */
/* ⚠ TEXTO CORRIDO, e não flex. Como dois itens de flex, "Taxas já incluídas." e o "por quê" eram
   dois blocos que quebravam JUNTOS para linhas separadas assim que não coubessem. Em fluxo normal
   o "por quê" continua a frase e só desce a parte que não couber, que é o que "logo ao lado"
   quer dizer. */
.cx-result__taxas { margin: var(--e1) 0 0; font-size: .8rem; color: var(--tinta-fraca);
                    line-height: 1.5; }
.cx-porque { margin: 0; display: inline; }
.cx-porque summary { font-size: .78rem; color: var(--verde-700); cursor: pointer;
                     text-decoration: underline; list-style: none; display: inline; }
.cx-porque summary::-webkit-details-marker { display: none; }
.cx-porque p { text-align: left; font-size: .82rem; color: var(--tinta-fraca);
               margin: var(--e3) 0 0; max-width: 46ch; margin-inline: auto; }

/* ── agência e botão ─────────────────────────────────────────────────────────────────── */
.cx-widget select.cx-agencia { width: 100%; margin-top: var(--e3); border: 1px solid #C3CCC9;
                               border-radius: 10px; padding: var(--e2) var(--e3); font: inherit;
                               font-size: .92rem;
                               background: var(--branco); color: var(--tinta); cursor: pointer;
                               text-transform: none; }
.cx-widget select.cx-agencia:focus-visible { outline: 3px solid var(--ouro-800); outline-offset: 1px; }
.cx-widget .cx-btn--largo { display: block; width: 100%; text-align: center; margin-top: var(--e2);
                            padding: var(--e3); font-size: .95rem; }

/* ⚠ A TROCA DE ABA É SÓ CSS. Sem JavaScript o formulário manda o rádio para o servidor e a página
   volta na aba certa; com JavaScript, nada recarrega. As duas metades do resultado existem no HTML
   e uma delas fica escondida — assim o rastreador lê os dois preços, e o cliente lê um. */
.cx-widget [data-lado="vender"] { display: none; }
.cx-widget:has(#lado-vender:checked) [data-lado="vender"] { display: initial; }
.cx-widget:has(#lado-vender:checked) [data-lado="comprar"] { display: none; }

/* ⚠ NO CELULAR O NÚMERO É QUEM MANDA. Com a linha apertada, o seletor de moeda empurrava o campo
   e "1.000,00" saía cortado como "1.00C" — justamente o valor que a pessoa está editando. Aqui o
   lado direito ganha o espaço que sobra e o seletor cede. */
@media (max-width: 480px) {
  .cx-widget { padding: var(--e4); }
  .cx-painel { padding: var(--e3) var(--e4); }
  .cx-divisor { margin-inline: calc(var(--e4) * -1); }
  .cx-linha { gap: var(--e2); }
  .cx-linha__moeda { flex: 0 1 auto; min-width: 0; }
  .cx-linha__moeda select { max-width: 6rem; font-size: .92rem; }
  .cx-linha__dir { flex: 1 1 auto; min-width: 0; }
  .cx-linha__val input { font-size: 1.28rem; max-width: none; }
  .cx-linha__rot { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   FAIXAS, BENEFÍCIOS E CHAMADAS — a anatomia de site de empresa.

   ⚠ A PRIMEIRA VERSÃO DESTAS PÁGINAS ERA "informação jogada", nas palavras do dono (11/09/2026):
   herói, um texto, uma lista de lojas. O site antigo, com todos os defeitos dele, tinha anatomia
   de empresa — onde comprar, onde vender, por que conosco, dúvidas, agências, chamada final, cada
   seção com um botão. É essa estrutura que volta aqui, com o ritmo de faixas alternadas que é a
   assinatura visual do câmbio (o site do ouro usa campo creme contínuo).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.cx-faixa { padding: var(--e7) 0; }
.cx-faixa__in { max-width: 1100px; margin: 0 auto; padding: 0 var(--e5); }
.cx-faixa--escura { background: var(--verde-900); color: var(--branco); }
.cx-faixa--escura h2 { color: var(--branco); }
.cx-faixa--escura p { color: rgba(255,255,255,.82); }
.cx-faixa--escura .cx-cartao { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
                               box-shadow: none; }
.cx-faixa--escura .cx-cartao p { color: rgba(255,255,255,.82); }
.cx-faixa--escura .cx-loja__nome { color: var(--branco); }
/* ⚠ O HORÁRIO NA FAIXA ESCURA. `--tinta-fraca` é cinza de fundo claro: sobre o verde escuro ele
   reprova em contraste e a grade da agência fica quase ilegível, que é justamente a informação
   que a pessoa veio buscar. */
.cx-faixa--escura .cx-loja__grade,
.cx-faixa--escura .cx-loja__grade div { color: rgba(255,255,255,.78); }
.cx-faixa--clara { background: var(--areia-050); }
.cx-faixa--creme { background: var(--areia-100); }

.cx-faixa h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.015em; margin: 0 0 var(--e4); }
.cx-faixa .cx-chamada { margin-top: var(--e5); }

/* duas colunas: texto de um lado, algo do outro (o widget, um cartão, a lista) */
.cx-duas { display: grid; gap: var(--e6); align-items: start;
           grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
@media (max-width: 900px) {
  .cx-duas { grid-template-columns: 1fr; }
  /* ⚠ NO CELULAR O SIMULADOR VEM PRIMEIRO. Ele é a peça que a pessoa veio usar, e empilhado
     depois do texto ele nascia abaixo da dobra inteira. O site antigo também abria com ele. */
  .cx-topo-pagina .cx-duas > .cx-widget { order: -1; }
  .cx-widget { max-width: none; }
}

/* ── benefícios, com marcador próprio ────────────────────────────────────────────────── */
.cx-beneficios { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4);
                 grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cx-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx-beneficios { grid-template-columns: 1fr; } }
/* No herói são dois, e dois em três colunas deixa um buraco. */
.cx-topo-pagina .cx-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .cx-topo-pagina .cx-beneficios { grid-template-columns: 1fr; } }
.cx-cartao .cx-beneficios { grid-template-columns: 1fr; gap: var(--e3); }
.cx-beneficios li { display: flex; gap: var(--e3); align-items: flex-start; }
.cx-beneficios .cx-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
                          background: var(--ouro-400); color: var(--verde-900); display: grid;
                          place-items: center; font-size: .72rem; font-weight: 800; margin-top: 2px; }
.cx-faixa--clara .cx-beneficios .cx-tick,
.cx-faixa--creme .cx-beneficios .cx-tick { background: var(--verde-700); color: var(--branco); }
.cx-beneficios strong { display: block; }
.cx-beneficios span.d { font-size: .9rem; color: var(--tinta-fraca); }
/* ⚠ O HERÓI TAMBÉM É FUNDO ESCURO, e não é `.cx-faixa--escura`. Sem esta segunda classe a
   descrição do benefício ficava em cinza de fundo claro sobre verde escuro: razão 2,2, reprovada.
   Contraste se confere medindo, não olhando. */
.cx-faixa--escura .cx-beneficios span.d,
.cx-topo-pagina .cx-beneficios span.d { color: rgba(255,255,255,.72); }
.cx-topo-pagina .cx-beneficios .cx-tick { background: var(--ouro-400); color: var(--verde-900); }

/* ── a chamada final ─────────────────────────────────────────────────────────────────── */
.cx-cta { background: linear-gradient(160deg, var(--verde-800), var(--verde-700));
          color: var(--branco); border-radius: var(--raio-g); padding: var(--e6);
          text-align: center; }
.cx-cta h2 { margin: 0 0 var(--e2); color: var(--branco); }
.cx-cta p { margin: 0 auto var(--e5); max-width: 54ch; color: rgba(255,255,255,.85); }

/* ── o herói agora abriga o widget ao lado ───────────────────────────────────────────── */
.cx-topo-pagina { background: linear-gradient(160deg, var(--verde-900), var(--verde-800));
                  color: var(--branco); padding: var(--e7) 0 calc(var(--e7) + var(--e4)); }
.cx-topo-pagina h1 { margin: 0 0 var(--e3); font-size: clamp(1.6rem, 4.2vw, 2.4rem);
                     letter-spacing: -.02em; }
.cx-topo-pagina .cx-heroi__linha { margin-bottom: var(--e4); }
.cx-eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .11em;
              color: var(--ouro-400); font-weight: 700; margin: 0 0 var(--e2); }

/* o corpo da página deixa de ter padding próprio: quem espaça agora são as faixas */
.cx-corpo--faixas { max-width: none; margin: 0; padding: 0; }

/* ═══ AS FICHAS DE UNIDADE ═══ Formato do site do ouro (pedido do dono, 11/09/2026).
   Etiqueta, nome, endereço, horário e o link. Grade de 3 e 2 como o resto do site, para a fila
   fechar completa nas duas larguras. */
.cx-unids { display: grid; gap: var(--e4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cx-unids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx-unids { grid-template-columns: 1fr; } }

.cx-unid { background: var(--branco); border: 1px solid var(--areia-200); border-radius: var(--raio);
           padding: var(--e5); box-shadow: var(--sombra); display: flex; flex-direction: column;
           gap: var(--e3); }
.cx-etiq { align-self: flex-start; background: var(--areia-100); color: var(--tinta-fraca);
           border-radius: 999px; padding: var(--e1) var(--e3); font-size: .76rem; font-weight: 600; }
.cx-unid__nome { margin: 0; font-size: 1.14rem; color: var(--verde-800); letter-spacing: -.01em; }
.cx-unid__end, .cx-unid__hora { margin: 0; font-size: .92rem; color: var(--tinta-fraca);
                                line-height: 1.5; }
.cx-unid__link { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: .92rem;
                 text-decoration: none; color: var(--verde-700); border: 1px solid var(--areia-200);
                 border-radius: 10px; padding: var(--e2) var(--e4);
                 transition: background .14s ease, border-color .14s ease; }
.cx-unid__link:hover { background: var(--areia-050); border-color: var(--verde-700); }

/* ⚠ Na faixa escura a ficha inverte, e o dourado da etiqueta precisa do verde escuro por trás
   para não reprovar em contraste. */
.cx-faixa--escura .cx-unid { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
                             box-shadow: none; }
.cx-faixa--escura .cx-unid__nome { color: var(--branco); }
.cx-faixa--escura .cx-unid__end,
.cx-faixa--escura .cx-unid__hora { color: rgba(255,255,255,.78); }
.cx-faixa--escura .cx-etiq { background: rgba(255,255,255,.12); color: var(--ouro-400); }
.cx-faixa--escura .cx-unid__link { color: var(--ouro-400); border-color: rgba(255,255,255,.3); }
.cx-faixa--escura .cx-unid__link:hover { background: rgba(255,255,255,.08);
                                         border-color: var(--ouro-400); }

/* ── a ficha da unidade ─────────────────────────────────────────────────────────────── */
/* ⚠ `height: auto` JUNTO COM `aspect-ratio`, e sem ele o `aspect-ratio` é letra morta. O HTML
   declara `width="700" height="438"` para o navegador reservar o espaço e o texto não pular quando
   a foto chega; sem um `height` na folha, esse atributo vira a altura de verdade e a proporção
   pedida aqui nunca é aplicada. Sobra altura reservada a mais embaixo da foto. */
.cx-unid-foto { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
                border-radius: var(--raio); display: block; }
.cx-dados { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.cx-dados div { display: flex; justify-content: space-between; gap: var(--e4);
                border-bottom: 1px solid var(--areia-200); padding-bottom: var(--e2); }
.cx-dados dt { color: var(--tinta-fraca); font-size: .9rem; }
.cx-dados dd { margin: 0; font-weight: 600; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   O RODAPÉ — mesma anatomia do ouro.express (pedido do dono, 11/09/2026), com as credenciais
   em cima. Quatro camadas: credenciais, marca e navegação, agências e contato, linha legal.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.cx-rodape { background: var(--verde-900); color: rgba(255,255,255,.72); margin-top: 0; }

/* ── credenciais ─────────────────────────────────────────────────────────────────────── */
.cx-cred { background: var(--creme-100); color: var(--tinta); padding: var(--e6) 0;
           text-align: center; border-top: 1px solid var(--creme-borda); }
.cx-cred .cx-eyebrow { color: var(--ouro-800); }
.cx-cred h2 { margin: 0 0 var(--e5); font-size: clamp(1.05rem, 2.4vw, 1.35rem);
              letter-spacing: -.01em; color: var(--verde-900); }
.cx-selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
            align-items: center; justify-content: center; gap: var(--e6); }
/* ⚠ ALTURA IGUAL, largura livre: os selos vêm com proporções diferentes, e travar a largura
   deformaria uns e deixaria outros minúsculos. E `width`/`height` no HTML são os do ARQUIVO,
   para o navegador reservar o espaço e o texto não pular quando a imagem chega. */
.cx-selos img { height: 58px; width: auto; display: block; opacity: .88;
                transition: opacity .16s ease; }
.cx-selos img:hover { opacity: 1; }

/* ── marca e navegação ───────────────────────────────────────────────────────────────── */
.cx-rodape__corpo { padding: var(--e7) 0 var(--e5); }
.cx-rodape__grade { display: grid; gap: var(--e6);
                    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cx-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx-rodape__grade { grid-template-columns: 1fr; } }

.cx-rodape__logo { height: 40px; width: auto; display: block; margin-bottom: var(--e4); }
.cx-rodape__desc { margin: 0 0 var(--e4); font-size: .9rem; max-width: 42ch;
                   color: rgba(255,255,255,.72); }
.cx-rodape__ctas { display: flex; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.cx-rodape__ctas .cx-btn { padding: var(--e2) var(--e4); font-size: .88rem; }
.cx-rodape__social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e3); }
.cx-rodape__social a { display: grid; place-items: center; width: 38px; height: 38px;
                       border-radius: 10px; border: 1px solid rgba(255,255,255,.22);
                       color: rgba(255,255,255,.8); transition: background .16s ease; }
.cx-rodape__social a:hover { background: rgba(255,255,255,.1); color: var(--ouro-400); }
.cx-rodape__social svg { width: 19px; height: 19px; }

.cx-rodape__col h3 { margin: 0 0 var(--e3); font-size: .78rem; text-transform: uppercase;
                     letter-spacing: .1em; color: var(--ouro-400); }
.cx-rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.cx-rodape__col a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .9rem; }
.cx-rodape__col a:hover { color: var(--branco); text-decoration: underline; }

/* ── agências e contato ──────────────────────────────────────────────────────────────── */
.cx-rodape__unids { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--e5);
                    padding-top: var(--e5); }
.cx-rodape__unids-topo { display: flex; justify-content: space-between; align-items: baseline;
                         gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3); }
.cx-rodape__unids-topo h3 { margin: 0; font-size: .78rem; text-transform: uppercase;
                            letter-spacing: .1em; color: var(--ouro-400); }
.cx-rodape__unids-topo a { color: rgba(255,255,255,.76); font-size: .86rem; }
.cx-rodape__unids ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2);
                       grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cx-rodape__unids ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx-rodape__unids ul { grid-template-columns: 1fr; } }
.cx-rodape__unids a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .9rem; }
.cx-rodape__unids a:hover { color: var(--branco); text-decoration: underline; }

.cx-rodape__contato { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--e5);
                      padding-top: var(--e5); display: grid; gap: var(--e4);
                      grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .cx-rodape__contato { grid-template-columns: 1fr; } }
.cx-rodape__contato a { display: flex; align-items: center; gap: var(--e3);
                        color: rgba(255,255,255,.86); text-decoration: none; font-size: .92rem; }
.cx-rodape__contato a:hover { color: var(--ouro-400); }
.cx-rodape__contato svg { width: 21px; height: 21px; flex: 0 0 auto; }
/* ⚠ `.62` E NÃO `.5`, E O NÚMERO FOI MEDIDO. Com meio de opacidade sobre o verde escuro o rótulo
   dava 4,28 contra o mínimo de 4,5 do AA, e é texto de 11,5 px: justamente o tamanho em que a
   diferença se sente. Em `.62` a razão é 5,74, e o rótulo continua visivelmente secundário diante
   do valor (que está em `.86`). */
.cx-rodape__contato .lbl { display: block; font-size: .72rem; text-transform: uppercase;
                           letter-spacing: .08em; color: rgba(255,255,255,.62); }

/* ── linha legal ─────────────────────────────────────────────────────────────────────── */
.cx-rodape__legal { border-top: 1px solid rgba(255,255,255,.14); padding: var(--e5) 0;
                    font-size: .82rem; line-height: 1.6; }
.cx-rodape__legal p { margin: 0 0 var(--e2); max-width: 90ch; color: rgba(255,255,255,.66); }
.cx-rodape__legal strong { color: rgba(255,255,255,.9); font-weight: 600; }
.cx-rodape__legal a { color: var(--ouro-400); }

/* o rodapé antigo, de uma linha só, sai de cena */
.cx-rodape__in, .cx-legal { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   O BANNER DE CONSENTIMENTO.

   ⚠ ELE NÃO COBRE O BOTÃO. Um banner de cookies grudado no fundo da tela, no celular, tapa
   exatamente a faixa onde mora o botão de WhatsApp de todas as seções — e este site converte
   nesse botão. Por isso ele tem `max-width` e senta acima da borda, com sombra, em vez de ser uma
   faixa de ponta a ponta.

   ⚠ E SÓ APARECE QUANDO TEM O QUE MEDIR: sem `ga4_id` nem `ads_id` o HTML nem é desenhado.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.cx-cookies {
  position: fixed; z-index: 50;
  left: var(--e4); right: var(--e4); bottom: var(--e4);
  max-width: 560px; margin-inline: auto;
  background: var(--verde-900); color: var(--branco);
  border-radius: var(--raio-g); padding: var(--e5);
  box-shadow: 0 10px 40px rgba(6, 60, 48, .35);
}
.cx-cookies p { margin: 0 0 var(--e4); font-size: .95rem; line-height: 1.5; }
.cx-cookies a { color: var(--ouro-400); }
.cx-cookies__acoes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.cx-cookies__acoes .cx-btn { flex: 1 1 auto; text-align: center; }
/* ⚠ `--sec` É BOTÃO DE FUNDO CLARO (borda escura, texto escuro), e aqui o fundo é verde-900: sem
   esta regra o "Só o necessário" some no escuro. Medido: 12,4 contra o verde. */
.cx-cookies__acoes .cx-btn--sec { color: var(--branco); border-color: rgba(255, 255, 255, .55);
                                  background: transparent; }
/* ⚠ NO CELULAR ELE FICA COMPACTO E NO TOPO (decisão do dono, 14/09/2026). O `max-width` de cima só
   separa o banner do botão acima de ~600px; abaixo disso ele não faz nada, e em 360×640 o banner
   tinha 267px de altura e cobria 30 dos 49px do botão de WhatsApp de /moneygram/receber, a landing
   que mais converte. A decisão foi compactar embaixo e, se ainda cobrisse, subir. Compacto (135px)
   ele ainda cobria de 29 a 48px do botão em /comprar, /vender, na home e em /cotacao/<moeda>, em
   360×640 e 375×667, porque ali o botão senta justamente no fim da primeira tela. No topo ele cobre
   o logo e o menu, nunca o botão. Texto menor, respiro menor e os dois botões na mesma linha, sem
   baixar do alvo de toque de 44px. Medido no navegador nas duas posições. */
@media (max-width: 600px) {
  .cx-cookies { left: var(--e2); right: var(--e2); top: var(--e2); bottom: auto;
                padding: var(--e3) var(--e4); }
  .cx-cookies p { font-size: .82rem; line-height: 1.4; margin-bottom: var(--e3); }
  .cx-cookies__acoes { flex-wrap: nowrap; gap: var(--e2); }
  .cx-cookies__acoes .cx-btn { flex: 1 1 0; min-height: 44px; padding: var(--e2) var(--e3);
                               font-size: .85rem; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   AS EXCEÇÕES DE TRÊS, E ELAS FICAM NO FIM DO ARQUIVO DE PROPÓSITO.

   ⚠ ORDEM DA CASCATA, não especificidade. `.cx-unids--tres` e `.cx-unids` têm a MESMA
   especificidade (0,1,0), e a media query base de `.cx-unids` mora ~270 linhas abaixo de onde eu
   tinha escrito a exceção. Empate de especificidade quem ganha é quem vem depois, então a base
   vencia e o bloco de três continuava virando 2+1 no tablet. Escrevi a regra certa, no lugar
   errado, e só a medição no navegador mostrou.

   É a mesma mina de `css-global-antigo-e-mina`: HTML certo, classe certa, cascata contra.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cx-grade--tres,
  .cx-beneficios--tres,
  .cx-unids--tres { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .cx-grade--tres,
  .cx-beneficios--tres,
  .cx-unids--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DUAS COISAS LADO A LADO TERMINAM NA MESMA LINHA — REGRA PERMANENTE.

   Pedido do dono, 11/09/2026, e ele o fez como regra geral: *"sempre que tiverem duas coisas
   assim lado a lado, tipo esses boxes. o que ta dentro tem que ser simetrico em relacao ao outro.
   nesse caso eu falo do botao. os dois tem que estar na mesma altura. embaixo."*

   É a mesma família da regra de simetria que já existe aqui (fila múltipla de seis, ou a classe
   `--tres`): lá o que se alinha é a CONTAGEM de itens; aqui é o que está DENTRO de cada item.
   Dois cartões com textos de tamanhos diferentes empurravam o botão de cada um para uma altura, e
   o olho lê isso como descuido antes de ler qualquer palavra.

   ⚠ A REGRA É ESTRUTURAL, E NÃO UMA CLASSE QUE ALGUÉM PRECISA LEMBRAR. O bloco que vive lado a
   lado vira coluna, e o último filho que contiver um botão desce para o pé — sozinho, em toda
   página que já existe e em toda que for escrita depois. Uma classe utilitária resolveria o
   mesmo, e seria esquecida no primeiro cartão novo.

   ⚠ `:has()` É O QUE TORNA ISSO AUTOMÁTICO, e a degradação é mansa: onde ele não existir, o botão
   volta a ficar logo abaixo do texto, que é como estava antes. Nada quebra.

   ⚠ `padding-top` JUNTO COM `margin-top: auto`. Sozinho, o `auto` come todo o espaço livre — e
   quando não há espaço livre (o cartão mais alto do par), ele vira zero e o botão encosta no
   texto. O `padding` garante a respiração nos dois casos.

   ⚠ E ISTO MORA NO FIM DO ARQUIVO, como as exceções de três, pelo mesmo motivo: empate de
   especificidade quem ganha é quem vem depois. `.cx-faixa .cx-chamada { margin-top: var(--e5) }`
   está ~300 linhas acima e venceria daqui de cima.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ⚠ `div`, `a` E `.cx-cartao`, E NÃO `*`. Com `*`, a regra alcança também os `<p>` de um
   `.cx-texto.cx-duas-iguais` (dois parágrafos lado a lado, em `moeda.html`), e um parágrafo virado
   contêiner flex bloca o que é inline dentro dele: `<strong>` e `<a>` passariam a ocupar uma linha
   cada. Hoje aqueles parágrafos são texto puro e nada quebra; quebra no primeiro que ganhar
   marcação. */
.cx-grade > div, .cx-grade > a, .cx-grade > .cx-cartao,
.cx-duas-iguais > div, .cx-duas-iguais > a, .cx-duas-iguais > .cx-cartao,
.cx-duas > div { display: flex; flex-direction: column; }

/* ⚠ E OS DOIS LADOS PRECISAM TER A MESMA ALTURA, senão o pé de cada um alinha no pé do PRÓPRIO
   bloco e os dois continuam em linhas diferentes.

   ⚠ MAS SÓ QUANDO HÁ DOIS PÉS PARA ALINHAR. Esticar por esticar é o defeito do outro lado da
   moeda: um cartão SEM botão, emparelhado com uma coluna de texto comprida, cresce até a altura
   dela e sobra um vazio de mais de 130 px embaixo do conteúdo. Foi exatamente o que o dono
   apontou em 11/09/2026 — *"esses cards com espaco sobrando embaixo. esse tipo de coisa nao pode
   acontecer"* —, e fui eu que causei, ao ligar o esticamento para todos.

   A condição abaixo lê "o primeiro filho termina em botão E o último também". Num par, é
   exatamente "os dois lados têm pé". Sem os dois, cada lado volta a ter a altura do seu conteúdo.
   E `.cx-duas` continua nascendo com `align-items: start` por causa do simulador no herói, que não
   deve esticar até a altura do texto ao lado. */
/* ⚠ `:has()` NÃO PODE MORAR DENTRO DE OUTRO `:has()`. A primeira versão desta regra era
   `:has(> div:first-child > :last-child:has(.cx-btn))`, e o aninhamento torna o seletor INVÁLIDO:
   o navegador joga a regra inteira fora, sem erro, sem aviso, sem nada na tela dizendo por quê. Os
   pés voltaram a ficar desalinhados e só a medição mostrou. A saída é trocar o `:has()` de dentro
   por um descendente, que diz a mesma coisa: "um `.cx-btn` dentro do último filho". */
.cx-faixa .cx-duas:has(> div:first-child > :last-child .cx-btn, > div:first-child > .cx-btn:last-child):has(> div:last-child > :last-child .cx-btn, > div:last-child > .cx-btn:last-child) {
  align-items: stretch;
}

/* ⚠ E O ÚLTIMO FILHO NÃO DEIXA MARGEM SOBRANDO. Um parágrafo carrega `margin-bottom`, e essa
   margem vira uns 17 px de vazio abaixo do conteúdo, somados ao `padding` do cartão. Não é o vazio
   grande que o dono apontou, é o pequeno que aparece em TODO cartão do site.

   ⚠ E ELA DESALINHA O PAR, que é o problema maior. Com `margin-top: auto` o elemento desce até o
   pé, e a margem de baixo DELE empurra o conteúdo de volta para cima: num par em que só um lado é
   cartão, um botão ficava 15 px acima do outro. Por isso a regra vale para qualquer peça que viva
   lado a lado, e não só para o cartão. */
.cx-cartao > :last-child,
.cx-unid > :last-child,
.cx-aviso > :last-child,
.cx-grade > * > :last-child,
.cx-duas-iguais > * > :last-child,
.cx-unids > * > :last-child,
.cx-duas > div > :last-child { margin-bottom: 0; }

/* ⚠ A GRADE DAS FICHAS DE UNIDADE ENTRA NA REGRA, e até aqui ela funcionava por acidente feliz:
   `.cx-unid` já era flex column e `.cx-unid__link` já tinha `margin-top: auto`, escritos à mão
   quando aquele componente nasceu. Duas verdades separadas dizendo a mesma coisa envelhecem
   separadas. */
.cx-unids > * > :last-child:has(.cx-btn),
.cx-unids > * > .cx-btn:last-child,
.cx-unids > * > .cx-unid__link:last-child { margin-top: auto; }

/* ⚠ `!important`, E É A ÚNICA FORMA DE A REGRA SER MESMO ESTRUTURAL. Declaração inline vence
   qualquer seletor de folha, e foi exatamente assim que a regra certa ficou sem efeito: os três
   cartões de `/sobre` terminavam em `<p style="margin-top:var(--e4)">` com o botão dentro, o
   `margin-top: auto` nunca se aplicava e os três botões ficavam a 46, 89 e 25 px do pé do próprio
   cartão — 64 px de desalinho, na página em que ele é mais visível.

   Sem o `!important`, a regra depende de ninguém escrever margem inline num pé, nunca mais, em
   nenhuma página futura. Isso não é uma regra, é um pedido. E o alcance é estreito de propósito:
   só o ÚLTIMO filho, só quando ele contém um botão, só dentro de um bloco que vive lado a lado. */
.cx-grade > * > :last-child:has(.cx-btn),
.cx-duas-iguais > * > :last-child:has(.cx-btn),
.cx-duas > div > :last-child:has(.cx-btn) { margin-top: auto !important;
                                            padding-top: var(--e5); }

/* ⚠ E QUANDO UM DOS LADOS É CARTÃO E O OUTRO É TEXTO SOLTO, o cartão tem `padding` e o texto não:
   os dois pés encostam no fundo da própria caixa e ficam a 24 px um do outro, que foi exatamente
   a diferença medida em `/vender/dolar`. O lado sem cartão recebe o mesmo recuo de baixo, e só
   quando há um cartão ao lado para se alinhar. */
/* ⚠ E SÓ QUANDO O PAR REALMENTE ESTICA. Este recuo existe para casar com o `padding` do cartão
   vizinho; num par que não estica, ele é 24 px de vazio embaixo do texto, que é justamente o
   defeito que se está caçando. A condição é a mesma do `stretch`, repetida. */
.cx-faixa .cx-duas:has(> div:first-child > :last-child .cx-btn, > div:first-child > .cx-btn:last-child):has(> div:last-child > :last-child .cx-btn, > div:last-child > .cx-btn:last-child):has(> .cx-cartao) > div:not(.cx-cartao),
.cx-duas-iguais:has(> .cx-cartao) > div:not(.cx-cartao),
.cx-grade:has(> .cx-cartao) > div:not(.cx-cartao) { padding-bottom: var(--e5); }