/* Todas as cores do site moram neste arquivo, como variaveis.
   Nenhum outro CSS pode escrever cor literal. */
:root {
  --fundo: #f4f5f0;
  --fundo-cartao: #ffffff;
  --borda: #dcdfd5;
  --texto: #1d231c;
  --texto-fraco: #5d6858;
  --marca: #1f7a4d;
  --marca-texto: #ffffff;
  --barato-fundo: #e1f2e7;
  --barato-texto: #17603b;
  --novo-fundo: #fcefd2;
  --novo-texto: #7a5205;
  --erro: #b3261e;
  --erro-fundo: #fbe9e7;
  --barra: #c5cfbf;
  /* Veu atras da camera do leitor: quase opaco para o video se destacar. */
  --veu-leitor: rgb(0 0 0 / .88);
  --texto-sobre-veu: #ffffff;

  --raio: 12px;
  --espaco: 12px;
  --fonte: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* O atributo hidden tem que vencer qualquer display de classe. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0 var(--espaco) 96px;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

main { max-width: 640px; margin: 0 auto; }
h1 { font-size: 24px; margin: 18px 0 12px; }
h2 { font-size: 19px; margin: 24px 0 8px; }
a { color: var(--marca); }
button, input { font: inherit; }

.fraco { color: var(--texto-fraco); font-size: 15px; }
.vazio { color: var(--texto-fraco); text-align: center; padding: 24px 0; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-cartao); color: var(--texto);
  text-decoration: none; cursor: pointer;
}
.botao--principal { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.botao--perigo { color: var(--erro); border-color: var(--erro); }
.botao--pequeno { min-height: 40px; padding: 0 12px; font-size: 15px; }
.botao--largo { width: 100%; }
.botao:disabled { opacity: .6; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.campo { display: block; margin: 12px 0; }
.campo__rotulo { display: block; font-size: 15px; color: var(--texto-fraco); margin-bottom: 4px; }
.campo__caixa {
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-cartao); color: var(--texto);
}

.aviso { background: var(--erro-fundo); color: var(--erro); border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; }
.aviso--ok { background: var(--barato-fundo); color: var(--barato-texto); }

.cartao {
  display: block; background: var(--fundo-cartao); color: var(--texto); text-decoration: none;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 14px; margin: 10px 0;
}
.cartao--tracejado { border-style: dashed; }
.cartao__titulo { font-weight: 600; margin: 0 0 4px; }

.linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; }
.linha + .linha { border-top: 1px solid var(--borda); }
.preco { font-weight: 600; white-space: nowrap; }

.selo { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.selo--barato { background: var(--barato-fundo); color: var(--barato-texto); }
.selo--novo { background: var(--novo-fundo); color: var(--novo-texto); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fundo-cartao); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; color: var(--texto-fraco); text-decoration: none; font-size: 13px;
}
.nav__item--atual { color: var(--marca); }
.nav__icone { width: 26px; height: 26px; }
.nav__contador {
  position: absolute; top: 4px; left: calc(50% + 8px);
  min-width: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--novo-fundo); color: var(--novo-texto); font-size: 12px; line-height: 20px;
}

.leitor {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 16px; background: var(--veu-leitor); color: var(--texto-sobre-veu);
}
.leitor__video { width: 100%; max-width: 480px; border-radius: var(--raio); }