:root { color-scheme: light dark; font-family: system-ui, sans-serif; color: #19302e; background: #f3f6f3; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 780px; margin: auto; padding: 64px 24px 32px; }
h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); line-height: 1.08; letter-spacing: -.045em; margin: 16px 0 22px; }
h2 { font-size: 1.1rem; margin-top: 0; }
p { line-height: 1.6; }
.etiqueta { color: #286453; font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.intro { color: #53635e; max-width: 600px; margin-bottom: 32px; }
.painel { background: #fff; border: 1px solid #dce5df; border-radius: 20px; padding: 28px; margin-bottom: 16px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
button, .acoes a { font: inherit; font-size: .9rem; padding: 11px 16px; border-radius: 9px; border: 1px solid #b9cbc2; background: #fff; color: #19302e; cursor: pointer; text-decoration: none; }
.acoes a { background: #235e4e; color: white; border-color: #235e4e; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #d18a25; outline-offset: 3px; }
.nota, #tempo { font-size: .85rem; color: #62736b; }
.valor { font-size: 2.5rem; letter-spacing: -.04em; font-weight: 650; margin: 20px 0 0; }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0; }
footer a { color: #286453; }
[hidden] { display: none !important; }
@media (max-width: 400px) { main { padding: 32px 16px; } .painel { padding: 20px; } .acoes > * { width: 100%; text-align: center; } }
@media (prefers-color-scheme: dark) {
  :root { background: #14201d; color: #eef4f0; }
  .painel, button { background: #1d2d27; border-color: #384d43; color: #eef4f0; }
  .etiqueta, footer a { color: #a4d8bc; }
  .intro, .nota, #tempo { color: #afc0b6; }
}