*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-tap-highlight-color:transparent;font-display:swap;width:100%;height:100%;margin:0;padding:0;display:block}#main-container{opacity:0;visibility:hidden;background:url(/background.jpg) 50%/cover no-repeat fixed;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100dvh;font-family:Caveat,cursive;display:flex;position:relative;overflow:hidden}#main-container.ready{opacity:1;visibility:visible;transition:opacity .25s}#main-container:before{content:"";backdrop-filter:none;z-index:0;background:#ffffff2e;position:absolute;inset:0}.view-main,.view-letter{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:relative}@keyframes slideInRight{0%{opacity:0;transform:translate(60px)scale(.97)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(-60px)scale(.97)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-60px)scale(.97)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(60px)scale(.97)}}.view-letter{opacity:0;pointer-events:none;z-index:20;-webkit-overflow-scrolling:touch;position:absolute;inset:0;overflow-y:auto}#main-container.show-letter .view-letter{pointer-events:all;justify-content:flex-start;padding:1.5rem 0 2rem;animation:.65s cubic-bezier(.4,0,.2,1) forwards slideInRight}#main-container.show-letter .view-main{pointer-events:none;animation:.65s cubic-bezier(.4,0,.2,1) forwards slideOutLeft}#main-container:not(.show-letter) .view-main{animation:.65s cubic-bezier(.4,0,.2,1) forwards slideInLeft}#main-container:not(.show-letter) .view-letter{animation:.65s cubic-bezier(.4,0,.2,1) forwards slideOutRight}.letter-content{transform-origin:50%;will-change:transform, opacity;text-align:center;background-color:#fdfbf7;background-image:url(/letter_background.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border:2px solid #e5dbca;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:clamp(350px,92vw,620px);min-height:78dvh;padding:clamp(32px,6.5vw,62px);display:flex;position:relative;box-shadow:0 10px 30px #0000002e}@media (width>=768px){.letter-content{width:clamp(500px,72vw,920px);min-height:68dvh;max-height:95dvh}}.letter-content.invitation-card{min-height:auto;margin-bottom:2rem}@media (width>=768px){.letter-content.invitation-card{min-height:auto;max-height:none}}@media (width<=768px){.letter-content.invitation-card{padding-left:clamp(42px,8vw,62px);padding-right:clamp(42px,8vw,62px)}}@keyframes letterPop{0%{opacity:0;transform:scale(.88)rotate(-1.5deg)}60%{transform:scale(1.02)rotate(.8deg)}to{opacity:1;transform:scale(1)rotate(0)}}#main-container.show-letter .letter-content{animation:.65s cubic-bezier(.34,1.56,.64,1) forwards letterPop}.hero{text-align:center;z-index:10;margin-bottom:clamp(12px,2vh,20px);position:relative}.nombres{color:#5d5d5a;font-size:clamp(2.2rem,6vw,4rem);animation:1s both fadeInDown}.subtitulo{letter-spacing:3px;text-transform:uppercase;color:#8b8b8b;font-size:clamp(.75rem,2vw,1rem);animation:1.2s both fadeInDown}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.photos-container{z-index:10;flex-direction:row;justify-content:center;align-items:center;gap:clamp(10px,3vw,24px);margin:clamp(10px,2vh,20px) auto;display:flex;position:relative}.marco-foto{background-color:#fff;background-position:50%;background-size:cover;border:3px solid #d4d4bc;border-radius:80px;width:clamp(105px,26vw,185px);height:clamp(150px,34vw,260px);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;animation:1s both fadeInUp;box-shadow:0 8px 24px #00000026}.marco-foto:nth-child(2){animation-delay:.15s}.marco-foto:hover{transform:scale(1.06)translateY(-4px);box-shadow:0 16px 36px #0003}.img-1{background-image:url(/husband.jpg)}.img-2{background-image:url(/wife.jpeg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.letter-content h2{color:#5d5d5a;margin-bottom:clamp(12px,2vh,20px);font-size:clamp(1.6rem,4vw,2.4rem)}.letter-text{color:#4a4a4a;max-width:52ch;margin-bottom:clamp(20px,4vh,36px);font-size:clamp(.95rem,2.5vw,1.15rem);line-height:1.7}.arrow-btn,.back-btn{backdrop-filter:blur(8px);cursor:pointer;background:#ffffffa6;border:1px solid #d4d4bc;border-radius:50%;justify-content:center;align-items:center;width:clamp(44px,8vw,60px);height:clamp(44px,8vw,60px);padding:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .25s;display:flex;box-shadow:0 4px 12px #0000001f}.arrow-btn{background:#d8d4c0;margin-top:auto}.back-btn{background:#d8d4c0}.arrow-btn:hover,.back-btn:hover{background:#fffffff2;transform:scale(1.1);box-shadow:0 8px 20px #0000002e}.btn-icon{pointer-events:none;filter:brightness(0);width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);transition:transform .3s}.arrow-btn .btn-icon,.back-btn .btn-icon{transform:rotate(90deg)}.back-btn-wrapper{justify-content:center;margin-top:2rem;display:flex}.play-btn{backdrop-filter:blur(8px);cursor:pointer;z-index:50;background:#ffffffa6;border:1px solid #d4d4bc;border-radius:50%;justify-content:center;align-items:center;width:clamp(40px,7vw,54px);height:clamp(40px,7vw,54px);padding:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .25s;display:flex;position:absolute;bottom:3vh;left:auto;right:3vh;transform:none;box-shadow:0 4px 12px #0000001f}.play-btn:hover{background:#fffffff2;transform:scale(1.1);box-shadow:0 8px 20px #0000002e}.envelope-screen{z-index:200;cursor:pointer;background:url(/background.jpg) 50%/cover no-repeat;flex-direction:column;justify-content:center;align-items:center;gap:clamp(24px,5vh,48px);animation:.9s both envFadeIn;display:flex;position:fixed;inset:0}.envelope-screen:before{content:"";backdrop-filter:none;background:#ffffff2e;position:absolute;inset:0}.envelope-hint{z-index:10;color:#4a3a2a;letter-spacing:3px;text-shadow:0 1px 4px #fff9;margin-left:660px;font-family:Caveat,cursive;font-size:clamp(1.1rem,3.5vw,1.6rem);font-weight:700;transition:opacity .4s;animation:2.2s ease-in-out 3 hintFloat;position:relative}.envelope-hint.fade-out{opacity:0}@keyframes hintFloat{0%,to{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}.envelope-wrap{z-index:10;perspective:900px;filter:drop-shadow(0 12px 28px #00000038);width:clamp(240px,60vw,360px);height:clamp(160px,40vw,240px);margin-left:660px;animation:3s ease-in-out 3 envFloat;position:relative}@keyframes envFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.env-base{z-index:1;background:linear-gradient(160deg,#cfc4aa 0%,#c9bfa6 100%);position:absolute;inset:0}.env-letter{color:#8b7355;letter-spacing:1px;z-index:3;background:linear-gradient(160deg,#fdfbf7 0%,#f5efe3 100%);border:1px solid #e5dbca;border-radius:4px;justify-content:center;align-items:center;width:80%;height:90%;font-family:Caveat,cursive;font-size:clamp(.9rem,2.5vw,1.15rem);display:flex;position:absolute;bottom:0;left:10%}.env-flap{pointer-events:none;position:absolute}.left-flap,.right-flap,.bottom-flap{z-index:5}.bottom-flap{clip-path:polygon(0% 100%,50% 0%,100% 100%);background:linear-gradient(#cfc4aa 0%,#d4c9b0 100%);width:100%;height:55%;bottom:0;left:0}.left-flap{clip-path:polygon(0% 0%,0% 100%,100% 100%);background:linear-gradient(135deg,#c9bfa6 0%,#bdb19a 100%);width:51%;height:100%;top:0;left:0}.right-flap{clip-path:polygon(100% 0%,0% 100%,100% 100%);background:linear-gradient(225deg,#c9bfa6 0%,#bdb19a 100%);width:51%;height:100%;top:0;right:0}.top-flap{clip-path:polygon(0% 0%,100% 0%,50% 100%);transform-origin:top;width:100%;height:50%;transform-style:preserve-3d;z-index:6;background:linear-gradient(170deg,#d4c9b0 0%,#bfb49a 100%);transition:transform .7s cubic-bezier(.4,0,.2,1),z-index 0s .2s;top:0;left:0}.envelope-screen.opening .top-flap{z-index:2;transition:transform .7s cubic-bezier(.4,0,.2,1),z-index;transform:rotateX(-175deg)}.envelope-screen.opening .envelope-wrap{animation:none}.envelope-screen.opening .env-letter{animation:.9s cubic-bezier(.4,0,.2,1) .3s forwards letterRise}.envelope-screen.opening{animation:.55s 1.1s forwards envFadeOut}@keyframes letterRise{0%{opacity:1;transform:translateY(0)}75%{opacity:.8;transform:translateY(-110%)}to{opacity:0;transform:translateY(-150%)}}@keyframes envFadeIn{0%{opacity:0}to{opacity:1}}@keyframes envFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}.letter-scroll-wrap{text-align:center;background:#fdfbf7 url(/letter_background.jpg) 50%/cover;border:2px solid #e5dbca;border-radius:6px;flex-direction:column;align-items:center;width:clamp(350px,92vw,620px);margin:0 auto 2rem;padding:clamp(36px,6.5vw,62px) clamp(26px,5vw,52px);display:flex;position:relative;box-shadow:0 10px 30px #0000002e}@media (width>=768px){.letter-scroll-wrap{width:clamp(500px,72vw,920px)}}.section-divider{background:#d4c9b0;width:60px;height:2px;margin:2.5rem auto;position:relative}.section-divider:after{content:"✶";color:#b8a88a;background:#fdfbf7;padding:0 10px;font-size:1.2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.event-section{text-align:center;content-visibility:auto;contain-intrinsic-size:200px;width:100%;padding:.5rem 0}.section-title{color:#5d5d5a;margin-bottom:1.5rem;font-family:Caveat,cursive;font-size:clamp(1.8rem,4vw,2.4rem);display:inline-block;position:relative}.section-title:after{content:"";background:#d4c9b0;width:50%;height:2px;margin:8px auto 0;display:block}.section-sub{color:#8b8b8b;letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem;font-family:Montserrat,sans-serif;font-size:clamp(.85rem,2vw,1rem)}.timeline{text-align:left;flex-direction:column;gap:1.5rem;max-width:480px;margin:0 auto;padding:.5rem 0;display:flex;position:relative}.timeline:before{content:"";background:linear-gradient(#d4c9b0,#c9bfa6);width:2px;position:absolute;top:0;bottom:0;left:24px}.timeline-item{align-items:flex-start;gap:1.2rem;display:flex;position:relative}.timeline-dot{z-index:1;background:#d4c9b0;border:3px solid #fdfbf7;border-radius:50%;flex-shrink:0;width:14px;height:14px;margin-top:4px;position:relative;box-shadow:0 0 0 2px #d4c9b0}.timeline-body{text-align:left;background:#fdfbf7a6;border:1px solid #e5dbca;border-radius:8px;flex:1;padding:12px 16px;transition:transform .3s,box-shadow .3s}.timeline-body:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000014}.timeline-time{color:#8b7355;letter-spacing:1px;margin-bottom:4px;font-family:Montserrat,sans-serif;font-size:clamp(.8rem,1.8vw,.95rem);font-weight:600}.timeline-body h4{color:#5d5d5a;margin-bottom:2px;font-family:Caveat,cursive;font-size:clamp(1.1rem,2.5vw,1.4rem)}.timeline-body p{color:#8b8b8b;font-family:Montserrat,sans-serif;font-size:clamp(.75rem,1.6vw,.85rem);line-height:1.4}.location-card{text-align:left;background:#fdfbf7a6;border:1px solid #e5dbca;border-radius:8px;max-width:480px;margin-bottom:1rem;margin-left:auto;margin-right:auto;padding:20px;transition:transform .3s,box-shadow .3s}.location-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0000001a}.location-card h4{color:#5d5d5a;margin-bottom:4px;font-family:Caveat,cursive;font-size:clamp(1.1rem,2.5vw,1.3rem)}.location-card p{color:#7a7a7a;font-family:Montserrat,sans-serif;font-size:clamp(.75rem,1.6vw,.85rem);line-height:1.5}.toggle-map-btn{color:#8b7355;cursor:pointer;background:0 0;border:1px solid #d4c9b0;border-radius:20px;margin-top:10px;padding:6px 18px;font-family:Montserrat,sans-serif;font-size:clamp(.75rem,1.6vw,.85rem);transition:background .25s,color .25s}.toggle-map-btn:hover{color:#fff;background:#d4c9b0}.map-wrap{border-radius:12px;max-width:580px;margin-top:0;margin-left:auto;margin-right:auto;display:none;overflow:hidden}.map-wrap.open{margin-top:1rem;animation:.4s mapFadeIn;display:block}@keyframes mapFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.map-wrap iframe{border:2px solid #e5dbca;border-radius:12px;width:100%;height:320px;display:block;box-shadow:0 4px 16px #0000001a}.hide-map-btn{color:#8b8b8b;cursor:pointer;background:0 0;border:none;margin:8px auto 0;padding:4px 12px;font-family:Montserrat,sans-serif;font-size:clamp(.7rem,1.5vw,.8rem);text-decoration:underline;transition:color .25s;display:block}.hide-map-btn:hover{color:#5d5d5a}.dress-code-grid{flex-wrap:wrap;justify-content:center;gap:1rem;max-width:560px;margin-top:.5rem;margin-left:auto;margin-right:auto;display:flex}.dress-item{text-align:center;background:#fdfbf7a6;border:1px solid #e5dbca;border-radius:12px;flex:1;min-width:120px;max-width:160px;padding:16px 20px;transition:transform .3s,box-shadow .3s,border-color .3s}.dress-item:hover{border-color:#d4c9b0;transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.dress-svg{width:36px;height:36px;margin:0 auto 8px;display:block}.dress-swatch{background:#f5c6d0;border:2px solid #000;border-radius:50%;width:36px;height:36px;margin:0 auto 8px;display:block}.dress-item span:last-child{color:#7a7a7a;font-family:Montserrat,sans-serif;font-size:clamp(.7rem,1.5vw,.8rem);line-height:1.3;display:block}.rsvp-section{text-align:center;width:100%;padding:1.5rem 0 .5rem}.rsvp-section p{color:#8b8b8b;margin-top:1rem;font-family:Montserrat,sans-serif;font-size:clamp(.75rem,1.6vw,.85rem);line-height:1.4}.whatsapp-btn{color:#fff;cursor:pointer;background:#25d366;border:none;border-radius:50px;align-items:center;gap:10px;padding:16px 32px;font-family:Montserrat,sans-serif;font-size:clamp(.95rem,2.2vw,1.1rem);font-weight:600;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;display:inline-flex;box-shadow:0 4px 16px #25d36659}.whatsapp-btn:hover{transform:scale(1.05);box-shadow:0 8px 24px #25d36673}.whatsapp-icon{flex-shrink:0;width:24px;height:24px}@media screen and (height<=500px) and (orientation:landscape){.letter-content{width:90vw;min-height:85vh;padding:15px 30px}.letter-content.invitation-card{min-height:auto}.hero{margin-bottom:8px}.nombres{font-size:2rem}.subtitulo{letter-spacing:2px;font-size:.7rem}.photos-container{gap:15px;margin:8px auto}.marco-foto{border-radius:50px;width:100px;height:140px}.letter-content h2{margin-bottom:8px;font-size:1.8rem}.letter-text{margin-bottom:15px;font-size:1.05rem;line-height:1.4}.arrow-btn,.back-btn{width:40px;height:40px}.envelope-hint{margin-bottom:10px;font-size:1.1rem;margin-left:35%!important}.envelope-wrap{width:280px;height:180px;margin-left:35%!important}.env-letter{font-size:.85rem}.letter-scroll-wrap{width:90vw;padding:20px 24px}.timeline:before{left:18px}.timeline-dot{width:12px;height:12px}.map-wrap iframe{height:220px}}@media (width<=480px){.dress-code-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}}@media (width<=768px){.envelope-hint,.envelope-wrap{margin-left:0}.letter-content{min-height:36dvh}.view-main .letter-content{padding:clamp(12px,2.5vw,24px) clamp(42px,8vw,62px)}.hero{margin-bottom:clamp(6px,1.2vh,12px)}.marco-foto{width:clamp(85px,20vw,130px);height:clamp(110px,26vw,150px)}.photos-container{gap:clamp(6px,2vw,14px);margin:clamp(6px,1vh,12px) auto}}