SIAR SAS | Contacto<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap\"\n rel=\"stylesheet\">\n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n <style>\n :root {\n --blanco: #FFFFFF;\n --siar-gris: #5E5E5E;\n --siar-rojo: #7E161D;\n --siar-rojo-oscuro: #5a0f14;\n --siar-negro: #111111;\n --bg-light: #FDFDFD;\n --transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n --shadow-pro: 0 20px 40px rgba(0, 0, 0, 0.06);\n --shadow-hover: 0 15px 35px rgba(126, 22, 29, 0.3);\n --hero-gris: #E0E0E0;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n outline: none;\n }\n html {\n scroll-behavior: smooth;\n font-size: 16px;\n }\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n background: #FCFCFC;\n color: var(--siar-gris);\n overflow-x: hidden;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \/* ========== NAVEGACI\u00d3N ========== *\/\n header {\n background: var(--siar-negro) !important;\n height: 95px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8%;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 2000;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n opacity: 1 !important;\n transition: all 0.3s ease;\n }\n .logo img {\n height: 55px;\n width: auto;\n transition: var(--transition);\n filter: brightness(0) invert(1);\n }\n .logo img:hover {\n transform: translateY(-2px) scale(1.05);\n }\n \/* ========== MEN\u00da DESKTOP ========== *\/\n .nav-links {\n display: flex;\n list-style: none;\n gap: 40px;\n }\n .nav-links a {\n text-decoration: none;\n color: var(--blanco) !important;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--transition);\n position: relative;\n padding: 8px 0;\n opacity: 0.9;\n }\n .nav-links a:hover {\n color: var(--blanco) !important;\n opacity: 1;\n }\n .nav-links a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 3px;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--siar-rojo);\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 2px;\n }\n .nav-links a:hover::after {\n width: 80%;\n }\n \/* ========== BOT\u00d3N HAMBURGUESA ========== *\/\n .hamburger {\n display: none;\n cursor: pointer;\n padding: 12px;\n background: transparent;\n border: none;\n z-index: 1001;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n }\n .hamburger span {\n display: block;\n width: 28px;\n height: 3px;\n background: var(--blanco);\n margin: 5px 0;\n border-radius: 5px;\n transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n position: absolute;\n left: 6px;\n transform-origin: center;\n }\n .hamburger span:nth-child(1) {\n top: 12px;\n }\n .hamburger span:nth-child(2) {\n top: 18px;\n }\n .hamburger span:nth-child(3) {\n top: 24px;\n }\n .hamburger.active {\n transform: rotate(90deg);\n }\n .hamburger.active span:nth-child(1) {\n transform: rotate(45deg) translate(6px, 6px);\n top: 18px;\n background: var(--siar-rojo);\n }\n .hamburger.active span:nth-child(2) {\n opacity: 0;\n transform: translateX(-10px);\n }\n .hamburger.active span:nth-child(3) {\n transform: rotate(-45deg) translate(6px, -6px);\n top: 18px;\n background: var(--siar-rojo);\n }\n \/* ========== MEN\u00da M\u00d3VIL ========== *\/\n .nav-links.mobile-menu {\n position: fixed;\n top: 0;\n left: -100%;\n width: 85%;\n max-width: 380px;\n height: 100vh;\n background: #FFFFFF;\n flex-direction: column;\n padding: 120px 40px 40px;\n gap: 0;\n transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 15px 0 60px rgba(0, 0, 0, 0.08);\n z-index: 1000;\n overflow-y: auto;\n border-right: 1px solid rgba(0, 0, 0, 0.04);\n display: flex;\n }\n .nav-links.mobile-menu.active {\n left: 0;\n animation: slideInMenu 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n @keyframes slideInMenu {\n 0% {\n left: -100%;\n opacity: 0.8;\n }\n 100% {\n left: 0;\n opacity: 1;\n }\n }\n .nav-links.mobile-menu li {\n opacity: 0;\n transform: translateX(-40px);\n animation: slideInItem 0.5s forwards;\n width: 100%;\n margin-bottom: 5px;\n }\n .nav-links.mobile-menu.active li {\n animation: slideInItem 0.5s forwards;\n }\n @keyframes slideInItem {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n .nav-links.mobile-menu a {\n display: block;\n padding: 20px 20px;\n font-size: 16px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n letter-spacing: 1.5px;\n font-weight: 700;\n color: var(--siar-negro) !important;\n text-transform: uppercase;\n width: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 12px;\n margin: 5px 0;\n position: relative;\n overflow: hidden;\n }\n .nav-links.mobile-menu a:hover {\n color: var(--siar-rojo) !important;\n background: rgba(126, 22, 29, 0.05);\n transform: translateX(10px);\n box-shadow: 0 5px 20px rgba(126, 22, 29, 0.1);\n }\n \/* ========== OVERLAY PARA MEN\u00da M\u00d3VIL ========== *\/\n .mobile-menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(5px);\n z-index: 999;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s ease, visibility 0.4s ease;\n }\n .mobile-menu-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n \/* ========== HERO SECTION CONTACTO CON IMAGEN DE FONDO - NORMAL ========== *\/\n .hero-contacto {\n height: 60vh;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n margin-top: 95px;\n background: url('https:\/\/siar.com.co\/wp-content\/uploads\/2026\/02\/image2.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-attachment: fixed;\n }\n \/* Capa de superposici\u00f3n ligera solo para mejorar legibilidad del texto *\/\n .hero-contacto::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3); \/* Solo un ligero oscurecimiento para el texto *\/\n z-index: 1;\n }\n .hero-contacto-content {\n position: relative;\n z-index: 10;\n text-align: center;\n color: var(--blanco);\n padding: 0 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n .hero-contacto-content h1 {\n font-size: 3.5rem;\n font-weight: 800;\n letter-spacing: -1px;\n margin-bottom: 20px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n line-height: 1.1;\n animation: fadeInUp 1s ease-out;\n }\n .hero-contacto-content p {\n color: rgba(255, 255, 255, 0.95);\n font-size: 1.2rem;\n letter-spacing: 1px;\n font-weight: 400;\n margin-bottom: 40px;\n line-height: 1.6;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n animation: fadeInUp 1s ease-out 0.3s both;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n }\n \/* ========== FORMULARIO SECTION ========== *\/\n .formulario-section {\n padding: 100px 8%;\n background: #FAFAFA;\n }\n .formulario-container {\n max-width: 1000px;\n margin: 0 auto;\n width: 100%;\n }\n .formulario-header {\n text-align: center;\n margin-bottom: 60px;\n }\n .formulario-header h2 {\n font-size: 2.8rem;\n color: var(--siar-negro);\n font-weight: 800;\n margin-bottom: 20px;\n position: relative;\n display: inline-block;\n }\n .formulario-header h2::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: var(--siar-rojo);\n border-radius: 2px;\n }\n .formulario-header p {\n color: var(--siar-gris);\n font-size: 1.1rem;\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.6;\n }\n \/* ========== CONTENEDOR DEL FORMULARIO WORDPRESS ========== *\/\n .wp-form-container {\n background: var(--blanco);\n padding: 60px;\n border-radius: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n border: 1px solid rgba(0, 0, 0, 0.03);\n width: 100%;\n overflow: hidden;\n position: relative;\n }\n \/* Estilos espec\u00edficos para Fluent Forms *\/\n .wp-form-container .ff-el-form-control,\n .wp-form-container .ff-el-form-control:focus {\n width: 100%;\n padding: 15px 20px;\n border: 2px solid rgba(0, 0, 0, 0.05);\n border-radius: 12px;\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1rem;\n color: var(--siar-gris);\n background: #F8F8F8;\n transition: all 0.3s ease;\n box-sizing: border-box;\n }\n .wp-form-container .ff-el-form-control:focus {\n outline: none;\n border-color: var(--siar-rojo);\n box-shadow: 0 0 0 3px rgba(126, 22, 29, 0.1);\n }\n .wp-form-container .ff-el-group {\n margin-bottom: 25px;\n width: 100%;\n }\n .wp-form-container .ff-el-group--label {\n display: block;\n margin-bottom: 10px;\n color: var(--siar-negro);\n font-weight: 600;\n font-size: 0.95rem;\n }\n .wp-form-container textarea.ff-el-form-control {\n min-height: 150px;\n resize: vertical;\n }\n .wp-form-container .ff_submit_btn_wrapper {\n text-align: center;\n margin-top: 30px;\n width: 100%;\n }\n .wp-form-container .ff-btn-submit {\n background: linear-gradient(135deg, var(--siar-rojo) 0%, var(--siar-rojo-oscuro) 100%);\n color: white;\n border: none;\n padding: 20px 50px;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1rem;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n display: inline-block;\n text-transform: uppercase;\n font-family: 'Plus Jakarta Sans', sans-serif;\n min-width: 200px;\n }\n .wp-form-container .ff-btn-submit:hover {\n background: linear-gradient(135deg, var(--siar-rojo-oscuro) 0%, #4a0c10 100%);\n transform: translateY(-5px);\n box-shadow: 0 15px 30px rgba(126, 22, 29, 0.3);\n }\n \/* Asegurar que el formulario sea responsive *\/\n .wp-form-container .ff-el-form-control,\n .wp-form-container .ff-el-group,\n .wp-form-container .ff-el-section-break {\n max-width: 100% !important;\n }\n \/* Grid para formularios con columnas *\/\n .wp-form-container .ff-el-group--container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n width: 100%;\n }\n \/* Campos de ancho completo *\/\n .wp-form-container .ff-el-group.ff-el-is-full {\n grid-column: 1 \/ -1;\n }\n \/* ========== INFORMACI\u00d3N R\u00c1PIDA ========== *\/\n .info-rapida-section {\n padding: 80px 8%;\n background: #FCFCFC;\n }\n .info-rapida-container {\n max-width: 1000px;\n margin: 0 auto;\n }\n .info-rapida-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 30px;\n }\n .info-rapida-item {\n text-align: center;\n padding: 30px;\n background: var(--blanco);\n border-radius: 20px;\n transition: all 0.3s ease;\n border: 1px solid rgba(0, 0, 0, 0.03);\n }\n .info-rapida-item:hover {\n transform: translateY(-5px);\n box-shadow: var(--shadow-pro);\n }\n .info-rapida-item h3 {\n color: var(--siar-negro);\n margin-bottom: 10px;\n font-size: 1.2rem;\n font-weight: 700;\n }\n .info-rapida-item p {\n color: var(--siar-gris);\n font-size: 1rem;\n line-height: 1.5;\n }\n .info-rapida-item a {\n color: var(--siar-rojo);\n text-decoration: none;\n font-weight: 600;\n }\n .info-rapida-item a:hover {\n text-decoration: underline;\n }\n \/* ========== FOOTER ========== *\/\n footer {\n background: linear-gradient(135deg, #0a0a0a 0%, var(--siar-negro) 100%);\n padding: 100px 8% 50px;\n color: rgba(255, 255, 255, 0.7);\n position: relative;\n overflow: hidden;\n }\n footer::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--siar-rojo), transparent);\n animation: shimmer 3s infinite linear;\n }\n @keyframes shimmer {\n 0% {\n background-position: -200% center;\n }\n 100% {\n background-position: 200% center;\n }\n }\n .f-grid {\n display: grid;\n grid-template-columns: 1.5fr repeat(4, 1fr);\n gap: 60px;\n margin-bottom: 80px;\n position: relative;\n z-index: 1;\n }\n \/* Logo y descripci\u00f3n *\/\n .f-logo {\n position: relative;\n }\n .f-logo img {\n height: 60px;\n filter: brightness(10);\n margin-bottom: 25px;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n }\n .f-logo img:hover {\n transform: translateY(-5px) scale(1.05);\n filter: brightness(10) drop-shadow(0 5px 15px rgba(126, 22, 29, 0.4));\n }\n .f-logo p {\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 30px;\n max-width: 300px;\n transition: color 0.3s;\n }\n .f-logo:hover p {\n color: rgba(255, 255, 255, 0.8);\n }\n \/* Redes sociales *\/\n .f-socials {\n display: flex;\n gap: 18px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .f-socials a {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n .f-socials a::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(126, 22, 29, 0.3) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n transition: width 0.5s, height 0.5s;\n }\n .f-socials a:hover::before {\n width: 200%;\n height: 200%;\n }\n .f-socials a svg {\n width: 24px;\n height: 24px;\n fill: rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n z-index: 1;\n }\n .f-socials a:hover {\n background: rgba(126, 22, 29, 0.2);\n border-color: var(--siar-rojo);\n transform: translateY(-8px) scale(1.1);\n box-shadow: 0 10px 25px rgba(126, 22, 29, 0.3);\n animation: none;\n }\n .f-socials a:hover svg {\n fill: white;\n transform: rotate(360deg) scale(1.2);\n }\n \/* Colores espec\u00edficos para cada red social *\/\n .f-socials a[aria-label*=\"Facebook\"]:hover {\n background: rgba(24, 119, 242, 0.2);\n border-color: #1877F2;\n }\n .f-socials a[aria-label*=\"Instagram\"]:hover {\n background: rgba(228, 64, 95, 0.2);\n border-color: #E4405F;\n }\n .f-socials a[aria-label*=\"LinkedIn\"]:hover {\n background: rgba(10, 102, 194, 0.2);\n border-color: #0A66C2;\n }\n .f-socials a[aria-label*=\"X\"]:hover {\n background: rgba(0, 0, 0, 0.2);\n border-color: #000000;\n }\n \/* Columnas *\/\n .f-col h4 {\n color: white;\n font-size: 13px;\n text-transform: uppercase;\n margin-bottom: 25px;\n letter-spacing: 1.5px;\n font-weight: 700;\n position: relative;\n display: inline-block;\n }\n .f-col h4::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--siar-rojo);\n transition: width 0.3s;\n }\n .f-col:hover h4::after {\n width: 50px;\n }\n .f-col ul {\n list-style: none;\n padding: 0;\n }\n .f-col li {\n margin-bottom: 18px;\n font-size: 14px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.5;\n padding: 5px 0;\n border-radius: 4px;\n padding-left: 10px;\n position: relative;\n overflow: hidden;\n }\n .f-col li a {\n color: inherit;\n text-decoration: none;\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n z-index: 2;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .f-col li a:hover {\n color: var(--blanco);\n }\n .f-col li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 3px;\n background: var(--siar-rojo);\n transform: scaleY(0);\n transition: transform 0.3s;\n transform-origin: top;\n }\n .f-col li:hover {\n color: var(--blanco);\n padding-left: 15px;\n background: rgba(126, 22, 29, 0.1);\n transform: translateX(5px);\n }\n .f-col li:hover::before {\n transform: scaleY(1);\n }\n \/* Copyright *\/\n .copyright {\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n padding-top: 40px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.5);\n position: relative;\n z-index: 1;\n }\n .copyright::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--siar-rojo), transparent);\n }\n \/* ========== CONTENEDOR M\u00d3VIL PARA FOOTER ========== *\/\n .mobile-footer-container {\n display: none;\n }\n \/* ========== LOGO Y REDES PARA M\u00d3VIL - MISMAS ANIMACIONES QUE DESKTOP ========== *\/\n .mobile-footer-logo {\n text-align: center;\n margin-bottom: 40px;\n position: relative;\n }\n .mobile-footer-logo img {\n height: 50px;\n filter: brightness(10);\n margin-bottom: 20px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .mobile-footer-logo img:hover {\n transform: translateY(-5px) scale(1.05);\n filter: brightness(10) drop-shadow(0 5px 15px rgba(126, 22, 29, 0.4));\n }\n .mobile-footer-logo p {\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 25px;\n max-width: 100%;\n padding: 0 15px;\n transition: color 0.3s;\n }\n .mobile-footer-logo:hover p {\n color: rgba(255, 255, 255, 0.8);\n }\n \/* REDES SOCIALES M\u00d3VIL - MISMAS ANIMACIONES QUE DESKTOP *\/\n .mobile-footer-socials {\n display: flex;\n justify-content: center;\n gap: 18px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .mobile-footer-socials a {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n .mobile-footer-socials a::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(126, 22, 29, 0.3) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n transition: width 0.5s, height 0.5s;\n }\n .mobile-footer-socials a:hover::before {\n width: 200%;\n height: 200%;\n }\n .mobile-footer-socials a svg {\n width: 24px;\n height: 24px;\n fill: rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n z-index: 1;\n }\n \/* Animaciones de levitaci\u00f3n igual que desktop *\/\n .mobile-footer-socials a:nth-child(1) {\n animation: levitate 3s ease-in-out infinite;\n }\n .mobile-footer-socials a:nth-child(2) {\n animation: levitate 3s ease-in-out 0.5s infinite;\n }\n .mobile-footer-socials a:nth-child(3) {\n animation: levitate 3s ease-in-out 1s infinite;\n }\n .mobile-footer-socials a:nth-child(4) {\n animation: levitate 3s ease-in-out 1.5s infinite;\n }\n .mobile-footer-socials a:hover {\n background: rgba(126, 22, 29, 0.2);\n border-color: var(--siar-rojo);\n transform: translateY(-8px) scale(1.1);\n box-shadow: 0 10px 25px rgba(126, 22, 29, 0.3);\n animation: none;\n }\n .mobile-footer-socials a:hover svg {\n fill: white;\n transform: rotate(360deg) scale(1.2);\n }\n \/* Colores espec\u00edficos para cada red social - igual que desktop *\/\n .mobile-footer-socials a[aria-label*=\"Facebook\"]:hover {\n background: rgba(24, 119, 242, 0.2);\n border-color: #1877F2;\n }\n .mobile-footer-socials a[aria-label*=\"Instagram\"]:hover {\n background: rgba(228, 64, 95, 0.2);\n border-color: #E4405F;\n }\n .mobile-footer-socials a[aria-label*=\"LinkedIn\"]:hover {\n background: rgba(10, 102, 194, 0.2);\n border-color: #0A66C2;\n }\n .mobile-footer-socials a[aria-label*=\"X\"]:hover {\n background: rgba(0, 0, 0, 0.2);\n border-color: #000000;\n }\n \/* ========== COLUMNAS PARA M\u00d3VIL ========== *\/\n .mobile-columns-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px 20px;\n margin-bottom: 40px;\n }\n .mobile-column {\n text-align: center;\n }\n .mobile-column h4 {\n color: white;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n margin-bottom: 15px;\n font-weight: 700;\n padding-bottom: 8px;\n position: relative;\n display: inline-block;\n }\n .mobile-column h4::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 25px;\n height: 2px;\n background: var(--siar-rojo);\n }\n .mobile-column ul {\n list-style: none;\n padding: 0;\n }\n .mobile-column li {\n margin-bottom: 12px;\n font-size: 13px;\n }\n .mobile-column li a {\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n transition: color 0.3s;\n display: block;\n padding: 5px 0;\n }\n .mobile-column li a:hover {\n color: var(--blanco);\n }\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 1024px) {\n .nav-links:not(.mobile-menu) {\n display: none !important;\n }\n .hamburger {\n display: block !important;\n }\n \/* Ajustar grid del formulario en tablet *\/\n .wp-form-container .ff-el-group--container {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \/* Ajustar grid de informaci\u00f3n r\u00e1pida *\/\n .info-rapida-grid {\n grid-template-columns: 1fr 1fr;\n }\n \/* Footer en tablet *\/\n .f-grid {\n grid-template-columns: 1fr 1fr 1fr;\n gap: 40px;\n }\n .f-logo {\n grid-column: span 3;\n }\n \/* Ajustar hero para tablet *\/\n .hero-contacto {\n background-attachment: scroll;\n }\n }\n @media (max-width: 768px) {\n header {\n padding: 0 4%;\n height: 80px;\n }\n .logo img {\n height: 45px;\n }\n .hero-contacto {\n margin-top: 80px;\n height: 50vh;\n background-attachment: scroll;\n }\n .hero-contacto-content h1 {\n font-size: 2.5rem;\n }\n .hero-contacto-content p {\n font-size: 1rem;\n }\n .formulario-header h2 {\n font-size: 2.2rem;\n }\n .wp-form-container {\n padding: 40px 30px;\n }\n \/* Info r\u00e1pida en m\u00f3vil *\/\n .info-rapida-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \/* ========== FOOTER M\u00d3VIL (SOLO PARA PANTALLAS M\u00d3VILES) ========== *\/\n footer {\n padding: 60px 5% 30px;\n }\n \/* OCULTAR FOOTER DESKTOP EN M\u00d3VIL *\/\n .f-grid {\n display: none;\n }\n \/* MOSTRAR FOOTER M\u00d3VIL COMPLETO *\/\n .mobile-footer-container {\n display: block;\n }\n .mobile-footer-logo {\n margin-bottom: 40px;\n }\n .copyright {\n font-size: 11px;\n padding-top: 25px;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.5);\n }\n }\n @media (min-width: 769px) {\n \/* EN PANTALLAS GRANDES, OCULTAR EL FOOTER M\u00d3VIL *\/\n .mobile-footer-container {\n display: none !important;\n }\n \/* MOSTRAR EL FOOTER DESKTOP *\/\n .f-grid {\n display: grid !important;\n }\n .f-col {\n display: block !important;\n }\n }\n @media (max-width: 576px) {\n .hero-contacto-content h1 {\n font-size: 2rem;\n }\n .formulario-header h2 {\n font-size: 1.8rem;\n }\n .wp-form-container {\n padding: 30px 20px;\n }\n \/* Ajustes para m\u00f3viles *\/\n .wp-form-container .ff-el-group {\n margin-bottom: 20px;\n }\n .wp-form-container .ff-btn-submit {\n padding: 18px 40px;\n font-size: 0.95rem;\n min-width: 180px;\n }\n \/* FOOTER EN M\u00d3VIL *\/\n footer {\n padding: 50px 4% 25px;\n }\n .mobile-footer-logo p {\n font-size: 0.85rem;\n padding: 0 10px;\n }\n .mobile-footer-socials {\n gap: 12px;\n }\n .mobile-footer-socials a {\n width: 46px;\n height: 46px;\n }\n .mobile-footer-socials a svg {\n width: 20px;\n height: 20px;\n }\n .mobile-columns-container {\n grid-template-columns: 1fr 1fr;\n gap: 25px;\n }\n .mobile-column h4 {\n font-size: 11px;\n }\n .mobile-column li {\n font-size: 12px;\n margin-bottom: 10px;\n }\n }\n @media (max-width: 400px) {\n .wp-form-container {\n padding: 25px 15px;\n }\n .wp-form-container .ff-btn-submit {\n padding: 16px 30px;\n font-size: 0.9rem;\n min-width: 160px;\n }\n .mobile-footer-socials {\n gap: 12px;\n }\n .mobile-footer-socials a {\n width: 44px;\n height: 44px;\n }\n .mobile-footer-socials a svg {\n width: 18px;\n height: 18px;\n }\n .copyright {\n font-size: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <a href=\"https:\/\/siar.com.co\" title=\"Ir a la p\u00e1gina principal\">\n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"SIAR SAS\">\n <\/a>\n <nav>\n <ul id=\"desktopMenu\">\n <li><a href=\"https:\/\/siar.com.co\/\">Inicio<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/listadoblogs\/\">Blogs<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Quienes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/unidades-de-negocios\/\">Unidades de Negocios<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/trabaja-con-nosotros\/\">Trabaja con nosotros<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n <\/nav>\n <button id=\"hamburgerBtn\" aria-label=\"Men\u00fa de navegaci\u00f3n\" onclick=\"toggleMenu()\">\n <\/button>\n <\/header>\n <ul id=\"mobileMenu\">\n <li><a href=\"https:\/\/siar.com.co\/\" onclick=\"closeMenu()\">Inicio<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/listadoblogs\/\" onclick=\"closeMenu()\">Blogs<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\" onclick=\"closeMenu()\">Quienes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\" onclick=\"closeMenu()\">Trabaja con nosotros<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/unidades-de-negocios\/\" onclick=\"closeMenu()\">Unidades de Negocios<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\" onclick=\"closeMenu()\">PQRSFD<\/a><\/li>\n <\/ul>\n \n <section id=\"contacto\">\n <h1>Cont\u00e1ctanos<\/h1>\n <p>Estamos aqu\u00ed para ayudarte. Ponte en contacto con nosotros y descubre c\u00f3mo podemos transformar<br>\n la gesti\u00f3n de tu informaci\u00f3n documental.<\/p>\n <\/section>\n \n <section>\n <h2>Env\u00edanos un Mensaje<\/h2>\n <p>Completa el siguiente formulario y nos pondremos en contacto contigo a la mayor brevedad posible.<\/p>\n [fluentform id=\"10\"]\n <\/section>\n \n <footer>\n \n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"Logo\">\n <p>28 a\u00f1os liderando la transformaci\u00f3n digital en Colombia.<\/p>\n <a href=\"https:\/\/www.facebook.com\/siar.archivos\/\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/siar.informacion\/\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2C5.6 4 4 5.6 4 7.6v8.8c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6V7.6c0-2-1.6-3.6-3.6-3.6H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5zm0 2c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/co.linkedin.com\/company\/siar-s-a-s\" aria-label=\"LinkedIn\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68zm1.39 9.94v-8.37H5.5v8.37h2.77z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/x.com\/SIAR_SAS\" aria-label=\"X (Twitter)\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" \/>\n <\/svg>\n <\/a>\n <h4>Productos<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/custodia-documental\/\">Custodia<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/digitalizacion-2\/\">Digitalizacion<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/soluciones-de-software\/\">Software<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/gestion-de-documentos\/\">Documental<\/a><\/li>\n <\/ul>\n <h4>Empresa<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Qui\u00e9nes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/equipo\/\">Nuestro Equipo<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/noticias\/\">Noticias<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/casos-de-exito\/\">Casos de \u00c9xito<\/a><\/li>\n <\/ul>\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/proteccion-y-uso-de-datos\/\">Protecci\u00f3n de Datos Personales<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/tratamiento-de-datos-personales\/\">Tratamiento de Datos Personales<\/a><\/li>\n <\/ul>\n <h4>Contacto<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/contactanos\/\">Contacto<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n \n \n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"Logo\">\n <p>28 a\u00f1os liderando la transformaci\u00f3n digital en Colombia.<\/p>\n <a href=\"https:\/\/www.facebook.com\/siar.archivos\/\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/siar.informacion\/\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2C5.6 4 4 5.6 4 7.6v8.8c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6V7.6c0-2-1.6-3.6-3.6-3.6H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5zm0 2c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/co.linkedin.com\/company\/siar-s-a-s\" aria-label=\"LinkedIn\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68zm1.39 9.94v-8.37H5.5v8.37h2.77z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/x.com\/SIAR_SAS\" aria-label=\"X (Twitter)\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" \/>\n <\/svg>\n <\/a>\n \n <h4>Productos<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/custodia-documental\/\">Custodia<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/digitalizacion-2\/\">Digitalizacion<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/soluciones-de-software\/\">Software<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/gestion-de-documentos\/\">Documental<\/a><\/li>\n <\/ul>\n <h4>Empresa<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Qui\u00e9nes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/equipo\/\">Nuestro Equipo<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/noticias\/\">Noticias<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/casos-de-exito\/\">Casos de \u00c9xito<\/a><\/li>\n <\/ul>\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/proteccion-y-uso-de-datos\/\">Protecci\u00f3n de Datos Personales<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/tratamiento-de-datos-personales\/\">Tratamiento de Datos Personales<\/a><\/li>\n <\/ul>\n <h4>Contacto<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/contactanos\/\">Contacto<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n \u00a9 2026 SIAR SAS \u00b7 Todos los derechos reservados.\n <\/footer>\n<\/body>\n<\/html>","post_title":"Contactanos","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"contactanos","to_ping":"","pinged":"","post_modified":"2026-02-09 16:29:48","post_modified_gmt":"2026-02-09 21:29:48","post_content_filtered":"","post_parent":0,"guid":"https:\/\/siar.com.co\/?page_id=4630","menu_order":0,"post_type":"page","post_mime_type":"","comment_count":"0","filter":"raw"},"pagenow":"index.php"}</article></body></html>

{"post":{"ID":4630,"post_author":"3","post_date":"2026-01-30 14:14:23","post_date_gmt":"2026-01-30 19:14:23","post_content":"\n\n\n \n \n SIAR SAS | Contacto<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap\"\n rel=\"stylesheet\">\n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n <style>\n :root {\n --blanco: #FFFFFF;\n --siar-gris: #5E5E5E;\n --siar-rojo: #7E161D;\n --siar-rojo-oscuro: #5a0f14;\n --siar-negro: #111111;\n --bg-light: #FDFDFD;\n --transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n --shadow-pro: 0 20px 40px rgba(0, 0, 0, 0.06);\n --shadow-hover: 0 15px 35px rgba(126, 22, 29, 0.3);\n --hero-gris: #E0E0E0;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n outline: none;\n }\n html {\n scroll-behavior: smooth;\n font-size: 16px;\n }\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n background: #FCFCFC;\n color: var(--siar-gris);\n overflow-x: hidden;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \/* ========== NAVEGACI\u00d3N ========== *\/\n header {\n background: var(--siar-negro) !important;\n height: 95px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8%;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 2000;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n opacity: 1 !important;\n transition: all 0.3s ease;\n }\n .logo img {\n height: 55px;\n width: auto;\n transition: var(--transition);\n filter: brightness(0) invert(1);\n }\n .logo img:hover {\n transform: translateY(-2px) scale(1.05);\n }\n \/* ========== MEN\u00da DESKTOP ========== *\/\n .nav-links {\n display: flex;\n list-style: none;\n gap: 40px;\n }\n .nav-links a {\n text-decoration: none;\n color: var(--blanco) !important;\n font-weight: 700;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--transition);\n position: relative;\n padding: 8px 0;\n opacity: 0.9;\n }\n .nav-links a:hover {\n color: var(--blanco) !important;\n opacity: 1;\n }\n .nav-links a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 3px;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--siar-rojo);\n transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 2px;\n }\n .nav-links a:hover::after {\n width: 80%;\n }\n \/* ========== BOT\u00d3N HAMBURGUESA ========== *\/\n .hamburger {\n display: none;\n cursor: pointer;\n padding: 12px;\n background: transparent;\n border: none;\n z-index: 1001;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n }\n .hamburger span {\n display: block;\n width: 28px;\n height: 3px;\n background: var(--blanco);\n margin: 5px 0;\n border-radius: 5px;\n transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n position: absolute;\n left: 6px;\n transform-origin: center;\n }\n .hamburger span:nth-child(1) {\n top: 12px;\n }\n .hamburger span:nth-child(2) {\n top: 18px;\n }\n .hamburger span:nth-child(3) {\n top: 24px;\n }\n .hamburger.active {\n transform: rotate(90deg);\n }\n .hamburger.active span:nth-child(1) {\n transform: rotate(45deg) translate(6px, 6px);\n top: 18px;\n background: var(--siar-rojo);\n }\n .hamburger.active span:nth-child(2) {\n opacity: 0;\n transform: translateX(-10px);\n }\n .hamburger.active span:nth-child(3) {\n transform: rotate(-45deg) translate(6px, -6px);\n top: 18px;\n background: var(--siar-rojo);\n }\n \/* ========== MEN\u00da M\u00d3VIL ========== *\/\n .nav-links.mobile-menu {\n position: fixed;\n top: 0;\n left: -100%;\n width: 85%;\n max-width: 380px;\n height: 100vh;\n background: #FFFFFF;\n flex-direction: column;\n padding: 120px 40px 40px;\n gap: 0;\n transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 15px 0 60px rgba(0, 0, 0, 0.08);\n z-index: 1000;\n overflow-y: auto;\n border-right: 1px solid rgba(0, 0, 0, 0.04);\n display: flex;\n }\n .nav-links.mobile-menu.active {\n left: 0;\n animation: slideInMenu 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n @keyframes slideInMenu {\n 0% {\n left: -100%;\n opacity: 0.8;\n }\n 100% {\n left: 0;\n opacity: 1;\n }\n }\n .nav-links.mobile-menu li {\n opacity: 0;\n transform: translateX(-40px);\n animation: slideInItem 0.5s forwards;\n width: 100%;\n margin-bottom: 5px;\n }\n .nav-links.mobile-menu.active li {\n animation: slideInItem 0.5s forwards;\n }\n @keyframes slideInItem {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n .nav-links.mobile-menu a {\n display: block;\n padding: 20px 20px;\n font-size: 16px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n letter-spacing: 1.5px;\n font-weight: 700;\n color: var(--siar-negro) !important;\n text-transform: uppercase;\n width: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: 12px;\n margin: 5px 0;\n position: relative;\n overflow: hidden;\n }\n .nav-links.mobile-menu a:hover {\n color: var(--siar-rojo) !important;\n background: rgba(126, 22, 29, 0.05);\n transform: translateX(10px);\n box-shadow: 0 5px 20px rgba(126, 22, 29, 0.1);\n }\n \/* ========== OVERLAY PARA MEN\u00da M\u00d3VIL ========== *\/\n .mobile-menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(5px);\n z-index: 999;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s ease, visibility 0.4s ease;\n }\n .mobile-menu-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n \/* ========== HERO SECTION CONTACTO CON IMAGEN DE FONDO - NORMAL ========== *\/\n .hero-contacto {\n height: 60vh;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n margin-top: 95px;\n background: url('https:\/\/siar.com.co\/wp-content\/uploads\/2026\/02\/image2.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n background-attachment: fixed;\n }\n \/* Capa de superposici\u00f3n ligera solo para mejorar legibilidad del texto *\/\n .hero-contacto::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3); \/* Solo un ligero oscurecimiento para el texto *\/\n z-index: 1;\n }\n .hero-contacto-content {\n position: relative;\n z-index: 10;\n text-align: center;\n color: var(--blanco);\n padding: 0 20px;\n max-width: 1200px;\n margin: 0 auto;\n }\n .hero-contacto-content h1 {\n font-size: 3.5rem;\n font-weight: 800;\n letter-spacing: -1px;\n margin-bottom: 20px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n line-height: 1.1;\n animation: fadeInUp 1s ease-out;\n }\n .hero-contacto-content p {\n color: rgba(255, 255, 255, 0.95);\n font-size: 1.2rem;\n letter-spacing: 1px;\n font-weight: 400;\n margin-bottom: 40px;\n line-height: 1.6;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n animation: fadeInUp 1s ease-out 0.3s both;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n }\n \/* ========== FORMULARIO SECTION ========== *\/\n .formulario-section {\n padding: 100px 8%;\n background: #FAFAFA;\n }\n .formulario-container {\n max-width: 1000px;\n margin: 0 auto;\n width: 100%;\n }\n .formulario-header {\n text-align: center;\n margin-bottom: 60px;\n }\n .formulario-header h2 {\n font-size: 2.8rem;\n color: var(--siar-negro);\n font-weight: 800;\n margin-bottom: 20px;\n position: relative;\n display: inline-block;\n }\n .formulario-header h2::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: var(--siar-rojo);\n border-radius: 2px;\n }\n .formulario-header p {\n color: var(--siar-gris);\n font-size: 1.1rem;\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.6;\n }\n \/* ========== CONTENEDOR DEL FORMULARIO WORDPRESS ========== *\/\n .wp-form-container {\n background: var(--blanco);\n padding: 60px;\n border-radius: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n border: 1px solid rgba(0, 0, 0, 0.03);\n width: 100%;\n overflow: hidden;\n position: relative;\n }\n \/* Estilos espec\u00edficos para Fluent Forms *\/\n .wp-form-container .ff-el-form-control,\n .wp-form-container .ff-el-form-control:focus {\n width: 100%;\n padding: 15px 20px;\n border: 2px solid rgba(0, 0, 0, 0.05);\n border-radius: 12px;\n font-family: 'Plus Jakarta Sans', sans-serif;\n font-size: 1rem;\n color: var(--siar-gris);\n background: #F8F8F8;\n transition: all 0.3s ease;\n box-sizing: border-box;\n }\n .wp-form-container .ff-el-form-control:focus {\n outline: none;\n border-color: var(--siar-rojo);\n box-shadow: 0 0 0 3px rgba(126, 22, 29, 0.1);\n }\n .wp-form-container .ff-el-group {\n margin-bottom: 25px;\n width: 100%;\n }\n .wp-form-container .ff-el-group--label {\n display: block;\n margin-bottom: 10px;\n color: var(--siar-negro);\n font-weight: 600;\n font-size: 0.95rem;\n }\n .wp-form-container textarea.ff-el-form-control {\n min-height: 150px;\n resize: vertical;\n }\n .wp-form-container .ff_submit_btn_wrapper {\n text-align: center;\n margin-top: 30px;\n width: 100%;\n }\n .wp-form-container .ff-btn-submit {\n background: linear-gradient(135deg, var(--siar-rojo) 0%, var(--siar-rojo-oscuro) 100%);\n color: white;\n border: none;\n padding: 20px 50px;\n border-radius: 50px;\n font-weight: 700;\n font-size: 1rem;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n display: inline-block;\n text-transform: uppercase;\n font-family: 'Plus Jakarta Sans', sans-serif;\n min-width: 200px;\n }\n .wp-form-container .ff-btn-submit:hover {\n background: linear-gradient(135deg, var(--siar-rojo-oscuro) 0%, #4a0c10 100%);\n transform: translateY(-5px);\n box-shadow: 0 15px 30px rgba(126, 22, 29, 0.3);\n }\n \/* Asegurar que el formulario sea responsive *\/\n .wp-form-container .ff-el-form-control,\n .wp-form-container .ff-el-group,\n .wp-form-container .ff-el-section-break {\n max-width: 100% !important;\n }\n \/* Grid para formularios con columnas *\/\n .wp-form-container .ff-el-group--container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px;\n width: 100%;\n }\n \/* Campos de ancho completo *\/\n .wp-form-container .ff-el-group.ff-el-is-full {\n grid-column: 1 \/ -1;\n }\n \/* ========== INFORMACI\u00d3N R\u00c1PIDA ========== *\/\n .info-rapida-section {\n padding: 80px 8%;\n background: #FCFCFC;\n }\n .info-rapida-container {\n max-width: 1000px;\n margin: 0 auto;\n }\n .info-rapida-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 30px;\n }\n .info-rapida-item {\n text-align: center;\n padding: 30px;\n background: var(--blanco);\n border-radius: 20px;\n transition: all 0.3s ease;\n border: 1px solid rgba(0, 0, 0, 0.03);\n }\n .info-rapida-item:hover {\n transform: translateY(-5px);\n box-shadow: var(--shadow-pro);\n }\n .info-rapida-item h3 {\n color: var(--siar-negro);\n margin-bottom: 10px;\n font-size: 1.2rem;\n font-weight: 700;\n }\n .info-rapida-item p {\n color: var(--siar-gris);\n font-size: 1rem;\n line-height: 1.5;\n }\n .info-rapida-item a {\n color: var(--siar-rojo);\n text-decoration: none;\n font-weight: 600;\n }\n .info-rapida-item a:hover {\n text-decoration: underline;\n }\n \/* ========== FOOTER ========== *\/\n footer {\n background: linear-gradient(135deg, #0a0a0a 0%, var(--siar-negro) 100%);\n padding: 100px 8% 50px;\n color: rgba(255, 255, 255, 0.7);\n position: relative;\n overflow: hidden;\n }\n footer::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--siar-rojo), transparent);\n animation: shimmer 3s infinite linear;\n }\n @keyframes shimmer {\n 0% {\n background-position: -200% center;\n }\n 100% {\n background-position: 200% center;\n }\n }\n .f-grid {\n display: grid;\n grid-template-columns: 1.5fr repeat(4, 1fr);\n gap: 60px;\n margin-bottom: 80px;\n position: relative;\n z-index: 1;\n }\n \/* Logo y descripci\u00f3n *\/\n .f-logo {\n position: relative;\n }\n .f-logo img {\n height: 60px;\n filter: brightness(10);\n margin-bottom: 25px;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n }\n .f-logo img:hover {\n transform: translateY(-5px) scale(1.05);\n filter: brightness(10) drop-shadow(0 5px 15px rgba(126, 22, 29, 0.4));\n }\n .f-logo p {\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 30px;\n max-width: 300px;\n transition: color 0.3s;\n }\n .f-logo:hover p {\n color: rgba(255, 255, 255, 0.8);\n }\n \/* Redes sociales *\/\n .f-socials {\n display: flex;\n gap: 18px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .f-socials a {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n .f-socials a::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(126, 22, 29, 0.3) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n transition: width 0.5s, height 0.5s;\n }\n .f-socials a:hover::before {\n width: 200%;\n height: 200%;\n }\n .f-socials a svg {\n width: 24px;\n height: 24px;\n fill: rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n z-index: 1;\n }\n .f-socials a:hover {\n background: rgba(126, 22, 29, 0.2);\n border-color: var(--siar-rojo);\n transform: translateY(-8px) scale(1.1);\n box-shadow: 0 10px 25px rgba(126, 22, 29, 0.3);\n animation: none;\n }\n .f-socials a:hover svg {\n fill: white;\n transform: rotate(360deg) scale(1.2);\n }\n \/* Colores espec\u00edficos para cada red social *\/\n .f-socials a[aria-label*=\"Facebook\"]:hover {\n background: rgba(24, 119, 242, 0.2);\n border-color: #1877F2;\n }\n .f-socials a[aria-label*=\"Instagram\"]:hover {\n background: rgba(228, 64, 95, 0.2);\n border-color: #E4405F;\n }\n .f-socials a[aria-label*=\"LinkedIn\"]:hover {\n background: rgba(10, 102, 194, 0.2);\n border-color: #0A66C2;\n }\n .f-socials a[aria-label*=\"X\"]:hover {\n background: rgba(0, 0, 0, 0.2);\n border-color: #000000;\n }\n \/* Columnas *\/\n .f-col h4 {\n color: white;\n font-size: 13px;\n text-transform: uppercase;\n margin-bottom: 25px;\n letter-spacing: 1.5px;\n font-weight: 700;\n position: relative;\n display: inline-block;\n }\n .f-col h4::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 30px;\n height: 2px;\n background: var(--siar-rojo);\n transition: width 0.3s;\n }\n .f-col:hover h4::after {\n width: 50px;\n }\n .f-col ul {\n list-style: none;\n padding: 0;\n }\n .f-col li {\n margin-bottom: 18px;\n font-size: 14px;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.5;\n padding: 5px 0;\n border-radius: 4px;\n padding-left: 10px;\n position: relative;\n overflow: hidden;\n }\n .f-col li a {\n color: inherit;\n text-decoration: none;\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n z-index: 2;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .f-col li a:hover {\n color: var(--blanco);\n }\n .f-col li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 3px;\n background: var(--siar-rojo);\n transform: scaleY(0);\n transition: transform 0.3s;\n transform-origin: top;\n }\n .f-col li:hover {\n color: var(--blanco);\n padding-left: 15px;\n background: rgba(126, 22, 29, 0.1);\n transform: translateX(5px);\n }\n .f-col li:hover::before {\n transform: scaleY(1);\n }\n \/* Copyright *\/\n .copyright {\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n padding-top: 40px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.5);\n position: relative;\n z-index: 1;\n }\n .copyright::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--siar-rojo), transparent);\n }\n \/* ========== CONTENEDOR M\u00d3VIL PARA FOOTER ========== *\/\n .mobile-footer-container {\n display: none;\n }\n \/* ========== LOGO Y REDES PARA M\u00d3VIL - MISMAS ANIMACIONES QUE DESKTOP ========== *\/\n .mobile-footer-logo {\n text-align: center;\n margin-bottom: 40px;\n position: relative;\n }\n .mobile-footer-logo img {\n height: 50px;\n filter: brightness(10);\n margin-bottom: 20px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .mobile-footer-logo img:hover {\n transform: translateY(-5px) scale(1.05);\n filter: brightness(10) drop-shadow(0 5px 15px rgba(126, 22, 29, 0.4));\n }\n .mobile-footer-logo p {\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 25px;\n max-width: 100%;\n padding: 0 15px;\n transition: color 0.3s;\n }\n .mobile-footer-logo:hover p {\n color: rgba(255, 255, 255, 0.8);\n }\n \/* REDES SOCIALES M\u00d3VIL - MISMAS ANIMACIONES QUE DESKTOP *\/\n .mobile-footer-socials {\n display: flex;\n justify-content: center;\n gap: 18px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .mobile-footer-socials a {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n .mobile-footer-socials a::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(126, 22, 29, 0.3) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n transition: width 0.5s, height 0.5s;\n }\n .mobile-footer-socials a:hover::before {\n width: 200%;\n height: 200%;\n }\n .mobile-footer-socials a svg {\n width: 24px;\n height: 24px;\n fill: rgba(255, 255, 255, 0.8);\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n z-index: 1;\n }\n \/* Animaciones de levitaci\u00f3n igual que desktop *\/\n .mobile-footer-socials a:nth-child(1) {\n animation: levitate 3s ease-in-out infinite;\n }\n .mobile-footer-socials a:nth-child(2) {\n animation: levitate 3s ease-in-out 0.5s infinite;\n }\n .mobile-footer-socials a:nth-child(3) {\n animation: levitate 3s ease-in-out 1s infinite;\n }\n .mobile-footer-socials a:nth-child(4) {\n animation: levitate 3s ease-in-out 1.5s infinite;\n }\n .mobile-footer-socials a:hover {\n background: rgba(126, 22, 29, 0.2);\n border-color: var(--siar-rojo);\n transform: translateY(-8px) scale(1.1);\n box-shadow: 0 10px 25px rgba(126, 22, 29, 0.3);\n animation: none;\n }\n .mobile-footer-socials a:hover svg {\n fill: white;\n transform: rotate(360deg) scale(1.2);\n }\n \/* Colores espec\u00edficos para cada red social - igual que desktop *\/\n .mobile-footer-socials a[aria-label*=\"Facebook\"]:hover {\n background: rgba(24, 119, 242, 0.2);\n border-color: #1877F2;\n }\n .mobile-footer-socials a[aria-label*=\"Instagram\"]:hover {\n background: rgba(228, 64, 95, 0.2);\n border-color: #E4405F;\n }\n .mobile-footer-socials a[aria-label*=\"LinkedIn\"]:hover {\n background: rgba(10, 102, 194, 0.2);\n border-color: #0A66C2;\n }\n .mobile-footer-socials a[aria-label*=\"X\"]:hover {\n background: rgba(0, 0, 0, 0.2);\n border-color: #000000;\n }\n \/* ========== COLUMNAS PARA M\u00d3VIL ========== *\/\n .mobile-columns-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 30px 20px;\n margin-bottom: 40px;\n }\n .mobile-column {\n text-align: center;\n }\n .mobile-column h4 {\n color: white;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 1.2px;\n margin-bottom: 15px;\n font-weight: 700;\n padding-bottom: 8px;\n position: relative;\n display: inline-block;\n }\n .mobile-column h4::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 25px;\n height: 2px;\n background: var(--siar-rojo);\n }\n .mobile-column ul {\n list-style: none;\n padding: 0;\n }\n .mobile-column li {\n margin-bottom: 12px;\n font-size: 13px;\n }\n .mobile-column li a {\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n transition: color 0.3s;\n display: block;\n padding: 5px 0;\n }\n .mobile-column li a:hover {\n color: var(--blanco);\n }\n \/* ========== RESPONSIVE ========== *\/\n @media (max-width: 1024px) {\n .nav-links:not(.mobile-menu) {\n display: none !important;\n }\n .hamburger {\n display: block !important;\n }\n \/* Ajustar grid del formulario en tablet *\/\n .wp-form-container .ff-el-group--container {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \/* Ajustar grid de informaci\u00f3n r\u00e1pida *\/\n .info-rapida-grid {\n grid-template-columns: 1fr 1fr;\n }\n \/* Footer en tablet *\/\n .f-grid {\n grid-template-columns: 1fr 1fr 1fr;\n gap: 40px;\n }\n .f-logo {\n grid-column: span 3;\n }\n \/* Ajustar hero para tablet *\/\n .hero-contacto {\n background-attachment: scroll;\n }\n }\n @media (max-width: 768px) {\n header {\n padding: 0 4%;\n height: 80px;\n }\n .logo img {\n height: 45px;\n }\n .hero-contacto {\n margin-top: 80px;\n height: 50vh;\n background-attachment: scroll;\n }\n .hero-contacto-content h1 {\n font-size: 2.5rem;\n }\n .hero-contacto-content p {\n font-size: 1rem;\n }\n .formulario-header h2 {\n font-size: 2.2rem;\n }\n .wp-form-container {\n padding: 40px 30px;\n }\n \/* Info r\u00e1pida en m\u00f3vil *\/\n .info-rapida-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \/* ========== FOOTER M\u00d3VIL (SOLO PARA PANTALLAS M\u00d3VILES) ========== *\/\n footer {\n padding: 60px 5% 30px;\n }\n \/* OCULTAR FOOTER DESKTOP EN M\u00d3VIL *\/\n .f-grid {\n display: none;\n }\n \/* MOSTRAR FOOTER M\u00d3VIL COMPLETO *\/\n .mobile-footer-container {\n display: block;\n }\n .mobile-footer-logo {\n margin-bottom: 40px;\n }\n .copyright {\n font-size: 11px;\n padding-top: 25px;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.5);\n }\n }\n @media (min-width: 769px) {\n \/* EN PANTALLAS GRANDES, OCULTAR EL FOOTER M\u00d3VIL *\/\n .mobile-footer-container {\n display: none !important;\n }\n \/* MOSTRAR EL FOOTER DESKTOP *\/\n .f-grid {\n display: grid !important;\n }\n .f-col {\n display: block !important;\n }\n }\n @media (max-width: 576px) {\n .hero-contacto-content h1 {\n font-size: 2rem;\n }\n .formulario-header h2 {\n font-size: 1.8rem;\n }\n .wp-form-container {\n padding: 30px 20px;\n }\n \/* Ajustes para m\u00f3viles *\/\n .wp-form-container .ff-el-group {\n margin-bottom: 20px;\n }\n .wp-form-container .ff-btn-submit {\n padding: 18px 40px;\n font-size: 0.95rem;\n min-width: 180px;\n }\n \/* FOOTER EN M\u00d3VIL *\/\n footer {\n padding: 50px 4% 25px;\n }\n .mobile-footer-logo p {\n font-size: 0.85rem;\n padding: 0 10px;\n }\n .mobile-footer-socials {\n gap: 12px;\n }\n .mobile-footer-socials a {\n width: 46px;\n height: 46px;\n }\n .mobile-footer-socials a svg {\n width: 20px;\n height: 20px;\n }\n .mobile-columns-container {\n grid-template-columns: 1fr 1fr;\n gap: 25px;\n }\n .mobile-column h4 {\n font-size: 11px;\n }\n .mobile-column li {\n font-size: 12px;\n margin-bottom: 10px;\n }\n }\n @media (max-width: 400px) {\n .wp-form-container {\n padding: 25px 15px;\n }\n .wp-form-container .ff-btn-submit {\n padding: 16px 30px;\n font-size: 0.9rem;\n min-width: 160px;\n }\n .mobile-footer-socials {\n gap: 12px;\n }\n .mobile-footer-socials a {\n width: 44px;\n height: 44px;\n }\n .mobile-footer-socials a svg {\n width: 18px;\n height: 18px;\n }\n .copyright {\n font-size: 10px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <a href=\"https:\/\/siar.com.co\" title=\"Ir a la p\u00e1gina principal\">\n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"SIAR SAS\">\n <\/a>\n <nav>\n <ul id=\"desktopMenu\">\n <li><a href=\"https:\/\/siar.com.co\/\">Inicio<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/listadoblogs\/\">Blogs<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Quienes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/unidades-de-negocios\/\">Unidades de Negocios<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/trabaja-con-nosotros\/\">Trabaja con nosotros<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n <\/nav>\n <button id=\"hamburgerBtn\" aria-label=\"Men\u00fa de navegaci\u00f3n\" onclick=\"toggleMenu()\">\n <\/button>\n <\/header>\n <ul id=\"mobileMenu\">\n <li><a href=\"https:\/\/siar.com.co\/\" onclick=\"closeMenu()\">Inicio<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/listadoblogs\/\" onclick=\"closeMenu()\">Blogs<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\" onclick=\"closeMenu()\">Quienes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\" onclick=\"closeMenu()\">Trabaja con nosotros<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/unidades-de-negocios\/\" onclick=\"closeMenu()\">Unidades de Negocios<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\" onclick=\"closeMenu()\">PQRSFD<\/a><\/li>\n <\/ul>\n \n <section id=\"contacto\">\n <h1>Cont\u00e1ctanos<\/h1>\n <p>Estamos aqu\u00ed para ayudarte. Ponte en contacto con nosotros y descubre c\u00f3mo podemos transformar<br>\n la gesti\u00f3n de tu informaci\u00f3n documental.<\/p>\n <\/section>\n \n <section>\n <h2>Env\u00edanos un Mensaje<\/h2>\n <p>Completa el siguiente formulario y nos pondremos en contacto contigo a la mayor brevedad posible.<\/p>\n [fluentform id=\"10\"]\n <\/section>\n \n <footer>\n \n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"Logo\">\n <p>28 a\u00f1os liderando la transformaci\u00f3n digital en Colombia.<\/p>\n <a href=\"https:\/\/www.facebook.com\/siar.archivos\/\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/siar.informacion\/\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2C5.6 4 4 5.6 4 7.6v8.8c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6V7.6c0-2-1.6-3.6-3.6-3.6H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5zm0 2c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/co.linkedin.com\/company\/siar-s-a-s\" aria-label=\"LinkedIn\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68zm1.39 9.94v-8.37H5.5v8.37h2.77z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/x.com\/SIAR_SAS\" aria-label=\"X (Twitter)\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" \/>\n <\/svg>\n <\/a>\n <h4>Productos<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/custodia-documental\/\">Custodia<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/digitalizacion-2\/\">Digitalizacion<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/soluciones-de-software\/\">Software<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/gestion-de-documentos\/\">Documental<\/a><\/li>\n <\/ul>\n <h4>Empresa<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Qui\u00e9nes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/equipo\/\">Nuestro Equipo<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/noticias\/\">Noticias<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/casos-de-exito\/\">Casos de \u00c9xito<\/a><\/li>\n <\/ul>\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/proteccion-y-uso-de-datos\/\">Protecci\u00f3n de Datos Personales<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/tratamiento-de-datos-personales\/\">Tratamiento de Datos Personales<\/a><\/li>\n <\/ul>\n <h4>Contacto<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/contactanos\/\">Contacto<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n \n \n <img src=\"https:\/\/siar.com.co\/wp-content\/uploads\/2025\/12\/IMG_7321-e1768398709137-1.png\" alt=\"Logo\">\n <p>28 a\u00f1os liderando la transformaci\u00f3n digital en Colombia.<\/p>\n <a href=\"https:\/\/www.facebook.com\/siar.archivos\/\" aria-label=\"Facebook\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/siar.informacion\/\" aria-label=\"Instagram\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2C5.6 4 4 5.6 4 7.6v8.8c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6V7.6c0-2-1.6-3.6-3.6-3.6H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5 2.2-5 5-5zm0 2c-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/co.linkedin.com\/company\/siar-s-a-s\" aria-label=\"LinkedIn\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68zm1.39 9.94v-8.37H5.5v8.37h2.77z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/x.com\/SIAR_SAS\" aria-label=\"X (Twitter)\">\n <svg viewBox=\"0 0 24 24\">\n <path\n d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" \/>\n <\/svg>\n <\/a>\n \n <h4>Productos<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/custodia-documental\/\">Custodia<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/digitalizacion-2\/\">Digitalizacion<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/soluciones-de-software\/\">Software<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/gestion-de-documentos\/\">Documental<\/a><\/li>\n <\/ul>\n <h4>Empresa<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/quienes-somos\/\">Qui\u00e9nes Somos<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/equipo\/\">Nuestro Equipo<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/noticias\/\">Noticias<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/casos-de-exito\/\">Casos de \u00c9xito<\/a><\/li>\n <\/ul>\n <h4>Legal<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/proteccion-y-uso-de-datos\/\">Protecci\u00f3n de Datos Personales<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/tratamiento-de-datos-personales\/\">Tratamiento de Datos Personales<\/a><\/li>\n <\/ul>\n <h4>Contacto<\/h4>\n <ul>\n <li><a href=\"https:\/\/siar.com.co\/contactanos\/\">Contacto<\/a><\/li>\n <li><a href=\"https:\/\/siar.com.co\/pqrsfd\/\">PQRSFD<\/a><\/li>\n <\/ul>\n \u00a9 2026 SIAR SAS \u00b7 Todos los derechos reservados.\n <\/footer>\n<\/body>\n<\/html>","post_title":"Contactanos","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"contactanos","to_ping":"","pinged":"","post_modified":"2026-02-09 16:29:48","post_modified_gmt":"2026-02-09 21:29:48","post_content_filtered":"","post_parent":0,"guid":"https:\/\/siar.com.co\/?page_id=4630","menu_order":0,"post_type":"page","post_mime_type":"","comment_count":"0","filter":"raw"},"pagenow":"index.php"}</article></body></html>

Contáctanos

Envíanos un Mensaje