/* Harmonize Convites — confirmação de presença (página pública).
   Mesma paleta do convite: papel, dourado e tinta quente. */

:root{
  --papel:#fdfaf5;
  --creme:#f3e9dc;
  --dourado:#b08d57;
  --dourado-fraco:rgba(176,141,87,.35);
  --tinta:#5d4b3c;
  --tinta-fraca:#8a7867;
  --erro:#a33a2e;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.folha-presenca{
  max-width:520px;
  margin:0 auto;
  padding:28px 18px 56px;
}

/* ---------------- cabeçalho ---------------- */
.cabeca{text-align:center;margin-bottom:26px}

/* Monograma do evento: aparece inteiro, sem corte e sem moldura — é arte
   pronta, normalmente PNG com fundo transparente. */
.monograma{
  display:block;
  max-width:min(230px,68%);
  max-height:150px;
  width:auto;height:auto;
  margin:0 auto 20px;
  object-fit:contain;
}

.sobrenome{
  margin:0 0 6px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dourado);
}

.cabeca h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(26px,7vw,36px);
  font-weight:600;line-height:1.2;
}

.recado-anfitriao{
  margin:14px auto 0;max-width:42ch;
  font-family:var(--serif);font-size:18px;color:var(--tinta-fraca);
}

.prazo{
  margin:16px 0 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
.prazo strong{color:var(--dourado)}

/* ---------------- formulário ---------------- */
.form-presenca{
  background:var(--papel);
  border:1px solid var(--dourado-fraco);
  border-radius:18px;
  padding:24px 20px;
  box-shadow:0 16px 40px rgba(93,75,60,.12);
}

.campo{display:block;margin-bottom:18px}
.campo > span{
  display:block;margin-bottom:6px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
.campo > span em{text-transform:none;letter-spacing:0;font-style:italic}

.campo input,
.campo textarea{
  width:100%;
  padding:13px 14px;
  font-family:inherit;font-size:16px;   /* 16px evita o zoom automático do iOS */
  color:var(--tinta);
  background:#fff;
  border:1px solid var(--dourado-fraco);
  border-radius:10px;
  transition:border-color .2s,box-shadow .2s;
}
.campo textarea{resize:vertical;min-height:76px}

.campo input:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--dourado);
  box-shadow:0 0 0 3px rgba(176,141,87,.18);
}
.campo input[aria-invalid="true"]{border-color:var(--erro)}

.erro{
  display:block;margin-top:6px;
  font-size:13px;font-style:normal;color:var(--erro);
}

/* JS esconde o campo do acompanhante; sem !important o display do
   .campo venceria o atributo hidden e a caixa continuaria na tela. */
.campo-acomp[hidden]{display:none !important}

/* ---------------- escolhas ---------------- */
.escolha{
  margin:0 0 18px;padding:0;border:0;
}
.escolha legend{
  padding:0;margin-bottom:8px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-fraca);
}

.opcao{
  display:flex;align-items:center;gap:10px;
  min-height:44px;                       /* alvo de toque confortável */
  cursor:pointer;
}
.opcao input{width:20px;height:20px;accent-color:var(--dourado);flex:none}

.bloco-acompanhante{
  margin:0 0 18px;padding:14px;
  background:var(--creme);
  border-radius:12px;
}
.bloco-acompanhante .campo{margin:12px 0 0}

/* ---------------- botões ---------------- */
.botao-enviar{
  width:100%;
  min-height:52px;padding:15px 24px;
  font-family:var(--serif);
  font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--dourado);
  border:1px solid var(--dourado);border-radius:999px;
  cursor:pointer;
  transition:transform .2s,filter .2s;
}
.botao-enviar:hover{filter:brightness(1.06)}
.botao-enviar:active{transform:scale(.99)}

.botao-vazado{
  display:inline-block;margin-top:18px;
  padding:12px 26px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--dourado);
  border:1px solid var(--dourado-fraco);border-radius:999px;
}
.botao-vazado:hover{background:var(--dourado);color:#fff}

/* ---------------- avisos ---------------- */
.aviso-erro{
  margin-bottom:16px;padding:12px 16px;
  background:#fbeae7;border:1px solid rgba(163,58,46,.3);border-radius:10px;
  color:var(--erro);font-size:14px;
}

.cartao-recado{
  text-align:center;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);
  border-radius:18px;
  padding:34px 22px;
  box-shadow:0 16px 40px rgba(93,75,60,.12);
}
.cartao-recado .selo{
  margin:0 0 12px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dourado);
}
.cartao-recado p{margin:0 0 8px}

.miudo{font-size:13px;color:var(--tinta-fraca)}

/* ---------------------------------------------------------------
   Resposta já registrada: o resumo do que está anotado, para a
   pessoa conferir antes de decidir se mexe.
   --------------------------------------------------------------- */
.resumo-resposta{
  list-style:none;
  margin:18px 0 22px;padding:6px 16px;
  background:rgba(0,0,0,.03);border-radius:12px;
  text-align:left;
}
.resumo-resposta li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(176,141,87,.16);
}
.resumo-resposta li:last-child{border-bottom:0}
.resumo-resposta span{
  flex:none;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
.resumo-resposta strong{font-size:14.5px;font-weight:600;text-align:right}

.cartao-recado .pergunta-alterar{
  margin:0 0 16px;
  font-family:var(--serif);font-size:19px;color:var(--dourado);
}
.cartao-recado .form-alterar{margin:0}

/* O .botao-vazado nasceu para <a>. Em <button> o navegador põe fundo e
   fonte próprios, e o botão saía cinza no meio do cartão. */
button.botao-vazado{
  background:transparent;
  font-family:var(--sans);
  cursor:pointer;
}

.lgpd{
  margin:18px 0 0;
  font-size:12px;line-height:1.5;color:var(--tinta-fraca);text-align:center;
}

/* ---------------------------------------------------------------
   Lista de convidados: identificação pelo celular
   --------------------------------------------------------------- */

/* Saudação depois de o número ser reconhecido. É o sinal de que o
   convite é mesmo daquela pessoa — sem isso o segundo passo parece
   um formulário qualquer. */
.ola-convidado{
  margin:0 0 20px;
  padding:14px 16px;
  background:rgba(176,135,69,.09);
  border-radius:12px;
  font-size:15px;line-height:1.5;text-align:center;
}
.ola-convidado strong{font-weight:600}

/* Telefone já identificado, mostrado sem poder editar: mexer nele aqui
   voltaria a valer a lista, e o servidor recusaria depois de a pessoa
   ter preenchido tudo. */
.campo-fixo{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:18px;padding:10px 14px;
  background:rgba(0,0,0,.03);border-radius:10px;
}
.campo-fixo > span{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-fraca);
}
.campo-fixo strong{font-size:15px;font-weight:600}

.dica-campo{
  display:block;margin-top:6px;
  font-size:12px;line-height:1.45;font-style:normal;color:var(--tinta-fraca);
}

.campo select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--linha);
  border-radius:10px;
  background:#fff;
  font:inherit;font-size:16px;   /* 16px evita o zoom automático do iOS */
  color:inherit;
}
.campo select:focus{
  outline:none;border-color:var(--dourado);
  box-shadow:0 0 0 3px rgba(176,135,69,.18);
}