/* ===========================================================================
   O CONVITE — folha única para os oito temas.
   Mobile-first: tudo aqui é escrito para 360px e cresce com media queries.
   Nenhuma regra referencia um tema pelo nome, exceto o ornamento (.orn-nenhum),
   que é a única diferença ESTRUTURAL entre eles.

   O QUE ESTA VERSÃO MUDOU, E POR QUÊ. A anterior era correta e chapada: nomes
   sobre foto, seções em caixas iguais, um filete de 140px como único enfeite.
   Um convite de casamento tem um vocabulário próprio — moldura interna,
   monograma, o "&" como ornamento, medalhões, capitular — e nada disso pesa
   um byte a mais: é HTML e CSS sobre as MESMAS variáveis de tema. O que o
   casal escolhe (paleta, fonte, cor de destaque) continua mandando em tudo.
   =========================================================================== */

/* Valores de segurança. Um tema que esqueça uma variável herda daqui em vez
   de renderizar sem cor — o convite tem que ir ao ar de qualquer jeito. */
:root {
  --fundo: #ffffff;
  --fundo-alt: #f6f4f0;
  --tinta: #22201d;
  --tinta-suave: #6b645c;
  --destaque: #b08d3f;
  --sobre-destaque: #ffffff;
  --borda: #e6e0d6;
  --titulo-peso: 400;
  --titulo-espaco: 0.02em;
  --titulo-caixa: none;
  --raio: 4px;
  --ornamento-cor: var(--destaque);
  --fonte-titulo: Georgia, serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* A arte de capa sem foto. A view injeta a do tema (--capa-arte); este é o
     degradê do Clássico, para o dia em que o tema não trouxer a dele. */
  --capa-arte: linear-gradient(160deg, #efe3cc, #decba4 60%, #cbb183);
  --sombra: 0 18px 50px rgba(0, 0, 0, .12);

  --gap: 1rem;
  --larg: 1080px;
  --larg-estreita: 620px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body.convite {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--destaque); }

/* Ver o comentário equivalente em app.css: sem !important, o `display:block`
   das imagens acima vence o `[hidden]` da folha do navegador. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  letter-spacing: var(--titulo-espaco);
  text-transform: var(--titulo-caixa);
  line-height: 1.15;
  margin: 0;
}

.container { width: 100%; max-width: var(--larg); margin-inline: auto; padding-inline: 1.25rem; }
.container-estreito { max-width: var(--larg-estreita); }

.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.15em; }
.ico-grande { width: 3rem; height: 3rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- faixa de rascunho */
.faixa-rascunho {
  position: sticky; top: 0; z-index: 50;
  background: #2b2724; color: #fff;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; padding: 0.5rem 1rem;
}
.faixa-rascunho strong { color: #ffd76a; }

/* ------------------------------------------------------- a faixa do exemplo
   A página /exemplo mostra o convite REAL de um casal fictício, para quem
   ainda não é cliente. A faixa tem duas obrigações que não podem competir: em
   um segundo, avisar que este casal não existe (senão é propaganda enganosa);
   e, depois de a pessoa rolar o convite inteiro, ter para onde levá-la.

   FICA GRUDADA no topo pelo segundo motivo: a decisão vem depois de olhar, e
   um botão que ficou seis telas acima não é um botão. Mais baixa e menos
   contrastada que a faixa de rascunho de propósito — ela precisa avisar sem
   disputar a primeira tela do convite, que é justamente o que está sendo
   mostrado. */
.faixa-exemplo {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  align-items: center; justify-content: center;
  background: #2b2724; color: #f3ece1;
  font-size: 0.82rem; line-height: 1.35;
  text-align: center; padding: 0.55rem 1rem;
}
.faixa-exemplo strong { color: #ffd76a; letter-spacing: 0.06em; text-transform: uppercase; }
.convite .faixa-exemplo-cta {
  color: #2b2724; background: #ffd76a;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 0.3rem 0.85rem; border-radius: 999px;
}
.convite .faixa-exemplo-cta:hover { background: #ffe391; color: #2b2724; }

/* ------------------------------------------------------------------- capa
   A primeira tela decide se a pessoa continua. Tela inteira, foto com véu
   que escurece para baixo (os nomes ficam no meio, a data embaixo), uma
   vinheta suave nos cantos e a moldura interna de um convite de papel. */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 5rem 1.5rem 5.5rem;
  overflow: hidden;
  background: var(--capa-arte, var(--fundo-alt));
}
.hero-foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* O casal enquadra a foto no preview; o CSS não corta cabeça por conta
     própria — só puxa o foco um pouco acima do centro, onde ficam os rostos. */
  object-position: center 40%;
}
/* Véu + vinheta, PENDURADOS NO .hero (ver histórico: no .hero-conteudo o
   inset:0 media pelo texto e o véu virava um retângulo atrás dos nomes). */
.hero:not(.hero-sem-foto)::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.68) 100%);
}
.hero:not(.hero-sem-foto)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 45%, transparent 55%, rgba(0,0,0,.32) 100%);
}

/* A moldura: uma linha a 14px da borda e uma segunda, mais fraca, 5px para
   dentro — o filete duplo de um convite impresso. Zero bytes de imagem. */
.hero-moldura {
  position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,255,255,.6);
}
.hero-moldura::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(255,255,255,.28);
}
.hero-sem-foto .hero-moldura { border-color: color-mix(in srgb, var(--destaque) 55%, transparent); }
.hero-sem-foto .hero-moldura::after { border-color: color-mix(in srgb, var(--destaque) 25%, transparent); }

.hero-conteudo { position: relative; z-index: 3; max-width: 36rem; }
.hero:not(.hero-sem-foto) .hero-conteudo { color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.hero-sem-foto { color: var(--tinta); min-height: 92svh; }

.hero-monograma {
  display: inline-flex; align-items: baseline; gap: .12em;
  margin-bottom: 1.5rem; padding: .5em .95em;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--fonte-titulo); font-size: 1rem; letter-spacing: .14em;
  opacity: .92;
}
.hero-monograma i { font-style: italic; font-size: .85em; opacity: .75; }

.hero-supra {
  margin: 0 0 1rem; font-size: 0.74rem;
  letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.9;
}
.hero-nomes { font-size: clamp(2.7rem, 13.5vw, 5.6rem); line-height: 1.02; text-wrap: balance; }
.hero-nomes-dois .hero-nome { display: block; }
/* O "&" é ornamento, não letra: itálico, menor, sem caixa alta mesmo nos
   temas que a usam no título. */
.hero-e {
  display: block; margin: .04em 0;
  font-style: italic; font-weight: 400; font-size: .46em; line-height: 1.35;
  letter-spacing: 0; text-transform: none;
  color: var(--destaque);
}
.hero:not(.hero-sem-foto) .hero-e { color: rgba(255,255,255,.88); }

.hero-filete { width: 54px; height: 1px; margin: 1.6rem auto 1.1rem; background: currentColor; opacity: .7; }
.hero-data { margin: 0; letter-spacing: 0.05em; }
.hero-data-txt { display: block; font-family: var(--fonte-titulo); font-size: 1.4rem; letter-spacing: .04em; }
.hero-dia {
  display: block; margin-top: .45rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85;
}

/* O convite para rolar. Some no reduced-motion junto com toda animação. */
.hero-rolar {
  position: absolute; left: 50%; bottom: 1.3rem; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; text-decoration: none; opacity: .85;
  color: var(--destaque);
  animation: hero-rolar 2.2s ease-in-out infinite;
}
.hero:not(.hero-sem-foto) .hero-rolar { color: #fff; }
@keyframes hero-rolar {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (min-width: 720px) {
  .hero-nomes-dois .hero-nome { display: inline; }
  .hero-e { display: inline; margin: 0 .22em; }
  .hero-moldura { inset: 22px; }
}

/* --------------------------------------------------------------- seções */
.secao { padding: 3.75rem 0; }
.secao-alt { background: var(--fundo-alt); }

/* O cabeçalho de seção: olho pequeno em caixa alta, título grande, ornamento
   do tema. Três linhas que dão ritmo à página inteira. */
.secao-cab { text-align: center; margin-bottom: 1.6rem; }
.secao-olho {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--destaque);
}
.titulo-secao { font-size: clamp(1.9rem, 7.5vw, 2.6rem); text-align: center; text-wrap: balance; }
.secao-apoio {
  text-align: center; color: var(--tinta-suave);
  margin: 0.25rem auto 1.75rem; max-width: 44ch; text-wrap: pretty;
}
.texto-longo { color: var(--tinta); font-size: 1.05rem; line-height: 1.8; }
.texto-longo p { margin: 0 0 1em; }

/* A capitular. Alinhada à esquerda de propósito: história se lê, não se
   olha, e texto centralizado de vários parágrafos cansa no celular. */
.texto-capitular { text-align: left; }
.texto-capitular::first-letter {
  float: left; margin: .1em .14em 0 0;
  font-family: var(--fonte-titulo); font-weight: var(--titulo-peso);
  font-size: 3.4em; line-height: .78; color: var(--destaque);
}

/* ---------------------------------------------------------- ornamentos
   O desenho vem do helper ornamento() em SVG inline; aqui só o tamanho e a
   cor. `.orn-nenhum` é o Minimalista, que se define pela ausência. */
.ornamento { display: flex; justify-content: center; margin: .9rem auto 0; color: var(--ornamento-cor); }
.ornamento svg { width: min(200px, 62vw); height: 24px; }
.orn-nenhum .ornamento { display: none; }

/* -------------------------------------------------------- contagem regressiva
   Um cartão que sobe por cima da base da capa: costura a foto ao resto. */
.contagem { padding: 0 1.25rem 3.25rem; position: relative; z-index: 4; }
.contagem-cartao {
  max-width: 540px; margin: -2.6rem auto 0;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: calc(var(--raio) + 10px); padding: 1.35rem 1rem 1.15rem;
  text-align: center; box-shadow: var(--sombra);
}
.contagem-olho { margin: 0 0 .55rem; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--tinta-suave); }
.contagem-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.contagem-num {
  display: block; font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 9vw, 2.9rem); line-height: 1; color: var(--destaque);
  /* tabular-nums: sem isso os segundos "empurram" os vizinhos a cada tique. */
  font-variant-numeric: tabular-nums;
}
.contagem-rot { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); }
.contagem-pe { margin: .85rem 0 0; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.02rem; color: var(--tinta-suave); }
.contagem-hoje { text-align: center; font-size: 1.5rem; font-family: var(--fonte-titulo); margin: 0; padding: 1.5rem 0; }

/* --------------------------------------------------------------- locais */
.locais-grade { display: grid; gap: 2.1rem; padding-top: .8rem; }
@media (min-width: 720px) { .locais-grade { grid-template-columns: 1fr 1fr; } }

.cartao-local {
  position: relative;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: calc(var(--raio) + 8px); padding: 2.3rem 1.4rem 1.5rem;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.secao-alt .cartao-local { background: var(--fundo); }
/* O medalhão que dá rosto ao cartão: cerimônia e festa deixam de ser dois
   retângulos de texto iguais. */
.local-medalhao {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--destaque);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.local-medalhao .ico { width: 1.35rem; height: 1.35rem; }
.local-rotulo { margin: 0 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--destaque); }
.local-nome { font-size: 1.5rem; margin-bottom: 0.6rem; text-wrap: balance; }
.local-hora, .local-endereco {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.45rem;
  margin: 0.4rem 0; color: var(--tinta-suave); font-size: 0.95rem; line-height: 1.5;
}
.local-hora .ico, .local-endereco .ico { margin-top: .2em; }
.local-endereco span { text-align: left; }
.cartao-local .btn-contorno { width: 100%; margin-top: 1.1rem; }

.dress-code {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  margin: 2rem auto 0; text-align: center; color: var(--tinta);
}
.dress-code-rot { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-suave); }
.dress-code strong { font-family: var(--fonte-titulo); font-weight: var(--titulo-peso); font-size: 1.35rem; }

/* -------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  /* 48px de alvo: é o mínimo confortável no polegar, e esta página é
     tocada quase só no celular. */
  min-height: 50px; padding: 0.75rem 1.5rem;
  border-radius: calc(var(--raio) + 6px); border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: opacity .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-destaque {
  background: var(--destaque); color: var(--sobre-destaque); width: 100%;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--destaque) 32%, transparent);
}
.btn-contorno { background: transparent; color: var(--destaque); border-color: var(--destaque); margin-top: 0.9rem; }
.btn-contorno-largo { width: 100%; margin-top: 0; }
.btn-texto { background: transparent; color: var(--tinta-suave); text-decoration: underline; }

/* --------------------------------------------------------------- formulário
   A caixa do RSVP com moldura dupla: é um cartão-resposta, como o que vinha
   dentro do envelope. */
.rsvp-caixa {
  position: relative;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: calc(var(--raio) + 10px); padding: 1.7rem 1.3rem 1.5rem;
  box-shadow: var(--sombra);
}
.rsvp-caixa::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid var(--borda); border-radius: calc(var(--raio) + 5px);
}
.campo { display: block; margin-bottom: 1rem; position: relative; }
.campo-rot { display: block; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--tinta-suave); }
.campo-opc { opacity: .75; }
.campo-in {
  width: 100%; padding: 0.85rem 0.95rem;
  border: 1px solid var(--borda); border-radius: calc(var(--raio) + 5px);
  background: var(--fundo); color: var(--tinta);
  /* 16px exatos: abaixo disso o Safari do iPhone dá zoom ao focar o campo,
     e a página "salta" no meio do preenchimento. */
  font: inherit; font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-in:focus-visible {
  outline: none; border-color: var(--destaque);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 22%, transparent);
}
textarea.campo-in { resize: vertical; }

.campo-linha { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .campo-linha { grid-template-columns: 1fr 1fr; } }

.rsvp-acoes { display: grid; gap: 0.7rem; margin-top: 1.4rem; }
.rsvp-nota, .aviso-previa { font-size: 0.85rem; color: var(--tinta-suave); text-align: center; margin-top: 1rem; }

/* A resposta do servidor. Herda a paleta do TEMA DO CASAL (--destaque,
   --borda) em vez de trazer verde e vermelho próprios: um alerta em cores de
   sistema no meio de um convite de casamento parece erro de site. */
.rsvp-retorno {
  position: relative; z-index: 1;
  border: 1px solid var(--borda); border-radius: calc(var(--raio) + 4px);
  padding: 1rem 1.1rem; margin-bottom: 1.1rem; text-align: center;
}
.rsvp-retorno p { margin: 0; font-size: 1rem; line-height: 1.55; }
.rsvp-ok { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque) 8%, transparent); }
.rsvp-espera, .rsvp-ambiguo, .rsvp-erro { background: rgba(0,0,0,.04); }

/* Quem chegou pelo link da família. */
.rsvp-ola { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.6; text-align: center; position: relative; }
.rsvp-ja { font-size: 0.88rem; color: var(--tinta-suave); }

/* Nomes dos acompanhantes: <details> nativo, abre sem JavaScript. */
.rsvp-acomp {
  border: 1px solid var(--borda); border-radius: calc(var(--raio) + 5px);
  padding: 0.65rem 0.9rem; margin-bottom: 1rem;
}
.rsvp-acomp > summary { cursor: pointer; font-size: 0.9rem; color: var(--tinta-suave); }
.rsvp-acomp-dica { font-size: 0.82rem; color: var(--tinta-suave); margin: 0.6rem 0 0.8rem; line-height: 1.5; }
.rsvp-acomp-linha { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.rsvp-acomp-linha .campo-in { flex: 1 1 auto; }
.rsvp-crianca {
  display: flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.85rem; color: var(--tinta-suave);
}
.rsvp-acomp [hidden] { display: none; }
.aviso-previa {
  position: relative; z-index: 1;
  background: rgba(0,0,0,.04); border: 1px dashed var(--borda);
  border-radius: calc(var(--raio) + 4px); padding: 0.8rem; margin: 0 0 1rem;
}

/* O convite para preencher uma seção vazia — só na prévia (ver publico.php).
   Tracejado e na cor do tema: lê como "aqui cabe algo", não como erro. */
.previa-cabe-secao { padding: 1.4rem 0; }
.previa-cabe {
  display: grid; grid-template-columns: 44px 1fr auto; gap: .9rem; align-items: center;
  padding: 1rem 1.1rem; text-decoration: none; color: var(--tinta);
  border: 1.5px dashed var(--destaque); border-radius: calc(var(--raio) + 8px);
  background: color-mix(in srgb, var(--destaque) 6%, var(--fundo));
}
.previa-cabe-ico {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--fundo); border: 1px solid var(--borda); color: var(--destaque);
}
.previa-cabe-txt strong { display: block; font-family: var(--fonte-titulo); font-weight: var(--titulo-peso); font-size: 1.15rem; line-height: 1.2; }
.previa-cabe-txt em { display: block; font-style: normal; font-size: .85rem; color: var(--tinta-suave); margin-top: .2rem; line-height: 1.45; }
.previa-cabe-mais { font-family: var(--fonte-titulo); font-size: 1.7rem; color: var(--destaque); line-height: 1; }

/* -------------------------------------------------------------- presentes */
.pix-chave-mascara { font-size: 0.85rem; opacity: .85; }

.presentes-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .presentes-grade { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
@media (min-width: 900px) { .presentes-grade { grid-template-columns: repeat(4, 1fr); } }

.presente-btn {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: calc(var(--raio) + 8px);
  padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: inherit; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.presente-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.09); }
.presente-btn-inerte { cursor: default; opacity: .8; }
.presente-btn-inerte:hover { transform: none; }
.presente-btn-inerte .presente-cta { background: var(--tinta-suave); }

/* A vitrine da cota. Sem foto, um degradê na cor do tema e o ícone da
   categoria num medalhão — nunca mais oito laços iguais. */
.presente-img {
  aspect-ratio: 5 / 4; display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--destaque) 16%, var(--fundo-alt)), var(--fundo-alt));
}
.presente-img img { width: 100%; height: 100%; object-fit: cover; }
.presente-ico {
  width: 58px; height: 58px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--fundo); color: var(--destaque);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.presente-ico .ico { width: 1.7rem; height: 1.7rem; }
.presente-corpo { padding: 0.85rem 0.9rem 0.6rem; flex: 1; }
.presente-titulo { display: block; font-size: 0.95rem; line-height: 1.3; }
.presente-valor { display: block; margin-top: 0.35rem; font-family: var(--fonte-titulo); font-size: 1.35rem; color: var(--destaque); }
.presente-vezes { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: var(--tinta-suave); }

/* A barra de progresso das cotas com meta. "Lua de mel — 60%" transforma um
   pedido isolado num esforço coletivo em andamento, e quem chega perto do fim
   tende a fechar. */
.presente-meta { display: block; margin-top: .45rem; }
.presente-barra {
  display: block; height: 6px; border-radius: 999px;
  background: var(--fundo-alt); overflow: hidden;
}
.presente-barra i { display: block; height: 100%; background: var(--destaque); border-radius: 999px; }
.presente-meta-txt { display: block; margin-top: .25rem; font-size: .72rem; color: var(--tinta-suave); }
.presente-meta-txt strong { color: var(--destaque); }
.presente-cta {
  display: flex; align-items: center; gap: 0.3rem; justify-content: center;
  padding: 0.7rem; font-size: 0.85rem; font-weight: 600; letter-spacing: .01em;
  color: var(--sobre-destaque); background: var(--destaque);
}

/* ------------------------------------------------------- presentear (PIX)
   O modal e a página inteira usam AS MESMAS classes `.pres-*`: é a mesma view
   servida de dois jeitos, e um segundo conjunto de estilos seria a chance de
   a tela onde alguém transfere dinheiro divergir de si mesma. */

.pres-fundo {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(0,0,0,.55);
  /* `overflow:auto` no fundo, e não na caixa: no iOS o teclado sobe e empurra
     o campo para fora da tela quando quem rola é o filho. */
  overflow: auto;
}
.pres-fundo[hidden] { display: none; }
body.sem-rolagem { overflow: hidden; }

.pres-caixa {
  position: relative; width: 100%; max-width: 420px;
  background: var(--fundo); color: var(--tinta);
  border-radius: calc(var(--raio) + 8px); padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.pres-fechar {
  position: absolute; top: .4rem; right: .4rem;
  width: 44px; height: 44px;               /* alvo de polegar */
  background: none; border: 0; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--tinta-suave);
}
.pres-carregando { text-align: center; padding: 2rem 0; color: var(--tinta-suave); }

.pres-cab { text-align: center; margin-bottom: 1rem; }
.pres-cota { margin: 0; font-size: .95rem; color: var(--tinta-suave); }
.pres-valor {
  margin: .2rem 0 0; font-family: var(--fonte-titulo);
  font-size: 2rem; line-height: 1.1; color: var(--destaque);
}

.pres-erro {
  margin: 0 0 .9rem; padding: .7rem .8rem; border-radius: var(--raio);
  background: #fdecec; color: #8c1d1d; font-size: .9rem;
}
.pres-ok {
  margin: 0 0 1rem; padding: .7rem .8rem; border-radius: var(--raio);
  background: var(--fundo-alt); font-size: .95rem; text-align: center;
}

.pres-rot { display: block; font-size: .85rem; margin: .9rem 0 .35rem; color: var(--tinta-suave); }
.pres-opc { opacity: .75; }
.pres-in {
  width: 100%; padding: .75rem .85rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--tinta);
  /* 16px exatos: abaixo disso o Safari do iPhone dá zoom ao focar, e a tela
     "salta" bem na hora de colar um código PIX. */
  font: inherit; font-size: 16px;
}
.pres-area { resize: vertical; min-height: 3.2rem; }

.pres-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin-top: 1.1rem;
  padding: .75rem 1.5rem; border: 0; border-radius: var(--raio);
  background: var(--destaque); color: var(--sobre-destaque);
  font: inherit; font-size: 1rem; cursor: pointer;
}
.pres-btn:disabled { opacity: .5; cursor: not-allowed; }

.pres-copia { display: flex; gap: .4rem; }
.pres-copia .pres-in { flex: 1; min-width: 0; font-size: 13px; }
.pres-btn-copiar {
  flex: 0 0 auto; min-height: 48px; padding: 0 1rem;
  border: 1px solid var(--destaque); border-radius: var(--raio);
  background: transparent; color: var(--destaque);
  font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.pres-btn-copiar.copiado { background: var(--destaque); color: var(--sobre-destaque); }

/* ---------------------------------------- os campos a copiar (rail sem código)
   É a tela espanhola: conta, importe e conceito. Cada um é rótulo + "Copiar"
   numa linha e o valor na linha de baixo, com a largura inteira — o IBAN
   agrupado tem 29 caracteres e ao lado de um botão ficava cortado no celular,
   que é onde quase todo convidado abre o convite. */
.pres-campos { margin: 1.2rem 0 0; display: grid; gap: .9rem; }
.pres-campo { display: grid; gap: .25rem; }
.pres-campo-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.pres-copiar-mini {
  flex: 0 0 auto; padding: .15rem .1rem; border: 0; background: none;
  color: var(--destaque); font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pres-copiar-mini.copiado { text-decoration: none; opacity: .7; }
.pres-in-valor {
  /* Tabular: o IBAN é conferido dígito a dígito contra o app do banco, e uma
     fonte proporcional desalinha os grupos de quatro. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pres-rot-solto { display: block; margin: 1.4rem 0 .4rem; }

/* Os passos numerados. Escanear um QR é automático para quem já fez; copiar
   três campos para o app do banco não é automático para ninguém, e a lista
   numerada é o que transforma campos soltos numa tarefa com fim. */
.pres-passos {
  margin: 0; padding-left: 1.3rem;
  display: grid; gap: .45rem;
  font-size: .88rem; color: var(--tinta-suave);
}
.pres-passos li::marker { color: var(--destaque); font-weight: 600; }

.pres-qr { text-align: center; margin-top: 1.1rem; }
.pres-qr img {
  width: 240px; max-width: 100%; height: auto;
  /* Fundo branco fixo, e não var(--fundo): o QR é preto sobre branco e um tema
     de fundo escuro o tornaria ilegível para a câmera do banco. */
  background: #fff; padding: .5rem; border-radius: var(--raio);
}
.pres-qr-dica { margin: .5rem 0 0; font-size: .82rem; color: var(--tinta-suave); }

.pres-nota { margin: 1.1rem 0 0; font-size: .85rem; text-align: center; color: var(--tinta-suave); }
.pres-nota strong { color: var(--tinta); }
.pres-chave {
  display: inline-block; margin-top: .3rem;
  font-size: .78rem; letter-spacing: .04em; opacity: .85;
}

/* A mesma tela, servida como página inteira (sem JavaScript). */
.pres-pagina { background: var(--fundo-alt); }
.pres-pagina-in { max-width: 460px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.pres-pagina .pres-modal {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.5rem 1.25rem;
}
.pres-voltar { display: inline-block; margin-bottom: 1rem; font-size: .9rem; }
.pres-pe { text-align: center; margin-top: 1.5rem; color: var(--tinta-suave); font-family: var(--fonte-titulo); }
.pres-pe p { margin: 0; }

/* ---------------------------------------------------------------- rodapé */
.rodape {
  text-align: center; padding: 3.5rem 1.25rem 6rem;
  border-top: 1px solid var(--borda); background: var(--fundo-alt);
}
@media (min-width: 720px) { .rodape { padding-bottom: 3rem; } }
.rodape-monograma {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 999px; border: 1px solid var(--destaque);
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 1.35rem; letter-spacing: .12em;
  color: var(--destaque);
}
.rodape-nomes { font-family: var(--fonte-titulo); font-size: 1.85rem; margin: 0; }
.rodape-data { color: var(--tinta-suave); margin: 0.3rem 0 .6rem; letter-spacing: .06em; }
.rodape-obrigado { margin: 0 0 2rem; font-family: var(--fonte-titulo); font-style: italic; font-size: 1.05rem; color: var(--tinta-suave); }
.rodape-marca { font-size: 0.8rem; color: var(--tinta-suave); }
/* O convite de aquisição. Menor e mais apagado que o crédito acima: é a
   página do casamento de outra pessoa, e o convidado não veio aqui para nos
   conhecer. Quem estiver noivo lê; quem não estiver, não é incomodado. */
.rodape-cta { margin: .4rem 0 0; font-size: .78rem; }
.rodape-cta a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; }
.ico-coracao { color: var(--destaque); }

/* --------------------------------------------------------- barra fixa (RSVP)
   Só no celular. Nasce [hidden]; o script a mostra quando a capa sai da tela
   e a esconde quando o formulário entra. Pinta com o fundo da página para
   valer também no tema escuro. */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: .6rem;
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.barra-fixa .btn {
  flex: 1; min-height: 46px; margin: 0; padding-inline: .6rem;
  font-size: .92rem; white-space: nowrap;
}
/* "Confirmar presença" é mais longo que "Presentear": sem o flex maior ele
   quebrava em duas linhas dentro do botão. */
.barra-fixa .btn-destaque { flex: 1.4; box-shadow: none; }
@media (min-width: 720px) { .barra-fixa { display: none !important; } }

/* ------------------------------------------------------------ prévia vazia */
.previa-vazia { display: grid; place-items: center; min-height: 100svh; background: var(--fundo-alt); }
.vazio { text-align: center; color: var(--tinta-suave); padding: 2rem; }
.vazio .ico-grande { color: var(--destaque); opacity: .4; margin-inline: auto; }
.vazio-titulo { font-family: var(--fonte-titulo); font-size: 1.3rem; color: var(--tinta); margin: 1rem 0 0.3rem; }

/* ------------------------------------------------------------ preferências */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .faixa-rascunho, .rsvp-caixa, .presente-cta, .btn { display: none !important; }
  .hero { min-height: auto; }
}

/* ===========================================================================
   SAVE THE DATE — a página da arte.

   Mesma folha do convite porque é o mesmo tema do casal: as variáveis
   (--fundo, --tinta, --destaque) chegam prontas do servidor. O que muda é a
   hierarquia — aqui a IMAGEM é o conteúdo, e o texto existe para explicá-la.
   =========================================================================== */

.std-body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--fonte-texto, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.std { max-width: 560px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; text-align: center; }

.std-topo { margin-bottom: 1.75rem; }
.std-kicker {
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 0.75rem;
}
.std-nomes {
  font-family: var(--fonte-titulo, Georgia, serif);
  font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 600; margin: 0 0 0.6rem; line-height: 1.1;
}
.std-data { margin: 0; font-size: 1.05rem; color: var(--tinta-suave); }
.std-contagem { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--tinta-suave); }
.std-contagem strong { font-family: var(--fonte-titulo, Georgia, serif); font-size: 1.6rem; color: var(--destaque); }

/* O quadro da arte. `aspect-ratio` reserva o espaço antes de a imagem chegar —
   sem isso a página pula quando o PNG de 1080×1920 carrega, e o pulo acontece
   exatamente embaixo do dedo que ia tocar em "baixar". */
.std-quadro {
  aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto 1.5rem;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  background: var(--fundo-alt, var(--fundo));
}
.std-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.std-acoes { display: grid; gap: 0.65rem; max-width: 340px; margin: 0 auto; }
.std-dica { font-size: 0.85rem; color: var(--tinta-suave); margin: 1.1rem auto 0; max-width: 34ch; line-height: 1.55; }

.std-site {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--borda);
  font-size: 0.95rem; color: var(--tinta-suave);
}
.std-site p { margin: 0 0 0.5rem; }
.std-link { font-family: var(--fonte-titulo, Georgia, serif); font-size: 1.15rem; color: var(--destaque); word-break: break-all; }

@media print { .std-acoes, .std-dica { display: none !important; } }

/* ===========================================================================
   MURAL DE FOTOS — a página que o convidado abre na festa.

   Herda a paleta do tema do casal (as variáveis chegam prontas do servidor).
   Escrita para o pior cenário possível: de pé, uma mão, rede ruim, tela
   pequena, e alguém que nunca viu este site antes.
   =========================================================================== */

.mu-body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--fonte-texto, system-ui, sans-serif); line-height: 1.6;
}

.mu-topo { text-align: center; padding: 2.5rem 1.25rem 1.5rem; max-width: 640px; margin: 0 auto; }
.mu-kicker {
  font-size: .75rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 .6rem;
}
.mu-nomes { font-family: var(--fonte-titulo, Georgia, serif); font-size: clamp(1.8rem, 8vw, 2.6rem); margin: 0 0 .5rem; }
.mu-sub { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

.mu-retorno {
  max-width: 560px; margin: 0 auto 1.5rem; padding: .9rem 1.1rem;
  border: 1px solid var(--borda); border-radius: var(--raio); text-align: center;
  background: var(--fundo-alt);
}
.mu-retorno-ok { border-color: var(--destaque); }

/* ----------------------------------------------------------------- envio */

.mu-envio {
  max-width: 560px; margin: 0 auto 2.5rem; padding: 1.5rem 1.25rem;
  background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--raio);
  text-align: center;
}
.mu-envio h2 { font-family: var(--fonte-titulo, Georgia, serif); font-size: 1.35rem; margin: 0 0 .5rem; }
.mu-envio-sub { margin: 0 0 1.25rem; font-size: .9rem; color: var(--tinta-suave); }
.mu-envio-fechado p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* O <input type=file> real fica invisível mas FOCÁVEL (nada de display:none,
   que o tira da navegação por teclado); quem aparece é o rótulo. */
.mu-arquivo { display: block; margin-bottom: 1.25rem; cursor: pointer; }
.mu-arquivo input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.mu-arquivo-face {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.75rem 1rem; border: 2px dashed var(--borda); border-radius: var(--raio);
  background: var(--fundo); transition: border-color .15s;
}
.mu-arquivo input:focus-visible + .mu-arquivo-face,
.mu-arquivo:hover .mu-arquivo-face { border-color: var(--destaque); }
.mu-arquivo-face .ico { width: 2rem; height: 2rem; color: var(--destaque); }
.mu-arquivo-face strong { font-size: 1.05rem; }
.mu-arquivo-face em { font-style: normal; font-size: .82rem; color: var(--tinta-suave); }

.mu-campos { text-align: left; }
.mu-form .btn { width: 100%; }
.mu-nota { font-size: .85rem; color: var(--tinta-suave); margin: .8rem 0 0; }

/* ----------------------------------------------------------------- grade */

.mu-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem; padding: 0 .75rem 3rem; max-width: 1100px; margin: 0 auto;
}
@media (min-width: 700px) { .mu-grade { gap: .75rem; padding-inline: 1.25rem; } }

.mu-item { margin: 0; background: var(--fundo-alt); border-radius: var(--raio); overflow: hidden; }
.mu-item img {
  width: 100%; height: 190px; object-fit: cover; display: block;
  background: var(--fundo-alt);
}
.mu-item figcaption { padding: .55rem .7rem .7rem; font-size: .82rem; }
.mu-recado { display: block; color: var(--tinta); line-height: 1.45; }
.mu-autor { display: block; color: var(--tinta-suave); margin-top: .2rem; font-size: .78rem; }

.mu-vazio {
  text-align: center; padding: 3rem 1.5rem; max-width: 460px; margin: 0 auto;
  color: var(--tinta-suave);
}
.mu-vazio .ico { width: 2.5rem; height: 2.5rem; margin: 0 auto .8rem; color: var(--destaque); opacity: .7; }
.mu-vazio p { margin: 0 0 .35rem; }
.mu-vazio strong { color: var(--tinta); }

.mu-rodape {
  text-align: center; padding: 1.5rem 1.25rem 3rem;
  font-size: .85rem; color: var(--tinta-suave);
}
.mu-rodape span { margin: 0 .4rem; opacity: .6; }

/* ---------------------------------------------------- blocos práticos
   Cronograma, hotéis, padrinhos. Só aparecem preenchidos — um título com
   vazio embaixo sugere que o site está incompleto. */
.bloco-pratico { max-width: var(--larg-estreita); margin: 2.4rem auto 0; text-align: center; }
/* O título segue o olho das seções (pequeno, espaçado, na cor de destaque):
   em caixa alta grande ele disputava com os títulos de verdade. */
.bloco-titulo {
  font-size: .72rem; margin-bottom: .7rem;
  letter-spacing: .3em; text-transform: uppercase;
  font-family: var(--fonte-texto); font-weight: 600; color: var(--destaque);
}
.bloco-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bloco-lista li {
  padding: .65rem 1rem; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: calc(var(--raio) + 5px); font-size: .95rem; line-height: 1.5;
}
.secao-alt .bloco-lista li { background: var(--fundo-alt); }