/* Agendamento público — Engenharia da Beleza */
:root {
  --cream: #faf3ea; --paper: #fffdfa; --blush: #f6e6d9; --sand: #e9d8c4;
  --terra: #c0704a; --terra-deep: #a2542f; --terra-soft: #e7b99c;
  --ink: #33271f; --ink-soft: #6b584a; --line: #e7dccd; --ok: #2f9e54; --danger: #c0493a; --wa: #25a855;
  --radius: 18px; --radius-sm: 11px;
  --font-sans: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: "Spectral", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 500px at 15% -10%, var(--blush), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, var(--terra-soft), transparent 55%), var(--cream);
  min-height: 100vh; }
.boot { padding: 48px; text-align: center; color: var(--ink-soft); }

.wrap { max-width: 460px; margin: 0 auto; padding: 28px 18px 48px; }
.brand { text-align: center; margin-bottom: 18px; }
.brand .mark { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--terra-deep); }
.brand .sub { color: var(--ink-soft); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(90,55,32,.12); padding: 24px 22px; }
h1 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 4px; }
.lead { color: var(--ink-soft); font-size: .92rem; margin: 0 0 18px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: .82rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 13px; border: 1px solid var(--sand);
  border-radius: var(--radius-sm); background: var(--paper); font: inherit; color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(192,112,74,.15); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 800; width: 100%;
  padding: 14px 18px; border-radius: var(--radius-sm); background: var(--terra); color: #fff; font-size: 1.05rem; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.wa { background: var(--wa); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

.msg { padding: 11px 13px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 14px; }
.msg.err { background: #fcebe8; color: var(--danger); border: 1px solid #f3cfc9; }

.sucesso { text-align: center; }
.sucesso .ok-emoji { font-size: 2.6rem; }
.sucesso h1 { margin-top: 8px; }
.resumo { background: var(--blush); border-radius: var(--radius-sm); padding: 14px 16px; margin: 14px 0; text-align: left; }
.resumo div { margin: 2px 0; }
.rodape { text-align: center; color: var(--ink-soft); font-size: .8rem; margin-top: 18px; }
.rodape .flor { font-family: var(--font-serif); color: var(--terra); font-size: 1rem; }