*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5efe4;color:#30372f;font-family:Manrope,sans-serif}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input,select,textarea{font:inherit}.opening{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 50% 38%,#fbf7ee 0,#efe4d2 62%,#e4d6bf 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;transition:opacity 1s,visibility 1s}.opening.done{opacity:0;visibility:hidden;pointer-events:none}.opening-copy{text-align:center;position:absolute;top:7vh;z-index:5}.opening-copy span,.section-intro>span,.story-title>span,.dress-copy>span,.gifts-inner>span,.rsvp-card>span{font-size:11px;letter-spacing:.34em}.opening-copy p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;margin:10px}.opening-leaf{position:absolute;font-family:serif;font-size:180px;color:#74806b1c}.leaf-a{left:-25px;top:2%;transform:rotate(-35deg)}.leaf-b{right:-20px;bottom:3%;transform:rotate(145deg)}.envelope-stage{width:min(580px,88vw);height:390px;display:flex;align-items:flex-end;justify-content:center;perspective:1400px}.envelope{position:relative;width:min(520px,86vw);height:300px;filter:drop-shadow(0 30px 30px #6d5d4433);transform-style:preserve-3d}.envelope-back{position:absolute;inset:0;background:#d9c7aa;border-radius:3px}.envelope-front{position:absolute;inset:0;z-index:4;clip-path:polygon(0 22%,50% 68%,100% 22%,100% 100%,0 100%);background:linear-gradient(145deg,#e8d9c1,#d5c09f)}.envelope-flap{position:absolute;inset:0;z-index:6;background:#eadbc4;clip-path:polygon(0 0,100% 0,50% 63%);transform-origin:top;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),z-index .1s .55s}.wax{position:absolute;z-index:7;left:50%;top:52%;width:72px;height:72px;border-radius:50%;transform:translate(-50%,-50%);background:#69745f;color:#f4ead8;display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond";font-size:25px;box-shadow:inset 0 0 0 5px #ffffff18,0 5px 10px #0002;transition:.45s}.wax span{font-size:14px;margin:0 2px}.letter{position:absolute;z-index:3;left:7%;right:7%;top:10%;height:255px;background:#fbf7ee;box-shadow:0 8px 25px #55462d26;transition:transform 1.35s cubic-bezier(.16,.8,.18,1),width 1s,height 1s,left 1s,top 1s}.letter-inner{height:100%;border:1px solid #9a927d66;margin:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.letter small{text-transform:uppercase;letter-spacing:.3em}.letter h1{font:500 42px/1 "Cormorant Garamond";margin:13px}.letter h1 i{font-weight:400;color:#76816c}.letter-rule{width:40px;border-top:1px solid #8c927f}.letter p{font-family:"Cormorant Garamond";font-size:20px;margin:12px 0 2px}.letter span{font-size:10px;letter-spacing:.2em;text-transform:uppercase}.opening.open .envelope-flap{transform:rotateX(180deg);z-index:1}.opening.open .wax{opacity:0;transform:translate(-50%,-50%) scale(.6)}.opening.open .letter{transform:translateY(-205px) scale(1.12);z-index:5}.opening.transform .letter{position:fixed;left:0;top:0;width:100vw;height:100vh;transform:none;background:#f5efe4;transition:all .9s cubic-bezier(.7,0,.2,1)}.opening.transform .letter-inner{opacity:0;transition:.45s}.open-btn{border:0;background:#596652;color:#fff;padding:15px 25px;margin-top:22px;display:flex;gap:30px;align-items:center;cursor:pointer;letter-spacing:.08em;z-index:10;transition:.3s}.open-btn:hover{transform:translateY(-3px);background:#46523f}.opening.open .open-btn,.opening.open .opening-hint{opacity:0;pointer-events:none}.opening-hint{font-size:10px;letter-spacing:.18em;margin-top:12px}.page{opacity:0;transition:opacity .7s}.page.ready{opacity:1}.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#74806b;z-index:100}.sound{position:fixed;right:22px;bottom:22px;z-index:50;width:45px;height:45px;border-radius:50%;border:1px solid #fff8;background:#5b6758e8;color:#fff;cursor:pointer}.hero{height:100svh;min-height:650px;position:relative;overflow:hidden;color:white}.hero-img{height:115%;object-fit:cover;position:absolute;inset:-7% 0 0;animation:heroZoom 18s ease-in-out infinite alternate}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#24302535,#24302525 35%,#20271fbb)}@keyframes heroZoom{to{transform:scale(1.08) translateY(2%)}}nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:28px 5vw;align-items:center;border-bottom:1px solid #ffffff33}.brand{font:500 28px "Cormorant Garamond"}nav div{display:flex;gap:30px}nav div a{font-size:10px;letter-spacing:.15em;text-transform:uppercase}.hero-copy{position:absolute;z-index:4;left:7vw;bottom:16vh}.hero-copy>span{font-size:10px;letter-spacing:.35em}.hero-copy h1{font:500 clamp(64px,10vw,145px)/.8 "Cormorant Garamond";margin:25px 0}.hero-copy em{font-weight:400;color:#e5d5b9}.hero-copy p{letter-spacing:.3em;text-transform:uppercase;font-size:11px}.down{position:absolute;right:6vw;bottom:6vh;z-index:4;font-size:11px;letter-spacing:.18em;text-transform:uppercase}.down b{margin-left:15px}.count-section,.details,.schedule,.gallery{padding:120px 7vw}.section-intro{text-align:center;max-width:800px;margin:0 auto 70px}.section-intro h2,.story-title h2,.dress-copy h2,.gifts-inner h2,.rsvp-card h2{font:500 clamp(45px,6vw,78px)/.95 "Cormorant Garamond";margin:20px 0}.section-intro em{color:#74806b;font-weight:400}.countdown{display:grid;grid-template-columns:repeat(4,1fr);max-width:900px;margin:auto;border-top:1px solid #a99f8e;border-bottom:1px solid #a99f8e}.countdown div{text-align:center;padding:35px 10px;border-right:1px solid #a99f8e}.countdown div:last-child{border:0}.countdown strong{font:400 clamp(48px,7vw,88px) "Cormorant Garamond";display:block}.countdown span{text-transform:uppercase;letter-spacing:.2em;font-size:9px}.story{padding:130px 7vw;background:#ebe1d0}.story-title{text-align:center;max-width:680px;margin:auto}.story-title p{line-height:1.8;color:#697064}.timeline{max-width:1100px;margin:100px auto 0;position:relative}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#a5aa9c}.timeline-line i{display:block;width:2px;height:0;background:#5e6a57;transition:height .1s}.moment{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;min-height:580px;position:relative}.moment-photo{overflow:hidden;box-shadow:0 25px 60px #6b5a4230}.moment-photo img{height:430px;object-fit:cover;transition:transform 1.2s}.moment-photo:hover img{transform:scale(1.05)}.moment-copy{padding:30px}.moment-copy time{font-size:10px;letter-spacing:.28em;color:#78816e}.moment-copy h3{font:500 46px/1 "Cormorant Garamond";margin:20px 0}.moment-copy p{line-height:1.8;color:#697064}.dot{position:absolute;width:13px;height:13px;border:3px solid #ebe1d0;background:#68745f;border-radius:50%;left:50%;transform:translateX(-50%);box-shadow:0 0 0 1px #68745f}.date-banner{height:850px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.date-photo{position:absolute;inset:-10%;}.date-photo img{height:120%;object-fit:cover}.date-banner:after{content:"";position:absolute;inset:0;background:#28302855}.date-card{position:relative;z-index:2;width:min(430px,86vw);background:#f7f0e5eb;backdrop-filter:blur(8px);text-align:center;padding:55px;color:#394137}.date-card>span{font-size:10px;letter-spacing:.3em}.date-card h2{font:400 130px/.8 "Cormorant Garamond";margin:25px 0 5px}.date-card p{font:italic 26px "Cormorant Garamond"}.date-card div{width:45px;border-top:1px solid #78816e;margin:25px auto}.date-card strong,.date-card small{display:block;letter-spacing:.15em}.date-card small{font-size:10px;margin-top:10px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1100px;margin:auto}.detail-card{background:#ebe1d0}.detail-card img{height:420px;object-fit:cover}.detail-card div{padding:35px}.detail-card span{font-size:9px;letter-spacing:.25em}.detail-card h3{font:500 40px "Cormorant Garamond";margin:15px 0}.detail-card p{color:#697064}.detail-card a{display:inline-block;margin-top:10px;border-bottom:1px solid}.schedule{background:#566252;color:#f7f0e5}.schedule-row{display:grid;grid-template-columns:repeat(5,1fr);max-width:1100px;margin:auto}.schedule-row div{text-align:center;border-right:1px solid #ffffff30;padding:25px 5px}.schedule-row div:last-child{border:0}.schedule-row b{display:block;font:400 38px "Cormorant Garamond"}.schedule-row span{font-size:9px;letter-spacing:.18em;text-transform:uppercase}.dress{display:grid;grid-template-columns:1fr 1fr;min-height:750px}.dress-copy{padding:10vw 8vw;display:flex;flex-direction:column;justify-content:center}.dress-copy p{line-height:1.8;color:#697064}.dress-img{overflow:hidden}.dress-img img{height:100%;object-fit:cover}.swatches{display:flex;gap:12px;margin-top:25px}.swatches i{width:35px;height:35px;border-radius:50%;background:#e9ddc8}.swatches i:nth-child(2){background:#c5b89d}.swatches i:nth-child(3){background:#8c9279}.swatches i:nth-child(4){background:#5e6a57}.swatches i:nth-child(5){background:#343d34}.gallery{background:#ebe1d0}.gallery-grid{max-width:1150px;margin:auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:170px;gap:16px}.g{border:0;padding:0;overflow:hidden;cursor:pointer;background:none}.g img{height:100%;object-fit:cover;transition:.8s}.g:hover img{transform:scale(1.06)}.g1{grid-column:1/6;grid-row:1/4}.g2{grid-column:6/10;grid-row:1/3}.g3{grid-column:10/13;grid-row:1/3}.g4{grid-column:6/9;grid-row:3/5}.g5{grid-column:9/13;grid-row:3/5}.g6{grid-column:1/6;grid-row:4/5}.gifts{padding:130px 7vw;background:#f7f0e5}.gifts-inner{max-width:760px;margin:auto;text-align:center}.gifts-inner>p{line-height:1.8}.gifts details{margin-top:40px;text-align:left;border-top:1px solid #9d998e;border-bottom:1px solid #9d998e}.gifts summary{padding:22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.gifts details div{padding:0 22px 22px}.gifts details strong{font-size:10px;letter-spacing:.2em}.rsvp{min-height:900px;position:relative;display:flex;align-items:center;justify-content:center;padding:80px 20px}.rsvp>img{position:absolute;inset:0;height:100%;object-fit:cover}.rsvp-overlay{position:absolute;inset:0;background:#26312699}.rsvp-card{position:relative;z-index:2;background:#f7f0e5ed;width:min(560px,92vw);padding:55px}.rsvp-card>p{line-height:1.7}.rsvp-card label{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;margin-top:20px}.rsvp-card input,.rsvp-card select,.rsvp-card textarea{width:100%;border:0;border-bottom:1px solid #8f9487;background:transparent;padding:12px 0;outline:none;text-transform:none;letter-spacing:0}.rsvp-card textarea{height:80px;resize:none}.rsvp-card button{width:100%;border:0;background:#596652;color:white;padding:17px;margin-top:28px;cursor:pointer}.thanks{display:none;text-align:center;margin-top:25px;font-family:"Cormorant Garamond";font-size:22px}.rsvp-card.sent .thanks{display:block}.rsvp-card.sent button{display:none}footer{padding:80px;text-align:center;background:#30382f;color:#eee4d2}footer>span,footer>i{font:400 42px "Cormorant Garamond"}footer p{letter-spacing:.2em;font-size:10px}footer small{opacity:.6}.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .9s,transform .9s}.reveal{transform:translateY(35px)}.reveal-left{transform:translateX(-55px)}.reveal-right{transform:translateX(55px)}.visible{opacity:1!important;transform:none!important}.lightbox{position:fixed;inset:0;z-index:500;background:#172017ee;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}.lightbox.open{opacity:1;visibility:visible}.lightbox img{max-width:88vw;max-height:85vh;width:auto}.lightbox button{position:absolute;right:30px;top:20px;background:none;border:0;color:white;font-size:45px;cursor:pointer}@media(max-width:800px){nav div{display:none}.envelope-stage{height:320px}.envelope{height:230px}.letter{height:205px}.letter h1{font-size:32px}.opening.open .letter{transform:translateY(-160px) scale(1.08)}.hero-copy{left:6vw;bottom:17vh}.hero-copy h1{font-size:17vw}.count-section,.details,.schedule,.gallery,.story{padding:90px 22px}.countdown{grid-template-columns:1fr 1fr}.countdown div:nth-child(2){border-right:0}.countdown div:nth-child(-n+2){border-bottom:1px solid #a99f8e}.timeline-line{left:18px}.moment{grid-template-columns:1fr;gap:25px;min-height:auto;margin-bottom:90px;padding-left:45px}.moment.right .moment-copy{order:2}.moment-photo img{height:340px}.dot{left:18px}.moment-copy{padding:5px}.moment-copy h3{font-size:38px}.detail-grid,.dress{grid-template-columns:1fr}.detail-card img{height:330px}.schedule-row{grid-template-columns:1fr}.schedule-row div{border-right:0;border-bottom:1px solid #ffffff30}.dress-img{height:550px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:230px}.g{grid-column:auto!important;grid-row:auto!important}.rsvp-card{padding:35px 25px}.date-banner{height:700px}}
/* =========================================================
SOBRE V2 — CERRADO REALISTA + APERTURA EN DOS TIEMPOS
========================================================= */
.envelope-stage{
height: 420px;
align-items: center;
}
.envelope{
width: min(540px, 88vw);
height: 315px;
filter: drop-shadow(0 34px 34px rgba(76,61,39,.20));
}
/* Cuerpo trasero del sobre */
.envelope-back{
z-index: 1;
overflow: hidden;
background:
linear-gradient(145deg,#eadcc7 0%,#dfceb3 58%,#d4bea0 100%);
border: 1px solid rgba(108,91,65,.13);
}
/* La carta inicia realmente metida dentro del sobre */
.letter{
z-index: 2;
left: 7.5%;
right: 7.5%;
top: 28px;
height: 255px;
transform: translateY(72px) scale(.96);
transform-origin: center bottom;
opacity: .99;
transition:
transform 1.05s cubic-bezier(.18,.78,.18,1),
box-shadow .8s ease,
width 1s ease,
height 1s ease,
left 1s ease,
top 1s ease;
}
/* Bolsillo delantero: cubre la carta cuando el sobre está cerrado */
.envelope-front{
z-index: 4;
inset: 0;
clip-path: polygon(
0 25%,
50% 67%,
100% 25%,
100% 100%,
0 100%
);
background:
linear-gradient(155deg,#eadcc6 0%,#ddc9aa 55%,#d0b794 100%);
border-radius: 0 0 4px 4px;
}
/* Laterales sutiles para dar sensación de papel plegado */
.envelope-front::before,
.envelope-front::after{
content:"";
position:absolute;
bottom:0;
width:54%;
height:78%;
pointer-events:none;
}
.envelope-front::before{
left:0;
clip-path:polygon(0 0,100% 55%,0 100%);
background:linear-gradient(130deg,rgba(255,255,255,.20),rgba(255,255,255,0));
}
.envelope-front::after{
right:0;
clip-path:polygon(100% 0,0 55%,100% 100%);
background:linear-gradient(230deg,rgba(118,91,57,.06),rgba(118,91,57,0));
}
/* Solapa cerrada: cubre el centro del sobre por completo */
.envelope-flap{
z-index: 6;
inset: 0;
clip-path: polygon(0 0,100% 0,50% 64%);
background:
linear-gradient(165deg,#f0e4d1 0%,#e3d0b4 100%);
border-top: 1px solid rgba(255,255,255,.55);
transform-origin: 50% 0%;
transform: rotateX(0deg);
backface-visibility: hidden;
transition:
transform .85s cubic-bezier(.32,.02,.18,1),
z-index 0s linear .43s;
}
/* Sello más centrado en la unión de la solapa */
.wax{
z-index: 8;
top: 52%;
width: 68px;
height: 68px;
transition:
opacity .35s ease,
transform .45s cubic-bezier(.2,.8,.2,1);
}
/* ETAPA 1: solamente abre la solapa */
.opening.open .envelope-flap{
transform: rotateX(-180deg);
z-index: 1;
}
.opening.open .wax{
opacity: 0;
transform: translate(-50%,-50%) scale(.65) rotate(-8deg);
}
/* En la primera etapa la carta sigue dentro. */
.opening.open .letter{
transform: translateY(72px) scale(.96);
}
/* ETAPA 2: después de abrir, la carta sale suavemente */
.opening.letter-out .letter{
z-index: 7;
transform: translateY(-175px) scale(1.06);
box-shadow: 0 30px 65px rgba(80,61,38,.20);
}
/* ETAPA 3: la propia tarjeta se convierte en la pantalla */
.opening.transform .letter{
position: fixed;
z-index: 20;
left: 0;
right: auto;
top: 0;
width: 100vw;
height: 100vh;
transform: none;
background:#f5efe4;
box-shadow:none;
transition:
left .85s cubic-bezier(.72,0,.18,1),
top .85s cubic-bezier(.72,0,.18,1),
width .85s cubic-bezier(.72,0,.18,1),
height .85s cubic-bezier(.72,0,.18,1),
transform .85s cubic-bezier(.72,0,.18,1);
}
.opening.transform .letter-inner{
opacity:0;
transform:scale(.985);
transition:opacity .35s ease,transform .45s ease;
}
@media(max-width:800px){
.envelope-stage{
height:340px;
}
.envelope{
width:min(390px,88vw);
height:235px;
}
.letter{
top:20px;
height:200px;
transform:translateY(54px) scale(.95);
}
.opening.open .letter{
transform:translateY(54px) scale(.95);
}
.opening.letter-out .letter{
transform:translateY(-135px) scale(1.04);
}
.wax{
width:58px;
height:58px;
}
}