Cena Navide\u00f1a – Colegio San Gerardo<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;700&family=Mountains+of+Christmas:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* --- Variables CSS y Reset --- *\/\n :root {\n --brand-cyan: #15748a;\n --brand-dark: #04464f;\n --brand-yellow: #e8e814;\n --text-light: #ffffff;\n --text-dim: #cce0e4;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Manrope', sans-serif;\n background-color: var(--brand-dark);\n color: var(--text-light);\n overflow-x: hidden;\n min-height: 100vh;\n \/* El cursor personalizado se maneja con JS *\/\n }\n\n \/* --- Estilos para el efecto de Nieve en el cursor --- *\/\n .snowflake {\n position: fixed;\n top: -10px;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n pointer-events: none;\n z-index: 9999;\n animation: fall linear forwards;\n }\n\n @keyframes fall {\n to {\n transform: translateY(50px) scale(0.5);\n opacity: 0;\n }\n }\n\n \/* =========================================\n SECCI\u00d3N 1: EL PRE\u00c1MBULO (SOBRE)\n ========================================= *\/\n #envelope-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--brand-dark);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 2000;\n transition: opacity 0.8s ease-out, visibility 0.8s;\n }\n\n #envelope-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .envelope-container {\n position: relative;\n width: 300px;\n height: 200px;\n background-color: #065a66; \/* Un tono ligeramente m\u00e1s claro que el fondo *\/\n border-radius: 5px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n perspective: 1000px;\n margin-bottom: 30px;\n }\n\n .flap {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n }\n\n .flap.top {\n top: 0;\n left: 0;\n border-width: 100px 150px 0 150px;\n border-color: var(--brand-cyan) transparent transparent transparent;\n z-index: 5;\n transform-origin: top;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\n }\n\n .flap.bottom {\n bottom: 0;\n left: 0;\n border-width: 0 150px 100px 150px;\n border-color: transparent transparent #05515c transparent;\n z-index: 4;\n }\n \n .flap.left {\n top: 0;\n left: 0;\n border-width: 100px 0 100px 150px;\n border-color: transparent transparent transparent #033c44;\n z-index: 3;\n }\n .flap.right {\n top: 0;\n right: 0;\n border-width: 100px 150px 100px 0;\n border-color: transparent #033c44 transparent transparent;\n z-index: 3;\n }\n\n \/* Estado de apertura del sobre *\/\n .envelope-container.open .flap.top {\n transform: rotateX(180deg);\n z-index: 2; \/* Se mueve detr\u00e1s al abrirse *\/\n }\n\n .invitation-preview {\n position: absolute;\n top: 10px;\n left: 10px;\n width: calc(100% - 20px);\n height: calc(100% - 20px);\n background: white;\n z-index: 3;\n transition: transform 0.6s ease-out 0.6s; \/* Sale despu\u00e9s de que el sobre se abre *\/\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--brand-dark);\n font-weight: bold;\n font-family: 'Mountains of Christmas', cursive;\n font-size: 1.2rem;\n }\n\n .envelope-container.open .invitation-preview {\n transform: translateY(-120px) scale(0.9);\n opacity: 0;\n }\n\n\n .open-btn {\n padding: 12px 30px;\n background-color: var(--brand-yellow);\n color: var(--brand-dark);\n border: none;\n border-radius: 25px;\n font-family: 'Manrope', sans-serif;\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(232, 232, 20, 0.3);\n transition: transform 0.2s, box-shadow 0.2s;\n z-index: 6;\n }\n\n .open-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(232, 232, 20, 0.5);\n }\n\n \/* =========================================\n SECCI\u00d3N 2: CONTENIDO PRINCIPAL\n ========================================= *\/\n #main-content {\n \/* Inicialmente oculto para la animaci\u00f3n secuencial *\/\n display: none; \n max-width: 800px;\n margin: 0 auto;\n padding: 40px 20px;\n text-align: center;\n }\n\n .logo-header img {\n max-width: 150px;\n height: auto;\n margin-bottom: 30px;\n }\n\n h1.christmas-title {\n font-family: 'Mountains of Christmas', cursive;\n font-size: 3.5rem;\n color: var(--brand-yellow);\n margin-bottom: 10px;\n text-shadow: 0 0 10px rgba(232, 232, 20, 0.3);\n }\n\n h2.subtitle {\n font-size: 1.5rem;\n color: var(--brand-cyan);\n margin-bottom: 5px;\n font-weight: 700;\n }\n\n p.intro-text {\n font-size: 1.1rem;\n color: var(--text-dim);\n margin-bottom: 40px;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Tarjeta de Detalles *\/\n .details-card {\n background: rgba(21, 116, 138, 0.1); \/* Cyan con mucha transparencia *\/\n border: 1px solid rgba(21, 116, 138, 0.3);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 40px;\n text-align: left;\n }\n\n .detail-item {\n margin-bottom: 20px;\n display: flex;\n align-items: flex-start;\n }\n\n .detail-icon {\n font-size: 1.5rem;\n margin-right: 15px;\n color: var(--brand-cyan);\n }\n\n .detail-content h3 {\n font-size: 1.1rem;\n color: var(--brand-cyan);\n margin-bottom: 5px;\n }\n\n .detail-content p {\n color: var(--text-light);\n line-height: 1.6;\n }\n \n .address-note {\n font-size: 0.9rem;\n color: var(--text-dim);\n font-style: italic;\n }\n\n \/* Secci\u00f3n del Mapa *\/\n .map-container {\n width: 100%;\n height: 350px;\n border-radius: 20px;\n overflow: hidden;\n border: 2px solid var(--brand-cyan);\n margin-bottom: 25px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n }\n\n .map-container iframe {\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n \/* Botones de Acci\u00f3n (Footer) *\/\n .cta-group {\n display: flex;\n flex-direction: column;\n gap: 15px;\n justify-content: center;\n margin-top: 30px;\n }\n\n .btn {\n padding: 15px 30px;\n border-radius: 30px;\n font-weight: 700;\n text-decoration: none;\n transition: all 0.3s ease;\n display: inline-block;\n text-align: center;\n }\n\n .btn-primary {\n background-color: var(--brand-cyan);\n color: var(--text-light);\n box-shadow: 0 4px 15px rgba(21, 116, 138, 0.4);\n }\n .btn-primary:hover { font-weight: bold; background-color: #1d9dbd; transform: translateY(-3px); }\n\n .btn-secondary {\n background-color: transparent;\n border: 2px solid var(--brand-yellow);\n color: var(--brand-yellow);\n }\n .btn-secondary:hover { background-color: var(--brand-yellow); color: var(--brand-dark); }\n\n \/* --- Animaciones Secuenciales (Fade In Up) --- *\/\n .fade-in-element {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .fade-in-element.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Responsive *\/\n @media (min-width: 768px) {\n h1.christmas-title { font-size: 4.5rem; }\n .cta-group { flex-direction: row; }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"envelope-overlay\">\n <div class=\"envelope-container\" id=\"invitation-envelope\">\n <div class=\"flap top\"><\/div>\n <div class=\"flap right\"><\/div>\n <div class=\"flap left\"><\/div>\n <div class=\"invitation-preview\">\n <p>Invitaci\u00f3n Especial<\/p>\n <\/div>\n <div class=\"flap bottom\"><\/div>\n <\/div>\n <button class=\"open-btn\" id=\"open-envelope-btn\">\u2728 Ver invitaci\u00f3n \u2728<\/button>\n <\/div>\n\n\n <div id=\"main-content\">\n <header class=\"logo-header fade-in-element\">\n <img decoding=\"async\" src=\"https:\/\/invitacionsangerardo.totemmassmedia.com\/wp-content\/uploads\/2025\/12\/san-gerardo-logo.png\" alt=\"Logo Colegio San Gerardo\">\n <\/header>\n\n <section class=\"intro fade-in-element\">\n <h2 class=\"subtitle\">Colegio San Gerardo – D\u00e9cimo “D”<\/h2>\n <h1 class=\"christmas-title\">Cena Navide\u00f1a<\/h1>\n <p class=\"intro-text\">Una noche m\u00e1gica para compartir, celebrar el fin de a\u00f1o y fortalecer nuestros lazos como familia Gerardina.<\/p>\n <\/section>\n\n <section class=\"details-card fade-in-element\">\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\ud83d\udcc5<\/div>\n <div class=\"detail-content\">\n <h3>Cu\u00e1ndo<\/h3>\n <p>Viernes, 19 de diciembre<\/p>\n <\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\u23f0<\/div>\n <div class=\"detail-content\">\n <h3>Hora<\/h3>\n <p>7:00 PM (19:00 hrs)<\/p>\n <\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\ud83d\udccd<\/div>\n <div class=\"detail-content\">\n <h3>D\u00f3nde<\/h3>\n <p>Calle C\u00e9sar Vallejo junto al Restaurante y Cafeter\u00eda ACAI.<\/p>\n <p class=\"address-note\">A pocos pasos de la entrada al parque PUCAR\u00c1.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"location-actions fade-in-element\">\n <div class=\"map-container\">\n <iframe \n src=\"https:\/\/maps.google.com\/maps?q=-4.006590866334122,-79.19887714135511&t=&z=17&ie=UTF8&iwloc=&output=embed\"\n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n\n <div class=\"cta-group\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/\/-4.006590866334122,-79.19887714135511\/@-4.0065909,-79.1988771,17z\" target=\"_blank\" class=\"btn btn-secondary\">\n \ud83d\uddfa\ufe0f C\u00f3mo llegar (Google Maps)\n <\/a>\n <a href=\"#\" class=\"btn btn-primary\">\n \u2705 Confirmar Asistencia\n <\/a>\n <\/div>\n <\/section>\n <\/div>\n\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- 1. Funcionalidad del Sobre ---\n const openBtn = document.getElementById('open-envelope-btn');\n const envelope = document.getElementById('invitation-envelope');\n const overlay = document.getElementById('envelope-overlay');\n const mainContent = document.getElementById('main-content');\n\n openBtn.addEventListener('click', () => {\n \/\/ 1. Animar el sobre abri\u00e9ndose\n envelope.classList.add('open');\n openBtn.style.opacity = '0'; \/\/ Ocultar el bot\u00f3n inmediatamente\n\n \/\/ 2. Esperar a que termine la animaci\u00f3n del sobre (aprox 1s total)\n setTimeout(() => {\n \/\/ 3. Desvanecer el overlay completo\n overlay.classList.add('hidden');\n \n \/\/ 4. Mostrar el contenedor principal\n mainContent.style.display = 'block';\n\n \/\/ 5. Iniciar la aparici\u00f3n secuencial de los elementos\n triggerSequentialAnimations();\n\n \/\/ 6. Eliminar el overlay del DOM para que no estorbe (opcional pero recomendado)\n setTimeout(() => {\n overlay.remove();\n }, 800);\n\n }, 1200); \/\/ Tiempo suficiente para que el sobre se abra y salga la tarjeta\n });\n\n \/\/ --- 2. Animaci\u00f3n Secuencial (Fade In Up) ---\n function triggerSequentialAnimations() {\n const elements = document.querySelectorAll('.fade-in-element');\n elements.forEach((el, index) => {\n \/\/ Un retraso escalonado para cada elemento (ej. 200ms entre cada uno)\n setTimeout(() => {\n el.classList.add('visible');\n }, index * 250); \n });\n }\n\n \/\/ --- 3. Efecto de Nieve en el Cursor ---\n let isSnowing = false; \/\/ Flag para rendimiento\n\n document.addEventListener('mousemove', function(e) {\n if (isSnowing) return; \/\/ Limitar la tasa de creaci\u00f3n de part\u00edculas\n isSnowing = true;\n \n setTimeout(() => { isSnowing = false; }, 40); \/\/ Crear nieve cada 40ms\n\n createSnowflake(e.clientX, e.clientY);\n });\n\n function createSnowflake(x, y) {\n const snowflake = document.createElement('div');\n snowflake.classList.add('snowflake');\n document.body.appendChild(snowflake);\n\n \/\/ Variaci\u00f3n aleatoria en tama\u00f1o y posici\u00f3n inicial\n const size = Math.random() * 6 + 2; \/\/ Entre 2px y 8px\n snowflake.style.width = `${size}px`;\n snowflake.style.height = `${size}px`;\n snowflake.style.left = `${x - size\/2 + (Math.random() * 10 - 5)}px`; \/\/ Peque\u00f1a variaci\u00f3n horizontal\n snowflake.style.top = `${y - size\/2}px`;\n\n \/\/ Eliminar el copo de nieve despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n snowflake.remove();\n }, 1000); \/\/ Debe coincidir con la duraci\u00f3n de la animaci\u00f3n CSS 'fall'\n }\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Cena Navide\u00f1a – Colegio San Gerardo Invitaci\u00f3n Especial \u2728 Ver invitaci\u00f3n \u2728 Colegio San Gerardo – D\u00e9cimo “D” Cena Navide\u00f1a Una noche m\u00e1gica para compartir, celebrar el fin de a\u00f1o y fortalecer nuestros lazos como familia Gerardina. \ud83d\udcc5 Cu\u00e1ndo Viernes, 19 de diciembre \u23f0 Hora 7:00 PM (19:00 hrs) \ud83d\udccd D\u00f3nde Calle C\u00e9sar Vallejo junto […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2025-12-10T06:24:24","date_gmt":"2025-12-10T06:24:24","guid":{"rendered":"https:\/\/invitacionsangerardo.totemmassmedia.com\/?page_id=8"},"modified":"2025-12-10T06:24:24","modified_gmt":"2025-12-10T06:24:24","slug":"inicio","status":"publish","type":"page","link":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/inicio\/","title":{"rendered":"Inicio"},"content":{"rendered":"\n\n\n\n \n \n Cena Navide\u00f1a – Colegio San Gerardo<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@300;400;700&family=Mountains+of+Christmas:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* --- Variables CSS y Reset --- *\/\n :root {\n --brand-cyan: #15748a;\n --brand-dark: #04464f;\n --brand-yellow: #e8e814;\n --text-light: #ffffff;\n --text-dim: #cce0e4;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Manrope', sans-serif;\n background-color: var(--brand-dark);\n color: var(--text-light);\n overflow-x: hidden;\n min-height: 100vh;\n \/* El cursor personalizado se maneja con JS *\/\n }\n\n \/* --- Estilos para el efecto de Nieve en el cursor --- *\/\n .snowflake {\n position: fixed;\n top: -10px;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n pointer-events: none;\n z-index: 9999;\n animation: fall linear forwards;\n }\n\n @keyframes fall {\n to {\n transform: translateY(50px) scale(0.5);\n opacity: 0;\n }\n }\n\n \/* =========================================\n SECCI\u00d3N 1: EL PRE\u00c1MBULO (SOBRE)\n ========================================= *\/\n #envelope-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--brand-dark);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 2000;\n transition: opacity 0.8s ease-out, visibility 0.8s;\n }\n\n #envelope-overlay.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .envelope-container {\n position: relative;\n width: 300px;\n height: 200px;\n background-color: #065a66; \/* Un tono ligeramente m\u00e1s claro que el fondo *\/\n border-radius: 5px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n perspective: 1000px;\n margin-bottom: 30px;\n }\n\n .flap {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n }\n\n .flap.top {\n top: 0;\n left: 0;\n border-width: 100px 150px 0 150px;\n border-color: var(--brand-cyan) transparent transparent transparent;\n z-index: 5;\n transform-origin: top;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\n }\n\n .flap.bottom {\n bottom: 0;\n left: 0;\n border-width: 0 150px 100px 150px;\n border-color: transparent transparent #05515c transparent;\n z-index: 4;\n }\n \n .flap.left {\n top: 0;\n left: 0;\n border-width: 100px 0 100px 150px;\n border-color: transparent transparent transparent #033c44;\n z-index: 3;\n }\n .flap.right {\n top: 0;\n right: 0;\n border-width: 100px 150px 100px 0;\n border-color: transparent #033c44 transparent transparent;\n z-index: 3;\n }\n\n \/* Estado de apertura del sobre *\/\n .envelope-container.open .flap.top {\n transform: rotateX(180deg);\n z-index: 2; \/* Se mueve detr\u00e1s al abrirse *\/\n }\n\n .invitation-preview {\n position: absolute;\n top: 10px;\n left: 10px;\n width: calc(100% - 20px);\n height: calc(100% - 20px);\n background: white;\n z-index: 3;\n transition: transform 0.6s ease-out 0.6s; \/* Sale despu\u00e9s de que el sobre se abre *\/\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--brand-dark);\n font-weight: bold;\n font-family: 'Mountains of Christmas', cursive;\n font-size: 1.2rem;\n }\n\n .envelope-container.open .invitation-preview {\n transform: translateY(-120px) scale(0.9);\n opacity: 0;\n }\n\n\n .open-btn {\n padding: 12px 30px;\n background-color: var(--brand-yellow);\n color: var(--brand-dark);\n border: none;\n border-radius: 25px;\n font-family: 'Manrope', sans-serif;\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(232, 232, 20, 0.3);\n transition: transform 0.2s, box-shadow 0.2s;\n z-index: 6;\n }\n\n .open-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(232, 232, 20, 0.5);\n }\n\n \/* =========================================\n SECCI\u00d3N 2: CONTENIDO PRINCIPAL\n ========================================= *\/\n #main-content {\n \/* Inicialmente oculto para la animaci\u00f3n secuencial *\/\n display: none; \n max-width: 800px;\n margin: 0 auto;\n padding: 40px 20px;\n text-align: center;\n }\n\n .logo-header img {\n max-width: 150px;\n height: auto;\n margin-bottom: 30px;\n }\n\n h1.christmas-title {\n font-family: 'Mountains of Christmas', cursive;\n font-size: 3.5rem;\n color: var(--brand-yellow);\n margin-bottom: 10px;\n text-shadow: 0 0 10px rgba(232, 232, 20, 0.3);\n }\n\n h2.subtitle {\n font-size: 1.5rem;\n color: var(--brand-cyan);\n margin-bottom: 5px;\n font-weight: 700;\n }\n\n p.intro-text {\n font-size: 1.1rem;\n color: var(--text-dim);\n margin-bottom: 40px;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* Tarjeta de Detalles *\/\n .details-card {\n background: rgba(21, 116, 138, 0.1); \/* Cyan con mucha transparencia *\/\n border: 1px solid rgba(21, 116, 138, 0.3);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 40px;\n text-align: left;\n }\n\n .detail-item {\n margin-bottom: 20px;\n display: flex;\n align-items: flex-start;\n }\n\n .detail-icon {\n font-size: 1.5rem;\n margin-right: 15px;\n color: var(--brand-cyan);\n }\n\n .detail-content h3 {\n font-size: 1.1rem;\n color: var(--brand-cyan);\n margin-bottom: 5px;\n }\n\n .detail-content p {\n color: var(--text-light);\n line-height: 1.6;\n }\n \n .address-note {\n font-size: 0.9rem;\n color: var(--text-dim);\n font-style: italic;\n }\n\n \/* Secci\u00f3n del Mapa *\/\n .map-container {\n width: 100%;\n height: 350px;\n border-radius: 20px;\n overflow: hidden;\n border: 2px solid var(--brand-cyan);\n margin-bottom: 25px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n }\n\n .map-container iframe {\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n \/* Botones de Acci\u00f3n (Footer) *\/\n .cta-group {\n display: flex;\n flex-direction: column;\n gap: 15px;\n justify-content: center;\n margin-top: 30px;\n }\n\n .btn {\n padding: 15px 30px;\n border-radius: 30px;\n font-weight: 700;\n text-decoration: none;\n transition: all 0.3s ease;\n display: inline-block;\n text-align: center;\n }\n\n .btn-primary {\n background-color: var(--brand-cyan);\n color: var(--text-light);\n box-shadow: 0 4px 15px rgba(21, 116, 138, 0.4);\n }\n .btn-primary:hover { font-weight: bold; background-color: #1d9dbd; transform: translateY(-3px); }\n\n .btn-secondary {\n background-color: transparent;\n border: 2px solid var(--brand-yellow);\n color: var(--brand-yellow);\n }\n .btn-secondary:hover { background-color: var(--brand-yellow); color: var(--brand-dark); }\n\n \/* --- Animaciones Secuenciales (Fade In Up) --- *\/\n .fade-in-element {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .fade-in-element.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Responsive *\/\n @media (min-width: 768px) {\n h1.christmas-title { font-size: 4.5rem; }\n .cta-group { flex-direction: row; }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"envelope-overlay\">\n <div class=\"envelope-container\" id=\"invitation-envelope\">\n <div class=\"flap top\"><\/div>\n <div class=\"flap right\"><\/div>\n <div class=\"flap left\"><\/div>\n <div class=\"invitation-preview\">\n <p>Invitaci\u00f3n Especial<\/p>\n <\/div>\n <div class=\"flap bottom\"><\/div>\n <\/div>\n <button class=\"open-btn\" id=\"open-envelope-btn\">\u2728 Ver invitaci\u00f3n \u2728<\/button>\n <\/div>\n\n\n <div id=\"main-content\">\n <header class=\"logo-header fade-in-element\">\n <img decoding=\"async\" src=\"https:\/\/invitacionsangerardo.totemmassmedia.com\/wp-content\/uploads\/2025\/12\/san-gerardo-logo.png\" alt=\"Logo Colegio San Gerardo\">\n <\/header>\n\n <section class=\"intro fade-in-element\">\n <h2 class=\"subtitle\">Colegio San Gerardo – D\u00e9cimo “D”<\/h2>\n <h1 class=\"christmas-title\">Cena Navide\u00f1a<\/h1>\n <p class=\"intro-text\">Una noche m\u00e1gica para compartir, celebrar el fin de a\u00f1o y fortalecer nuestros lazos como familia Gerardina.<\/p>\n <\/section>\n\n <section class=\"details-card fade-in-element\">\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\ud83d\udcc5<\/div>\n <div class=\"detail-content\">\n <h3>Cu\u00e1ndo<\/h3>\n <p>Viernes, 19 de diciembre<\/p>\n <\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\u23f0<\/div>\n <div class=\"detail-content\">\n <h3>Hora<\/h3>\n <p>7:00 PM (19:00 hrs)<\/p>\n <\/div>\n <\/div>\n <div class=\"detail-item\">\n <div class=\"detail-icon\">\ud83d\udccd<\/div>\n <div class=\"detail-content\">\n <h3>D\u00f3nde<\/h3>\n <p>Calle C\u00e9sar Vallejo junto al Restaurante y Cafeter\u00eda ACAI.<\/p>\n <p class=\"address-note\">A pocos pasos de la entrada al parque PUCAR\u00c1.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"location-actions fade-in-element\">\n <div class=\"map-container\">\n <iframe \n src=\"https:\/\/maps.google.com\/maps?q=-4.006590866334122,-79.19887714135511&t=&z=17&ie=UTF8&iwloc=&output=embed\"\n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n\n <div class=\"cta-group\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/\/-4.006590866334122,-79.19887714135511\/@-4.0065909,-79.1988771,17z\" target=\"_blank\" class=\"btn btn-secondary\">\n \ud83d\uddfa\ufe0f C\u00f3mo llegar (Google Maps)\n <\/a>\n <a href=\"#\" class=\"btn btn-primary\">\n \u2705 Confirmar Asistencia\n <\/a>\n <\/div>\n <\/section>\n <\/div>\n\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ --- 1. Funcionalidad del Sobre ---\n const openBtn = document.getElementById('open-envelope-btn');\n const envelope = document.getElementById('invitation-envelope');\n const overlay = document.getElementById('envelope-overlay');\n const mainContent = document.getElementById('main-content');\n\n openBtn.addEventListener('click', () => {\n \/\/ 1. Animar el sobre abri\u00e9ndose\n envelope.classList.add('open');\n openBtn.style.opacity = '0'; \/\/ Ocultar el bot\u00f3n inmediatamente\n\n \/\/ 2. Esperar a que termine la animaci\u00f3n del sobre (aprox 1s total)\n setTimeout(() => {\n \/\/ 3. Desvanecer el overlay completo\n overlay.classList.add('hidden');\n \n \/\/ 4. Mostrar el contenedor principal\n mainContent.style.display = 'block';\n\n \/\/ 5. Iniciar la aparici\u00f3n secuencial de los elementos\n triggerSequentialAnimations();\n\n \/\/ 6. Eliminar el overlay del DOM para que no estorbe (opcional pero recomendado)\n setTimeout(() => {\n overlay.remove();\n }, 800);\n\n }, 1200); \/\/ Tiempo suficiente para que el sobre se abra y salga la tarjeta\n });\n\n \/\/ --- 2. Animaci\u00f3n Secuencial (Fade In Up) ---\n function triggerSequentialAnimations() {\n const elements = document.querySelectorAll('.fade-in-element');\n elements.forEach((el, index) => {\n \/\/ Un retraso escalonado para cada elemento (ej. 200ms entre cada uno)\n setTimeout(() => {\n el.classList.add('visible');\n }, index * 250); \n });\n }\n\n \/\/ --- 3. Efecto de Nieve en el Cursor ---\n let isSnowing = false; \/\/ Flag para rendimiento\n\n document.addEventListener('mousemove', function(e) {\n if (isSnowing) return; \/\/ Limitar la tasa de creaci\u00f3n de part\u00edculas\n isSnowing = true;\n \n setTimeout(() => { isSnowing = false; }, 40); \/\/ Crear nieve cada 40ms\n\n createSnowflake(e.clientX, e.clientY);\n });\n\n function createSnowflake(x, y) {\n const snowflake = document.createElement('div');\n snowflake.classList.add('snowflake');\n document.body.appendChild(snowflake);\n\n \/\/ Variaci\u00f3n aleatoria en tama\u00f1o y posici\u00f3n inicial\n const size = Math.random() * 6 + 2; \/\/ Entre 2px y 8px\n snowflake.style.width = `${size}px`;\n snowflake.style.height = `${size}px`;\n snowflake.style.left = `${x - size\/2 + (Math.random() * 10 - 5)}px`; \/\/ Peque\u00f1a variaci\u00f3n horizontal\n snowflake.style.top = `${y - size\/2}px`;\n\n \/\/ Eliminar el copo de nieve despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n snowflake.remove();\n }, 1000); \/\/ Debe coincidir con la duraci\u00f3n de la animaci\u00f3n CSS 'fall'\n }\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Cena Navide\u00f1a – Colegio San Gerardo Invitaci\u00f3n Especial \u2728 Ver invitaci\u00f3n \u2728 Colegio San Gerardo – D\u00e9cimo “D” Cena Navide\u00f1a Una noche m\u00e1gica para compartir, celebrar el fin de a\u00f1o y fortalecer nuestros lazos como familia Gerardina. \ud83d\udcc5 Cu\u00e1ndo Viernes, 19 de diciembre \u23f0 Hora 7:00 PM (19:00 hrs) \ud83d\udccd D\u00f3nde Calle C\u00e9sar Vallejo junto […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/invitacionsangerardo.totemmassmedia.com\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}