ARISTA SPI - Seguridad Privada Integral<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n dark: '#0f172a', \/\/ Fondo base oscuro\n navy: '#1e293b', \/\/ Fondo secundario\n \/\/ Colores extra\u00eddos de la identidad ARISTA\n accent: '#E05D26', \/\/ Naranja principal del logo\n accentHover: '#c2410c',\n secondary: '#8A1C20', \/\/ Vino\/Burdeos del escudo\n gold: '#F4C55D', \/\/ Dorado\/Crema de los detalles\n text: '#f1f5f9',\n muted: '#94a3b8'\n }\n },\n fontFamily: {\n sans: ['Barlow', 'sans-serif'],\n },\n animation: {\n 'blob': 'blob 7s infinite',\n 'kenburns': 'kenburns 20s infinite alternate',\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n blob: {\n '0%': { transform: 'translate(0px, 0px) scale(1)' },\n '33%': { transform: 'translate(30px, -50px) scale(1.1)' },\n '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },\n '100%': { transform: 'translate(0px, 0px) scale(1)' },\n },\n kenburns: {\n '0%': { transform: 'scale(1)' },\n '100%': { transform: 'scale(1.1)' },\n },\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Estilos personalizados *\/\n body {\n font-family: 'Barlow', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n overflow-x: hidden;\n \/* Fondo sutil tipo Grid tecnol\u00f3gico para modernizar *\/\n background-image: radial-gradient(#1e293b 1px, transparent 1px);\n background-size: 40px 40px;\n }\n\n \/* Ajuste de logos *\/\n .brand-logo {\n width: auto;\n max-width: 220px;\n object-fit: contain;\n display: block;\n }\n header .brand-logo {\n height: 56px;\n }\n footer .brand-logo {\n height: 64px;\n }\n\n \/* Animaciones Reveal *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.5, 0, 0, 1);\n filter: blur(5px);\n }\n\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0);\n }\n\n \/* Tarjetas de Servicio - Modernizadas *\/\n .service-card {\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border: 1px solid rgba(255, 255, 255, 0.05);\n background: rgba(15, 23, 42, 0.6); \/* Transparencia sutil *\/\n backdrop-filter: blur(10px);\n }\n\n .service-card:hover {\n transform: translateY(-10px);\n \/* Glow effect naranja *\/\n box-shadow: 0 20px 40px -10px rgba(224, 93, 38, 0.2);\n border-color: rgba(224, 93, 38, 0.5);\n background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));\n }\n\n .icon-box {\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n \n .service-card:hover .icon-box {\n transform: scale(1.15) rotate(5deg);\n background-color: rgba(224, 93, 38, 0.1); \n color: #E05D26;\n border-color: #E05D26;\n box-shadow: 0 0 15px rgba(224, 93, 38, 0.3);\n }\n\n \/* Bot\u00f3n Primario con Efecto Shine *\/\n .btn-primary {\n background: linear-gradient(90deg, #E05D26 0%, #ca481e 100%);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n \n .btn-primary::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: 0.5s;\n z-index: -1;\n }\n\n .btn-primary:hover::after {\n left: 100%;\n }\n\n .btn-primary:hover {\n background: linear-gradient(90deg, #ca481e 0%, #8A1C20 100%);\n box-shadow: 0 0 20px rgba(224, 93, 38, 0.6);\n transform: translateY(-2px);\n }\n\n \/* Bot\u00f3n Secundario *\/\n .btn-outline {\n border: 1px solid rgba(255, 255, 255, 0.3);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .btn-outline:hover {\n border-color: #E05D26;\n background-color: rgba(224, 93, 38, 0.1);\n box-shadow: 0 0 15px rgba(224, 93, 38, 0.2) inset;\n }\n\n \/* Men\u00fa M\u00f3vil *\/\n #mobile-menu {\n transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n }\n #mobile-menu.open {\n max-height: 500px;\n opacity: 1;\n }\n\n \/* Gradiente Hero *\/\n .hero-overlay {\n background: linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(138, 28, 32, 0.2) 100%);\n }\n\n \/* Sector Icons Animation *\/\n .sector-item i {\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .sector-item:hover i {\n transform: translateY(-8px) scale(1.1);\n color: #E05D26;\n text-shadow: 0 10px 20px rgba(0,0,0,0.5);\n }\n .sector-item:hover {\n transform: translateY(-5px);\n }\n\n \/* Check list items *\/\n .feature-box {\n transition: transform 0.3s ease, border-color 0.3s ease;\n }\n .feature-box:hover {\n transform: translateX(5px);\n border-color: rgba(244, 197, 93, 0.5);\n background: rgba(30, 41, 59, 0.8);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n \n <header class=\"fixed w-full z-50 transition-all duration-300 bg-brand-dark\/95 backdrop-blur-md border-b border-white\/5\" id=\"navbar\">\n <div class=\"container mx-auto px-6 py-3\">\n <div class=\"flex justify-between items-center\">\n \n <a href=\"#\" class=\"flex items-center gap-2 group transition-transform hover:scale-105 duration-300\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/Arista-Logo.png\" alt=\"Arista Logo\" class=\"brand-logo h-14 w-auto object-contain\">\n <\/a>\n\n \n <nav class=\"hidden lg:flex items-center gap-6 xl:gap-8\">\n <a href=\"#inicio\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Inicio\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#pilares\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Servicios\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#diferenciadores\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Nosotros\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#contacto\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Contacto\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#contacto\" class=\"btn-primary px-5 py-2 rounded font-bold text-white text-xs tracking-wide uppercase shadow-lg shadow-brand-accent\/20\">\n Solicitar Cotizaci\u00f3n\n <\/a>\n <\/nav>\n\n \n <button id=\"menu-btn\" class=\"lg:hidden text-2xl text-white focus:outline-none hover:text-brand-accent transition-colors transform active:scale-95\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/button>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"lg:hidden mt-4 border-t border-white\/10 pt-4 bg-brand-dark shadow-2xl\">\n <div class=\"flex flex-col gap-4 pb-4\">\n <a href=\"#inicio\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Inicio<\/a>\n <a href=\"#pilares\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Servicios<\/a>\n <a href=\"#diferenciadores\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Nosotros<\/a>\n <a href=\"#contacto\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Contacto<\/a>\n <a href=\"#contacto\" class=\"btn-primary block text-center py-3 rounded font-bold mt-2 mx-2\" onclick=\"toggleMenu()\">Solicitar Cotizaci\u00f3n<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section id=\"inicio\" class=\"relative h-screen min-h-[650px] flex items-center justify-start overflow-hidden\">\n \n <div class=\"absolute inset-0 z-0 overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/bannerweb01-scaled.png\" \n alt=\"Seguridad Privada Operaci\u00f3n\" \n class=\"w-full h-full object-cover opacity-60 animate-kenburns origin-center\">\n <\/div>\n \n <div class=\"absolute inset-0 z-10 hero-overlay\"><\/div>\n\n \n <div class=\"absolute inset-0 z-10 opacity-30 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/stardust.png')] mix-blend-overlay\"><\/div>\n\n \n <div class=\"container mx-auto px-6 relative z-20 pt-20\">\n <div class=\"max-w-3xl reveal\">\n \n <div id=\"hero-slider\" class=\"grid grid-cols-1\" style=\"grid-template-areas: 'stack';\">\n \n \n <div class=\"slide-item active opacity-100 translate-y-0 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: auto;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Vigilancia Inteligente\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n SEGURIDAD PRIVADA<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n SIN IMPROVISACIONES\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Protegemos tu operaci\u00f3n con <strong class=\"text-white font-semibold\">prevenci\u00f3n real, control y capacidad de reacci\u00f3n.<\/strong> Integramos guardias, tecnolog\u00eda y limpieza para un entorno confiable.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Soluci\u00f3n Integral\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n 3 PILARES DE<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n PROTECCI\u00d3N TOTAL\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Unimos <strong class=\"text-white font-semibold\">Seguridad Intramuros, Tecnolog\u00eda Electr\u00f3nica y Limpieza Complementaria.<\/strong> Tres \u00e1reas que se complementan para darte un servicio integral y medible.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Estrategia a Medida\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n EXPERTOS EN<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n TU SECTOR\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Cada inmueble es distinto. Dise\u00f1amos planes espec\u00edficos analizando <strong class=\"text-white font-semibold\">riesgos, accesos y horarios cr\u00edticos<\/strong> para industrias, comercios y residenciales.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Control Operativo\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n EST\u00c1NDARES QUE<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n DAN CONFIANZA\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n No solo prometemos seguridad, la demostramos. Operamos con <strong class=\"text-white font-semibold\">rondines, bit\u00e1coras y supervisi\u00f3n 24\/7<\/strong> para garantizar el cumplimiento de cada protocolo.\n <\/p>\n <\/div>\n\n <\/div>\n \n\n <div class=\"flex flex-col sm:flex-row gap-4 mt-8\">\n <a href=\"#contacto\" class=\"btn-primary px-8 py-4 rounded font-bold text-center uppercase tracking-wide flex items-center justify-center gap-2 group z-20\">\n Solicitar Cotizaci\u00f3n <i class=\"fa-solid fa-file-invoice group-hover:rotate-12 transition-transform\"><\/i>\n <\/a>\n <a href=\"mailto:contacto@seguridadprivadaintegralarista.com\" class=\"btn-outline px-8 py-4 rounded font-bold text-center uppercase tracking-wide text-white flex items-center justify-center gap-2 group z-20\">\n Agendar Visita <i class=\"fa-solid fa-calendar-check opacity-0 -ml-4 group-hover:opacity-100 group-hover:ml-0 transition-all duration-300\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 bg-brand-dark border-b border-white\/5 relative\">\n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-12\">\n <div class=\"md:w-1\/2 reveal\">\n <h3 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-[1px] bg-brand-accent\"><\/span> Estrategia a Medida\n <\/h3>\n <h2 class=\"text-3xl font-bold text-white mb-6\">Soluciones adaptadas a tu empresa<\/h2>\n <p class=\"text-brand-muted mb-6 leading-relaxed\">\n Cada sitio es distinto. Por eso construimos una estrategia que considera tus flujos de entrada, zonas vulnerables, horarios cr\u00edticos y nivel de riesgo.\n <\/p>\n \n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Industria<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Retail<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Residencial<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Corporativo<\/span>\n <\/div>\n <\/div>\n <div class=\"md:w-1\/2 reveal delay-100 bg-brand-navy\/80 p-8 rounded-lg border-l-4 border-brand-accent shadow-2xl backdrop-blur-sm hover:shadow-brand-accent\/10 transition-shadow duration-500\">\n <h4 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-shield-halved text-brand-accent\"><\/i> Nuestro Enfoque\n <\/h4>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Organizaci\u00f3n Operativa:<\/strong> Procesos claros y definidos.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Supervisi\u00f3n:<\/strong> Control constante del personal.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Tecnolog\u00eda:<\/strong> Evidencia y respuesta inmediata.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pilares\" class=\"py-20 bg-brand-navy relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 w-96 h-96 bg-brand-secondary\/10 rounded-full blur-3xl animate-blob\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-brand-accent\/5 rounded-full blur-3xl animate-blob animation-delay-2000\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2\">Servicios Integrales<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">NUESTROS 3 PILARES<\/h3>\n <div class=\"w-24 h-1 bg-gradient-to-r from-transparent via-brand-accent to-transparent mx-auto mt-4 rounded opacity-80\"><\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-100\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-user-shield\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Seguridad Intramuros<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n Personal capacitado para control de accesos, vigilancia presencial y reacci\u00f3n ante riesgos. Incluye protocolos de emergencia.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Cotizar Guardias <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-200\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-video\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Seguridad Electr\u00f3nica<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n C\u00e1maras CCTV, alarmas, cercos electrificados y control de acceso. Tecnolog\u00eda como complemento esencial.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Cotizar Tecnolog\u00eda <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-300\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-broom\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Limpieza Complementaria<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n Orden y funcionalidad del inmueble como parte del control operativo. Limpieza de oficinas y \u00e1reas comunes.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Solicitar Limpieza <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"diferenciadores\" class=\"py-20 bg-brand-dark overflow-hidden\">\n <div class=\"container mx-auto px-6\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-20\">\n \n <div class=\"w-full lg:w-1\/2 reveal relative group\">\n <div class=\"absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-brand-accent opacity-50 transition-all duration-500 group-hover:w-32 group-hover:h-32 group-hover:opacity-100\"><\/div>\n <div class=\"absolute -bottom-4 -right-4 w-24 h-24 border-b-4 border-r-4 border-brand-secondary opacity-50 transition-all duration-500 group-hover:w-32 group-hover:h-32 group-hover:opacity-100\"><\/div>\n <div class=\"overflow-hidden rounded shadow-2xl h-[450px]\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/supervisor-scaled.png\" \n alt=\"Supervisor Arista\" \n class=\"w-full h-full object-cover brightness-75 group-hover:brightness-100 group-hover:scale-110 transition-all duration-700 ease-in-out\">\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 reveal\">\n <h2 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2\">\u00bfPor qu\u00e9 ARISTA?<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white mb-6\">LO QUE MARCA LA DIFERENCIA ES EL SISTEMA<\/h3>\n <p class=\"text-brand-muted mb-8 text-lg\">\n En un mercado con muchas opciones, no solo vendemos presencia. Ofrecemos un sistema operativo de seguridad.\n <\/p>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-clipboard-check text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Procesos Claros<\/h4>\n <p class=\"text-brand-muted text-xs\">Rondines, bit\u00e1coras, checklist y reportes verificables.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-user-tie text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Supervisi\u00f3n Continua<\/h4>\n <p class=\"text-brand-muted text-xs\">Seguimiento operativo 24\/7 para mantener el est\u00e1ndar.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-map-location-dot text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Cobertura Multiestado<\/h4>\n <p class=\"text-brand-muted text-xs\">Operaci\u00f3n coordinada con el mismo modelo en varias regiones.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-clock text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Atenci\u00f3n 24\/7<\/h4>\n <p class=\"text-brand-muted text-xs\">Porque los incidentes no tienen horario de oficina.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sectores\" class=\"py-16 bg-gradient-to-br from-brand-secondary to-brand-dark border-y border-brand-accent\/30 relative overflow-hidden group\">\n \n <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/carbon-fibre.png')] opacity-20\"><\/div>\n \n <div class=\"absolute inset-0 bg-gradient-to-r from-transparent via-white\/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10 text-center\">\n <span class=\"inline-block px-4 py-1 rounded-full bg-white\/10 text-white text-xs font-bold uppercase tracking-widest mb-4 border border-white\/20 backdrop-blur-md\">Nuestros Mercados<\/span>\n <h2 class=\"text-3xl md:text-4xl font-bold text-white mb-12 drop-shadow-md\">SECTORES QUE ATENDEMOS<\/h2>\n \n <div class=\"grid grid-cols-2 md:grid-cols-5 gap-8 justify-center\">\n \n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-industry text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Industria<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-store text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Retail<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-building text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Corporativo<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-graduation-cap text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Educaci\u00f3n<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-hospital text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Salud<\/span>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer id=\"contacto\" class=\"bg-[#0b1120] pt-20 pb-10 border-t border-brand-accent\/20 relative\">\n <div class=\"container mx-auto px-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16\">\n \n <div class=\"reveal delay-100\">\n <div class=\"mb-8\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/Arista-Logo.png\" alt=\"Arista Logo\" class=\"brand-logo h-16 w-auto object-contain mb-4\">\n <h3 class=\"text-2xl font-bold text-white mb-2\">Cotiza tu plan de seguridad<\/h3>\n <p class=\"text-brand-muted leading-relaxed\">\n En ARISTA no prometemos \"seguridad\": la demostramos con procesos, evidencia y control operativo. Te asesoramos para dise\u00f1ar la mejor estrategia seg\u00fan tu inmueble.\n <\/p>\n <p class=\"text-brand-muted leading-relaxed\">\n Av. 506 No 5 , Col. San Juan de Arag\u00f3n 1era Secci\u00f3n, C.P. 07969, Gustavo A Madero, CDMX\n <\/p> \n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"flex items-start gap-4 group\">\n <div>\n \n <\/div>\n <div>\n \n <\/div>\n <\/div>\n\n \n <\/div>\n <\/div>\n\n \n <div class=\"reveal delay-200 bg-brand-navy\/80 p-8 rounded-lg border border-white\/5 shadow-2xl backdrop-blur-sm\">\n <h4 class=\"text-white font-bold uppercase mb-6 border-b border-white\/10 pb-4 flex items-center justify-between\">\n Formulario de Contacto\n <i class=\"fa-solid fa-envelope-open-text text-brand-accent\/50\"><\/i>\n <\/h4>\n <form class=\"flex flex-col gap-4\" onsubmit=\"event.preventDefault(); alert('Gracias por contactarnos. Nos pondremos en contacto contigo lo antes posible.');\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Nombre<\/label>\n <input type=\"text\" placeholder=\"Tu nombre\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Tel\u00e9fono<\/label>\n <input type=\"tel\" placeholder=\"10 d\u00edgitos\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n <\/div>\n \n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Email<\/label>\n <input type=\"email\" placeholder=\"correo@empresa.com\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Mensaje<\/label>\n <textarea rows=\"3\" placeholder=\"Cu\u00e9ntanos: tipo de inmueble, ciudad, necesidades...\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300 resize-none\"><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"btn-primary w-full py-4 rounded text-white font-bold text-sm uppercase tracking-wide mt-2 hover:scale-[1.02] active:scale-[0.98] transition-transform\">\n Enviar Solicitud\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div class=\"border-t border-white\/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-brand-muted text-xs\">\u00a9 2026 ARISTA SPI. Todos los derechos reservados.<\/p>\n <div class=\"flex gap-4\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ Toggle Mobile Menu\n function toggleMenu() {\n const menu = document.getElementById('mobile-menu');\n const icon = document.querySelector('#menu-btn i');\n \n if (menu.classList.contains('open')) {\n menu.classList.remove('open');\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n } else {\n menu.classList.add('open');\n icon.classList.remove('fa-bars');\n icon.classList.add('fa-xmark');\n }\n }\n\n document.getElementById('menu-btn').addEventListener('click', toggleMenu);\n\n \/\/ Slider Animation Script (Simple Vanilla JS)\n const slideItems = document.querySelectorAll('#hero-slider .slide-item');\n let currentSlide = 0;\n const totalSlides = slideItems.length;\n\n function nextSlide() {\n \/\/ Hide current\n const activeSlide = slideItems[currentSlide];\n activeSlide.classList.remove('active', 'opacity-100', 'translate-y-0');\n activeSlide.classList.add('opacity-0', 'translate-y-8');\n activeSlide.style.pointerEvents = 'none';\n\n \/\/ Next index\n currentSlide = (currentSlide + 1) % totalSlides;\n\n \/\/ Show next\n const nextSlide = slideItems[currentSlide];\n nextSlide.classList.remove('opacity-0', 'translate-y-8');\n nextSlide.classList.add('active', 'opacity-100', 'translate-y-0');\n nextSlide.style.pointerEvents = 'auto';\n }\n\n \/\/ Change slide every 6 seconds\n setInterval(nextSlide, 6000);\n\n\n \/\/ Scroll Animation Observer with Stagger\n const revealElements = document.querySelectorAll('.reveal');\n\n const revealCallback = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n \/\/ Optional: Unobserve after reveal if you want it to happen only once\n \/\/ observer.unobserve(entry.target);\n }\n });\n };\n\n const revealOptions = {\n threshold: 0.1, \n rootMargin: \"0px 0px -50px 0px\"\n };\n\n const observer = new IntersectionObserver(revealCallback, revealOptions);\n\n revealElements.forEach(el => {\n observer.observe(el);\n });\n\n \/\/ Navbar Change on Scroll\n window.addEventListener('scroll', () => {\n const navbar = document.getElementById('navbar');\n if (window.scrollY > 50) {\n navbar.classList.add('shadow-lg', 'bg-brand-dark', 'py-2');\n navbar.classList.remove('py-3', 'bg-brand-dark\/95');\n } else {\n navbar.classList.remove('shadow-lg', 'bg-brand-dark', 'py-2');\n navbar.classList.add('py-3', 'bg-brand-dark\/95');\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ARISTA SPI – Seguridad Privada Integral Inicio Servicios Nosotros Contacto Solicitar Cotizaci\u00f3n Inicio Servicios Nosotros Contacto Solicitar Cotizaci\u00f3n Vigilancia Inteligente SEGURIDAD PRIVADA SIN IMPROVISACIONES Protegemos tu operaci\u00f3n con prevenci\u00f3n real, control y capacidad de reacci\u00f3n. Integramos guardias, tecnolog\u00eda y limpieza para un entorno confiable. Soluci\u00f3n Integral 3 PILARES DE PROTECCI\u00d3N TOTAL Unimos Seguridad Intramuros, Tecnolog\u00eda […]<\/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:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":52,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n ARISTA SPI - Seguridad Privada Integral<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n dark: '#0f172a', \/\/ Fondo base oscuro\n navy: '#1e293b', \/\/ Fondo secundario\n \/\/ Colores extra\u00eddos de la identidad ARISTA\n accent: '#E05D26', \/\/ Naranja principal del logo\n accentHover: '#c2410c',\n secondary: '#8A1C20', \/\/ Vino\/Burdeos del escudo\n gold: '#F4C55D', \/\/ Dorado\/Crema de los detalles\n text: '#f1f5f9',\n muted: '#94a3b8'\n }\n },\n fontFamily: {\n sans: ['Barlow', 'sans-serif'],\n },\n animation: {\n 'blob': 'blob 7s infinite',\n 'kenburns': 'kenburns 20s infinite alternate',\n 'float': 'float 6s ease-in-out infinite',\n },\n keyframes: {\n blob: {\n '0%': { transform: 'translate(0px, 0px) scale(1)' },\n '33%': { transform: 'translate(30px, -50px) scale(1.1)' },\n '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },\n '100%': { transform: 'translate(0px, 0px) scale(1)' },\n },\n kenburns: {\n '0%': { transform: 'scale(1)' },\n '100%': { transform: 'scale(1.1)' },\n },\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-10px)' },\n }\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Estilos personalizados *\/\n body {\n font-family: 'Barlow', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n overflow-x: hidden;\n \/* Fondo sutil tipo Grid tecnol\u00f3gico para modernizar *\/\n background-image: radial-gradient(#1e293b 1px, transparent 1px);\n background-size: 40px 40px;\n }\n\n \/* Ajuste de logos *\/\n .brand-logo {\n width: auto;\n max-width: 220px;\n object-fit: contain;\n display: block;\n }\n header .brand-logo {\n height: 56px;\n }\n footer .brand-logo {\n height: 64px;\n }\n\n \/* Animaciones Reveal *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.5, 0, 0, 1);\n filter: blur(5px);\n }\n\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n filter: blur(0);\n }\n\n \/* Tarjetas de Servicio - Modernizadas *\/\n .service-card {\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n border: 1px solid rgba(255, 255, 255, 0.05);\n background: rgba(15, 23, 42, 0.6); \/* Transparencia sutil *\/\n backdrop-filter: blur(10px);\n }\n\n .service-card:hover {\n transform: translateY(-10px);\n \/* Glow effect naranja *\/\n box-shadow: 0 20px 40px -10px rgba(224, 93, 38, 0.2);\n border-color: rgba(224, 93, 38, 0.5);\n background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));\n }\n\n .icon-box {\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n \n .service-card:hover .icon-box {\n transform: scale(1.15) rotate(5deg);\n background-color: rgba(224, 93, 38, 0.1); \n color: #E05D26;\n border-color: #E05D26;\n box-shadow: 0 0 15px rgba(224, 93, 38, 0.3);\n }\n\n \/* Bot\u00f3n Primario con Efecto Shine *\/\n .btn-primary {\n background: linear-gradient(90deg, #E05D26 0%, #ca481e 100%);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n \n .btn-primary::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: 0.5s;\n z-index: -1;\n }\n\n .btn-primary:hover::after {\n left: 100%;\n }\n\n .btn-primary:hover {\n background: linear-gradient(90deg, #ca481e 0%, #8A1C20 100%);\n box-shadow: 0 0 20px rgba(224, 93, 38, 0.6);\n transform: translateY(-2px);\n }\n\n \/* Bot\u00f3n Secundario *\/\n .btn-outline {\n border: 1px solid rgba(255, 255, 255, 0.3);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .btn-outline:hover {\n border-color: #E05D26;\n background-color: rgba(224, 93, 38, 0.1);\n box-shadow: 0 0 15px rgba(224, 93, 38, 0.2) inset;\n }\n\n \/* Men\u00fa M\u00f3vil *\/\n #mobile-menu {\n transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n }\n #mobile-menu.open {\n max-height: 500px;\n opacity: 1;\n }\n\n \/* Gradiente Hero *\/\n .hero-overlay {\n background: linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(138, 28, 32, 0.2) 100%);\n }\n\n \/* Sector Icons Animation *\/\n .sector-item i {\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .sector-item:hover i {\n transform: translateY(-8px) scale(1.1);\n color: #E05D26;\n text-shadow: 0 10px 20px rgba(0,0,0,0.5);\n }\n .sector-item:hover {\n transform: translateY(-5px);\n }\n\n \/* Check list items *\/\n .feature-box {\n transition: transform 0.3s ease, border-color 0.3s ease;\n }\n .feature-box:hover {\n transform: translateX(5px);\n border-color: rgba(244, 197, 93, 0.5);\n background: rgba(30, 41, 59, 0.8);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n \n <header class=\"fixed w-full z-50 transition-all duration-300 bg-brand-dark\/95 backdrop-blur-md border-b border-white\/5\" id=\"navbar\">\n <div class=\"container mx-auto px-6 py-3\">\n <div class=\"flex justify-between items-center\">\n \n <a href=\"#\" class=\"flex items-center gap-2 group transition-transform hover:scale-105 duration-300\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/Arista-Logo.png\" alt=\"Arista Logo\" class=\"brand-logo h-14 w-auto object-contain\">\n <\/a>\n\n \n <nav class=\"hidden lg:flex items-center gap-6 xl:gap-8\">\n <a href=\"#inicio\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Inicio\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#pilares\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Servicios\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#diferenciadores\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Nosotros\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#contacto\" class=\"text-sm font-medium hover:text-brand-accent transition-colors uppercase tracking-wide relative group\">\n Contacto\n <span class=\"absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full\"><\/span>\n <\/a>\n <a href=\"#contacto\" class=\"btn-primary px-5 py-2 rounded font-bold text-white text-xs tracking-wide uppercase shadow-lg shadow-brand-accent\/20\">\n Solicitar Cotizaci\u00f3n\n <\/a>\n <\/nav>\n\n \n <button id=\"menu-btn\" class=\"lg:hidden text-2xl text-white focus:outline-none hover:text-brand-accent transition-colors transform active:scale-95\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/button>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"lg:hidden mt-4 border-t border-white\/10 pt-4 bg-brand-dark shadow-2xl\">\n <div class=\"flex flex-col gap-4 pb-4\">\n <a href=\"#inicio\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Inicio<\/a>\n <a href=\"#pilares\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Servicios<\/a>\n <a href=\"#diferenciadores\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Nosotros<\/a>\n <a href=\"#contacto\" class=\"block hover:text-brand-accent pl-2 border-l-2 border-transparent hover:border-brand-accent transition-all hover:bg-white\/5 py-2\" onclick=\"toggleMenu()\">Contacto<\/a>\n <a href=\"#contacto\" class=\"btn-primary block text-center py-3 rounded font-bold mt-2 mx-2\" onclick=\"toggleMenu()\">Solicitar Cotizaci\u00f3n<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section id=\"inicio\" class=\"relative h-screen min-h-[650px] flex items-center justify-start overflow-hidden\">\n \n <div class=\"absolute inset-0 z-0 overflow-hidden\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/bannerweb01-scaled.png\" \n alt=\"Seguridad Privada Operaci\u00f3n\" \n class=\"w-full h-full object-cover opacity-60 animate-kenburns origin-center\">\n <\/div>\n \n <div class=\"absolute inset-0 z-10 hero-overlay\"><\/div>\n\n \n <div class=\"absolute inset-0 z-10 opacity-30 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/stardust.png')] mix-blend-overlay\"><\/div>\n\n \n <div class=\"container mx-auto px-6 relative z-20 pt-20\">\n <div class=\"max-w-3xl reveal\">\n \n <div id=\"hero-slider\" class=\"grid grid-cols-1\" style=\"grid-template-areas: 'stack';\">\n \n \n <div class=\"slide-item active opacity-100 translate-y-0 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: auto;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Vigilancia Inteligente\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n SEGURIDAD PRIVADA<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n SIN IMPROVISACIONES\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Protegemos tu operaci\u00f3n con <strong class=\"text-white font-semibold\">prevenci\u00f3n real, control y capacidad de reacci\u00f3n.<\/strong> Integramos guardias, tecnolog\u00eda y limpieza para un entorno confiable.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Soluci\u00f3n Integral\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n 3 PILARES DE<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n PROTECCI\u00d3N TOTAL\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Unimos <strong class=\"text-white font-semibold\">Seguridad Intramuros, Tecnolog\u00eda Electr\u00f3nica y Limpieza Complementaria.<\/strong> Tres \u00e1reas que se complementan para darte un servicio integral y medible.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Estrategia a Medida\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n EXPERTOS EN<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n TU SECTOR\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n Cada inmueble es distinto. Dise\u00f1amos planes espec\u00edficos analizando <strong class=\"text-white font-semibold\">riesgos, accesos y horarios cr\u00edticos<\/strong> para industrias, comercios y residenciales.\n <\/p>\n <\/div>\n\n \n <div class=\"slide-item opacity-0 translate-y-8 transition-all duration-1000 ease-in-out\" style=\"grid-area: stack; pointer-events: none;\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-secondary\/30 border border-brand-secondary rounded-full text-brand-gold text-xs font-bold uppercase tracking-widest mb-6 backdrop-blur-sm animate-float\">\n <span class=\"w-2 h-2 rounded-full bg-brand-accent animate-pulse\"><\/span> Control Operativo\n <\/div>\n <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-extrabold leading-tight mb-6 text-white drop-shadow-lg\">\n EST\u00c1NDARES QUE<br>\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-brand-gold relative\">\n DAN CONFIANZA\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed font-light\">\n No solo prometemos seguridad, la demostramos. Operamos con <strong class=\"text-white font-semibold\">rondines, bit\u00e1coras y supervisi\u00f3n 24\/7<\/strong> para garantizar el cumplimiento de cada protocolo.\n <\/p>\n <\/div>\n\n <\/div>\n \n\n <div class=\"flex flex-col sm:flex-row gap-4 mt-8\">\n <a href=\"#contacto\" class=\"btn-primary px-8 py-4 rounded font-bold text-center uppercase tracking-wide flex items-center justify-center gap-2 group z-20\">\n Solicitar Cotizaci\u00f3n <i class=\"fa-solid fa-file-invoice group-hover:rotate-12 transition-transform\"><\/i>\n <\/a>\n <a href=\"mailto:contacto@seguridadprivadaintegralarista.com\" class=\"btn-outline px-8 py-4 rounded font-bold text-center uppercase tracking-wide text-white flex items-center justify-center gap-2 group z-20\">\n Agendar Visita <i class=\"fa-solid fa-calendar-check opacity-0 -ml-4 group-hover:opacity-100 group-hover:ml-0 transition-all duration-300\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 bg-brand-dark border-b border-white\/5 relative\">\n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"flex flex-col md:flex-row items-center justify-between gap-12\">\n <div class=\"md:w-1\/2 reveal\">\n <h3 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-[1px] bg-brand-accent\"><\/span> Estrategia a Medida\n <\/h3>\n <h2 class=\"text-3xl font-bold text-white mb-6\">Soluciones adaptadas a tu empresa<\/h2>\n <p class=\"text-brand-muted mb-6 leading-relaxed\">\n Cada sitio es distinto. Por eso construimos una estrategia que considera tus flujos de entrada, zonas vulnerables, horarios cr\u00edticos y nivel de riesgo.\n <\/p>\n \n <div class=\"flex flex-wrap gap-3\">\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Industria<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Retail<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Residencial<\/span>\n <span class=\"px-3 py-1 bg-brand-navy rounded text-xs text-brand-gold border border-brand-secondary\/30 hover:border-brand-gold hover:bg-brand-secondary\/20 transition-all cursor-default\">Corporativo<\/span>\n <\/div>\n <\/div>\n <div class=\"md:w-1\/2 reveal delay-100 bg-brand-navy\/80 p-8 rounded-lg border-l-4 border-brand-accent shadow-2xl backdrop-blur-sm hover:shadow-brand-accent\/10 transition-shadow duration-500\">\n <h4 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-shield-halved text-brand-accent\"><\/i> Nuestro Enfoque\n <\/h4>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Organizaci\u00f3n Operativa:<\/strong> Procesos claros y definidos.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Supervisi\u00f3n:<\/strong> Control constante del personal.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3 group\">\n <i class=\"fa-solid fa-check-circle text-brand-muted group-hover:text-brand-accent mt-1 transition-colors\"><\/i>\n <span class=\"text-gray-300 text-sm\"><strong class=\"text-white\">Tecnolog\u00eda:<\/strong> Evidencia y respuesta inmediata.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pilares\" class=\"py-20 bg-brand-navy relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 w-96 h-96 bg-brand-secondary\/10 rounded-full blur-3xl animate-blob\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-brand-accent\/5 rounded-full blur-3xl animate-blob animation-delay-2000\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2\">Servicios Integrales<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">NUESTROS 3 PILARES<\/h3>\n <div class=\"w-24 h-1 bg-gradient-to-r from-transparent via-brand-accent to-transparent mx-auto mt-4 rounded opacity-80\"><\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-100\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-user-shield\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Seguridad Intramuros<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n Personal capacitado para control de accesos, vigilancia presencial y reacci\u00f3n ante riesgos. Incluye protocolos de emergencia.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Cotizar Guardias <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-200\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-video\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Seguridad Electr\u00f3nica<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n C\u00e1maras CCTV, alarmas, cercos electrificados y control de acceso. Tecnolog\u00eda como complemento esencial.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Cotizar Tecnolog\u00eda <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n\n \n <div class=\"service-card p-8 rounded-lg relative group reveal delay-300\">\n <div class=\"icon-box w-16 h-16 rounded-lg bg-brand-navy border border-brand-secondary\/50 flex items-center justify-center text-brand-accent text-3xl mb-6 shadow-lg\">\n <i class=\"fa-solid fa-broom\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 group-hover:text-brand-gold transition-colors\">Limpieza Complementaria<\/h4>\n <p class=\"text-brand-muted text-sm leading-relaxed mb-6 group-hover:text-gray-300 transition-colors\">\n Orden y funcionalidad del inmueble como parte del control operativo. Limpieza de oficinas y \u00e1reas comunes.\n <\/p>\n <a href=\"#contacto\" class=\"text-brand-accent text-sm font-bold uppercase hover:text-brand-gold transition-colors flex items-center gap-2 group-hover:gap-3\">\n Solicitar Limpieza <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"diferenciadores\" class=\"py-20 bg-brand-dark overflow-hidden\">\n <div class=\"container mx-auto px-6\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-20\">\n \n <div class=\"w-full lg:w-1\/2 reveal relative group\">\n <div class=\"absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-brand-accent opacity-50 transition-all duration-500 group-hover:w-32 group-hover:h-32 group-hover:opacity-100\"><\/div>\n <div class=\"absolute -bottom-4 -right-4 w-24 h-24 border-b-4 border-r-4 border-brand-secondary opacity-50 transition-all duration-500 group-hover:w-32 group-hover:h-32 group-hover:opacity-100\"><\/div>\n <div class=\"overflow-hidden rounded shadow-2xl h-[450px]\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/supervisor-scaled.png\" \n alt=\"Supervisor Arista\" \n class=\"w-full h-full object-cover brightness-75 group-hover:brightness-100 group-hover:scale-110 transition-all duration-700 ease-in-out\">\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 reveal\">\n <h2 class=\"text-brand-accent font-bold tracking-widest uppercase text-sm mb-2\">\u00bfPor qu\u00e9 ARISTA?<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white mb-6\">LO QUE MARCA LA DIFERENCIA ES EL SISTEMA<\/h3>\n <p class=\"text-brand-muted mb-8 text-lg\">\n En un mercado con muchas opciones, no solo vendemos presencia. Ofrecemos un sistema operativo de seguridad.\n <\/p>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-clipboard-check text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Procesos Claros<\/h4>\n <p class=\"text-brand-muted text-xs\">Rondines, bit\u00e1coras, checklist y reportes verificables.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-user-tie text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Supervisi\u00f3n Continua<\/h4>\n <p class=\"text-brand-muted text-xs\">Seguimiento operativo 24\/7 para mantener el est\u00e1ndar.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-map-location-dot text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Cobertura Multiestado<\/h4>\n <p class=\"text-brand-muted text-xs\">Operaci\u00f3n coordinada con el mismo modelo en varias regiones.<\/p>\n <\/div>\n\n \n <div class=\"feature-box flex flex-col gap-2 p-4 bg-brand-navy\/50 rounded border border-white\/5\">\n <i class=\"fa-solid fa-clock text-brand-gold text-2xl mb-2\"><\/i>\n <h4 class=\"text-white font-bold\">Atenci\u00f3n 24\/7<\/h4>\n <p class=\"text-brand-muted text-xs\">Porque los incidentes no tienen horario de oficina.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sectores\" class=\"py-16 bg-gradient-to-br from-brand-secondary to-brand-dark border-y border-brand-accent\/30 relative overflow-hidden group\">\n \n <div class=\"absolute inset-0 bg-[url('https:\/\/www.transparenttextures.com\/patterns\/carbon-fibre.png')] opacity-20\"><\/div>\n \n <div class=\"absolute inset-0 bg-gradient-to-r from-transparent via-white\/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none\"><\/div>\n \n <div class=\"container mx-auto px-6 relative z-10 text-center\">\n <span class=\"inline-block px-4 py-1 rounded-full bg-white\/10 text-white text-xs font-bold uppercase tracking-widest mb-4 border border-white\/20 backdrop-blur-md\">Nuestros Mercados<\/span>\n <h2 class=\"text-3xl md:text-4xl font-bold text-white mb-12 drop-shadow-md\">SECTORES QUE ATENDEMOS<\/h2>\n \n <div class=\"grid grid-cols-2 md:grid-cols-5 gap-8 justify-center\">\n \n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-industry text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Industria<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-store text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Retail<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-building text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Corporativo<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-graduation-cap text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Educaci\u00f3n<\/span>\n <\/div>\n\n <div class=\"sector-item flex flex-col items-center gap-4 text-white\/80 hover:text-white transition-colors duration-300 cursor-default group\/item\">\n <div class=\"w-16 h-16 rounded-full bg-black\/20 border border-white\/10 flex items-center justify-center group-hover\/item:bg-white\/10 group-hover\/item:border-brand-gold transition-all duration-300 shadow-lg\">\n <i class=\"fa-solid fa-hospital text-3xl group-hover\/item:text-brand-gold\"><\/i>\n <\/div>\n <span class=\"text-sm font-bold uppercase tracking-wide group-hover\/item:text-brand-gold transition-colors\">Salud<\/span>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer id=\"contacto\" class=\"bg-[#0b1120] pt-20 pb-10 border-t border-brand-accent\/20 relative\">\n <div class=\"container mx-auto px-6\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16\">\n \n <div class=\"reveal delay-100\">\n <div class=\"mb-8\">\n <img decoding=\"async\" src=\"https:\/\/seguridadprivadaintegralarista.com\/wp-content\/uploads\/2026\/02\/Arista-Logo.png\" alt=\"Arista Logo\" class=\"brand-logo h-16 w-auto object-contain mb-4\">\n <h3 class=\"text-2xl font-bold text-white mb-2\">Cotiza tu plan de seguridad<\/h3>\n <p class=\"text-brand-muted leading-relaxed\">\n En ARISTA no prometemos \"seguridad\": la demostramos con procesos, evidencia y control operativo. Te asesoramos para dise\u00f1ar la mejor estrategia seg\u00fan tu inmueble.\n <\/p>\n <p class=\"text-brand-muted leading-relaxed\">\n Av. 506 No 5 , Col. San Juan de Arag\u00f3n 1era Secci\u00f3n, C.P. 07969, Gustavo A Madero, CDMX\n <\/p> \n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"flex items-start gap-4 group\">\n <div>\n \n <\/div>\n <div>\n \n <\/div>\n <\/div>\n\n \n <\/div>\n <\/div>\n\n \n <div class=\"reveal delay-200 bg-brand-navy\/80 p-8 rounded-lg border border-white\/5 shadow-2xl backdrop-blur-sm\">\n <h4 class=\"text-white font-bold uppercase mb-6 border-b border-white\/10 pb-4 flex items-center justify-between\">\n Formulario de Contacto\n <i class=\"fa-solid fa-envelope-open-text text-brand-accent\/50\"><\/i>\n <\/h4>\n <form class=\"flex flex-col gap-4\" onsubmit=\"event.preventDefault(); alert('Gracias por contactarnos. Nos pondremos en contacto contigo lo antes posible.');\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Nombre<\/label>\n <input type=\"text\" placeholder=\"Tu nombre\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Tel\u00e9fono<\/label>\n <input type=\"tel\" placeholder=\"10 d\u00edgitos\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n <\/div>\n \n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Email<\/label>\n <input type=\"email\" placeholder=\"correo@empresa.com\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300\">\n <\/div>\n\n <div class=\"flex flex-col gap-1 group\">\n <label class=\"text-xs text-brand-muted uppercase font-bold group-focus-within:text-brand-accent transition-colors\">Mensaje<\/label>\n <textarea rows=\"3\" placeholder=\"Cu\u00e9ntanos: tipo de inmueble, ciudad, necesidades...\" class=\"bg-brand-dark\/50 border border-white\/10 rounded px-4 py-3 text-white text-sm focus:outline-none focus:border-brand-accent focus:bg-brand-dark transition-all duration-300 resize-none\"><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"btn-primary w-full py-4 rounded text-white font-bold text-sm uppercase tracking-wide mt-2 hover:scale-[1.02] active:scale-[0.98] transition-transform\">\n Enviar Solicitud\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div class=\"border-t border-white\/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-brand-muted text-xs\">\u00a9 2026 ARISTA SPI. Todos los derechos reservados.<\/p>\n <div class=\"flex gap-4\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ Toggle Mobile Menu\n function toggleMenu() {\n const menu = document.getElementById('mobile-menu');\n const icon = document.querySelector('#menu-btn i');\n \n if (menu.classList.contains('open')) {\n menu.classList.remove('open');\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n } else {\n menu.classList.add('open');\n icon.classList.remove('fa-bars');\n icon.classList.add('fa-xmark');\n }\n }\n\n document.getElementById('menu-btn').addEventListener('click', toggleMenu);\n\n \/\/ Slider Animation Script (Simple Vanilla JS)\n const slideItems = document.querySelectorAll('#hero-slider .slide-item');\n let currentSlide = 0;\n const totalSlides = slideItems.length;\n\n function nextSlide() {\n \/\/ Hide current\n const activeSlide = slideItems[currentSlide];\n activeSlide.classList.remove('active', 'opacity-100', 'translate-y-0');\n activeSlide.classList.add('opacity-0', 'translate-y-8');\n activeSlide.style.pointerEvents = 'none';\n\n \/\/ Next index\n currentSlide = (currentSlide + 1) % totalSlides;\n\n \/\/ Show next\n const nextSlide = slideItems[currentSlide];\n nextSlide.classList.remove('opacity-0', 'translate-y-8');\n nextSlide.classList.add('active', 'opacity-100', 'translate-y-0');\n nextSlide.style.pointerEvents = 'auto';\n }\n\n \/\/ Change slide every 6 seconds\n setInterval(nextSlide, 6000);\n\n\n \/\/ Scroll Animation Observer with Stagger\n const revealElements = document.querySelectorAll('.reveal');\n\n const revealCallback = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n \/\/ Optional: Unobserve after reveal if you want it to happen only once\n \/\/ observer.unobserve(entry.target);\n }\n });\n };\n\n const revealOptions = {\n threshold: 0.1, \n rootMargin: \"0px 0px -50px 0px\"\n };\n\n const observer = new IntersectionObserver(revealCallback, revealOptions);\n\n revealElements.forEach(el => {\n observer.observe(el);\n });\n\n \/\/ Navbar Change on Scroll\n window.addEventListener('scroll', () => {\n const navbar = document.getElementById('navbar');\n if (window.scrollY > 50) {\n navbar.classList.add('shadow-lg', 'bg-brand-dark', 'py-2');\n navbar.classList.remove('py-3', 'bg-brand-dark\/95');\n } else {\n navbar.classList.remove('shadow-lg', 'bg-brand-dark', 'py-2');\n navbar.classList.add('py-3', 'bg-brand-dark\/95');\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ARISTA SPI – Seguridad Privada Integral Inicio Servicios Nosotros Contacto Solicitar Cotizaci\u00f3n Inicio Servicios Nosotros Contacto Solicitar Cotizaci\u00f3n Vigilancia Inteligente SEGURIDAD PRIVADA SIN IMPROVISACIONES Protegemos tu operaci\u00f3n con prevenci\u00f3n real, control y capacidad de reacci\u00f3n. Integramos guardias, tecnolog\u00eda y limpieza para un entorno confiable. Soluci\u00f3n Integral 3 PILARES DE PROTECCI\u00d3N TOTAL Unimos Seguridad Intramuros, Tecnolog\u00eda […]<\/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:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":52,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/seguridadprivadaintegralarista.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}