/*
 * Elo Cartão - estilos isolados, prefixo .elo-cartao- em TUDO, sem
 * depender de nenhuma classe/variável do tema ativo NEM dos outros
 * plugins Elo (mesma linguagem visual do elo-calculadora, mas token set
 * 100% próprio - os plugins são independentes, o único contrato entre
 * eles é a função PHP elo_cotacao_valor_atual()).
 *
 * Referência estética: mesma do elo-calculadora/elo-cotacao - números
 * grandes e com peso tipográfico forte, cartão de canto bem arredondado,
 * sem borda, fundo neutro claro, muito respiro, cor de destaque usada com
 * parcimônia. A taxa embutida (número principal) é o maior número da
 * tela - é a revelação que a ferramenta existe pra entregar.
 *
 * Sem nenhuma tabela/zebrado neste arquivo - lição do elo-calculadora
 * (achado real: um zebrado nth-child do TEMA ativo, fora do controle
 * deste plugin, tinha especificidade maior que uma classe solta e
 * mascarava um destaque em metade das linhas) não se aplica aqui porque
 * não há tabela nenhuma, mas fica registrado: se algum dia este arquivo
 * ganhar uma tabela, qualquer cor de ESTADO (nunca decorativa) precisa de
 * !important, pelo mesmo motivo.
 */
:root {
    --elo-cartao-accent: #0b4f3f;

    --elo-cartao-bg: #f6f5f2;
    --elo-cartao-bg-alt: #eae8e3;
    --elo-cartao-card: #ffffff;
    --elo-cartao-text-primary: #1a1a1a;
    --elo-cartao-text-secondary: #6b6b6b;
    --elo-cartao-radius: 24px;

    /* Quatro níveis de classificação da taxa embutida - VERDE pro lado bom,
       VERMELHO pro lado ruim, NUNCA azul (regra explícita do pedido,
       substituindo a paleta anterior que usava azul em "normal" e âmbar em
       "alto"). Cor de TEXTO (usada no badge junto do número e nos rótulos
       abaixo da régua) e cor de ZONA (o preenchimento da régua em si,
       abaixo) são tokens separados - "alto" precisa de um vermelho mais
       escuro no TEXTO (contraste legível sobre o fundo claro do cartão) do
       que na ZONA (onde precisa ler como "vermelho claro", mais aceso). */
    --elo-cartao-tier-otimo-text: #2e9e5b;
    --elo-cartao-tier-otimo-bg: #e5f5ec;
    --elo-cartao-tier-normal-text: #0b4f3f;
    --elo-cartao-tier-normal-bg: #e3ede9;
    --elo-cartao-tier-alto-text: #b8564a;
    --elo-cartao-tier-alto-bg: #f7e3e0;
    --elo-cartao-tier-muito_alto-text: #c0392b;
    --elo-cartao-tier-muito_alto-bg: #fbeaea;

    /* Cores das 4 zonas da régua de faixas (item 1) - fundo sólido, sempre
       visível, nunca dependente de "encher" como uma barra de progresso.
       Verde -> verde escuro -> vermelho claro -> vermelho, exatamente como
       pedido. */
    --elo-cartao-zona-otimo: #3aa564;
    --elo-cartao-zona-normal: #1c6b45;
    --elo-cartao-zona-alto: #e29688;
    --elo-cartao-zona-muito_alto: #c0392b;

    /* Os dois cenários da comparação têm fundo levemente diferente entre
       si - reforço visual (não só o rótulo) de que são coisas diferentes:
       "espécie" (dinheiro vivo) em tom azulado neutro - aqui o azul é só
       decorativo/neutro, não uma cor de classificação de risco, então a
       regra "nunca azul" do item 1 não se aplica a este token - "cartão"
       num cinza muito claro com borda (é o lado estimado, menos "sólido"). */
    --elo-cartao-cenario-especie-bg: #eaf1fb;
    --elo-cartao-cenario-cartao-bg: #f7f7f6;

    /* Tamanhos - hierarquia de 3 níveis, deliberada (rodada de ajuste
       fino): a TAXA (--elo-cartao-fs-taxa-numero, ~3rem/48px) é o herói
       absoluto, bem acima de tudo; os números secundários (valor
       justo/excedente, total em espécie) crescem um pouco em relação à
       rodada anterior, mas continuam claramente menores que o herói;
       textos de apoio (rótulos, detalhes, avisos) encolhem, pra parar de
       competir com os números. */
    --elo-cartao-fs-titulo: 22px;
    --elo-cartao-fs-fonte: 12px;
    --elo-cartao-fs-coluna-rotulo: 15px;
    --elo-cartao-fs-campo: 26px;
    --elo-cartao-fs-taxa-numero: 48px;
    --elo-cartao-fs-taxa-classificacao: 15px;
    /* Régua de faixas (item 1) - escala (0%/5%/10%/15%/20%+) menor que os
       rótulos (ótimo/normal/alto/muito alto), mesma hierarquia de uma
       régua de verdade (marca > legenda). No celular (ver @media abaixo),
       ambos reduzem ANTES de qualquer rótulo ser escondido - pedido
       explícito do item 4. */
    --elo-cartao-fs-regua-escala: 11px;
    --elo-cartao-fs-regua-rotulo: 12px;
    --elo-cartao-fs-justo-rotulo: 12px;
    --elo-cartao-fs-justo-numero: 30px;
    --elo-cartao-fs-justo-detalhe: 12px;
    --elo-cartao-fs-comparacao-titulo: 18px;
    --elo-cartao-fs-cenario-rotulo: 13px;
    --elo-cartao-fs-cenario-numero: 34px;
    --elo-cartao-fs-cenario-detalhe: 12px;
    /* Frase condensada do lado cartão (item 2) - tamanho de leitura
       normal, com o valor embutido um pouco maior/mais forte que o resto
       da frase (nunca do tamanho de um número "herói", só o suficiente
       pra se destacar dentro do texto corrido). */
    --elo-cartao-fs-cenario-frase: 15px;
    --elo-cartao-fs-cenario-frase-destaque: 19px;
    --elo-cartao-fs-comparacao-resultado: 18px;
    --elo-cartao-fs-aviso: 12px;
}

/* Versão reduzida de todos os tamanhos grandes acima, abaixo de 640px -
   um lugar só redefine os tokens, cada seletor que usa
   var(--elo-cartao-fs-*) recebe o valor menor automaticamente. Mesmo
   mecanismo do elo-calculadora. */
@media (max-width: 639px) {
    :root {
        --elo-cartao-fs-titulo: 18px;
        --elo-cartao-fs-fonte: 11px;
        --elo-cartao-fs-coluna-rotulo: 13px;
        --elo-cartao-fs-campo: 21px;
        --elo-cartao-fs-taxa-numero: 34px;
        --elo-cartao-fs-taxa-classificacao: 12.5px;
        --elo-cartao-fs-regua-escala: 9.5px;
        --elo-cartao-fs-regua-rotulo: 10px;
        --elo-cartao-fs-justo-rotulo: 11px;
        --elo-cartao-fs-justo-numero: 24px;
        --elo-cartao-fs-justo-detalhe: 11px;
        --elo-cartao-fs-comparacao-titulo: 16px;
        --elo-cartao-fs-cenario-rotulo: 12px;
        --elo-cartao-fs-cenario-numero: 26px;
        --elo-cartao-fs-cenario-detalhe: 11px;
        --elo-cartao-fs-cenario-frase: 13px;
        --elo-cartao-fs-cenario-frase-destaque: 16px;
        --elo-cartao-fs-comparacao-resultado: 16px;
        --elo-cartao-fs-aviso: 11px;
    }
}

.elo-cartao,
.elo-cartao * {
    box-sizing: border-box;
}

/* Ocupa 100% do CONTÊINER em que for colocado - nunca um max-width/
   largura própria, mesmo princípio dos outros plugins Elo (o
   dimensionamento é responsabilidade de quem posiciona o shortcode). */
.elo-cartao {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--elo-cartao-text-primary);
    background: var(--elo-cartao-bg);
    border: none;
    border-radius: var(--elo-cartao-radius);
    padding: 32px 26px;
    width: 100%;
    margin: 0 0 16px;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .elo-cartao {
        padding: 44px 40px;
    }
}

.elo-cartao-vazio {
    font-size: 0.9rem;
    color: var(--elo-cartao-text-secondary);
    margin: 0;
}

.elo-cartao-header {
    margin-bottom: 30px;
}

.elo-cartao-titulo {
    font-size: var(--elo-cartao-fs-titulo);
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--elo-cartao-text-primary);
}

/* Carimbo da cotação - pill ancorada logo abaixo do título, nunca texto
   solto: fundo claro suave, canto arredondado, padding generoso. */
.elo-cartao-fonte {
    display: inline-block;
    background: var(--elo-cartao-bg-alt);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: var(--elo-cartao-fs-fonte);
    font-weight: 600;
    color: var(--elo-cartao-text-secondary);
    margin: 0;
}

/* Os dois campos de entrada (preço em dólares + valor da maquininha em
   guaranis) lado a lado no desktop, empilhados no celular (coluna única,
   pedido explícito). As duas colunas têm exatamente a mesma forma -
   rótulo seguido direto da caixa, sem nada entre os dois. */
.elo-cartao-linha-principal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .elo-cartao-linha-principal {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.elo-cartao-coluna {
    display: flex;
    flex-direction: column;
}

/* Reset explícito de font-family/line-height/padding além do font-size,
   pra nunca depender do que o tema define pra <label>/<p> genericamente -
   mesma defesa já usada no elo-calculadora. */
.elo-cartao-coluna-rotulo {
    display: block;
    font-family: inherit;
    line-height: 1.4;
    font-size: var(--elo-cartao-fs-coluna-rotulo);
    font-weight: 600;
    color: var(--elo-cartao-text-secondary);
    margin: 0 0 8px;
    padding: 0;
}

/* Caixa do campo - prefixo (US$/₲) + número, tudo na mesma linha, dentro
   de um único campo com borda. min-height fixo pra garantir a MESMA
   altura exata nas duas colunas. */
.elo-cartao-input-caixa {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    background: var(--elo-cartao-card);
    border: 1.5px solid var(--elo-cartao-bg-alt);
    border-radius: 16px;
    padding: 12px 18px;
}

.elo-cartao-input-prefixo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--elo-cartao-text-secondary);
    flex-shrink: 0;
}

/* A borda é da caixa (.elo-cartao-input-caixa acima), nunca do input em
   si. */
.elo-cartao-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: #fff;
    font-family: inherit;
    font-size: var(--elo-cartao-fs-campo);
    font-weight: 800;
    color: var(--elo-cartao-text-primary);
}

.elo-cartao-input::-webkit-outer-spin-button,
.elo-cartao-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.elo-cartao-input[type="number"] {
    -moz-appearance: textfield;
}

/* Resultado principal - a taxa embutida pela loja. Cartão próprio,
   centralizado, número dominante da tela. */
.elo-cartao-resultado-taxa {
    background: var(--elo-cartao-card);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 32px;
}

/* Número + balão da faixa NA MESMA LINHA (item 1) - antes eram dois
   parágrafos empilhados (balão centralizado solto abaixo do número);
   agora é uma linha flex, número primeiro, balão à direita dele. No
   desktop os dois ficam centralizados como grupo (justify-content:
   center); no celular, se não couberem lado a lado, o balão quebra pra
   baixo mas ALINHADO À ESQUERDA junto do número (nunca centralizado
   sozinho - troca pra justify-content:flex-start só no @media abaixo,
   item 4 do pedido). */
.elo-cartao-taxa-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 639px) {
    .elo-cartao-taxa-linha {
        justify-content: flex-start;
    }
}

/* O número é o MAIOR elemento do bloco, bem acima dos demais (~3rem no
   desktop) - e agora MUDA DE COR conforme a faixa (item 1), igual ao
   balão ao lado e ao marcador da régua, os três como um sistema único
   (ver regras de cor por tier logo abaixo). Sem classe de tier ativa
   (antes de digitar), fica na cor neutra de texto. */
.elo-cartao-taxa-numero {
    font-size: var(--elo-cartao-fs-taxa-numero);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--elo-cartao-text-primary);
    margin: 0;
    line-height: 1.1;
}

.elo-cartao-taxa-classificacao {
    display: inline-block;
    font-weight: 600;
    font-size: var(--elo-cartao-fs-taxa-classificacao);
    min-height: 1em;
}

/* Balão (pill) e número, cor por nível - só aparecem quando o container
   tem uma classe de tier ativa (nunca cor "vazia" antes de digitar, já
   que a cor/fundo só existem dentro destas regras, nunca na classe base
   acima). Número, balão e marcador da régua (mais abaixo) sempre
   compartilham EXATAMENTE o mesmo token de cor por nível - um sistema
   único, pedido explícito do item 1. */
.elo-cartao-tier-otimo .elo-cartao-taxa-numero {
    color: var(--elo-cartao-tier-otimo-text);
}

.elo-cartao-tier-otimo .elo-cartao-taxa-classificacao {
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--elo-cartao-tier-otimo-text);
    background: var(--elo-cartao-tier-otimo-bg);
}

.elo-cartao-tier-normal .elo-cartao-taxa-numero {
    color: var(--elo-cartao-tier-normal-text);
}

.elo-cartao-tier-normal .elo-cartao-taxa-classificacao {
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--elo-cartao-tier-normal-text);
    background: var(--elo-cartao-tier-normal-bg);
}

.elo-cartao-tier-alto .elo-cartao-taxa-numero {
    color: var(--elo-cartao-tier-alto-text);
}

.elo-cartao-tier-alto .elo-cartao-taxa-classificacao {
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--elo-cartao-tier-alto-text);
    background: var(--elo-cartao-tier-alto-bg);
}

.elo-cartao-tier-muito_alto .elo-cartao-taxa-numero {
    color: var(--elo-cartao-tier-muito_alto-text);
}

.elo-cartao-tier-muito_alto .elo-cartao-taxa-classificacao {
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--elo-cartao-tier-muito_alto-text);
    background: var(--elo-cartao-tier-muito_alto-bg);
}

/* Régua de faixas (item 1, substitui a barra de preenchimento simples da
   rodada anterior - achado real: uma barra que só "enche" não comunica
   ONDE ficam as faixas, só o quanto). Zonas coloridas FIXAS, sempre
   visíveis, com largura proporcional às faixas reais configuradas
   (nunca hardcoded - ver configurarRegua() no JS); só o MARCADOR se move
   a cada tecla, a régua em si nunca muda de tamanho. */
.elo-cartao-regua-wrap {
    margin: 28px 0 20px;
}

/* Wrapper que dá o position:relative pra trilha E marcador, SEM recortar
   nada (diferente da trilha em si, que tem overflow:hidden só pra
   arredondar os cantos das 4 zonas - ver comentário no PHP). Se o
   marcador fosse filho da trilha, ficaria cortado por ela sempre que
   maior que a própria trilha ou levemente fora do seu limite vertical -
   achado real de revisão, corrigido antes de qualquer teste visual. */
.elo-cartao-regua-pista {
    position: relative;
}

.elo-cartao-regua-trilha {
    display: flex;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
}

.elo-cartao-regua-zona {
    height: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    /* flex-basis é a largura de verdade, calculada e atribuída pelo JS
       (configurarRegua) a partir das faixas reais - o width:0 aqui é só
       um valor de segurança pra nunca sobrar uma zona com largura
       indefinida antes do JS rodar. */
    width: 0;
}

.elo-cartao-regua-zona-otimo {
    background: var(--elo-cartao-zona-otimo);
}

.elo-cartao-regua-zona-normal {
    background: var(--elo-cartao-zona-normal);
}

.elo-cartao-regua-zona-alto {
    background: var(--elo-cartao-zona-alto);
}

.elo-cartao-regua-zona-muito-alto {
    background: var(--elo-cartao-zona-muito_alto);
}

/* Marcador - bolinha branca (fundo sempre branco, legível sobre qualquer
   uma das 4 zonas coloridas por baixo) com anel colorido - o anel muda de
   cor por faixa, MESMO token que o número e o balão (item 1: "número,
   balão e marcador sempre na mesma cor, um sistema único"). Sem tier
   ativo (antes de digitar), o anel fica na cor neutra de texto. Posição
   (left, em % da trilha) definida pelo JS a cada tecla - CSS só cuida da
   forma/cor. */
.elo-cartao-regua-marcador {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--elo-cartao-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    transition: left 0.15s ease, border-color 0.15s ease;
}

.elo-cartao-tier-otimo .elo-cartao-regua-marcador {
    border-color: var(--elo-cartao-tier-otimo-text);
}

.elo-cartao-tier-normal .elo-cartao-regua-marcador {
    border-color: var(--elo-cartao-tier-normal-text);
}

.elo-cartao-tier-alto .elo-cartao-regua-marcador {
    border-color: var(--elo-cartao-tier-alto-text);
}

.elo-cartao-tier-muito_alto .elo-cartao-regua-marcador {
    border-color: var(--elo-cartao-tier-muito_alto-text);
}

/* Marcas de escala (0%, faixas reais, 20%+) - linha fina abaixo da
   régua, só números, sem cor de estado (é referência neutra, não
   classificação). Wrapper com a MESMA largura da trilha, marcas
   posicionadas em % absoluto pra alinhar exatamente com os limites
   reais das zonas acima (nunca só espaçadas igualmente, que ficaria
   errado se as faixas configuradas não forem 5/10/15). */
.elo-cartao-regua-escala {
    position: relative;
    height: 1.4em;
    margin-top: 6px;
}

.elo-cartao-regua-escala-marca {
    position: absolute;
    top: 0;
    font-size: var(--elo-cartao-fs-regua-escala);
    color: var(--elo-cartao-text-secondary);
    white-space: nowrap;
    transform: translateX(-50%);
}

.elo-cartao-regua-escala-marca:first-child {
    left: 0;
    transform: none;
}

.elo-cartao-regua-escala-marca:last-child {
    left: 100%;
    transform: translateX(-100%);
}

/* Rótulos das faixas (ótimo/normal/alto/muito alto) - centrados no meio
   de cada zona correspondente (nunca espaçados igualmente - mesma lógica
   da escala acima), cada um na cor da própria zona (pedido explícito).
   white-space normal + max-width (não nowrap) - item 4: se não couber,
   quebra linha e/ou reduz fonte no celular, nunca esconde um rótulo. */
.elo-cartao-regua-rotulos {
    position: relative;
    min-height: 2.6em;
    margin-top: 4px;
}

.elo-cartao-regua-rotulo {
    position: absolute;
    top: 0;
    max-width: 25%;
    font-weight: 600;
    font-size: var(--elo-cartao-fs-regua-rotulo);
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    transform: translateX(-50%);
}

.elo-cartao-regua-rotulo-otimo {
    color: var(--elo-cartao-tier-otimo-text);
}

.elo-cartao-regua-rotulo-normal {
    color: var(--elo-cartao-tier-normal-text);
}

.elo-cartao-regua-rotulo-alto {
    color: var(--elo-cartao-tier-alto-text);
}

.elo-cartao-regua-rotulo-muito-alto {
    color: var(--elo-cartao-tier-muito_alto-text);
}

/* Bloco "valor justo x você paga a mais" (item 2) - duas informações
   lado a lado no desktop, empilhadas no celular, mesma linguagem de
   cartão (fundo suave + rótulo pequeno maiúsculo + número grande) já
   usada no bloco de comparação abaixo. Linha divisória sutil acima,
   separando do bloco da régua sem precisar de um novo cartão/wrap
   inteiro (continua dentro de .elo-cartao-resultado-taxa). */
.elo-cartao-justo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--elo-cartao-bg-alt);
    text-align: left;
}

@media (min-width: 640px) {
    .elo-cartao-justo-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.elo-cartao-justo-item {
    background: var(--elo-cartao-bg);
    border-radius: 16px;
    padding: 16px 18px;
}

.elo-cartao-justo-rotulo {
    font-size: var(--elo-cartao-fs-justo-rotulo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--elo-cartao-text-secondary);
    margin: 0 0 6px;
}

.elo-cartao-justo-numero {
    font-size: var(--elo-cartao-fs-justo-numero);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--elo-cartao-text-primary);
    margin: 0;
    overflow-wrap: break-word;
}

/* "Você paga a mais" sempre em vermelho - pedido explícito do item 2,
   mesma cor de "muito alto" (é sempre um valor a evitar, nunca uma boa
   notícia). */
.elo-cartao-justo-numero-excedente {
    color: var(--elo-cartao-tier-muito_alto-text);
}

.elo-cartao-justo-detalhe {
    font-size: var(--elo-cartao-fs-justo-detalhe);
    color: var(--elo-cartao-text-secondary);
    opacity: 0.85;
    margin: 6px 0 0;
}

/* Comparação dinheiro x cartão - bloco separado, com respiro próprio,
   afastado do resultado principal acima. */
.elo-cartao-comparacao-wrap {
    background: var(--elo-cartao-card);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 28px;
}

.elo-cartao-comparacao-titulo {
    font-size: var(--elo-cartao-fs-comparacao-titulo);
    font-weight: 700;
    color: var(--elo-cartao-text-primary);
    margin: 0 0 22px;
}

/* Dois cenários lado a lado no desktop, empilhados no celular (coluna
   única, mesmo princípio da linha principal acima). */
.elo-cartao-comparacao {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .elo-cartao-comparacao {
        grid-template-columns: 1fr 1fr;
    }
}

.elo-cartao-cenario {
    border-radius: 18px;
    padding: 22px 24px;
}

.elo-cartao-cenario-especie {
    background: var(--elo-cartao-cenario-especie-bg);
}

.elo-cartao-cenario-cartao {
    background: var(--elo-cartao-cenario-cartao-bg);
    border: 1.5px solid var(--elo-cartao-bg-alt);
}

.elo-cartao-cenario-rotulo {
    font-size: var(--elo-cartao-fs-cenario-rotulo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--elo-cartao-text-secondary);
    margin: 0 0 8px;
}

.elo-cartao-cenario-numero {
    font-size: var(--elo-cartao-fs-cenario-numero);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--elo-cartao-text-primary);
    margin: 0 0 6px;
    overflow-wrap: break-word;
}

.elo-cartao-cenario-detalhe {
    font-size: var(--elo-cartao-fs-cenario-detalhe);
    color: var(--elo-cartao-text-secondary);
    opacity: 0.85;
    margin: 0;
}

/* Frase condensada do lado cartão (item 2) - substitui o número grande +
   linha de detalhe que existia antes. Tamanho de leitura normal, nunca um
   "número herói" - o valor embutido (.elo-cartao-destaque-inline) é só um
   pouco maior/mais forte que o resto da frase, o suficiente pra guiar o
   olho sem competir com o número da taxa. */
.elo-cartao-cenario-frase {
    font-size: var(--elo-cartao-fs-cenario-frase);
    color: var(--elo-cartao-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.elo-cartao-destaque-inline {
    font-size: var(--elo-cartao-fs-cenario-frase-destaque);
    font-weight: 800;
    color: var(--elo-cartao-text-primary);
}

/* Frase-resultado ("pagar em dinheiro sai R$X mais barato") - destacada,
   mas sem ser um número "grande" como os demais, pra não competir com o
   número da taxa (o herói real da tela). */
.elo-cartao-comparacao-resultado {
    font-size: var(--elo-cartao-fs-comparacao-resultado);
    font-weight: 700;
    color: var(--elo-cartao-accent);
    text-align: center;
    margin: 0 0 16px;
}

/* Os dois avisos da comparação - espécie (explica o câmbio de balcão) e
   o do lado cartão (estimativa da bandeira + spread aproximado, FUNDIDOS
   num parágrafo só desde esta rodada - eram dois blocos de texto
   empilhados, item 2 do pedido) - pequenos e discretos, sempre visíveis
   junto da comparação (nunca escondidos atrás de accordion/tooltip). */
.elo-cartao-aviso-especie,
.elo-cartao-aviso-cartao-detalhe {
    font-size: var(--elo-cartao-fs-aviso);
    color: var(--elo-cartao-text-secondary);
    opacity: 0.85;
    margin: 0 0 8px;
}

.elo-cartao-aviso-cartao-detalhe {
    margin-bottom: 0;
}

/* Aviso geral, rodapé do widget - simulação aproximada, câmbio varia de
   casa pra casa (mesmo espírito do aviso do elo-calculadora). margin-top
   generoso (item 3, mais respiro entre blocos) - separa visualmente do
   bloco de comparação acima, que já termina com dois avisos próprios;
   sem essa distância, os textos liam como uma sequência única e pesada
   de três blocos seguidos. */
.elo-cartao-aviso {
    font-size: var(--elo-cartao-fs-aviso);
    color: var(--elo-cartao-text-secondary);
    text-align: center;
    margin: 20px 0 0;
}