/* Vivência Presença — paleta tirada da arte da Miriam:
   creme #EBE7DC (fundo), oliva #737957 (texto), terracota #BD6446 (ação). */

:root {
  --creme: #EBE7DC;
  --creme-fundo: #F3F0E8;
  --oliva: #737957;
  --oliva-escuro: #4E523A;
  --terracota: #BD6446;
  --terracota-escuro: #A04F34;
  --papel: #FBFAF6;
  --linha: #D8D3C4;
}

* { box-sizing: border-box; }

/* display:inline-block nos links não pode ganhar do hidden */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme-fundo);
  color: var(--oliva-escuro);
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
}

main {
  max-width: 560px;
  margin: 0 auto;
  background: var(--papel);
  min-height: 100vh;
  overflow: hidden;
}

/* ─────────── capa ─────────── */
.capa {
  background: var(--creme);
  text-align: center;
  padding: 44px 24px 36px;
}
.capa .selo { width: 108px; height: auto; }
.sobrenome {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--oliva);
  margin: 6px 0 -8px;
}
.capa h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(54px, 17vw, 86px);
  line-height: 0.95;
  color: var(--oliva);
  margin: 0;
  letter-spacing: -0.01em;
}
.linha-fina {
  margin: 18px auto 0;
  max-width: 24em;
  color: var(--oliva);
  font-size: 16px;
}

/* ─────────── fotos ─────────── */
.foto-larga img { width: 100%; display: block; }
.duas-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--papel);
}
.duas-fotos figure { margin: 0; }
.duas-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3/4; }

/* ─────────── ficha ─────────── */
.ficha { padding: 30px 24px 6px; }
.ficha dl { margin: 0; display: grid; gap: 2px; }
.ficha dl > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linha);
  align-items: start;
}
.ficha dl > div:last-child { border-bottom: none; }
dt {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--terracota);
}
dd { margin: 0; }
.nota { color: var(--oliva); font-size: 14.5px; }

/* ─────────── texto ─────────── */
.texto { padding: 28px 24px 34px; }
.texto p { margin: 0 0 16px; }
.assinatura {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 21px;
  color: var(--terracota);
  margin-top: 24px !important;
}

/* ─────────── inscrição ─────────── */
.inscricao { padding: 36px 24px 44px; background: var(--creme); }
.vagas {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  color: var(--terracota);
  margin: 0 0 26px;
}
.vagas.poucas { font-weight: 600; }

form { display: grid; gap: 17px; }
label { display: grid; gap: 6px; font-size: 15px; color: var(--oliva); }
.par { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }

input, select {
  font-family: inherit;
  font-size: 16px;            /* 16px evita o zoom automático do iOS */
  font-weight: 300;
  padding: 13px 14px;
  border: 1px solid var(--linha);
  border-radius: 3px;
  background: var(--papel);
  color: var(--oliva-escuro);
  width: 100%;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(189, 100, 70, 0.14);
}
input::placeholder { color: #A9A694; }
.ajuda { font-size: 13.5px; color: var(--oliva); opacity: 0.85; }

.metodo { border: none; padding: 0; margin: 4px 0 0; }
.metodo legend { font-size: 15px; color: var(--oliva); padding: 0 0 9px; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  font-size: 16px;
  color: var(--oliva-escuro);
}
.radio input { width: auto; accent-color: var(--terracota); }

button, .botao-link {
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  padding: 16px 20px;
  border: none;
  border-radius: 3px;
  background: var(--terracota);
  color: #FBFAF6;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  margin-top: 6px;
  transition: background 0.15s;
}
button:hover, .botao-link:hover { background: var(--terracota-escuro); }
button:disabled { background: #BDBBAC; cursor: progress; }

.erro {
  color: #9A3B22;
  background: #F6E7E0;
  border-radius: 3px;
  padding: 11px 13px;
  font-size: 15px;
  margin: 0;
}

/* ─────────── pagamento ─────────── */
.pagamento { padding: 40px 24px 46px; background: var(--creme); text-align: center; }
.pagamento h2, .pronto h2, .esgotado h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--oliva);
  margin: 0 0 12px;
}
#qr {
  width: 232px; height: 232px;
  display: block; margin: 22px auto 18px;
  background: #fff; padding: 10px; border-radius: 4px;
  border: 1px solid var(--linha);
}
#qr svg { width: 100%; height: 100%; display: block; }

.chave-pix { margin: 14px 0 0; font-size: 13.5px; color: var(--oliva); }
.chave-pix code {
  display: block; margin-top: 4px; font-size: 12.5px;
  word-break: break-all; color: var(--oliva-escuro);
}

.aviso-comprovante {
  margin: 20px auto 0; max-width: 30em;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 15px;
  text-align: left;
}
.aviso-comprovante a { display: inline-block; margin-top: 8px; color: var(--terracota); }
#copiar { background: var(--oliva); max-width: 300px; margin: 0 auto; }
#copiar:hover { background: var(--oliva-escuro); }
.esperando {
  margin-top: 22px; font-size: 15px; color: var(--oliva);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.pulso {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terracota);
  animation: pulsar 1.5s ease-in-out infinite;
}
@keyframes pulsar { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ─────────── pronto / esgotado ─────────── */
.pronto, .esgotado { padding: 56px 24px 60px; text-align: center; background: var(--creme); }
.pronto .selo { width: 92px; margin-bottom: 14px; }
.pronto p, .esgotado p { max-width: 28em; margin: 0 auto 13px; }
.esgotado a { color: var(--terracota); }

footer {
  padding: 30px 24px 40px;
  text-align: center;
  font-size: 15px;
  color: var(--oliva);
  background: var(--papel);
}
footer a { color: var(--oliva); text-decoration: none; border-bottom: 1px solid var(--linha); }
footer span { margin: 0 9px; opacity: 0.5; }

@media (min-width: 600px) {
  main { margin: 28px auto; min-height: 0; border-radius: 4px; box-shadow: 0 2px 28px rgba(78, 82, 58, 0.09); }
}