/* ═══════════════════════════════════════════════════════════════════════
   A página "Para empresas".

   Quase tudo aqui vem de `estilo.css`: capa, seções, cartões, passos, selos e
   botões são os mesmos da página inicial. O que sobra é a **demonstração da
   lojinha** — o desenho, no canto da capa, da loja que a empresa cliente
   recebe.

   ## Por que existem cores fora da paleta neste arquivo

   O bloco de demonstração representa a marca de OUTRA empresa. Pintá-lo de
   emerald diria exatamente o contrário do que a página vende: que a loja é
   nossa, com o logo do cliente no canto.

   As três cores do exemplo estão declaradas como tokens, com nome, no `:root`
   abaixo — e não escritas soltas no corpo do arquivo. É a mesma regra que a
   emenda 1.3.0 da constituição fixou para a lojinha de verdade: a paleta de um
   cliente entra por um lugar nomeado, nunca por hex em meio a uma declaração.

   Quando a feature 023 construir a lojinha, essas cores passam a vir do banco.
   Estas aqui são um exemplo desenhado, e o comentário existe para que ninguém
   as copie achando que são da marca.

   Os dois pares que a demonstração usa de verdade passam em AA, medidos com
   a mesma função do `conferir_estilo.sh`: branco sobre a marca rende 7.10:1,
   e o texto da pílula de saldo sobre o violeta claro rende 5.98:1.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* A marca de exemplo. Violeta porque é longe do emerald: ninguém confunde
     a loja desenhada com a nossa. */
  --exemplo-marca:       #6D28D9;
  --exemplo-marca-fraca: #EDE9FE;
  --exemplo-peca:        #DDD6FE;
}

/* ── A lojinha desenhada, no canto da capa ──────────────────────────── */

.mock {
  background: var(--surface-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  overflow: hidden;
}

.mock-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--exemplo-marca);
  color: var(--fg-on-emerald);
}

.mock-logo {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: .04em;
}

.mock-saldo {
  font-family: var(--mono);
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--exemplo-marca-fraca);
  color: var(--exemplo-marca);
}

.mock-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px;
}

.mock-peca {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  background: var(--exemplo-peca);
}

.mock-selo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--exemplo-marca);
  color: var(--fg-on-emerald);
}

.mock-endereco {
  margin: 0;
  padding: 0 18px 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
}

/* ── O aviso de preço, embaixo dos passos do crédito ────────────────── */

.aviso-preco {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--borda);
  background: var(--surface-card);
  border-radius: var(--raio);
}