Contacto – Cimagen<\/title>\n \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@400;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n :root {\n --primary-blue: #5B9BD5;\n --accent-lime: #9ACD32;\n --white: #ffffff;\n --text-dark: #2c3e50;\n --text-light: #555;\n --background-start: #eaf2f8;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Manrope', sans-serif;\n color: var(--text-dark);\n background-color: var(--background-start);\n overflow-x: hidden;\n }\n \n #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }\n .content-container { position: relative; z-index: 2; background-color: transparent; }\n\n #guide-line-svg {\n position: absolute; top: 0; left: 50%; transform: translateX(-50%);\n width: 1200px; height: 100%; z-index: -1; pointer-events: none;\n }\n #guide-path { stroke: rgba(91, 155, 213, 0.35); stroke-width: 3; fill: none; }\n \n .main-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n }\n .container { max-width: 900px; width: 100%; }\n\n .card {\n background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px);\n border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1);\n border: 1px solid rgba(255, 255, 255, 0.5); width: 100%;\n padding: 3rem 4rem;\n position: relative;\n overflow: hidden;\n min-height: 600px;\n display: flex; \/* A\u00f1adido para controlar mejor el contenido *\/\n flex-direction: column; \/* Apila los elementos *\/\n justify-content: space-between; \/* Espacia el contenido y los botones *\/\n }\n\n \/* --- Contenedores para el efecto Toggle --- *\/\n .toggle-content {\n flex-grow: 1; \/* Permite que el contenido ocupe el espacio restante *\/\n transition: opacity 0.6s ease, transform 0.6s ease;\n position: absolute; \/* Para superponerlos *\/\n top: 0; left: 0;\n width: 100%; height: 100%;\n padding: 3rem 4rem; \/* Mismo padding que la tarjeta *\/\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n #form-content {\n opacity: 1;\n transform: scale(1);\n z-index: 2;\n }\n #map-content {\n opacity: 0;\n transform: scale(0.9); \/* Inicia un poco m\u00e1s peque\u00f1o para el zoom in *\/\n pointer-events: none;\n z-index: 1;\n }\n #map-content.visible {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n z-index: 2;\n }\n #form-content.hidden {\n opacity: 0;\n transform: scale(0.9); \/* Se encoge para el zoom out *\/\n pointer-events: none;\n z-index: 1;\n }\n\n\n .map-iframe-container {\n width: 100%;\n height: calc(100% - 150px); \/* Ajustado para dejar m\u00e1s espacio abajo *\/\n border-radius: 15px;\n overflow: hidden;\n margin-top: 2rem;\n margin-bottom: 1rem;\n flex-grow: 1; \/* Para que el iframe ocupe el espacio *\/\n }\n .map-iframe-container iframe { width: 100%; height: 100%; border: none; }\n\n h1 { font-size: 2.8rem; font-weight: 800; color: var(--text-dark); text-align: center; }\n h1 span { color: var(--primary-blue); }\n .subtitle { font-size: 1.1rem; margin: 1rem 0 2rem 0; color: var(--text-light); text-align: center; }\n\n .form-group { margin-bottom: 1.5rem; }\n .form-input {\n width: 100%; padding: 15px 20px; border: 1px solid #ccc;\n border-radius: 10px; background-color: rgba(234, 242, 248, 0.7);\n font-size: 1rem; color: var(--text-dark); font-family: 'Manrope', sans-serif;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n }\n .form-input:focus {\n outline: none; border-color: var(--primary-blue);\n box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.3);\n }\n \n .button-group {\n display: flex;\n gap: 1rem;\n margin-top: auto; \/* Empuja el grupo de botones hacia abajo *\/\n padding-top: 1.5rem; \/* Espacio para que no se pegue al contenido *\/\n }\n .btn {\n display: inline-flex; \/* Usar flexbox para centrar contenido del bot\u00f3n *\/\n align-items: center;\n justify-content: center;\n text-decoration: none; padding: 1rem 1.5rem;\n border-radius: 50px; font-weight: 700; transition: all 0.3s;\n border: none; cursor: pointer; flex-grow: 1; text-align: center;\n }\n .btn i { margin-right: 8px; } \/* Espacio entre icono y texto *\/\n .btn-submit { background-color: var(--accent-lime); color: var(--text-dark); }\n .btn-secondary { background-color: transparent; color: var(--primary-blue); border: 2px solid var(--primary-blue); }\n .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }\n\n .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n\n @media (max-width: 768px) {\n #guide-line-svg { display: none; }\n .main-section { padding: 1rem; }\n .card, .toggle-content { padding: 1.5rem; min-height: 90vh; }\n h1 { font-size: 2rem; }\n .subtitle { font-size: 1rem; margin-bottom: 1.5rem; }\n .form-group { margin-bottom: 1rem; }\n .form-input { padding: 12px 15px; }\n .button-group { flex-direction: column; gap: 0.8rem; }\n .btn { padding: 0.8rem 1rem; font-size: 0.9rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <canvas id=\"bg-canvas\"><\/canvas>\n\n <div class=\"content-container\">\n <svg id=\"guide-line-svg\">\n <path id=\"guide-path\" d=\"M 100 200 C 100 500, 1100 500, 1100 800 S 100 1100 100 1400\"><\/path>\n <\/svg>\n \n <main>\n <section class=\"main-section\">\n <div class=\"container\">\n <div class=\"card reveal\">\n <div class=\"toggle-content\" id=\"form-content\">\n <div>\n <h1>Ponte en <span>Contacto<\/span><\/h1>\n <p class=\"subtitle\">Env\u00edanos un mensaje y te responderemos a la brevedad.<\/p>\n <form action=\"https:\/\/formspree.io\/f\/your_form_id\" method=\"POST\">\n <div class=\"form-group\"><input type=\"text\" name=\"name\" class=\"form-input\" placeholder=\"Nombre completo\" required><\/div>\n <div class=\"form-group\"><input type=\"email\" name=\"email\" class=\"form-input\" placeholder=\"Correo electr\u00f3nico\" required><\/div>\n <div class=\"form-group\"><textarea name=\"message\" class=\"form-input\" rows=\"5\" placeholder=\"Escribe tu mensaje aqu\u00ed...\" required><\/textarea><\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"show-map-btn\">\n <i class=\"fas fa-map-marker-alt\"><\/i> Ver Ubicaci\u00f3n\n <\/button>\n <button type=\"submit\" class=\"btn btn-submit\">Enviar Mensaje<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <div class=\"toggle-content\" id=\"map-content\">\n <div>\n <h1>Nuestra <span>Ubicaci\u00f3n<\/span><\/h1>\n <p class=\"subtitle\">Av Tl\u00e1huac 1004, Col. Lomas Estrella, 09890 Ciudad de M\u00e9xico<\/p>\n <div class=\"map-iframe-container\">\n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3766.198902882315!2d-99.10986518491845!3d19.231936987018338!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85ce0190a6190fd7%3A0x6a0f4a2b1f8c1f9c!2sAv.%20Tl%C3%A1huac%201004%2C%20Lomas%20Estrella%2C%20Iztapalapa%2C%2009890%20Ciudad%20de%20M%C3%A9xico%2C%20CDMX!5e0!3m2!1ses-419!2smx!4v1678912345678!5m2!1ses-419!2smx\" \n width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n <\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"show-form-btn\">\n <i class=\"fas fa-arrow-left\"><\/i> Volver al Formulario\n <\/button>\n <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=Av.+Tl\u00e1huac+1004,+Col.+Lomas+Estrella,+09890+Ciudad+de+M\u00e9xico\" target=\"_blank\" class=\"btn btn-submit\">\n <i class=\"fas fa-external-link-alt\"><\/i> Abrir en Google Maps\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script type=\"importmap\">\n { \"imports\": { \"three\": \"https:\/\/unpkg.com\/three@0.156.1\/build\/three.module.js\" } }\n <\/script>\n <script type=\"module\">\n import * as THREE from 'three';\n \/\/ C\u00f3digo de las part\u00edculas de fondo 3D (se mantiene como estaba)\n function createCrossTexture(){const c=document.createElement(\"canvas\");c.width=64,c.height=64;const t=c.getContext(\"2d\");return t.beginPath(),t.moveTo(22,32),t.lineTo(42,32),t.moveTo(32,22),t.lineTo(32,42),t.lineWidth=5,t.strokeStyle=\"rgba(91, 155, 213, 0.5)\",t.stroke(),new THREE.CanvasTexture(c)}const scene=new THREE.Scene,camera=new THREE.PerspectiveCamera(75,window.innerWidth\/window.innerHeight,.1,1e3),renderer=new THREE.WebGLRenderer({canvas:document.querySelector(\"#bg-canvas\"),alpha:!0});renderer.setSize(window.innerWidth,window.innerHeight);const particleCount=4e3,positions=new Float32Array(4e3*3);for(let e=0;e<12e3;e++)positions[e]=25*(Math.random()-.5);const particlesGeometry=new THREE.BufferGeometry;particlesGeometry.setAttribute(\"position\",new THREE.BufferAttribute(positions,3));const particlesMaterial=new THREE.PointsMaterial({size:.1,map:createCrossTexture(),transparent:!0,blending:THREE.AdditiveBlending,depthWrite:!1}),particleSystem=new THREE.Points(particlesGeometry,particlesMaterial);scene.add(particleSystem),camera.position.z=5;const mouse=new THREE.Vector2;document.addEventListener(\"mousemove\",e=>{mouse.x=e.clientX\/window.innerWidth*2-1,mouse.y=-(e.clientY\/window.innerHeight)*2+1});const guidePath=document.querySelector(\"#guide-path\"),pathLength=guidePath.getTotalLength();guidePath.style.strokeDasharray=pathLength,guidePath.style.strokeDashoffset=pathLength;function handleScroll(){const e=window.pageYOffset||document.documentElement.scrollTop,t=document.documentElement.scrollHeight-window.innerHeight,o=t>0?e\/t:0;camera.position.z=5-.003*e;const n=pathLength*o;guidePath.style.strokeDashoffset=pathLength-n}window.addEventListener(\"scroll\",handleScroll,{passive:!0});function animate(){requestAnimationFrame(animate),particleSystem.rotation.y+=2e-4,camera.position.x+=.02*(.5*mouse.x-camera.position.x),camera.position.y+=.02*(.5*mouse.y-camera.position.y),camera.lookAt(scene.position),renderer.render(scene,camera)}animate(),window.addEventListener(\"resize\",()=>{camera.aspect=window.innerWidth\/window.innerHeight,camera.updateProjectionMatrix(),renderer.setSize(window.innerWidth,window.innerHeight)});const observer=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&t.target.classList.add(\"visible\")})},{threshold:0.3});document.querySelectorAll(\".reveal\").forEach(e=>{observer.observe(e)}),handleScroll();\n <\/script>\n <script>\n \/\/ --- SCRIPT PARA TOGGLE DE FORMULARIO Y MAPA CON EFECTO DE ZOOM ---\n const showMapBtn = document.getElementById('show-map-btn');\n const showFormBtn = document.getElementById('show-form-btn');\n const formContent = document.getElementById('form-content');\n const mapContent = document.getElementById('map-content');\n\n showMapBtn.addEventListener('click', () => {\n formContent.classList.add('hidden');\n mapContent.classList.add('visible');\n });\n\n showFormBtn.addEventListener('click', () => {\n formContent.classList.remove('hidden');\n mapContent.classList.remove('visible');\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contacto – Cimagen Ponte en Contacto Env\u00edanos un mensaje y te responderemos a la brevedad. Ver Ubicaci\u00f3n Enviar Mensaje Nuestra […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-1283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":9,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/media?parent=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1283,"date":"2025-09-09T18:29:01","date_gmt":"2025-09-10T00:29:01","guid":{"rendered":"https:\/\/cimigen.org.mx\/?page_id=1283"},"modified":"2025-09-09T18:42:53","modified_gmt":"2025-09-10T00:42:53","slug":"contac","status":"publish","type":"page","link":"https:\/\/cimigen.org.mx\/index.php\/contac\/","title":{"rendered":"Contacto"},"content":{"rendered":"\n\n\n\n \n \n Contacto – Cimagen<\/title>\n \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@400;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n :root {\n --primary-blue: #5B9BD5;\n --accent-lime: #9ACD32;\n --white: #ffffff;\n --text-dark: #2c3e50;\n --text-light: #555;\n --background-start: #eaf2f8;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Manrope', sans-serif;\n color: var(--text-dark);\n background-color: var(--background-start);\n overflow-x: hidden;\n }\n \n #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }\n .content-container { position: relative; z-index: 2; background-color: transparent; }\n\n #guide-line-svg {\n position: absolute; top: 0; left: 50%; transform: translateX(-50%);\n width: 1200px; height: 100%; z-index: -1; pointer-events: none;\n }\n #guide-path { stroke: rgba(91, 155, 213, 0.35); stroke-width: 3; fill: none; }\n \n .main-section {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n }\n .container { max-width: 900px; width: 100%; }\n\n .card {\n background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px);\n border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1);\n border: 1px solid rgba(255, 255, 255, 0.5); width: 100%;\n padding: 3rem 4rem;\n position: relative;\n overflow: hidden;\n min-height: 600px;\n display: flex; \/* A\u00f1adido para controlar mejor el contenido *\/\n flex-direction: column; \/* Apila los elementos *\/\n justify-content: space-between; \/* Espacia el contenido y los botones *\/\n }\n\n \/* --- Contenedores para el efecto Toggle --- *\/\n .toggle-content {\n flex-grow: 1; \/* Permite que el contenido ocupe el espacio restante *\/\n transition: opacity 0.6s ease, transform 0.6s ease;\n position: absolute; \/* Para superponerlos *\/\n top: 0; left: 0;\n width: 100%; height: 100%;\n padding: 3rem 4rem; \/* Mismo padding que la tarjeta *\/\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n #form-content {\n opacity: 1;\n transform: scale(1);\n z-index: 2;\n }\n #map-content {\n opacity: 0;\n transform: scale(0.9); \/* Inicia un poco m\u00e1s peque\u00f1o para el zoom in *\/\n pointer-events: none;\n z-index: 1;\n }\n #map-content.visible {\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n z-index: 2;\n }\n #form-content.hidden {\n opacity: 0;\n transform: scale(0.9); \/* Se encoge para el zoom out *\/\n pointer-events: none;\n z-index: 1;\n }\n\n\n .map-iframe-container {\n width: 100%;\n height: calc(100% - 150px); \/* Ajustado para dejar m\u00e1s espacio abajo *\/\n border-radius: 15px;\n overflow: hidden;\n margin-top: 2rem;\n margin-bottom: 1rem;\n flex-grow: 1; \/* Para que el iframe ocupe el espacio *\/\n }\n .map-iframe-container iframe { width: 100%; height: 100%; border: none; }\n\n h1 { font-size: 2.8rem; font-weight: 800; color: var(--text-dark); text-align: center; }\n h1 span { color: var(--primary-blue); }\n .subtitle { font-size: 1.1rem; margin: 1rem 0 2rem 0; color: var(--text-light); text-align: center; }\n\n .form-group { margin-bottom: 1.5rem; }\n .form-input {\n width: 100%; padding: 15px 20px; border: 1px solid #ccc;\n border-radius: 10px; background-color: rgba(234, 242, 248, 0.7);\n font-size: 1rem; color: var(--text-dark); font-family: 'Manrope', sans-serif;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n }\n .form-input:focus {\n outline: none; border-color: var(--primary-blue);\n box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.3);\n }\n \n .button-group {\n display: flex;\n gap: 1rem;\n margin-top: auto; \/* Empuja el grupo de botones hacia abajo *\/\n padding-top: 1.5rem; \/* Espacio para que no se pegue al contenido *\/\n }\n .btn {\n display: inline-flex; \/* Usar flexbox para centrar contenido del bot\u00f3n *\/\n align-items: center;\n justify-content: center;\n text-decoration: none; padding: 1rem 1.5rem;\n border-radius: 50px; font-weight: 700; transition: all 0.3s;\n border: none; cursor: pointer; flex-grow: 1; text-align: center;\n }\n .btn i { margin-right: 8px; } \/* Espacio entre icono y texto *\/\n .btn-submit { background-color: var(--accent-lime); color: var(--text-dark); }\n .btn-secondary { background-color: transparent; color: var(--primary-blue); border: 2px solid var(--primary-blue); }\n .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }\n\n .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n\n @media (max-width: 768px) {\n #guide-line-svg { display: none; }\n .main-section { padding: 1rem; }\n .card, .toggle-content { padding: 1.5rem; min-height: 90vh; }\n h1 { font-size: 2rem; }\n .subtitle { font-size: 1rem; margin-bottom: 1.5rem; }\n .form-group { margin-bottom: 1rem; }\n .form-input { padding: 12px 15px; }\n .button-group { flex-direction: column; gap: 0.8rem; }\n .btn { padding: 0.8rem 1rem; font-size: 0.9rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <canvas id=\"bg-canvas\"><\/canvas>\n\n <div class=\"content-container\">\n <svg id=\"guide-line-svg\">\n <path id=\"guide-path\" d=\"M 100 200 C 100 500, 1100 500, 1100 800 S 100 1100 100 1400\"><\/path>\n <\/svg>\n \n <main>\n <section class=\"main-section\">\n <div class=\"container\">\n <div class=\"card reveal\">\n <div class=\"toggle-content\" id=\"form-content\">\n <div>\n <h1>Ponte en <span>Contacto<\/span><\/h1>\n <p class=\"subtitle\">Env\u00edanos un mensaje y te responderemos a la brevedad.<\/p>\n <form action=\"https:\/\/formspree.io\/f\/your_form_id\" method=\"POST\">\n <div class=\"form-group\"><input type=\"text\" name=\"name\" class=\"form-input\" placeholder=\"Nombre completo\" required><\/div>\n <div class=\"form-group\"><input type=\"email\" name=\"email\" class=\"form-input\" placeholder=\"Correo electr\u00f3nico\" required><\/div>\n <div class=\"form-group\"><textarea name=\"message\" class=\"form-input\" rows=\"5\" placeholder=\"Escribe tu mensaje aqu\u00ed...\" required><\/textarea><\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"show-map-btn\">\n <i class=\"fas fa-map-marker-alt\"><\/i> Ver Ubicaci\u00f3n\n <\/button>\n <button type=\"submit\" class=\"btn btn-submit\">Enviar Mensaje<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <div class=\"toggle-content\" id=\"map-content\">\n <div>\n <h1>Nuestra <span>Ubicaci\u00f3n<\/span><\/h1>\n <p class=\"subtitle\">Av Tl\u00e1huac 1004, Col. Lomas Estrella, 09890 Ciudad de M\u00e9xico<\/p>\n <div class=\"map-iframe-container\">\n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3766.198902882315!2d-99.10986518491845!3d19.231936987018338!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85ce0190a6190fd7%3A0x6a0f4a2b1f8c1f9c!2sAv.%20Tl%C3%A1huac%201004%2C%20Lomas%20Estrella%2C%20Iztapalapa%2C%2009890%20Ciudad%20de%20M%C3%A9xico%2C%20CDMX!5e0!3m2!1ses-419!2smx!4v1678912345678!5m2!1ses-419!2smx\" \n width=\"600\" height=\"450\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\n <\/iframe>\n <\/div>\n <\/div>\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"show-form-btn\">\n <i class=\"fas fa-arrow-left\"><\/i> Volver al Formulario\n <\/button>\n <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=Av.+Tl\u00e1huac+1004,+Col.+Lomas+Estrella,+09890+Ciudad+de+M\u00e9xico\" target=\"_blank\" class=\"btn btn-submit\">\n <i class=\"fas fa-external-link-alt\"><\/i> Abrir en Google Maps\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script type=\"importmap\">\n { \"imports\": { \"three\": \"https:\/\/unpkg.com\/three@0.156.1\/build\/three.module.js\" } }\n <\/script>\n <script type=\"module\">\n import * as THREE from 'three';\n \/\/ C\u00f3digo de las part\u00edculas de fondo 3D (se mantiene como estaba)\n function createCrossTexture(){const c=document.createElement(\"canvas\");c.width=64,c.height=64;const t=c.getContext(\"2d\");return t.beginPath(),t.moveTo(22,32),t.lineTo(42,32),t.moveTo(32,22),t.lineTo(32,42),t.lineWidth=5,t.strokeStyle=\"rgba(91, 155, 213, 0.5)\",t.stroke(),new THREE.CanvasTexture(c)}const scene=new THREE.Scene,camera=new THREE.PerspectiveCamera(75,window.innerWidth\/window.innerHeight,.1,1e3),renderer=new THREE.WebGLRenderer({canvas:document.querySelector(\"#bg-canvas\"),alpha:!0});renderer.setSize(window.innerWidth,window.innerHeight);const particleCount=4e3,positions=new Float32Array(4e3*3);for(let e=0;e<12e3;e++)positions[e]=25*(Math.random()-.5);const particlesGeometry=new THREE.BufferGeometry;particlesGeometry.setAttribute(\"position\",new THREE.BufferAttribute(positions,3));const particlesMaterial=new THREE.PointsMaterial({size:.1,map:createCrossTexture(),transparent:!0,blending:THREE.AdditiveBlending,depthWrite:!1}),particleSystem=new THREE.Points(particlesGeometry,particlesMaterial);scene.add(particleSystem),camera.position.z=5;const mouse=new THREE.Vector2;document.addEventListener(\"mousemove\",e=>{mouse.x=e.clientX\/window.innerWidth*2-1,mouse.y=-(e.clientY\/window.innerHeight)*2+1});const guidePath=document.querySelector(\"#guide-path\"),pathLength=guidePath.getTotalLength();guidePath.style.strokeDasharray=pathLength,guidePath.style.strokeDashoffset=pathLength;function handleScroll(){const e=window.pageYOffset||document.documentElement.scrollTop,t=document.documentElement.scrollHeight-window.innerHeight,o=t>0?e\/t:0;camera.position.z=5-.003*e;const n=pathLength*o;guidePath.style.strokeDashoffset=pathLength-n}window.addEventListener(\"scroll\",handleScroll,{passive:!0});function animate(){requestAnimationFrame(animate),particleSystem.rotation.y+=2e-4,camera.position.x+=.02*(.5*mouse.x-camera.position.x),camera.position.y+=.02*(.5*mouse.y-camera.position.y),camera.lookAt(scene.position),renderer.render(scene,camera)}animate(),window.addEventListener(\"resize\",()=>{camera.aspect=window.innerWidth\/window.innerHeight,camera.updateProjectionMatrix(),renderer.setSize(window.innerWidth,window.innerHeight)});const observer=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&t.target.classList.add(\"visible\")})},{threshold:0.3});document.querySelectorAll(\".reveal\").forEach(e=>{observer.observe(e)}),handleScroll();\n <\/script>\n <script>\n \/\/ --- SCRIPT PARA TOGGLE DE FORMULARIO Y MAPA CON EFECTO DE ZOOM ---\n const showMapBtn = document.getElementById('show-map-btn');\n const showFormBtn = document.getElementById('show-form-btn');\n const formContent = document.getElementById('form-content');\n const mapContent = document.getElementById('map-content');\n\n showMapBtn.addEventListener('click', () => {\n formContent.classList.add('hidden');\n mapContent.classList.add('visible');\n });\n\n showFormBtn.addEventListener('click', () => {\n formContent.classList.remove('hidden');\n mapContent.classList.remove('visible');\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contacto – Cimagen Ponte en Contacto Env\u00edanos un mensaje y te responderemos a la brevedad. Ver Ubicaci\u00f3n Enviar Mensaje Nuestra […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-1283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":9,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/pages\/1283\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/cimigen.org.mx\/index.php\/wp-json\/wp\/v2\/media?parent=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}