:root{
  --sage:#6D7B48; --sage-esc:#5C6A3C; --dourado:#B08D57;
  --marfim:#F3EFE8; --tinta:#2E3327; --papel:#FAF8F4;
  --linha:rgba(109,123,72,.22); --linha-fina:rgba(109,123,72,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t1:220ms; --t2:340ms; --t3:460ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--marfim); color:var(--tinta);
  font-family:'Lora',Georgia,serif; font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
.rotulo{font-family:'Spectral',Georgia,serif; font-weight:400; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sage)}

/* ---------- capa ---------- */
.capa{text-align:center; padding:0 0 54px}
/* Abertura só tipográfica, por decisão do casal: as duas fotos recortadas que
   ficavam atrás do título saíram. Com elas foram a altura mínima, o recorte, as
   camadas e o véu radial, que só existiam para acomodá-las e esfumaçá-las. */
.capa-topo{padding:60px 24px 30px}
@media (max-width:700px){
  .capa-topo{padding:44px 20px 24px}
  }
.capa .regua, .capa .abertura{margin-left:auto; margin-right:auto}
.capa .abertura{padding:0 24px}
.mono-caixa{height:176px; display:flex; align-items:center; justify-content:center}
.mono{height:176px; width:auto; overflow:visible}
.mono .tinta{fill:var(--sage)}
.mono .tr{fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round}
/* Cinzel é mais larga que a Italiana: no celular, min() reduz levemente
   o título para manter a mesma quantidade de linhas. Nunca passa do
   tamanho original, então no computador nada muda. */
.capa h1{font-family:'Cinzel',Georgia,serif; font-weight:500; color:var(--sage);
  font-size:min(clamp(28px,5.2vw,47px),calc((100vw - 48px) * .078)); letter-spacing:.12em; text-transform:uppercase;
  line-height:1.15; margin:26px 0 0}
.capa .apoio{margin:14px 0 0}
.regua{width:54px; height:1px; background:var(--dourado); margin:26px auto; opacity:.75}
.abertura{max-width:46ch; margin:0 auto; font-size:16.5px; color:rgba(46,51,39,.84);
  text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.abertura p{margin:0 0 14px}
.abertura p:last-child{margin:0}

/* ---------- mural ---------- */
.mural{text-align:center; padding:44px 24px 46px;
  border-top:1px solid var(--linha-fina); border-bottom:1px solid var(--linha-fina)}
.mural .nomes{margin:16px auto 0; max-width:54ch; font-size:16px; line-height:2.1}
.mural .nomes span{display:inline-block; white-space:nowrap;
  opacity:0; transform:translateY(14px);
  transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease)}
.mural .nomes span.dentro{opacity:1; transform:none}
.mural .nomes i{color:var(--dourado); font-style:normal; margin:0 9px; opacity:.65}

/* ---------- seções ---------- */
main{max-width:1060px; margin:0 auto; padding:0 22px 40px}
.secao{padding:56px 0 10px}
.ou-bloco{display:flex; align-items:center; gap:20px; margin:64px 0 0}
.ou-linha{flex:1; height:1px; background:var(--linha)}
.ou-palavra{font-family:'Cinzel',Georgia,serif; font-weight:500; font-size:31px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dourado)}
.nota-ou{text-align:center !important; margin-top:16px; font-family:'Spectral',Georgia,serif;
  font-size:13.5px; letter-spacing:.04em; color:rgba(46,51,39,.62)}
.secao-pix{padding-top:34px}
.secao h2{font-family:'Cinzel',Georgia,serif; font-weight:500; color:var(--sage);
  font-size:clamp(28px,4.4vw,36px); letter-spacing:.03em; margin:8px 0 0; text-align:center}
.nota{max-width:60ch; margin:16px auto 0; text-align:justify; hyphens:auto;
  -webkit-hyphens:auto; font-size:14.5px; color:rgba(46,51,39,.72)}
.nota + .nota{margin-top:10px}

/* ---------- grade ---------- */
.grade{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:38px}
@media (min-width:640px){.grade{grid-template-columns:repeat(3,1fr); gap:20px}}
@media (min-width:920px){.grade{grid-template-columns:repeat(4,1fr); gap:22px}}

.card{position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--papel); border:1px solid var(--linha-fina); border-radius:3px;
  padding:0; overflow:hidden; cursor:pointer; font:inherit; color:inherit;
  opacity:0; transform:translateY(14px);
  transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease),
             box-shadow var(--t2) var(--ease), filter var(--t2) var(--ease)}
.card.dentro{opacity:1; transform:none}
.card:hover, .card.tocado{box-shadow:0 10px 26px -14px rgba(46,51,39,.4)}
.card:focus-visible{outline:2px solid var(--dourado); outline-offset:2px}
.moldura{position:relative; overflow:hidden; aspect-ratio:1/1; background:#fff}
.moldura img{width:100%; height:100%; object-fit:contain; display:block;
  transition:transform var(--t3) var(--ease)}
.card:hover .moldura img, .card.tocado .moldura img{transform:scale(1.04)}
.corpo{padding:14px 14px 15px; display:flex; flex-direction:column; flex:1}
.card h3{margin:0; font-family:'Lora',Georgia,serif; font-weight:500;
  font-size:14.5px; line-height:1.42}
/* Valores monetários em Lora 500.
   Italiana é fonte de display: traço fino, um só peso. Nos algarismos, em
   tela de celular, as hastes esgarçam e o número perde nitidez. Lora tem
   traço encorpado e algarismos desenhados para leitura corrida.
   Lora é mais larga que Italiana no mesmo corpo, por isso o tamanho cai
   de 23px para 19px — a mancha visual no card fica equivalente.
   tabular-nums trava a largura dos dígitos: os valores alinham entre si
   na grade, em vez de dançar conforme o número. */
.cota{margin:7px 0 0; font-family:'Lora',Georgia,serif; font-weight:500;
  font-size:19px; letter-spacing:.01em; font-variant-numeric:tabular-nums;
  color:var(--sage)}
.acao{margin-top:auto; padding-top:12px; font-family:'Spectral',Georgia,serif;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--sage);
  border-top:1px solid var(--linha-fina); margin-top:12px}
.card[disabled]{cursor:default; filter:grayscale(.72); opacity:.52}
.card[disabled]:hover{box-shadow:none}
.card[disabled] .moldura img{transform:none}
.faixa{position:absolute; inset:auto 0 0 0; background:rgba(109,123,72,.94);
  color:var(--marfim); font-family:'Spectral',Georgia,serif; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; text-align:center; padding:8px 6px;
  opacity:0; transform:translateY(100%);
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease)}
.card[disabled] .faixa{opacity:1; transform:none}

/* ---------- painel ---------- */
.veu{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(46,51,39,.52); opacity:0; pointer-events:none;
  transition:opacity var(--t2) var(--ease)}
.veu.aberto{opacity:1; pointer-events:auto}
.painel{width:min(430px,100%); max-height:90vh; overflow:auto; background:var(--marfim);
  border-radius:4px; padding:30px 26px 24px; text-align:center;
  transform:scale(.96); opacity:0;
  transition:transform var(--t2) var(--ease), opacity var(--t2) var(--ease)}
.veu.aberto .painel{transform:none; opacity:1}
.painel h3{font-family:'Cinzel',Georgia,serif; font-weight:500; color:var(--sage);
  font-size:26px; letter-spacing:.02em; margin:10px 0 0; line-height:1.2}
.painel .ref{margin:8px 0 0; font-family:'Spectral',Georgia,serif; font-size:12px;
  letter-spacing:.09em; color:rgba(46,51,39,.66)}
.painel .grande{margin:2px 0 0; font-family:'Lora',Georgia,serif; font-weight:500;
  font-size:27px; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.painel .texto{margin:16px 0 0; font-size:14.5px; color:rgba(46,51,39,.8); text-align:left}
.volt{margin:10px 0 0; padding:9px 12px; background:rgba(176,141,87,.1);
  border-left:2px solid var(--dourado); font-family:'Spectral',Georgia,serif;
  font-size:12.5px; text-align:left}
.qr{margin:20px auto 0; width:190px; height:190px; opacity:0; transform:scale(.94);
  transition:opacity var(--t2) var(--ease) 180ms, transform var(--t2) var(--ease) 180ms}
.veu.aberto .qr{opacity:1; transform:none}
.qr img{width:100%; height:100%; display:block; border-radius:2px}
.caminhos{display:grid; gap:9px; margin-top:18px}
@media (min-width:400px){.caminhos{grid-template-columns:1fr 1fr}}
.bt{font-family:'Spectral',Georgia,serif; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; padding:12px 10px; border-radius:2px; cursor:pointer;
  border:1px solid var(--sage); background:transparent; color:var(--sage);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--t1) var(--ease), color var(--t1) var(--ease)}
.bt:hover{background:var(--sage); color:var(--marfim)}
.bt.cheio{background:var(--sage); color:var(--marfim); border-color:var(--sage)}
.bt.cheio:hover{background:var(--sage-esc)}
.bt:focus-visible{outline:2px solid var(--dourado); outline-offset:2px}
.bt[aria-pressed="true"]{background:var(--sage); color:var(--marfim)}
.dados{margin-top:18px; padding-top:16px; border-top:1px solid var(--linha-fina); text-align:left}
.dados dt{font-family:'Spectral',Georgia,serif; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage); margin-top:12px}
.dados dt:first-child{margin-top:0}
.dados dd{margin:4px 0 0; font-size:14.5px; word-break:break-word}
.campo{margin-top:18px; text-align:left}
.campo label{display:block; font-family:'Spectral',Georgia,serif; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sage)}
.campo input{width:100%; margin-top:6px; padding:11px 12px; font:inherit; font-size:15px;
  color:var(--tinta); background:var(--papel); border:1px solid var(--linha); border-radius:2px}
.campo input:focus{outline:none; border-color:var(--sage)}
.campo .dica{display:block; margin-top:5px; font-size:12.5px; color:rgba(46,51,39,.55);
  font-family:'Spectral',Georgia,serif; letter-spacing:.02em}
.erro{margin-top:10px; font-family:'Spectral',Georgia,serif; font-size:12.5px; color:#8C4A3C}
.fechar{margin-top:14px; background:transparent; border:0; cursor:pointer;
  font-family:'Spectral',Georgia,serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(46,51,39,.5)}
.visto{width:14px; height:14px; overflow:visible}
.visto path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:20 60; stroke-dashoffset:20;
  transition:stroke-dashoffset 420ms var(--ease)}
.bt.feito .visto path{stroke-dashoffset:0}

/* ---------- selo ---------- */
.selo{width:120px; height:120px; margin:6px auto 0; display:block; overflow:visible}
.selo circle,.selo path{fill:none; stroke:var(--sage); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.selo circle{stroke-dasharray:339.3 678.6; stroke-dashoffset:339.3;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset 900ms var(--ease)}
.selo path{stroke-dasharray:47 141; stroke-dashoffset:47; stroke-width:2.2;
  transition:stroke-dashoffset 420ms var(--ease) 640ms}
.selo.marcado circle, .selo.marcado path{stroke-dashoffset:0}
.msg{margin:18px 0 0; opacity:0; transform:translateY(8px);
  transition:opacity var(--t3) var(--ease) 900ms, transform var(--t3) var(--ease) 900ms}
.msg.visivel{opacity:1; transform:none}
.msg strong{display:block; font-family:'Cinzel',Georgia,serif; font-weight:500;
  font-size:26px; color:var(--sage)}
.msg span{font-size:14.5px; color:rgba(46,51,39,.72)}

footer{text-align:center; padding:40px 24px 64px; border-top:1px solid var(--linha-fina);
  font-family:'Spectral',Georgia,serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(46,51,39,.42)}

/* Orientação sob o botão de copiar: o código copia e cola vai num campo
   diferente da chave PIX no aplicativo do banco. Sem essa linha, parte
   dos convidados cola no lugar errado e recebe erro. */
.dica-pix{margin:8px 0 0; font-family:'Spectral',Georgia,serif; font-size:12.5px;
  line-height:1.5; color:rgba(46,51,39,.62); text-align:center}
.dica-pix b{font-weight:500; color:var(--sage)}