/* =====================================================================
   PARTE INTERNA DO CONVITE: uma página única que rola dentro do palco.
   Padrão: o mesmo papel e relevo da carta, caligrafia do selo nos títulos,
   serifada fina no texto, terracota como cor de destaque e dourado nos selos.
   ===================================================================== */
@font-face{font-family:"Formal";src:url(fonts/petit-formal-script-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-style:italic}

.dentro{
  --papel:#e8dfdf; --papel-2:#f3ece8; --tinta:#5c4b44; --tinta-2:#8a766c;
  --terra:#a65a3d; --terra-esc:#6e3526; --terra-claro:#c9907a; --ouro:#c4a16b;
  position:absolute;inset:0;z-index:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--papel);color:var(--tinta);font:400 4.1cqw/1.55 "Cormorant",Georgia,serif;text-align:center;
  scrollbar-width:none;pointer-events:none}
.dentro::-webkit-scrollbar{display:none}
.aberto .dentro{pointer-events:auto}

/* tipografia padrão */
.dentro h2{font:400 8.2cqw/1.25 "Formal",cursive;color:var(--terra);margin:0 0 4cqw;letter-spacing:.01em}
.dentro .versal{font:500 3cqw/1.6 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;color:var(--tinta-2)}
.dentro p{margin:0 auto;max-width:78cqw}
.dentro .fino{width:16cqw;height:1px;margin:6cqw auto;border:0;background:linear-gradient(90deg,transparent,var(--terra-claro),transparent)}
.secao{padding:13cqw 7cqw;position:relative}

/* ao rolar: cada bloco entra suave */
.surge{opacity:0;transform:translateY(5cqw);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.aberto .surge.visto{opacity:1;transform:none}

/* ---------- 1. abertura: janela em arco com paisagem viva ---------- */
.abertura{min-height:100cqh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5cqw 0 4cqw}
.janela{position:relative;width:96cqw;height:min(166cqw,90cqh)}
.janela canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.janela .txt{position:absolute;left:19cqw;right:19cqw;top:17%;pointer-events:none}
.janela .versal{font-size:2.3cqw;letter-spacing:.2em;line-height:1.9;color:#8a6f64}
.nomes{font:500 8.4cqw/1.02 "Cormorant",serif;letter-spacing:.16em;color:#4f3d36;margin:5cqw 0 1cqw;padding-left:.16em}
.nomes .e{display:block;font:400 8.6cqw/1.25 "Formal",cursive;color:var(--terra);letter-spacing:0;margin:1.4cqw 0 2.4cqw}
.data{display:flex;justify-content:center;align-items:center;gap:3.2cqw;margin-top:4cqw;font:500 4.4cqw/1 "Cormorant",serif;letter-spacing:.2em;color:#4f3d36}
.data i{width:1px;height:6cqw;background:var(--terra-claro)}
.janela .dia{margin-top:2.4cqw}
/* entrada do texto quando a carta abre: um item depois do outro */
.janela .txt > *{opacity:0;transform:translateY(3cqw);filter:blur(3px);transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.4s ease}
.fim .janela .txt > *{opacity:1;transform:none;filter:none}
.fim .janela .txt > :nth-child(1){transition-delay:.9s}
.fim .janela .txt > :nth-child(2){transition-delay:1.4s}
.fim .janela .txt > :nth-child(3){transition-delay:2s}
.fim .janela .txt > :nth-child(4){transition-delay:2.4s}
.rolar{margin-top:4cqw;font:500 2.4cqw/1 "Cormorant",serif;letter-spacing:.5em;text-transform:uppercase;color:var(--tinta-2);opacity:0;transition:opacity 1s 3.4s}
.fim .rolar{opacity:1;animation:flutua 2.6s ease-in-out 4.4s infinite}
.rolar::after{content:"";display:block;width:1px;height:7cqw;margin:2.5cqw auto 0;background:linear-gradient(var(--terra-claro),transparent)}
@keyframes flutua{50%{transform:translateY(1.6cqw);opacity:.55}}

/* ---------- 2. pais ---------- */
.pais{display:grid;grid-template-columns:1fr 1fr;gap:6cqw;margin-top:2cqw}
.pais div{font-size:3.6cqw;line-height:1.5}
.pais{gap:3cqw}
.pais .versal{display:block;margin-bottom:2cqw;font-size:2.5cqw}

/* ---------- envelopes terracota (Nossa História e Confirmar presença) ---------- */
.envelope{position:relative;width:78cqw;margin:8cqw auto 0;aspect-ratio:1.25;perspective:200cqw;cursor:pointer;transition:margin-top 1.3s cubic-bezier(.3,.8,.2,1) .4s}
.envelope.aberto-env{margin-top:34cqw;cursor:default}
.envelope .fundo,.envelope .bolso,.envelope .aba{position:absolute;inset:0}
.envelope .fundo{background:linear-gradient(160deg,#a25a3f,#7d3d2b);border-radius:1.2cqw;box-shadow:0 3cqw 6cqw rgba(90,40,25,.25)}
.envelope .bolso{z-index:3;background:linear-gradient(170deg,#ad6447,#8a4430 70%);
  clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);border-radius:0 0 1.2cqw 1.2cqw}
.envelope .aba{z-index:4;height:62%;background:linear-gradient(180deg,#b46a4b,#924a34);clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.5,0,.2,1),z-index 0s .55s;border-radius:1.2cqw 1.2cqw 0 0}
.envelope .lacre{position:absolute;z-index:5;left:50%;top:62%;width:13cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f3dca8,#c9a062 45%,#9c7537 100%);box-shadow:0 .6cqw 1.4cqw rgba(60,30,10,.35),inset 0 0 0 1.2cqw rgba(255,240,200,.18);
  display:grid;place-items:center;font:400 4.4cqw/1 "Formal",cursive;color:#7a5521;transition:opacity .5s,transform .6s}
.envelope .cartao{position:absolute;z-index:2;left:6%;right:6%;top:8%;bottom:6%;background:var(--papel-2);border-radius:.8cqw;
  box-shadow:0 1cqw 3cqw rgba(60,30,20,.18);padding:6cqw 5.4cqw;transition:transform 1.3s cubic-bezier(.3,.8,.2,1) .4s,z-index 0s 1.1s;overflow:hidden}
.envelope .cartao::before{content:"";position:absolute;inset:2cqw;border:1px solid var(--terra-claro);border-radius:.4cqw;opacity:.6;pointer-events:none}
.envelope.aberto-env .aba{transform:rotateX(178deg);z-index:1}
.envelope.aberto-env .lacre{opacity:0;transform:scale(.6)}
/* o cartão sobe e fica por cima */
/* o cartão sobe enquanto o envelope desce: o cartão fica no lugar e o envelope se afasta */
.envelope.aberto-env .cartao{transform:translateY(-46%);z-index:6}
.toque-env{margin-top:3cqw;font:500 2.4cqw/1 "Cormorant",serif;letter-spacing:.4em;text-transform:uppercase;color:var(--tinta-2)}

.historia .cartao h2{font-size:6.4cqw;margin-bottom:2cqw}
.historia .cartao p{font:italic 400 3.55cqw/1.5 "Cormorant",serif;max-width:none}

/* ---------- foto ---------- */
.foto{width:84cqw;margin:0 auto;position:relative}
.foto img{display:block;width:100%;border-radius:40cqw 40cqw 2cqw 2cqw;aspect-ratio:.78;object-fit:cover;object-position:50% 40%}
.foto::after{content:"";position:absolute;inset:2.4cqw;border:1px solid rgba(255,245,235,.7);border-radius:38cqw 38cqw 1.2cqw 1.2cqw;pointer-events:none}
.foto + .legenda{font:400 6cqw/1 "Formal",cursive;color:var(--terra);margin-top:5cqw}

/* ---------- contagem ---------- */
.contagem{display:flex;justify-content:center;gap:2cqw;margin-top:2cqw}
.contagem div{min-width:16cqw}
.contagem b{display:block;font:400 10cqw/1 "Cormorant",serif;color:var(--tinta);font-variant-numeric:tabular-nums;transition:opacity .35s}
.contagem span{font:500 2.3cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-2)}
.contagem i{align-self:flex-start;font:300 8cqw/1 "Cormorant",serif;color:var(--terra-claro);font-style:normal}

/* ---------- cartões ---------- */
.cartao-local{position:relative;width:80cqw;margin:0 auto;background:var(--papel-2);padding:9cqw 7cqw 8cqw;border-radius:1cqw;
  box-shadow:0 2cqw 5cqw rgba(90,50,35,.12)}
.cartao-local::before{content:"";position:absolute;inset:2.4cqw;border:1px solid var(--terra-claro);opacity:.55;pointer-events:none;border-radius:.4cqw}
.cartao-local canvas{width:22cqw;height:22cqw;display:block;margin:0 auto 2cqw}
.cartao-local .titulo{font:500 4.6cqw/1.2 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta);margin-bottom:3cqw}
.cartao-local .hora{font:400 7cqw/1 "Formal",cursive;color:var(--terra);margin:3.4cqw 0}
.botoes{display:flex;flex-wrap:wrap;gap:3cqw;justify-content:center;margin-top:6cqw}
.botao{appearance:none;border:1px solid var(--terra);background:transparent;color:var(--terra);border-radius:10cqw;padding:2.8cqw 5.4cqw;
  font:500 2.8cqw/1 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .3s,color .3s,transform .2s;-webkit-tap-highlight-color:transparent}
.botao:active{transform:scale(.96)}
.botao.cheio{background:var(--terra);color:#fbf3ee}
@media (hover:hover){.botao:hover{background:var(--terra);color:#fbf3ee}.botao.cheio:hover{background:var(--terra-esc)}}

/* ---------- manual dos convidados ---------- */
.manual{display:grid;grid-template-columns:repeat(3,1fr);gap:5cqw 2.4cqw;margin-top:4cqw}
.item{position:relative;aspect-ratio:.78;perspective:120cqw;cursor:pointer;-webkit-tap-highlight-color:transparent}
.item .lados{position:absolute;inset:0;transition:transform .8s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.item.virado .lados{transform:rotateY(180deg)}
.item .frente,.item .verso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.4cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2cqw 1.6cqw}
.item .frente{background:var(--papel-2);box-shadow:0 1cqw 2.6cqw rgba(90,50,35,.08)}
.item canvas{width:17cqw;height:17cqw;display:block}
.item .nome{font:500 2.35cqw/1.35 "Cormorant",serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);margin-top:2cqw;min-height:6.4cqw}
.item .verso{transform:rotateY(180deg);background:var(--terra);color:#fbf1ea;font:italic 400 3.2cqw/1.4 "Cormorant",serif}
.manual + .dica-manual{margin-top:5cqw;font:500 2.3cqw/1 "Cormorant",serif;letter-spacing:.36em;text-transform:uppercase;color:var(--tinta-2)}

/* ---------- presentes ---------- */
.pix{margin:6cqw auto 0;width:80cqw;background:var(--papel-2);border-radius:1cqw;padding:7cqw 6cqw;position:relative;box-shadow:0 2cqw 5cqw rgba(90,50,35,.1)}
.pix .chave{font:500 5.6cqw/1 "Cormorant",serif;letter-spacing:.08em;color:var(--tinta);margin:2.6cqw 0 0}
.aviso{position:fixed;left:50%;bottom:8%;translate:-50% 0;z-index:30;background:var(--terra-esc);color:#fbf1ea;padding:3cqw 6cqw;border-radius:10cqw;
  font:500 3cqw/1 "Cormorant",serif;letter-spacing:.14em;opacity:0;transform:translateY(3cqw);transition:.4s;pointer-events:none}
.aviso.mostra{opacity:1;transform:none}

/* ---------- confirmar presença ---------- */
.rsvp .cartao{padding:6cqw 5cqw}
.rsvp .cartao h2{font-size:6.4cqw;margin-bottom:1cqw}
.rsvp .cartao .versal{font-size:2.3cqw;letter-spacing:.2em}
.formulario{width:80cqw;margin:0 auto;text-align:left}
.formulario label{display:block;margin-top:4cqw;font:500 2.5cqw/1 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)}
.formulario input,.formulario textarea,.formulario select{display:block;width:100%;margin-top:1.8cqw;padding:2.8cqw 3cqw;border:1px solid #d6c2b8;border-radius:1cqw;
  background:var(--papel-2);color:var(--tinta);font:400 4.2cqw/1.3 "Cormorant",serif;outline:none;-webkit-appearance:none}
.formulario input:focus,.formulario textarea:focus{border-color:var(--terra)}
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:1.8cqw}
.opcoes label{margin:0}
.opcoes input{position:absolute;opacity:0;pointer-events:none}
.opcoes span{display:block;padding:3cqw 2cqw;border:1px solid #d6c2b8;border-radius:1cqw;text-align:center;font:500 2.6cqw/1.3 "Cormorant",serif;
  letter-spacing:.12em;color:var(--tinta);background:var(--papel-2);transition:.25s;cursor:pointer}
.opcoes input:checked + span{background:var(--terra);border-color:var(--terra);color:#fbf1ea}
.formulario .botoes{margin-top:7cqw}
.formulario .robo{display:none}
.obrigado{display:none;font:italic 400 4.6cqw/1.5 "Cormorant",serif;color:var(--tinta);padding:4cqw 0}
.obrigado b{display:block;font:400 7cqw/1.2 "Formal",cursive;color:var(--terra);margin-bottom:2cqw}
.enviado .formulario form{display:none}
.enviado .obrigado{display:block}

/* ---------- rodapé ---------- */
.rodape{background:var(--terra-esc);color:#f3e2d8;padding:14cqw 7cqw 16cqw}
.rodape .com{font:400 6cqw/1 "Formal",cursive;color:#e8c3ad}
.rodape .nomes-r{font:500 6cqw/1.2 "Cormorant",serif;letter-spacing:.24em;margin:5cqw 0 3cqw}
.rodape .versal{color:#d9b6a2}

@media (prefers-reduced-motion:reduce){.surge{opacity:1;transform:none;transition:none}}
.historia .envelope{aspect-ratio:1.08}
/* o texto da abertura é desenhado no canvas; aqui fica só para leitores de tela */
.janela .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.janela{border-radius:2cqw;overflow:hidden;box-shadow:0 3cqw 7cqw rgba(90,40,25,.25)}
/* abertura em tela cheia (pétalas) */
.abertura{position:relative;padding:0;min-height:100cqh}
.janela{width:100cqw;height:100cqh;border-radius:0;box-shadow:none;overflow:visible}
.janela canvas{touch-action:pan-y}
.rolar{position:absolute;left:0;right:0;bottom:4cqh;margin:0;pointer-events:none}

/* ---------- abertura cinematográfica ---------- */
.janela{width:100cqw;height:100cqh;position:relative;overflow:hidden;background:#2a1a12}
.janela video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:translate3d(var(--px,0),var(--py,0),0);
  transition:opacity 1.6s ease;opacity:0;filter:saturate(1.02)}
.fim .janela video{opacity:1}
.janela canvas#cenario{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* papel rasgado na passagem do filme para o convite */
.rasgo{position:absolute;left:0;bottom:-1px;width:100cqw;height:11cqw;z-index:2;pointer-events:none}
.abertura .rolar{z-index:3;bottom:9cqw;font-size:2.2cqw;color:rgba(255,244,232,.85);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.abertura .rolar::after{display:none}
/* botão de música (aparece quando a carta abre) */
.som{position:absolute;right:4cqw;top:4cqw;z-index:20;width:10cqw;height:10cqw;border-radius:50%;border:1px solid rgba(255,240,228,.55);
  background:rgba(60,30,20,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;gap:.7cqw;
  padding:0 0 3cqw;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 1s 2s}
.fim .som{opacity:1;pointer-events:auto}
.som span{width:.7cqw;height:4cqw;background:#fbefe4;border-radius:1cqw;transform-origin:bottom;animation:barra 1s ease-in-out infinite}
.som span:nth-child(2){animation-delay:.25s}.som span:nth-child(3){animation-delay:.5s}
.som.mudo span{animation:none;transform:scaleY(.3)}
@keyframes barra{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.rodape .credito{margin-top:9cqw;font:400 2.2cqw/1.4 "Cormorant",serif;color:rgba(243,226,216,.45);letter-spacing:.04em}

/* ---------- abertura: moldura delicada (estilo do exemplo) ---------- */
.abertura{position:relative;min-height:100cqh;padding:0;display:block;background:#f3ebe3}
.abertura{display:flex!important;align-items:center;justify-content:center}
.quadro{position:relative;width:min(84cqi,calc(86cqh * 730 / 1380));aspect-ratio:730/1380;margin:0 auto;overflow:hidden;border-radius:1.2cqi;
  box-shadow:0 .6cqi 1.4cqi rgba(110,80,60,.12),0 3cqi 7cqi rgba(110,80,60,.16)}
.quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}
.quadro canvas{position:absolute;inset:0;width:100%;height:100%}
.quadro{container-type:inline-size}
.texto{position:absolute;left:25%;right:25%;top:16.5%;text-align:center;color:#7d6a5c;pointer-events:none}
.texto > *{opacity:0;transform:translateY(1.6cqi);transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.fim .texto > *{opacity:1;transform:none}
.fim .texto > :nth-child(1){transition-delay:.8s}.fim .texto > :nth-child(2){transition-delay:1.1s}
.fim .texto > :nth-child(3){transition-delay:1.6s}.fim .texto > :nth-child(4){transition-delay:2s}
.fim .texto > :nth-child(5){transition-delay:2.3s}.fim .texto > :nth-child(6){transition-delay:2.7s}
.fim .texto > :nth-child(7){transition-delay:3s}.fim .texto > :nth-child(8){transition-delay:3.3s}
.orn{height:3cqi;margin:0 auto 3cqi;width:22cqi;background:
  radial-gradient(circle at 50% 50%,#a58e7a 0 .55cqi,transparent .6cqi),
  linear-gradient(90deg,transparent,#b8a492 30%,#b8a492 42%,transparent 44%,transparent 56%,#b8a492 58%,#b8a492 70%,transparent) center/100% 1px no-repeat}
.orn.baixo{width:14cqi;margin:3.4cqi auto 3cqi}
.conv{font:500 1.95cqi/1.75 "Cormorant",serif;letter-spacing:.18em;text-transform:uppercase;color:#8a776a}
.nome{font:500 7.6cqi/1.05 "Cormorant",serif;letter-spacing:.12em;color:#7b6656;padding-left:.12em}
.texto .conv + .nome{margin-top:6cqi}
.ec{display:flex;align-items:center;justify-content:center;gap:2.4cqi;margin:1.6cqi 0}
.ec i{flex:1;height:1px;background:#b8a492;max-width:13cqi}
.ec span{font:400 6cqi/1 "Formal",cursive;color:#9c826d}
.dt{font:500 3.6cqi/1 "Cormorant",serif;letter-spacing:.16em;color:#6f5c4f}
.dt b{font-weight:400;color:#b8a492;margin:0 1.2cqi}
.dia{margin-top:2cqi;font:500 2.1cqi/1 "Cormorant",serif;letter-spacing:.34em;color:#9b897b}
.abertura .rolar{position:absolute;left:0;right:0;bottom:2cqh;z-index:3;color:#9b897b;text-shadow:none}

/* ---------- abertura v2: a arte se dissolve no fundo (página inteira) + escrita à pena ---------- */
.abertura{background:linear-gradient(180deg,#e3d6ce 0%,#e2d4cb 50%,#ddcdc3 100%)}
.quadro{width:min(100cqi,calc(100cqh * 730 / 1380));border-radius:0;box-shadow:none;overflow:visible}
.quadro img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
/* escrita: cada linha é revelada da esquerda para a direita, atrás da pena */
.texto > *{opacity:1!important;transform:none!important;transition:none!important;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%))}
.texto .conv{color:#9a6a55}
.texto .nome{color:#8a4a33}
.texto .ec span{color:#a65a3d}.texto .ec i{background:#c49a86}
.texto .dt{color:#7c4630}.texto .dt b{color:#c49a86}
.texto .dia{color:#a07b6b}
.texto .orn{background:radial-gradient(circle at 50% 50%,#a65a3d 0 .55cqi,transparent .6cqi),
  linear-gradient(90deg,transparent,#c49a86 30%,#c49a86 42%,transparent 44%,transparent 56%,#c49a86 58%,#c49a86 70%,transparent) center/100% 1px no-repeat}
.pena{position:absolute;left:0;top:0;width:13cqi;height:13cqi;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  transform-origin:6% 94%;will-change:transform}
.pena.ativa{opacity:1}
/* selo de lacre terracota que "assina" o convite depois da pena */
.texto .assina{-webkit-mask-image:none;mask-image:none;width:15cqi;margin:4.5cqi auto 0;opacity:0!important;transform:scale(1.5) rotate(-14deg)!important;
  transition:opacity .35s ease,transform .55s cubic-bezier(.3,1.6,.5,1)!important}
.texto .assina.on{opacity:1!important;transform:scale(1) rotate(-6deg)!important}
.texto .assina img{width:100%;display:block;filter:drop-shadow(0 .6cqi .8cqi rgba(90,40,20,.35))}
.texto .assina img{position:static;height:auto;-webkit-mask-image:none;mask-image:none;object-fit:contain}
/* a arte ocupa sempre a largura toda (no iPhone, a tela é mais baixa por causa das barras do Safari) */
.quadro{width:100cqi!important;height:auto!important;aspect-ratio:730/1380}
.abertura{min-height:100cqh;align-items:center}
/* arte inteira, na proporção original, centralizada; o papel estendido preenche as laterais */
.abertura{min-height:100cqh;display:flex!important;align-items:center;justify-content:center;overflow:hidden}
.quadro{width:min(100cqw,calc(96cqh * 910 / 1380))!important;height:auto!important;aspect-ratio:910/1380;container-type:normal;overflow:visible}
.quadro > img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-composite:intersect}
/* núcleo = a arte original (sem as laterais estendidas): texto, pena e pétalas se alinham a ele */
.nucleo{position:absolute;top:0;bottom:0;left:9.89%;width:80.22%;container-type:inline-size}
.nucleo canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- abertura v3: arte "primeira página" (terracota) + tinta revelada pela pena ---------- */
.abertura{background:#d7b294!important}
.quadro.pagina{width:min(100cqw,calc(100cqh * 1024 / 1536))!important;aspect-ratio:1024/1536;height:auto!important;overflow:visible}
.quadro.pagina > .fundo-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.quadro.pagina .nucleo{left:0;width:100%}
.tinta{position:absolute;inset:0;pointer-events:none}
.tinta .linha{position:absolute;inset:auto;height:auto;object-fit:initial;display:block;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%))}
.quadro.pagina .pena{width:10cqi;height:10cqi}
.abertura .rolar{color:#8a4a33!important}

/* ---------- abertura: o papel da arte continua até as bordas da tela (sem "imagem colada") ---------- */
.abertura{background:linear-gradient(180deg,#dab699,#d5ae8f)!important;overflow:hidden}
.quadro.pagina > .fundo-arte{inset:auto;left:-29.297%;top:-27.344%;width:158.594%;height:154.688%;max-width:none;
  -webkit-mask-image:none;mask-image:none}

/* =====================================================================
   SEGUNDA PARTE v2 (padrão do exemplo): papel creme, títulos em versal
   espaçada, caligrafia "Assinatura" em todos os títulos cursivos,
   terracota no envelope e dourado no selo e nos detalhes.
   ===================================================================== */
@font-face{font-family:"Assinatura";src:url(fonts/mrs-saint-delafield-latin-400-normal.woff2) format("woff2")}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
.dentro{--papel:#efe6dc;--papel-2:#f7f1e8;--tinta:#5e4636;--tinta-2:#7d6655;--terra:#a65a3d;--terra-claro:#c39678;--ouro:#a8794a;--ouro-claro:#c9a77c;
  background:var(--papel)}
/* padronização: a mesma caligrafia em todos os títulos e detalhes cursivos */
.dentro h2{font:400 12.5cqw/1.15 "Assinatura",cursive;color:var(--ouro);letter-spacing:0;margin:0 0 2cqw}
.foto + .legenda,.cartao-local .hora,.obrigado b{font-family:"Assinatura",cursive;font-size:9cqw;color:var(--ouro)}
.rodape .com{font-family:"Assinatura",cursive;font-size:8.5cqw}
.dentro .versal{font:500 3cqw/1.6 "Cormorant",serif;letter-spacing:.34em;color:var(--tinta-2)}
.dentro .fio{display:block;width:22cqw;height:1px;margin:4.5cqw auto;background:linear-gradient(90deg,transparent,var(--ouro-claro) 25%,var(--ouro-claro) 75%,transparent)}

/* ---------- com a bênção de nossos pais ---------- */
.bencao{position:relative;overflow:hidden;padding:16cqw 0 0;
  background:linear-gradient(180deg,#d5ae8f 0,#e6d3c2 9cqw,var(--papel) 26cqw)}
.sombra-ramo{position:absolute;left:0;top:0;width:100%;height:150cqw;pointer-events:none;opacity:.9}
.bencao > .surge{position:relative;padding:0 7cqw}
.titulo-sec{font-size:3.3cqw!important;letter-spacing:.3em!important;color:var(--tinta-2)}
.pais2{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;margin-top:1cqw}
.pais2 .versal{display:block;font-size:2.6cqw;margin-bottom:2.4cqw}
.pais2 p{font:400 4.3cqw/1.42 "Cormorant",serif;color:var(--tinta);max-width:none}
.pais2 i{font-style:normal;color:var(--ouro)}

/* ---------- envelope terracota aberto + cartão "Nossa História" ---------- */
.env-hist{position:relative;margin-top:9cqw;padding:0 0 6cqw;overflow:hidden;--bolso:64cqw}
.eh-aba,.eh-fundo{position:absolute;left:0;right:0;background:#8f472d}
.eh-fundo{bottom:0;height:var(--bolso);background-color:#8f472d}
.eh-aba{bottom:var(--bolso);height:58cqw;clip-path:polygon(0 100%,50% 0,100% 100%);
  background:linear-gradient(180deg,#a85d3e,#8a4429)}
.eh-cartao{position:relative;z-index:1;margin:0 6cqw;padding:13cqw 7cqw 46cqw;border-radius:.6cqw;
  background:radial-gradient(120% 80% at 50% 30%,#f9f4ec,#f1e8dc);
  box-shadow:0 -.4cqw 1.2cqw rgba(70,35,20,.18),0 0 0 .2cqw rgba(255,255,255,.4) inset;
  transform:translateY(calc(100% - var(--bolso) + 4cqw));transition:transform 1.9s cubic-bezier(.22,.75,.12,1)}
.eh-cartao::before{content:"";position:absolute;inset:3.4cqw;border:1px solid var(--ouro-claro);opacity:.75;pointer-events:none}
.env-hist.sai .eh-cartao{transform:none}
.eh-titulo{margin:0!important;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) - 8%),transparent var(--p));mask-image:linear-gradient(90deg,#000 calc(var(--p) - 8%),transparent var(--p));
  transition:--p 1.7s cubic-bezier(.45,.1,.3,1) 1.2s;filter:drop-shadow(0 .15cqw 0 rgba(255,255,255,.7))}
.env-hist.sai .eh-titulo{--p:108%}
.eh-cartao .fio{margin:3.2cqw auto 5cqw}
.eh-cartao p{text-wrap:balance;font:400 3.75cqw/1.55 "Cormorant",serif;color:var(--tinta);margin:0 auto 3.4cqw;max-width:none;
  opacity:0;transform:translateY(1.5cqw);transition:opacity 1s ease,transform 1s ease}
.env-hist.sai .eh-cartao p{opacity:1;transform:none}
.env-hist.sai .eh-cartao p:nth-of-type(1){transition-delay:1.9s}.env-hist.sai .eh-cartao p:nth-of-type(2){transition-delay:2.2s}
.env-hist.sai .eh-cartao p:nth-of-type(3){transition-delay:2.5s}.env-hist.sai .eh-cartao p:nth-of-type(4){transition-delay:2.8s}
.coracoes{display:flex;align-items:center;justify-content:center;gap:2cqw;margin-top:4cqw;opacity:0;transition:opacity 1s 3.2s}
.env-hist.sai .coracoes{opacity:1}
.coracoes i{width:13cqw;height:1px;background:var(--ouro-claro)}
.coracoes svg{width:8cqw;fill:none;stroke:var(--ouro);stroke-width:1.3}
.ramo{position:absolute;pointer-events:none}
.ramo.r1{left:3.6cqw;top:4cqw;width:24cqw;height:34cqw}
.ramo.r2{right:3.6cqw;top:4cqw;width:24cqw;height:34cqw}
.eh-bolso{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:var(--bolso);overflow:visible}
.eh-selo{position:absolute;z-index:3;left:50%;bottom:calc(var(--bolso) - 41cqw);width:27cqw;aspect-ratio:1;translate:-50% 50%;padding:0;border:0;background:none;
  cursor:pointer;filter:drop-shadow(0 .8cqw 1cqw rgba(50,22,10,.4));-webkit-tap-highlight-color:transparent;transition:transform .35s}
.eh-selo img{width:100%;height:100%;display:block}
.eh-selo:active{transform:scale(.95)}
.eh-selo::after{content:"";position:absolute;inset:10%;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.75) 50%,transparent 65%) -150% 0/250% 100% no-repeat;mix-blend-mode:soft-light}
.eh-selo.brilha::after{animation:brilhoSelo 1.1s ease}
@keyframes brilhoSelo{to{background-position:150% 0}}

/* ---------- nossa história v3: abre com a rolagem (e fecha ao voltar), como no vídeo de exemplo ---------- */
.bencao{padding-bottom:6cqw}
.hist-rolo{position:relative;height:250cqh;background:var(--papel)}
.hr-palco{position:sticky;top:0;height:100cqh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.env3{position:relative;width:86cqw;height:94cqw;will-change:transform}
.e3-fundo{position:absolute;inset:0;z-index:0;border-radius:.6cqw;background:linear-gradient(180deg,#6f3420,#8a442b);box-shadow:0 3cqw 6cqw rgba(80,40,25,.25)}
.env3 .eh-cartao{position:absolute;z-index:1;left:5cqw;right:5cqw;top:3cqw;margin:0;padding:9cqw 6cqw 7cqw;transition:none;transform:none;will-change:transform}
.env3 .eh-titulo{transition:none;--p:0%}
.env3 .eh-cartao p,.env3 .coracoes{transition:none;transform:none;opacity:0}
.env3 .eh-cartao p{margin-bottom:3cqw}
.env3 .ramo.r1,.env3 .ramo.r2{top:3cqw;width:20cqw;height:28cqw}
.env3 .ramo.r1{left:3cqw}.env3 .ramo.r2{right:3cqw}
.e3-frente{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible}
.e3-aba{position:absolute;z-index:3;left:0;top:0;width:100%;height:62cqw;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.e3-aba-fora,.e3-aba-dentro{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.e3-aba-fora{background:linear-gradient(180deg,#b26c4c,#9b5134)}
.e3-aba-dentro{transform:rotateX(180deg);background:linear-gradient(0deg,#e2c3a9,#cfa587)}
.e3-selo{position:absolute;left:50%;top:91%;width:27cqw;translate:-50% -50%;transform:translateZ(.2px);-webkit-backface-visibility:hidden;backface-visibility:hidden;
  filter:drop-shadow(0 .6cqw .8cqw rgba(60,25,12,.35));pointer-events:none}
.e3-dica{margin-top:8cqw;font:500 2.6cqw/1 "Cormorant",serif;letter-spacing:.42em;text-transform:uppercase;color:var(--tinta-2);animation:respiraDica 2.6s ease-in-out infinite}
@keyframes respiraDica{50%{opacity:.35}}

/* ---------- nossa história v4: envelope minimalista que abre sozinho ao aparecer ---------- */
.hist4{position:relative;padding:calc(var(--sobe,60cqw) + 10cqw) 0 16cqw;display:flex;justify-content:center;background:var(--papel)}
.e4{position:relative;width:78cqw;aspect-ratio:100/66;--t:cubic-bezier(.45,.05,.2,1)}
.e4-fundo{position:absolute;inset:0;background:#97502f;border-radius:.5cqw;box-shadow:0 2.6cqw 5cqw -1cqw rgba(90,45,25,.28)}
.e4-dentro{position:absolute;left:4cqw;right:4cqw;bottom:0;top:-260cqw;overflow:hidden;z-index:1;pointer-events:none}
.e4 .eh-cartao{position:absolute;left:0;right:0;top:263cqw;bottom:auto;margin:0;padding:8.5cqw 6cqw 6.5cqw;
  transform:translateY(0);transition:transform 1.3s var(--t) 0s}
.e4 .eh-titulo{transition:--p 1.5s cubic-bezier(.45,.1,.3,1) 0s;--p:0%}
.e4 .eh-cartao p,.e4 .coracoes{opacity:0;transform:translateY(1.5cqw);transition:opacity .5s,transform .5s}
.e4 .eh-cartao p{font-size:3.6cqw;margin-bottom:2.8cqw}
.e4 .ramo.r1,.e4 .ramo.r2{top:2.8cqw;width:18cqw;height:25cqw}.e4 .ramo.r1{left:2.6cqw}.e4 .ramo.r2{right:2.6cqw}
.e4-frente{position:absolute;inset:0;width:100%;height:100%;z-index:2;border-radius:.5cqw;overflow:hidden}
.e4-aba{position:absolute;z-index:3;left:0;right:0;top:0;height:56%;transform-origin:50% 0;transform-style:preserve-3d;
  transform:perspective(160cqw) rotateX(0deg);transition:transform .8s var(--t) .9s,z-index 0s 1.3s}
.e4-aba-fora,.e4-aba-dentro{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.e4-aba-fora{background:#ad6445;filter:drop-shadow(0 0 0 transparent)}
.e4-aba-fora::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(60,25,12,.12))}
.e4-aba-dentro{transform:rotateX(180deg);background:#e6cdb8}
.e4-selo{position:absolute;z-index:4;left:50%;top:56%;width:17cqw;translate:-50% -58%;transition:opacity .45s ease 1.5s,transform .45s ease 1.5s;
  filter:drop-shadow(0 .5cqw .6cqw rgba(60,25,12,.3))}
/* aberto: selo solta, aba abre (vai para trás do cartão), cartão sobe e o texto aparece */
.e4.abre .e4-selo{opacity:0;transform:scale(1.18) translateY(-3cqw);transition-delay:0s}
.e4.abre .e4-aba{transform:perspective(160cqw) rotateX(180deg);z-index:0;transition:transform .9s var(--t) .3s,z-index 0s .75s}
.e4.abre .eh-cartao{transform:translateY(calc(-1 * var(--sobe,60cqw)));transition:transform 1.5s var(--t) .95s}
.e4.abre .eh-titulo{--p:108%;transition-delay:2.1s}
.e4.abre .eh-cartao p,.e4.abre .coracoes{opacity:1;transform:none;transition:opacity 1s,transform 1s}
.e4.abre .eh-cartao p:nth-of-type(1){transition-delay:2.6s}.e4.abre .eh-cartao p:nth-of-type(2){transition-delay:2.9s}.e4.abre .coracoes{transition-delay:3.2s}

/* v4b: título sem cortar o "H" + flores terracota nos cantos (no lugar dos raminhos) */
.e4 .eh-titulo{padding:3cqw 3cqw 1cqw;margin:-3cqw -3cqw 0!important;font-size:11.5cqw}
.e4 .eh-cartao{padding-top:13cqw}
.e4 .ramo.r1,.e4 .ramo.r2{top:-5cqw;width:27cqw;height:27cqw;z-index:2}
.e4 .ramo.r1{left:-5cqw}.e4 .ramo.r2{right:-5cqw}
.e4-dentro{overflow:visible;clip-path:inset(-300cqw -10cqw 0 -10cqw)}
/* sem flores nos cantos do cartão */
.e4 .ramo{display:none}

/* ---------- v5: envelope com aba funda aberta em pé atrás do cartão (3D) + ornamentos nos cantos ---------- */
.hist4{padding-top:calc(var(--sobe,50cqw) + 24cqw)}
.e4{width:84cqw;aspect-ratio:84/60}
.e4-fundo{background:linear-gradient(180deg,#6e321f,#8d462c)}
.e4-dentro{left:8cqw;right:8cqw}
.e4-aba{height:96.5%;transition:transform 1s var(--t) .9s,z-index 0s 1.4s}
.e4-aba-fora{background:linear-gradient(180deg,#b0694a,#a35b3c)}
.e4-aba-dentro{background:linear-gradient(0deg,#9c5536 0%,#b8704f 70%,#c27c5b 100%)}
.e4.abre .e4-aba{transform:perspective(150cqw) rotateX(198deg);transition:transform 1.1s var(--t) .3s,z-index 0s .8s}
.e4-selo{top:93%;width:16cqw}
.e4 .eh-cartao{padding:11.5cqw 6cqw 6cqw;box-shadow:0 -.6cqw 2cqw rgba(50,20,10,.25)}
.e4 .eh-titulo{font-size:10.5cqw}
.e4 .eh-cartao p{font-size:3.45cqw;line-height:1.5;margin-bottom:2.4cqw}
.e4 .eh-cartao .fio{margin:2.4cqw auto 4cqw;width:18cqw}
.e4 .coracoes{margin-top:3cqw}
.orn{position:absolute;top:1.6cqw;width:15cqw;height:15cqw;overflow:visible;z-index:2}
.orn.o1{left:1.6cqw}.orn.o2{right:1.6cqw;transform:scaleX(-1)}
.orn path{fill:none;stroke:#8c6239;stroke-width:1.15;stroke-linecap:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.3,1) 0s}
.orn .ch{fill:#8c6239;stroke:none;opacity:0;transition:opacity .6s 0s}
.e4.abre .orn path{stroke-dashoffset:0;transition-delay:2.1s}
.e4.abre .orn .ch{opacity:1;transition-delay:3.2s}
.e4-aba-dentro{clip-path:polygon(0 100%,100% 100%,50% 0)}   /* face de dentro já virada: a ponta fica para cima quando a aba abre */

/* ---------- nossa história v6: exatamente o modelo (camadas de imagem) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hist5{position:relative;padding:14cqw 0 12cqw;background:linear-gradient(180deg,#d5ae8f 0,#dccdbf 16cqw,#dccdbf calc(100% - 22cqw),var(--papel) 100%)}
.h5-cena{position:relative;width:100cqw;aspect-ratio:1024/1206}
.h5-cena img{position:absolute;display:block;user-select:none;pointer-events:none}
.h5-fechado{left:0;top:9.78%;width:100%;height:80.43%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  transition:opacity .8s ease .9s,transform 1s cubic-bezier(.3,.7,.2,1) .8s}
.h5-aberto{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .8s ease,transform 1s ease}
.h5-fundo,.h5-frente{left:0;top:0;width:100%;height:100%}
.h5-fundo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%);mask-image:linear-gradient(180deg,transparent 0,#000 5%)}
.h5-frente{z-index:2}
.h5-cartao{position:absolute;z-index:1;left:10.547%;top:12.935%;width:78.516%;height:77.446%;transform:translateY(34%);transition:transform 1.2s cubic-bezier(.45,.05,.2,1) 0s}
.h5-cartao img{position:relative;width:100%;height:100%}
.h5-texto{position:absolute;left:8%;right:8%;top:27.5%;height:41%;display:flex;flex-direction:column;justify-content:center;gap:3.2cqw}
.h5-texto p{margin:0;max-width:none;text-wrap:balance;font:400 3.5cqw/1.55 "Cormorant",serif;color:#6b4b35;opacity:0;transform:translateY(1.4cqw);transition:opacity .4s,transform .4s}
/* aberto */
.h5-cena.abre .h5-fechado{opacity:0;transform:scale(1.05);transition:opacity .7s ease,transform .9s ease}
.h5-cena.abre .h5-aberto{opacity:1;transform:none;transition:opacity .8s ease .25s,transform 1s cubic-bezier(.3,.7,.2,1) .25s}
.h5-cena.abre .h5-cartao{transform:none;transition:transform 1.6s cubic-bezier(.22,.75,.12,1) .85s}
.h5-cena.abre .h5-texto p{opacity:1;transform:none;transition:opacity 1s ease 2.2s,transform 1s ease 2.2s}
.h5-cena.abre .h5-texto p+p{transition-delay:2.55s}
/* pais agora antes da cerimônia: fundo creme liso */
.bencao{background:var(--papel);padding-top:12cqw}
.h5-texto{left:11%;right:11%;top:28%;height:36%;gap:2.4cqw}
.h5-texto p{font-size:3.35cqw;line-height:1.5}

/* ---------- nossa história v7: abertura real (aba gira em 3D, cartão sobe de dentro) ---------- */
.hist5{padding:6cqw 0 4cqw;background:linear-gradient(180deg,#d5ae8f 0,#dac7b6 12cqw,#dac7b6 calc(100% - 14cqw),var(--papel) 100%)}
.r-cena{position:relative;width:100cqw;aspect-ratio:1024/1460;--t:cubic-bezier(.45,.05,.2,1)}
.r-cena img{position:absolute;display:block;user-select:none;pointer-events:none}
.r-interior{inset:0;width:100%;height:100%;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 94%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 94%,transparent 100%)}
.r-frente{inset:0;width:100%;height:100%;z-index:3}
.r-selo{z-index:5;left:40.137%;top:68.42%;width:19.727%;transition:transform .5s ease;filter:drop-shadow(0 .4cqw .5cqw rgba(50,20,8,.25))}
.r-aba{position:absolute;z-index:4;left:4.492%;top:43.15%;width:91.11%;height:37.67%;transform-origin:50% 0;transform-style:preserve-3d;
  transform:perspective(260cqw) rotateX(0deg);transition:transform 1s var(--t) .75s,z-index 0s 1.25s}
.r-aba img{inset:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.r-aba-fora{filter:drop-shadow(0 .5cqw .6cqw rgba(50,20,8,.25))}
.r-aba-dentro{transform:rotateX(180deg)}
.r-clip{position:absolute;z-index:2;left:0;right:0;top:-40%;height:135.9%;overflow:hidden;pointer-events:none}   /* corta o cartão na base do envelope */
.r-cartao{position:absolute;left:15.82%;width:68.36%;top:39.01%;height:auto;aspect-ratio:804/934;
  transform:translateY(56.6%);transition:transform .9s var(--t) 0s;filter:drop-shadow(0 -.4cqw 1cqw rgba(50,20,8,.18))}
.r-cartao img{position:relative;width:100%;height:100%}
/* aberto */
.r-cena.abre .r-selo{animation:soltaSelo .5s ease}
@keyframes soltaSelo{40%{transform:scale(1.06) translateY(-.6cqw)}}
.r-cena.abre .r-aba{transform:perspective(260cqw) rotateX(196deg);z-index:1;transition:transform 1.15s var(--t) .3s,z-index 0s .82s}
.r-cena.abre .r-cartao{transform:none;transition:transform 1.7s cubic-bezier(.22,.75,.12,1) 1.15s}
.r-cena.abre .h5-texto p{opacity:1;transform:none;transition:opacity 1s ease 2.5s,transform 1s ease 2.5s}
.r-cena.abre .h5-texto p+p{transition-delay:2.85s}

/* ajustes: cartão invisível com o envelope fechado; desce um pouco no final (base fica dentro do bolso) */
.r-cartao{top:40.52%;transform:translateY(52.9%);visibility:hidden;transition:transform .9s var(--t) 0s,visibility 0s .95s}
.r-cena.abre .r-cartao{visibility:visible;transition:transform 1.7s cubic-bezier(.22,.75,.12,1) 1.15s,visibility 0s .3s}
/* topo "vidro" como no iPhone: o conteúdo passa desfocado por baixo */
.vidro-topo{position:absolute;z-index:6;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 11cqw);pointer-events:none;opacity:0;transition:opacity .4s;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  background:linear-gradient(180deg,rgba(239,230,220,.55),rgba(239,230,220,.12));
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.aberto .vidro-topo.on{opacity:1}
/* v7b: selo da capa, sem o fundo da foto atrás do envelope, cartão sem sombra extra */
.hist5{background:linear-gradient(180deg,#d5ae8f 0,var(--papel) 18cqw)}
.r-interior{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 2.4cqw 3cqw rgba(90,45,25,.22))}
.r-selo{left:35.25%;top:65.1%;width:29.5%;filter:drop-shadow(0 .5cqw .7cqw rgba(60,25,12,.3))}
.r-cartao{left:16.33%;width:66.15%;aspect-ratio:778/934;filter:none}
.r-cartao{left:15.99%;width:68%;aspect-ratio:800/934}   /* margem igual dos dois lados da moldura */
.h5-texto{top:30.5%;height:31%;gap:2cqw}
.h5-texto p{font-size:3.25cqw;line-height:1.45}
/* moldura dourada redesenhada: perfeitamente reta, mesmo respiro nos quatro lados */
.r-cartao{aspect-ratio:804/934}
.r-cartao::after{content:"";position:absolute;inset:2.9% 3.4%;border:1px solid #a9804f;pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.4)}

/* ---------- terceira parte: foto emoldurada, versículo e contagem (padrão do exemplo) ---------- */
.p3{position:relative;padding:4cqw 6cqw 12cqw;background:var(--papel);overflow:hidden;text-align:center}
.p3-sombra{position:absolute;left:0;bottom:0;width:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.9;transform-origin:50% 100%;animation:p3balanca 9s ease-in-out infinite alternate}
@keyframes p3balanca{to{transform:skewX(1.2deg) translateX(.8cqw)}}
.p3-foto{position:relative;margin:0 0 7cqw;padding:1.6cqw;border-radius:2.6cqw;background:rgba(255,252,247,.55);
  box-shadow:0 0 0 1px rgba(170,140,115,.28),0 1.4cqw 3.4cqw -1.4cqw rgba(90,60,40,.18)}
.p3-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 57%;border-radius:1.6cqw}
.p3-verso{margin:0}
.p3-verso p{font:italic 400 5.4cqw/1.38 "Cormorant",serif;color:#5e4433;margin:0 auto;max-width:none}
.p3-verso cite{display:block;margin-top:3.4cqw;font:500 2.9cqw/1 "Cormorant",serif;font-style:normal;letter-spacing:.32em;text-transform:uppercase;color:#7d6655}
.p3-div{display:flex;align-items:center;justify-content:center;gap:2cqw;margin:7cqw 0 6cqw}
.p3-div i{width:15cqw;height:1px;background:#b39579}
.p3-div svg{width:3.2cqw;fill:#a8835f}
.p3-faltam{font:500 3.2cqw/1 "Cormorant",serif;letter-spacing:.42em;text-transform:uppercase;color:#7d6655;margin-bottom:3.6cqw}
.p3-cont{display:flex;justify-content:center;align-items:flex-start;gap:1.6cqw}
.p3-cont div{min-width:15cqw}
.p3-cont b{display:block;font:500 10.5cqw/1 "Cormorant",serif;color:#6b4628;font-variant-numeric:lining-nums tabular-nums;transition:opacity .35s}
.p3-cont span{display:block;margin-top:2.6cqw;font:500 2.6cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;color:#7d6655}
.p3-cont i{font:400 6cqw/1 "Cormorant",serif;font-style:normal;color:#a8835f;margin-top:1.4cqw}
.p3-ate{margin-top:10cqw;font:400 8.6cqw/1.2 "Assinatura",cursive;color:#8a6440}
.p3-fio{display:block;width:21cqw;height:1px;margin:2.6cqw auto 0;background:#a8835f}
.p3-foto img{object-position:50% 50%}
.p3-sombra{-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}
.p3-cont b{font-size:11.5cqw}
/* transição pêssego -> creme mais curta e sutil */
.hist5{background:linear-gradient(180deg,#d9b89c 0,#e8d8c8 3cqw,var(--papel) 6cqw)}

/* ---------- quarta parte: com a graça de Deus + cerimônia & recepção (sem dress code) ---------- */
.p4{position:relative;padding:6cqw 7cqw 12cqw;background:var(--papel);text-align:center}
.p4-fio-topo{display:block;width:26cqw;height:1px;margin:0 auto 6cqw;background:linear-gradient(90deg,transparent,#b39579,transparent)}
.p4-versal{font:500 3.3cqw/1 "Cormorant",serif;letter-spacing:.42em;text-transform:uppercase;color:#6b5040}
.p4-fio{display:block;width:13cqw;height:1px;margin:4.4cqw auto;background:#a8835f}
.p4-intro p{font:italic 400 4.9cqw/1.4 "Cormorant",serif;color:#5e4433;margin:0 auto;max-width:none}
.p4-intro .p3-div{margin:5.4cqw 0 6cqw}.p4-intro .p3-div svg{fill:#b86a4a}
.p4-cartao{position:relative;margin:0 2cqw;padding:10cqw 7.5cqw 8cqw;background:linear-gradient(180deg,#f9f4ed,#f3ebe1);border-radius:.8cqw;
  box-shadow:0 2.4cqw 5cqw -1.6cqw rgba(90,60,40,.28),0 .2cqw .6cqw rgba(90,60,40,.08)}
.p4-cartao::before{content:"";position:absolute;inset:2.2cqw;border:1px solid #c4a283;pointer-events:none}
.p4-icone{display:block;width:30cqw;margin:0 auto 4cqw;fill:none;stroke:#a65a3d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.p4-icone .d{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.3,1) .3s}
.p4-icone .f{stroke-width:2.2}
.p4-cartao.visto .p4-icone .d{stroke-dashoffset:0}
.p4-cartao.visto .p4-icone .f{transition-delay:1.2s}
.p4-titulo{margin:0;font:500 6.4cqw/1.3 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;color:#4f3a2c}
.p4-cartao > .p4-fio{margin:4.4cqw auto 5cqw}
.p4-info{list-style:none;margin:0 auto;padding:0;display:inline-flex;flex-direction:column;gap:3.4cqw;text-align:left}
.p4-info li{display:flex;align-items:flex-start;gap:4cqw;font:400 4.3cqw/1.3 "Cormorant",serif;color:#4f3a2c}
.p4-info b{font-weight:500}
.p4-info svg{flex:none;width:6.2cqw;height:6.2cqw;margin-top:-.4cqw;fill:none;stroke:#a65a3d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p4-info li:last-child svg{fill:#a65a3d}.p4-info li:last-child svg circle{fill:#f6efe6;stroke:none}
.p4-btn{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%;box-sizing:border-box;margin-top:6cqw;padding:4.2cqw 4cqw;border-radius:10cqw;border:0;
  font:500 3.3cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.p4-btn + .p4-btn{margin-top:3.4cqw}
.p4-btn:active{transform:scale(.97)}
.p4-btn svg{width:5cqw;height:5cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p4-btn.cheio{background:linear-gradient(180deg,#ad5f40,#984c30);color:#fbf1e8;box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(120,50,25,.45)}
.p4-btn.cheio svg{fill:#fbf1e8}.p4-btn.cheio svg circle{fill:#a65a3d;stroke:none}
.p4-btn.claro{background:#ece0d3;color:#8a5a3c}
.p4-linha{display:block;height:1px;margin:7cqw 6cqw 6cqw;background:#c9ad92}
.p4-alegria{margin:0 auto;max-width:none;font:400 6.4cqw/1.35 "Assinatura",cursive;color:#7d5a3c}
.p4-cor{display:flex;align-items:center;justify-content:center;gap:2cqw;margin-top:4.4cqw}
.p4-cor i{width:11cqw;height:1px;background:#b39579}
.p4-cor svg{width:7cqw;fill:none;stroke:#a65a3d;stroke-width:1.4}
.p4-mono{display:flex;align-items:center;justify-content:center;gap:3.4cqw;margin-top:12cqw;font:500 9cqw/1 "Cormorant",serif;color:#7d5a3c}
.p4-mono b{font-weight:500}.p4-mono i{width:1px;height:8cqw;background:#a8835f}
.p4-lema{margin-top:4cqw;font:500 2.7cqw/1 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;color:#7d6655}
.p4-fim{width:18cqw;margin:4.4cqw auto 0}

/* ---------- quarta parte v2: papel real (mesmo do cartão Nossa História), detalhes dourados finos ---------- */
.p4{padding-bottom:16cqw}
.p4-cartao{margin:0 1cqw;padding:13cqw 9cqw 11cqw;border-radius:.4cqw;background:url(img/papel-cartao.webp) center/100% 100% no-repeat;
  box-shadow:0 3cqw 6cqw -2.4cqw rgba(90,55,35,.32),0 .3cqw .8cqw rgba(90,55,35,.1)}
.p4-cartao::before{inset:2.9cqw 3.2cqw;border-color:#a9804f;box-shadow:0 1px 0 rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.p4-icone{width:22cqw;margin-bottom:3cqw;stroke:#9a6a42;stroke-width:1.7}
.p4-icone .f{stroke-width:1.5}
.p4-titulo{font:400 10.6cqw/1.15 "Assinatura",cursive;letter-spacing:0;text-transform:none;color:#8a6440}
.p4-cartao > .p4-fio{width:16cqw;margin:3cqw auto 6cqw;background:#b39579}
.p4-data{font:500 3cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;color:#7d6655}
.p4-data i{font-style:normal;color:#b39579;margin:0 .4em}
.p4-hora{margin:3.4cqw 0 5cqw;font:500 12cqw/1 "Cormorant",serif;color:#6b4628;font-variant-numeric:lining-nums}
.p4-local b{display:block;font:500 5cqw/1.2 "Cormorant",serif;color:#4f3a2c}
.p4-local span{display:block;margin-top:1.6cqw;font:italic 400 4cqw/1.2 "Cormorant",serif;color:#7d6655}
.p4-acoes{display:flex;gap:2.4cqw;margin-top:7cqw}
.p4-btn,.p4-btn + .p4-btn{flex:1;margin:0;padding:3.4cqw 1cqw;gap:1.6cqw;border-radius:10cqw;background:transparent;color:#8a5a3c;
  box-shadow:inset 0 0 0 1px rgba(166,90,61,.55);font-size:2.55cqw;letter-spacing:.2em;white-space:nowrap}
.p4-btn svg{width:3.8cqw;height:3.8cqw;stroke:#a65a3d;fill:none}
.p4-btn svg circle{fill:none}
.p4-btn:active{background:rgba(166,90,61,.08)}
.p4-alegria{margin-top:8cqw;font-size:6cqw}
/* v3: papel sem esticar (textura no topo, mesma cor no resto), data numa linha, botões empilhados */
.p4-cartao{background:#e6dacd url(img/papel-cartao.webp) top center/100% auto no-repeat}
.p4-data{font-size:2.7cqw;letter-spacing:.22em;white-space:nowrap}
.p4-acoes{flex-direction:column;align-items:center;gap:3cqw;margin-top:7cqw}
.p4-btn,.p4-btn + .p4-btn{flex:none;width:62cqw;padding:3.6cqw 2cqw;font-size:2.9cqw;letter-spacing:.28em}
.p4-alegria{margin-top:9cqw}
.p4-cartao{background:#e6dbce url(img/raminho-relevo.webp) 0 0/23% auto no-repeat}
.p4-cartao::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:url(img/raminho-relevo.webp) 0 0/23% auto no-repeat;transform:scale(-1,-1)}
.p4 .p4-alegria{margin:9cqw auto 0}

/* nossa história: texto escrito pela pena (cada linha revelada da esquerda para a direita) */
.r-cena .h5-texto p,.r-cena.abre .h5-texto p{opacity:1;transform:none;transition:none}
.h5-texto .lin{display:block;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p,0%) - 6%),transparent calc(var(--p,0%) + 1%))}
.pena5{position:absolute;left:0;top:0;width:11cqw;height:11cqw;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;transform-origin:6% 94%;will-change:transform}
.pena5.ativa{opacity:1}

/* =====================================================================
   SISTEMA TIPOGRÁFICO ÚNICO (revisão geral)
   Apenas 2 famílias:
     • Caligrafia (Assinatura) — SÓ nos títulos de seção, uma palavra/frase curta
     • Cormorant — todo o resto, em 5 estilos fixos:
         rótulo   500 · 2.8cqw · versal · espaçamento .32em
         texto    400 · 4.2cqw · 1.55
         citação  itálico 400 · 4.8cqw · 1.45
         nome     500 · 5cqw
         número   500 · 11cqw
   Cores: título #8a6440 · texto #5e4433 · rótulo #7d6655 · acento terracota #a65a3d
   ===================================================================== */
.dentro{--t-tit:#8a6440;--t-txt:#5e4433;--t-rot:#7d6655;--t-ace:#a65a3d}
/* títulos (caligrafia) */
.dentro h2,.dentro .p4-titulo,.dentro .obrigado b{font:400 10.5cqw/1.15 "Assinatura",cursive!important;letter-spacing:0!important;text-transform:none!important;color:var(--t-tit)!important;margin:0 0 2cqw}
/* rótulos */
.dentro .versal,.dentro .p3-faltam,.dentro .p3-cont span,.dentro .p3-verso cite,.dentro .p4-versal,.dentro .p4-data,.dentro .p4-btn,
.dentro .dica-manual,.dentro .toque-env,.dentro .item .nome,.dentro .formulario label,.dentro .opcoes span,.dentro .botao,.dentro .rolar{
  font-family:"Cormorant",serif!important;font-weight:500!important;font-style:normal!important;font-size:2.8cqw!important;line-height:1.35!important;
  letter-spacing:.32em!important;text-transform:uppercase!important;color:var(--t-rot)}
.dentro .item .nome{font-size:2.4cqw!important;letter-spacing:.2em!important;color:var(--t-txt)}
.dentro .p3-cont span{margin-top:2.4cqw}
.dentro .botao.cheio{color:#fbf1e8}
/* texto */
.dentro p,.dentro .p4-local span,.dentro .obrigado{font-family:"Cormorant",serif;font-weight:400;font-size:4.2cqw;line-height:1.55;color:var(--t-txt)}
/* citações / frases de destaque (antes em caligrafia, agora legíveis) */
.dentro .p3-verso p,.dentro .p4-intro p,.dentro .p4 .p4-alegria,.dentro .p3-ate,.dentro .rodape .com,.dentro .item .verso{
  font:italic 400 4.8cqw/1.45 "Cormorant",serif!important;letter-spacing:0!important;color:var(--t-txt)}
.dentro .p3-ate{font-size:5.4cqw!important;color:var(--t-tit)!important;margin-top:9cqw}
.dentro .item .verso{font-size:3.2cqw!important;color:#fbf1ea}
.dentro .rodape .com{color:#e8c3ad!important;font-size:5.4cqw!important}
/* nomes / locais */
.dentro .p4-local b,.dentro .pix .chave,.dentro .rodape .nomes-r{font:500 5cqw/1.25 "Cormorant",serif!important;letter-spacing:.06em;color:var(--t-txt)}
.dentro .rodape .nomes-r{letter-spacing:.24em;color:#f3e2d8!important}
/* números */
.dentro .p3-cont b,.dentro .p4-hora{font:500 11cqw/1 "Cormorant",serif!important;color:var(--t-txt)!important;font-variant-numeric:lining-nums tabular-nums}
/* texto do cartão Nossa História (escala do cartão) */
.dentro .h5-texto p{font-size:3.25cqw;line-height:1.45;color:var(--t-txt)}
/* respiros padronizados */
.dentro .p4 .p4-alegria{margin:8cqw auto 0;font-size:4.6cqw!important}
.dentro .envelope .lacre{font-family:"Assinatura",cursive}
.dentro .p4-data{font-size:2.5cqw!important;letter-spacing:.2em!important}
.dentro .item .nome{letter-spacing:.12em!important}
/* título da cerimônia numa linha; corações finais iguais à divisória do topo */
.dentro .p4-titulo{font-size:8.2cqw!important;white-space:nowrap}
.p4 .p4-cor{margin:5cqw 0 0;gap:2cqw}
.p4 .p4-cor i{width:12cqw;height:1px;background:#b39579}
.p4 .p4-cor svg{width:3.2cqw;fill:#a8835f;stroke:none}
.p3-foto{margin-bottom:9cqw}

/* ---------- quinta parte: Celebre Conosco (cartões interativos) ---------- */
.p5{position:relative;padding:14cqw 5cqw 14cqw;background:var(--papel);text-align:center}
.p5-sub{margin:1cqw auto 8cqw;font:500 2.6cqw/1.7 "Cormorant",serif;letter-spacing:.26em;text-transform:uppercase;color:var(--t-rot,#7d6655)}
.p5-grade{display:grid;grid-template-columns:1fr 1fr;gap:3.6cqw}
.c5{position:relative;aspect-ratio:.72;perspective:160cqw;opacity:0;transform:translateY(5cqw);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.c5.visto5{opacity:1;transform:none}
.c5-lados{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.4,.1,.2,1)}
.c5.virado .c5-lados{transform:rotateY(180deg)}
.c5-frente,.c5-verso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:4cqw 3.4cqw 3.6cqw;border-radius:2.6cqw;
  background:linear-gradient(180deg,#efe3d8,#e9d9cc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 0 0 1px rgba(170,135,110,.22),0 2cqw 4cqw -2cqw rgba(90,55,35,.3);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c5-verso{transform:rotateY(180deg);justify-content:center;gap:2.4cqw;background:linear-gradient(180deg,#f3e9df,#ead9cb)}
.c5-ic{width:30cqw;height:21cqw;object-fit:contain;pointer-events:none;filter:drop-shadow(0 .6cqw .6cqw rgba(90,55,35,.12))}
.c5.pula .c5-ic{animation:pula5 .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes pula5{0%{transform:translateY(3cqw) scale(.85);opacity:0}100%{transform:none;opacity:1}}
.c5-frente:active .c5-ic{transform:scale(.96)}
.dentro .c5 h4{margin:1.6cqw 0 1.6cqw;font:500 2.9cqw/1.35 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;color:#6b4628}
.dentro .c5 p{margin:0;max-width:none;font:400 3.15cqw/1.4 "Cormorant",serif;color:var(--t-txt,#5e4433)}
.dentro .c5 p b{font-weight:600;color:#a65a3d}
.c5-seta{margin-top:auto;width:7.6cqw;height:7.6cqw;flex:none;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#b8694a,#8f3f25);box-shadow:0 .8cqw 1.4cqw -.6cqw rgba(110,45,20,.6);transition:transform .25s}
.c5-seta svg{width:4.2cqw;height:4.2cqw;fill:none;stroke:#fbf1e8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c5-seta:active{transform:scale(.9)}
.c5-volta{position:absolute;bottom:3.6cqw;left:50%;translate:-50% 0;margin:0}
.c5-rot{font:500 2.4cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;color:#7d6655}
.c5-grande{font:500 7.4cqw/1 "Cormorant",serif;color:#6b4628;font-variant-numeric:lining-nums}
.c5-tag{font-size:4.6cqw;letter-spacing:.02em}
.c5-acao{margin-top:1cqw;padding:2.6cqw 4cqw;border:0;border-radius:10cqw;background:transparent;box-shadow:inset 0 0 0 1px rgba(166,90,61,.6);
  font:500 2.4cqw/1 "Cormorant",serif;letter-spacing:.24em;text-transform:uppercase;color:#8a5a3c;cursor:pointer}
.c5-acao:active{background:rgba(166,90,61,.1)}
.c5-cores{display:flex;gap:1.8cqw;margin-bottom:1.6cqw}
.c5-cores i{width:6cqw;height:6cqw;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(120,90,70,.25),0 .4cqw .8cqw rgba(90,55,35,.15)}
.c5-cores:first-of-type i{position:relative}
.c5-verso .c5-rot + .c5-cores i::after{content:""}
.dentro .c5 .c5-frase{font:italic 400 3.8cqw/1.4 "Cormorant",serif;color:#5e4433;padding:0 1cqw}
.c5-toque{font:500 2.2cqw/1 "Cormorant",serif;letter-spacing:.28em;text-transform:uppercase;color:#a65a3d;animation:respiraDica 2.4s ease-in-out infinite}
.c5-voa{position:absolute;z-index:5;width:4.4cqw;height:4cqw;pointer-events:none;color:#c9a15a;
  animation:voa5 var(--d,1.4s) cubic-bezier(.2,.6,.3,1) forwards;opacity:0}
.c5-voa::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17C4 12 1 9 1 5.6 1 3 3 1 5.5 1 7.4 1 9 2.1 10 3.7 11 2.1 12.6 1 14.5 1 17 1 19 3 19 5.6 19 9 16 12 10 17z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17C4 12 1 9 1 5.6 1 3 3 1 5.5 1 7.4 1 9 2.1 10 3.7 11 2.1 12.6 1 14.5 1 17 1 19 3 19 5.6 19 9 16 12 10 17z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes voa5{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-34cqw) scale(1.1) rotate(var(--r))}}

.c5{aspect-ratio:.64}
.c5-grande{font-size:6.2cqw;white-space:nowrap}
.c5-tag{font-size:4.4cqw}
.c5-acao{letter-spacing:.16em;white-space:nowrap;padding:2.6cqw 3.4cqw}
.c5-verso{padding-bottom:13cqw}
.dentro .c5 p{font-size:3.05cqw}
/* celebre conosco compacto */
.p5{padding:11cqw 6cqw 11cqw}
.p5-sub{margin:0 auto 6cqw;font-size:2.5cqw;line-height:1.6}
.p5-grade{gap:3cqw}
.c5{aspect-ratio:.86}
.c5-frente,.c5-verso{padding:3cqw 2.6cqw 3cqw;border-radius:2.2cqw}
.c5-verso{padding-bottom:10cqw;gap:1.8cqw}
.c5-ic{width:24cqw;height:15.5cqw}
.dentro .c5 h4{margin:1cqw 0 1cqw;font-size:2.55cqw;letter-spacing:.2em}
.dentro .c5 p{font-size:3.1cqw;line-height:1.35}
.c5-seta{width:6.2cqw;height:6.2cqw}.c5-seta svg{width:3.6cqw;height:3.6cqw}
.c5-volta{bottom:3cqw}
.c5-grande{font-size:5.6cqw}
.dentro .c5 .c5-frase{font-size:3.4cqw}
.c5-tag{font-size:3.9cqw!important}

/* ---------- celebre conosco: inclinação 3D, ilustrações vivas e selinho de visto ---------- */
.p5{--rx:0deg;--ry:0deg;--bx:50%;--px:0cqw;--py:0cqw}
.p5-grade{perspective:220cqw}
.c5.visto5{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:opacity .9s ease,transform .25s ease-out}
.c5-frente::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(110deg,transparent calc(var(--bx) - 22%),rgba(255,250,240,.7) var(--bx),transparent calc(var(--bx) + 22%))}
.c5-palco{position:relative;display:block;cursor:pointer;translate:var(--px) var(--py);transition:translate .2s ease-out;-webkit-tap-highlight-color:transparent}
.c5-palco .c5-ic{display:block;pointer-events:none}
.c5-flash{position:absolute;inset:-10%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle at 42% 52%,#fffaf0 0,rgba(255,250,240,.6) 25%,transparent 60%)}
/* efeitos por ilustração */
.c5-palco.anima[data-ic=relogio] .c5-ic{animation:trim5 .7s linear}
@keyframes trim5{0%,100%{transform:none}10%,30%,50%,70%{transform:rotate(-7deg) translateY(-.4cqw)}20%,40%,60%,80%{transform:rotate(7deg) translateY(-.4cqw)}}
.c5-palco.anima[data-ic=camera] .c5-flash{animation:flash5 .7s ease-out}
.c5-palco.anima[data-ic=camera] .c5-ic{animation:clique5 .35s ease}
@keyframes flash5{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@keyframes clique5{40%{transform:scale(.94)}}
.c5-palco.anima[data-ic=calendario] .c5-ic{animation:folha5 .9s cubic-bezier(.3,.7,.3,1);transform-origin:50% 12%}
@keyframes folha5{0%{transform:perspective(60cqw) rotateX(0)}45%{transform:perspective(60cqw) rotateX(-75deg)}100%{transform:perspective(60cqw) rotateX(0)}}
.c5-palco.anima[data-ic=aliancas] .c5-ic{animation:gira5 1.1s cubic-bezier(.4,.1,.2,1)}
@keyframes gira5{0%{transform:perspective(60cqw) rotateY(0)}100%{transform:perspective(60cqw) rotateY(360deg)}}
.c5-palco.anima[data-ic=coracao] .c5-ic{animation:bate5 .9s ease}
@keyframes bate5{15%{transform:scale(1.14)}30%{transform:scale(.97)}45%{transform:scale(1.1)}70%{transform:none}}
.c5-palco.anima[data-ic=roupa] .c5-ic{animation:balanca5 1.1s ease;transform-origin:50% 0}
@keyframes balanca5{20%{transform:rotate(5deg)}45%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}100%{transform:none}}
/* selinho de visto */
.c5-ok{position:absolute;top:2.2cqw;right:2.2cqw;width:5.4cqw;height:5.4cqw;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#e9cf98,#b48a4a 70%,#8d6a33);box-shadow:0 .4cqw .8cqw rgba(90,60,25,.35),inset 0 0 0 1px rgba(255,240,200,.5);
  opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.c5-ok svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:#fffaf0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.c5.lido:not(.virado) .c5-ok{opacity:1;transform:none;transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.c5.visto5{transform:none}.c5-palco{translate:none}}
/* sem inclinação/flutuação dos cartões */
.c5.visto5{transform:none}
.c5-palco{translate:none}
.c5-frente::after{display:none}

/* ---------- sexta parte: com gratidão (bênção por PIX) ---------- */
.p6{position:relative;padding:12cqw 7cqw 14cqw;background:var(--papel);text-align:center}
.dentro .p6-txt{margin:0 auto 7cqw;font:italic 400 4.3cqw/1.5 "Cormorant",serif;color:var(--t-txt,#5e4433)}
.p6-cartao{margin:0 2cqw;padding:9cqw 7cqw 8cqw;border-radius:2.6cqw;background:linear-gradient(180deg,#f3e9df,#ebdccf);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(170,135,110,.25),0 3cqw 6cqw -3cqw rgba(90,55,35,.35);position:relative}
.p6-cartao::before{content:"";position:absolute;inset:2.4cqw;border:1px solid rgba(169,128,79,.55);border-radius:1.4cqw;pointer-events:none}
.p6-coracao{display:block;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;width:20cqw;height:20cqw;-webkit-tap-highlight-color:transparent;animation:pulsa6 2.4s ease-in-out infinite}
.p6-coracao svg{width:100%;height:100%;fill:none;stroke:#a9804f;stroke-width:1.1;stroke-linejoin:round;filter:drop-shadow(0 .4cqw .6cqw rgba(140,100,50,.25))}
.p6-coracao.bate{animation:bate5 .9s ease}
.p6-coracao.bate svg{fill:rgba(201,161,90,.25)}
@keyframes pulsa6{50%{transform:scale(1.06)}}
.p6-rot{margin-top:4cqw;font:500 2.9cqw/1 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;color:#6b5040}
.p6-fio{display:block;width:12cqw;height:1px;margin:4cqw auto 6cqw;background:#b39579}
.p6-btn{display:inline-flex;align-items:center;justify-content:center;gap:2cqw;width:72%;padding:4cqw 4cqw;border:0;border-radius:10cqw;cursor:pointer;
  background:linear-gradient(180deg,#ad5f40,#984c30);color:#fbf1e8;box-shadow:0 1.4cqw 2.6cqw -1.2cqw rgba(120,50,25,.5);
  font:500 3.4cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.p6-btn svg{width:4.2cqw;height:4.2cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p6-btn:active{transform:scale(.97)}
/* janela */
.p6-janela{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(60,35,22,.35);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.p6-janela.on{opacity:1}
.p6-janela[hidden]{display:none}
.p6-folha{position:relative;width:100%;max-width:520px;box-sizing:border-box;padding:9cqw 8cqw calc(8cqw + env(safe-area-inset-bottom,0px));text-align:center;
  border-radius:6cqw 6cqw 0 0;background:linear-gradient(180deg,#f7efe6,#efe3d7);box-shadow:0 -2cqw 6cqw rgba(60,30,15,.25);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.p6-janela.on .p6-folha{transform:none}
.p6-folha::before{content:"";position:absolute;left:50%;top:2.4cqw;width:12cqw;height:1cqw;translate:-50% 0;border-radius:1cqw;background:rgba(120,90,70,.25)}
.p6-fechar{position:absolute;right:4cqw;top:3.4cqw;width:9cqw;height:9cqw;border:0;background:none;font:300 8cqw/1 "Cormorant",serif;color:#8a6a55;cursor:pointer}
.p6-ic{width:10cqw;height:10cqw;fill:rgba(201,161,90,.2);stroke:#a9804f;stroke-width:1.2}
.dentro .p6-folha h3,.p6-folha h3{margin:1cqw 0 2cqw;font:400 9cqw/1.15 "Assinatura",cursive;color:#8a6440}
.p6-folha .p6-rot{margin-top:0}
.p6-valor{display:flex;align-items:baseline;justify-content:center;gap:2cqw;margin:5cqw 0 3cqw;color:#6b4628}
.p6-valor span{font:500 6cqw/1 "Cormorant",serif;color:#a08060}
.p6-valor input{width:40cqw;border:0;border-bottom:1px solid #cdb79f;background:none;text-align:center;outline:none;padding:0 0 1cqw;
  font:500 13cqw/1 "Cormorant",serif;color:#6b4628;-moz-appearance:textfield;font-variant-numeric:lining-nums}
.p6-valor input::-webkit-outer-spin-button,.p6-valor input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p6-valor input:focus{border-bottom-color:#a65a3d}
.p6-atalhos{display:flex;justify-content:center;gap:2cqw;margin-bottom:6cqw}
.p6-atalhos button{min-width:13cqw;padding:2.6cqw 2cqw;border:0;border-radius:10cqw;background:transparent;box-shadow:inset 0 0 0 1px rgba(166,90,61,.45);
  font:500 3.6cqw/1 "Cormorant",serif;color:#8a5a3c;cursor:pointer;transition:background .2s,color .2s}
.p6-atalhos button.on{background:#a65a3d;color:#fbf1e8;box-shadow:none}
.p6-copiar{width:100%}
.p6-copiar.ok{background:linear-gradient(180deg,#8a9a6a,#6f7f52)}
.p6-passos{margin:4cqw 0 0;font:400 3.3cqw/1.5 "Cormorant",serif;color:#7d6655}
.p6-chave{margin:3cqw 0 0;font:400 3.1cqw/1.5 "Cormorant",serif;color:#7d6655}
.p6-chave b{font-weight:600;color:#a65a3d;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dentro .p6-passos,.dentro .p6-chave{font-size:3.1cqw;line-height:1.5;color:#7d6655;margin:3.4cqw 0 0}
.dentro .p6-chave{margin-top:2cqw}

/* ---------- janela do PIX v2: cartão pequeno e elegante, entrada e virada em 3D ---------- */
.p6-janela{align-items:center;padding:0 9cqw;perspective:180cqw;background:rgba(70,45,30,.28);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9);transition:opacity .45s}
.p6-folha{display:none}
.p6-carta{position:relative;width:100%;max-width:420px;aspect-ratio:.8;transform-style:preserve-3d;
  transform:translateY(8cqw) rotateX(58deg) scale(.86);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s}
.p6-janela.on .p6-carta{transform:none;opacity:1}
.p6-carta.virada{transform:rotateY(180deg)!important}
.p6-face{position:absolute;inset:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8cqw 8cqw 7cqw;text-align:center;
  border-radius:1.6cqw;background:linear-gradient(165deg,#faf5ee 0%,#f2e8dd 100%);
  box-shadow:0 .2cqw 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(170,135,110,.25),0 4cqw 9cqw -3cqw rgba(50,25,12,.45),0 1.4cqw 2.4cqw -1cqw rgba(50,25,12,.2);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.p6-face::before{content:"";position:absolute;inset:2.6cqw;border:1px solid rgba(169,128,79,.55);border-radius:.8cqw;pointer-events:none}
.p6-verso{transform:rotateY(180deg)}
.p6-fechar{position:absolute;right:3.6cqw;top:3.2cqw;width:8cqw;height:8cqw;border:0;background:none;padding:0;font:300 6.4cqw/1 "Cormorant",serif;color:#a08a78;cursor:pointer;z-index:2}
.p6-ic{width:7.4cqw;height:7.4cqw;fill:none;stroke:#a9804f;stroke-width:1.2}
.dentro .p6-face h3{margin:1.6cqw 0 3cqw;font:400 8.4cqw/1.1 "Assinatura",cursive;color:#8a6440}
.p6-valor{display:flex;align-items:baseline;justify-content:center;gap:1.6cqw;margin:0 0 4cqw;perspective:60cqw}
.p6-valor span{font:500 4.6cqw/1 "Cormorant",serif;color:#a08060}
.p6-valor input{width:30cqw;border:0;border-bottom:1px solid rgba(169,128,79,.5);background:none;text-align:center;outline:none;padding:0 0 .6cqw;
  font:500 11.5cqw/1 "Cormorant",serif;color:#5e4433;-moz-appearance:textfield;font-variant-numeric:lining-nums;transform-origin:50% 60%}
.p6-valor input.gira{animation:gira6 .5s cubic-bezier(.3,.8,.3,1)}
@keyframes gira6{0%{transform:rotateX(-80deg);opacity:.2}100%{transform:none;opacity:1}}
.p6-atalhos{display:flex;align-items:center;justify-content:center;gap:2.2cqw;margin:0 0 6cqw}
.p6-atalhos i{width:1px;height:3cqw;background:rgba(169,128,79,.4)}
.p6-atalhos button,.p6-atalhos button.on{min-width:0;padding:1cqw .6cqw;border:0;border-radius:0;background:none;box-shadow:none;
  font:500 3.6cqw/1 "Cormorant",serif;color:#a08a78;cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.p6-atalhos button.on{color:#a65a3d;border-bottom-color:#a65a3d}
.p6-copiar{width:100%;padding:3.6cqw 2cqw;border:0;border-radius:10cqw;cursor:pointer;background:linear-gradient(180deg,#ad5f40,#984c30);color:#fbf1e8;
  font:500 3.1cqw/1 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;box-shadow:0 1.2cqw 2.2cqw -1cqw rgba(120,50,25,.5);transition:transform .2s}
.p6-copiar:active{transform:scale(.97)}
.dentro .p6-face .p6-passos{margin:3.4cqw 0 0;font:italic 400 3.2cqw/1.4 "Cormorant",serif;color:#8a7262}
.dentro .p6-face .p6-passos b{font-style:normal;font-weight:600;color:#7d5a3c}
.p6-ok{width:13cqw;height:13cqw;fill:none;stroke:#a9804f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p6-ok circle{stroke-dasharray:151;stroke-dashoffset:151}.p6-ok path{stroke-dasharray:36;stroke-dashoffset:36}
.p6-carta.virada .p6-ok circle{transition:stroke-dashoffset .8s ease .45s;stroke-dashoffset:0}
.p6-carta.virada .p6-ok path{transition:stroke-dashoffset .5s ease 1.1s;stroke-dashoffset:0}
.dentro .p6-face .p6-msg{margin:0 0 5cqw;font:italic 400 4cqw/1.45 "Cormorant",serif;color:#5e4433}
.dentro .p6-face .p6-chave{margin:0 0 5cqw;font:400 3cqw/1.5 "Cormorant",serif;color:#8a7262;letter-spacing:.04em}
.p6-chave b{font-weight:600;color:#a65a3d;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.p6-voltar{padding:2.8cqw 8cqw;border:0;border-radius:10cqw;background:none;box-shadow:inset 0 0 0 1px rgba(166,90,61,.55);cursor:pointer;
  font:500 2.8cqw/1 "Cormorant",serif;letter-spacing:.3em;text-transform:uppercase;color:#8a5a3c}
/* com gratidão sem quadro: coração, rótulo e botão direto no papel */
.p6-cartao{margin:0;padding:2cqw 0 0;background:none;box-shadow:none;border-radius:0}
.p6-cartao::before{display:none}
.dentro .p6-txt{margin-bottom:0}
.p6-cartao{margin-top:0}
.p6 .p6-txt::after{content:"";display:block;width:12cqw;height:1px;margin:7cqw auto 6cqw;background:#b39579}
.p6-cartao .p6-fio{margin:4cqw auto 5cqw}

/* =====================================================================
   REALINHAMENTO AO SISTEMA TIPOGRÁFICO (partes 5 e 6 + botões)
   Escala única:
     rótulo        500 · 2.8cqw · .32em · versal · --t-rot
     rótulo-cartão 500 · 2.5cqw · .24em · versal · --t-tit   (títulos dentro de cartões pequenos)
     texto         400 · 4.2cqw · 1.55  · --t-txt
     texto-cartão  400 · 3.2cqw · 1.4   · --t-txt
     citação       itálico 400 · 4.8cqw · 1.45 · --t-txt
     botão         500 · 2.9cqw · .3em  · versal
     número        500 · 11cqw  · --t-txt
   ===================================================================== */
/* rótulos */
.dentro .p5-sub,.dentro .p6-rot{font:500 2.8cqw/1.6 "Cormorant",serif!important;letter-spacing:.32em!important;text-transform:uppercase;color:var(--t-rot)!important}
.dentro .c5-rot,.dentro .c5-toque{font:500 2.4cqw/1.3 "Cormorant",serif!important;letter-spacing:.24em!important;text-transform:uppercase}
.dentro .c5-rot{color:var(--t-rot)!important}
.dentro .c5-toque{color:var(--t-ace)!important}
/* títulos dentro de cartões */
.dentro .c5 h4{font:500 2.5cqw/1.35 "Cormorant",serif!important;letter-spacing:.24em!important;color:var(--t-tit)!important}
/* textos */
.dentro .c5 p{font:400 3.2cqw/1.4 "Cormorant",serif!important;color:var(--t-txt)!important}
.dentro .c5 p b{color:var(--t-ace)!important;font-weight:600}
/* citações */
.dentro .p6-txt{font:italic 400 4.8cqw/1.45 "Cormorant",serif!important;color:var(--t-txt)!important}
.dentro .c5 .c5-frase,.dentro .p6-face .p6-msg{font:italic 400 3.8cqw/1.45 "Cormorant",serif!important;color:var(--t-txt)!important}
.dentro .p6-face .p6-passos{font:italic 400 3.2cqw/1.45 "Cormorant",serif!important;color:var(--t-rot)!important}
.dentro .p6-face .p6-passos b{font-style:normal;color:var(--t-txt)!important}
.dentro .p6-face .p6-chave{font:400 3.2cqw/1.5 "Cormorant",serif!important;letter-spacing:0!important;color:var(--t-rot)!important}
/* números */
.dentro .c5-grande{font:500 5.6cqw/1 "Cormorant",serif!important;color:var(--t-txt)!important;font-variant-numeric:lining-nums}
.dentro .c5-tag{font-size:3.9cqw!important;letter-spacing:0!important}
.dentro .p6-valor input{color:var(--t-txt)!important}
.dentro .p6-valor span{color:var(--t-rot)!important}
/* títulos em caligrafia secundários (janela) — mesma cor dos títulos */
.dentro .p6-face h3{color:var(--t-tit)!important}
/* botões: um único estilo de letra (cheio ou contorno) */
.dentro .p4-btn,.dentro .p6-btn,.dentro .p6-copiar,.dentro .p6-voltar,.dentro .c5-acao,.dentro .botao{
  font:500 2.9cqw/1 "Cormorant",serif!important;letter-spacing:.3em!important;text-transform:uppercase!important}
.dentro .c5-acao,.dentro .p6-voltar{font-size:2.5cqw!important;letter-spacing:.22em!important}

/* ---------- sétima parte: confirmar presença com o envelope da Nossa História ---------- */
.p7{position:relative;padding:12cqw 0 14cqw;background:var(--papel);text-align:center}
.p7 > h2{margin-bottom:1.6cqw!important}
.p7-prazo,.p7-dica,.p7-jprazo{font:500 2.8cqw/1.6 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;color:var(--t-rot)}
.p7-prazo{color:var(--t-ace);margin-bottom:2cqw}
.p7-cena{margin-top:-4cqw}
.p7-cena .r-cartao{cursor:pointer}
.p7-cartao-txt{position:absolute;left:8%;right:8%;top:9%;text-align:center}
.p7-tit{font:400 9cqw/1.15 "Assinatura",cursive;color:var(--t-tit)}
.p7-fio{display:block;width:12cqw;height:1px;margin:3cqw auto;background:#b39579}
.p7-data{font:500 3.4cqw/1 "Cormorant",serif;letter-spacing:.3em;color:var(--t-txt)}
/* área de toque sobre o selo, com um anel discreto pulsando */
.p7-selo{position:absolute;z-index:6;left:37%;top:66%;width:26%;aspect-ratio:1;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none}
.p7-selo i{position:absolute;inset:-6%;border-radius:50%;box-shadow:0 0 0 1px rgba(201,161,90,.7);animation:anel7 2.4s ease-out infinite;pointer-events:none}
@keyframes anel7{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.p7-cena.abre .p7-selo{pointer-events:none}.p7-cena.abre .p7-selo i{display:none}
.p7-dica{margin-top:-2cqw;animation:respiraDica 2.6s ease-in-out infinite;transition:opacity .4s}
.p7-dica.some{opacity:0;animation:none}
/* janela (mesmo estilo da do PIX) */
.p7-janela{z-index:41}
.p7-carta{position:relative;width:100%;max-width:440px;max-height:86vh;overflow:auto;box-sizing:border-box;padding:9cqw 7cqw 7cqw;text-align:center;border-radius:1.6cqw;
  background:linear-gradient(165deg,#faf5ee 0%,#f2e8dd 100%);
  box-shadow:0 .2cqw 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(170,135,110,.25),0 4cqw 9cqw -3cqw rgba(50,25,12,.45);
  transform:translateY(10cqw) rotateX(55deg) scale(.88);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s;scrollbar-width:none}
.p7-carta::-webkit-scrollbar{display:none}
.p7-carta::before{content:"";position:absolute;inset:2.6cqw;border:1px solid rgba(169,128,79,.55);border-radius:.8cqw;pointer-events:none}
.p7-janela.on .p7-carta{transform:none;opacity:1}
.dentro .p7-carta h3{margin:0 0 1cqw;font:400 8.4cqw/1.1 "Assinatura",cursive;color:var(--t-tit)}
.p7-jprazo{font-size:2.5cqw;color:var(--t-ace);margin-bottom:2cqw}
.p7-carta .formulario{width:100%;text-align:left}
.p7-carta .formulario label{margin-top:3.6cqw}
.p7-carta .formulario input,.p7-carta .formulario textarea{background:rgba(255,255,255,.55)}
.p7-carta .formulario .botoes{margin-top:6cqw;display:flex;flex-direction:column;gap:2.6cqw}
.p7-carta .formulario .botoes .botao{width:100%;box-sizing:border-box;text-align:center}
.p7-carta .obrigado{text-align:center}
.p7-cartao{background:#ece2d6 url(img/raminho-relevo.webp) 0 0/24% auto no-repeat}
.p7-cartao > img{visibility:hidden}
.p7-cena{margin-top:-10cqw}
.dentro .p7-carta .opcoes span{letter-spacing:.14em!important;font-size:2.5cqw!important;padding:3.2cqw 1cqw}
/* confirmação compacta: cabe na altura visível do iPhone */
.p7-janela{padding:0 6cqw}
.p7-carta{max-height:calc(100dvh - 10cqw);padding:7cqw 6.4cqw 6cqw}
.dentro .p7-carta h3{font-size:7.6cqw}
.p7-jprazo{margin-bottom:1cqw}
.p7-carta .formulario label{margin-top:3cqw}
.p7-carta .formulario input,.p7-carta .formulario textarea{margin-top:1.4cqw;padding:2.2cqw 3cqw;font-size:16px}
.p7-carta .opcoes{margin-top:1.4cqw}
.dentro .p7-carta .opcoes span{padding:2.6cqw 1cqw}
.p7-pessoas{display:flex;align-items:center;justify-content:space-between;margin-top:3.4cqw}
.p7-rotulo{font:500 2.8cqw/1.3 "Cormorant",serif;letter-spacing:.32em;text-transform:uppercase;color:var(--t-rot)}
.p7-passo{display:flex;align-items:center;border:1px solid #d6c2b8;border-radius:10cqw;background:rgba(255,255,255,.55);overflow:hidden}
.p7-passo button{width:8cqw;height:8cqw;border:0;background:none;font:400 5cqw/1 "Cormorant",serif;color:#a65a3d;cursor:pointer;padding:0}
.p7-carta .formulario .p7-passo input{width:8cqw;margin:0;padding:0;border:0;background:none;text-align:center;font:500 16px/1 "Cormorant",serif;color:var(--t-txt);-moz-appearance:textfield}
.p7-passo input::-webkit-outer-spin-button,.p7-passo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p7-carta .formulario .botoes{margin-top:4.4cqw;gap:3cqw}
.p7-whats{display:block;text-align:center;font:italic 400 3.4cqw/1.3 "Cormorant",serif;color:var(--t-rot);text-decoration:none}
.p7-whats b{font-style:normal;font-weight:600;color:#a65a3d;text-decoration:underline;text-underline-offset:3px}

/* ---------- convite para rolar (primeira página) ---------- */
.rolar2{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 4cqh);z-index:4;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;
  padding:2cqw 4cqw;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(3cqw);pointer-events:none;transition:opacity .9s ease,transform .9s ease}
.rolar2.on{opacity:1;transform:none;pointer-events:auto}
.rolar2 span{font:500 2.6cqw/1 "Cormorant",serif;letter-spacing:.42em;text-transform:uppercase;color:#8a4a33}
.rolar2 svg{width:6.4cqw;height:6.4cqw;fill:none;stroke:#8a4a33;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:desce2 1.8s ease-in-out infinite}
@keyframes desce2{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(1.6cqw);opacity:1}}
.abertura .rolar{display:none}
/* ---------- atalho fixo: confirmar presença ---------- */
.atalho-rsvp{position:absolute;z-index:7;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 4cqw);display:flex;align-items:center;gap:2cqw;
  padding:2.8cqw 4.6cqw 2.8cqw 4cqw;border:0;border-radius:10cqw;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:rgba(250,244,236,.82);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(166,90,61,.4),0 1.6cqw 3.4cqw -1.4cqw rgba(90,50,30,.35);
  font:500 2.7cqw/1 "Cormorant",serif;letter-spacing:.26em;text-transform:uppercase;color:#8a5a3c;
  opacity:0;transform:translate(-50%,6cqw);pointer-events:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.atalho-rsvp svg{width:4.4cqw;height:4.4cqw;fill:none;stroke:#a65a3d;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aberto .atalho-rsvp.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.atalho-rsvp:active{transform:translate(-50%,0) scale(.96)}
.rolar2,.atalho-rsvp{white-space:nowrap;width:max-content}
.rolar2 span{letter-spacing:.34em}
.atalho-rsvp{letter-spacing:.2em}
.rolar2{z-index:10;padding:2.2cqw 5cqw 1.6cqw;border-radius:10cqw;background:radial-gradient(closest-side,rgba(240,222,204,.75),rgba(240,222,204,0))}
.rolar2{flex-direction:row;gap:2cqw;padding:2.6cqw 4.4cqw 2.6cqw 5cqw;background:rgba(250,242,233,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(166,90,61,.3),0 1.4cqw 3cqw -1.4cqw rgba(90,50,30,.35)}
.rolar2 svg{width:4.6cqw;height:4.6cqw;stroke-width:1.8}
@keyframes desce2{0%,100%{transform:translateY(-.3cqw);opacity:.6}50%{transform:translateY(.8cqw);opacity:1}}
/* rodapé minimalista: só os nomes e a data */
.dentro .rodape{padding:16cqw 7cqw 18cqw}
.dentro .rodape .nomes-r{margin:0}
.dentro .rodape .data-r{margin-top:3.4cqw;font:500 3cqw/1 "Cormorant",serif;letter-spacing:.42em;color:#d9b6a2}
/* rodapé discreto: só o tamanho das informações */
.dentro .rodape{padding:7cqw 6cqw calc(7cqw + env(safe-area-inset-bottom,0px))}
.dentro .rodape .nomes-r{font-size:3.6cqw!important;letter-spacing:.3em}
.dentro .rodape .data-r{margin-top:2cqw;font-size:2.4cqw;letter-spacing:.36em}
/* primeira página: textos pequenos da arte trocados por texto real, legível */
.tinta .linha-txt{left:50%;translate:-50% 0;width:max-content;white-space:nowrap;
  font:500 3.6cqi/1.2 "Cormorant",serif;letter-spacing:.12em;text-transform:uppercase;color:#7a4c33}
.tinta .linha-hora{font-size:3.3cqi;letter-spacing:.3em;color:#8a5a3e}
.tinta .linha-txt{font-size:2.85cqi;letter-spacing:.07em}
.tinta .linha-hora{font-size:2.9cqi;letter-spacing:.24em}
.tinta .linha-txt:not(.linha-hora){font:italic 500 3.9cqi/1.2 "Cormorant",serif;letter-spacing:.01em;text-transform:none;color:#7a4c33}
.tinta .linha-txt:not(.linha-hora){font-size:3.25cqi}
/* números sempre na altura das maiúsculas (a Cormorant usa números "antigos" por padrão, que somem ao lado de versais) */
.dentro,.dentro *,.tinta .linha-txt{font-variant-numeric:lining-nums!important;font-feature-settings:"lnum" 1}
/* prazo da confirmação maior e mais visível */
.dentro .p7-prazo{font-size:3.4cqw;letter-spacing:.24em;font-weight:600;margin-top:1cqw}
.dentro .p7-jprazo{font-size:2.9cqw;letter-spacing:.2em;font-weight:600}
.dentro .c5 p b{font-size:1.05em}
/* sem zoom por toque duplo (iPhone) — toques rápidos em botões, como o − / + de pessoas, não ampliam a página; a pinça continua funcionando */
html,body,button,a,input,label,.p7-passo,.c5,.p6-atalhos{touch-action:manipulation}
.p7-passo button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* ---------- mensagem depois de confirmar presença ---------- */
.p9-janela{z-index:42}
.p9-carta{position:relative;width:100%;max-width:400px;box-sizing:border-box;padding:10cqw 8cqw 8cqw;text-align:center;border-radius:1.6cqw;
  background:linear-gradient(165deg,#faf5ee 0%,#f2e8dd 100%);
  box-shadow:0 .2cqw 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(170,135,110,.25),0 4cqw 9cqw -3cqw rgba(50,25,12,.45);
  transform:translateY(10cqw) rotateX(55deg) scale(.88);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s}
.p9-carta::before{content:"";position:absolute;inset:2.6cqw;border:1px solid rgba(169,128,79,.55);border-radius:.8cqw;pointer-events:none}
.p9-janela.on .p9-carta{transform:none;opacity:1}
.p9-ic{width:15cqw;height:15cqw;fill:none;stroke:#a9804f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p9-ic circle{stroke-dasharray:151;stroke-dashoffset:151}
.p9-ic .p9-ok{stroke-dasharray:36;stroke-dashoffset:36}
.p9-ic .p9-cor{display:none;fill:rgba(166,90,61,.15);stroke:#a65a3d;stroke-dasharray:60;stroke-dashoffset:60}
.p9-janela.nao .p9-ic .p9-ok{display:none}.p9-janela.nao .p9-ic .p9-cor{display:inline}
.p9-janela.on .p9-ic circle{transition:stroke-dashoffset .8s ease .45s;stroke-dashoffset:0}
.p9-janela.on .p9-ic .p9-ok,.p9-janela.on .p9-ic .p9-cor{transition:stroke-dashoffset .6s ease 1.1s;stroke-dashoffset:0}
.dentro .p9-carta h3{margin:3cqw 0 3cqw;font:400 9cqw/1.15 "Assinatura",cursive;color:var(--t-tit)}
.dentro .p9-carta .p9-msg{margin:0 auto 4cqw;max-width:none;font:italic 400 4.2cqw/1.5 "Cormorant",serif;color:var(--t-txt)}
.p9-data{margin:0 0 6cqw;font:500 2.8cqw/1 "Cormorant",serif;letter-spacing:.32em;color:var(--t-ace)}
.p9-data[hidden]{display:none}
.p9-janela.nao .p9-carta h3{margin-bottom:3cqw}
.p7-dica.feito{animation:none;opacity:1;color:#6f7f52;font-weight:600}