:root{
  --cream:#f4efe8; --paper:#fbf8f3; --bg:#e6e1d9;
  --navy:#0b2f6b; --navy-2:#123d8a; --ink:#0d2350;
  --wine:#6b3439; --wine-2:#7a3c44;
  --gold-1:#f9e29a; --gold-2:#d9a93a; --gold-3:#8a6414;
  --text-gold:#a8701a;
  --radius:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Serif',Georgia,serif;background:var(--bg);color:var(--wine);-webkit-font-smoothing:antialiased;min-height:100vh}
body.locked{overflow:hidden;height:100vh}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
[hidden]{display:none!important}

/* ================= CAPA ================= */
.cover{position:fixed;inset:0;z-index:60;perspective:2000px;background:radial-gradient(ellipse at center,#d9d5cf 0%,#cfcac3 100%);
  --H:min(45vh,560px);--Wf:calc(var(--H)*720/1520);--W:calc(var(--H)*.276)}
.door{position:absolute;top:14px;bottom:14px;width:calc(50% - 7px);background:linear-gradient(180deg,#f5f1eb,#f2ede6);overflow:hidden;
  transition:transform 1.5s cubic-bezier(.65,.02,.25,1) .55s, box-shadow 1.5s .55s, opacity .5s 1.7s;
  box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.06);backface-visibility:hidden}
.door.left{left:0;border-radius:0 var(--radius) var(--radius) 0;transform-origin:left center}
.door.right{right:0;border-radius:var(--radius) 0 0 var(--radius);transform-origin:right center}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.06));opacity:0;transition:opacity 1.5s .55s;pointer-events:none}
.door.right::after{background:linear-gradient(-90deg,rgba(0,0,0,0),rgba(0,0,0,.06))}
.door-art{position:absolute;top:calc(50% - var(--H)*.55);height:var(--H);width:var(--Wf)}
.door.left .door-art{right:calc(var(--Wf)/-2 - 7px)}
.door.right .door-art{left:calc(var(--Wf)/-2 - 7px)}
.door-art img{width:100%;height:100%;display:block;object-fit:contain}
.seal-btn{position:absolute;left:50%;top:calc(50% + var(--H)*.15);width:var(--W);aspect-ratio:717/735;transform:translate(-61.2%,-39.3%);z-index:3;-webkit-tap-highlight-color:transparent}
.seal-btn:focus-visible{outline:2px dashed var(--gold-2);outline-offset:6px;border-radius:50%}
.seal-text{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s}
.seal-half{position:absolute;left:61.2%;top:39.3%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .9s;filter:drop-shadow(0 4px 8px rgba(120,80,10,.35))}
.seal-half img{width:100%;height:100%;display:block}
.seal-half.l{clip-path:polygon(0 0,52% 0,47% 30%,54% 55%,46% 78%,51% 100%,0 100%)}
.seal-half.r{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 78%,54% 55%,47% 30%)}
.seal-btn:hover .seal-half{transform:translate(-50%,-50%) scale(1.04)}
.seal-btn .pulse{position:absolute;left:61.2%;top:39.3%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 0 rgba(217,169,58,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,169,58,.5)}70%{box-shadow:0 0 0 22px rgba(217,169,58,0)}100%{box-shadow:0 0 0 0 rgba(217,169,58,0)}}
.cover.opening .pulse{display:none}
.cover.opening .seal-text{opacity:0}
.cover.opening .seal-half.l{transform:translate(-120%,-20%) rotate(-38deg);opacity:0}
.cover.opening .seal-half.r{transform:translate(20%,-20%) rotate(38deg);opacity:0}
.cover.opening .door.left{transform:rotateY(-108deg);box-shadow:30px 0 60px rgba(0,0,0,.25)}
.cover.opening .door.right{transform:rotateY(108deg);box-shadow:-30px 0 60px rgba(0,0,0,.25)}
.cover.opening .door::after{opacity:1}
.cover.opening{background:transparent;transition:background .8s .5s}
.cover.opening .door{opacity:0}
.cover.gone{display:none}

/* ================= CONVITE ================= */
.invite{max-width:640px;margin:0 auto;background:var(--paper);box-shadow:0 0 60px rgba(0,0,0,.12);overflow:hidden;position:relative}
.reveal{animation:reveal 1.2s ease both}
@keyframes reveal{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.hero{position:relative;width:100%;aspect-ratio:430/533;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4% 6% 4%;isolation:isolate;overflow:hidden;
  background:var(--paper) url('../img/convite/igreja.webp') center bottom/cover no-repeat}
.corner{position:absolute;pointer-events:none;z-index:1;display:block;height:auto}
/* cantos decorativos (compartilhados por convite e manual) */
.corner.tl{width:17%;top:-5%;left:2%;transform:rotate(82deg)}
.corner.tr{width:17%;top:-3%;right:-2%;transform:rotate(140deg)}
.corner.bl{width:13%;top:85.4%;left:0}
.corner.br{width:23%;top:87%;right:-3%}

.player{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:2.5%;position:relative;z-index:2}
.player .ctrls{display:flex;align-items:center;gap:16px;color:var(--navy)}
.player .ctrls button{width:22px;height:22px;display:grid;place-items:center;opacity:.8}
.player .ctrls .play{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;opacity:1;box-shadow:0 4px 12px rgba(11,47,107,.3)}
.player .ctrls svg{width:14px;height:14px}
.player .ctrls .play svg{width:17px;height:17px}
.player .bar{width:140px;height:2px;background:rgba(11,47,107,.25);position:relative;border-radius:2px}
.player .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--navy)}
.player .bar b{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%);left:0}

.verse{font-style:italic;font-weight:700;color:var(--wine-2);font-size:clamp(12px,3.4vw,20px);line-height:1.4;max-width:92%;text-shadow:0 0 8px rgba(255,255,255,.8)}
.blessing{margin-top:5%;font-weight:600;font-size:clamp(14px,3.9vw,23px);color:var(--wine-2);text-shadow:0 0 8px rgba(255,255,255,.8)}
.blessing+p{font-style:italic;font-weight:700;color:var(--wine-2);font-size:clamp(12px,3.4vw,20px);max-width:90%;margin-top:1.5%;line-height:1.4;text-shadow:0 0 8px rgba(255,255,255,.8)}
.names{font-family:'Allura','Great Vibes',cursive;color:var(--navy-2);font-size:clamp(52px,15vw,96px);line-height:.98;margin:4% 0 auto;
  text-shadow:0 0 18px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9),2px 3px 0 rgba(255,255,255,.6)}
.names span{display:block}
.names .amp{font-size:.8em;margin:0}
.when{margin-top:auto;margin-bottom:3%;font-weight:700;color:var(--wine-2);font-size:clamp(12px,3.4vw,20px);line-height:1.5;max-width:94%;text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px #fff}

.seal-divider{position:relative;height:0;z-index:5}
.seal-divider img{position:absolute;left:49.5%;top:0;width:25%;height:auto;transform:translate(-57.8%,-19.2%);filter:drop-shadow(0 4px 6px rgba(120,80,10,.25))}

.couple{position:relative;width:100%;aspect-ratio:983/1460;background:#9cc6e6 center/cover no-repeat}
.couple::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fbf8f3 0%,rgba(251,248,243,.85) 12%,rgba(251,248,243,0) 42%),
            linear-gradient(270deg,rgba(251,248,243,.95) 0%,rgba(251,248,243,.5) 10%,rgba(251,248,243,0) 26%);}
.couple .ph{position:absolute;right:6%;top:62%;max-width:44%;text-align:center;color:#fff;font-family:'Great Vibes',cursive;font-size:34px;text-shadow:0 2px 10px rgba(0,0,0,.25);line-height:1.1}
.actions{position:absolute;left:8.2%;top:17.3%;width:16.4%;z-index:2}
.act{display:block;width:100%;margin-bottom:37%;transition:transform .25s,filter .25s;-webkit-tap-highlight-color:transparent;background:none;padding:0}
.act:last-child{margin-bottom:0}
.act img{display:block;width:100%;height:auto}
.act:hover{transform:scale(1.06);filter:drop-shadow(0 6px 14px rgba(11,47,107,.25))}

.manual{position:relative;width:100%;aspect-ratio:1100/1556;padding:7% 5% 14%;text-align:center;isolation:isolate;overflow:hidden;
  background:#e7eef8 url('../img/manual/fundo-brasao.webp') center/cover no-repeat}
.manual h2{font-family:'Cinzel',serif;font-weight:400;letter-spacing:.35em;font-size:clamp(11px,3.1vw,18px);color:var(--wine);position:relative;z-index:2}
.manual h2 em{display:block;font-family:'Cinzel Decorative',serif;font-style:italic;font-size:clamp(20px,5.7vw,34px);letter-spacing:.08em;margin-top:-2px;transform:skewX(-8deg)}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:1.6% 3%;margin:5% auto 0;max-width:100%;position:relative;z-index:2}
.rule{display:flex;align-items:center;gap:2%;color:#10275f;min-height:min(16vw,100px)}
.rule img{flex:0 0 21%;width:21%;height:auto;display:block}
.rule p{flex:1;font-family:'Noto Serif',serif;font-weight:700;font-size:clamp(8.5px,2.45vw,15px);letter-spacing:.17em;text-transform:uppercase;line-height:1.45;text-align:center;color:#1b2a63}
.rule p i{font-style:normal;color:#0b3f9c}

/* ================= PRESENTES ================= */
.gifts{min-height:100vh;position:relative;padding:40px 18px 80px;isolation:isolate;background:#f1ede6 url('../img/manual/fundo.webp') center top/cover fixed no-repeat}
.gifts .wrap{max-width:1000px;margin:0 auto;position:relative}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;color:var(--navy);background:rgba(255,255,255,.7);padding:8px 14px;border-radius:30px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.gifts h1{font-family:'Noto Serif',serif;font-weight:700;font-size:clamp(36px,7.5vw,72px);color:var(--wine);letter-spacing:-.5px;margin-top:18px;line-height:1}
.gifts h1+p{text-align:right;font-size:clamp(24px,4.5vw,46px);color:var(--wine);margin-top:4px}
.gifts .hint{margin:14px auto 0;max-width:620px;text-align:center;font-style:italic;color:#6d5a5c;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.card{background:rgba(253,251,248,.94);padding:16px 16px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 2px 14px rgba(70,60,50,.07);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(70,60,50,.14)}
.card .img{width:100%;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(48px,9vw,80px);overflow:hidden;background:linear-gradient(140deg,#dbe6f4,#f3e3e7)}
.card .img img{width:100%;height:100%;object-fit:cover}
.card h3{font-weight:600;font-size:clamp(12px,2.6vw,15px);line-height:1.75;color:#8b6a6c;margin-top:16px;min-height:52px;display:flex;align-items:center}
.card .price{font-weight:700;color:var(--wine);margin:8px 0 14px;font-size:15px}
.btn{background:var(--navy);color:#fff;border-radius:30px;padding:10px 26px;min-width:min(180px,100%);font-size:15px;transition:background .2s,transform .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--navy-2)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.wa{background:#1f8f4e}
.btn.wa:hover{background:#25a35a}
.btn[disabled]{opacity:.45;pointer-events:none}

.credit{text-align:center;padding:18px 16px 26px;font-size:13px;color:#7a6c6c;background:var(--bg)}
.credit a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.credit a:hover{color:var(--navy-2)}
/* ================= MODAIS ================= */
.modal{position:fixed;inset:0;z-index:80;background:rgba(20,24,40,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal.open{opacity:1;pointer-events:auto}
.sheet{background:var(--paper);width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow:auto;border-radius:22px;padding:28px 24px 24px;position:relative;transform:translateY(16px) scale(.98);transition:transform .3s;box-shadow:0 30px 70px rgba(0,0,0,.3);color:#3f3436}
.modal.open .sheet{transform:none}
.sheet .x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:#776}
.sheet .x:hover{background:rgba(0,0,0,.06)}
.sheet h3{font-family:'Great Vibes',cursive;font-weight:400;font-size:38px;color:var(--navy);text-align:center;line-height:1.1}
.sheet .sub{text-align:center;font-size:14px;color:#7b6668;margin:6px 0 18px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:13px;font-weight:600;color:var(--wine);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1px solid #d9d0c6;border-radius:12px;background:#fff;color:#333;outline:none;transition:border .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,47,107,.12)}
.field textarea{min-height:96px;resize:vertical}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice label{border:1px solid #d9d0c6;border-radius:12px;padding:10px;text-align:center;font-size:14px;cursor:pointer;background:#fff;transition:all .2s}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked+label{border-color:var(--navy);background:#eaf0fa;color:var(--navy);font-weight:600}
.sheet .actions-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sheet .actions-row .btn{width:100%}

.gift-head{display:flex;gap:12px;align-items:center;background:#f2ede6;border-radius:14px;padding:10px;margin-bottom:16px}
.gift-head .thumb{width:54px;height:54px;border-radius:10px;display:grid;place-items:center;font-size:30px;background:linear-gradient(140deg,#dbe6f4,#f3e3e7);overflow:hidden;flex:0 0 54px}
.gift-head .thumb img{width:100%;height:100%;object-fit:cover}
.gift-head b{display:block;font-size:14px;color:var(--wine);line-height:1.35}
.gift-head small{color:#7b6668;font-size:12.5px}
.money{position:relative}
.money em{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-style:normal;color:#8b7a7a;font-size:15px}
.money input{padding-left:40px!important;font-weight:700;font-size:20px!important;color:var(--navy)!important}
input[type=range]{width:100%;accent-color:var(--navy);margin:10px 0 2px}
.range-lbl{display:flex;justify-content:space-between;font-size:12px;color:#8b7a7a}
.chips{display:flex;gap:8px;margin-top:10px}
.chips button{flex:1;font-size:12.5px;padding:7px;border-radius:20px;border:1px solid #d9d0c6;background:#fff;color:var(--navy)}
.chips button:hover{border-color:var(--navy)}
.err{color:#b3261e;font-size:13px;margin-top:8px;min-height:18px}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;transition:opacity .25s}
.qr-box.off{opacity:.15;filter:blur(2px);pointer-events:none}
#qr{padding:12px;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);width:224px;height:224px;display:grid;place-items:center}
#qr img,#qr canvas{width:200px!important;height:200px!important}
.qr-val{font-weight:700;color:var(--navy);font-size:18px}
.copy{display:flex;gap:6px;width:100%}
.copy input{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;padding:9px 10px;border:1px dashed #cfc5ba;border-radius:10px;background:#faf7f2;color:#555;min-width:0}
.copy button{padding:0 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:13px;white-space:nowrap}
.warn{font-size:12px;background:#fff6e0;color:#7a5a12;border-radius:10px;padding:8px 10px;margin-bottom:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:#1f2433;color:#fff;padding:11px 18px;border-radius:30px;font-size:14px;z-index:99;opacity:0;transition:all .3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}}
.gifts .empty{grid-column:1/-1;text-align:center;padding:60px 0;color:#7b6668;font-style:italic}
@media (max-width:640px){.gifts h1,.gifts h1+p{text-align:center}}
.gifts{overflow-x:clip}
.gifts .wrap{z-index:2}
.gifts .corner{position:absolute;z-index:0;opacity:.95}
.gifts .corner.tl{width:17%;top:-25px;left:2%;transform:rotate(82deg)}
.gifts .corner.tr{width:17%;top:-22px;right:-2%;transform:rotate(140deg)}
.gifts .corner.bl{width:13%;top:auto;bottom:-10px;left:0}
.gifts .corner.br{width:23%;top:auto;bottom:-10px;right:-3%}

/* ===== MOBILE: cada etapa do convite ocupa uma tela inteira (rolagem por etapas) ===== */
@media (max-width:640px){
  html:has(.invite){scroll-snap-type:y mandatory}
  .hero,.couple,.manual{min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
  .hero{aspect-ratio:auto;padding:8% 6% 14%}
  .hero .when{margin-bottom:4%}
  .couple{aspect-ratio:auto;background-position:center}
  .actions{top:14%;bottom:12%;display:flex;flex-direction:column;justify-content:space-between}
  .act{margin-bottom:0}
  .manual{aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;padding:10% 5% 12%}
  .manual .rules{margin-top:6%;row-gap:3.2vh}
  .rule{min-height:0}
}