/* ===== v4: envelope como moldura persistente (minimalista) ===== */
:root{--env:#87885f;--env2:#7b7c55;--env3:#8f9068;--ribbon:#efe8d8;--card:#fbf8f1}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;background:#7b7c55}
.topbar,.bottom,.screen{display:none!important}
.env{position:relative;margin:0 auto;width:100%;max-width:460px;height:100dvh;overflow:hidden;isolation:isolate;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 background:var(--env) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(min-width:700px){.env{height:min(94vh,900px);top:3vh;border-radius:20px;box-shadow:0 30px 80px rgba(30,35,20,.45)}}
.env-back{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,transparent 49.6%,rgba(255,255,255,.06) 50%,transparent 50.4%),linear-gradient(225deg,transparent 49.6%,rgba(255,255,255,.06) 50%,transparent 50.4%)}
/* card */
.sheet{position:absolute;z-index:1;left:5%;right:5%;top:calc(2.2% + env(safe-area-inset-top));height:72%;background:var(--card);border-radius:4px;
 box-shadow:0 6px 22px rgba(30,30,10,.22);transform:translateY(0);transition:transform .35s ease-in-out;will-change:transform}
.sheet.down{transform:translateY(105%)}
.sheet-in{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
 padding:22px 20px calc(22vh + 20px);outline:0}
.sheet-in::-webkit-scrollbar{width:4px}.sheet-in::-webkit-scrollbar-thumb{background:#c9c6b3;border-radius:2px}
/* front pocket: V flap + ribbon + seal */
.env-front{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none;filter:drop-shadow(0 -3px 6px rgba(30,30,10,.18))}
.ribbon{position:absolute;z-index:3;left:-2%;right:-2%;top:68.5%;height:5.2%;min-height:30px;background:linear-gradient(var(--ribbon),#e6dfcd);box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}
.seal{position:absolute;z-index:4;left:50%;top:71.1%;width:min(22vw,96px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:none;padding:0;border-radius:50%;cursor:default}
.seal .wax{position:relative;width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.seal .leaves{position:absolute;width:62%;left:50%;bottom:62%;transform:translateX(-50%) rotate(-8deg);pointer-events:none}
.seal.is-back{cursor:pointer}
.seal.is-back:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(239,232,216,.9);animation:hint 2.4s ease-out infinite}
.seal.is-back .wax{animation:nudge 2.4s ease-in-out infinite}
.seal:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes hint{0%{transform:scale(.9);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes nudge{0%,100%{transform:scale(1)}12%{transform:scale(1.06)}24%{transform:scale(1)}}
/* foot */
.env-foot{position:absolute;z-index:4;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 1.5%);height:22%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:var(--cream);text-align:center;pointer-events:none}
.env-foot .fnames{display:block!important;font-size:clamp(30px,8.5vw,40px);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.env-foot .fdate{display:block!important;letter-spacing:.32em;font-size:13px;margin:4px 0 6px}
.env-foot .countdown{position:static;font-size:21px;color:#f6edc8;text-shadow:none;gap:4px}
.env-foot .countdown i{font-size:10px;color:#ece6d2}
.env-foot .icon-btn{pointer-events:auto;position:absolute;bottom:8px;width:46px;height:46px;transform:none;top:auto}
.env-foot .camera{right:14px;left:auto;background:rgba(255,255,255,.14);color:var(--cream)}
.env-foot .mute,body.inside .env-foot .mute{position:absolute;left:14px;right:auto;bottom:8px;width:46px;height:46px;background:rgba(239,232,216,.9);color:#3b3a2c}
/* cover (top flap) */
.cover{position:absolute;inset:0;z-index:6;transition:opacity .45s ease-in-out}
.cover .topflap{position:absolute;left:0;right:0;top:0;width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(30,30,10,.25))}
.cover-names{position:absolute;left:0;right:0;top:12%;text-align:center;color:var(--cream);font-size:clamp(46px,13vw,62px);font-weight:400}
.cover-date{position:absolute;left:0;right:0;top:calc(12% + 70px);text-align:center;color:var(--cream);letter-spacing:.32em;font-size:18px}
.cover .enter{position:absolute;left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom) + 9%);transform:translateX(-50%);background:none;border:0;color:#fff;font-size:44px;padding:6px 26px;border-radius:30px;cursor:pointer}
.cover .enter:hover,.cover .enter:focus-visible{transform:translateX(-50%) scale(1.07);outline:2px solid rgba(255,255,255,.6)}
.cover.opening{opacity:0;pointer-events:none}
body:not(.inside) .env-foot{opacity:0}
.env-foot{transition:opacity .4s .3s}
/* menu inside card */
.menu{display:flex;flex-direction:column}
.menu .couple{position:relative;inset:auto;width:calc(100% + 40px);margin:-22px -20px 0;height:min(34vh,300px);object-fit:cover;object-position:50% 38%;-webkit-mask:linear-gradient(#000 72%,transparent);mask:linear-gradient(#000 72%,transparent)}
.menu .bubbles{position:relative;width:100%;margin-top:-30px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;justify-items:center;height:auto}
.menu .bubble{width:100%;max-width:118px;min-height:44px;font-size:clamp(15px,4.3vw,19px);opacity:0;transform:scale(.6)}
.sheet.pop .menu .bubble{animation:popin .45s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes popin{to{opacity:1;transform:scale(1)}}
.menu .bubble[data-go="rsvp"]{grid-column:1/-1;max-width:none;aspect-ratio:auto;border-radius:40px;padding:12px;background:#a9b98a;color:#2f3a1f;font-size:23px}
.pg h2{margin-top:2px}
.pg.rsvp{background:#fff}
.sheet[data-page="rsvp"]{background:#fff}
.sheet[data-page="fotos"],.sheet[data-page="enviar"]{background:#c7d4b0}
.pg.fotos{background:transparent}
.pg .pager{display:none}
/* detail (full screen, slide from right) */
.detail{position:absolute;inset:0;z-index:8;background:var(--card);transform:translateX(100%);transition:transform .5s ease-out;visibility:hidden}
.detail.open{transform:none;visibility:visible}
.detail:not(.open){transition:transform .5s ease-in,visibility 0s .5s}
.detail-in{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
 padding:calc(env(safe-area-inset-top) + 24px) 22px calc(env(safe-area-inset-bottom) + 110px);outline:0;transition:transform .25s ease-out,opacity .25s}
.detail-in.out-left{transform:translateX(-30%);opacity:0}.detail-in.out-right{transform:translateX(30%);opacity:0}
.detail-in.in-right{transform:translateX(30%);opacity:0;transition:none}.detail-in.in-left{transform:translateX(-30%);opacity:0;transition:none}
.detail .pg .pager{display:flex;position:static;margin:22px 0 0;background:none;padding:0}
.seal.mini{top:auto;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);width:62px;cursor:pointer;z-index:9}
.seal.mini:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(140,139,112,.6);animation:hint 2.4s ease-out infinite}
.portrait{margin-right:-22px}
/* desktop */
@media(min-width:700px){.sheet-in{padding-bottom:calc(min(94vh,900px)*.22 + 20px)}.seal{width:92px}}
@media(prefers-reduced-motion:reduce){.sheet,.detail,.detail-in,.cover{transition:none!important}.seal:after,.seal .wax,.seal.mini:after{animation:none!important}.menu .bubble{opacity:1;transform:none;animation:none!important}}
.cover{z-index:2}
.seal .leaves{width:105%;bottom:48%;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.seal.mini .leaves{display:none}
.menu .couple{height:min(24vh,220px)}
.menu .bubbles{gap:6px 8px;margin-top:-24px}
.menu .bubble{max-width:100px;font-size:clamp(14px,3.9vw,17px)}
.menu .bubble[data-go="rsvp"]{font-size:21px;padding:8px}
@media(min-height:880px){.menu .couple{height:min(28vh,260px)}.menu .bubble{max-width:112px}}
/* menu: aguarela do casal em destaque (como no Genially): foto ocupa o cartão, botões à esquerda */
.sheet.is-menu .sheet-in{padding:0;overflow:hidden}
.menu{position:relative;height:100%;min-height:0}
.menu .couple{position:absolute;inset:0 0 auto auto;width:78%;height:76%;margin:0;object-fit:cover;object-position:60% 30%;
 -webkit-mask:linear-gradient(90deg,transparent,#000 22%),linear-gradient(#000 80%,transparent);-webkit-mask-composite:source-in;
 mask:linear-gradient(90deg,transparent,#000 22%) intersect,linear-gradient(#000 80%,transparent)}
.menu .bubbles{position:absolute;left:4%;top:3%;width:58%;margin:0;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.menu .bubble{max-width:none;width:100%;font-size:clamp(14px,3.9vw,17px);box-shadow:0 2px 8px rgba(60,70,40,.18)}
.menu .bubble:nth-child(even){margin-top:42%}
.menu .bubble[data-go="rsvp"]{grid-column:auto;aspect-ratio:1;border-radius:50%;padding:6px;font-size:16px;margin-top:0}
.menu .bubble[data-go="rsvp"] small{font-size:10px}
@media(min-height:880px){.menu .couple{height:78%}}
#cover{background:none;z-index:2;display:block;flex-direction:initial}
#cover .names{margin-top:0}
.menu .bubbles{width:50%;left:3%;gap:4px 6px}
.menu .bubble{font-size:clamp(13px,3.6vw,16px);padding:4px;line-height:1}
.menu .bubble[data-go="rsvp"]{font-size:14px}
.menu .couple{width:82%}