/* =============================================================================
   GUARANI — identidade

   A ideia do logo: as duas bandeiras compartilham o AZUL. Paraguai é
   vermelho-branco-azul; Brasil é verde-amarelo-azul. Em vez de colar as duas
   lado a lado, a marca é construída sobre o azul comum, com verde e vermelho
   como acentos — que aqui ganham função: verde é lucro, vermelho é prejuízo.
   O dourado faz o papel do amarelo brasileiro e dá o tom premium.

   Escolher o azul como base não é só estética: é o único jeito de a marca não
   parecer duas bandeiras brigando.
   ============================================================================= */

:root {
  /* ── Azul: a base, o que as duas bandeiras têm em comum ─────────────── */
  --azul-noite:   #0E1B2E;
  --azul-fundo:   #142943;
  --azul:         #1E3A5F;
  --azul-claro:   #2E5A8C;
  --azul-tenue:   #EAF0F7;

  /* ── Acentos com função ──────────────────────────────────────────────── */
  --verde:        #1E8A54;   /* Brasil · lucro */
  --verde-fundo:  #E8F5EE;
  --vermelho:     #C0392B;   /* Paraguai · prejuízo */
  --vermelho-fundo: #FBEDEB;
  --ouro:         #C9A227;   /* o amarelo, em tom premium */
  --ouro-claro:   #E8CE7A;
  --ouro-escuro:  #9A7B12;

  /* ── Superfícies ─────────────────────────────────────────────────────── */
  --fundo:        #FFFFFF;
  --fundo-pagina: #F4F6F9;
  --fundo-alt:    #FAFBFD;
  --borda:        #E3E8EF;
  --borda-forte:  #CBD3DE;

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --texto-forte:  #16202E;
  --texto:        #33404F;
  --texto-fraco:  #667485;
  --texto-tenue:  #98A3B1;
  --texto-claro:  #FFFFFF;

  /* ── Espaço, raio, sombra, tempo ─────────────────────────────────────── */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;

  --raio: 8px;
  --raio-card: 14px;
  --raio-pill: 999px;

  --sombra-1: 0 1px 3px rgba(14, 27, 46, .07);
  --sombra-2: 0 4px 16px rgba(14, 27, 46, .10);
  --sombra-3: 0 16px 48px rgba(14, 27, 46, .18);

  --rapido: 140ms ease;
  --normal: 260ms cubic-bezier(.22, .61, .36, 1);

  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --fonte-num: 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --topo-h: 64px;
}

/* ── Reset curto ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` tem que vencer qualquer display de componente. Sem o !important,
   um `.menu { display: flex }` deixa visível um elemento marcado como
   escondido — e ele passa a interceptar cliques de tudo que está atrás. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo-pagina);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--texto-forte);
  font-weight: 600;
  line-height: 1.2;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul-claro); }

/* Número em tabela alinha por coluna, sempre. Dígito de largura variável faz
   coluna de dinheiro parecer torta e atrapalha a comparação visual. */
.num, td.num, .valor { font-variant-numeric: tabular-nums; }

.lucro  { color: var(--verde); }
.perda  { color: var(--vermelho); }

/* ── Marca ───────────────────────────────────────────────────────────────── */

.marca { display: flex; align-items: center; gap: var(--esp-3); }
/* O tamanho fixo vale só dentro do lockup. Solto na regra global, ele
   sobrescrevia o width/height do próprio SVG e o parâmetro de tamanho
   de `simbolo()` não fazia nada — pedir 96 px devolvia 34. */
.marca .marca-simbolo { width: 34px; height: 34px; flex-shrink: 0; }
.marca-simbolo { flex-shrink: 0; }
.marca-texto { display: flex; flex-direction: column; gap: 0; }
.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--texto-claro);
}
.marca-sub {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  white-space: nowrap;
}

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-2);
  padding: 10px 18px;
  border-radius: var(--raio);
  font-size: 14px; font-weight: 500;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-claro); }
.btn-secundario { background: var(--fundo); color: var(--texto-forte); border: 1px solid var(--borda-forte); }
.btn-secundario:hover { border-color: var(--azul-claro); color: var(--azul-claro); }
.btn-fantasma { color: var(--texto-fraco); }
.btn-fantasma:hover { color: var(--azul-claro); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.link-btn {
  font-size: 13px; color: var(--azul-claro);
  border-bottom: 1px solid transparent;
  padding: 0;
}
.link-btn:hover { border-bottom-color: currentColor; }
.link-btn.perigo { color: var(--vermelho); }

.card {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
}