EIPIPRO | Centro de Servicios Profesionales Premium<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n gold: {\n light: '#FDE68A',\n DEFAULT: '#D4AF37', \/\/ Oro cl\u00e1sico\n dark: '#997A15',\n },\n obsidian: '#0a0a0a',\n charcoal: '#171717',\n },\n fontFamily: {\n sans: ['Montserrat', 'sans-serif'],\n serif: ['Cormorant Garamond', 'serif'],\n },\n animation: {\n 'slow-pan': 'panImage 30s linear infinite',\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n panImage: {\n '0%': { objectPosition: '0% 50%' },\n '50%': { objectPosition: '100% 50%' },\n '100%': { objectPosition: '0% 50%' },\n },\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-15px)' },\n }\n }\n }\n }\n }\n <\/script>\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=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* REGLAS ANTI-CONFLICTO CMS: Aseguran que tu tema no sobreescriba los colores *\/\n html, body { \n background-color: #0a0a0a !important; \n color: #ffffff !important;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0a0a0a; }\n ::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 10px; }\n ::-webkit-scrollbar-thumb:hover { background: #FDE68A; }\n\n .text-gradient-gold {\n background: linear-gradient(135deg, #FDE68A 0%, #D4AF37 50%, #997A15 100%) !important;\n -webkit-background-clip: text !important;\n -webkit-text-fill-color: transparent !important;\n background-clip: text !important;\n }\n\n .glass-panel {\n background: rgba(23, 23, 23, 0.6) !important;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(212, 175, 55, 0.2) !important;\n }\n\n .hover-gold-glow { transition: all 0.4s ease; }\n .hover-gold-glow:hover {\n box-shadow: 0 0 30px rgba(212, 175, 55, 0.3) !important;\n border-color: rgba(212, 175, 55, 0.8) !important;\n transform: translateY(-5px);\n }\n\n \/* Animaciones Scroll *\/\n .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal.active { opacity: 1; transform: translateY(0); }\n .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal-left.active { opacity: 1; transform: translateX(0); }\n .reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal-right.active { opacity: 1; transform: translateX(0); }\n\n .input-field:focus ~ label, .input-field:not(:placeholder-shown) ~ label {\n transform: translateY(-1.5rem) scale(0.85);\n color: #D4AF37 !important;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:!bg-gold selection:!text-black !bg-obsidian\">\n\n <nav id=\"navbar\" class=\"fixed w-full z-50 transition-all duration-500 bg-transparent py-6 border-b border-transparent\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"flex justify-between items-center\">\n \n <div class=\"flex-shrink-0 cursor-pointer\" onclick=\"window.scrollTo(0,0)\">\n <span class=\"font-serif text-4xl font-bold tracking-widest !text-white\">\n EIPI<span class=\"!text-gold\">PRO<\/span>\n <\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-10 items-center\">\n <a href=\"#profesional\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Profesional<\/a>\n <a href=\"#empresarial\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Empresarial<\/a>\n <a href=\"#comercial\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Comercial<\/a>\n <a href=\"#digital\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Digital<\/a>\n <a href=\"#contacto\" class=\"border border-gold !text-gold px-8 py-3 rounded-sm text-xs uppercase tracking-[0.2em] font-bold hover:!bg-gold hover:!text-black transition-all duration-300 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n Contacto\n <\/a>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center\">\n <button id=\"mobile-menu-btn\" class=\"!text-gold focus:outline-none\">\n <svg class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"fixed inset-0 !bg-obsidian\/95 backdrop-blur-xl z-40 hidden flex-col items-center justify-center space-y-8 pt-20 transition-opacity duration-300 opacity-0\">\n <button id=\"close-menu-btn\" class=\"absolute top-8 right-6 !text-white hover:!text-gold\">\n <svg class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6M6 6l12 12\" \/><\/svg>\n <\/button>\n <a href=\"#profesional\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Profesional<\/a>\n <a href=\"#empresarial\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Empresarial<\/a>\n <a href=\"#comercial\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Comercial<\/a>\n <a href=\"#digital\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Ecosistema Digital<\/a>\n <a href=\"#contacto\" class=\"mt-8 !text-gold border-b border-gold pb-1 text-xl uppercase tracking-widest mobile-link\">Iniciar Proyecto<\/a>\n <\/div>\n <\/nav>\n\n <header class=\"relative min-h-screen flex items-center justify-center overflow-hidden\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2000\" alt=\"Corporate Skyscraper\" class=\"w-full h-full object-cover animate-slow-pan opacity-40\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-obsidian\/80 via-obsidian\/60 to-obsidian\"><\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[800px] h-[800px] bg-gold\/10 rounded-full blur-[120px] pointer-events-none\"><\/div>\n <\/div>\n \n <div class=\"relative z-10 text-center px-4 max-w-5xl mx-auto mt-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.4em] text-xs md:text-sm mb-6 font-semibold\">Exclusividad & Resultados<\/p>\n <h1 class=\"text-5xl md:text-7xl lg:text-8xl font-serif font-bold leading-tight mb-8 !text-white\">\n El Centro de Excelencia <br>\n <span class=\"text-gradient-gold italic\">Corporativa<\/span>\n <\/h1>\n <p class=\"!text-gray-100 font-light text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed\">\n Servicios Profesionales, Empresariales, Comerciales y Digitales de \u00e9lite a nivel nacional e internacional. Su aliado estrat\u00e9gico definitivo.\n <\/p>\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-6\">\n <a href=\"#contacto\" class=\"group relative px-8 py-4 !bg-gold !text-black font-bold uppercase tracking-widest text-xs overflow-hidden rounded-sm w-full sm:w-auto\">\n <span class=\"relative z-10 group-hover:!text-white transition-colors duration-300\">Agendar Consultor\u00eda Privada<\/span>\n <div class=\"absolute inset-0 h-full w-0 !bg-obsidian transition-all duration-500 ease-out group-hover:w-full z-0\"><\/div>\n <\/a>\n <a href=\"#profesional\" class=\"px-8 py-4 bg-transparent !text-white border border-white\/40 font-medium uppercase tracking-widest text-xs hover:border-gold hover:!text-gold transition-colors duration-300 w-full sm:w-auto\">\n Descubrir Servicios\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"absolute bottom-10 left-1\/2 transform -translate-x-1\/2 z-10 animate-bounce\">\n <a href=\"#profesional\" class=\"!text-white hover:!text-gold transition-colors opacity-80\">\n <p class=\"text-[10px] uppercase tracking-[0.2em] mb-2\">Scroll<\/p>\n <svg class=\"w-5 h-5 mx-auto\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\"><\/path><\/svg>\n <\/a>\n <\/div>\n <\/header>\n\n <section id=\"profesional\" class=\"py-32 relative !bg-obsidian border-b border-white\/5\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\n <div class=\"reveal-left order-2 lg:order-1 relative\">\n <div class=\"absolute -inset-4 border border-gold\/40 translate-x-4 translate-y-4 -z-10\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=1000\" alt=\"Executive Professional\" class=\"w-full object-cover h-[600px] grayscale hover:grayscale-0 transition-all duration-700 shadow-2xl\">\n <div class=\"absolute bottom-6 left-6 right-6 glass-panel p-6\">\n <p class=\"!text-gold text-sm tracking-widest uppercase mb-1 font-bold\">Firma Principal<\/p>\n <p class=\"font-serif text-3xl !text-white font-bold\">LA OFFI GT<\/p>\n <\/div>\n <\/div>\n \n <div class=\"reveal-right order-1 lg:order-2\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"h-[1px] w-12 !bg-gold\"><\/div>\n <span class=\"!text-gold uppercase tracking-widest text-xs font-bold\">I. Nivel Profesional<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-serif font-bold mb-8 leading-tight !text-white\">Autoridad en <br><span class=\"text-gradient-gold\">Finanzas & Auditor\u00eda<\/span><\/h2>\n <p class=\"!text-gray-100 font-light text-lg mb-10 leading-relaxed\">\n Bajo la prestigiosa firma <strong class=\"!text-white\">LA OFFI GT<\/strong>, ofrecemos un est\u00e1ndar inquebrantable de excelencia. Como <strong class=\"!text-white\">Mag\u00edster en Finanzas<\/strong> y <strong class=\"!text-white\">Contador P\u00fablico y Auditor<\/strong>, garantizamos el blindaje patrimonial y el crecimiento estrat\u00e9gico de su corporaci\u00f3n.\n <\/p>\n \n <div class=\"space-y-6\">\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">01.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Auditor\u00eda Financiera de Alto Nivel<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Evaluaciones exhaustivas que otorgan transparencia absoluta y confianza a los stakeholders e inversionistas.<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">02.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Consultor\u00eda por Mag\u00edster en Finanzas<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Estrategias de inversi\u00f3n, valoraci\u00f3n de empresas complejas y reestructuraci\u00f3n financiera a gran escala.<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">03.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Gesti\u00f3n Tributaria Especializada<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Optimizaci\u00f3n fiscal amparada en la ley para maximizar la rentabilidad operativa mediante LA OFFI GT.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"empresarial\" class=\"py-32 relative !bg-charcoal\">\n <div class=\"absolute right-0 top-0 w-1\/3 h-full !bg-obsidian\/50 skew-x-12 transform origin-top hidden lg:block\"><\/div>\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">II. Nivel Empresarial<\/p>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-6 !text-white\">Marketing & <span class=\"text-gradient-gold\">Gesti\u00f3n Gastron\u00f3mica<\/span><\/h2>\n <p class=\"!text-gray-100 max-w-3xl mx-auto text-lg font-light leading-relaxed\">Convertimos la visi\u00f3n culinaria y corporativa en imperios rentables. Dise\u00f1amos sistemas de gesti\u00f3n y campa\u00f1as de marketing que dominan el mercado de \u00e9lite.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-10\">\n <div class=\"group relative overflow-hidden h-[500px] reveal-left border border-white\/10 rounded-sm\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514933651103-005eec06c04b?auto=format&fit=crop&q=80&w=1000\" alt=\"Fine Dining\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/70 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-10 transform translate-y-6 group-hover:translate-y-0 transition-transform duration-500\">\n <div class=\"w-12 h-12 bg-gold\/20 backdrop-blur-md rounded-full flex items-center justify-center !text-gold mb-6 border border-gold\/80\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-3xl font-serif !text-white mb-3 font-bold\">Negocios Gastron\u00f3micos<\/h3>\n <p class=\"!text-gray-100 font-light text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">\n Especialistas en la industria restaurantera. Implementamos ingenier\u00eda de men\u00fa, control estricto de costos (food cost), estandarizaci\u00f3n de procesos y dise\u00f1o de experiencias premium para comensales.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"group relative overflow-hidden h-[500px] reveal-right border border-white\/10 rounded-sm\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1000\" alt=\"Marketing Strategy\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/70 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-10 transform translate-y-6 group-hover:translate-y-0 transition-transform duration-500\">\n <div class=\"w-12 h-12 bg-gold\/20 backdrop-blur-md rounded-full flex items-center justify-center !text-gold mb-6 border border-gold\/80\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-3xl font-serif !text-white mb-3 font-bold\">Marketing Estrat\u00e9gico<\/h3>\n <p class=\"!text-gray-100 font-light text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">\n Posicionamiento de marca a nivel corporativo. An\u00e1lisis de mercado, segmentaci\u00f3n de clientes de alto poder adquisitivo y estrategias de penetraci\u00f3n comercial infalibles.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"comercial\" class=\"py-32 relative !bg-obsidian overflow-hidden border-y border-white\/5\">\n <div class=\"absolute inset-0 z-0 opacity-10\" style=\"background-image: radial-gradient(circle at center, #D4AF37 1px, transparent 1px); background-size: 40px 40px;\"><\/div>\n \n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"flex flex-col lg:flex-row gap-16 items-center\">\n \n \n <div class=\"w-full lg:w-5\/12 reveal-left\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">III. Nivel Comercial<\/p>\n <h2 class=\"text-4xl md:text-5xl font-serif font-bold mb-6 !text-white\">Vallas Publicitarias<br><span class=\"!text-white border-b-2 border-gold pb-1\">Huehuetenango<\/span><\/h2>\n <p class=\"!text-gray-100 font-light text-lg mb-10 leading-relaxed\">\n Garantice el impacto visual absoluto de su corporaci\u00f3n. Posicionamos su marca a trav\u00e9s de <strong>vallas y mantas publicitarias de formato premium<\/strong> dominando los circuitos de mayor tr\u00e1nsito en la ciudad.\n <\/p>\n \n \n <div class=\"space-y-8 mb-10\">\n \n <div class=\"glass-panel p-5 hover-gold-glow flex items-center gap-4 shadow-[0_0_15px_rgba(212,175,55,0.15)] border-gold\/50 rounded-sm\">\n <div class=\"w-3 h-3 rounded-full !bg-gold animate-pulse shadow-[0_0_10px_#D4AF37]\"><\/div>\n <div>\n <span class=\"text-sm font-bold tracking-widest !text-gold uppercase block mb-1\">Ubicaci\u00f3n \u00c9lite<\/span>\n <span class=\"text-lg font-serif font-bold !text-white uppercase\">Calles Principales – Zona 9<\/span>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-xs font-bold tracking-[0.2em] !text-gray-400 uppercase mb-4 border-b border-white\/10 pb-2\">Tr\u00e1nsito Masivo & Ejecutivos<\/h3>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Aeropuerto & IGSS<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Hospital Nacional<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Zona Militar<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Estadio<\/span>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-xs font-bold tracking-[0.2em] !text-gray-400 uppercase mb-4 border-b border-white\/10 pb-2\">Circuitos Comerciales (Malls)<\/h3>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Pradera Huehue<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Mirador Mall<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Alturas Mall<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Ruinas<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <a href=\"#contacto\" class=\"inline-flex !text-gold text-sm tracking-widest uppercase font-bold hover:!text-white transition-colors items-center gap-2 group border border-gold\/30 px-6 py-3 rounded-sm hover:!bg-gold\/10\">\n Reservar Espacio\n <svg class=\"w-4 h-4 group-hover:translate-x-2 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"><\/path><\/svg>\n <\/a>\n <\/div>\n\n \n <div class=\"w-full lg:w-7\/12 reveal-right\">\n <div class=\"grid grid-cols-2 gap-4 h-[500px] md:h-[600px]\">\n \n <div class=\"col-span-1 h-full rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561414927-6d86591d0c4f?auto=format&fit=crop&q=80&w=800\" alt=\"Valla Publicitaria Urbana en Calle\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-6 left-6 right-6\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Formato Premium<\/p>\n <p class=\"font-serif text-xl !text-white font-bold leading-tight\">Vallas Urbanas <br>Zona 9<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"col-span-1 flex flex-col gap-4 h-full\">\n \n <div class=\"h-1\/2 rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1559828551-364ebc3b3104?auto=format&fit=crop&q=80&w=800\" alt=\"Publicidad en Avenidas Principales\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-5 left-5 right-5\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Alto Tr\u00e1fico<\/p>\n <p class=\"font-serif text-lg !text-white font-bold leading-tight\">Avenidas & <br>Hospitales<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"h-1\/2 rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1572949645841-094f3a9c4c94?auto=format&fit=crop&q=80&w=800\" alt=\"Mantas y Mupis Publicitarios\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-5 left-5 right-5\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Impacto Urbano<\/p>\n <p class=\"font-serif text-lg !text-white font-bold leading-tight\">Mantas en <br>V\u00eda P\u00fablica<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"digital\" class=\"py-32 relative !bg-obsidian\">\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-gold\/5 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-blue-900\/10 rounded-full blur-[100px]\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">IV. Ecosistema Digital<\/p>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-6 !text-white\">Arquitectura <span class=\"text-gradient-gold\">Digital Avanzada<\/span><\/h2>\n <p class=\"!text-gray-100 max-w-3xl mx-auto text-lg font-light leading-relaxed\">Automatizaci\u00f3n, est\u00e9tica y conversi\u00f3n. Construimos las plataformas tecnol\u00f3gicas que operan 24\/7 como el mejor vendedor de su corporaci\u00f3n.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800\" alt=\"Sitios Web Premium\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Sitios Web Premium<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Dise\u00f1o a medida, optimizaci\u00f3n SEO extrema y carga ultrarr\u00e1pida. La vitrina perfecta para marcas de lujo y corporaciones.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 100ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800\" alt=\"Landing Pages\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Landing Pages (Embudos)<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">P\u00e1ginas de aterrizaje enfocadas 100% en conversi\u00f3n. Transformamos el tr\u00e1fico publicitario en clientes potenciales altamente cualificados.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 200ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1605810230434-7631ac76ec81?auto=format&fit=crop&q=80&w=800\" alt=\"vCards Inteligentes NFC\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">vCards Inteligentes NFC<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Tarjetas de presentaci\u00f3n digitales con tecnolog\u00eda NFC y c\u00f3digos QR. Transfiera su contacto corporativo al instante con un simple toque en el smartphone de su cliente.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504868584819-f8e8b4b6d7e3?auto=format&fit=crop&q=80&w=800\" alt=\"Plataformas Empresariales\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Plataformas Empresariales<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Desarrollo de software a medida. Sistemas ERP, CRM y portales internos dise\u00f1ados para la gesti\u00f3n eficiente de su compa\u00f1\u00eda.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 100ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800\" alt=\"E-commerce\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Tiendas Online E-commerce<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Plataformas de venta seguras y escalables. Integramos pasarelas de pago internacionales para que comercialice sin fronteras.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 200ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611162617474-5b21e879e113?auto=format&fit=crop&q=80&w=800\" alt=\"Chatbots WhatsApp\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Chatbots para WhatsApp<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Inteligencia Artificial aplicada a la atenci\u00f3n. Automatice respuestas, agenda de citas y ventas directamente a trav\u00e9s de WhatsApp 24\/7.<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contacto\" class=\"py-32 relative !bg-charcoal border-t border-white\/10\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2000\" alt=\"Office Dark\" class=\"w-full h-full object-cover opacity-10\">\n <\/div>\n \n <div class=\"max-w-4xl mx-auto px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"!bg-obsidian border border-gold\/30 p-10 md:p-16 relative overflow-hidden shadow-[0_0_40px_rgba(0,0,0,0.8)]\">\n <div class=\"absolute left-0 top-0 w-1 h-full !bg-gold shadow-[0_0_20px_#D4AF37]\"><\/div>\n \n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-serif font-bold mb-4 !text-white\">Inicie su <span class=\"!text-gold\">Membres\u00eda<\/span><\/h2>\n <p class=\"!text-gray-200 font-light text-lg\">Complete el formulario confidencial. Un ejecutivo se pondr\u00e1 en contacto para programar su asesor\u00eda privada.<\/p>\n <\/div>\n\n <form id=\"premiumForm\" class=\"space-y-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div class=\"relative\">\n <input type=\"text\" id=\"nombre\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"nombre\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Nombre Completo *<\/label>\n <\/div>\n \n \n <div class=\"relative\">\n <input type=\"tel\" id=\"telefono\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"telefono\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Tel\u00e9fono \/ WhatsApp *<\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <input type=\"email\" id=\"correo\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"correo\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Correo Electr\u00f3nico *<\/label>\n <\/div>\n\n \n <div class=\"relative pt-4\">\n <label class=\"block !text-gray-200 text-xs mb-2 uppercase tracking-wider font-semibold\">\u00c1rea de Inter\u00e9s Principal<\/label>\n <select id=\"servicio\" class=\"w-full !bg-charcoal border border-gray-600 p-4 !text-white focus:outline-none focus:border-gold transition-colors appearance-none shadow-inner\">\n <option value=\"Servicios Profesionales (LA OFFI GT \/ Finanzas)\">Servicios Profesionales (LA OFFI GT \/ Finanzas)<\/option>\n <option value=\"Marketing y Gastronom\u00eda\">Asesor\u00eda Empresarial (Marketing \/ Gastronom\u00eda)<\/option>\n <option value=\"Vallas Publicitarias Huehuetenango\">Publicidad Comercial (Vallas Huehuetenango)<\/option>\n <option value=\"Desarrollo Digital Integral\">Desarrollo Digital (Web, Apps, Chatbots)<\/option>\n <\/select>\n <div class=\"absolute right-4 top-[3.2rem] pointer-events-none !text-gold\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <textarea id=\"mensaje\" rows=\"3\" placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer resize-none\"><\/textarea>\n <label for=\"mensaje\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Breve descripci\u00f3n de su proyecto (Opcional)<\/label>\n <\/div>\n\n <div class=\"pt-6\">\n <button type=\"button\" onclick=\"procesarEnvio()\" class=\"w-full !bg-gold !text-black font-bold uppercase tracking-widest text-sm py-5 hover:!bg-white transition-colors duration-300 flex justify-center items-center gap-3 shadow-[0_0_20px_rgba(212,175,55,0.4)] hover:shadow-[0_0_30px_rgba(255,255,255,0.6)]\">\n <span id=\"btnText\">Enviar Solicitud a EIPIPRO<\/span>\n <svg id=\"btnIcon\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n <svg id=\"btnSpinner\" class=\"animate-spin -ml-1 mr-3 h-5 w-5 !text-black hidden\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg>\n <\/button>\n <p class=\"text-center !text-gray-400 text-xs mt-4\">Informaci\u00f3n confidencial. Se enviar\u00e1 a <strong class=\"!text-white\">admin@eipipro.com<\/strong><\/p>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"!bg-black py-12 border-t border-white\/20 relative overflow-hidden\">\n <div class=\"absolute left-1\/2 top-0 -translate-x-1\/2 w-full max-w-lg h-[2px] bg-gradient-to-r from-transparent via-gold to-transparent\"><\/div>\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center\">\n <div class=\"mb-6 md:mb-0 text-center md:text-left\">\n <span class=\"font-serif text-3xl font-bold tracking-widest !text-white block mb-2\">\n EIPI<span class=\"!text-gold\">PRO<\/span>\n <\/span>\n <p class=\"!text-gray-300 text-xs uppercase tracking-widest\">Base: Huehuetenango, Guatemala | Cobertura Internacional<\/p>\n <\/div>\n \n <div class=\"flex flex-col items-center md:items-end\">\n <p class=\"!text-gray-200 text-sm mb-4 font-medium\">Contacto Directo: <a href=\"mailto:admin@eipipro.com\" class=\"!text-gold hover:!text-white transition-colors\">admin@eipipro.com<\/a><\/p>\n <div class=\"flex space-x-6\">\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 text-center !text-gray-500 text-xs font-medium\">\n © 2026 EIPIPRO. Dise\u00f1o por Divisi\u00f3n Digital EIPIPRO. Todos los derechos reservados.\n <\/div>\n <\/footer>\n\n <script>\n const navbar = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n navbar.classList.add('!bg-obsidian\/90', 'backdrop-blur-md', 'border-gold\/20', 'py-4');\n navbar.classList.remove('bg-transparent', 'py-6', 'border-transparent');\n } else {\n navbar.classList.remove('!bg-obsidian\/90', 'backdrop-blur-md', 'border-gold\/20', 'py-4');\n navbar.classList.add('bg-transparent', 'py-6', 'border-transparent');\n }\n });\n\n const btn = document.getElementById('mobile-menu-btn');\n const closeBtn = document.getElementById('close-menu-btn');\n const menu = document.getElementById('mobile-menu');\n const mobileLinks = document.querySelectorAll('.mobile-link');\n\n function toggleMenu() {\n if(menu.classList.contains('hidden')) {\n menu.classList.remove('hidden');\n setTimeout(() => menu.classList.remove('opacity-0'), 10);\n document.body.style.overflow = 'hidden';\n } else {\n menu.classList.add('opacity-0');\n setTimeout(() => {\n menu.classList.add('hidden');\n document.body.style.overflow = '';\n }, 300);\n }\n }\n\n btn.addEventListener('click', toggleMenu);\n closeBtn.addEventListener('click', toggleMenu);\n mobileLinks.forEach(link => link.addEventListener('click', toggleMenu));\n\n const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');\n const revealOptions = { threshold: 0.15, rootMargin: \"0px 0px -50px 0px\" };\n const revealObserver = new IntersectionObserver(function(entries, observer) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n });\n }, revealOptions);\n revealElements.forEach(el => revealObserver.observe(el));\n\n function procesarEnvio() {\n const nombre = document.getElementById('nombre').value.trim();\n const telefono = document.getElementById('telefono').value.trim();\n const correo = document.getElementById('correo').value.trim();\n const servicio = document.getElementById('servicio').value;\n const mensaje = document.getElementById('mensaje').value.trim();\n\n if(!nombre || !telefono || !correo) {\n mostrarMensajePremium('Atenci\u00f3n', 'Por favor, complete los campos obligatorios para brindarle un servicio de excelencia.', false);\n return;\n }\n\n const btnText = document.getElementById('btnText');\n const btnIcon = document.getElementById('btnIcon');\n const btnSpinner = document.getElementById('btnSpinner');\n \n btnText.innerText = \"Procesando...\";\n btnIcon.classList.add('hidden');\n btnSpinner.classList.remove('hidden');\n\n setTimeout(() => {\n btnText.innerText = \"Enviar Solicitud a EIPIPRO\";\n btnIcon.classList.remove('hidden');\n btnSpinner.classList.add('hidden');\n\n const destinatario = \"admin@eipipro.com\";\n const asunto = `Contacto Premium EIPIPRO: ${nombre}`;\n const cuerpo = `NUEVA SOLICITUD DE CLIENTE - EIPIPRO%0D%0A%0D%0ADatos del Contacto:%0D%0A- Nombre: ${nombre}%0D%0A- Tel\u00e9fono: ${telefono}%0D%0A- Correo: ${correo}%0D%0A%0D%0A\u00c1rea de Inter\u00e9s:%0D%0A- ${servicio}%0D%0A%0D%0ADetalles Adicionales:%0D%0A${mensaje ? mensaje : 'No se proporcionaron detalles adicionales.'}%0D%0A%0D%0A---%0D%0AEnviado desde el portal corporativo EIPIPRO.COM`;\n\n window.location.href = `mailto:${destinatario}?subject=${asunto}&body=${cuerpo}`;\n \n mostrarMensajePremium('Solicitud Procesada', 'Su aplicaci\u00f3n de correo se abrir\u00e1 con los datos pre-cargados para enviar a admin@eipipro.com.', true);\n document.getElementById('premiumForm').reset();\n }, 1200);\n }\n\n function mostrarMensajePremium(titulo, mensaje, esExito) {\n const modalHTML = `\n <div id=\"premium-modal\" class=\"fixed inset-0 z-[100] flex items-center justify-center bg-black\/80 backdrop-blur-sm opacity-0 transition-opacity duration-300\">\n <div class=\"!bg-charcoal border ${esExito ? 'border-gold' : 'border-red-500'} p-10 max-w-md w-full mx-4 shadow-2xl transform scale-95 transition-transform duration-300 text-center relative\">\n <div class=\"mb-6 flex justify-center\">\n ${esExito ? \n `<svg class=\"w-16 h-16 !text-gold\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>` \n : \n `<svg class=\"w-16 h-16 !text-red-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path><\/svg>`\n }\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-2\">${titulo}<\/h3>\n <p class=\"!text-gray-200 font-light text-sm mb-8\">${mensaje}<\/p>\n <button onclick=\"cerrarModalPremium()\" class=\"w-full ${esExito ? '!bg-gold !text-black hover:!bg-white' : '!bg-red-900 !text-white hover:!bg-red-800'} font-bold uppercase tracking-widest text-xs py-4 transition-colors shadow-lg\">\n Aceptar\n <\/button>\n <\/div>\n <\/div>\n `;\n \n document.body.insertAdjacentHTML('beforeend', modalHTML);\n \n requestAnimationFrame(() => {\n const modal = document.getElementById('premium-modal');\n modal.classList.remove('opacity-0');\n modal.children[0].classList.remove('scale-95');\n modal.children[0].classList.add('scale-100');\n });\n }\n\n function cerrarModalPremium() {\n const modal = document.getElementById('premium-modal');\n if(modal) {\n modal.classList.add('opacity-0');\n modal.children[0].classList.remove('scale-100');\n modal.children[0].classList.add('scale-95');\n setTimeout(() => modal.remove(), 300);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>EIPIPRO | Centro de Servicios Profesionales Premium EIPIPRO Profesional Empresarial Comercial Digital Contacto Nivel Profesional Nivel Empresarial Nivel Comercial Ecosistema Digital Iniciar Proyecto Exclusividad & Resultados El Centro de Excelencia Corporativa Servicios Profesionales, Empresariales, Comerciales y Digitales de \u00e9lite a nivel nacional e internacional. Su aliado estrat\u00e9gico definitivo. Agendar Consultor\u00eda Privada Descubrir Servicios Scroll Firma […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":6,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-05-23T23:59:46","date_gmt":"2026-05-23T23:59:46","guid":{"rendered":"https:\/\/eipipro.com\/?page_id=6"},"modified":"2026-05-24T04:44:39","modified_gmt":"2026-05-24T04:44:39","slug":"informacion","status":"publish","type":"page","link":"https:\/\/eipipro.com\/","title":{"rendered":"Informaci\u00f3n"},"content":{"rendered":"\n\n\n\n \n \n EIPIPRO | Centro de Servicios Profesionales Premium<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n gold: {\n light: '#FDE68A',\n DEFAULT: '#D4AF37', \/\/ Oro cl\u00e1sico\n dark: '#997A15',\n },\n obsidian: '#0a0a0a',\n charcoal: '#171717',\n },\n fontFamily: {\n sans: ['Montserrat', 'sans-serif'],\n serif: ['Cormorant Garamond', 'serif'],\n },\n animation: {\n 'slow-pan': 'panImage 30s linear infinite',\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n panImage: {\n '0%': { objectPosition: '0% 50%' },\n '50%': { objectPosition: '100% 50%' },\n '100%': { objectPosition: '0% 50%' },\n },\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-15px)' },\n }\n }\n }\n }\n }\n <\/script>\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=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* REGLAS ANTI-CONFLICTO CMS: Aseguran que tu tema no sobreescriba los colores *\/\n html, body { \n background-color: #0a0a0a !important; \n color: #ffffff !important;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #0a0a0a; }\n ::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 10px; }\n ::-webkit-scrollbar-thumb:hover { background: #FDE68A; }\n\n .text-gradient-gold {\n background: linear-gradient(135deg, #FDE68A 0%, #D4AF37 50%, #997A15 100%) !important;\n -webkit-background-clip: text !important;\n -webkit-text-fill-color: transparent !important;\n background-clip: text !important;\n }\n\n .glass-panel {\n background: rgba(23, 23, 23, 0.6) !important;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(212, 175, 55, 0.2) !important;\n }\n\n .hover-gold-glow { transition: all 0.4s ease; }\n .hover-gold-glow:hover {\n box-shadow: 0 0 30px rgba(212, 175, 55, 0.3) !important;\n border-color: rgba(212, 175, 55, 0.8) !important;\n transform: translateY(-5px);\n }\n\n \/* Animaciones Scroll *\/\n .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal.active { opacity: 1; transform: translateY(0); }\n .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal-left.active { opacity: 1; transform: translateX(0); }\n .reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }\n .reveal-right.active { opacity: 1; transform: translateX(0); }\n\n .input-field:focus ~ label, .input-field:not(:placeholder-shown) ~ label {\n transform: translateY(-1.5rem) scale(0.85);\n color: #D4AF37 !important;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:!bg-gold selection:!text-black !bg-obsidian\">\n\n <nav id=\"navbar\" class=\"fixed w-full z-50 transition-all duration-500 bg-transparent py-6 border-b border-transparent\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"flex justify-between items-center\">\n \n <div class=\"flex-shrink-0 cursor-pointer\" onclick=\"window.scrollTo(0,0)\">\n <span class=\"font-serif text-4xl font-bold tracking-widest !text-white\">\n EIPI<span class=\"!text-gold\">PRO<\/span>\n <\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-10 items-center\">\n <a href=\"#profesional\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Profesional<\/a>\n <a href=\"#empresarial\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Empresarial<\/a>\n <a href=\"#comercial\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Comercial<\/a>\n <a href=\"#digital\" class=\"text-xs uppercase tracking-[0.2em] font-medium !text-white hover:!text-gold transition-colors\">Digital<\/a>\n <a href=\"#contacto\" class=\"border border-gold !text-gold px-8 py-3 rounded-sm text-xs uppercase tracking-[0.2em] font-bold hover:!bg-gold hover:!text-black transition-all duration-300 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n Contacto\n <\/a>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center\">\n <button id=\"mobile-menu-btn\" class=\"!text-gold focus:outline-none\">\n <svg class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"fixed inset-0 !bg-obsidian\/95 backdrop-blur-xl z-40 hidden flex-col items-center justify-center space-y-8 pt-20 transition-opacity duration-300 opacity-0\">\n <button id=\"close-menu-btn\" class=\"absolute top-8 right-6 !text-white hover:!text-gold\">\n <svg class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6M6 6l12 12\" \/><\/svg>\n <\/button>\n <a href=\"#profesional\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Profesional<\/a>\n <a href=\"#empresarial\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Empresarial<\/a>\n <a href=\"#comercial\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Nivel Comercial<\/a>\n <a href=\"#digital\" class=\"text-2xl font-serif !text-white hover:!text-gold mobile-link\">Ecosistema Digital<\/a>\n <a href=\"#contacto\" class=\"mt-8 !text-gold border-b border-gold pb-1 text-xl uppercase tracking-widest mobile-link\">Iniciar Proyecto<\/a>\n <\/div>\n <\/nav>\n\n <header class=\"relative min-h-screen flex items-center justify-center overflow-hidden\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2000\" alt=\"Corporate Skyscraper\" class=\"w-full h-full object-cover animate-slow-pan opacity-40\">\n <div class=\"absolute inset-0 bg-gradient-to-b from-obsidian\/80 via-obsidian\/60 to-obsidian\"><\/div>\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[800px] h-[800px] bg-gold\/10 rounded-full blur-[120px] pointer-events-none\"><\/div>\n <\/div>\n \n <div class=\"relative z-10 text-center px-4 max-w-5xl mx-auto mt-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.4em] text-xs md:text-sm mb-6 font-semibold\">Exclusividad & Resultados<\/p>\n <h1 class=\"text-5xl md:text-7xl lg:text-8xl font-serif font-bold leading-tight mb-8 !text-white\">\n El Centro de Excelencia <br>\n <span class=\"text-gradient-gold italic\">Corporativa<\/span>\n <\/h1>\n <p class=\"!text-gray-100 font-light text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed\">\n Servicios Profesionales, Empresariales, Comerciales y Digitales de \u00e9lite a nivel nacional e internacional. Su aliado estrat\u00e9gico definitivo.\n <\/p>\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-6\">\n <a href=\"#contacto\" class=\"group relative px-8 py-4 !bg-gold !text-black font-bold uppercase tracking-widest text-xs overflow-hidden rounded-sm w-full sm:w-auto\">\n <span class=\"relative z-10 group-hover:!text-white transition-colors duration-300\">Agendar Consultor\u00eda Privada<\/span>\n <div class=\"absolute inset-0 h-full w-0 !bg-obsidian transition-all duration-500 ease-out group-hover:w-full z-0\"><\/div>\n <\/a>\n <a href=\"#profesional\" class=\"px-8 py-4 bg-transparent !text-white border border-white\/40 font-medium uppercase tracking-widest text-xs hover:border-gold hover:!text-gold transition-colors duration-300 w-full sm:w-auto\">\n Descubrir Servicios\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"absolute bottom-10 left-1\/2 transform -translate-x-1\/2 z-10 animate-bounce\">\n <a href=\"#profesional\" class=\"!text-white hover:!text-gold transition-colors opacity-80\">\n <p class=\"text-[10px] uppercase tracking-[0.2em] mb-2\">Scroll<\/p>\n <svg class=\"w-5 h-5 mx-auto\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\"><\/path><\/svg>\n <\/a>\n <\/div>\n <\/header>\n\n <section id=\"profesional\" class=\"py-32 relative !bg-obsidian border-b border-white\/5\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\n <div class=\"reveal-left order-2 lg:order-1 relative\">\n <div class=\"absolute -inset-4 border border-gold\/40 translate-x-4 translate-y-4 -z-10\"><\/div>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=1000\" alt=\"Executive Professional\" class=\"w-full object-cover h-[600px] grayscale hover:grayscale-0 transition-all duration-700 shadow-2xl\">\n <div class=\"absolute bottom-6 left-6 right-6 glass-panel p-6\">\n <p class=\"!text-gold text-sm tracking-widest uppercase mb-1 font-bold\">Firma Principal<\/p>\n <p class=\"font-serif text-3xl !text-white font-bold\">LA OFFI GT<\/p>\n <\/div>\n <\/div>\n \n <div class=\"reveal-right order-1 lg:order-2\">\n <div class=\"flex items-center gap-4 mb-6\">\n <div class=\"h-[1px] w-12 !bg-gold\"><\/div>\n <span class=\"!text-gold uppercase tracking-widest text-xs font-bold\">I. Nivel Profesional<\/span>\n <\/div>\n <h2 class=\"text-4xl md:text-6xl font-serif font-bold mb-8 leading-tight !text-white\">Autoridad en <br><span class=\"text-gradient-gold\">Finanzas & Auditor\u00eda<\/span><\/h2>\n <p class=\"!text-gray-100 font-light text-lg mb-10 leading-relaxed\">\n Bajo la prestigiosa firma <strong class=\"!text-white\">LA OFFI GT<\/strong>, ofrecemos un est\u00e1ndar inquebrantable de excelencia. Como <strong class=\"!text-white\">Mag\u00edster en Finanzas<\/strong> y <strong class=\"!text-white\">Contador P\u00fablico y Auditor<\/strong>, garantizamos el blindaje patrimonial y el crecimiento estrat\u00e9gico de su corporaci\u00f3n.\n <\/p>\n \n <div class=\"space-y-6\">\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">01.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Auditor\u00eda Financiera de Alto Nivel<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Evaluaciones exhaustivas que otorgan transparencia absoluta y confianza a los stakeholders e inversionistas.<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">02.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Consultor\u00eda por Mag\u00edster en Finanzas<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Estrategias de inversi\u00f3n, valoraci\u00f3n de empresas complejas y reestructuraci\u00f3n financiera a gran escala.<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-start gap-4\">\n <span class=\"!text-gold text-2xl font-serif italic mt-1\">03.<\/span>\n <div>\n <h3 class=\"text-xl font-serif !text-white mb-2 font-bold\">Gesti\u00f3n Tributaria Especializada<\/h3>\n <p class=\"text-sm !text-gray-200 font-light leading-relaxed\">Optimizaci\u00f3n fiscal amparada en la ley para maximizar la rentabilidad operativa mediante LA OFFI GT.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"empresarial\" class=\"py-32 relative !bg-charcoal\">\n <div class=\"absolute right-0 top-0 w-1\/3 h-full !bg-obsidian\/50 skew-x-12 transform origin-top hidden lg:block\"><\/div>\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">II. Nivel Empresarial<\/p>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-6 !text-white\">Marketing & <span class=\"text-gradient-gold\">Gesti\u00f3n Gastron\u00f3mica<\/span><\/h2>\n <p class=\"!text-gray-100 max-w-3xl mx-auto text-lg font-light leading-relaxed\">Convertimos la visi\u00f3n culinaria y corporativa en imperios rentables. Dise\u00f1amos sistemas de gesti\u00f3n y campa\u00f1as de marketing que dominan el mercado de \u00e9lite.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-10\">\n <div class=\"group relative overflow-hidden h-[500px] reveal-left border border-white\/10 rounded-sm\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514933651103-005eec06c04b?auto=format&fit=crop&q=80&w=1000\" alt=\"Fine Dining\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/70 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-10 transform translate-y-6 group-hover:translate-y-0 transition-transform duration-500\">\n <div class=\"w-12 h-12 bg-gold\/20 backdrop-blur-md rounded-full flex items-center justify-center !text-gold mb-6 border border-gold\/80\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-3xl font-serif !text-white mb-3 font-bold\">Negocios Gastron\u00f3micos<\/h3>\n <p class=\"!text-gray-100 font-light text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">\n Especialistas en la industria restaurantera. Implementamos ingenier\u00eda de men\u00fa, control estricto de costos (food cost), estandarizaci\u00f3n de procesos y dise\u00f1o de experiencias premium para comensales.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"group relative overflow-hidden h-[500px] reveal-right border border-white\/10 rounded-sm\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1000\" alt=\"Marketing Strategy\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/70 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-10 transform translate-y-6 group-hover:translate-y-0 transition-transform duration-500\">\n <div class=\"w-12 h-12 bg-gold\/20 backdrop-blur-md rounded-full flex items-center justify-center !text-gold mb-6 border border-gold\/80\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-3xl font-serif !text-white mb-3 font-bold\">Marketing Estrat\u00e9gico<\/h3>\n <p class=\"!text-gray-100 font-light text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 leading-relaxed\">\n Posicionamiento de marca a nivel corporativo. An\u00e1lisis de mercado, segmentaci\u00f3n de clientes de alto poder adquisitivo y estrategias de penetraci\u00f3n comercial infalibles.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"comercial\" class=\"py-32 relative !bg-obsidian overflow-hidden border-y border-white\/5\">\n <div class=\"absolute inset-0 z-0 opacity-10\" style=\"background-image: radial-gradient(circle at center, #D4AF37 1px, transparent 1px); background-size: 40px 40px;\"><\/div>\n \n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"flex flex-col lg:flex-row gap-16 items-center\">\n \n \n <div class=\"w-full lg:w-5\/12 reveal-left\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">III. Nivel Comercial<\/p>\n <h2 class=\"text-4xl md:text-5xl font-serif font-bold mb-6 !text-white\">Vallas Publicitarias<br><span class=\"!text-white border-b-2 border-gold pb-1\">Huehuetenango<\/span><\/h2>\n <p class=\"!text-gray-100 font-light text-lg mb-10 leading-relaxed\">\n Garantice el impacto visual absoluto de su corporaci\u00f3n. Posicionamos su marca a trav\u00e9s de <strong>vallas y mantas publicitarias de formato premium<\/strong> dominando los circuitos de mayor tr\u00e1nsito en la ciudad.\n <\/p>\n \n \n <div class=\"space-y-8 mb-10\">\n \n <div class=\"glass-panel p-5 hover-gold-glow flex items-center gap-4 shadow-[0_0_15px_rgba(212,175,55,0.15)] border-gold\/50 rounded-sm\">\n <div class=\"w-3 h-3 rounded-full !bg-gold animate-pulse shadow-[0_0_10px_#D4AF37]\"><\/div>\n <div>\n <span class=\"text-sm font-bold tracking-widest !text-gold uppercase block mb-1\">Ubicaci\u00f3n \u00c9lite<\/span>\n <span class=\"text-lg font-serif font-bold !text-white uppercase\">Calles Principales – Zona 9<\/span>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-xs font-bold tracking-[0.2em] !text-gray-400 uppercase mb-4 border-b border-white\/10 pb-2\">Tr\u00e1nsito Masivo & Ejecutivos<\/h3>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Aeropuerto & IGSS<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Hospital Nacional<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Zona Militar<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Estadio<\/span>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-xs font-bold tracking-[0.2em] !text-gray-400 uppercase mb-4 border-b border-white\/10 pb-2\">Circuitos Comerciales (Malls)<\/h3>\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Pradera Huehue<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Mirador Mall<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Alturas Mall<\/span>\n <span class=\"px-4 py-2 bg-white\/5 border border-white\/10 text-xs !text-gray-200 font-medium hover:!bg-gold hover:!text-black hover:border-gold transition-all cursor-default\">Ruinas<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <a href=\"#contacto\" class=\"inline-flex !text-gold text-sm tracking-widest uppercase font-bold hover:!text-white transition-colors items-center gap-2 group border border-gold\/30 px-6 py-3 rounded-sm hover:!bg-gold\/10\">\n Reservar Espacio\n <svg class=\"w-4 h-4 group-hover:translate-x-2 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\"><\/path><\/svg>\n <\/a>\n <\/div>\n\n \n <div class=\"w-full lg:w-7\/12 reveal-right\">\n <div class=\"grid grid-cols-2 gap-4 h-[500px] md:h-[600px]\">\n \n <div class=\"col-span-1 h-full rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561414927-6d86591d0c4f?auto=format&fit=crop&q=80&w=800\" alt=\"Valla Publicitaria Urbana en Calle\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-6 left-6 right-6\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Formato Premium<\/p>\n <p class=\"font-serif text-xl !text-white font-bold leading-tight\">Vallas Urbanas <br>Zona 9<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"col-span-1 flex flex-col gap-4 h-full\">\n \n <div class=\"h-1\/2 rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1559828551-364ebc3b3104?auto=format&fit=crop&q=80&w=800\" alt=\"Publicidad en Avenidas Principales\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-5 left-5 right-5\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Alto Tr\u00e1fico<\/p>\n <p class=\"font-serif text-lg !text-white font-bold leading-tight\">Avenidas & <br>Hospitales<\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"h-1\/2 rounded-sm overflow-hidden relative group border border-white\/10 shadow-2xl\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1572949645841-094f3a9c4c94?auto=format&fit=crop&q=80&w=800\" alt=\"Mantas y Mupis Publicitarios\" class=\"w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale hover:grayscale-0\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/40 to-transparent\"><\/div>\n <div class=\"absolute bottom-5 left-5 right-5\">\n <p class=\"!text-gold text-[10px] tracking-widest uppercase font-bold mb-1\">Impacto Urbano<\/p>\n <p class=\"font-serif text-lg !text-white font-bold leading-tight\">Mantas en <br>V\u00eda P\u00fablica<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"digital\" class=\"py-32 relative !bg-obsidian\">\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-gold\/5 rounded-full blur-[100px]\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-blue-900\/10 rounded-full blur-[100px]\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"text-center mb-20 reveal\">\n <p class=\"!text-gold uppercase tracking-[0.3em] text-xs font-bold mb-4\">IV. Ecosistema Digital<\/p>\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold mb-6 !text-white\">Arquitectura <span class=\"text-gradient-gold\">Digital Avanzada<\/span><\/h2>\n <p class=\"!text-gray-100 max-w-3xl mx-auto text-lg font-light leading-relaxed\">Automatizaci\u00f3n, est\u00e9tica y conversi\u00f3n. Construimos las plataformas tecnol\u00f3gicas que operan 24\/7 como el mejor vendedor de su corporaci\u00f3n.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800\" alt=\"Sitios Web Premium\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Sitios Web Premium<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Dise\u00f1o a medida, optimizaci\u00f3n SEO extrema y carga ultrarr\u00e1pida. La vitrina perfecta para marcas de lujo y corporaciones.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 100ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800\" alt=\"Landing Pages\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Landing Pages (Embudos)<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">P\u00e1ginas de aterrizaje enfocadas 100% en conversi\u00f3n. Transformamos el tr\u00e1fico publicitario en clientes potenciales altamente cualificados.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 200ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1605810230434-7631ac76ec81?auto=format&fit=crop&q=80&w=800\" alt=\"vCards Inteligentes NFC\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">vCards Inteligentes NFC<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Tarjetas de presentaci\u00f3n digitales con tecnolog\u00eda NFC y c\u00f3digos QR. Transfiera su contacto corporativo al instante con un simple toque en el smartphone de su cliente.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504868584819-f8e8b4b6d7e3?auto=format&fit=crop&q=80&w=800\" alt=\"Plataformas Empresariales\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Plataformas Empresariales<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Desarrollo de software a medida. Sistemas ERP, CRM y portales internos dise\u00f1ados para la gesti\u00f3n eficiente de su compa\u00f1\u00eda.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 100ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800\" alt=\"E-commerce\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Tiendas Online E-commerce<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Plataformas de venta seguras y escalables. Integramos pasarelas de pago internacionales para que comercialice sin fronteras.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"group relative overflow-hidden rounded-sm border border-white\/10 h-[450px] reveal shadow-2xl hover:border-gold\/50 transition-colors duration-500\" style=\"transition-delay: 200ms;\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611162617474-5b21e879e113?auto=format&fit=crop&q=80&w=800\" alt=\"Chatbots WhatsApp\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110 grayscale group-hover:grayscale-0 opacity-60 group-hover:opacity-90\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian\/90 to-transparent\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-full p-8 transform transition-transform duration-500 group-hover:-translate-y-2\">\n <div class=\"w-12 h-12 mb-5 !text-gold bg-obsidian\/80 backdrop-blur-md rounded-full flex items-center justify-center border border-gold\/30 group-hover:!bg-gold group-hover:!text-black transition-colors duration-500 shadow-[0_0_15px_rgba(212,175,55,0.2)]\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"><\/path><\/svg>\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-3 font-bold\">Chatbots para WhatsApp<\/h3>\n <p class=\"text-sm !text-gray-300 font-light leading-relaxed group-hover:!text-white transition-colors duration-500\">Inteligencia Artificial aplicada a la atenci\u00f3n. Automatice respuestas, agenda de citas y ventas directamente a trav\u00e9s de WhatsApp 24\/7.<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"contacto\" class=\"py-32 relative !bg-charcoal border-t border-white\/10\">\n <div class=\"absolute inset-0 z-0\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2000\" alt=\"Office Dark\" class=\"w-full h-full object-cover opacity-10\">\n <\/div>\n \n <div class=\"max-w-4xl mx-auto px-6 lg:px-8 relative z-10 reveal\">\n <div class=\"!bg-obsidian border border-gold\/30 p-10 md:p-16 relative overflow-hidden shadow-[0_0_40px_rgba(0,0,0,0.8)]\">\n <div class=\"absolute left-0 top-0 w-1 h-full !bg-gold shadow-[0_0_20px_#D4AF37]\"><\/div>\n \n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-5xl font-serif font-bold mb-4 !text-white\">Inicie su <span class=\"!text-gold\">Membres\u00eda<\/span><\/h2>\n <p class=\"!text-gray-200 font-light text-lg\">Complete el formulario confidencial. Un ejecutivo se pondr\u00e1 en contacto para programar su asesor\u00eda privada.<\/p>\n <\/div>\n\n <form id=\"premiumForm\" class=\"space-y-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div class=\"relative\">\n <input type=\"text\" id=\"nombre\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"nombre\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Nombre Completo *<\/label>\n <\/div>\n \n \n <div class=\"relative\">\n <input type=\"tel\" id=\"telefono\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"telefono\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Tel\u00e9fono \/ WhatsApp *<\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <input type=\"email\" id=\"correo\" required placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer\" \/>\n <label for=\"correo\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Correo Electr\u00f3nico *<\/label>\n <\/div>\n\n \n <div class=\"relative pt-4\">\n <label class=\"block !text-gray-200 text-xs mb-2 uppercase tracking-wider font-semibold\">\u00c1rea de Inter\u00e9s Principal<\/label>\n <select id=\"servicio\" class=\"w-full !bg-charcoal border border-gray-600 p-4 !text-white focus:outline-none focus:border-gold transition-colors appearance-none shadow-inner\">\n <option value=\"Servicios Profesionales (LA OFFI GT \/ Finanzas)\">Servicios Profesionales (LA OFFI GT \/ Finanzas)<\/option>\n <option value=\"Marketing y Gastronom\u00eda\">Asesor\u00eda Empresarial (Marketing \/ Gastronom\u00eda)<\/option>\n <option value=\"Vallas Publicitarias Huehuetenango\">Publicidad Comercial (Vallas Huehuetenango)<\/option>\n <option value=\"Desarrollo Digital Integral\">Desarrollo Digital (Web, Apps, Chatbots)<\/option>\n <\/select>\n <div class=\"absolute right-4 top-[3.2rem] pointer-events-none !text-gold\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <textarea id=\"mensaje\" rows=\"3\" placeholder=\" \" class=\"input-field w-full bg-transparent border-b border-gray-600 py-3 !text-white focus:outline-none focus:border-gold transition-colors peer resize-none\"><\/textarea>\n <label for=\"mensaje\" class=\"absolute left-0 top-3 !text-gray-300 font-light transition-all duration-300 pointer-events-none peer-focus:-translate-y-6 peer-focus:text-xs peer-focus:!text-gold peer-valid:-translate-y-6 peer-valid:text-xs\">Breve descripci\u00f3n de su proyecto (Opcional)<\/label>\n <\/div>\n\n <div class=\"pt-6\">\n <button type=\"button\" onclick=\"procesarEnvio()\" class=\"w-full !bg-gold !text-black font-bold uppercase tracking-widest text-sm py-5 hover:!bg-white transition-colors duration-300 flex justify-center items-center gap-3 shadow-[0_0_20px_rgba(212,175,55,0.4)] hover:shadow-[0_0_30px_rgba(255,255,255,0.6)]\">\n <span id=\"btnText\">Enviar Solicitud a EIPIPRO<\/span>\n <svg id=\"btnIcon\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\n <svg id=\"btnSpinner\" class=\"animate-spin -ml-1 mr-3 h-5 w-5 !text-black hidden\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg>\n <\/button>\n <p class=\"text-center !text-gray-400 text-xs mt-4\">Informaci\u00f3n confidencial. Se enviar\u00e1 a <strong class=\"!text-white\">admin@eipipro.com<\/strong><\/p>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"!bg-black py-12 border-t border-white\/20 relative overflow-hidden\">\n <div class=\"absolute left-1\/2 top-0 -translate-x-1\/2 w-full max-w-lg h-[2px] bg-gradient-to-r from-transparent via-gold to-transparent\"><\/div>\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center\">\n <div class=\"mb-6 md:mb-0 text-center md:text-left\">\n <span class=\"font-serif text-3xl font-bold tracking-widest !text-white block mb-2\">\n EIPI<span class=\"!text-gold\">PRO<\/span>\n <\/span>\n <p class=\"!text-gray-300 text-xs uppercase tracking-widest\">Base: Huehuetenango, Guatemala | Cobertura Internacional<\/p>\n <\/div>\n \n <div class=\"flex flex-col items-center md:items-end\">\n <p class=\"!text-gray-200 text-sm mb-4 font-medium\">Contacto Directo: <a href=\"mailto:admin@eipipro.com\" class=\"!text-gold hover:!text-white transition-colors\">admin@eipipro.com<\/a><\/p>\n <div class=\"flex space-x-6\">\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"!text-gray-400 hover:!text-gold transition-colors\"><svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 text-center !text-gray-500 text-xs font-medium\">\n © 2026 EIPIPRO. Dise\u00f1o por Divisi\u00f3n Digital EIPIPRO. Todos los derechos reservados.\n <\/div>\n <\/footer>\n\n <script>\n const navbar = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n navbar.classList.add('!bg-obsidian\/90', 'backdrop-blur-md', 'border-gold\/20', 'py-4');\n navbar.classList.remove('bg-transparent', 'py-6', 'border-transparent');\n } else {\n navbar.classList.remove('!bg-obsidian\/90', 'backdrop-blur-md', 'border-gold\/20', 'py-4');\n navbar.classList.add('bg-transparent', 'py-6', 'border-transparent');\n }\n });\n\n const btn = document.getElementById('mobile-menu-btn');\n const closeBtn = document.getElementById('close-menu-btn');\n const menu = document.getElementById('mobile-menu');\n const mobileLinks = document.querySelectorAll('.mobile-link');\n\n function toggleMenu() {\n if(menu.classList.contains('hidden')) {\n menu.classList.remove('hidden');\n setTimeout(() => menu.classList.remove('opacity-0'), 10);\n document.body.style.overflow = 'hidden';\n } else {\n menu.classList.add('opacity-0');\n setTimeout(() => {\n menu.classList.add('hidden');\n document.body.style.overflow = '';\n }, 300);\n }\n }\n\n btn.addEventListener('click', toggleMenu);\n closeBtn.addEventListener('click', toggleMenu);\n mobileLinks.forEach(link => link.addEventListener('click', toggleMenu));\n\n const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');\n const revealOptions = { threshold: 0.15, rootMargin: \"0px 0px -50px 0px\" };\n const revealObserver = new IntersectionObserver(function(entries, observer) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n });\n }, revealOptions);\n revealElements.forEach(el => revealObserver.observe(el));\n\n function procesarEnvio() {\n const nombre = document.getElementById('nombre').value.trim();\n const telefono = document.getElementById('telefono').value.trim();\n const correo = document.getElementById('correo').value.trim();\n const servicio = document.getElementById('servicio').value;\n const mensaje = document.getElementById('mensaje').value.trim();\n\n if(!nombre || !telefono || !correo) {\n mostrarMensajePremium('Atenci\u00f3n', 'Por favor, complete los campos obligatorios para brindarle un servicio de excelencia.', false);\n return;\n }\n\n const btnText = document.getElementById('btnText');\n const btnIcon = document.getElementById('btnIcon');\n const btnSpinner = document.getElementById('btnSpinner');\n \n btnText.innerText = \"Procesando...\";\n btnIcon.classList.add('hidden');\n btnSpinner.classList.remove('hidden');\n\n setTimeout(() => {\n btnText.innerText = \"Enviar Solicitud a EIPIPRO\";\n btnIcon.classList.remove('hidden');\n btnSpinner.classList.add('hidden');\n\n const destinatario = \"admin@eipipro.com\";\n const asunto = `Contacto Premium EIPIPRO: ${nombre}`;\n const cuerpo = `NUEVA SOLICITUD DE CLIENTE - EIPIPRO%0D%0A%0D%0ADatos del Contacto:%0D%0A- Nombre: ${nombre}%0D%0A- Tel\u00e9fono: ${telefono}%0D%0A- Correo: ${correo}%0D%0A%0D%0A\u00c1rea de Inter\u00e9s:%0D%0A- ${servicio}%0D%0A%0D%0ADetalles Adicionales:%0D%0A${mensaje ? mensaje : 'No se proporcionaron detalles adicionales.'}%0D%0A%0D%0A---%0D%0AEnviado desde el portal corporativo EIPIPRO.COM`;\n\n window.location.href = `mailto:${destinatario}?subject=${asunto}&body=${cuerpo}`;\n \n mostrarMensajePremium('Solicitud Procesada', 'Su aplicaci\u00f3n de correo se abrir\u00e1 con los datos pre-cargados para enviar a admin@eipipro.com.', true);\n document.getElementById('premiumForm').reset();\n }, 1200);\n }\n\n function mostrarMensajePremium(titulo, mensaje, esExito) {\n const modalHTML = `\n <div id=\"premium-modal\" class=\"fixed inset-0 z-[100] flex items-center justify-center bg-black\/80 backdrop-blur-sm opacity-0 transition-opacity duration-300\">\n <div class=\"!bg-charcoal border ${esExito ? 'border-gold' : 'border-red-500'} p-10 max-w-md w-full mx-4 shadow-2xl transform scale-95 transition-transform duration-300 text-center relative\">\n <div class=\"mb-6 flex justify-center\">\n ${esExito ? \n `<svg class=\"w-16 h-16 !text-gold\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>` \n : \n `<svg class=\"w-16 h-16 !text-red-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path><\/svg>`\n }\n <\/div>\n <h3 class=\"text-2xl font-serif !text-white mb-2\">${titulo}<\/h3>\n <p class=\"!text-gray-200 font-light text-sm mb-8\">${mensaje}<\/p>\n <button onclick=\"cerrarModalPremium()\" class=\"w-full ${esExito ? '!bg-gold !text-black hover:!bg-white' : '!bg-red-900 !text-white hover:!bg-red-800'} font-bold uppercase tracking-widest text-xs py-4 transition-colors shadow-lg\">\n Aceptar\n <\/button>\n <\/div>\n <\/div>\n `;\n \n document.body.insertAdjacentHTML('beforeend', modalHTML);\n \n requestAnimationFrame(() => {\n const modal = document.getElementById('premium-modal');\n modal.classList.remove('opacity-0');\n modal.children[0].classList.remove('scale-95');\n modal.children[0].classList.add('scale-100');\n });\n }\n\n function cerrarModalPremium() {\n const modal = document.getElementById('premium-modal');\n if(modal) {\n modal.classList.add('opacity-0');\n modal.children[0].classList.remove('scale-100');\n modal.children[0].classList.add('scale-95');\n setTimeout(() => modal.remove(), 300);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>EIPIPRO | Centro de Servicios Profesionales Premium EIPIPRO Profesional Empresarial Comercial Digital Contacto Nivel Profesional Nivel Empresarial Nivel Comercial Ecosistema Digital Iniciar Proyecto Exclusividad & Resultados El Centro de Excelencia Corporativa Servicios Profesionales, Empresariales, Comerciales y Digitales de \u00e9lite a nivel nacional e internacional. Su aliado estrat\u00e9gico definitivo. Agendar Consultor\u00eda Privada Descubrir Servicios Scroll Firma […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":6,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/eipipro.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/eipipro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}