:root{
color-scheme:only light;
--wine:#67364c;
--wine-deep:#4f2639;
--plum:#78566b;
--rose:#d9999a;
--rose-soft:#e9c3bd;
--blush:#f3ded7;
--cream:#fffaf5;
--paper:#fffdf9;
--gold:#ba8b4d;
--gold-light:#dfc291;
--ink:#654d55;
--muted:#9c7b80;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
min-height:100vh;
overflow-x:hidden;
color:var(--ink);
font-family:Montserrat,sans-serif;
background:#f7efeb;
}

.page-bg{
position:fixed;
inset:0;
z-index:-10;
background:url("../fundo.png") center/cover no-repeat;
}

.page-bg:after{
content:"";
position:absolute;
inset:0;
background:rgba(255,249,246,.56);
pointer-events:none;
}

body:after{
content:"";
position:fixed;
inset:0;
z-index:-8;
pointer-events:none;
opacity:.11;
background:url("../assets/paper-texture.svg");
mix-blend-mode:normal;
}

.ambient{
position:fixed;
border-radius:50%;
filter:blur(100px);
pointer-events:none;
z-index:-7;
}

.ambient-a{
width:430px;
height:430px;
background:#d99498;
opacity:.15;
left:-180px;
top:7%;
}

.ambient-b{
width:520px;
height:520px;
background:#a783b5;
opacity:.1;
right:-220px;
bottom:-120px;
}

.ambient-c{
width:320px;
height:320px;
background:#e1b469;
opacity:.08;
right:8%;
top:7%;
}

main{
width:100%;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:55px 20px 30px;
}

header{
text-align:center;
margin-bottom:38px;
transition:.7s ease;
position:relative;
z-index:2;
}

.monogram{
font:400 13px Italiana,serif;
letter-spacing:5px;
color:var(--gold);
margin-bottom:13px;
}

.monogram span{
font:400 19px Parisienne,cursive;
margin:0 3px;
}

.eyebrow{
font-size:9px;
font-weight:500;
letter-spacing:5.5px;
color:#9f7379;
}

header h1{
font:400 56px Italiana,serif;
letter-spacing:-1.2px;
color:var(--wine);
margin:10px 0 11px;
text-shadow:0 1px rgba(255,255,255,.8);
}

header h1 i{
font:400 40px Parisienne,cursive;
color:#c98572;
display:inline-block;
margin:0 5px;
}

.header-date{
display:flex;
align-items:center;
justify-content:center;
gap:13px;
}

.header-date span{
width:60px;
height:1px;
background:linear-gradient(90deg,transparent,var(--gold-light));
}

.header-date span:last-child{
background:linear-gradient(90deg,var(--gold-light),transparent);
}

.header-date b{
font-size:9px;
letter-spacing:3.7px;
font-weight:500;
color:#a47671;
}

header p{
font:italic 17px "Cormorant Garamond",serif;
margin-top:12px;
color:#8f7378;
letter-spacing:.2px;
}

.scene{
position:relative;
width:700px;
max-width:100%;
height:470px;
display:flex;
justify-content:center;
align-items:flex-end;
transition:height 1.1s cubic-bezier(.22,.75,.2,1);
}

.envelope{
position:absolute;
bottom:0;
width:610px;
height:395px;
perspective:1600px;
filter:drop-shadow(0 28px 30px rgba(73,41,50,.23));
z-index:8;
}

.back{
position:absolute;
inset:0;
border-radius:5px 5px 9px 9px;
overflow:hidden;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dc9c9b%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c47c82%22%2F%3E%0A%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
background-size:cover;
background-color:#dc9c9b;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.lining{
position:absolute;
left:7px;
right:7px;
top:7px;
height:255px;
overflow:hidden;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23f4ddd4%22%2F%3E%3C%2Fsvg%3E");
background-color:#f4ddd4;
}

.lining img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.2);
filter:saturate(.82) contrast(.96) brightness(1.05);
opacity:.9;
}

.lining:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 48%,rgba(76,39,53,.07));
}

.flap{
position:absolute;
inset:0 0 auto;
height:247px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dfa5a0%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c87d85%22%2F%3E%0A%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
background-size:cover;
background-color:#dfa5a0;
clip-path:polygon(0 0,100% 0,50% 100%);
transform-origin:top;
transition:transform 1.1s cubic-bezier(.77,0,.18,1);
z-index:12;
filter:drop-shadow(0 3px 3px rgba(93,50,60,.08));
}

.left-fold{
position:absolute;
inset:0;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23e4aaa4%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23cd858b%22%2F%3E%0A%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
background-size:cover;
background-color:#e4aaa4;
clip-path:polygon(0 0,52% 59%,0 100%);
z-index:9;
}

.right-fold{
position:absolute;
inset:0;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23d99b99%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c77b83%22%2F%3E%0A%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
background-size:cover;
background-color:#d99b99;
clip-path:polygon(100% 0,48% 59%,100% 100%);
z-index:9;
}

.bottom-fold{
position:absolute;
inset:0;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dfa49f%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23c98287%22%2F%3E%0A%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
background-size:cover;
background-color:#dfa49f;
clip-path:polygon(0 100%,50% 52%,100% 100%);
z-index:10;
}

.envelope-paper{
position:absolute;
inset:0;
z-index:11;
opacity:.13;
pointer-events:none;
background:url("../assets/paper-texture.svg");
mix-blend-mode:normal;
}

.card-shadow{
position:absolute;
left:30px;
right:30px;
height:300px;
bottom:14px;
background:#fff9f2;
box-shadow:0 0 25px rgba(70,38,46,.1);
z-index:3;
}

.seal-wrap{
position:absolute;
width:112px;
height:112px;
left:50%;
top:195px;
transform:translate(-50%,-50%);
z-index:15;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:
transform .4s ease,
opacity .4s ease,
filter .4s ease;
filter:drop-shadow(0 10px 12px rgba(68,26,43,.3));
outline:none;
}

.seal-wrap img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
display:block;
transition:transform .4s ease;
user-select:none;
pointer-events:none;
}

.seal-wrap span{
position:absolute;
left:50%;
top:calc(100% + 13px);
transform:translateX(-50%);
white-space:nowrap;
font:500 8px Montserrat,sans-serif;
letter-spacing:2px;
text-transform:uppercase;
color:#774c59;
text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.seal-wrap:hover{
transform:translate(-50%,-50%) scale(1.07);
filter:drop-shadow(0 14px 15px rgba(68,26,43,.36));
}

.seal-wrap:hover img{
transform:rotate(-3deg);
}

.seal-wrap:active{
transform:translate(-50%,-50%) scale(.96);
}

.seal-wrap:focus-visible{
filter:drop-shadow(0 0 7px rgba(103,54,76,.6));
}

.invitation{
position:absolute;
width:560px;
min-height:650px;
bottom:20px;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fffdf9%22%2F%3E%3C%2Fsvg%3E");
background-color:var(--paper);
z-index:4;
opacity:0;
transform:translateY(285px) scale(.91);
box-shadow:
0 30px 70px rgba(74,39,49,.22),
0 5px 14px rgba(74,39,49,.08);
transition:
transform 1.35s cubic-bezier(.2,.76,.25,1),
opacity .45s;
overflow:hidden;
border-radius:1px;
}

.invitation-paper{
position:absolute;
inset:0;
background:url("../assets/paper-texture.svg");
opacity:.14;
mix-blend-mode:normal;
}

.inner-light{
position:absolute;
inset:0;
background:
radial-gradient(circle at 50% 30%,rgba(255,255,255,.95),transparent 48%),
linear-gradient(145deg,rgba(255,255,255,.55),transparent 55%);
pointer-events:none;
}

.gold-frame{
position:absolute;
inset:18px;
border:1px solid rgba(185,139,78,.5);
}

.gold-frame:before,
.gold-frame:after{
content:"";
position:absolute;
width:70px;
height:70px;
}

.gold-frame:before{
top:8px;
left:8px;
border-top:1px solid rgba(188,143,83,.9);
border-left:1px solid rgba(188,143,83,.9);
}

.gold-frame:after{
right:8px;
bottom:8px;
border-right:1px solid rgba(188,143,83,.9);
border-bottom:1px solid rgba(188,143,83,.9);
}

.content{
position:relative;
z-index:3;
text-align:center;
padding:52px 58px 34px;
}

.flower-corner{
position:absolute;
width:165px;
z-index:1;
opacity:.76;
pointer-events:none;
filter:saturate(.82);
}

.top-flower{
left:-45px;
top:-38px;
transform:rotate(-13deg);
}

.bottom-flower{
right:-45px;
bottom:-40px;
transform:rotate(168deg);
}

.blessing{
font-size:8px;
font-weight:500;
line-height:1.9;
letter-spacing:2.5px;
color:#a3797c;
}

.decorative-star{
display:flex;
justify-content:center;
align-items:center;
gap:9px;
margin:12px auto 13px;
}

.decorative-star span{
width:35px;
height:1px;
background:linear-gradient(90deg,transparent,var(--gold-light));
}

.decorative-star span:last-child{
background:linear-gradient(90deg,var(--gold-light),transparent);
}

.decorative-star b{
font-size:10px;
font-weight:400;
color:var(--gold);
}

.invite-text{
font:18px/1.5 "Cormorant Garamond",serif;
color:#80676c;
}

.content h2{
display:flex;
flex-direction:column;
align-items:center;
font:400 61px/.76 Parisienne,cursive;
color:var(--wine);
margin:21px 0 19px;
text-shadow:0 1px rgba(255,255,255,.8);
}

.content h2 i{
font-size:25px;
line-height:1;
color:var(--gold);
margin:8px 0 6px;
}

.ornament{
display:flex;
align-items:center;
justify-content:center;
gap:11px;
margin-bottom:18px;
}

.ornament span{
width:65px;
height:1px;
background:linear-gradient(90deg,transparent,#d3af85);
}

.ornament span:last-child{
background:linear-gradient(90deg,#d3af85,transparent);
}

.ornament b{
font-size:9px;
font-weight:400;
color:#b87968;
}

.date-grid{
display:flex;
align-items:center;
justify-content:center;
gap:25px;
margin-bottom:18px;
}

.date-side{
width:92px;
padding:9px 5px 8px;
border-top:1px solid #d9bea1;
border-bottom:1px solid #d9bea1;
display:flex;
flex-direction:column;
gap:2px;
}

.date-side small{
font-size:7px;
font-weight:500;
letter-spacing:2px;
color:#9d7778;
}

.date-side strong{
font:400 31px Italiana,serif;
line-height:1.15;
color:var(--wine);
}

.date-side .time{
font-size:18px;
padding:6px 0 5px;
letter-spacing:.4px;
}

.date-center{
display:flex;
flex-direction:column;
gap:5px;
min-width:95px;
}

.date-center span{
font-size:10px;
font-weight:500;
letter-spacing:2.6px;
color:#73545d;
}

.date-center b{
font-size:10px;
letter-spacing:2.6px;
font-weight:400;
color:#b07d70;
}

.event-label{
font-size:7px;
font-weight:500;
letter-spacing:2.5px;
color:#a16f76;
margin-top:2px;
}

.venue{
font:400 22px Italiana,serif;
letter-spacing:5px;
margin:7px 0 4px;
color:var(--wine);
}

.message-wrap{
display:flex;
align-items:center;
justify-content:center;
gap:11px;
margin:11px 0 18px;
}

.message-wrap span{
width:20px;
height:1px;
background:#d9b991;
}

.message{
font:italic 16px "Cormorant Garamond",serif;
color:#816c6f;
white-space:nowrap;
}

.links{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid #e5d2c2;
border-bottom:1px solid #e5d2c2;
position:relative;
z-index:5;
background:rgba(255,253,249,.58);
}

.links a{
position:relative;
min-height:88px;
padding:12px 8px;
text-decoration:none;
color:#704f57;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
transition:.32s ease;
overflow:hidden;
}

.links a:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(145deg,#74415a,#5e3248);
transform:translateY(101%);
transition:.32s cubic-bezier(.2,.75,.2,1);
z-index:-1;
}

.links a+a{
border-left:1px solid #e5d2c2;
}

.links a:hover:before{
transform:translateY(0);
}

.links a:hover{
color:#fffaf3;
}

.link-symbol{
font:22px "Cormorant Garamond",serif;
line-height:1;
color:#b9766f;
transition:.3s;
}

.links a:hover .link-symbol{
color:#e6c681;
}

.links a div{
display:flex;
flex-direction:column;
gap:2px;
}

.links small{
font-size:6px;
font-weight:500;
letter-spacing:1.45px;
opacity:.7;
}

.links strong{
font:400 12px Italiana,serif;
letter-spacing:.1px;
margin-top:2px;
}

.arrow{
font-size:11px;
opacity:.6;
}

.signature{
display:flex;
justify-content:center;
align-items:center;
gap:5px;
font:20px Parisienne,cursive;
color:#ad766e;
margin-top:14px;
}

.signature i{
font-size:12px;
color:var(--gold);
}

.petals{
position:absolute;
inset:0;
pointer-events:none;
z-index:25;
opacity:0;
}

.petal{
position:absolute;
width:12px;
height:20px;
border-radius:80% 0 80% 0;
background:#d88791;
box-shadow:0 2px 4px rgba(80,40,50,.08);
}

.p1{left:8%;top:40%}
.p2{left:20%;top:22%;background:#d6af64}
.p3{right:14%;top:28%;background:#a98cb4}
.p4{right:7%;top:48%;background:#d88166}
.p5{left:31%;top:17%;background:#d87b89}
.p6{right:29%;top:18%;background:#dfbb69}
.p7{left:15%;top:59%;background:#aa8aaf}

.scene.open{
height:840px;
}

.scene.open .flap{
transform:rotateX(180deg);
z-index:2;
}

.scene.open .seal-wrap{
opacity:0;
pointer-events:none;
transform:translate(-50%,-70%) scale(.65);
}

.scene.open .invitation{
opacity:1;
z-index:20;
transform:translateY(-170px) scale(1);
}

.scene.open .petals{
animation:petalsVisible 2.7s ease forwards;
}

.scene.open .p1{animation:fall1 2.5s ease-out}
.scene.open .p2{animation:fall2 2.8s ease-out}
.scene.open .p3{animation:fall3 2.4s ease-out}
.scene.open .p4{animation:fall4 2.7s ease-out}
.scene.open .p5{animation:fall5 2.6s ease-out}
.scene.open .p6{animation:fall6 2.5s ease-out}
.scene.open .p7{animation:fall7 2.8s ease-out}

.close-button{
border:0;
background:none;
color:#885b66;
font:500 8px Montserrat,sans-serif;
letter-spacing:2.5px;
border-bottom:1px solid #c8958f;
padding:7px 2px 6px;
margin-top:18px;
cursor:pointer;
opacity:0;
pointer-events:none;
transition:.4s;
}

.close-button:hover{
color:var(--wine-deep);
border-color:var(--wine);
}

.close-button.show{
opacity:1;
pointer-events:auto;
}

footer{
font-size:7px;
font-weight:500;
letter-spacing:2.5px;
color:rgba(111,75,84,.55);
margin-top:30px;
}

@keyframes petalsVisible{
0%{opacity:0}
10%{opacity:1}
75%{opacity:1}
100%{opacity:0}
}

@keyframes fall1{to{transform:translate(-55px,180px) rotate(250deg);opacity:0}}
@keyframes fall2{to{transform:translate(-25px,195px) rotate(190deg);opacity:0}}
@keyframes fall3{to{transform:translate(60px,180px) rotate(240deg);opacity:0}}
@keyframes fall4{to{transform:translate(35px,190px) rotate(200deg);opacity:0}}
@keyframes fall5{to{transform:translate(-40px,175px) rotate(270deg);opacity:0}}
@keyframes fall6{to{transform:translate(45px,180px) rotate(220deg);opacity:0}}
@keyframes fall7{to{transform:translate(70px,160px) rotate(290deg);opacity:0}}

@media(max-width:760px){

main{
padding:34px 10px 24px;
justify-content:flex-start;
}

header{
margin-bottom:29px;
}

.monogram{
font-size:10px;
margin-bottom:10px;
}

.eyebrow{
font-size:7px;
letter-spacing:4.3px;
}

header h1{
font-size:38px;
margin:8px 0 10px;
}

header h1 i{
font-size:29px;
}

.header-date span{
width:42px;
}

.header-date b{
font-size:7px;
letter-spacing:3px;
}

header p{
font-size:15px;
margin-top:9px;
}

.scene{
width:100%;
height:340px;
}

.envelope{
width:min(344px,94vw);
height:224px;
}

.lining{
height:146px;
}

.flap{
height:140px;
}

.card-shadow{
left:20px;
right:20px;
height:170px;
bottom:10px;
}

.seal-wrap{
width:76px;
height:76px;
top:110px;
}

.seal-wrap span{
font-size:5.5px;
letter-spacing:1.5px;
top:calc(100% + 8px);
}

.invitation{
width:min(314px,86vw);
min-height:550px;
transform:translateY(207px) scale(.91);
}

.content{
padding:34px 24px 23px;
}

.gold-frame{
inset:14px;
}

.flower-corner{
width:111px;
}

.top-flower{
left:-34px;
top:-30px;
}

.bottom-flower{
right:-34px;
bottom:-30px;
}

.blessing{
font-size:6.5px;
letter-spacing:2.1px;
}

.invite-text{
font-size:14px;
}

.content h2{
font-size:40px;
margin:16px 0 14px;
}

.content h2 i{
font-size:21px;
}

.ornament{
margin-bottom:15px;
}

.ornament span{
width:52px;
}

.date-grid{
gap:10px;
margin-bottom:15px;
}

.date-side{
width:58px;
padding:7px 4px 6px;
}

.date-side small{
font-size:6px;
letter-spacing:1.7px;
}

.date-side strong{
font-size:23px;
}

.date-side .time{
font-size:13px;
}

.date-center{
min-width:72px;
}

.date-center span,
.date-center b{
font-size:8px;
letter-spacing:2.2px;
}

.event-label{
font-size:6px;
letter-spacing:2.1px;
}

.venue{
font-size:18px;
letter-spacing:4px;
}

.message-wrap{
margin:9px 0 15px;
gap:9px;
}

.message-wrap span{
width:8px;
}

.message{
font-size:12px;
white-space:normal;
}

.links a{
min-height:69px;
padding:8px 3px;
}

.link-symbol{
font-size:18px;
}

.links strong{
font-size:8px;
}

.links small{
font-size:4.5px;
}

.arrow{
font-size:9px;
}

.signature{
font-size:17px;
margin-top:12px;
}

.scene.open{
height:677px;
}

.scene.open .invitation{
transform:translateY(-111px) scale(1);
}

footer{
margin-top:26px;
font-size:6px;
}
}

@media(max-width:365px){

.envelope{
width:322px;
height:210px;
}

.flap{
height:132px;
}

.seal-wrap{
width:70px;
height:70px;
top:103px;
}

.seal-wrap span{
font-size:5px;
letter-spacing:1.2px;
}

.invitation{
width:296px;
}

.content{
padding-left:19px;
padding-right:19px;
}

.content h2{
font-size:38px;
}

.date-grid{
gap:7px;
}

.date-side{
width:54px;
}

.message{
font-size:11.5px;
}

.links strong{
font-size:7.7px;
}
}
/* Ajustes de compatibilidade para celular */
@media (max-width:760px){
  .page-bg{
    background-attachment:scroll;
    background-position:center top;
  }
  body:after,
  .invitation-paper,
  .envelope-paper{
    background-size:320px 320px;
  }
  .scene,
  .envelope,
  .invitation{
    max-width:100%;
  }
}

/* =========================================================
   CROSS-BROWSER / MODO ESCURO
   Mantém a identidade visual sem criar outra paleta.
   ========================================================= */
html,
body{
  color-scheme:only light;
}

body,
.page-bg,
.scene,
.envelope,
.invitation,
.back,
.flap,
.left-fold,
.right-fold,
.bottom-fold,
.lining,
.links,
.links a{
  forced-color-adjust:none;
}

.page-bg,
.invitation,
.back,
.flap,
.left-fold,
.right-fold,
.bottom-fold,
.lining{
  filter:none;
}

@media (prefers-color-scheme:dark){
  html,
  body{
    color-scheme:only light;
    background:#f7efeb;
  }

  .page-bg,
  .invitation,
  .back,
  .flap,
  .left-fold,
  .right-fold,
  .bottom-fold,
  .lining{
    filter:none !important;
  }
}


/* =========================================================
   BOTÕES DO CONVITE
   Localização / Confirmar presença / Lista de presentes
   ========================================================= */

.links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  border:0;
  background:transparent;
  margin-top:6px;
}

.links a{
  min-height:82px;
  padding:12px 8px;
  border:1px solid #d9b4ad !important;
  border-radius:10px;
  background:linear-gradient(145deg,#fff8f5,#f3e1dc) !important;
  box-shadow:
    0 4px 10px rgba(103,54,76,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  color:#67364c !important;
  font-family:Montserrat,sans-serif;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.links a+a{
  border-left:1px solid #d9b4ad !important;
}

.links a:before{
  display:none !important;
}

.links a:hover{
  transform:translateY(-2px);
  background:linear-gradient(145deg,#74415a,#5e3248) !important;
  border-color:#74415a !important;
  color:#fffaf5 !important;
  box-shadow:0 7px 16px rgba(103,54,76,.18);
}

.links a:active{
  transform:translateY(0) scale(.98);
}

.link-symbol{
  font-family:Montserrat,sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1;
  color:#b67876 !important;
  margin-bottom:2px;
}

.links a:hover .link-symbol{
  color:#e7c98f !important;
}

.links a div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.links small{
  font-family:Montserrat,sans-serif;
  font-size:6px;
  font-weight:600;
  letter-spacing:1.4px;
  color:#9f747b !important;
}

.links strong{
  font-family:Montserrat,sans-serif;
  font-size:9px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.2px;
  color:#67364c !important;
}

.links a:hover small,
.links a:hover strong{
  color:#fffaf5 !important;
}

.arrow{
  font-family:Montserrat,sans-serif;
  font-size:10px;
  font-weight:600;
  opacity:.72;
}

/* Mobile */
@media(max-width:760px){

  .links{
    gap:6px;
  }

  .links a{
    min-height:72px;
    padding:9px 4px;
    border-radius:8px;
  }

  .link-symbol{
    font-size:16px;
  }

  .links small{
    font-size:4.5px;
    letter-spacing:1px;
  }

  .links strong{
    font-size:7px;
    line-height:1.25;
  }

  .arrow{
    font-size:8px;
  }
}