/* ============================================================
   Formulário — Semana do Consultório Aberto / Olimpíada de Primavera
   Ingrid Cristine, Nutricionista
   Mesma identidade do site ingridnutricionista.com.br:
   Preto #16140f · Dourado #c9a227 · Creme #faf6ee
   Cormorant Garamond (títulos) + Poppins (corpo)
   Estética de formulário limpo (tipo Google Forms), não de quiz.
   ============================================================ */

:root {
  --preto:       #16140f;
  --preto-soft:  #201d16;
  --dourado-700: #a8791f;
  --dourado-500: #c9a227;
  --dourado-300: #e9d28c;
  --branco:      #ffffff;
  --creme:       #faf6ee;
  --borda:       #e7ddc9;
  --texto:       #2b2720;
  --texto-soft:  #726a5c;
  --erro:        #b23b3b;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Poppins", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texto);
  background: var(--creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- topo ---------- */
.topo__bar {
  background: linear-gradient(135deg, #ddb94f 0%, #b8892a 100%);
  color: var(--preto);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .55rem 1rem;
}
.topo__nav {
  background: var(--preto);
  text-align: center;
  padding: .9rem 1rem;
}
.topo__logo { height: 54px; width: auto; }

/* ---------- container ---------- */
.wrap {
  width: min(100% - 2rem, 640px);
  margin: 2rem auto 3rem;
}

/* ---------- cartões ---------- */
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(22, 20, 15, .05);
}

.card--intro {
  border-top: 4px solid var(--dourado-500);
  padding: 1.9rem 1.6rem;
}
.card--intro h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.4vw, 2.3rem);
  line-height: 1.2;
  color: var(--preto);
  margin-bottom: .9rem;
}
.card--intro p {
  color: var(--texto-soft);
  font-size: .96rem;
  margin-bottom: .7rem;
}
.card--intro p:last-child { margin-bottom: 0; }

/* ---------- perguntas ---------- */
.q label,
.q .label-bloco {
  display: block;
  font-weight: 600;
  font-size: .98rem;
  color: var(--preto);
  margin-bottom: .5rem;
}
.req { color: var(--dourado-700); font-weight: 700; }

.q .ajuda {
  display: block;
  font-size: .85rem;
  color: var(--texto-soft);
  margin: -.15rem 0 .7rem;
  font-weight: 400;
}
.q .ajuda em {
  display: block;
  margin-top: .5rem;
  font-style: italic;
  color: var(--texto-soft);
  border-left: 3px solid var(--dourado-300);
  padding-left: .8rem;
  line-height: 1.5;
}

.q input[type="text"],
.q input[type="tel"],
.q textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .98rem;
  color: var(--texto);
  background: #fdfbf6;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .8rem .9rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.q textarea { resize: vertical; min-height: 3rem; line-height: 1.55; }

.q input:focus,
.q textarea:focus {
  outline: none;
  border-color: var(--dourado-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
  background: #fff;
}

.q input::placeholder,
.q textarea::placeholder { color: #b7ae9c; }

/* pergunta de destaque (o pior dia) */
.q--destaque {
  border: 1px solid var(--dourado-300);
  background: #fffdf7;
}
.q--destaque textarea { background: #fff; }

/* ---------- opções (rádio) ---------- */
.opt {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-weight: 400 !important;
  color: var(--texto) !important;
  font-size: .95rem !important;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .85rem .9rem;
  margin-bottom: .6rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opt:last-child { margin-bottom: 0; }
.opt:hover { border-color: var(--dourado-500); background: #fffdf7; }
.opt input[type="radio"] {
  margin-top: .2rem;
  width: 18px;
  height: 18px;
  accent-color: var(--dourado-700);
  flex-shrink: 0;
}
.opt span { line-height: 1.45; }

/* ---------- estado de erro ---------- */
.q.invalid input,
.q.invalid textarea {
  border-color: var(--erro);
  background: #fdf5f4;
}
.q.invalid.q--radio #cardFormato,
#cardFormato.invalid {
  border-color: var(--erro);
}
.q.invalid > label,
.q.invalid > .label-bloco { color: var(--erro); }

.erro-geral {
  color: var(--erro);
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  margin-top: .8rem;
}

/* ---------- botão ---------- */
.btn-enviar {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--preto);
  background: linear-gradient(135deg, #ddb94f 0%, #b8892a 100%);
  border: none;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(201, 162, 39, .28);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn-enviar:hover { transform: translateY(-2px); }
.btn-enviar:disabled { opacity: .6; cursor: default; transform: none; }

a.btn-enviar,
.btn-enviar--link {
  text-decoration: none;
  margin-top: 1.4rem;
}

/* ---------- confirmação ---------- */
.card--ok {
  border-top: 4px solid var(--dourado-500);
  text-align: center;
  padding: 2.4rem 1.6rem;
}
.card--ok h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--preto);
  margin-bottom: .8rem;
}
.card--ok p { color: var(--texto-soft); font-size: .96rem; }

/* ---------- rodapé ---------- */
.rodape {
  text-align: center;
  font-size: .78rem;
  color: var(--texto-soft);
  padding: 1.5rem 1rem 2.5rem;
}

@media (min-width: 700px) {
  .card { padding: 1.7rem 1.6rem; }
  .topo__logo { height: 60px; }
}