/* ============================================================================
   Cartão Fidelidade — design system
   ----------------------------------------------------------------------------
   Uma folha só, sem dependência externa (a regra do produto: nada de CDN, o
   balcão não pode depender de terceiro no ar). Dark deliberado sobre grafite
   neutro — paleta final do dono (29/07/2026, após 4 rodadas): TONS DE CINZA
   são o principal (botões, marca e cromo monocromáticos); laranja, amarelo e
   azul entram só como contraste. Saturação e glow contidos: nada de neon.

   Assinaturas visuais:
   1. O QR num ticket claro sobre fundo escuro — o objeto luminoso que o
      lojista mira no balcão.
   2. Progresso como fileira de selos carimbados, não barra genérica.
   3. Cinza claro é o botão e a marca. Laranja é o contraste interativo
      (links, foco, selos carimbados, abas). Amarelo é reservado à recompensa.
      Azul é o toque técnico (ruído do banner, aurora). Verde/vermelho são
      resultado de operação. Nenhum se veste de outro.

   Contrastes calculados sobre --fundo (#0a0d10) e --superficie (#141a20):
   tinta 17.5:1 · tinta-2 9.3:1 · tinta-3 5.7:1 · acento(laranja) 9.4:1 ·
   ouro(amarelo) 11.9:1 · bom 10.6:1 · ruim 7.7:1 · neutro-tinta sobre neutro
   14.1:1 — AA garantido, AAA na maior parte.
   ========================================================================== */

:root {
  --fundo: #0a0d10;
  --fundo-2: #10151a;
  --superficie: #141a20;
  --superficie-2: #1a222a;
  --borda: rgba(240, 243, 245, 0.09);
  --borda-forte: rgba(240, 243, 245, 0.18);

  --tinta: #f0f3f5;
  --tinta-2: #aeb4b8;
  --tinta-3: #858c90;

  --neutro: #e2e6e9;      /* PRINCIPAL: cinza claro — botões e marca monocromáticos */
  --neutro-2: #f2f4f6;     /* hover do principal */
  --neutro-tinta: #15191d; /* texto sobre neutro */

  --acento: #ff9d4d;      /* laranja: contraste interativo (links, foco, selos) */
  --acento-2: #ffb347;
  --acento-tinta: #2b1607; /* texto sobre acento */
  --ouro: #f5c445;         /* recompensa, e só ela (amarelo) */

  --bom: #5fd68a;
  --ruim: #ff7a70;
  --ok-fundo: #0f2f1d;
  --ok-borda: #2a6743;
  --erro-fundo: #3a1310;
  --erro-borda: #93372e;

  --grad-marca: linear-gradient(135deg, var(--acento), var(--ouro));
  --raio: 16px;
  --raio-g: 24px;
  --largura: 640px;

  --terracota: var(--acento); /* nome herdado: telas antigas referenciam */
  --cinza: var(--tinta-2);
  --creme: var(--fundo);
  --carvao: var(--tinta);
  --erro: var(--ruim);

  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
}

/* Aurora ambiente: profundidade sem peso. Fixa, sutil, nunca atrás de texto
   denso o bastante para atrapalhar leitura. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 420px at 12% -6%, rgba(255, 157, 77, 0.10), transparent 62%),
    radial-gradient(480px 380px at 96% 4%, rgba(42, 168, 184, 0.05), transparent 60%),
    var(--fundo);
}

.env {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px 72px;
}

.env--larga { --largura: 940px; }

/* --- Topo ----------------------------------------------------------------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 26px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.marca svg { display: block; }

.topo nav { display: flex; gap: 6px; align-items: center; }

.botao--mini { padding: 8px 18px; min-height: 38px; font-size: 14px; }

/* destino principal do papel: pílula com ícone. Para o cliente logado, a
   carteira é o lugar onde ele quer estar — então ela tem presença, não fica
   escondida atrás do nome. */
.topo nav a.nav-destaque {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta);
  background: rgba(240, 243, 245, 0.07);
  border: 1px solid rgba(240, 243, 245, 0.22);
  padding: 8px 15px;
  min-height: 38px;
  transition: background-color 0.15s, border-color 0.15s, transform 0.12s;
}

.topo nav a.nav-destaque svg { color: var(--tinta-2); flex: none; }

.topo nav a.nav-destaque:hover {
  background: rgba(240, 243, 245, 0.12);
  border-color: rgba(240, 243, 245, 0.4);
  color: var(--tinta);
}

.topo nav a.nav-destaque:active { transform: scale(0.97); }

.topo nav a.nav-nome { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Celular estreito: o ícone da carteira sustenta o significado sozinho, e o
   nome sai da frente antes de o cabeçalho quebrar em duas linhas. */
@media (max-width: 430px) {
  .topo nav a.nav-nome { display: none; }
}

@media (max-width: 360px) {
  .topo nav a.nav-destaque span { display: none; }
  .topo nav a.nav-destaque { padding: 8px 11px; }
}

.topo nav a.botao--mini { color: var(--neutro-tinta); }

.topo nav a.botao--mini:hover { color: var(--neutro-tinta); background: var(--neutro-2); }

.sair {
  background: none;
  border: 0;
  color: var(--tinta-3);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.sair:hover { color: var(--tinta); background: var(--superficie); }

.topo nav a {
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  min-height: 0;
}

.topo nav a:hover { color: var(--tinta); background: var(--superficie); }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px 8px 10px;
  margin-left: -10px;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
}

.voltar:hover { color: var(--tinta); background: var(--superficie); }

/* --- Miolo: rail lateral + conteúdo ---------------------------------------- */

.miolo { display: flex; gap: 22px; align-items: flex-start; }

.miolo-conteudo { flex: 1; min-width: 0; }

.lateral {
  position: sticky;
  top: 16px;
  flex: none;
  width: 194px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.lateral.recolhida { width: 56px; }

.lateral-item,
.lateral-alavanca {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--tinta-2);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.lateral-item svg,
.lateral-alavanca svg { flex: none; }

.lateral-item:hover,
.lateral-alavanca:hover { background: rgba(240, 243, 245, 0.06); color: var(--tinta); }

.lateral-alavanca {
  color: var(--tinta-3);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
  border-radius: 11px 11px 0 0;
}

/* Seção atual: barra de acento à esquerda + ícone azul. A cor não carrega
   o significado sozinha — há também aria-current e o peso do texto. */
.lateral-item.atual {
  background: rgba(255, 157, 77, 0.11);
  color: var(--tinta);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--acento);
}

.lateral-item.atual svg { color: var(--acento); }

/* O rótulo some por opacidade+largura: some junto com o rail, sem "pular". */
.lateral-rotulo {
  opacity: 1;
  transition: opacity 0.16s;
}

.lateral.recolhida .lateral-rotulo {
  opacity: 0;
  pointer-events: none;
}

/* Celular: o rail encosta e vira coluna de ícones. 56px é o que sobra sem
   comer o conteúdo — e o lojista opera de pé, com uma mão. */
@media (max-width: 700px) {
  .miolo { gap: 12px; }
  .lateral { width: 56px; padding: 6px; }
  .lateral:not(.recolhida) {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    width: 190px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  }
}

/* --- Tipografia ----------------------------------------------------------- */

h1 {
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 800;
  margin: 0 0 14px;
}

h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 36px 0 10px;
}

h3 { font-size: 17px; font-weight: 700; margin: 24px 0 4px; }

p, li { color: var(--tinta-2); }

p strong, li strong { color: var(--tinta); }

a { color: var(--acento); text-underline-offset: 3px; }

small { color: var(--tinta-3); }

.rotulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.lede { font-size: 18px; line-height: 1.65; }

.mono, .cod, .caixa .n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(255, 157, 77, 0.28); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Botões --------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--neutro);
  color: var(--neutro-tinta);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, background-color 0.15s;
  box-shadow: 0 0 0 0 rgba(240, 243, 245, 0);
}

.botao:hover { background: var(--neutro-2); box-shadow: 0 6px 24px -8px rgba(240, 243, 245, 0.3); }

.botao:active { transform: scale(0.975); }

.botao.secundario {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid rgba(240, 243, 245, 0.35);
  box-shadow: none;
}

.botao.secundario:hover { border-color: rgba(240, 243, 245, 0.7); background: rgba(240, 243, 245, 0.06); }

.botao.perigo { background: var(--ruim); color: #33110d; }

.botao.perigo:hover { background: #ff9088; box-shadow: 0 6px 24px -8px rgba(255, 122, 112, 0.5); }

.botao[disabled] { opacity: 0.5; cursor: not-allowed; }

.acoes { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }

/* --- Formulários ---------------------------------------------------------- */

.campo,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
  background: var(--superficie);
  color: var(--tinta);
  border: 1.5px solid var(--borda-forte);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 48px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder, textarea::placeholder { color: var(--tinta-3); }

input:not([type="checkbox"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(255, 157, 77, 0.22);
}

label { color: var(--tinta); }

input[type="checkbox"] {
  width: 26px;
  height: 26px;
  accent-color: var(--acento);
  flex: none;
}

/* --- Superfícies ----------------------------------------------------------- */

.bloco, .cartao, .caixa, .lista, .cartaz {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  position: relative;
}

/* luz de cima: o fio que faz a superfície "existir" no escuro */
.bloco::before, .cartao::before, .caixa::before, .cartaz::before {
  content: "";
  position: absolute;
  inset: 0 12% auto 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 243, 245, 0.14), transparent);
  pointer-events: none;
}

.bloco { padding: 20px; margin: 0 0 20px; }

.bloco.perigo { border-color: rgba(255, 122, 112, 0.35); }

.bloco.perigo h2 { color: var(--ruim); margin-top: 0; }

.linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}

.linha:last-child { border-bottom: 0; }

.lista { padding: 6px 18px; margin: 0 0 20px; }

.lista ul { padding: 0; margin: 0; }

.lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
  list-style: none;
}

.lista li:last-child { border-bottom: 0; }

.vazio { color: var(--tinta-3); font-size: 14px; padding: 12px 0; }

.off { opacity: 0.5; }

/* --- Cartão da carteira ---------------------------------------------------- */

.cartao {
  display: block;
  padding: 20px;
  margin: 0 0 14px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--raio-g);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.25s;
}

a.cartao:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 243, 245, 0.28);
  box-shadow: 0 12px 36px -14px rgba(0, 0, 0, 0.6);
}

.cartao h2 { margin: 0 0 4px; font-size: 19px; }

/* slot do próximo cartão: presença sem competir com os cartões reais.
   É um <button> de verdade — parecer clicável sem ser é defeito. */
.slot-novo {
  display: block;
  width: 100%;
  border-style: dashed;
  border-color: var(--borda-forte);
  background: transparent;
  text-align: center;
  color: var(--tinta-3);
  padding: 22px 20px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.12s;
}

.slot-novo::before { content: none; }

.slot-novo strong { display: block; color: var(--tinta-2); font-size: 16px; margin-bottom: 4px; }

.slot-novo:hover {
  border-color: rgba(240, 243, 245, 0.4);
  background: rgba(240, 243, 245, 0.04);
  color: var(--tinta-2);
}

.slot-novo:hover strong { color: var(--tinta); }

.slot-novo:active { transform: scale(0.99); }

/* --- Progresso ------------------------------------------------------------- */

.barra {
  background: rgba(240, 243, 245, 0.08);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin: 12px 0 8px;
}

.barra span {
  display: block;
  height: 100%;
  background: var(--grad-marca);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* fileira de selos: a metáfora do cartão carimbado */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 10px;
}

.selos .ponto {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--borda-forte);
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
}

.selos .ponto.cheio {
  border-color: var(--acento);
  background: radial-gradient(circle at 35% 30%, var(--acento-2), var(--acento) 70%);
  color: var(--acento-tinta);
  box-shadow: 0 0 14px rgba(255, 157, 77, 0.35);
  animation: carimbo 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}

.selos .ponto.premio {
  border-style: dashed;
  border-color: rgba(245, 196, 69, 0.55);
  color: var(--ouro);
}

.selos .ponto.premio.cheio {
  border-style: solid;
  border-color: var(--ouro);
  background: radial-gradient(circle at 35% 30%, #ffdd7a, var(--ouro) 70%);
  color: #3a2c05;
  box-shadow: 0 0 18px rgba(245, 196, 69, 0.45);
}

@keyframes carimbo {
  from { transform: scale(1.5) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.heroi {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.heroi small { font-size: 20px; font-weight: 600; color: var(--tinta-3); letter-spacing: 0; }

/* selo-badge de recompensa (lista da carteira) */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 196, 69, 0.14);
  color: var(--ouro);
  border: 1px solid rgba(245, 196, 69, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}

/* faixa de celebração: cartão completo */
.completo {
  background:
    radial-gradient(420px 130px at 50% -30%, rgba(245, 196, 69, 0.22), transparent 70%),
    linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid rgba(245, 196, 69, 0.45);
  border-radius: var(--raio-g);
  padding: 22px 18px;
  text-align: center;
  animation: surgir 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.completo h2 { color: var(--ouro); margin: 0 0 4px; letter-spacing: -0.01em; }

.completo p { color: var(--tinta-2); margin: 0; }

/* --- QR / ticket ------------------------------------------------------------ */

.qr {
  text-align: center;
  background: #fdfcf9;                    /* o QR exige claro; o ticket brilha no escuro */
  color: #1f262b;
  border-radius: var(--raio-g);
  padding: 26px 20px 20px;
  margin: 22px 0;
  box-shadow:
    0 0 0 1px rgba(240, 243, 245, 0.2),
    0 18px 60px -18px rgba(0, 0, 0, 0.55);
}

.qr img { width: min(260px, 72vw); image-rendering: pixelated; display: inline-block; }

.qr .cod {
  color: #1f262b;
  border-top: 2px dashed rgba(31, 38, 43, 0.18); /* o picote do ticket */
  padding-top: 14px;
  margin: 16px 0 2px;
}

.cod {
  font-size: 40px;
  letter-spacing: 0.22em;
  font-weight: 700;
  line-height: 1.2;
}

.prazo { color: #6b7278; font-size: 14px; margin: 2px 0 12px; }

.qr .botao.secundario {
  color: #a35418;
  border-color: rgba(163, 84, 24, 0.45);
}

.qr .botao.secundario:hover { background: rgba(163, 84, 24, 0.07); border-color: #a35418; }

/* --- Scanner ---------------------------------------------------------------- */

.abas { display: flex; gap: 8px; margin: 0 0 20px; }

.aba {
  flex: 1;
  padding: 14px;
  min-height: 52px;
  background: var(--superficie);
  color: var(--tinta-2);
  border: 1.5px solid var(--borda-forte);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.aba[aria-selected="true"] {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(255, 157, 77, 0.1);
}

#camera {
  width: 100%;
  border-radius: var(--raio-g);
  background: #000;
  aspect-ratio: 1;
  object-fit: cover;
}

.mira { position: relative; }

.mira::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: respira 2.6s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { inset: 12%; opacity: 0.9; }
  50% { inset: 10.5%; opacity: 1; }
}

.resultado {
  border-radius: var(--raio-g);
  padding: 26px 20px;
  margin: 20px 0;
  text-align: center;
  border: 1px solid transparent;
  animation: surgir 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.resultado h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.01em; }

.resultado p { margin: 4px 0; }

.resultado.ok { background: var(--ok-fundo); border-color: var(--ok-borda); }

.resultado.ok h2 { color: var(--bom); }

.resultado.ok p { color: #cdeeda; }

.resultado.erro { background: var(--erro-fundo); border-color: var(--erro-borda); }

.resultado.erro h2 { color: var(--ruim); }

.resultado.erro p { color: #ffd9d4; }

@keyframes surgir {
  from { transform: scale(0.96) translateY(6px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* resgate: amarelo, para o lojista distinguir prêmio de selo num relance */
.resultado.premio {
  background:
    radial-gradient(420px 130px at 50% -30%, rgba(245, 196, 69, 0.2), transparent 70%),
    var(--superficie);
  border-color: rgba(245, 196, 69, 0.5);
}

.resultado.premio h2 { color: var(--ouro); }

.resultado.premio p { color: #f4e8c8; }

.botao.ouro { background: var(--ouro); color: #3a2c05; }

.botao.ouro:hover { background: #ffdd7a; box-shadow: 0 6px 24px -8px rgba(245, 196, 69, 0.5); }

/* etiqueta no ticket quando o código vale o prêmio, não mais um selo */
.etiqueta-premio {
  display: inline-block;
  background: var(--ouro);
  color: #3a2c05;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 10px;
}

.dica {
  background: rgba(245, 196, 69, 0.09);
  border: 1px solid rgba(245, 196, 69, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--tinta-2);
  margin: 0 0 16px;
}

.dica strong { color: var(--ouro); }

/* --- Métricas (stat tiles) -------------------------------------------------- */

.grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.caixa { padding: 18px 16px; }

.caixa .n { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--tinta); }

.caixa .r {
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
}

.var { font-size: 13px; font-weight: 600; color: var(--tinta-3); }

.var.sobe { color: var(--bom); }

.var.desce { color: var(--ruim); }

.var.igual { color: var(--tinta-3); }

/* --- Landing ----------------------------------------------------------------- */

.passos { list-style: none; padding: 0; counter-reset: p; margin: 20px 0; }

.passos li {
  counter-increment: p;
  position: relative;
  padding-left: 52px;
  margin-bottom: 22px;
}

.passos li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--acento);
  border: 1.5px solid rgba(255, 157, 77, 0.4);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

/* card-destaque da regra do programa (página de adesão) */
.destaque {
  background:
    radial-gradient(360px 120px at 50% -20%, rgba(240, 243, 245, 0.07), transparent 70%),
    linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid rgba(240, 243, 245, 0.2);
  border-radius: var(--raio-g);
  padding: 22px 18px;
  text-align: center;
  margin: 18px 0;
}

.destaque strong { font-size: 21px; display: block; margin-bottom: 4px; color: var(--tinta); }

.destaque span { color: var(--tinta-3); font-size: 14px; }

/* logo da loja (adesão, config) */
.logo-loja {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 20px;
  background: #fdfcf9;
  border: 1px solid var(--borda);
  padding: 8px;
}

/* filtro de histórico (botões aria-pressed) */
.filtro { display: flex; gap: 8px; margin: 16px 0; }

.filtro button {
  flex: 1;
  padding: 12px;
  min-height: 46px;
  background: var(--superficie);
  color: var(--tinta-2);
  border: 1.5px solid var(--borda-forte);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.filtro button[aria-pressed="true"] {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(255, 157, 77, 0.1);
}

.desfeito { color: var(--tinta-3); text-decoration: line-through; }

/* --- Avisos ------------------------------------------------------------------ */

.aviso {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  color: #ffd9d4;
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 24px;
  font-size: 14px;
}

.aviso strong { display: block; margin-bottom: 6px; color: var(--ruim); }

.aviso ul { margin: 8px 0 0; padding-left: 20px; }

.aviso li { color: #ffd9d4; }

/* --- Cartaz do QR de adesão --------------------------------------------------- */

.cartaz { padding: 26px 20px; text-align: center; margin: 20px 0; }

.cartaz img {
  width: min(300px, 80vw);
  background: #fdfcf9;
  padding: 14px;
  border-radius: 18px;
}

.link {
  font-size: 14px;
  word-break: break-all;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tinta-2);
}

/* --- Rodapé ------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--borda);
  margin-top: 56px;
  padding-top: 22px;
  font-size: 13px;
  color: var(--tinta-3);
}

footer p { color: var(--tinta-3); margin: 6px 0; }

footer a { color: var(--tinta-2); text-decoration: none; }

footer a:hover { color: var(--tinta); }

/* --- Utilitários ---------------------------------------------------------------- */

.oculto { display: none !important; }

/* --- Movimento: quem pediu menos, recebe menos ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Desktop --------------------------------------------------------------------- */

@media (min-width: 640px) {
  .acoes { flex-direction: row; }
  .grade { grid-template-columns: repeat(4, 1fr); }
  .env--larga .grade { grid-template-columns: repeat(4, 1fr); }
}

/* --- Impressão: papel é claro, tinta é cara --------------------------------------- */

@media print {
  body { background: #fff; color: #111; }
  body::before, .topo nav, .voltar, .botao, footer { display: none !important; }
  .cartaz, .bloco, .lista { border-color: #ddd; background: #fff; }
}

/* --- Assinatura B2B no cartão do cliente (item 16) --------------------------
   Tipografia menor que o corpo, cor recuada, sem logo: o cartão é da loja. Uma
   assinatura que competisse com a marca do lojista queimaria o canal. */

.assinatura-b2b {
  /* Vive dentro do ticket, que é claro — daí a cor escura recuada. Fica no pé,
     depois do botão, como um convite discreto e não como assinatura. */
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(34, 28, 20, 0.12);
  font-size: 12px;
  text-align: center;
}

.assinatura-b2b a { color: #8a8177; text-decoration: underline; text-underline-offset: 2px; }

.assinatura-b2b a:hover { color: #4a443c; }

/* --- Prazo da cartela (item 9) ----------------------------------------------
   Informação, não ameaça: cor neutra por padrão. Só vira âmbar quando o prazo
   está perto — e mesmo aí o texto diz que uma visita renova. */

.prazo-cartela {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--tinta-3);
  text-align: center;
}

.prazo-cartela.urgente { color: var(--acento); font-weight: 600; }

/* --- Barra de atendente no balcão (item 7) ---------------------------------- */

.atendente-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 8px 10px 8px 16px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-2);
}

#pinCampo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Seletor de unidade (item 13) -------------------------------------------
   Acima do título porque muda o significado de tudo abaixo dele. Só existe a
   partir da segunda unidade: quem tem uma loja não ganha complexidade. */

.seletor-unidade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.seletor-unidade select { width: auto; min-width: 200px; }

/* Botão dentro do rail (Entrar como admin) — alinha com os links de seção. */
button.lateral-item { text-align: left; font-size: 14.5px; }

/* ============================================================================
   Funil de abertura de loja (D-050)
   ----------------------------------------------------------------------------
   Mesma linguagem do agendamento do Seu Momento: stepper numerado no topo,
   barra "Passo N de M" no celular, e as etapas como acordeão com resumo e
   "Alterar". A diferença é o contexto — aqui o funil termina numa conta, e a
   etapa 1 mostra uma PRÉVIA do que o cliente final vai ver. Ver o cartão sendo
   montado é o que transforma um formulário em decisão de negócio.
   ========================================================================== */

.stepper { margin: 26px 0 22px; }

.stepper-lista {
  display: none;                 /* no celular quem manda é a barra */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-3);
}

.stepper-item::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda);
}

.stepper-item:last-child::after { display: none; }

.stepper-bola {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--borda-forte);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.stepper-item[data-estado="ativa"] { color: var(--tinta); }

.stepper-item[data-estado="ativa"] .stepper-bola {
  border-color: var(--acento);
  color: var(--acento);
  box-shadow: 0 0 0 4px rgba(255, 157, 77, 0.12);
}

.stepper-item[data-estado="feita"] { color: var(--tinta-2); }

.stepper-item[data-estado="feita"] .stepper-bola {
  background: var(--acento);
  border-color: var(--acento);
  font-size: 0;
}

.stepper-item[data-estado="feita"] .stepper-bola::after {
  content: "✓";
  font-size: 14px;
  font-weight: 700;
  color: var(--acento-tinta);
}

.stepper-celular-linha {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  margin-bottom: 8px;
}

.stepper-barra {
  height: 4px;
  background: rgba(240, 243, 245, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.stepper-barra i {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--grad-marca);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Etapas (acordeão) ------------------------------------------------------ */

.etapa {
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin: 0 0 12px;
  overflow: hidden;
  transition: border-color 0.2s, opacity 0.2s;
}

.etapa[data-estado="ativa"] { border-color: rgba(255, 157, 77, 0.35); }

/* Etapa que ainda não chegou não aparece: uma pergunta por vez.
   Quem quer saber o que vem depois olha o stepper, que continua mostrando os
   três passos — o roteiro fica no topo, o trabalho fica embaixo. */
.etapa[data-estado="travada"] { display: none; }

/* Etapa concluída vira uma linha só: número, resumo e "Alterar". */
.etapa[data-estado="feita"] { background: var(--superficie); }

.etapa[data-estado="feita"] .etapa-topo { padding: 13px 18px; }

.etapa[data-estado="feita"] .etapa-titulo { font-size: 14px; color: var(--tinta-2); }

.etapa[data-estado="feita"] .etapa-resumo { color: var(--tinta); font-weight: 600; }

.etapa-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.etapa[data-estado="travada"] .etapa-topo { cursor: default; }

.etapa-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--borda-forte);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.etapa[data-estado="ativa"] .etapa-n { border-color: var(--acento); color: var(--acento); }

.etapa[data-estado="feita"] .etapa-n {
  background: var(--acento);
  border-color: var(--acento);
  /* O número vira ✓: concluído se lê num relance, o número não. */
  font-size: 0;
}

.etapa[data-estado="feita"] .etapa-n::after {
  content: "✓";
  font-size: 15px;
  font-weight: 700;
  color: var(--acento-tinta);
}

.etapa-topo-texto { flex: 1; min-width: 0; }

.etapa-titulo { display: block; font-size: 16px; font-weight: 700; color: var(--tinta); }

.etapa-resumo {
  display: block;
  font-size: 13px;
  color: var(--tinta-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etapa-alterar {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--acento);
  opacity: 0;
  transition: opacity 0.15s;
}

.etapa[data-estado="feita"] .etapa-alterar { opacity: 1; }

/* O corpo some por altura, para o acordeão abrir e fechar sem salto. */
/* O corpo aparece só na etapa ativa.
   A primeira versão usava o truque de `grid-template-rows: 0fr` para animar a
   altura — e ele **só funciona com um único filho**. Com vários (rótulo, campo,
   chips, prévia), apenas a primeira linha colapsava e o resto continuava
   visível: era isso que deixava a etapa 2 aberta embaixo da 1.
   `display: none` não anima, mas fecha de verdade — e clareza aqui vale mais
   que a transição de altura. A entrada ganhou um fade próprio no lugar. */
.etapa-corpo { display: none; }

.etapa[data-estado="ativa"] .etapa-corpo {
  display: block;
  padding: 0 18px 18px;
  animation: etapa-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes etapa-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.campo-rotulo { display: block; font-weight: 600; margin-bottom: 8px; }

.opcional {
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 6px;
}

.ajuda { font-size: 13px; color: var(--tinta-3); margin: 8px 0 0; }

.erro-etapa { color: var(--erro); font-weight: 600; margin: 12px 0 0; }

/* --- Chips de sugestão ------------------------------------------------------
   "A maioria escolhe" não é enfeite: quem abre a primeira loja não tem
   referência de quantos selos pedir, e um número sugerido evita a paralisia de
   inventar do zero. */

.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.chip {
  background: var(--superficie);
  border: 1.5px solid var(--borda-forte);
  border-radius: 999px;
  color: var(--tinta-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  min-height: 40px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.chip:hover { border-color: rgba(255, 157, 77, 0.5); color: var(--tinta); }

.chip[aria-pressed="true"] {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(255, 157, 77, 0.1);
}

.chip--numero {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 74px;
  padding: 8px 14px;
}

.chip--numero strong { font-size: 18px; font-variant-numeric: tabular-nums; }

.chip-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ouro);
  white-space: nowrap;
}

.chip--popular { border-color: rgba(245, 196, 69, 0.4); }

/* --- Prévia do cartão -------------------------------------------------------- */

.previa {
  margin-top: 24px;
  padding: 18px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: rgba(240, 243, 245, 0.03);
}

.previa-regra { font-size: 17px; font-weight: 700; color: var(--tinta); margin: 6px 0 0; }

.previa .selos { margin: 14px 0 0; gap: 7px; }

.previa .ponto { width: 26px; height: 26px; font-size: 12px; }

/* --- Fim do funil ------------------------------------------------------------ */

.pronto {
  text-align: center;
  padding: 12px 0 0;
  animation: surgir 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.pronto-selo {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffdd7a, var(--ouro) 70%);
  color: #3a2c05;
  font-size: 30px;
  box-shadow: 0 0 26px rgba(245, 196, 69, 0.4);
}

.pronto .dica { text-align: left; margin: 20px 0; }

.ja-tenho { text-align: center; margin-top: 28px; font-size: 14px; }

@media (min-width: 720px) {
  .stepper-lista { display: flex; }
  .stepper-celular { display: none; }
}