{"id":1462,"date":"2026-03-27T14:23:21","date_gmt":"2026-03-27T14:23:21","guid":{"rendered":"https:\/\/bodamariysimon.online\/boda\/?page_id=1462"},"modified":"2026-04-01T01:47:02","modified_gmt":"2026-04-01T01:47:02","slug":"save-the-date","status":"publish","type":"page","link":"https:\/\/bodamariysimon.online\/boda\/","title":{"rendered":"Save the Date"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1462\" class=\"elementor elementor-1462\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-004747f e-flex e-con-boxed e-con e-parent\" data-id=\"004747f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fac2de4 e-con-full e-flex e-con e-parent\" data-id=\"fac2de4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0dde47 elementor-widget elementor-widget-html\" data-id=\"b0dde47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"wedding-envelope-project\">\r\n    <style>\r\n        #wedding-envelope-project {\r\n            --pink-base: #EBD6D9;\r\n            --pink-dark: #D0B5B9;\r\n            --pink-light: #F9EAEC;\r\n            --bg-surface: #C2A8AB;\r\n            --olive-text: #5B6345;\r\n            --white-card: #FAF7F2;\r\n            --gold-light: #FCE39E;\r\n            --gold-base: #D4AF37;\r\n            --gold-dark: #997A15;\r\n            \r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 85vh; \r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 100px 50px; \r\n            box-sizing: border-box;\r\n            overflow: visible !important; \r\n            background-color: var(--bg-surface);\r\n            font-family: 'Cormorant Garamond', serif;\r\n        }\r\n\r\n        \/* Capa de ruido visual *\/\r\n        #wedding-envelope-project .noise-overlay {\r\n            position: absolute; inset: 0;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n            opacity: 0.12; mix-blend-mode: overlay;\r\n            pointer-events: none; z-index: 5;\r\n        }\r\n\r\n        #wedding-envelope-project .scene {\r\n            position: relative;\r\n            width: 88vw; max-width: 420px;\r\n            aspect-ratio: 5 \/ 7.2;\r\n            transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            transform-origin: center center;\r\n            z-index: 10;\r\n            overflow: visible;\r\n        }\r\n\r\n        #wedding-envelope-project .scene.is-zooming {\r\n            transform: scale(4.5) translateX(3%);\r\n            opacity: 0;\r\n        }\r\n\r\n        #wedding-envelope-project .envelope {\r\n            position: relative; width: 100%; height: 100%;\r\n            perspective: 2000px; \r\n            overflow: visible;\r\n        }\r\n\r\n        #wedding-envelope-project .layer { position: absolute; inset: 0; }\r\n\r\n        #wedding-envelope-project .env-back {\r\n            background: var(--pink-dark);\r\n            box-shadow: inset 0 0 80px rgba(0,0,0,0.5), 0 25px 50px rgba(0,0,0,0.3);\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* --- TARJETA (Restaurada animaci\u00f3n original) --- *\/\r\n        #wedding-envelope-project .env-card {\r\n            background: var(--white-card);\r\n            top: 3%; left: 3%; right: 3%; bottom: 3%;\r\n            border-radius: 5px;\r\n            box-shadow: 0 0 10px rgba(0,0,0,0.2);\r\n            z-index: 2;\r\n            display: flex; flex-direction: column;\r\n            justify-content: center; align-items: center;\r\n            transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 1.2s ease;\r\n            padding: 20px;\r\n        }\r\n\r\n        #wedding-envelope-project .env-card.is-lifted {\r\n            z-index: 20;\r\n            transform: translateX(12%) scale(1.02); \/* Traslaci\u00f3n original *\/\r\n            box-shadow: -10px 15px 30px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        #wedding-envelope-project .card-logo-container {\r\n            width: 100%; max-width: 150px;\r\n            margin-bottom: 25px;\r\n            display: flex; justify-content: center;\r\n        }\r\n        \r\n        #wedding-envelope-project .card-logo-container img {\r\n            width: 100%; height: auto;\r\n            display: block; object-fit: contain;\r\n        }\r\n\r\n        #wedding-envelope-project .olive-text { color: var(--olive-text); text-align: center; margin: 0; }\r\n        #wedding-envelope-project .card-pre {\r\n            font-family: 'Jost', sans-serif; text-transform: uppercase;\r\n            letter-spacing: 4px; font-size: 0.8rem; margin-bottom: 10px;\r\n        }\r\n        #wedding-envelope-project .card-title {\r\n            font-size: 2.8rem; font-weight: 300; letter-spacing: 5px; margin: 0; line-height: 1.1;\r\n        }\r\n\r\n        \/* --- SOLAPAS --- *\/\r\n        #wedding-envelope-project .flap-wrapper { position: absolute; inset: 0; pointer-events: none; }\r\n        #wedding-envelope-project .flap-shape { position: absolute; inset: 0; background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink-base) 60%, var(--pink-dark) 100%); }\r\n\r\n        #wedding-envelope-project .flap-top-wrapper { z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }\r\n        #wedding-envelope-project .flap-top { clip-path: polygon(0 0, 100% 0, 50% 50%); }\r\n\r\n        #wedding-envelope-project .flap-bottom-wrapper { z-index: 4; filter: drop-shadow(0 -4px 6px rgba(0,0,0,0.15)); }\r\n        #wedding-envelope-project .flap-bottom { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }\r\n\r\n        #wedding-envelope-project .flap-left-wrapper { z-index: 5; filter: drop-shadow(4px 0 8px rgba(0,0,0,0.2)); }\r\n        #wedding-envelope-project .flap-left { clip-path: polygon(0 0, 70% 50%, 0 100%); }\r\n\r\n        #wedding-envelope-project .gold-text {\r\n            background: linear-gradient(135deg, #C4A04D 0%, #B2911F 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            color: transparent;\r\n        }\r\n\r\n        #wedding-envelope-project .monogram-outer {\r\n            position: absolute;\r\n            top: 50%; left: 5%;\r\n            transform: translateY(-50%) rotate(-90deg);\r\n            font-size: 1.3rem; letter-spacing: 6px; font-weight: 400;\r\n        }\r\n\r\n        #wedding-envelope-project .env-flap-main {\r\n            z-index: 6;\r\n            transform-origin: right center;\r\n            transform-style: preserve-3d;\r\n            transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            filter: drop-shadow(-6px 0 15px rgba(0,0,0,0.25));\r\n        }\r\n\r\n        #wedding-envelope-project .env-flap-main.is-opening { transform: rotateY(165deg); }\r\n\r\n        #wedding-envelope-project .flap-right {\r\n            clip-path: polygon(100% 0, 38% 44%, 34% 50%, 38% 56%, 100% 100%);\r\n            background: linear-gradient(to left, var(--pink-light) 0%, var(--pink-base) 100%);\r\n        }\r\n\r\n        \/* --- SELLO --- *\/\r\n        #wedding-envelope-project .wax-seal {\r\n            position: absolute;\r\n            top: 50%; left: 34%;\r\n            transform: translate(-50%, -50%);\r\n            width: 80px; height: 80px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle at 40% 30%, var(--gold-light) 50%, var(--gold-base) 60%, var(--gold-dark) 100%);\r\n            box-shadow: -2px 8px 10px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.3);\r\n            cursor: pointer; pointer-events: auto;\r\n            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            display: flex; justify-content: center; align-items: center;\r\n        }\r\n\r\n        #wedding-envelope-project .wax-seal:hover { transform: translate(-50%, -50%) scale(1.15); }\r\n\r\n        #wedding-envelope-project .wax-seal-inner {\r\n            position: absolute; inset: 4px;\r\n            border-radius: 60%;\r\n            background: radial-gradient(circle at 40% 40%, var(--gold-base) 0%, var(--gold-dark) 100%);\r\n            box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);\r\n            display: flex; justify-content: center; align-items: center;\r\n        }\r\n\r\n        #wedding-envelope-project .seal-logo-container {\r\n            width: 80px; height: 70px;\r\n            display: flex; justify-content: center; align-items: center;\r\n            opacity: 0.60;\r\n        }\r\n\r\n        #wedding-envelope-project .seal-logo-container img {\r\n            max-width: 100%; max-height: 100%;\r\n            display: block; object-fit: contain;\r\n            filter: brightness(0.5) sepia(1) hue-rotate(10deg) saturate(2);\r\n        }\r\n\r\n        #wedding-envelope-project .transition-screen {\r\n            position: fixed; inset: 0;\r\n            background-color: var(--white-card);\r\n            opacity: 0; pointer-events: none;\r\n            z-index: 9999;\r\n            transition: opacity 1.2s ease;\r\n        }\r\n\r\n        #wedding-envelope-project .transition-screen.is-fading { opacity: 1; }\r\n        @media (max-width: 767px) {\r\n    #wedding-envelope-project {\r\n        padding: 60px 30px;\r\n        min-height: 75vh;\r\n    }\r\n\r\n    #wedding-envelope-project .scene {\r\n        width: 75vw;\r\n        max-width: 320px;\r\n    }\r\n\r\n    #wedding-envelope-project .wax-seal {\r\n        width: 60px;\r\n        height: 60px;\r\n    }\r\n\r\n    #wedding-envelope-project .seal-logo-container {\r\n        width: 60px;\r\n        height: 50px;\r\n    }\r\n\r\n    #wedding-envelope-project .card-logo-container {\r\n        max-width: 110px;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    #wedding-envelope-project .card-pre {\r\n        font-size: 0.65rem;\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    #wedding-envelope-project .card-title {\r\n        font-size: 2rem;\r\n        letter-spacing: 4px;\r\n    }\r\n\r\n    #wedding-envelope-project .monogram-outer {\r\n        font-size: 1rem;\r\n        letter-spacing: 4px;\r\n    }\r\n}\r\n    <\/style>\r\n\r\n    <div class=\"noise-overlay\"><\/div>\r\n    \r\n    <div class=\"scene\" id=\"wedding-scene\">\r\n        <div class=\"envelope\">\r\n            <div class=\"layer env-back\"><\/div>\r\n\r\n            <div class=\"layer env-card\" id=\"wedding-card\">\r\n                <div class=\"card-logo-container\">\r\n                    <img decoding=\"async\" src=\"https:\/\/bodamariysimon.online\/boda\/wp-content\/uploads\/2026\/03\/cropped-logo.png\" alt=\"Logo Boda Principal\">\r\n                <\/div>\r\n                <div class=\"olive-text\">\r\n                    <p class=\"card-pre\">Save the Date<\/p>\r\n                    <h2 class=\"card-title\">M & S<\/h2>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"layer flap-wrapper flap-top-wrapper\"><div class=\"flap-shape flap-top\"><\/div><\/div>\r\n            <div class=\"layer flap-wrapper flap-bottom-wrapper\"><div class=\"flap-shape flap-bottom\"><\/div><\/div>\r\n            <div class=\"layer flap-wrapper flap-left-wrapper\">\r\n                <div class=\"flap-shape flap-left\"><\/div>\r\n                <div class=\"monogram-outer gold-text\">M&S<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"layer flap-wrapper env-flap-main\" id=\"wedding-flap\">\r\n                <div class=\"flap-shape flap-right\"><\/div>\r\n                \r\n                <div class=\"wax-seal\" id=\"wedding-seal\">\r\n                    <div class=\"wax-seal-inner\">\r\n                        <div class=\"seal-logo-container\">\r\n                            <img decoding=\"async\" src=\"https:\/\/bodamariysimon.online\/boda\/wp-content\/uploads\/2026\/03\/cropped-logo.png\" alt=\"Icono Sello\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"transition-screen\" id=\"wedding-transition\"><\/div>\r\n\r\n<script>\r\n(function() {\r\n    const TARGET_URL = 'https:\/\/bodamariysimon.online\/boda\/home-invitation\/';\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const seal = document.getElementById('wedding-seal');\r\n        const flap = document.getElementById('wedding-flap');\r\n        const card = document.getElementById('wedding-card');\r\n        const scene = document.getElementById('wedding-scene');\r\n        const transition = document.getElementById('wedding-transition');\r\n        if(!seal || !flap || !card || !scene || !transition) return;\r\n        let isAnimating = false;\r\n        seal.addEventListener('click', () => {\r\n            if (isAnimating) return;\r\n            isAnimating = true;\r\n            flap.classList.add('is-opening');\r\n            setTimeout(() => {\r\n                card.classList.add('is-lifted');\r\n            }, 800);\r\n            setTimeout(() => {\r\n                scene.classList.add('is-zooming');\r\n            }, 1550);\r\n            setTimeout(() => {\r\n                transition.classList.add('is-fading');\r\n            }, 2250);\r\n            setTimeout(() => {\r\n                window.location.href = TARGET_URL;\r\n            }, 2500);\r\n        });\r\n    });\r\n})();\r\n<\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"Save the Date M &#038; S M&#038;S","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-1462","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/pages\/1462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/comments?post=1462"}],"version-history":[{"count":56,"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/pages\/1462\/revisions"}],"predecessor-version":[{"id":1609,"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/pages\/1462\/revisions\/1609"}],"wp:attachment":[{"href":"https:\/\/bodamariysimon.online\/boda\/wp-json\/wp\/v2\/media?parent=1462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}