@font-face{font-family:GV;src:url(/fonts/greatvibes.woff2) format('woff2');font-display:swap}
@font-face{font-family:Cinzel;src:url(/fonts/cinzel.woff) format('woff');font-display:swap}
@font-face{font-family:Corm;src:url(/fonts/cormorant.woff) format('woff');font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--c:#c9a14a;--c1:#e9d39b;--c2:#8a6a24;--cd:#5c4514;--bg:#fbf6ec;--ink:#2b2420;--st1:#2a2218;--st2:#5a4a2c;--wax:#7a1f24}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.fechado{overflow:hidden;height:100%}
#palco{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
 background:radial-gradient(120% 80% at 50% 38%,var(--st2),var(--st1) 70%);transition:opacity .9s ease .1s;overflow:hidden}
#palco:before{content:"";position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 82% 12%,#fff7 50%,transparent 51%),radial-gradient(2px 2px at 70% 78%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 82%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 50% 8%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90% 50%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 6% 52%,#fff8 50%,transparent 51%);animation:pisca 4s ease-in-out infinite alternate;pointer-events:none}
@keyframes pisca{to{opacity:.35}}
#palco.sai{opacity:0;pointer-events:none}
.env{position:relative;width:min(84vw,370px);aspect-ratio:1.45;perspective:1400px;cursor:pointer;outline:none;animation:flutua 3.2s ease-in-out infinite;margin-top:40px}
@keyframes flutua{50%{transform:translateY(-8px) rotate(-.6deg)}}
.aberto .env{animation:none}
.e-back{position:absolute;inset:0;border-radius:8px;background:linear-gradient(160deg,var(--c2),var(--cd));box-shadow:0 26px 50px rgba(0,0,0,.45)}
.e-letter{position:absolute;left:6%;right:6%;top:6%;height:88%;z-index:2;background:#fffdf7;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform 1.1s cubic-bezier(.3,1.25,.5,1) .75s}
.e-art{position:absolute;inset:6px;border-radius:4px;background:#f3ead7 center top/cover no-repeat}
.e-front{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:8px;overflow:hidden}
.e-front svg{width:100%;height:100%;display:block}.e-front .l,.e-front .r{fill:var(--c);stroke:rgba(0,0,0,.10);stroke-width:.4}.e-front .b{fill:var(--cb);stroke:rgba(0,0,0,.12);stroke-width:.4}
.e-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;transform-origin:top;background:linear-gradient(180deg,var(--c1),var(--c));clip-path:polygon(0 0,100% 0,50% 100%);
 transition:transform .85s cubic-bezier(.6,0,.3,1),z-index 0s .42s;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.e-seal{position:absolute;left:50%;top:60%;width:70px;height:70px;margin:-35px 0 0 -35px;z-index:5;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;
 background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--wax) 60%,#fff),var(--wax) 55%,color-mix(in srgb,var(--wax) 70%,#000));
 box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 0 5px rgba(0,0,0,.12),inset 0 0 0 7px rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:transform .5s,opacity .5s}
.e-seal span{font:400 40px/1 GV,cursive;color:#f3dc9b;text-shadow:0 1px 0 rgba(0,0,0,.4),0 -1px 0 rgba(255,255,255,.2);margin-top:4px}
.toque{margin:22px 0 0;font:600 15px Cinzel,serif;letter-spacing:.22em;text-transform:uppercase;color:#f6e7bf;animation:respira 1.8s ease-in-out infinite;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.para{margin:0;font:22px Corm,Georgia,serif;font-style:italic;color:#f1e6cfcc}
@keyframes respira{50%{opacity:.45}}
.aberto .toque,.aberto .para{opacity:0;transition:opacity .3s;animation:none}
.aberto .e-flap{transform:rotateX(180deg);z-index:1}
.aberto .e-seal{transform:scale(1.25);opacity:0}
.aberto .e-letter{transform:translateY(-62%)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
#conv{position:relative;z-index:1;min-height:100vh;padding:0 0 30px;background:radial-gradient(90% 40% at 50% 0,color-mix(in srgb,var(--c) 22%,transparent),transparent),var(--bg)}
#conv.surge{animation:surge 1.1s cubic-bezier(.2,.9,.3,1) both}
@keyframes surge{from{opacity:0;transform:translateY(18vh) scale(.62)}to{opacity:1;transform:none}}
.arte{display:block;width:100%;max-width:620px;margin:0 auto;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.sem-arte{max-width:620px;margin:0 auto;padding:60px 20px;text-align:center;background:linear-gradient(var(--c1),var(--bg))}
.sem-arte h1{font:400 64px/1 GV,cursive;color:var(--cd);margin:0}
.wrap{max-width:560px;margin:0 auto;padding:0 18px}
.card{background:#fffdf8;border:1px solid color-mix(in srgb,var(--c) 45%,#fff);border-radius:20px;padding:22px 18px;margin:18px 0 16px;position:relative;box-shadow:0 12px 30px rgba(60,40,10,.10);text-align:center}
.card h2{font:400 46px/1.05 GV,cursive;color:var(--cd);margin:4px 0 2px}
.card .tit{font:600 14px Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c2);margin:0}
.card .msg{font:20px/1.35 Corm,Georgia,serif;font-style:italic;margin:10px 0 0}
.info{font:21px/1.35 Corm,Georgia,serif;margin:14px 0 0}.info b{font-weight:700}
.info .q:first-letter{text-transform:uppercase}
.cd{display:flex;justify-content:center;gap:8px;margin:18px 0 4px}
.cd div{min-width:64px;padding:10px 4px 8px;border-radius:14px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 14%,#fff));border:1px solid color-mix(in srgb,var(--c) 40%,#fff)}
.cd b{display:block;font:700 26px/1 Cinzel,serif;color:var(--cd)}.cd small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6d5e4c}
.cdt{font:600 12px Cinzel,serif;letter-spacing:.18em;color:var(--c2);margin-top:18px;text-transform:uppercase}
.btns{display:grid;gap:10px;margin:18px 0 6px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:12px 18px;border-radius:999px;border:1.5px solid var(--btn);background:#fff;color:var(--btn);font:600 16px system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn svg{width:22px;height:22px;flex:none}
.btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--btn) 85%,#fff),var(--btn));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--btn) 35%,transparent)}
.btn:active{transform:scale(.98)}
.painel{display:none;text-align:left;margin:4px 0 8px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--c) 10%,#fff);border:1px solid color-mix(in srgb,var(--c) 35%,#fff)}
.painel.on{display:block;animation:abre .35s ease}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}}
.painel label{display:block;font-weight:600;font-size:15px;margin:6px 0 6px}
.painel input[type=text]{width:100%;font:17px system-ui;padding:13px 14px;border-radius:12px;border:1.5px solid #d8cbb2;background:#fff;color:var(--ink)}
.step{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.step button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--btn);background:#fff;color:var(--btn);font:700 24px system-ui;cursor:pointer}
.step output{min-width:40px;text-align:center;font:700 24px system-ui}
.ok{color:#256b32;font-weight:600;text-align:center}.err{color:#a3202a;font-weight:600;text-align:center}
.pres{white-space:pre-wrap;font-size:16px;margin:0 0 10px;word-break:break-word}
.prazo{font-size:14px;color:#6d5e4c;margin:4px 0 0}
.cred{display:block;text-align:center;font-size:11px;letter-spacing:.06em;color:#9a8a74;margin:26px 0 6px;text-decoration:none}
.som{position:fixed;right:14px;top:14px;z-index:9;width:46px;height:46px;border-radius:50%;border:1.5px solid #fff9;background:rgba(30,22,12,.55);color:#fff;font:600 20px system-ui;cursor:pointer;backdrop-filter:blur(4px)}
.som.mudo{text-decoration:line-through;opacity:.75}
.nf{display:flex;min-height:100vh;align-items:center;justify-content:center;text-align:center;padding:20px}.nf h1{font:600 22px Cinzel,serif}
@media (prefers-reduced-motion:reduce){.env{animation:none}.toque{animation:none}}
/* arte do envelope (opcional, por convite) */
.env.com-arte .e-front-arte{position:absolute;inset:0;z-index:3;border-radius:8px;pointer-events:none;background:var(--earte) 0 0/100% 100% no-repeat;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.env.com-arte .e-front{z-index:3}
.env.com-arte .e-front .l,.env.com-arte .e-front .r{fill:rgba(255,255,255,.07);stroke:rgba(0,0,0,.16);stroke-width:.35}
.env.com-arte .e-front .b{fill:rgba(0,0,0,.10);stroke:rgba(0,0,0,.2);stroke-width:.35}
.env.com-arte .e-flap{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.14)),var(--earte) 0 0/100% 166.667% no-repeat;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.env.com-arte .e-back{background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),var(--earte) 0 0/100% 100% no-repeat}
/* arte do envelope = a imagem aparece limpa (sem dobras/sombras por cima) enquanto fechado; sombra da aba só ao abrir */
.env.com-arte .e-front .l,.env.com-arte .e-front .r,.env.com-arte .e-front .b{fill:transparent;stroke:none}
.env.com-arte .e-flap{background:var(--earte) 0 0/100% 166.667% no-repeat;filter:none}
.aberto .env.com-arte .e-flap,.env.com-arte.aberto .e-flap{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),var(--earte) 0 0/100% 166.667% no-repeat;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.aberto .env.com-arte .e-front .b{fill:rgba(0,0,0,.06)}
/* selo posicionado pela Sil sobre a arte do envelope (x/y = centro em %, --st = largura em % do envelope) */
.env.com-arte{container-type:inline-size}
.e-seal.pos{width:calc(var(--st)*1%);height:auto;aspect-ratio:1;margin:calc(var(--st)*-.5%) 0 0 calc(var(--st)*-.5%)}
.e-seal.pos span{font-size:calc(var(--st)*.57cqw)}