/* Confirmação de presença — mesmo visual do convite (papel, verde e caligrafia) */
:root {
  --papel: #f8f6f1;
  --papel-escuro: #efebe2;
  --verde: #0e544b;
  --verde-escuro: #093d37;
  --texto: #3b3a36;
  --suave: #6f7562;
  --ouro: #c2a067;
  --linha: #d9d3c5;
  --erro: #a3392b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- capa ---------- */
.capa { position: relative; height: min(78vh, 720px); overflow: hidden; }
.capa img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 75%, transparent 100%);
}
.capa-texto { position: absolute; top: 0; left: 0; right: 0; padding: 48px 16px 0; text-align: center; }
.caps {
  font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 13px;
  letter-spacing: 7px; text-transform: uppercase; color: #4a4943;
}
.capa h1 {
  margin: 10px 0 0; font-family: "Pinyon Script", cursive; font-weight: 400;
  font-size: clamp(54px, 13vw, 92px); line-height: 1.1; color: var(--verde);
}
.capa h1 span { font-size: .7em; margin: 0 .12em; }

/* ---------- cartão ---------- */
.cartao { width: min(560px, calc(100% - 32px)); margin: -40px auto 0; position: relative; padding-bottom: 56px; }

.data { text-align: center; }
.dia { display: block; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 110px; line-height: .9; color: var(--verde); }
.mes { display: block; font-family: "Mrs Saint Delafield", cursive; font-size: 64px; line-height: 1; color: var(--verde); margin-top: -6px; }
.hora { display: block; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; font-size: 17px; margin-top: 8px; }
.local { margin: 22px 0 6px; font-style: italic; }
.local strong { font-style: normal; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 16px; }
.link-mapa {
  font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--verde); text-underline-offset: 5px;
}

/* ---------- formulário ---------- */
#formulario, #obrigado {
  margin-top: 44px; padding: 36px 28px 32px; background: #fffdf9;
  border: 1px solid var(--linha); border-radius: 22px;
  box-shadow: 0 18px 40px rgba(9, 61, 55, .08);
}
@media (max-width: 420px) { #formulario, #obrigado { padding: 28px 18px 24px; } }

h2 {
  margin: 0; text-align: center; font-family: "Mrs Saint Delafield", cursive; font-weight: 400;
  font-size: 66px; line-height: 1; color: var(--verde);
}
h2 span {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 13px;
  letter-spacing: 6px; text-transform: uppercase; color: #4a4943; margin-bottom: 12px;
}
.intro { text-align: center; color: var(--suave); font-style: italic; margin: 10px 0 26px; }

.campo { display: block; margin-bottom: 20px; }
.campo > span, .escolha legend {
  display: block; font-weight: 600; font-size: 18px; margin-bottom: 7px; color: var(--texto);
}
.campo em { font-weight: 400; color: var(--suave); }

input[type="text"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--texto);
  background: var(--papel); border: 1px solid var(--linha); border-radius: 12px;
  padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(14, 84, 75, .14); }

.escolha { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.escolha label {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; background: var(--papel);
  transition: border-color .2s, background .2s;
}
.escolha label:has(input:checked) { border-color: var(--verde); background: #e8f0ec; }
.escolha input { accent-color: var(--verde); width: 18px; height: 18px; margin: 0; }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.erro { min-height: 1.2em; margin: 0 0 12px; color: var(--erro); font-weight: 500; text-align: center; }

.botao {
  width: 100%; border: 0; border-radius: 14px; padding: 16px; cursor: pointer;
  font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
  color: #fff; background: linear-gradient(160deg, #146a5f 0%, var(--verde) 45%, var(--verde-escuro) 100%);
  box-shadow: 0 10px 20px rgba(9, 61, 55, .25);
}
.botao:disabled { opacity: .6; cursor: wait; }
.botao-linha {
  display: block; margin: 22px auto 0; background: none; border: 0; cursor: pointer;
  font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--verde); text-decoration: underline; text-underline-offset: 5px;
}
#obrigado p { text-align: center; font-size: 20px; margin: 16px 0 0; }

.atalhos { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.atalhos a {
  font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--suave); text-decoration: none;
}
.atalhos a:hover { color: var(--verde); }

/* ---------- computador: foto como fundo da página, enquadrada nos rostos ---------- */
@media (min-width: 820px) {
  body {
    background: var(--papel) url("/convite/fotos/1-maos-dadas.jpg") 50% 30% / cover fixed no-repeat;
  }
  /* clareia o topo para os nomes e escurece de leve o resto */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(248,246,241,.92) 0, rgba(248,246,241,.55) 22%, rgba(248,246,241,0) 40%, rgba(9,61,55,.12) 100%);
  }
  body { position: relative; z-index: 0; }
  .capa { height: 100vh; min-height: 640px; }
  .capa img { display: none; }
  .capa-texto { padding-top: 7vh; }
  .capa h1 { text-shadow: 0 2px 18px rgba(248,246,241,.9); }
  .cartao {
    margin: 0 auto 80px; padding: 48px 48px 40px;
    background: rgba(248, 246, 241, .95); border-radius: 28px;
    box-shadow: 0 30px 80px rgba(9, 61, 55, .25);
    backdrop-filter: blur(6px);
  }
}