:root {
  --amarelo: #FFD000;
  --rosa-claro: #FDE3EF;
  --laranja-claro: #FDEBD6;
  --preto: #111111;
  --branco: #FFFFFF;
  --laranja: #F29A1F;
  --rosa: #F47FB0;
  --creme: #FFF6D6;
  --cinza: #6A6459;
  --r: 20px;
  --sombra: 4px 4px 0 var(--preto);
  --sombra-p: 3px 3px 0 var(--preto);
  --display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --texto: 'Outfit', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--amarelo);
  color: var(--preto);
  transition: background-color .35s ease;
  font: 16px/1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* o amarelo é a cor raiz, e cada tela puxa outra cor da paleta */
body[data-tela="plano"] { background: var(--creme); }
body[data-tela="evento"] { background: var(--rosa-claro); }
body[data-tela="troca"] { background: var(--laranja-claro); }
body[data-tela="resultado"] { background: var(--creme); }
body[data-tela="senha"] { background: var(--creme); }
body[data-tela="plano"] .salvar-barra { background: var(--creme); }
.app { max-width: 560px; margin: 0 auto; padding: 18px 16px 24px; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.marca { display: block; height: 30px; width: auto; align-self: flex-start; object-fit: contain; flex: 0 0 auto; }
.topo-dir { display: flex; align-items: center; gap: 10px; }
.link { background: none; border: 0; padding: 6px 0; color: var(--preto); cursor: pointer; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.voltar { background: none; border: 0; padding: 0; color: var(--preto); cursor: pointer; font-weight: 700; font-size: 16px; font-family: var(--display); }
.idioma { display: inline-flex; border: 2px solid var(--preto); border-radius: 999px; overflow: hidden; background: var(--branco); }
.idioma button { background: none; border: 0; padding: 5px 11px; cursor: pointer; font-size: 13px; font-weight: 600; }
.idioma button.on { background: var(--preto); color: var(--branco); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.12; }
h1 { font-size: 32px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
p { margin: 0; }
.lead { margin-top: 10px; font-size: 17px; }
.muted { color: var(--cinza); }
.small { font-size: 14px; }

/* cartões e caixas */
.cartao {
  background: var(--branco); border: 2px solid var(--preto); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 18px; margin-top: 16px;
}
.cartao h3 { margin-bottom: 12px; }
.cartao h3::after { content: ''; display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--amarelo); margin-top: 7px; }
.cartao.rosa h3::after { background: var(--rosa); }
.cartao.laranja h3::after { background: var(--laranja); }
.cartao.preto h3::after { background: var(--preto); }
.nota { border: 2px solid var(--preto); border-radius: 16px; padding: 14px 16px; font-size: 15px; background: var(--branco); box-shadow: var(--sombra-p); }
.nota.rosa { background: var(--rosa); }
.nota.laranja { background: var(--laranja); }
.nota.creme { background: var(--creme); }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 14px; padding: 15px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--preto); background: var(--preto); color: var(--branco);
  font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: var(--sombra);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease, background .14s ease;
}
/* hover inverte a cor e levanta o botão; o clique afunda ele até encostar na sombra */
.btn:hover {
  background: var(--branco); color: var(--preto);
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto);
}
.btn:active {
  transform: translate(4px, 4px); box-shadow: 0 0 0 var(--preto);
  transition-duration: .05s;
}
.btn:focus-visible, .chip:focus-visible, .acao:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.btn.sec { background: var(--branco); color: var(--preto); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: var(--sombra); background: var(--preto); color: var(--branco); }
.btn.sec:disabled { background: var(--branco); color: var(--preto); }

/* campos */
.campo { display: block; margin-top: 16px; }
.campo span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.input {
  width: 100%; padding: 14px 16px; border: 2px solid var(--preto); border-radius: 14px;
  background: var(--branco); font-size: 17px; outline: none;
}
.input:focus { box-shadow: var(--sombra-p); }
.input.codigo { letter-spacing: .3em; text-transform: uppercase; font-weight: 700; font-size: 22px; text-align: center; }
.erro { font-size: 14px; margin-top: 10px; min-height: 20px; font-weight: 600; }

/* login */
.login { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; }
.login .marca { height: 46px; margin-bottom: 26px; }
.abas { display: flex; gap: 8px; margin-top: 20px; }
.abas button {
  flex: 1; padding: 11px 8px; border: 2px solid var(--preto); border-radius: 999px; background: var(--branco);
  cursor: pointer; font-weight: 600; font-size: 15px;
}
.abas button.on { background: var(--preto); color: var(--branco); }

/* home */
.acoes { display: grid; gap: 14px; }
.acao {
  text-align: left; border: 2px solid var(--preto); background: var(--branco); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 18px; cursor: pointer; display: grid; gap: 4px;
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease;
}
.acao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.acao:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--preto); transition-duration: .05s; }
.acao strong { font-family: var(--display); font-weight: 700; font-size: 21px; }
.acao span { font-size: 15px; }
.acao.principal { background: var(--rosa); }
.acao.segunda { background: var(--laranja); }
.rodape-info { margin-top: 26px; padding-top: 16px; border-top: 2px dashed var(--preto); font-size: 14px; display: grid; gap: 8px; justify-items: start; }

/* conversa */
.conversa { display: grid; gap: 14px; margin-top: 16px; }
.bolha-app { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.bolha-app.pequena { font-size: 16px; font-family: var(--texto); font-weight: 500; color: var(--cinza); }
.resposta {
  justify-self: end; background: var(--amarelo); border: 2px solid var(--preto); box-shadow: var(--sombra-p);
  padding: 8px 14px; border-radius: 16px 16px 4px 16px; font-weight: 600; font-size: 15px; max-width: 86%;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 2px solid var(--preto); background: var(--branco); padding: 10px 15px; border-radius: 999px;
  cursor: pointer; font-size: 15px; font-weight: 500; box-shadow: var(--sombra-p);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease, background .12s ease;
}
.chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--preto); }
.chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--preto); transition-duration: .05s; }
.chip.on { background: var(--preto); color: var(--branco); }
.chip.on:hover { background: var(--preto); }
.passo-atual { display: grid; gap: 12px; padding-bottom: 8px; }
.linha-acoes { display: flex; gap: 10px; }
.linha-acoes .btn { margin-top: 0; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--preto); background: var(--branco);
  cursor: pointer; font-size: 22px; font-weight: 700; box-shadow: var(--sombra-p);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease;
}
.stepper button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--preto); }
.stepper button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--preto); transition-duration: .05s; }
.stepper b { min-width: 30px; text-align: center; font-size: 22px; font-family: var(--display); }
.bebida { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--preto); }
.bebida:last-of-type { border-bottom: 0; }

/* resultado */
.resultado { display: grid; gap: 18px; }
.selo {
  display: inline-block; background: var(--preto); color: var(--amarelo); border: 2px solid var(--preto); border-radius: 999px;
  padding: 5px 14px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; justify-self: start;
  box-shadow: var(--sombra-p);
}
.selo.a { background: var(--rosa); color: var(--preto); }
.selo.b { background: var(--laranja); color: var(--preto); }
.selo.c { background: var(--amarelo); color: var(--preto); }
.selo.troca { background: var(--branco); color: var(--preto); }
.destaque { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.15; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th, .tabela td { text-align: right; padding: 8px 4px; border-bottom: 2px solid var(--preto); font-variant-numeric: tabular-nums; }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela th { font-size: 13px; font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }
.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.lista li { padding-left: 20px; position: relative; }
.lista li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--rosa); border: 2px solid var(--preto); }
.ajuste-ref { margin-top: 16px; }
.ajuste-ref:first-of-type { margin-top: 0; }
.ajuste-ref b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 8px; }
details.porque { margin-top: 5px; font-size: 14px; }
details.porque summary { cursor: pointer; font-weight: 600; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
details.porque summary::-webkit-details-marker { display: none; }
details.porque p { margin-top: 6px; color: var(--cinza); }
.fechamento { font-family: var(--display); font-weight: 700; font-size: 21px; border-top: 2px dashed var(--preto); padding-top: 16px; }
.opcao { border-top: 2px dashed var(--preto); padding-top: 14px; margin-top: 14px; }
.opcao:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.opcao b { font-family: var(--display); font-size: 18px; }
.opcao .num { font-size: 14px; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--cinza); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.checks span { background: var(--amarelo); border: 2px solid var(--preto); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }

/* plano */
.refeicao { background: var(--branco); border: 2px solid var(--preto); border-radius: var(--r); box-shadow: var(--sombra); padding: 16px; margin-top: 14px; }
.refeicao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.refeicao-topo h3 { font-size: 20px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed var(--preto); font-size: 15px; }
.item:last-of-type { border-bottom: 0; }
.item > span:last-child { white-space: nowrap; }
.item .x { background: none; border: 0; cursor: pointer; font-size: 20px; padding: 0 2px; font-weight: 700; }
.kcal { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cinza); }
.busca-res { max-height: 260px; overflow: auto; border: 2px solid var(--preto); border-radius: 14px; margin-top: 8px; background: var(--branco); }
.busca-res button { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0; border-bottom: 2px dashed var(--preto); background: none; cursor: pointer; }
.busca-res button:last-child { border-bottom: 0; }
.busca-res button:hover { background: var(--amarelo); }
.qtd { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 10px; }
.add-item { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.salvar-barra { position: sticky; bottom: 76px; padding: 12px 0 4px; background: var(--amarelo); }

.aviso-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--branco); border-top: 2px solid var(--preto); font-size: 12.5px; text-align: center;
}
.carregando { padding: 40px 0; font-family: var(--display); font-weight: 700; font-size: 20px; }

/* quem prefere menos movimento não recebe o pulo dos botões */
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .acao, .stepper button { transition: none; }
  .btn:hover, .chip:hover, .acao:hover, .stepper button:hover { transform: none; }
  .btn:hover { box-shadow: var(--sombra); }
}

@media (min-width: 600px) {
  .app { padding-top: 32px; }
  h1 { font-size: 38px; }
}