:root{--sage:#8c8b70;--sage2:#7b7a60;--bubble:#c9d6a8;--cream:#f7f3e8;--ink:#3b3a2c;--gold:#b8955a}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:"Cormorant Garamond",Georgia,serif;color:var(--ink);background:var(--sage);overflow:hidden}
.backdrop{position:fixed;inset:-40px;background:url(img/selo.webp) center/cover;filter:blur(30px) saturate(.9);opacity:.7}
.script{font-family:"Great Vibes",cursive;font-weight:400}
.card{position:relative;margin:0 auto;height:100dvh;width:100%;max-width:520px;overflow:hidden;
 background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(min-width:700px){.card{height:min(94vh,900px);top:3vh;border-radius:18px;box-shadow:0 30px 80px rgba(30,35,20,.45)}}
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s,transform .8s,visibility .8s}
.screen.active{opacity:1;visibility:visible}
/* cover */
#cover{display:flex;flex-direction:column;align-items:center;z-index:5;background:inherit}
#cover .names{margin-top:13%;font-size:clamp(46px,13vw,64px);color:var(--cream);text-shadow:0 1px 2px rgba(0,0,0,.15)}
#cover .date{letter-spacing:.3em;color:var(--cream);font-size:20px}
.flap{position:absolute;left:0;right:0;top:0;height:56%;clip-path:polygon(0 0,100% 0,100% 40%,50% 100%,0 40%);background:rgba(255,255,255,.04);box-shadow:inset 0 -2px 0 rgba(255,255,255,.1);transform-origin:top;transition:transform 1s ease-in;pointer-events:none;z-index:-1}
.seal-img{position:absolute;left:0;width:100%;bottom:12%;aspect-ratio:930/800;object-fit:cover;pointer-events:none;
 -webkit-mask:linear-gradient(to bottom,transparent 0,#000 18%,#000 92%,transparent);mask:linear-gradient(to bottom,transparent 0,#000 18%,#000 92%,transparent)}
.enter{position:absolute;bottom:5%;background:none;border:0;color:#fff;font-size:42px;cursor:pointer;padding:4px 24px;border-radius:30px;transition:transform .3s}
.enter:hover,.enter:focus-visible{transform:scale(1.08)}
#cover.opening .flap{transform:rotateX(180deg)}
#cover.opening{transform:translateY(-100%);transition-delay:.5s;transition-duration:1.1s}
/* paper */
.paper{position:absolute;left:6%;right:6%;top:3%;bottom:32%;background:var(--cream);box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(40px);transition:transform .9s}
.screen.active .paper{transform:none}
#menu .paper{overflow:hidden}
.couple{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;object-position:center;-webkit-mask:linear-gradient(to right,transparent,#000 25%);mask:linear-gradient(to right,transparent,#000 25%)}
.bubbles{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4%;width:72%;height:100%;align-content:space-evenly}
.bubble{aspect-ratio:1;border-radius:50%;border:0;background:var(--bubble);font:italic 400 clamp(16px,4.6vw,22px)/1.05 "Cormorant Garamond",serif;font-family:"Great Vibes",cursive;color:var(--ink);cursor:pointer;padding:8px;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bubble:nth-child(even){transform:translateY(30%)}
.bubble:hover,.bubble:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sage);outline:0}
.bubble small{font-size:.65em;font-weight:600}
.scroll{overflow-y:auto;padding:26px 24px 30px;-webkit-overflow-scrolling:touch}
.scroll h2{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(30px,8vw,40px);line-height:1.1;margin-bottom:14px;text-align:center}
.scroll p{font-size:18px;line-height:1.4;margin-bottom:12px}
.pedido-img{float:right;width:48%;margin:0 -24px 8px 10px;shape-outside:margin-box;-webkit-mask:radial-gradient(ellipse at 60% 50%,#000 55%,transparent 72%);mask:radial-gradient(ellipse at 60% 50%,#000 55%,transparent 72%)}
.back{display:inline-block;margin-bottom:10px;background:none;border:1px solid var(--sage);color:var(--sage2);border-radius:20px;padding:4px 14px;font:16px "Cormorant Garamond",serif;cursor:pointer}
.placeholder{font-style:italic;text-align:center;color:#6c6b55}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.grid div{aspect-ratio:1;background:#e7e5d6;border:1px dashed #bbb79c;border-radius:6px;display:grid;place-items:center;color:#9a987e;font-size:28px}
/* rsvp */
.rsvp{background:#fff;font-family:"Josefin Sans",sans-serif;font-weight:300}
.rsvp h2{font:300 28px "Josefin Sans",sans-serif;letter-spacing:.04em;margin-bottom:12px}
.rsvp p.intro{font-family:"Josefin Sans",sans-serif;text-align:center;font-size:17px;line-height:1.55}
.rsvp label,.rsvp legend{display:block;text-transform:uppercase;font-size:14px;font-weight:400;letter-spacing:.03em;margin:22px 0 8px}
.rsvp input[type=text],.rsvp input[type=email],.rsvp input[type=number],.rsvp textarea{width:100%;border:2px solid #4a3f2a;border-radius:12px;padding:12px;font:16px "Josefin Sans",sans-serif}
.rsvp fieldset{border:0;padding:0}
.rsvp .opts{display:flex;gap:20px;font-size:16px}
.rsvp .opts label{display:flex;gap:6px;align-items:center;margin:0;text-transform:none}
.rsvp .opt{color:#888;font-size:12px;text-transform:none}
.rsvp button[type=submit]{margin-top:24px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--sage);color:#fff;font:400 16px "Josefin Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.note{margin-top:12px;text-align:center;color:var(--sage2)}
/* bottom */
.bottom{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s .6s}
.bottom.show{opacity:1}
.seal-img.small{bottom:auto;top:-8%;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 30%);mask:linear-gradient(to bottom,transparent 0,#000 30%)}
.foot{position:absolute;bottom:2.5%;left:0;right:0;text-align:center;color:var(--cream)}
.fnames{font-size:34px;line-height:1}.fdate{letter-spacing:.3em;font-size:14px}
.countdown{display:flex;justify-content:center;gap:6px;color:#f3e7b8;font:400 24px "Josefin Sans",sans-serif;margin-top:4px}
.countdown span{display:flex;flex-direction:column;align-items:center;min-width:44px}.countdown i{font:300 11px "Josefin Sans";color:#e8e3cf;font-style:normal}
.icon-btn{pointer-events:auto;border:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.camera{position:absolute;right:6%;bottom:6%;background:rgba(255,255,255,.12);color:var(--cream);width:54px;height:54px}
.mute{position:fixed;left:max(14px,calc(50% - 246px));bottom:14px;width:50px;height:50px;background:rgba(160,175,140,.85);color:#fff;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.icon-btn:focus-visible,.back:focus-visible,.enter:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bottom.compact .foot .fnames,.bottom.compact .foot .fdate{display:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* v1 fixes */
.paper{bottom:30%}
.bubbles{gap:10px 8px;align-content:center;width:70%}
.bubble:nth-child(even){transform:none}
.bubble:nth-child(odd){justify-self:start}.bubble:nth-child(even){justify-self:end;margin-top:28%}
.bubble{width:100%}
.bottom{height:34%}
.seal-img.small{top:auto;bottom:-6%;width:100%}
.foot .fnames{display:none}
.foot .fdate{display:none}
.foot{bottom:8px}
.rsvp legend{float:left;width:100%}
.rsvp .opts{clear:both}
.rsvp fieldset{margin-top:22px}.rsvp legend{margin:0 0 8px}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:22px;clear:both}
.badge{width:150px;height:150px;border-radius:50%;background:var(--bubble);display:grid;place-items:center;text-align:center;font-size:34px;line-height:1;margin:0 auto 14px;padding:10px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.person-card{background:none;border:0;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;transition:transform .25s}
.person-card:hover,.person-card:focus-visible{transform:translateY(-3px);outline:0}
.person-card img,.ph-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ph-photo{display:grid;place-items:center;background:#e7e5d6;color:#a5a386;font-size:40px;border:1px dashed #bbb79c}
.person-card span{font-size:28px;margin-top:-6px;color:var(--ink)}
.person-card:focus-visible img{box-shadow:0 0 0 3px var(--sage)}
.vendors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vendor{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);text-align:center;font-size:15px}
.vendor img{width:100%;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);margin-bottom:6px}
.vendor strong{font-family:"Great Vibes",cursive;font-weight:400;font-size:24px}.vendor span{color:var(--sage2)}
.scroll h2.left{text-align:left}
.portrait{float:right;width:58%;margin:0 -24px 6px 8px;shape-outside:margin-box;-webkit-mask:radial-gradient(ellipse at 55% 50%,#000 55%,transparent 72%);mask:radial-gradient(ellipse at 55% 50%,#000 55%,transparent 72%)}
.note.ok{color:#4f6b3a}.note.err{color:#a0452f}
.bubble{width:min(100%,12.8dvh);font-size:clamp(15px,2.3dvh,21px)}
.bubbles{width:64%;align-content:space-evenly;row-gap:0}
.bubble:nth-child(even){margin-top:40%}
@media(min-width:700px){.bubble{width:min(100%,12dvh)}}
#pageBody:focus{outline:0}
.seal-img.small{-webkit-mask:linear-gradient(to bottom,transparent 0,transparent 22%,#000 45%);mask:linear-gradient(to bottom,transparent 0,transparent 22%,#000 45%)}
.scroll{padding-bottom:60px}
.countdown{text-shadow:0 1px 3px rgba(40,40,20,.8)}.countdown i{text-shadow:0 1px 2px rgba(40,40,20,.9)}
.photos{clear:both;display:grid;gap:10px;margin-top:14px}
.photos img{width:100%;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.couple{object-position:60% center}
.bubbles{align-content:start;row-gap:1.5dvh;padding-top:3dvh}
.bubble:nth-child(even){margin-top:0;transform:translateY(55%)}
.bubble:nth-child(even):hover,.bubble:nth-child(even):focus-visible{transform:translateY(55%) scale(1.05)}
.bubble{box-shadow:0 2px 8px rgba(60,70,40,.12)}
.seal-box{position:absolute;left:0;width:100%;bottom:-6%;aspect-ratio:930/800;pointer-events:none}
#sealOverride{position:absolute;left:50%;top:79%;width:23%;transform:translate(-50%,-50%);border-radius:50%}
.seq-wrap{position:relative}
.timeline{list-style:none;padding:0;position:relative;margin:10px 0 18px}
.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#9aa58a}
.timeline li{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding:14px 0;color:#2f4a22;position:relative}
.timeline li:after{content:"";position:absolute;left:calc(50% - 4px);top:50%;width:10px;height:10px;border-radius:50%;background:#9aa58a;transform:translateY(-50%)}
.timeline svg{justify-self:end}.timeline span{font:italic 24px/1.1 "Cormorant Garamond",serif}
.timeline b{display:block;font-style:normal;font-weight:600}
.timeline li.alt svg{order:2;justify-self:start}.timeline li.alt span{order:1;text-align:right}
.seq-img{width:70%;display:block;margin:0 auto;border-radius:10px}
.sub{text-align:center;font-style:italic;letter-spacing:.08em;margin-top:-8px}.sub.small{font-size:14px;letter-spacing:0;margin-top:6px}
.hotels{list-style:none;padding:0;margin:14px 0}
.hotels li{border-bottom:1px solid #c9cdb6;text-align:center}
.hotels a{display:flex;flex-direction:column;align-items:center;padding:12px 0;color:var(--ink);text-decoration:none;transition:background .2s}
.hotels a:hover,.hotels a:focus-visible{background:#eef0e2;outline:0}
.hotels small{font-style:italic;font-size:15px}.hotels strong{font-weight:400;font-size:22px}
.map{text-align:center}.map a{color:var(--sage2)}
.paper.fotos{background:#c7d4b0;text-align:center;font-family:"Josefin Sans",sans-serif}
.fotos .env{display:block;margin:6px auto 4px}
.fotos h2.caps{font:700 24px "Josefin Sans",sans-serif;letter-spacing:.02em;color:#2f4a1a}
.fotos .intro{font-family:"Josefin Sans",sans-serif;font-size:16px}
.fotos .qr{display:block;margin:14px auto;border-radius:16px;width:190px;height:190px;background:#fff}
.cta{display:inline-block;margin:6px 0 16px;padding:14px 28px;border-radius:30px;background:#5a6b40;color:#fff;text-decoration:none;font-size:17px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.cta:hover,.cta:focus-visible{background:#46552f;outline:2px solid #fff}
.fotos .back{display:block;margin:0 auto}
[hidden]{display:none!important}