/* Cool Moms Club — papel, tinta e um vinho. Light only, sem tema escuro. */
:root {
  --papel: #faf6f0;
  --papel-2: #fffdfa;
  --tinta: #221d1a;
  --tinta-2: #5f554e;
  --tinta-3: #928477;
  --linha: #e6ddd1;
  --linha-2: #d3c6b6;
  --vinho: #8c3b4a;
  --vinho-claro: #f6e9ea;
  --verde: #4a6b4f;
  --verde-claro: #eaf0e9;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(34, 29, 26, .05), 0 8px 24px -14px rgba(34, 29, 26, .22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ---- cabeçalho ---- */
.capa { padding: 56px 0 8px; text-align: center; }
.selo {
  font: 600 11px/1 "Inter", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vinho);
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--linha-2);
  border-radius: 100px;
  background: var(--papel-2);
}
h1 {
  font: 400 clamp(34px, 7vw, 52px)/1.08 "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  margin: 22px 0 14px;
  letter-spacing: -.015em;
}
.linha-fina {
  color: var(--tinta-2);
  font-size: 17px;
  margin: 0 auto;
  max-width: 46ch;
}

/* ---- blocos de texto ---- */
h2 {
  font: 400 13px/1 "Inter", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
p { margin: 0 0 14px; }
a { color: var(--vinho); }

.nota {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px 22px;
  font-size: 15px;
  color: var(--tinta-2);
}
.nota strong { color: var(--tinta); }
.nota ol, .nota ul { margin: 12px 0 0; padding-left: 20px; }
.nota li { margin-bottom: 9px; }
.nota li:last-child { margin-bottom: 0; }

/* ---- campos ---- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
input[type=text], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--linha-2);
  border-radius: 10px;
  padding: 11px 13px;
}
input[type=text]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--vinho);
  outline-offset: -1px;
  border-color: var(--vinho);
}
textarea { resize: vertical; min-height: 62px; }

button {
  font: 600 15px/1 "Inter", sans-serif;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 13px 20px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-principal { background: var(--vinho); color: #fff; }
.btn-principal:hover { background: #74303c; }
.btn-principal:disabled { background: var(--linha-2); color: var(--papel-2); cursor: not-allowed; }
.btn-neutro { background: var(--papel-2); color: var(--tinta); border-color: var(--linha-2); }
.btn-neutro:hover { border-color: var(--tinta-3); }

/* ---- avisos ---- */
.aviso { border-radius: var(--raio); padding: 14px 16px; font-size: 15px; margin: 16px 0; }
.aviso-ok { background: var(--verde-claro); color: var(--verde); }
.aviso-erro { background: var(--vinho-claro); color: var(--vinho); }
.aviso-neutro { background: #f2ece3; color: var(--tinta-2); }

.rodape {
  text-align: center;
  color: var(--tinta-3);
  font-size: 13px;
  margin: 64px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
}