* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1rem 4rem;
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #16130f; background: #faf7f2;
}
main { max-width: 34rem; margin: 0 auto; }
header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #e2dbd0;
}
header h1 { font-size: 1.25rem; margin: 0; letter-spacing: .02em; }
header form { margin: 0; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
p { margin: .75rem 0; }
.aviso, .erro {
  padding: .75rem 1rem; border-radius: .5rem; margin: 1rem 0;
  border: 1px solid #cbbfa8; background: #fdf6e3;
}
.erro { border-color: #b04a2f; background: #fbeae5; }
.cartao {
  border: 1px solid #e2dbd0; border-radius: .75rem; background: #fff;
  padding: 1rem; margin: 1rem 0;
}
.selo {
  display: inline-block; padding: .25rem .6rem; border-radius: 1rem;
  font-size: 1rem; border: 1px solid #b7ad9c; background: #f2ece1;
}
.selo.confirmado { border-color: #2f6b3f; color: #21512f; background: #e8f3ea; }
.selo.nao_confirmado { border-color: #b04a2f; color: #8a3721; background: #fbeae5; }
.meta { font-size: 1rem; color: #5b5348; margin: .5rem 0; overflow-wrap: anywhere; }
.meta a { color: #1c4f8a; }
/* A sugestão é o que ele lê para decidir: tamanho do corpo, e nunca escondida. */
.mandaram { margin: .25rem 0; overflow-wrap: anywhere; white-space: pre-line; }
details.mais { margin-top: .25rem; }
/* O rótulo de "Ver tudo" alterna sem script: os dois estão no HTML, e o
   `[open]` do pai escolhe qual aparece. */
details[open] > summary .abrir, details:not([open]) > summary .fechar { display: none; }
textarea, input[type=email], input[type=text] {
  width: 100%; font: inherit; padding: .75rem; border-radius: .5rem;
  border: 1px solid #b7ad9c; background: #fff; color: inherit;
}
textarea { min-height: 9rem; }
label { display: block; margin: .75rem 0 .25rem; font-size: 1rem; }
button, .botao {
  /* 44px é o alvo de toque mínimo — abaixo disso, o polegar erra. */
  min-height: 44px; min-width: 44px; font: inherit; font-weight: 600;
  padding: .7rem 1.1rem; border-radius: .5rem; border: 1px solid #16130f;
  background: #16130f; color: #faf7f2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
button.secundario { background: #faf7f2; color: #16130f; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.acoes form { margin: 0; }
details { margin-top: 1rem; }
/* `<summary>` sem marcador é texto puro — foi como o `qa` achou "Devolver" e
   "Ver tudo" em 06/09: `display: flex` apaga o marcador nativo no Chrome, e no
   telefone não há `cursor: pointer` que socorra. Veste-se de botão secundário
   e leva a própria seta, igual nos dois motores. */
summary {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: .5rem;
  border: 1px solid #16130f; background: #faf7f2; color: #16130f;
  font-weight: 600; cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
/* A barra é dobrada porque isto é uma string Python não-raw: `` sozinho é
   escape octal, e a seta virava o texto "B8" na tela. Achado pelo `qa`. */
summary::before { content: "\25B8"; }
details[open] > summary::before { content: "\25BE"; }
footer { margin-top: 3rem; font-size: 1rem; color: #5b5348; }