{"id":33,"date":"2026-02-13T16:33:34","date_gmt":"2026-02-13T21:33:34","guid":{"rendered":"https:\/\/inversionesguru.com\/mx\/?p=33"},"modified":"2026-02-13T17:23:54","modified_gmt":"2026-02-13T22:23:54","slug":"elementor-33","status":"publish","type":"post","link":"https:\/\/inversionesguru.com\/mx\/elementor-33\/","title":{"rendered":"Elementor #33"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"33\" class=\"elementor elementor-33\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b5e0a6 e-flex e-con-boxed e-con e-parent\" data-id=\"1b5e0a6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b4b26b elementor-widget elementor-widget-html\" data-id=\"5b4b26b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\n    \/\/ 1. CONFIGURACI\u00d3N TAILWIND (CR\u00cdTICO)\r\n    \/\/ Desactivamos 'preflight' para que Tailwind NO rompa los estilos de tu tema de WordPress\r\n    tailwind = {\r\n        config: {\r\n            corePlugins: {\r\n                preflight: false,\r\n            }\r\n        }\r\n    }\r\n<\/script>\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&family=Dancing+Script:wght@400;700&family=Lato:wght@300;400&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- CONTENEDOR PRINCIPAL ENCAPSULADO -->\r\n<div id=\"mia-invitation-app\">\r\n    \r\n    <style>\r\n        \/* --- ESTILOS ENCAPSULADOS --- *\/\r\n        \/* Todo comienza con #mia-invitation-app para ganar especificidad sobre el tema *\/\r\n        \r\n        #mia-invitation-app {\r\n            \/* Forzar pantalla completa sobreponi\u00e9ndose al tema *\/\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100vw;\r\n            height: 100vh; \/* Fallback *\/\r\n            height: 100dvh;\r\n            z-index: 99999;\r\n            background-color: #000;\r\n            color: white;\r\n            font-family: 'Lato', sans-serif;\r\n            overflow: hidden;\r\n            \r\n            \/* Reset local para evitar herencias del tema *\/\r\n            line-height: 1.5;\r\n            -webkit-font-smoothing: antialiased;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #mia-invitation-app *, \r\n        #mia-invitation-app *::before, \r\n        #mia-invitation-app *::after {\r\n            box-sizing: inherit;\r\n        }\r\n\r\n        \/* Fuentes personalizadas *\/\r\n        #mia-invitation-app .font-title { font-family: 'Cinzel', serif; }\r\n        #mia-invitation-app .font-script { font-family: 'Dancing Script', cursive; }\r\n        #mia-invitation-app .font-body { font-family: 'Lato', sans-serif; }\r\n        \r\n        \/* Texto Dorado *\/\r\n        #mia-invitation-app .gold-text {\r\n            background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);\r\n            -webkit-background-clip: text;\r\n            background-clip: text;\r\n            color: transparent;\r\n            display: inline-block; \/* Fix para algunos temas *\/\r\n        }\r\n\r\n        \/* Paneles *\/\r\n        #mia-invitation-app .glass-panel {\r\n            background: rgba(15, 10, 30, 0.85); \r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n            border-left: 4px solid rgba(80, 50, 20, 0.6);\r\n            box-shadow: 10px 10px 30px rgba(0,0,0,0.6);\r\n            transform-style: preserve-3d;\r\n        }\r\n\r\n        \/* Libro *\/\r\n        #mia-invitation-app .book-pages-edge {\r\n            box-shadow: \r\n                inset -2px 0 5px rgba(0,0,0,0.2), \r\n                1px 1px 0 rgba(255,255,255,0.1),\r\n                2px 2px 0 rgba(255,255,255,0.05),\r\n                3px 3px 0 rgba(255,255,255,0.05),\r\n                4px 4px 0 rgba(255,255,255,0.02),\r\n                5px 5px 15px rgba(0,0,0,0.6); \r\n            border-right: 1px solid rgba(255,255,255,0.1);\r\n        }\r\n        \r\n        #mia-invitation-app .book-spine::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 8px;\r\n            background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent);\r\n            z-index: 20;\r\n        }\r\n\r\n        \/* Animaciones *\/\r\n        #mia-invitation-app .animate-float { animation: float 6s ease-in-out infinite; }\r\n        @keyframes float {\r\n          0% { transform: translateY(0px); }\r\n          50% { transform: translateY(-15px); }\r\n          100% { transform: translateY(0px); }\r\n        }\r\n\r\n        #mia-invitation-app .perspective-container { perspective: 2000px; }\r\n        \r\n        #mia-invitation-app .animate-book-flip-next {\r\n            transform-origin: left center;\r\n            animation: bookFlipInLeft 1.4s cubic-bezier(0.15, 1, 0.3, 1) forwards;\r\n        }\r\n        @keyframes bookFlipInLeft {\r\n            0% { transform: rotateY(-110deg) scale(0.9); opacity: 0; }\r\n            100% { transform: rotateY(0deg) scale(1); opacity: 1; }\r\n        }\r\n\r\n        #mia-invitation-app .animate-book-flip-prev {\r\n            transform-origin: right center;\r\n            animation: bookFlipInRight 1.4s cubic-bezier(0.15, 1, 0.3, 1) forwards;\r\n        }\r\n        @keyframes bookFlipInRight {\r\n            0% { transform: rotateY(110deg) scale(0.9); opacity: 0; }\r\n            100% { transform: rotateY(0deg) scale(1); opacity: 1; }\r\n        }\r\n\r\n        #mia-invitation-app .animate-page-shine-next {\r\n            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);\r\n            background-size: 200% 100%;\r\n            animation: shineLeftToRight 1.4s cubic-bezier(0.15, 1, 0.3, 1) forwards;\r\n        }\r\n        @keyframes shineLeftToRight {\r\n            0% { background-position: 100% 0; opacity: 0; }\r\n            50% { opacity: 1; }\r\n            100% { background-position: -100% 0; opacity: 0; }\r\n        }\r\n\r\n        #mia-invitation-app .animate-page-shine-prev {\r\n            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);\r\n            background-size: 200% 100%;\r\n            animation: shineRightToLeft 1.4s cubic-bezier(0.15, 1, 0.3, 1) forwards;\r\n        }\r\n        @keyframes shineRightToLeft {\r\n            0% { background-position: -100% 0; opacity: 0; }\r\n            50% { opacity: 1; }\r\n            100% { background-position: 100% 0; opacity: 0; }\r\n        }\r\n        \r\n        #mia-invitation-app .animate-fadeIn { animation: fadeIn 1s ease-out forwards; }\r\n        @keyframes fadeIn {\r\n           from { opacity: 0; transform: translateY(10px); }\r\n           to { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        @keyframes swipeHint {\r\n            0%, 100% { transform: translateX(0); opacity: 0.5; }\r\n            50% { transform: translateX(-10px); opacity: 1; }\r\n        }\r\n        #mia-invitation-app .animate-swipe { animation: swipeHint 1.5s infinite; }\r\n\r\n        .hidden-custom { display: none !important; }\r\n        \r\n        \/* Reset de Scrollbar dentro del contenedor *\/\r\n        #mia-invitation-app .scrollbar-thin::-webkit-scrollbar { width: 4px; }\r\n        #mia-invitation-app .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }\r\n        #mia-invitation-app .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(234, 179, 8, 0.5); border-radius: 4px; }\r\n        \r\n        \/* Asegurar que el canvas est\u00e9 detr\u00e1s *\/\r\n        #starryCanvas {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: -1;\r\n        }\r\n    <\/style>\r\n\r\n    <!-- CANVAS FONDO -->\r\n    <canvas id=\"starryCanvas\"><\/canvas>\r\n\r\n    <!-- YOUTUBE PLAYER OCULTO -->\r\n    <div class=\"fixed top-0 left-0 w-10 h-10 opacity-0 pointer-events-none -z-50 overflow-hidden\">\r\n        <div id=\"youtube-player\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- PANTALLA 1: PORTADA -->\r\n    <div id=\"cover-screen\" class=\"absolute inset-0 z-50 flex items-center justify-center p-4 perspective-container transition-opacity duration-700 h-full w-full\">\r\n        <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-md\"><\/div>\r\n        \r\n        <div class=\"relative w-full max-w-md aspect-[3\/4] bg-gradient-to-br from-purple-900 via-indigo-950 to-black rounded-r-2xl rounded-l-md shadow-[0_0_50px_rgba(168,85,247,0.3)] border-l-8 border-yellow-700 flex flex-col items-center justify-center text-center p-8 animate-float cursor-pointer group hover:scale-[1.02] transition-transform duration-500 book-pages-edge\"\r\n             onclick=\"openInvitation()\">\r\n            \r\n            <div class=\"absolute top-4 right-4 w-16 h-16 border-t-2 border-r-2 border-yellow-500\/50 rounded-tr-xl\"><\/div>\r\n            <div class=\"absolute bottom-4 left-4 w-16 h-16 border-b-2 border-l-2 border-yellow-500\/50 rounded-bl-xl\"><\/div>\r\n            \r\n            <div class=\"mb-6 opacity-80\">\r\n                <i data-lucide=\"star\" class=\"w-12 h-12 text-yellow-400 mx-auto animate-pulse fill-current\"><\/i>\r\n            <\/div>\r\n\r\n            <h1 class=\"font-title text-3xl md:text-5xl mb-2 text-white tracking-widest uppercase shadow-black drop-shadow-lg\">\r\n                Mis 15 A\u00f1os\r\n            <\/h1>\r\n            <h2 class=\"font-script text-5xl md:text-7xl gold-text mb-8 drop-shadow-lg\">\r\n                Mia Celeste\r\n            <\/h2>\r\n            <p class=\"font-body text-gray-300 mb-8 text-sm tracking-wide\">FAMILIA GARC\u00cdA SEGURA<\/p>\r\n            \r\n            <button class=\"bg-yellow-600\/20 hover:bg-yellow-600\/40 border border-yellow-500 text-yellow-100 px-8 py-3 rounded-full font-title tracking-widest transition-all transform hover:scale-105 shadow-[0_0_15px_rgba(234,179,8,0.5)] cursor-pointer\">\r\n                ABRIR LIBRO\r\n            <\/button>\r\n            <p class=\"text-xs text-gray-500 mt-4 animate-pulse\">(Toca para abrir)<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- PANTALLA 2: CONTENIDO -->\r\n    <div id=\"main-content\" class=\"hidden-custom flex flex-col items-center justify-center relative w-full max-w-2xl mx-auto px-4 py-6 h-full perspective-container\">\r\n        \r\n        <!-- Bot\u00f3n de Audio -->\r\n        <button onclick=\"toggleAudio()\" class=\"absolute top-4 right-4 z-40 p-3 rounded-full border backdrop-blur-md transition-colors bg-black\/40 border-white\/20 active:scale-95 cursor-pointer\" id=\"audio-btn\">\r\n            <i data-lucide=\"volume-x\" class=\"w-5 h-5 text-gray-400\" id=\"icon-muted\"><\/i>\r\n            <div id=\"icon-playing\" class=\"hidden-custom flex items-center gap-2\">\r\n                <span class=\"text-xs text-yellow-400 font-bold hidden md:inline animate-pulse\">Sonando...<\/span>\r\n                <i data-lucide=\"volume-2\" class=\"w-5 h-5 text-yellow-400\"><\/i>\r\n            <\/div>\r\n        <\/button>\r\n\r\n        <!-- CONTENEDOR DE P\u00c1GINAS -->\r\n        <div class=\"w-full flex-1 flex items-center justify-center relative\" id=\"pages-container\">\r\n            \r\n            <!-- P\u00c1GINA 0: INTRO -->\r\n            <div class=\"book-page active-page relative w-full max-w-md mx-auto min-h-[60vh] md:min-h-[65vh] flex flex-col items-center justify-center p-6 md:p-8 glass-panel rounded-r-xl rounded-l-md border-t border-b border-yellow-500\/30 overflow-hidden book-spine book-pages-edge\" id=\"page-0\">\r\n                <div class=\"shine-overlay absolute inset-0 pointer-events-none z-20\"><\/div>\r\n                <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/cream-paper.png')] opacity-10 pointer-events-none mix-blend-overlay\"><\/div>\r\n                \r\n                <div class=\"relative z-10 w-full flex flex-col items-center\">\r\n                    <div class=\"w-40 h-40 md:w-56 md:h-56 mb-4 relative mx-auto\">\r\n                        <div class=\"w-full h-full rounded-full border-4 border-yellow-500\/30 bg-purple-900\/40 flex items-center justify-center relative overflow-hidden backdrop-blur-sm shadow-[0_0_30px_rgba(147,51,234,0.4)]\">\r\n                            <div class=\"absolute inset-0 bg-[url('https:\/\/images.unsplash.com\/photo-1533590466408-5452f143715e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover opacity-50 mix-blend-overlay\"><\/div>\r\n                            <span class=\"text-center px-4 font-script text-lg text-yellow-200\">(Espacio Ilustraci\u00f3n<br\/>Ni\u00f1a Rock)<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <h1 class=\"font-title text-3xl md:text-5xl mb-2 text-white text-center drop-shadow-lg\">Mia Celeste<\/h1>\r\n                    <div class=\"h-1 w-20 bg-yellow-500 mb-6 rounded-full shadow-[0_0_10px_yellow]\"><\/div>\r\n                    \r\n                    <p class=\"font-body text-gray-300 text-sm tracking-widest uppercase mb-1\">Faltan:<\/p>\r\n                    <div class=\"flex justify-center mt-2 mb-2 animate-fadeIn scale-90 md:scale-100\" id=\"countdown\"><\/div>\r\n                    \r\n                    <div class=\"mt-6 flex items-center gap-2 opacity-70 animate-pulse text-yellow-200 text-xs\">\r\n                        <i data-lucide=\"hand-metal\" class=\"w-4 h-4 animate-swipe\"><\/i>\r\n                        <span>Desliza para continuar<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 1: DEDICATORIA -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-1\">\r\n                <div class=\"text-center space-y-6 overflow-y-auto max-h-[60vh] px-2 scrollbar-thin\">\r\n                    <i data-lucide=\"heart\" class=\"w-8 h-8 text-yellow-500 mx-auto mb-6 animate-pulse fill-current\"><\/i>\r\n                    <p class=\"font-body text-base md:text-lg italic leading-relaxed text-gray-200\">\r\n                        \"Hace quince a\u00f1os la vida nos regal\u00f3 un latido que cambi\u00f3 el nuestro para siempre.\r\n                        Nuestra hija ha crecido entre abrazos, aprendizajes y sue\u00f1os que florecen con su manera \u00fanica de sentir el mundo.\"\r\n                    <\/p>\r\n                    <p class=\"font-body text-base md:text-lg italic leading-relaxed text-gray-200\">\r\n                        \"Hoy celebramos sus quince a\u00f1os, no solo el paso del tiempo,\r\n                        sino la luz que ha sembrado en nuestra historia.\"\r\n                    <\/p>\r\n                    <p class=\"font-title text-yellow-400 text-lg pt-4\">- Familia Garc\u00eda Segura -<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 2: FECHA -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-2\">\r\n                <h3 class=\"font-script text-3xl md:text-4xl gold-text mb-8 text-center drop-shadow-md\">La Gran Noche<\/h3>\r\n                <div class=\"grid grid-cols-1 gap-6 w-full\">\r\n                    <div class=\"bg-white\/5 p-4 rounded-xl flex flex-col items-center border border-white\/10 hover:bg-white\/10 transition-colors\">\r\n                        <i data-lucide=\"calendar\" class=\"w-8 h-8 text-purple-400 mb-2\"><\/i>\r\n                        <p class=\"font-title text-4xl md:text-5xl text-yellow-400 font-bold drop-shadow-sm\">28<\/p>\r\n                        <p class=\"font-title text-lg uppercase tracking-widest text-gray-200\">Marzo 2026<\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-white\/5 p-4 rounded-xl flex flex-col items-center border border-white\/10 hover:bg-white\/10 transition-colors\">\r\n                        <i data-lucide=\"clock\" class=\"w-8 h-8 text-purple-400 mb-2\"><\/i>\r\n                        <p class=\"font-title text-lg mb-1 text-gray-300\">Horario<\/p>\r\n                        <div class=\"flex items-center gap-2\">\r\n                            <span class=\"font-title text-2xl text-yellow-400\">7:00 PM<\/span>\r\n                            <span class=\"text-gray-400 text-xs\">-<\/span>\r\n                            <span class=\"font-title text-2xl text-yellow-400\">2:00 AM<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 3: UBICACI\u00d3N -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-3\">\r\n                <div class=\"text-center w-full\">\r\n                    <i data-lucide=\"map-pin\" class=\"w-12 h-12 text-red-400 mx-auto mb-4 animate-bounce\"><\/i>\r\n                    <h3 class=\"font-title text-2xl mb-2 text-white\">Club Laverdieri<\/h3>\r\n                    <p class=\"font-body text-gray-300 mb-8\">Sal\u00f3n Platino \u2022 Km 1.5 v\u00eda Cota-Siberia<\/p>\r\n                    \r\n                    <a href=\"https:\/\/maps.app.goo.gl\/8amZzfbeKn1VXs7V8\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-full block bg-gradient-to-r from-yellow-600 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-black font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:shadow-yellow-500\/20 flex items-center justify-center gap-2 group\">\r\n                        <i data-lucide=\"map-pin\" class=\"w-5 h-5 group-hover:scale-110 transition-transform\"><\/i>\r\n                        ABRIR GOOGLE MAPS\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 4: DRESS CODE & REGALO -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-4\">\r\n                <div class=\"grid grid-cols-1 gap-6 w-full text-center\">\r\n                    <div class=\"bg-white\/5 p-4 rounded-xl border border-white\/10 hover:bg-white\/10 transition-colors\">\r\n                        <span class=\"text-3xl block mb-2\">\ud83d\udc54\ud83d\udc57<\/span>\r\n                        <h3 class=\"font-title text-lg text-yellow-400 mb-1\">Dress Code<\/h3>\r\n                        <p class=\"font-body text-white mb-2\">Formal o Coctel<\/p>\r\n                        <p class=\"text-xs text-gray-400 italic\">(Se vale un toque Rockero Elegante)<\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"bg-white\/5 p-4 rounded-xl border border-white\/10 hover:bg-white\/10 transition-colors\">\r\n                        <i data-lucide=\"gift\" class=\"w-8 h-8 text-purple-400 mx-auto mb-2\"><\/i>\r\n                        <h3 class=\"font-title text-lg text-yellow-400 mb-1\">Lluvia de Sobres<\/h3>\r\n                        <p class=\"font-body text-gray-300 text-sm mb-2\">Tu presencia es mi mayor regalo.<\/p>\r\n                        <div class=\"bg-black\/30 p-2 rounded text-yellow-200 font-mono font-bold tracking-wider border border-yellow-500\/20\">\r\n                            Nequi: 320 922 3459\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 5: \u00c1LBUM FOTOS -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-5\">\r\n                <i data-lucide=\"camera\" class=\"w-10 h-10 text-yellow-500 mx-auto mb-2\"><\/i>\r\n                <h3 class=\"font-title text-2xl text-center mb-1 text-white\">\u00c1lbum Privado<\/h3>\r\n                <p class=\"text-center text-gray-300 text-sm mb-6 px-4\">\r\n                   \u00a1Ay\u00fadanos a capturar cada momento! Escanea el QR para subir tus fotos de la fiesta.\r\n                <\/p>\r\n                \r\n                <div class=\"w-48 h-48 mx-auto bg-white p-2 rounded-lg shadow-[0_0_20px_rgba(234,179,8,0.4)] relative group\">\r\n                   <div class=\"w-full h-full border-2 border-dashed border-gray-400 flex flex-col items-center justify-center bg-gray-100 text-gray-500 relative overflow-hidden\">\r\n                      <i data-lucide=\"qr-code\" class=\"w-10 h-10 mb-2 opacity-50\"><\/i>\r\n                      <span class=\"text-xs text-center font-bold px-2\">ESPACIO PARA<br\/>TU C\u00d3DIGO QR<\/span>\r\n                      <div class=\"absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-yellow-600\"><\/div>\r\n                      <div class=\"absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-yellow-600\"><\/div>\r\n                      <div class=\"absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-yellow-600\"><\/div>\r\n                      <div class=\"absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-yellow-600\"><\/div>\r\n                   <\/div>\r\n                <\/div>\r\n\r\n                <button class=\"mt-6 text-sm text-yellow-400 underline hover:text-yellow-300 transition-colors cursor-pointer\">\r\n                   O toca aqu\u00ed para ir al \u00c1lbum\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- P\u00c1GINA 6: RSVP -->\r\n            <div class=\"book-page hidden-custom\" id=\"page-6\">\r\n                <h3 class=\"font-title text-2xl text-center mb-1 text-yellow-400\">RSVP<\/h3>\r\n                <p class=\"text-center text-gray-400 text-xs mb-4\">Confirma tu asistencia<\/p>\r\n                <form id=\"rsvp-form\" class=\"space-y-3 w-full\">\r\n                    <input type=\"text\" id=\"input-nombre\" required placeholder=\"Nombres Completos\"\r\n                        class=\"w-full bg-black\/60 border border-purple-500\/50 rounded-lg p-3 text-white placeholder-gray-300 text-sm focus:border-yellow-500 focus:bg-black\/80 outline-none transition-all appearance-none\">\r\n                    \r\n                    <input type=\"text\" id=\"input-edad\" required placeholder=\"Edades (Ej: 45, 15)\"\r\n                        class=\"w-full bg-black\/60 border border-purple-500\/50 rounded-lg p-3 text-white placeholder-gray-300 text-sm focus:border-yellow-500 focus:bg-black\/80 outline-none transition-all appearance-none\">\r\n                    \r\n                    <textarea id=\"input-alergias\" placeholder=\"Alergias \/ Restricciones Alimentarias\" rows=\"2\"\r\n                        class=\"w-full bg-black\/60 border border-purple-500\/50 rounded-lg p-3 text-white placeholder-gray-300 text-sm focus:border-yellow-500 focus:bg-black\/80 outline-none transition-all appearance-none\"><\/textarea>\r\n                    \r\n                    <button type=\"submit\"\r\n                        class=\"w-full bg-gradient-to-r from-yellow-600 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-black font-bold py-3 rounded-lg shadow-lg flex items-center justify-center gap-2 text-sm mt-2 transform hover:scale-[1.02] transition-all cursor-pointer\">\r\n                        <i data-lucide=\"send\" class=\"w-4 h-4\"><\/i> ENVIAR POR WHATSAPP\r\n                    <\/button>\r\n                <\/form>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- CONTROLES -->\r\n        <div class=\"w-full max-w-md flex items-center justify-between mt-4 px-2 z-50 pb-4\">\r\n            <button onclick=\"prevPage()\" id=\"btn-prev\" class=\"p-3 rounded-full border border-yellow-500\/30 transition-all bg-black\/40 text-yellow-500 hover:bg-yellow-500\/20 active:scale-90 opacity-0 pointer-events-none cursor-pointer\">\r\n                <i data-lucide=\"chevron-left\" class=\"w-6 h-6\"><\/i>\r\n            <\/button>\r\n\r\n            <div class=\"flex gap-1 md:gap-2\" id=\"indicators\"><\/div>\r\n\r\n            <button onclick=\"nextPage()\" id=\"btn-next\" class=\"p-3 rounded-full border border-yellow-500\/30 transition-all bg-black\/40 text-yellow-500 hover:bg-yellow-500\/20 active:scale-90 cursor-pointer\">\r\n                <i data-lucide=\"chevron-right\" class=\"w-6 h-6\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        \/\/ Ejecutar todo el JS dentro de un scope local para no contaminar el global de WP\r\n        \r\n        let currentPage = 0;\r\n        const totalPages = 7;\r\n        let isPlaying = false;\r\n        let player; \r\n\r\n        \/\/ Iconos\r\n        lucide.createIcons();\r\n\r\n        \/\/ Canvas\r\n        const canvas = document.getElementById('starryCanvas');\r\n        const ctx = canvas.getContext('2d');\r\n        let width, height;\r\n        const stars = [];\r\n\r\n        function initStars() {\r\n            width = window.innerWidth;\r\n            height = window.innerHeight;\r\n            canvas.width = width;\r\n            canvas.height = height;\r\n            stars.length = 0;\r\n            for(let i=0; i<150; i++) {\r\n                stars.push({\r\n                    x: Math.random() * width,\r\n                    y: Math.random() * height,\r\n                    radius: Math.random() * 1.5,\r\n                    alpha: Math.random(),\r\n                    speed: Math.random() * 0.5 + 0.1\r\n                });\r\n            }\r\n        }\r\n\r\n        function animateStars() {\r\n            ctx.clearRect(0, 0, width, height);\r\n            const gradient = ctx.createLinearGradient(0, 0, 0, height);\r\n            gradient.addColorStop(0, '#0f0c29');\r\n            gradient.addColorStop(0.5, '#302b63');\r\n            gradient.addColorStop(1, '#24243e');\r\n            ctx.fillStyle = gradient;\r\n            ctx.fillRect(0, 0, width, height);\r\n\r\n            stars.forEach(star => {\r\n                ctx.beginPath();\r\n                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);\r\n                ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;\r\n                ctx.fill();\r\n                star.y -= star.speed;\r\n                if(star.y < 0) { star.y = height; star.x = Math.random() * width; }\r\n                star.alpha += (Math.random() - 0.5) * 0.05;\r\n                if(star.alpha < 0.2) star.alpha = 0.2;\r\n                if(star.alpha > 1) star.alpha = 1;\r\n            });\r\n            requestAnimationFrame(animateStars);\r\n        }\r\n\r\n        window.addEventListener('resize', initStars);\r\n        initStars();\r\n        animateStars();\r\n\r\n        \/\/ YouTube\r\n        if (!window.YT) {\r\n            const tag = document.createElement('script');\r\n            tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\n            const firstScriptTag = document.getElementsByTagName('script')[0];\r\n            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n        }\r\n\r\n        window.onYouTubeIframeAPIReady = function() {\r\n            player = new YT.Player('youtube-player', {\r\n                height: '100%',\r\n                width: '100%',\r\n                videoId: '8zyoVHtx2wQ',\r\n                playerVars: { 'playsinline': 1, 'controls': 0, 'loop': 1, 'playlist': '8zyoVHtx2wQ' },\r\n                events: { 'onReady': () => {} }\r\n            });\r\n        }\r\n\r\n        \/\/ Funciones Globales (necesarias para el onclick del HTML)\r\n        window.toggleAudio = function() {\r\n            if(!player) return;\r\n            const btnMuted = document.getElementById('icon-muted');\r\n            const btnPlaying = document.getElementById('icon-playing');\r\n            const btn = document.getElementById('audio-btn');\r\n\r\n            if (isPlaying) {\r\n                player.pauseVideo();\r\n                isPlaying = false;\r\n                btnMuted.classList.remove('hidden-custom');\r\n                btnPlaying.classList.add('hidden-custom');\r\n                btn.classList.remove('bg-yellow-500\/20', 'border-yellow-500\/50');\r\n                btn.classList.add('bg-black\/40', 'border-white\/20');\r\n            } else {\r\n                player.playVideo();\r\n                isPlaying = true;\r\n                btnMuted.classList.add('hidden-custom');\r\n                btnPlaying.classList.remove('hidden-custom');\r\n                btn.classList.remove('bg-black\/40', 'border-white\/20');\r\n                btn.classList.add('bg-yellow-500\/20', 'border-yellow-500\/50');\r\n            }\r\n        }\r\n\r\n        window.openInvitation = function() {\r\n            const cover = document.getElementById('cover-screen');\r\n            const main = document.getElementById('main-content');\r\n            cover.style.opacity = '0';\r\n            setTimeout(() => {\r\n                cover.classList.add('hidden-custom');\r\n                main.classList.remove('hidden-custom');\r\n                renderPage(0, 'next'); \r\n                toggleAudio(); \r\n            }, 700);\r\n        }\r\n\r\n        window.prevPage = function() {\r\n            if(currentPage > 0) {\r\n                currentPage--;\r\n                renderPage(currentPage, 'prev');\r\n            }\r\n        }\r\n\r\n        window.nextPage = function() {\r\n            if(currentPage < totalPages - 1) {\r\n                currentPage++;\r\n                renderPage(currentPage, 'next');\r\n            }\r\n        }\r\n\r\n        function renderPage(pageIndex, direction) {\r\n            for(let i=0; i<totalPages; i++) {\r\n                const p = document.getElementById(`page-${i}`);\r\n                if(p) {\r\n                    p.classList.add('hidden-custom');\r\n                    p.classList.remove('animate-book-flip-next', 'animate-book-flip-prev');\r\n                    p.className = `book-page relative w-full max-w-md mx-auto min-h-[60vh] md:min-h-[65vh] flex flex-col items-center justify-center p-6 md:p-8 glass-panel rounded-r-xl rounded-l-md border-t border-b border-yellow-500\/30 overflow-hidden book-spine book-pages-edge hidden-custom`;\r\n                }\r\n            }\r\n            const currentPageEl = document.getElementById(`page-${pageIndex}`);\r\n            currentPageEl.classList.remove('hidden-custom');\r\n            \r\n            if(direction === 'next') {\r\n                currentPageEl.classList.add('animate-book-flip-next');\r\n                const shine = document.createElement('div');\r\n                shine.className = 'absolute inset-0 pointer-events-none z-20 animate-page-shine-next';\r\n                const oldShines = currentPageEl.querySelectorAll('.shine-overlay');\r\n                oldShines.forEach(s => s.remove());\r\n                currentPageEl.appendChild(shine);\r\n            } else {\r\n                currentPageEl.classList.add('animate-book-flip-prev');\r\n                const shine = document.createElement('div');\r\n                shine.className = 'absolute inset-0 pointer-events-none z-20 animate-page-shine-prev';\r\n                const oldShines = currentPageEl.querySelectorAll('.shine-overlay');\r\n                oldShines.forEach(s => s.remove());\r\n                currentPageEl.appendChild(shine);\r\n            }\r\n            updateControls();\r\n            lucide.createIcons();\r\n        }\r\n\r\n        function updateControls() {\r\n            const btnPrev = document.getElementById('btn-prev');\r\n            const btnNext = document.getElementById('btn-next');\r\n            if(currentPage === 0) btnPrev.classList.add('opacity-0', 'pointer-events-none');\r\n            else btnPrev.classList.remove('opacity-0', 'pointer-events-none');\r\n            if(currentPage === totalPages - 1) btnNext.classList.add('opacity-0', 'pointer-events-none');\r\n            else btnNext.classList.remove('opacity-0', 'pointer-events-none');\r\n\r\n            const container = document.getElementById('indicators');\r\n            container.innerHTML = '';\r\n            for(let i=0; i<totalPages; i++) {\r\n                const dot = document.createElement('div');\r\n                const isActive = i === currentPage;\r\n                dot.className = `h-2 rounded-full transition-all duration-300 ${isActive ? 'w-6 md:w-8 bg-yellow-500 shadow-[0_0_10px_orange]' : 'w-2 bg-gray-600'}`;\r\n                container.appendChild(dot);\r\n            }\r\n        }\r\n\r\n        \/\/ Swipe Logic\r\n        let touchStartX = 0;\r\n        let touchEndX = 0;\r\n        const mainContent = document.getElementById('main-content');\r\n        mainContent.addEventListener('touchstart', e => touchStartX = e.changedTouches[0].screenX, {passive: true});\r\n        mainContent.addEventListener('touchend', e => {\r\n            touchEndX = e.changedTouches[0].screenX;\r\n            if (Math.abs(touchStartX - touchEndX) > 50) {\r\n                if (touchStartX - touchEndX > 0) nextPage();\r\n                else prevPage();\r\n            }\r\n        }, {passive: true});\r\n\r\n        \/\/ Contador\r\n        function updateCountdown() {\r\n            const targetDate = new Date(\"March 28, 2026 19:00:00\").getTime();\r\n            const now = new Date().getTime();\r\n            const distance = targetDate - now;\r\n            const days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\r\n            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n            const minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\r\n            const seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\r\n\r\n            const container = document.getElementById('countdown');\r\n            if(container) {\r\n                container.innerHTML = `\r\n                    <div class=\"flex flex-col items-center mx-1 md:mx-3\">\r\n                        <div class=\"bg-black\/40 backdrop-blur-md border border-yellow-500\/30 rounded-lg p-2 md:p-3 w-14 md:w-20 text-center shadow-[0_0_15px_rgba(234,179,8,0.1)]\">\r\n                            <span class=\"font-title text-xl md:text-3xl text-yellow-400 font-bold block\">${days < 10 ? '0'+days : days}<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-[10px] md:text-xs text-gray-400 mt-1 uppercase tracking-wider\">D\u00edas<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col items-center mx-1 md:mx-3\">\r\n                        <div class=\"bg-black\/40 backdrop-blur-md border border-yellow-500\/30 rounded-lg p-2 md:p-3 w-14 md:w-20 text-center shadow-[0_0_15px_rgba(234,179,8,0.1)]\">\r\n                            <span class=\"font-title text-xl md:text-3xl text-yellow-400 font-bold block\">${hours < 10 ? '0'+hours : hours}<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-[10px] md:text-xs text-gray-400 mt-1 uppercase tracking-wider\">Horas<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col items-center mx-1 md:mx-3\">\r\n                        <div class=\"bg-black\/40 backdrop-blur-md border border-yellow-500\/30 rounded-lg p-2 md:p-3 w-14 md:w-20 text-center shadow-[0_0_15px_rgba(234,179,8,0.1)]\">\r\n                            <span class=\"font-title text-xl md:text-3xl text-yellow-400 font-bold block\">${minutes < 10 ? '0'+minutes : minutes}<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-[10px] md:text-xs text-gray-400 mt-1 uppercase tracking-wider\">Min<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col items-center mx-1 md:mx-3\">\r\n                        <div class=\"bg-black\/40 backdrop-blur-md border border-yellow-500\/30 rounded-lg p-2 md:p-3 w-14 md:w-20 text-center shadow-[0_0_15px_rgba(234,179,8,0.1)]\">\r\n                            <span class=\"font-title text-xl md:text-3xl text-yellow-400 font-bold block\">${seconds < 10 ? '0'+seconds : seconds}<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-[10px] md:text-xs text-gray-400 mt-1 uppercase tracking-wider\">Seg<\/span>\r\n                    <\/div>\r\n                `;\r\n            }\r\n        }\r\n        setInterval(updateCountdown, 1000);\r\n        updateCountdown();\r\n\r\n        \/\/ RSVP\r\n        const rsvpForm = document.getElementById('rsvp-form');\r\n        if(rsvpForm) {\r\n            rsvpForm.addEventListener('submit', function(e) {\r\n                e.preventDefault();\r\n                const nombre = document.getElementById('input-nombre').value;\r\n                const edad = document.getElementById('input-edad').value;\r\n                const alergias = document.getElementById('input-alergias').value || 'Ninguna';\r\n                const phone = \"573209223459\";\r\n                const text = `Hola Familia Garc\u00eda Segura, confirmo asistencia a los 15 de Mia Celeste.%0A%0A*Nombre:* ${nombre}%0A*Edad:* ${edad}%0A*Alergias:* ${alergias}`;\r\n                window.open(`https:\/\/wa.me\/${phone}?text=${text}`, '_blank');\r\n            });\r\n        }\r\n    })();\r\n<\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mis 15 A\u00f1os Mia Celeste FAMILIA GARC\u00cdA SEGURA ABRIR LIBRO (Toca para abrir) Sonando&#8230; (Espacio Ilustraci\u00f3nNi\u00f1a Rock) Mia Celeste Faltan: Desliza para continuar &#8220;Hace quince a\u00f1os la vida nos regal\u00f3 un latido que cambi\u00f3 el nuestro para siempre. Nuestra hija ha crecido entre abrazos, aprendizajes y sue\u00f1os que florecen con su manera \u00fanica de sentir&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"_links":{"self":[{"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":25,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/posts\/33\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inversionesguru.com\/mx\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}