/* =====================================================================
   Convite Ismael & Janaina (versão nova, feita para celular)
   ===================================================================== */
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Assinatura";src:url(fonts/mrs-saint-delafield-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --papel:#efe6dc; --papel-2:#f8f2ea; --campo:#fffcf8;
  --tinta:#4b3427; --texto:#5e4636; --suave:#7d6655; --rot:#8b6a52;
  --terra:#8c4a30; --terra-esc:#6e3526; --ouro:#a8794a;
  --borda:rgba(140,100,70,.24);
  --serif:"Cormorant",Georgia,serif; --script:"Assinatura",cursive; --sans:"Jost",system-ui,sans-serif;
  --sai:cubic-bezier(.22,1,.36,1);        /* entradas: começa rápido e pousa devagar */
  --move:cubic-bezier(.65,0,.35,1);       /* movimento na tela: acelera e freia */
}
*{box-sizing:border-box;margin:0;padding:0}
/* números sempre alinhados (o Cormorant usa números "antigos", que fazem 10 parecer IO); o atalho font zera isso, por isso o !important */
*,*::before,*::after{font-variant-numeric:lining-nums!important}
.numeros b{font-variant-numeric:lining-nums tabular-nums!important}
html{background:var(--papel);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.fechado,html.fechado body{overflow:hidden;height:100%}
body{color:var(--texto);font:400 19px/1.6 var(--serif);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{max-width:520px;margin:0 auto;overflow-x:clip}

/* ---------------- abertura ---------------- */
.intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;touch-action:none;
  --w:min(86vw,380px,calc((100svh - 150px) / 1.62)); --h:calc(var(--w) * .8253);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.intro::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 75% at 50% 52%,#f7f0e7 0%,#efe6dc 55%,#e5d7c8 100%);transition:opacity .9s ease .1s}
.intro-topo{text-align:center;margin-bottom:calc(var(--w) * .2)}
.intro-nomes{font:500 clamp(25px,7.4vw,31px)/1.2 var(--serif);letter-spacing:.16em;padding-left:.16em;text-transform:uppercase;color:var(--terra-esc)}
.intro-nomes span{display:block;font:italic 400 1.15em/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ouro);margin:.06em 0}
.intro-data{font:500 11px/1 var(--sans);letter-spacing:.34em;padding-left:.34em;color:var(--rot);margin-top:14px}
.intro-dica{font:500 10.5px/1 var(--sans);letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;color:var(--rot);margin-top:calc(var(--w) * .13)}
/* tudo chega devagar quando as imagens estão prontas */
.intro-topo,.env,.intro-dica{opacity:0;transform:translateY(12px)}
.intro.pronta .intro-topo,.intro.pronta .env,.intro.pronta .intro-dica{opacity:1;transform:none;transition:opacity 1s var(--sai),transform 1.2s var(--sai)}
.intro.pronta .env{transition-delay:.12s}
.intro.pronta .intro-dica{transition-delay:.5s;animation:respira 2.8s ease-in-out 1.6s infinite}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.45}}

/* envelope: o corpo (933 x 770) com a aba presa na borda de cima */
.env{position:relative;width:var(--w);height:var(--h);cursor:pointer}
.env-interior,.env-frente{position:absolute;inset:0;width:100%;height:100%}
.env-interior{z-index:1;filter:drop-shadow(0 calc(var(--w) * .03) calc(var(--w) * .04) rgba(90,45,25,.22))}
.env-frente{z-index:3}
.env-bolso{position:absolute;left:0;right:0;bottom:0;top:calc(var(--h) * -1.6);z-index:2;overflow:hidden;pointer-events:none}
.voo{position:absolute;left:12.7%;width:74.6%;top:calc(var(--h) * 1.63)}
.carta{position:relative;aspect-ratio:753/1208;transform:translateY(0)}
.carta img{position:relative;width:100%;height:100%;border-radius:3px}
.carta::before{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:0 14px 34px -10px rgba(70,35,15,.38);opacity:0;transition:opacity .6s ease}
.env-aba{position:absolute;left:0;top:0;width:100%;height:71.43%;z-index:5;transform-origin:50% 0;transform:perspective(calc(var(--w) * 3.2)) rotateX(0deg);transform-style:preserve-3d}
.aba-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.aba-face>img{width:100%;height:100%}
.aba-fora>img{filter:drop-shadow(0 calc(var(--w) * .008) calc(var(--w) * .012) rgba(50,20,8,.28))}
.aba-fora{transform:rotateX(0deg)}
.aba-dentro{transform:rotateX(180deg);visibility:hidden}
/* a troca de face também é feita no tempo (aos 90 graus), para não depender só do backface do navegador */
.intro.abrindo .aba-fora{visibility:hidden;transition:visibility 0s linear .64s}
.intro.abrindo .aba-dentro{visibility:visible;transition:visibility 0s linear .64s}
/* selo: duas metades com a mesma rachadura (fechado, parece um só) */
.selo-cima,.selo-baixo{position:absolute;left:33.76%;width:32.37%;aspect-ratio:1;filter:drop-shadow(0 calc(var(--w) * .006) calc(var(--w) * .01) rgba(60,25,12,.32))}
.selo-cima img,.selo-baixo img{width:100%;height:100%}
.selo-cima{top:58.27%;clip-path:polygon(-10% -10%,110% -10%,110% 71%,92% 74.5%,80% 70.5%,68% 75%,56% 71.5%,44% 75.5%,32% 71%,20% 74.5%,8% 70.5%,-10% 73%)}
.selo-baixo{top:41.62%;z-index:6;clip-path:polygon(-10% 73%,8% 70.5%,20% 74.5%,32% 71%,44% 75.5%,56% 71.5%,68% 75%,80% 70.5%,92% 74.5%,110% 71%,110% 110%,-10% 110%)}
.selo-toque{position:absolute;z-index:7;left:28%;width:44%;top:36%;aspect-ratio:1;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.selo-toque:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}
.selo-cima,.selo-baixo,.env-aba{transition:transform .18s var(--sai)}
.intro.aperta .selo-cima,.intro.aperta .selo-baixo{transform:scale(.965)}

/* 1) toque: textos somem, o selo trinca e a aba abre */
.intro.abrindo .intro-topo,.intro.abrindo .intro-dica{opacity:0;transform:translateY(-8px);animation:none;transition:opacity .45s ease,transform .6s var(--sai)}
.intro.abrindo .selo-cima{transform:rotate(1.2deg) translateY(-1.5%);transition:transform .3s var(--sai)}
.intro.abrindo .selo-baixo{transform:rotate(-2deg) translateY(2.5%);transition:transform .35s var(--sai)}
.intro.abrindo .env-aba{transform:perspective(calc(var(--w) * 3.2)) rotateX(180deg);z-index:1;transition:transform 1.05s cubic-bezier(.45,.05,.2,1) .26s,z-index 0s linear .64s}
/* 2) o cartão sai do envelope */
.intro.sobe .carta{transform:translateY(-60%);transition:transform 1.2s var(--sai)}
.intro.sobe .carta::before{opacity:1;transition-delay:.2s}
/* 3) o envelope desce e some; o cartão cresce até virar a primeira página */
.intro.solta .env-bolso{overflow:visible}
.intro.solta::before{opacity:0}
.intro.solta .env-interior,.intro.solta .env-frente,.intro.solta .selo-baixo{transform:translateY(100svh);transition:transform .85s cubic-bezier(.55,0,.8,.3)}
.intro.solta .env-aba{transform:translateY(100svh) perspective(calc(var(--w) * 3.2)) rotateX(180deg);transition:transform .85s cubic-bezier(.55,0,.8,.3)}
.intro.solta .carta::before{opacity:0;transition-delay:.45s}
.intro.solta .carta img{border-radius:0;transition:border-radius .8s ease}
/* sem animação (Reduzir movimento): o envelope só se dissolve */
.intro.some{opacity:0;transition:opacity .45s ease}

/* ---------------- 1. capa ---------------- */
.capa{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 10px) 0 22px;background:linear-gradient(180deg,#d8b497 0%,#d5af90 50%,#d2ab8a 100%)}
.capa-arte{position:relative;width:min(100%,calc((100svh - 104px) * 753 / 1208));container-type:inline-size}
.capa-arte>img{width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%)}
html.fechado .capa-arte>img{opacity:0}
.capa-texto{position:absolute;top:0;bottom:0;left:-1.4%;right:1.4%}
.capa-texto>*{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%);text-align:center;margin:0 auto}
.capa-texto>img{width:var(--w);left:0;right:0}
.c-convite{font:italic 400 4.3cqw/1.2 var(--serif);color:#744630}
.c-nome{font:500 8.6cqw/1 var(--serif);letter-spacing:.15em;padding-left:.15em;text-transform:uppercase;color:#6a3222}
.c-data{font:500 4.7cqw/1 var(--serif);letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;color:#723b27}
.c-data i{font-style:normal;color:#b07a5e;margin:0 .15em}
.c-hora{font:500 2.75cqw/1 var(--sans);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#744630}
.c-local{font:italic 400 3.4cqw/1.25 var(--serif);color:#6a3e28;left:-1.6%!important;right:1.6%!important}
/* as linhas da capa aparecem uma a uma depois que o cartão pousa */
html.fechado .capa-texto>*{opacity:0;filter:blur(3px);transform:translateY(-50%) translateY(.9cqw)}
html.aberto .capa-texto>*{transition:opacity 1s var(--sai) calc(var(--k,0) * 95ms),filter 1s var(--sai) calc(var(--k,0) * 95ms),transform 1.2s var(--sai) calc(var(--k,0) * 95ms)}
.capa-acoes{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
html.fechado .capa-acoes{opacity:0;transform:translateY(8px)}
html.aberto .capa-acoes{transition:opacity 1s var(--sai) 1.2s,transform 1.2s var(--sai) 1.2s}
.capa-link{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(106,50,34,.32);background:rgba(250,240,230,.28);
  font:500 10.5px/1 var(--sans);letter-spacing:.2em;padding-left:calc(22px + .2em);text-transform:uppercase;color:var(--terra-esc);text-decoration:none;transition:transform .16s ease,background-color .2s}
.capa-link:active{transform:scale(.97);background:rgba(250,240,230,.45)}
.capa-seta{display:grid;place-items:center;width:44px;height:40px;color:var(--terra-esc)}
.capa-seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:desce 2.6s ease-in-out infinite}
@keyframes desce{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}

/* ---------------- aparecer ao rolar (desce: aparece; sobe: volta) ---------------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .7s var(--sai)}
.rv.on{opacity:1;transform:none;transition:opacity 1s var(--sai) calc(var(--i,0) * 110ms),transform 1.2s var(--sai) calc(var(--i,0) * 110ms)}

/* textos comuns */
.rotulo{font:500 11px/1.3 var(--sans);letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;color:var(--rot)}
.titulo-script{font:400 clamp(44px,13vw,56px)/1.1 var(--script);color:var(--terra-esc);padding:0 .15em}
.sub-titulo,.graca{font:italic 400 20px/1.5 var(--serif);color:var(--suave);max-width:330px;margin:6px auto 0}
.cartao{background:var(--papel-2);border-radius:20px;box-shadow:0 0 0 1px rgba(140,100,70,.1),0 22px 44px -28px rgba(90,50,30,.45),inset 0 1px 0 rgba(255,255,255,.7);max-width:440px;margin:0 auto}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 18px;border-radius:999px;cursor:pointer;text-decoration:none;
  font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;-webkit-appearance:none;appearance:none;transition:transform .16s ease,background-color .2s,box-shadow .2s}
.botao:active{transform:scale(.97)}
.botao svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.botao.contorno{border:1px solid rgba(140,74,48,.42);color:var(--terra);background:transparent}
.botao.contorno:active{background:rgba(140,74,48,.06)}
.botao.cheio{width:100%;border:0;background:var(--terra);color:#fbf3ea;box-shadow:0 10px 22px -12px rgba(110,53,38,.7)}
.botao.cheio:disabled{opacity:.7}
.link{background:none;border:0;cursor:pointer;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terra);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(140,74,48,.4);padding:14px 4px}

/* ---------------- 2. nossa história ---------------- */
.historia{padding:64px 0 40px;background:linear-gradient(180deg,#d2ab8a 0,#e2cbb6 80px,var(--papel) 170px)}
.cartao-hist{position:relative;width:min(88%,410px);margin:0 auto;border-radius:3px;overflow:hidden;
  box-shadow:0 26px 50px -26px rgba(90,50,30,.55),0 2px 8px rgba(90,50,30,.08)}
.cartao-hist img{width:100%;height:auto}
.hist-texto{position:absolute;left:13%;right:13%;top:23.5%;bottom:25%;display:flex;flex-direction:column;justify-content:center;gap:.8em;text-align:center;
  font:italic 400 clamp(15px,4.25vw,18.5px)/1.5 var(--serif);color:#5e4433}

/* ---------------- 3. foto e contagem ---------------- */
.foto{position:relative;padding:44px 22px 60px;text-align:center;overflow:hidden}
.folhas{position:absolute;left:0;bottom:0;width:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.55;filter:sepia(.55) saturate(.8)}
.arco{position:relative;width:min(86%,380px);aspect-ratio:4/3.3;margin:0 auto 34px;border-radius:50% 50% 6px 6px/42% 42% 6px 6px;overflow:hidden;
  box-shadow:0 28px 46px -26px rgba(90,50,30,.6)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:52% 40%;transform:scale(1.08);transition:transform 1.8s var(--sai)}
.arco.on img{transform:none}
.arco::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,246,232,.75);border-radius:inherit;pointer-events:none}
.numeros{display:flex;justify-content:center;margin:16px auto 12px}
.numeros div{min-width:70px;padding:2px 8px}
.numeros div+div{border-left:1px solid var(--borda)}
.numeros b{display:block;font:500 42px/1 var(--serif);color:var(--tinta);font-variant-numeric:lining-nums tabular-nums}
.numeros span{display:block;margin-top:9px;font:400 10px/1 var(--sans);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:var(--suave)}
.ate{font:italic 400 20px/1.4 var(--serif);color:var(--suave)}
.dia-hoje,.dia-depois{display:none}
.foto.hoje .contagem,.foto.depois .contagem,.foto.depois .dia-hoje{display:none}
.foto.hoje .dia-hoje,.foto.depois .dia-depois{display:block}
.foto.depois.hoje .dia-hoje{display:none}
.grande{font:500 30px/1.2 var(--serif);color:var(--tinta)}
.sub{font:italic 400 19px/1.45 var(--serif);color:var(--suave);margin-top:6px}

/* ---------------- 4. cerimônia ---------------- */
.cerimonia{padding:28px 18px 60px;text-align:center}
.cerimonia .graca{margin-bottom:30px;color:var(--texto)}
.local{padding:34px 22px 28px}
.palmeiras{display:block;width:86px;margin:0 auto 14px;fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.titulo{font:500 27px/1.15 var(--serif);color:var(--tinta)}
.quando{font:500 11px/1.4 var(--sans);letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;color:var(--rot);margin-top:14px}
.hora{font:500 48px/1 var(--serif);color:var(--terra);margin:12px 0 10px}
.onde{font:italic 400 19px/1.35 var(--serif);color:var(--suave)}
.onde b{display:block;font:500 22px/1.3 var(--serif);font-style:normal;color:var(--tinta)}
.botoes-2{display:grid;gap:10px;max-width:300px;margin:24px auto 22px}
.alegria{font:italic 400 18.5px/1.45 var(--serif);color:var(--suave);max-width:280px;margin:0 auto}

/* ---------------- 5. celebre conosco ---------------- */
.detalhes{padding:20px 16px 60px;text-align:center}
.detalhes .sub-titulo{margin-bottom:26px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px;margin:0 auto}
.item{display:flex;flex-direction:column;align-items:center;padding:20px 12px 18px;border-radius:18px;background:var(--papel-2);
  box-shadow:0 0 0 1px rgba(140,100,70,.1),0 16px 30px -24px rgba(90,50,30,.5),inset 0 1px 0 rgba(255,255,255,.7)}
.item img{height:52px;width:auto;margin-bottom:12px}
.item h3{font:500 10.5px/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);margin-bottom:6px;max-width:130px}
.item p{font:400 17px/1.4 var(--serif);color:var(--texto)}
.item b{font-weight:500;color:var(--tinta)}
.item-acao{margin-top:auto;padding:12px 4px 2px;background:none;border:0;cursor:pointer;text-decoration:none;
  font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.item-acao::after{content:"";display:block;height:1px;margin-top:5px;background:rgba(140,74,48,.4)}
.item p+.item-acao,.item .cores+.item-acao{margin-top:10px}
.item [data-copia]{font:italic 400 16.5px/1 var(--serif);letter-spacing:0;text-transform:none}
.cores{display:flex;gap:7px;margin-top:10px}
.cores i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.08),inset 0 1px 1px rgba(255,255,255,.25)}

/* ---------------- 6. confirmar presença ---------------- */
.confirmar{padding:20px 16px 60px;text-align:center}
.prazo{font:500 11px/1.3 var(--sans);letter-spacing:.24em;padding-left:.24em;text-transform:uppercase;color:var(--rot);margin-top:8px}
.rsvp{position:relative;margin-top:58px;padding:52px 22px 24px;text-align:left}
.rsvp-selo{position:absolute;top:-40px;left:50%;width:84px;transform:translateX(-50%);filter:drop-shadow(0 6px 8px rgba(60,25,12,.28))}
.robo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo{display:block;border:0;margin:0 0 20px;min-width:0}
.campo>span,.campo legend,#pessoas-rot{display:block;margin-bottom:10px;font:500 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--rot)}
.campo em{font-style:normal;letter-spacing:.08em;text-transform:none;color:var(--suave)}
.campo input,.campo textarea{display:block;width:100%;padding:13px 15px;border:1px solid var(--borda);border-radius:14px;background:var(--campo);
  font:400 18px/1.35 var(--serif);color:var(--tinta);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.campo textarea{resize:vertical;min-height:84px}
.campo input::placeholder,.campo textarea::placeholder{color:#a8927f;font-style:italic}
.campo input:focus,.campo textarea:focus{outline:none;border-color:rgba(140,74,48,.6);box-shadow:0 0 0 4px rgba(166,90,61,.12)}
.escolha{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.escolha label{position:relative;display:block}
.escolha input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.escolha span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 8px;border-radius:14px;border:1px solid var(--borda);background:var(--campo);
  text-align:center;font:500 17px/1.2 var(--serif);color:var(--texto);transition:background-color .2s,border-color .2s,color .2s}
.escolha input:checked+span{background:var(--terra);border-color:var(--terra);color:#fbf3ea}
.escolha input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
.pessoas{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pessoas #pessoas-rot{margin:0}
.rsvp.nao .pessoas{display:none}
.passo{display:flex;align-items:center;border:1px solid var(--borda);border-radius:999px;background:var(--campo)}
.passo button{width:46px;height:46px;border:0;background:none;cursor:pointer;font:400 24px/1 var(--serif);color:var(--terra)}
.passo button:active{transform:scale(.92)}
.passo input{width:34px;padding:0;border:0;background:none;text-align:center;font:500 20px/1 var(--serif);color:var(--tinta);-moz-appearance:textfield;appearance:textfield}
.passo input::-webkit-outer-spin-button,.passo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.passo input:focus{outline:none}
.erro{margin-top:12px;text-align:center;font:400 14.5px/1.45 var(--sans);color:#9c3a28}
.whats{display:block;margin-top:14px;padding:8px;text-align:center;text-decoration:none;font:italic 400 17.5px/1.3 var(--serif);color:var(--suave)}
.whats b{font-style:normal;font-weight:500;color:var(--terra)}
.feito{text-align:center;padding:4px 4px 0;outline:none}
.feito svg{width:54px;height:54px;margin:0 auto;fill:none;stroke:var(--terra);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feito path{stroke-dasharray:40;stroke-dashoffset:40}
.feito.on path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--sai) .2s}
.feito h3{font:500 27px/1.2 var(--serif);color:var(--tinta);margin:14px 0 8px}
.feito p{font:italic 400 18.5px/1.5 var(--serif);color:var(--texto)}
.feito .feito-data{font:500 11px/1 var(--sans);font-style:normal;letter-spacing:.24em;color:var(--rot);margin-top:16px}
.feito .link{margin-top:10px}
.encerrado{display:none;text-align:center}
.encerrado p{font:italic 400 19px/1.5 var(--serif);margin-bottom:18px}
.confirmar.fechou form,.confirmar.fechou .feito{display:none!important}
.confirmar.fechou .encerrado{display:block}

/* ---------------- 7. com gratidão ---------------- */
.gratidao{padding:20px 16px 64px;text-align:center}
.pix{margin-top:28px;padding:30px 22px 22px}
.coracao{display:block;width:30px;height:30px;margin:0 auto 10px;fill:none;stroke:var(--terra);stroke-width:1.3}
.valor{display:flex;align-items:baseline;justify-content:center;gap:8px;width:210px;margin:14px auto 14px;padding-bottom:4px;border-bottom:1px solid var(--borda)}
.valor span{font:500 22px/1 var(--serif);color:var(--suave)}
.valor input{width:1.3em;min-width:.8em;max-width:5.5em;border:0;background:none;padding:0;text-align:left;font:500 46px/1.15 var(--serif);color:var(--tinta)}
.valor input:focus{outline:none}
.valor:focus-within{border-color:rgba(140,74,48,.6)}
.atalhos{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.atalhos button{min-width:52px;height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--borda);background:transparent;cursor:pointer;font:500 17px/1 var(--serif);color:var(--texto);transition:background-color .2s,color .2s,border-color .2s,transform .16s}
.atalhos button:active{transform:scale(.95)}
.atalhos button.on{background:var(--tinta);border-color:var(--tinta);color:#fbf3ea}
.pix-msg{margin-top:14px;font:400 14px/1.5 var(--sans);color:var(--suave)}
.pix-msg b{font-weight:500;color:var(--texto)}
.pix-msg.ok{color:var(--terra)}
.chave{margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--suave)}
.chave .link{font:500 13px/1 var(--sans);letter-spacing:.04em;text-transform:none;padding:12px 2px}

/* ---------------- 8. rodapé ---------------- */
.rodape{padding:36px 20px calc(54px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(180deg,var(--papel),#e6d9cb)}
.rodape img{width:72px;margin:0 auto 8px;filter:drop-shadow(0 4px 6px rgba(60,25,12,.22))}
.rodape .nomes{font:500 24px/1.3 var(--serif);letter-spacing:.16em;padding-left:.16em;text-transform:uppercase;color:var(--terra-esc);margin-top:6px}
.rodape .nomes span{font:italic 400 1.05em var(--serif);letter-spacing:0;text-transform:none;color:var(--ouro);margin:0 .1em}
.rodape .data{font:500 11px/1 var(--sans);letter-spacing:.3em;padding-left:.3em;color:var(--rot);margin-top:8px}
.rodape .fim{font:italic 400 19px/1.4 var(--serif);color:var(--suave);margin-top:16px}

/* ---------------- Reduzir movimento ---------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.rv.on{transform:none!important;transition:opacity .4s ease!important}
  .arco img{transform:none!important}
  .intro-dica,.capa-seta svg{animation:none!important}
  html .capa-texto>*{filter:none!important;transform:translateY(-50%)!important;transition:opacity .4s ease!important}
}