/* =============================================================
   Laura & José Augusto — 10.10.2026
   ============================================================= */

:root{
  --marfim:#FBF9F5;
  --marfim-2:#F4F0E8;
  --papel:#FFFFFF;
  --tinta:#2A2724;
  --tinta-2:#6E675C;
  --tinta-3:#9A9184;
  --ouro:#B08D57;
  --ouro-esc:#8E6F3E;
  --ouro-cl:#DCC9A4;
  --linha:#E6DFD2;
  --sombra:0 1px 2px rgba(42,39,36,.04), 0 8px 30px rgba(42,39,36,.06);
  --serif:"Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --sans:"Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio:3px;
  --largura:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--marfim);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.01em;margin:0}
.rotulo{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ouro-esc);font-weight:400;margin:0 0 18px;
}
.titulo{font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.12;margin:0 0 20px}
.titulo em{font-style:italic;color:var(--ouro-esc)}
.texto{color:var(--tinta-2);max-width:56ch;margin-inline:auto}

/* ---------- ornamento ---------- */
.ornamento{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 26px;max-width:260px}
.ornamento::before,.ornamento::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--ouro-cl));
}
.ornamento::after{background:linear-gradient(270deg,transparent,var(--ouro-cl))}
.ornamento svg{width:16px;height:16px;fill:var(--ouro);opacity:.85;flex:none}

/* ---------- botões ---------- */
.btn{
  --bg:var(--tinta); --fg:var(--marfim); --bd:var(--tinta);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:15px 30px;border-radius:var(--raio);cursor:pointer;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  text-decoration:none;transition:.25s ease;line-height:1;
}
.btn:hover{--bg:var(--ouro-esc);--bd:var(--ouro-esc);transform:translateY(-1px)}
.btn--ouro{--bg:var(--ouro-esc);--bd:var(--ouro-esc)}
.btn--ouro:hover{--bg:var(--tinta);--bd:var(--tinta)}
.btn--linha{--bg:transparent;--fg:var(--ouro-esc);--bd:var(--ouro-cl)}
.btn--linha:hover{--bg:transparent;--fg:var(--tinta);--bd:var(--tinta)}
.btn--bloco{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none}

/* =============================================================
   topo fixo
   ============================================================= */
.topo{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(251,249,245,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);transition:transform .4s ease,border-color .4s;
}
.topo.visivel{transform:none;border-bottom-color:var(--linha)}
.topo__marca{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.topo__marca img{width:30px;height:auto}
.topo__marca span{font-family:var(--serif);font-size:19px;letter-spacing:.06em;white-space:nowrap}
.topo nav{display:none;gap:26px}
.topo nav a{
  text-decoration:none;color:var(--tinta-2);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;transition:color .2s;
}
.topo nav a:hover{color:var(--ouro-esc)}
.topo .btn{padding:11px 20px;font-size:10px}
@media(min-width:960px){ .topo nav{display:flex} }

/* =============================================================
   hero
   ============================================================= */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  /* a folga de baixo reserva a faixa do "role": sem ela o indicador
     subia por cima dos botões em tela baixa */
  padding:96px clamp(14px,4vw,40px) 132px;text-align:center;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  /* papel-relevo.jpg é o papel do convite passado por upscale pelo José:
     o assets/papel.jpg original tem desvio de luminância 3.3 e some na tela,
     virando um branco chapado. Nesta versão o floral em relevo aparece. */
  background:url("../assets/papel-relevo.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(125% 85% at 50% 38%,rgba(251,249,245,.30),rgba(251,249,245,.62) 68%,rgba(251,249,245,.84) 100%);
}
.hero__conteudo{position:relative;z-index:2;width:100%;max-width:860px}
.monograma{
  width:clamp(78px,15vw,116px);margin:0 auto 26px;
  filter:drop-shadow(0 6px 18px rgba(176,141,87,.18));
}
.nomes{
  font-size:clamp(2.9rem,11vw,5.4rem);line-height:1.02;letter-spacing:.005em;
  margin:0 0 22px;
}
.nomes .e{display:block;font-style:italic;font-size:.42em;color:var(--ouro-esc);margin:6px 0}
.hero__data{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px clamp(8px,2.5vw,14px);
  /* o entreletras largo estourava a linha no celular: agora ele acompanha
     a largura da tela, e os itens podem encolher e quebrar */
  font-size:clamp(10.5px,2.9vw,12px);letter-spacing:clamp(.1em,.5vw,.24em);
  text-transform:uppercase;color:var(--tinta-2);
  margin-bottom:34px;max-width:100%;
}
.hero__data span{min-width:0}
.hero__data .ponto{width:4px;height:4px;border-radius:50%;background:var(--ouro-cl)}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.rolar{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  pointer-events:none;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-3);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.rolar::after{content:"";width:1px;height:34px;background:linear-gradient(var(--ouro-cl),transparent);animation:desce 2.4s ease-in-out infinite}
@keyframes desce{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-height:640px){.rolar{display:none}.hero{padding-bottom:72px}}

/* contagem regressiva */
.contagem{display:flex;justify-content:center;gap:clamp(10px,3.4vw,30px)}
.contagem div{min-width:60px}
.contagem b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,6vw,2.9rem);line-height:1;font-variant-numeric:tabular-nums;
}
.contagem span{
  display:block;margin-top:6px;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-3);
}

/* =============================================================
   seções
   ============================================================= */
.secao{padding:clamp(64px,10vh,116px) clamp(20px,5vw,40px)}
.secao__interno{max-width:var(--largura);margin:0 auto}
.centro{text-align:center}
.secao--papel{background:var(--papel);border-block:1px solid var(--linha)}

/* convite */
.convite{position:relative}
.convite .versiculo{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,3.4vw,1.85rem);line-height:1.5;
  color:var(--tinta);max-width:30ch;margin:0 auto;
}
.convite .ref{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ouro-esc);margin-top:18px;
}
.pais{
  display:grid;gap:26px;margin-top:52px;
  grid-template-columns:1fr;
}
.pais div{font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.7;color:var(--tinta)}
.pais div p{margin:0}
@media(min-width:720px){
  .pais{grid-template-columns:1fr 1px 1fr;align-items:center;gap:34px}
  .pais .divisor{background:var(--linha);height:64px;width:1px;justify-self:center}
}
.convite .frase{margin-top:42px;font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.35rem);color:var(--tinta-2);font-style:italic}

/* locais */
.locais__grid{display:grid;gap:22px;grid-template-columns:1fr;margin-top:12px}
@media(min-width:820px){.locais__grid{grid-template-columns:1fr 1fr;gap:28px}}
.local{
  --pad:clamp(26px,4vw,40px);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--pad);text-align:center;box-shadow:var(--sombra);
  display:flex;flex-direction:column;
}
.local__hora{font-family:var(--serif);font-size:clamp(1.9rem,4.5vw,2.4rem);line-height:1;margin:2px 0 6px;color:var(--ouro-esc)}
.local h3{font-size:clamp(1.35rem,3vw,1.7rem);margin:0 0 12px}
.local__end{color:var(--tinta-2);margin:0 0 24px;font-size:15px}
.local .btn{margin-top:auto;align-self:center}
.local .selo{
  width:44px;height:44px;margin:0 auto 18px;border:1px solid var(--ouro-cl);border-radius:50%;
  display:grid;place-items:center;
}
.local .selo svg{width:18px;height:18px;fill:var(--ouro)}


/* dress code */
.dress{background:var(--marfim-2);text-align:center}
.dress__valor{font-family:var(--serif);font-size:clamp(2rem,6vw,3rem);margin:6px 0 14px}

/* galeria */
.galeria__grid{
  display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:38px;
}
@media(min-width:760px){.galeria__grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.foto{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--raio);
  background:var(--marfim-2);border:1px solid var(--linha);cursor:zoom-in;margin:0;
}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.foto:hover img{transform:scale(1.045)}
.foto figcaption{
  position:absolute;inset:auto 0 0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(42,39,36,.55));
  color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;
}
.foto:hover figcaption{opacity:1}
.foto--vazia{cursor:default;display:grid;place-items:center;text-align:center}
.foto--vazia img{display:none}
.foto--vazia::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/monogram.png") center/44% no-repeat;opacity:.10;
}
.foto--vazia figcaption{position:static;opacity:1;background:none;color:var(--tinta-3);
  font-size:10px;letter-spacing:.14em;text-transform:none;padding:0 10px}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(28,26,24,.94);
  display:none;place-items:center;padding:24px;
}
.lightbox.aberto{display:grid}
.lightbox img{max-width:min(92vw,880px);max-height:88vh;object-fit:contain;border-radius:2px}
.lightbox button{
  position:absolute;top:18px;right:18px;background:none;border:0;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;opacity:.8;
}

/* =============================================================
   formulários
   ============================================================= */
.campo{margin-bottom:18px;text-align:left;position:relative}
.campo label{
  display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:8px;
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px 16px;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:15px;
  font-weight:300;transition:border-color .2s,box-shadow .2s;
}
.campo textarea{min-height:104px;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(176,141,87,.13);
}
.dupla{display:grid;gap:0 18px;grid-template-columns:1fr}
@media(min-width:640px){.dupla{grid-template-columns:1fr 1fr}}
.mel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.opcoes{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.opcoes label{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  border:1px solid var(--linha);border-radius:var(--raio);padding:14px 10px;cursor:pointer;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
  background:var(--papel);transition:.2s;margin:0;position:relative;
}
.opcoes input{position:absolute;opacity:0;pointer-events:none}
.opcoes label:hover{border-color:var(--ouro-cl)}
.opcoes label:has(input:checked){border-color:var(--ouro);background:#fff;box-shadow:0 0 0 3px rgba(176,141,87,.1);color:var(--tinta)}

.cartao-form{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(24px,4.5vw,44px);box-shadow:var(--sombra);
  max-width:620px;margin:38px auto 0;
}
.confirmar__acoes{
  max-width:420px;margin:38px auto 0;
  display:flex;flex-direction:column;gap:12px;
}
.confirmar__acoes .obs{
  font-size:13px;color:var(--tinta-3);text-align:center;margin:4px 0 0;line-height:1.6;
}
.aviso{
  margin-top:16px;font-size:13px;color:var(--tinta-2);text-align:center;min-height:20px;
}
.aviso--ok{color:var(--ouro-esc)}
.aviso--erro{color:#a3392f}
.link-discreto{
  background:none;border:0;cursor:pointer;padding:6px 4px;
  color:var(--tinta-3);font-size:12.5px;letter-spacing:.04em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linha);
  transition:color .25s ease;
}
.link-discreto:hover{color:var(--tinta-2)}

/* =============================================================
   presentes
   ============================================================= */
.presentes{position:relative;overflow:hidden;background:var(--marfim-2)}
.presentes::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/floral-topo.jpg") center top/cover no-repeat;
  opacity:.55;
}
.presentes > *{position:relative;z-index:1}
.presentes__caixa{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);max-width:720px;margin:0 auto;
  padding:clamp(30px,5vw,56px);text-align:center;
}

/* mural */
.mural{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:700px){.mural{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.mural{grid-template-columns:repeat(3,1fr)}}
.recado{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 24px 20px;text-align:left;
}
.recado p{margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--tinta)}
.recado cite{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-esc)}

/* =============================================================
   modal recado -> pix
   ============================================================= */
.modal{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(28,26,24,.55);backdrop-filter:blur(3px);
  padding:16px;overflow-y:auto;
}
.modal.aberto{display:grid;place-items:center}
.modal__caixa{
  position:relative;width:100%;max-width:520px;overflow:hidden;background:var(--marfim);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(26px,5vw,44px);box-shadow:0 30px 80px rgba(28,26,24,.28);
  margin:auto;
}
.modal__fechar{
  position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--tinta-3);
}
.modal__fechar:hover{color:var(--tinta)}
.passos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px}
.passos span{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  display:flex;align-items:center;gap:8px;
}
.passos span::before{
  content:attr(data-n);width:22px;height:22px;border-radius:50%;border:1px solid var(--linha);
  display:grid;place-items:center;font-size:10px;letter-spacing:0;
}
.passos span.ativo{color:var(--tinta)}
.passos span.ativo::before{background:var(--ouro-esc);border-color:var(--ouro-esc);color:#fff}
.passos i{width:22px;height:1px;background:var(--linha);display:block}
.passo{display:none}
.passo.ativo{display:block;animation:entra .4s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.valores{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0 10px}
@media(min-width:460px){.valores{grid-template-columns:repeat(5,1fr)}}
.valores button{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 8px;cursor:pointer;font-family:var(--serif);font-size:1.15rem;
  color:var(--tinta);transition:.2s;
}
.valores button:hover{border-color:var(--ouro-cl)}
.valores button[data-outro]{font-family:var(--sans);font-size:.92rem;letter-spacing:.06em;color:var(--tinta-2)}
.valores button.sel{border-color:var(--ouro);background:#fff;box-shadow:0 0 0 3px rgba(176,141,87,.12)}
.valor-livre{display:flex;gap:8px;align-items:center;margin-bottom:22px}
.valor-livre[hidden]{display:none}
.valor-livre input{flex:1;padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--papel);font-family:var(--sans);font-size:15px;font-weight:300}

.qr{display:grid;place-items:center;gap:14px;margin:6px 0 18px}
.qr canvas{border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.copia{
  display:flex;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px;
}
.copia code{
  flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#btnCopiar{margin-top:10px}

/* =============================================================
   rodapé + barra mobile
   ============================================================= */
.rodape{
  text-align:center;padding:70px 24px calc(88px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--marfim-2);
}
.rodape img{width:64px;margin:0 auto 20px;opacity:.9}
.rodape h3{font-size:1.7rem;margin-bottom:8px}
.rodape p{color:var(--tinta-2);font-size:13px;margin:4px 0}
.rodape a{color:var(--ouro-esc);text-decoration:none}
@media(min-width:900px){.rodape{padding-bottom:70px}}

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,249,245,.94);backdrop-filter:blur(10px);border-top:1px solid var(--linha);
  transform:translateY(120%);transition:transform .4s ease;
}
.barra.visivel{transform:none}
.barra .btn{padding:14px 10px;font-size:10px;letter-spacing:.14em}
@media(min-width:900px){.barra{display:none}}

/* ---------- animação de entrada ---------- */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.revelar.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .revelar{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- cena: foto que se dissolve no fundo ---------- */
/* Inspirado no convite de referência: a foto some no marfim em cima e embaixo,
   e o texto fica sobre a parte clara. Sem borda dura entre foto e fundo. */
.cena{
  position:relative;
  overflow:hidden;
  background:var(--marfim);
  min-height:min(108vh,880px);
  display:flex;
  flex-direction:column;
  padding:clamp(56px,9vh,104px) clamp(20px,5vw,40px) clamp(40px,7vh,80px);
  text-align:center;
}
.cena__foto{
  position:absolute;
  inset:-1px;
  background-size:cover;
  background-position:center 22%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,rgba(0,0,0,.22) 26%,rgba(0,0,0,.7) 46%,#000 60%,#000 74%,rgba(0,0,0,.5) 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 8%,rgba(0,0,0,.22) 26%,rgba(0,0,0,.7) 46%,#000 60%,#000 74%,rgba(0,0,0,.5) 88%,transparent 100%);
}
/* garante que o texto do topo continue legível sobre a foto */
.cena__veu{
  position:absolute;
  inset:0;
  background:
    /* clareia o topo, onde fica o texto */
    linear-gradient(to bottom,var(--marfim) 0,rgba(251,249,245,.92) 22%,rgba(251,249,245,.55) 42%,rgba(251,249,245,0) 62%),
    /* e fecha a base de volta no marfim, sem corte */
    linear-gradient(to top,var(--marfim) 0,rgba(251,249,245,.6) 9%,rgba(251,249,245,0) 24%);
}
.cena__interno{position:relative;max-width:680px;margin:0 auto;width:100%}
.cena .titulo,.cena .versiculo,.cena .frase,.cena .pais,.cena .rotulo{
  text-shadow:0 1px 14px rgba(251,249,245,.85),0 1px 3px rgba(251,249,245,.7);
}
/* o convite tem texto longo: precisa de mais zona clara antes da foto abrir */
#convite.cena{min-height:min(126vh,1020px)}

/* parallax só onde é seguro: telas grandes, ponteiro preciso, sem reduced-motion */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  @media (hover:hover) and (pointer:fine){
    .cena__foto{background-attachment:fixed}
  }
}
/* sem foto ainda: o fundo texturizado entra no lugar, nada quebra */
.cena__foto[data-vazia]{
  background-image:url("../assets/papel.jpg");
  opacity:.5;
}