@font-face { font-family: Poppins; src: url(/fonts/Poppins-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --amarelo: #FFC93C; --preto: #111111; --fundo: #F5F5F7; --branco: #fff; --cinza: #8A8A8A;
  --amarelo-claro: #FFF4D1; --amarelo-texto: #7A5A00; --verde: #11663B; --verde-claro: #E2F6EA;
  --vermelho: #A1281C; --vermelho-claro: #FDE6E3;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--preto); font-family: Poppins, system-ui, sans-serif; }
main { max-width: 520px; margin: 0 auto; min-height: 100vh; }
.topo { padding: 20px 18px 22px; border-radius: 0 0 24px 24px; }
.topo.amarelo { background: var(--amarelo); }
.topo.preto { background: var(--preto); color: #fff; }
.topo .sub { font-size: 13px; opacity: .75; margin: 6px 0 0; }
.topo h1 { font-size: 26px; font-weight: 700; margin: 2px 0 0; line-height: 1.2; }
.marca { font-weight: 700; font-size: 15px; }
.marca span { background: var(--preto); color: var(--amarelo); border-radius: 5px; padding: 0 5px; font-size: 11px; margin-left: 2px; }
.conteudo { padding: 16px; display: grid; gap: 12px; }
.cartao { background: var(--branco); border-radius: 14px; padding: 16px; }
.codigo { text-align: center; margin-top: 16px; }
.codigo small { color: var(--cinza); display: block; font-size: 13px; }
.codigo strong { font-size: 40px; letter-spacing: 12px; font-weight: 700; display: block; margin: 2px 0; }
.codigo em { font-style: normal; color: var(--cinza); font-size: 11px; }
.linha { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.linha .ponto { display: flex; flex-direction: column; align-items: center; }
.linha .ponto i { width: 14px; height: 14px; border-radius: 50%; background: #ddd; flex: none; }
.linha .ponto u { width: 2px; flex: 1; min-height: 22px; background: #ddd; }
.linha.feita .ponto i, .linha.feita .ponto u { background: var(--preto); }
.linha .txt { padding-bottom: 14px; }
.linha .txt b { font-weight: 600; display: block; }
.linha:not(.feita) .txt b { color: var(--cinza); }
.linha .txt span { color: var(--cinza); font-size: 12px; }
.moto { display: flex; gap: 12px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--preto); color: var(--amarelo); display: grid; place-items: center; font-weight: 700; }
.botao { display: block; width: 100%; border: 0; border-radius: 14px; padding: 14px; font: 600 15px Poppins, sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.botao.preto { background: var(--preto); color: #fff; }
.botao.amarelo { background: var(--amarelo); color: var(--preto); }
.botao.branco { background: #fff; color: var(--preto); border: 1px solid #e3e3e3; }
.botao:disabled { opacity: .5; cursor: default; }
input { width: 100%; border: 0; border-radius: 12px; padding: 14px; font: 16px Poppins, sans-serif; background: #fff; text-transform: uppercase; }
input:focus { outline: 2px solid var(--preto); }
.estrelas { display: flex; justify-content: center; gap: 4px; margin: 8px 0 12px; }
.estrelas button { background: none; border: 0; font-size: 34px; color: #E2A32B; cursor: pointer; padding: 0 2px; }
.foto { width: 100%; border-radius: 10px; display: block; margin-top: 8px; }
.aviso { text-align: center; color: var(--cinza); font-size: 13px; }
.erro { color: var(--vermelho); font-weight: 600; text-align: center; }
.selo { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--amarelo-claro); color: var(--amarelo-texto); }
.selo.verde { background: var(--verde-claro); color: var(--verde); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }