/home/simp499cl/public_html

Name	Size	Mode	Actions
.well-known/	-	0755	rm
amc/	-	0755	rm
apex_v1/	-	0755	rm
app.simplesystems.cl/	-	0750	rm
bipmpsimplesystems.cl/	-	0750	rm
blog/	-	0755	rm
canchaprosimplesystems.cl/	-	0750	rm
cgi-bin/	-	0755	rm
collectgroupsimplesystems.cl/	-	0750	rm
css/	-	0755	rm
dondevamos/	-	0755	rm
dondevamos_public_html/	-	0750	rm
dv_public_html/	-	0750	rm
images/	-	0755	rm
js/	-	0755	rm
licitasimple/	-	0755	rm
licitasimple.simplesystems.cl/	-	0750	rm
lucy/	-	0755	rm
mrpadeltour.simplesystems.cl/	-	0750	rm
nekosushiSimplesystems.cl/	-	0750	rm
notas-prechequeo/	-	0755	rm
open/	-	0755	rm
p/	-	0755	rm
pmc/	-	0755	rm
portal-automotora.simplesystems.cl/	-	0750	rm
portal-automotoras/	-	0755	rm
prechequeo/	-	0755	rm
prechequeo_v1/	-	0755	rm
prechequeo_vxxx/	-	0755	rm
propuesta_auto/	-	0755	rm
reservaSimple/	-	0755	rm
resp_page_construcction/	-	0755	rm
servicios/	-	0755	rm
test.simplesystems.cl/	-	0750	rm
test_template/	-	0755	rm
washbe/	-	0755	rm
washbe_v2/	-	0755	rm
web_v2/	-	0755	rm
.htaccess	1262	0644	edit dl rm
.htacces_25032026	888	0644	edit dl rm
.well-known.zip	764	0644	edit dl rm
404.html	2226	0644	edit dl rm
1201222.png	10554	0644	edit dl rm
agenda_prechequeo.png	78476	0644	edit dl rm
amc.zip	20726399	0644	edit dl rm
amcapp.png	2015372	0644	edit dl rm
apex.zip	18182398	0644	edit dl rm
apple-app-site-association	178	0644	edit dl rm
Brockmann-Bold-Bqm_WZiN.otf	42308	0644	edit dl rm
Brockmann-BoldItalic-uHRyPLGQ.otf	37632	0644	edit dl rm
Brockmann-Medium-DWnaEPVI.otf	41108	0644	edit dl rm
Brockmann-MediumItalic-DSDwWLpS.otf	37368	0644	edit dl rm
Brockmann-Regular-CFBdZhjj.otf	40164	0644	edit dl rm
Brockmann-RegularItalic-BjX_eTP2.otf	36656	0644	edit dl rm
Brockmann-SemiBold-DN9dX72F.otf	42172	0644	edit dl rm
Brockmann-SemiBoldItalic-Cucq5YBT.otf	38012	0644	edit dl rm
contact.html	14134	0644	edit dl rm
contact.php	92	0644	edit dl rm
contact_03062026.html	13859	0644	edit dl rm
css2-1.css	3954	0644	edit dl rm
css2.css	7478	0644	edit dl rm
dondevamosapp.png	2559818	0644	edit dl rm
index.html	94834	0644	edit dl rm
index_10062026.html	92246	0644	edit dl rm
inspeccion_macanica.png	326381	0644	edit dl rm
licitasimple.zip	130867	0644	edit dl rm
logo.png	3440	0644	edit dl rm
lucy-master.zip	2023077	0644	edit dl rm
main-CEzTNzgH.css	371878	0644	edit dl rm
main.a894a370.css	79997	0644	edit dl rm
mefaltaunoapp.png	2654288	0644	edit dl rm
monaco-editor-BetWCQm5.css	127171	0644	edit dl rm
paddle.css	4564	0644	edit dl rm
photo-1521737711867-e3b97375f902.jpg	10531685	0644	edit dl rm
photo-1521737852567-6949f3f9f2b5.jpg	6172480	0644	edit dl rm
photo-1568952433726-3896e3881c65.jpg	2117808	0644	edit dl rm
photo-1581091226825-a6a2a5aee158.jpg	9443894	0644	edit dl rm
photo-1595675024853-0f3ec9098ac7.jpg	1203221	0644	edit dl rm
photo-1633250391894-397930e3f5f2.jpg	2783958	0644	edit dl rm
plugins.zip	467592	0644	edit dl rm
pmcapp.png	2000889	0644	edit dl rm
portalautomotoras-bimi.svg	14297	0644	edit dl rm
prechequeo_v1.zip	5566784	0644	edit dl rm
prechequeo_v2.zip	5615060	0644	edit dl rm
robots.txt.txt	76	0644	edit dl rm
send_email.php	2439	0644	edit dl rm
send_email_03062026.php	1229	0644	edit dl rm
shngv6t9_logo.png	3440	0644	edit dl rm
sitemap.xml	3242	0644	edit dl rm
tkczgbgt.php	7317	0644	edit dl rm
tr-1.txt	0	0644	edit dl rm
tr.txt	0	0644	edit dl rm
update_app.png	27035	0644	edit dl rm
wipqdmgs.php	19513	0644	edit dl rm

Edit: /home/simp499cl/public_html/index_10062026.html (92246B)

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

<title>Simple Systems | Desarrollo de Apps Móviles y Software Web en Chile</title>

<meta
    name="description"
    content="Desarrollamos apps móviles y software web a medida en Chile. Expertos en Flutter, sistemas escalables, UX/UI y mantenimiento. Cotiza tu proyecto con Simple Systems."
  />

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

<meta
    name="keywords"
    content="desarrollo de apps en Chile, desarrollo de aplicaciones móviles, Flutter Chile, desarrollo web Chile, software a medida, empresa desarrollo software, sistemas web"
  />

<meta name="theme-color" content="#000000" />

<link rel="canonical" href="https://www.simplesystems.cl/" />

<link rel="alternate" href="https://www.simplesystems.cl/" hreflang="es-cl" />
  <link rel="alternate" href="https://www.simplesystems.cl/" hreflang="es" />
  <link rel="alternate" href="https://www.simplesystems.cl/" hreflang="x-default" />

<meta property="og:type" content="website" />
  <meta property="og:locale" content="es_CL" />
  <meta property="og:title" content="Simple Systems | Desarrollo de Apps Móviles y Software Web en Chile" />
  <meta
    property="og:description"
    content="Creamos apps móviles y plataformas web a medida. Flutter, sistemas escalables, UX/UI y soporte continuo para empresas en crecimiento."
  />
  <meta property="og:url" content="https://www.simplesystems.cl/" />
  <meta property="og:site_name" content="Simple Systems" />
  <meta property="og:image" content="https://www.simplesystems.cl/logo.png" />
  <meta property="og:image:secure_url" content="https://www.simplesystems.cl/logo.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Simple Systems - Desarrollo de Apps y Software Web" />

<meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Simple Systems | Desarrollo de Apps y Software Web" />
  <meta
    name="twitter:description"
    content="Desarrollo profesional de apps móviles (Flutter) y software web escalable en Chile."
  />
  <meta name="twitter:image" content="https://www.simplesystems.cl/logo.png" />

<meta name="geo.region" content="CL-RM" />
  <meta name="geo.placename" content="Santiago" />
  <meta name="geo.position" content="-33.4489;-70.6693" />
  <meta name="ICBM" content="-33.4489, -70.6693" />

<link rel="icon" href="/images/favicon.png" sizes="any">

<link href="main.a894a370.css" rel="stylesheet" />

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": "https://www.simplesystems.cl/#website",
        "url": "https://www.simplesystems.cl/",
        "name": "Simple Systems",
        "inLanguage": "es-CL",
        "publisher": { "@id": "https://www.simplesystems.cl/#organization" }
      },
      {
        "@type": "Organization",
        "@id": "https://www.simplesystems.cl/#organization",
        "name": "Simple Systems",
        "url": "https://www.simplesystems.cl/",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.simplesystems.cl/logo.png"
        },
        "description": "Empresa de desarrollo de aplicaciones móviles y software web a medida en Chile.",
        "telephone": "+56995471336",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Santiago",
          "addressRegion": "Región Metropolitana",
          "addressCountry": "CL"
        },
        "areaServed": { "@type": "Country", "name": "Chile" },
        "sameAs": []
      },
      {
        "@type": "LocalBusiness",
        "@id": "https://www.simplesystems.cl/#localbusiness",
        "name": "Simple Systems",
        "url": "https://www.simplesystems.cl/",
        "image": "https://www.simplesystems.cl/logo.png",
        "telephone": "+56995471336",
        "priceRange": "$$",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Santiago",
          "addressRegion": "Región Metropolitana",
          "addressCountry": "CL"
        },
        "geo": {
          "@type": "GeoCoordinates",
          "latitude": -33.4489,
          "longitude": -70.6693
        },
        "parentOrganization": { "@id": "https://www.simplesystems.cl/#organization" }
      },
      {
        "@type": "Service",
        "@id": "https://www.simplesystems.cl/#service-apps",
        "name": "Desarrollo de Apps Móviles",
        "serviceType": "Mobile App Development",
        "provider": { "@id": "https://www.simplesystems.cl/#organization" },
        "areaServed": { "@type": "Country", "name": "Chile" },
        "description": "Desarrollo de aplicaciones móviles iOS y Android con Flutter, UX/UI y mantenimiento."
      },
      {
        "@type": "Service",
        "@id": "https://www.simplesystems.cl/#service-web",
        "name": "Desarrollo de Software Web",
        "serviceType": "Web Development",
        "provider": { "@id": "https://www.simplesystems.cl/#organization" },
        "areaServed": { "@type": "Country", "name": "Chile" },
        "description": "Plataformas web a medida, APIs, paneles de administración y sistemas escalables."
      }
    ]
  }
  </script>
</head>
    <body>

<div id="close" class="sr-only" aria-hidden="true"></div>
        <div id="mobile-menu" class="mobile-menu md:hidden" aria-label="Menú móvil">
            <div class="mobile-menu-inner">
                <a href="#hero" class="mobile-menu-link">Inicio</a>
                <a href="#services" class="mobile-menu-link">Servicios</a>
                <a href="#about" class="mobile-menu-link">Nosotros</a>
                <a href="#portfolio" class="mobile-menu-link">Portafolio</a>
                <a href="contact.html" class="mobile-menu-link">Contacto</a>
            </div>
        </div>

</div>
                        </div>
                    </header>
                    <section id="hero" class="relative min-h-screen flex items-center pt-20 overflow-hidden">
                        <div
                            class="absolute inset-0 bg-gradient-to-br from-slate-50 via-cyan-50 to-slate-100 -z-10"
                        ></div>
                        <div
                            class="absolute top-20 left-10 w-72 h-72 bg-cyan-400/10 rounded-full blur-3xl animate-pulse"
                        ></div>
                        <div
                            class="absolute bottom-20 right-10 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl animate-pulse"
                            style="animation-delay: 1s"
                        ></div>
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10">
                            <div class="grid lg:grid-cols-2 gap-12 items-center">
                                <div class="space-y-8 animate-in fade-in slide-in-from-left duration-700">
                                    <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="lucide lucide-zap w-4 h-4 text-cyan-600 mr-2"
                                            aria-hidden="true"
                                        >
                                            <path
                                                d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
                                            ></path></svg>
                                            <span class="text-cyan-700 font-semibold text-sm">Innovación Tecnológica</span>
                                    </div>
                                    <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-slate-900 leading-tight">
                                        Una compañía de desarrollo de
                                        <span class="text-cyan-600">aplicaciones móviles</span> a tu alcance
                                    </h1>
                                    <p class="text-xl text-slate-600 leading-relaxed">
                                        Creemos que todas tus ideas se pueden desarrollar. Trabajemos en conjunto para
                                        concretar tus necesidades y transformar tu visión en realidad digital.
                                    </p>
                                    <div class="flex flex-col sm:flex-row gap-4">
                                       <a href="#services"
                                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow-sm h-9 border-2 border-slate-300 hover:border-cyan-600 hover:bg-cyan-50 text-slate-700 hover:text-cyan-700 px-8 py-6 text-lg rounded-lg transition-all duration-300"
                                        >
                                            Ver servicios
                                    </a>
                                    </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-8 border-t border-slate-200">    <div>
        <div class="text-3xl font-bold text-cyan-600">Discovery</div>
        <div class="text-slate-600 text-sm mt-1">
            Análisis profundo antes de ejecutar
        </div>
    </div>
    <div>
        <div class="text-3xl font-bold text-cyan-600">Lean</div>
        <div class="text-slate-600 text-sm mt-1">
            Desarrollo eficiente y escalable
        </div>
    </div>
    <div>
        <div class="text-3xl font-bold text-cyan-600">Agile</div>
        <div class="text-slate-600 text-sm mt-1">
            Entregas iterativas y medibles
        </div>
    </div>
</div>

</div>
                                <div class="relative animate-in fade-in slide-in-from-right duration-700">
                                    <div class="relative z-10">
                                        <img
                                            alt="Mobile App Development"
                                            class="rounded-2xl shadow-2xl w-full h-auto object-cover"
                                            src="photo-1633250391894-397930e3f5f2.jpg"
                                        />
                                    </div>
                                   
                                 
                                </div>
                            </div>
                        </div>
                    </section>
                    <section id="services" class="py-24 bg-white">
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div
                                class="text-center mb-16 space-y-4 animate-in fade-in slide-in-from-bottom duration-700"
                            >
                                <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
                                    <span class="text-cyan-700 font-semibold text-sm">NUESTROS SERVICIOS</span>
                                </div>
                                <h2 class="text-4xl md:text-5xl font-bold text-slate-900">
                                    Soluciones tecnológicas <span class="text-cyan-600">completas</span>
                                </h2>
                                <p class="text-xl text-slate-600 max-w-3xl mx-auto">
                                    Ofrecemos un amplio rango de servicios de desarrollo para llevar tu proyecto desde
                                    la idea hasta la realidad
                                </p>
                            </div>
                            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                                <div
                                    class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom"
                                    style="animation-delay: 0ms"
                                >
                                    <div class="p-8">
                                        <div class="mb-6">
                                            <div
                                                class="inline-flex p-4 bg-cyan-50 rounded-xl group-hover:bg-cyan-600 transition-colors duration-300"
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="24"
                                                    height="24"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="lucide lucide-smartphone w-8 h-8 text-cyan-600 group-hover:text-white transition-colors duration-300"
                                                    aria-hidden="true"
                                                >
                                                    <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
                                                    <path d="M12 18h.01"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <h3
                                            class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300"
                                        >
                                            Desarrollo de Apps Móviles
                                        </h3>
                                        <p class="text-slate-600 mb-6 leading-relaxed">
                                            Aplicaciones nativas e híbridas para iOS y Android con experiencias de
                                            usuario excepcionales.
                                        </p>
                                        <div class="space-y-2">
                                            <div class="flex items-center text-sm text-slate-600">
    <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>

<a href="/blog/desarrollo-apps-android-chile.html"
       class="hover:text-cyan-600 transition-colors duration-200">
         Android
    </a>
</div>
                                          
                                            <div class="flex items-center text-sm text-slate-600">
    <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
    <a href="/blog/desarrollo-flutter-chile.html"
       class="hover:text-cyan-600 transition-colors duration-200">
        Flutter
    </a>
</div>

<div class="flex items-center text-sm text-slate-600">
    <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
    <a href="/blog/ui-ux-design-chile.html"
       class="hover:text-cyan-600 transition-colors duration-200">
        UI/UX Design
    </a>
</div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom"
                                    style="animation-delay: 100ms"
                                >
                                    <div class="p-8">
                                        <div class="mb-6">
                                            <div
                                                class="inline-flex p-4 bg-cyan-50 rounded-xl group-hover:bg-cyan-600 transition-colors duration-300"
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="24"
                                                    height="24"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="lucide lucide-globe w-8 h-8 text-cyan-600 group-hover:text-white transition-colors duration-300"
                                                    aria-hidden="true"
                                                >
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                                                    <path d="M2 12h20"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <h3
                                            class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300"
                                        >
                                            Desarrollo Web
                                        </h3>
                                        <p class="text-slate-600 mb-6 leading-relaxed">
                                            Sitios web y aplicaciones web modernas, responsivas y optimizadas para todos
                                            los dispositivos.
                                        </p>
                                        <div class="space-y-2">
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Vue &amp; Nuxt
                                            </div>
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Responsive Design
                                            </div>
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                SEO Optimizado
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                              
                              
                                <div
                                    class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom"
                                    style="animation-delay: 400ms"
                                >
                                    <div class="p-8">
                                        <div class="mb-6">
                                            <div
                                                class="inline-flex p-4 bg-cyan-50 rounded-xl group-hover:bg-cyan-600 transition-colors duration-300"
                                            >
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="24"
                                                    height="24"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="lucide lucide-shield w-8 h-8 text-cyan-600 group-hover:text-white transition-colors duration-300"
                                                    aria-hidden="true"
                                                >
                                                    <path
                                                        d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                                                    ></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <h3
                                            class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300"
                                        >
                                            Consultoría IT
                                        </h3>
                                        <p class="text-slate-600 mb-6 leading-relaxed">
                                            Asesoría tecnológica estratégica para transformar digitalmente tu negocio.
                                        </p>
                                        <div class="space-y-2">
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Análisis Técnico
                                            </div>
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Arquitectura
                                            </div>
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Mejores Prácticas
                                            </div>
                                            <div class="flex items-center text-sm text-slate-600">
                                                <div class="w-1.5 h-1.5 bg-cyan-600 rounded-full mr-2"></div>
                                                Auditoría de Código
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              
                            </div>
                        </div>
                    </section>
                    <section id="about" class="py-24 bg-slate-50">
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div class="grid lg:grid-cols-2 gap-16 items-center">
                                <div class="relative animate-in fade-in slide-in-from-left duration-700">
                                    <div class="grid grid-cols-2 gap-4">
                                        <img
                                            alt="Team collaboration"
                                            class="rounded-xl shadow-lg w-full h-64 object-cover"
                                            src="photo-1521737852567-6949f3f9f2b5.jpg"
                                        /><img
                                            alt="Developers working"
                                            class="rounded-xl shadow-lg w-full h-64 object-cover mt-8"
                                            src="photo-1521737711867-e3b97375f902.jpg"
                                        />
                                    </div>
                                    <div
                                        class="absolute -bottom-6 -right-6 bg-cyan-600 text-white p-8 rounded-xl shadow-2xl"
                                    >
                                        <div class="text-4xl font-bold">15+</div>
                                        <div class="text-sm opacity-90">Años de Experiencia</div>
                                    </div>
                                </div>
                                <div class="space-y-8 animate-in fade-in slide-in-from-right duration-700">
                                    <div class="space-y-4">
                                        <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
                                            <span class="text-cyan-700 font-semibold text-sm">SOBRE NOSOTROS</span>
                                        </div>
                                        <h2 class="text-4xl md:text-5xl font-bold text-slate-900">
                                            Transformamos ideas en
                                            <span class="text-cyan-600">soluciones digitales</span>
                                        </h2>
                                        <p class="text-lg text-slate-600 leading-relaxed">
                                            En Simplesystems, somos un equipo apasionado de desarrolladores, diseñadores
                                            y estrategas digitales comprometidos con convertir tus ideas en aplicaciones
                                            y sistemas innovadores.
                                        </p>
                                        <p class="text-lg text-slate-600 leading-relaxed">
                                            Creemos firmemente que todas las ideas pueden desarrollarse, sin importar su
                                            complejidad. Trabajamos en estrecha colaboración contigo para entender tus
                                            necesidades y entregar soluciones que superen tus expectativas.
                                        </p>
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-6 pt-4">
                                        <div
                                            class="rounded-xl border bg-card text-card-foreground shadow border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"
                                        >
                                            <div class="p-6">
                                                <div class="inline-flex p-3 bg-cyan-50 rounded-lg mb-4">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="24"
                                                        height="24"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                        class="lucide lucide-target w-6 h-6 text-cyan-600"
                                                        aria-hidden="true"
                                                    >
                                                        <circle cx="12" cy="12" r="10"></circle>
                                                        <circle cx="12" cy="12" r="6"></circle>
                                                        <circle cx="12" cy="12" r="2"></circle>
                                                    </svg>
                                                </div>
                                                <h3 class="text-lg font-bold text-slate-900 mb-2">
                                                    Enfocados en Resultados
                                                </h3>
                                                <p class="text-sm text-slate-600 leading-relaxed">
                                                    Nos comprometemos a entregar soluciones que generen valor real para
                                                    tu negocio.
                                                </p>
                                            </div>
                                        </div>
                                        <div
                                            class="rounded-xl border bg-card text-card-foreground shadow border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"
                                        >
                                            <div class="p-6">
                                                <div class="inline-flex p-3 bg-cyan-50 rounded-lg mb-4">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="24"
                                                        height="24"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                        class="lucide lucide-users w-6 h-6 text-cyan-600"
                                                        aria-hidden="true"
                                                    >
                                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                                        <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                                                        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                                        <circle cx="9" cy="7" r="4"></circle>
                                                    </svg>
                                                </div>
                                                <h3 class="text-lg font-bold text-slate-900 mb-2">Equipo Experto</h3>
                                                <p class="text-sm text-slate-600 leading-relaxed">
                                                    Contamos con desarrolladores altamente calificados y apasionados por
                                                    la tecnología.
                                                </p>
                                            </div>
                                        </div>
                                        <div
                                            class="rounded-xl border bg-card text-card-foreground shadow border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"
                                        >
                                            <div class="p-6">
                                                <div class="inline-flex p-3 bg-cyan-50 rounded-lg mb-4">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="24"
                                                        height="24"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                        class="lucide lucide-lightbulb w-6 h-6 text-cyan-600"
                                                        aria-hidden="true"
                                                    >
                                                        <path
                                                            d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
                                                        ></path>
                                                        <path d="M9 18h6"></path>
                                                        <path d="M10 22h4"></path>
                                                    </svg>
                                                </div>
                                                <h3 class="text-lg font-bold text-slate-900 mb-2">
                                                    Innovación Constante
                                                </h3>
                                                <p class="text-sm text-slate-600 leading-relaxed">
                                                    Utilizamos las últimas tecnologías y mejores prácticas del mercado.
                                                </p>
                                            </div>
                                        </div>
                                        <div
                                            class="rounded-xl border bg-card text-card-foreground shadow border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"
                                        >
                                            <div class="p-6">
                                                <div class="inline-flex p-3 bg-cyan-50 rounded-lg mb-4">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="24"
                                                        height="24"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                        class="lucide lucide-award w-6 h-6 text-cyan-600"
                                                        aria-hidden="true"
                                                    >
                                                        <path
                                                            d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"
                                                        ></path>
                                                        <circle cx="12" cy="8" r="6"></circle>
                                                    </svg>
                                                </div>
                                                <h3 class="text-lg font-bold text-slate-900 mb-2">
                                                    Calidad Garantizada
                                                </h3>
                                                <p class="text-sm text-slate-600 leading-relaxed">
                                                    Procesos rigurosos de testing y QA para asegurar la excelencia en
                                                    cada entrega.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                   <section id="portfolio" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center mb-16 space-y-4">
      <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
        <span class="text-cyan-700 font-semibold text-sm">PORTAFOLIO</span>
      </div>
      <h2 class="text-4xl md:text-5xl font-bold text-slate-900">
        Proyectos que nos <span class="text-cyan-600">enorgullecen</span>
      </h2>
      <p class="text-xl text-slate-600 max-w-3xl mx-auto">
        Explora algunos de nuestros proyectos más destacados.
      </p>
    </div>

<style>
      #pf-all, #pf-apps, #pf-web { position:absolute; left:-9999px; }

#pf-all:checked ~ .pf-controls label[for="pf-all"],
      #pf-apps:checked ~ .pf-controls label[for="pf-apps"],
      #pf-web:checked ~ .pf-controls label[for="pf-web"]{
        background: rgb(8 145 178);
        color: #fff;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transform: scale(1.05);
      }

#pf-apps:checked ~ .pf-grid .is-web { display:none; }
      #pf-web:checked  ~ .pf-grid .is-app { display:none; }
    </style>

<input type="radio" name="pf" id="pf-all" checked>
    <input type="radio" name="pf" id="pf-apps">
    <input type="radio" name="pf" id="pf-web">

<div class="pf-controls flex flex-wrap justify-center gap-3 mb-12">
      <label for="pf-all" class="px-6 py-2.5 rounded-full font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 cursor-pointer transition-all duration-300">
        Todos los Proyectos
      </label>
      <label for="pf-apps" class="px-6 py-2.5 rounded-full font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 cursor-pointer transition-all duration-300">
        Apps Móviles
      </label>
      <label for="pf-web" class="px-6 py-2.5 rounded-full font-medium bg-slate-100 text-slate-600 hover:bg-slate-200 cursor-pointer transition-all duration-300">
        Desarrollo Web
      </label>
    </div>

<div class="pf-grid grid md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="is-web rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="agenda_prechequeo.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="Agenda Online Prechequeo">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                Agenda Online – Prechequeo.cl
            </h3>
            <p class="text-slate-600 mb-4">
                Plataforma web para agendamiento de inspecciones automotrices con integración de pagos y notificaciones automáticas.
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Vue 3
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    WebpayPlus transbank
                </span>
            </div>
        </div>
    </div>

<div class="is-web rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="inspeccion_macanica.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="Sistema Informes Mecánicos">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                Sistema Web Informes Mecánicos
            </h3>
            <p class="text-slate-600 mb-4">
                Plataforma digital para generación y gestión de informes técnicos de inspección pre compra.
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Vue 3
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Cloud Functions
                </span>
            </div>
        </div>
    </div>

<div class="is-app rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="mefaltaunoapp.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="Me Falta Uno">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><rect width="14" height="20" x="5" y="2" rx="2"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                Me Falta Uno
            </h3>
            <p class="text-slate-600 mb-4">
                App para completar parejas o equipos en distintos deportes de forma rápida y colaborativa.
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Flutter
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Cloud Functions
                </span>
            </div>
        </div>
    </div>

<div class="is-app rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="dondevamosapp.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="dondeVamos">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><rect width="14" height="20" x="5" y="2" rx="2"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                dondeVamos
            </h3>
            <p class="text-slate-600 mb-4">
                Aplicación móvil para descubrir bares y restaurantes con promociones y recomendaciones.
            </p>
             <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Flutter
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Cloud Functions
                </span>
            </div>
        </div>
    </div>

<div class="is-app rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="pmcapp.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="Power Mustang Club">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><rect width="14" height="20" x="5" y="2" rx="2"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                Power Mustang Club
            </h3>
            <p class="text-slate-600 mb-4">
                App exclusiva para comunidad automotriz con eventos, membresías y comunicación interna.
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Flutter
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Cloud Functions
                </span>
            </div>
        </div>
    </div>

<div class="is-app rounded-xl border shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="relative overflow-hidden">
            <img src="amcapp.png" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500" alt="American Mustang Club">
            <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2"
                    viewBox="0 0 24 24"><rect width="14" height="20" x="5" y="2" rx="2"/></svg>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-xl font-bold text-slate-900 mb-2 group-hover:text-cyan-600 transition-colors">
                American Mustang Club
            </h3>
            <p class="text-slate-600 mb-4">
                Plataforma móvil para gestión de club automotriz con eventos, noticias y comunidad.
            </p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Flutter
                </span>
                <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Firebase
                </span>
                 <span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition-colors">
                    Cloud Functions
                </span>
            </div>
        </div>
    </div>

</div>
  </div>
</section>

<section id="contact" class="py-24 bg-white">
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 space-y-4 animate-in fade-in slide-in-from-bottom duration-700">
      <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
        <span class="text-cyan-700 font-semibold text-sm">CONTACTO</span>
      </div>
      <h2 class="text-4xl md:text-5xl font-bold text-slate-900">
        ¿Listo para <span class="text-cyan-600">comenzar tu proyecto</span>?
      </h2>
      <p class="text-xl text-slate-600 max-w-3xl mx-auto">
        Contáctanos hoy y comencemos a trabajar juntos para transformar tu idea en realidad
      </p>
    </div>
  </div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <div class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="inline-flex p-3 bg-cyan-50 rounded-lg group-hover:bg-cyan-600 transition-colors duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-mail w-6 h-6 text-cyan-600 group-hover:text-white transition-colors duration-300"
                aria-hidden="true">
                <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
              </svg>
            </div>
            <div>
              <h3 class="font-bold text-slate-900 mb-1">Email</h3>
              <a href="mailto:contacto@simplesystems.cl" class="text-slate-600 hover:text-cyan-600 transition-colors duration-200">
                contacto@simplesystems.cl
              </a>
            </div>
          </div>
        </div>
      </div>

<div class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="inline-flex p-3 bg-cyan-50 rounded-lg group-hover:bg-cyan-600 transition-colors duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-phone w-6 h-6 text-cyan-600 group-hover:text-white transition-colors duration-300"
                aria-hidden="true">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
            </div>
            <div>
              <h3 class="font-bold text-slate-900 mb-1">Teléfono</h3>
              <a href="tel:+56995471336" class="text-slate-600 hover:text-cyan-600 transition-colors duration-200">
                +56 9 95471336
              </a>
            </div>
          </div>
        </div>
      </div>

<div class="rounded-xl border bg-card text-card-foreground shadow group hover:shadow-xl transition-all duration-300 hover:scale-105 border-slate-200 hover:border-cyan-300">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="inline-flex p-3 bg-cyan-50 rounded-lg group-hover:bg-cyan-600 transition-colors duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-map-pin w-6 h-6 text-cyan-600 group-hover:text-white transition-colors duration-300"
                aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
            </div>
            <div>
              <h3 class="font-bold text-slate-900 mb-1">Ubicación</h3>
              <span class="text-slate-600">Santiago, Chile</span>
            </div>
          </div>
        </div>
      </div>

</div>
  
</div>

<div class="mt-14 text-center">
                                <a href="contact.html"
                                   class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow h-9 bg-cyan-600 hover:bg-cyan-700 text-white px-8 py-6 text-lg rounded-lg transition-all duration-300 hover:shadow-xl hover:scale-105">
                                    Formulario de Contacto
                                </a>
                            </div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16">

<div class="bg-gradient-to-br from-cyan-600 to-blue-600 text-white text-center rounded-2xl shadow-xl py-24 md:py-28 px-4 md:px-8">
    
    <div class="max-w-7xl mx-auto">
      
      <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">
        ¿Necesitas una cotización para tu próximo proyecto?
      </h3>

<p class="text-cyan-100 text-lg leading-relaxed mb-8">
        Conversemos sobre tu idea y recibe una propuesta estratégica, clara y personalizada en menos de 24 horas.
      </p>

<div class="flex justify-center items-center gap-3 text-cyan-100">
        <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
        <span class="text-base font-medium">Disponible ahora</span>
      </div>

</div>

</div>
</div>

</section>

<section id="blog" class="py-24 bg-slate-50">
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div class="text-center mb-16 space-y-4 animate-in fade-in slide-in-from-bottom duration-700">
                                <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full">
                                    <span class="text-cyan-700 font-semibold text-sm">BLOG</span>
                                </div>
                                <h2 class="text-4xl md:text-5xl font-bold text-slate-900">
                                    Artículos sobre <span class="text-cyan-600">apps móviles</span> y tecnología
                                </h2>
                                <p class="text-xl text-slate-600 max-w-3xl mx-auto">
                                    Ideas, guías y buenas prácticas para planificar, construir y lanzar tu aplicación.
                                </p>
                            </div>

<a href="blog/costo-desarrollar-app-chile.html"
                                   class="rounded-xl border bg-card text-card-foreground shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom block"
                                   style="animation-delay: 0ms">
                                    <div class="p-8">
                                        <div class="flex items-center justify-between mb-4">
                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-cyan-50 text-cyan-700 border border-cyan-100">
                                                Costos
                                            </span>
                                            <span class="text-sm text-slate-500">6 min</span>
                                        </div>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            ¿Cuánto cuesta desarrollar una app en Chile en 2026?
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Factores clave, rangos de inversión por tipo de app y cómo estimar tu MVP sin sorpresas.
                                        </p>

<div class="flex items-center gap-2 text-cyan-700 font-semibold">
                                            <span>Leer artículo</span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-arrow-right w-4 h-4 group-hover:translate-x-1 transition-transform duration-200"
                                                aria-hidden="true">
                                                <path d="M5 12h14"></path>
                                                <path d="m12 5 7 7-7 7"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </a>

<a href="blog/flutter-vs-react-native.html"
                                   class="rounded-xl border bg-card text-card-foreground shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom block"
                                   style="animation-delay: 100ms">
                                    <div class="p-8">
                                        <div class="flex items-center justify-between mb-4">
                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-cyan-50 text-cyan-700 border border-cyan-100">
                                                Tecnología
                                            </span>
                                            <span class="text-sm text-slate-500">7 min</span>
                                        </div>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            Flutter vs React Native: ¿qué conviene para tu app?
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Comparación práctica: performance, time-to-market, ecosistema y cuándo elegir cada uno.
                                        </p>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            Checklist para definir un MVP de app móvil
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Una guía para priorizar funcionalidades, validar rápido y reducir riesgo de desarrollo.
                                        </p>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            UX móvil: 10 errores comunes que cuestan conversiones
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Patrones de diseño, accesibilidad y microinteracciones para mejorar retención y uso.
                                        </p>

<a href="blog/firebase-arquitectura-app.html"
                                   class="rounded-xl border bg-card text-card-foreground shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom block"
                                   style="animation-delay: 400ms">
                                    <div class="p-8">
                                        <div class="flex items-center justify-between mb-4">
                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-cyan-50 text-cyan-700 border border-cyan-100">
                                                Firebase
                                            </span>
                                            <span class="text-sm text-slate-500">8 min</span>
                                        </div>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            Arquitectura con Firebase para apps: lo que sí escala
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Firestore, Auth, Functions y buenas prácticas para seguridad, costos y performance.
                                        </p>

<a href="blog/publicar-app-store-play-store.html"
                                   class="rounded-xl border bg-card text-card-foreground shadow group overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-105 cursor-pointer border-slate-200 hover:border-cyan-300 animate-in fade-in slide-in-from-bottom block"
                                   style="animation-delay: 500ms">
                                    <div class="p-8">
                                        <div class="flex items-center justify-between mb-4">
                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-cyan-50 text-cyan-700 border border-cyan-100">
                                                Lanzamiento
                                            </span>
                                            <span class="text-sm text-slate-500">7 min</span>
                                        </div>

<h3 class="text-xl font-bold text-slate-900 mb-3 group-hover:text-cyan-600 transition-colors duration-300">
                                            Publicar en App Store y Google Play: pasos y requisitos
                                        </h3>

<p class="text-slate-600 leading-relaxed mb-6">
                                            Checklist de publicación: cuentas, builds, privacidad, screenshots y revisión.
                                        </p>

</div>

<div class="mt-14 text-center">
                                <a href="#contact"
                                   class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow h-9 bg-cyan-600 hover:bg-cyan-700 text-white px-8 py-6 text-lg rounded-lg transition-all duration-300 hover:shadow-xl hover:scale-105">
                                    Hablemos de tu app
                                </a>
                            </div>
                        </div>
                    </section>

<div class="lg:col-span-2 space-y-6">
        <p class="text-2xl font-bold">Simple Systems</p>

<p class="text-slate-400 leading-relaxed">
          Transformamos ideas en soluciones digitales innovadoras.
          Tu socio tecnológico de confianza para proyectos de desarrollo de software.
        </p>

<div class="space-y-3">
          <div class="flex items-center gap-3 text-slate-400 hover:text-cyan-400 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2"
              viewBox="0 0 24 24">
              <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
              <rect x="2" y="4" width="20" height="16" rx="2"></rect>
            </svg>
            <a href="mailto:contacto@simplesystems.com">contacto@simplesystems.com</a>
          </div>

<div class="flex items-center gap-3 text-slate-400 hover:text-cyan-400 transition-colors duration-200">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round"
       viewBox="0 0 24 24">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 
             19.79 19.79 0 0 1-8.63-3.07 
             19.5 19.5 0 0 1-6-6 
             19.79 19.79 0 0 1-3.07-8.67 
             A2 2 0 0 1 4.11 2h3 
             a2 2 0 0 1 2 1.72 
             c.12.81.37 1.6.72 2.34 
             a2 2 0 0 1-.45 2.11L8.09 9.91 
             a16 16 0 0 0 6 6l1.74-1.74 
             a2 2 0 0 1 2.11-.45 
             c.74.35 1.53.6 2.34.72 
             A2 2 0 0 1 22 16.92z"/>
  </svg>
  <a href="tel:+56995471336">+56 9 9547 1336</a>
</div>          
<div class="flex items-center gap-3 text-slate-400 hover:text-cyan-400 transition-colors duration-200">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round"
       viewBox="0 0 24 24">
    <path d="M21 10c0 7-9 13-9 13S3 17 3 10
             a9 9 0 0 1 18 0z"/>
    <circle cx="12" cy="10" r="3"/>
  </svg>
  <span>Santiago, Chile</span>
</div>
        </div>
      </div>

<div>
        <h3 class="font-bold text-lg mb-4">Empresa</h3>
        <ul class="space-y-3">
          <li>
            <a href="#about" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Sobre Nosotros
            </a>
          </li>
          <li>
            <a href="#services" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Servicios
            </a>
          </li>
          <li>
            <a href="#portfolio" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Portafolio
            </a>
          </li>
          <li>
            <a href="contact.html" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Contacto
            </a>
          </li>
        </ul>
      </div>

<div>
        <h3 class="font-bold text-lg mb-4">Servicios</h3>
        <ul class="space-y-3">
          <li>
            <a href="#services" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Desarrollo Móvil
            </a>
          </li>
          <li>
            <a href="#services" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Desarrollo Web
            </a>
          </li>
          <li>
            <a href="#services" class="text-slate-400 hover:text-cyan-400 transition-colors duration-200">
              Consultoría IT
            </a>
          </li>
        </ul>
      </div>

</div>

<div class="border-t border-slate-800 pt-8 pb-4">
      <div class="flex justify-center md:justify-between items-center">
        <div class="text-slate-400 text-sm text-center md:text-right">
          <p>© 2026 Simple Systems. Todos los derechos reservados.</p>
        </div>
      </div>
    </div>

</div>
</footer>

</div>
                <section
                    aria-label="Notifications alt+T"
                    tabindex="-1"
                    aria-live="polite"
                    aria-relevant="additions text"
                    aria-atomic="false"
                ></section>
            </div>
        </div>

// --- Styles (tipo joinchat) ---
  const css = `
    .jc-wrap{position:fixed; right:${POS.right}px; bottom:${POS.bottom}px; z-index:9999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    .jc-btn{width:64px;height:64px;border-radius:9999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
      box-shadow:0 20px 25px -5px rgba(0,0,0,.2),0 8px 10px -6px rgba(0,0,0,.2);
      border:none; cursor:pointer; transition:transform .2s ease, background .2s ease}
    .jc-btn:hover{transform:scale(1.08); background:#1fb957}
    .jc-badge{position:absolute; right:6px; top:6px; width:12px; height:12px; border-radius:9999px; background:#22c55e; box-shadow:0 0 0 3px rgba(255,255,255,.9)}
    .jc-pop{position:absolute; right:76px; bottom:6px; width:260px; background:#fff; color:#0f172a; border:1px solid rgba(226,232,240,1);
      border-radius:14px; box-shadow:0 15px 25px rgba(0,0,0,.12);
      padding:12px 12px 10px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease}
    .jc-wrap.jc-open .jc-pop{opacity:1; transform:translateY(0); pointer-events:auto}
    .jc-title{font-weight:700; font-size:14px; margin:0 0 4px}
    .jc-text{font-size:13px; margin:0 0 10px; color:#475569; line-height:1.35}
    .jc-actions{display:flex; gap:8px}
    .jc-link{flex:1; background:#25D366; color:#fff; text-decoration:none; font-weight:700; font-size:13px; padding:10px 12px; border-radius:10px; text-align:center;
      transition:filter .2s ease}
    .jc-link:hover{filter:brightness(.95)}
    .jc-close{width:38px; background:#f1f5f9; border:none; border-radius:10px; cursor:pointer; transition:background .2s ease}
    .jc-close:hover{background:#e2e8f0}
    .jc-tip{position:absolute; right:64px; bottom:22px; width:12px; height:12px; background:#fff; border-right:1px solid rgba(226,232,240,1);
      border-bottom:1px solid rgba(226,232,240,1); transform:rotate(-45deg); opacity:0; transition:opacity .2s ease}
    .jc-wrap.jc-open .jc-tip{opacity:1}
    @media (max-width: 480px){
      .jc-pop{right:0; bottom:74px; width:min(92vw,320px)}
      .jc-tip{display:none}
    }
  `;
  const style = document.createElement("style");
  style.textContent = css;
  document.head.appendChild(style);

// --- Build DOM ---
  const waUrl = `https://wa.me/${PHONE}?text=${encodeURIComponent(MESSAGE)}`;

const wrap = document.createElement("div");
  wrap.className = "jc-wrap";
  wrap.setAttribute("aria-label", "WhatsApp chat");

wrap.innerHTML = `
    <div class="jc-pop" role="dialog" aria-live="polite">
      <p class="jc-title">¿Hablamos por WhatsApp?</p>
      <p class="jc-text">Cuéntanos qué necesitas y te respondemos lo antes posible.</p>
      <div class="jc-actions">
        <a class="jc-link" href="${waUrl}" target="_blank" rel="noopener">Abrir WhatsApp</a>
        <button class="jc-close" type="button" aria-label="Cerrar">✕</button>
      </div>
    </div>
    <div class="jc-tip"></div>
    <button class="jc-btn" type="button" aria-label="Abrir WhatsApp">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="30" height="30" aria-hidden="true">
        <path d="M19.11 17.07c-.29-.14-1.72-.85-1.99-.95-.27-.1-.47-.14-.66.14-.19.29-.76.95-.93 1.14-.17.19-.34.21-.63.07-.29-.14-1.22-.45-2.32-1.43-.86-.76-1.44-1.7-1.61-1.99-.17-.29-.02-.45.13-.59.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.07-.14-.66-1.6-.91-2.2-.24-.58-.49-.5-.66-.51l-.56-.01c-.19 0-.51.07-.78.36-.27.29-1.02.99-1.02 2.41s1.05 2.79 1.2 2.99c.14.19 2.07 3.16 5.02 4.43.7.3 1.24.48 1.66.61.7.22 1.33.19 1.83.12.56-.08 1.72-.7 1.96-1.38.24-.68.24-1.26.17-1.38-.07-.12-.27-.19-.56-.34z"/>
        <path d="M26.66 5.34C23.79 2.47 19.97.89 15.99.89 7.77.89 1.08 7.58 1.08 15.8c0 2.63.69 5.2 2 7.47L.95 31.11l8.02-2.1a14.8 14.8 0 0 0 7.02 1.79h.01c8.22 0 14.91-6.69 14.91-14.91 0-3.98-1.55-7.72-4.25-10.55zm-10.67 23.0h-.01c-2.29 0-4.53-.62-6.48-1.79l-.46-.27-4.76 1.25 1.27-4.64-.3-.48a12.31 12.31 0 0 1-1.9-6.6c0-6.78 5.52-12.3 12.31-12.3 3.28 0 6.36 1.28 8.68 3.6a12.2 12.2 0 0 1 3.6 8.68c0 6.78-5.52 12.3-12.31 12.3z"/>
      </svg>
    </button>
  `;

document.body.appendChild(wrap);

const btn = wrap.querySelector(".jc-btn");
  const closeBtn = wrap.querySelector(".jc-close");
  const link = wrap.querySelector(".jc-link");

// --- Behavior ---
  const open = () => wrap.classList.add("jc-open");
  const close = () => wrap.classList.remove("jc-open");
  const toggle = () => wrap.classList.toggle("jc-open");

btn.addEventListener("click", toggle);
  closeBtn.addEventListener("click", close);

// Si hacen click en "Abrir WhatsApp", cierra el popup
  link.addEventListener("click", () => setTimeout(close, 150));

// Cerrar al click fuera
  document.addEventListener("click", (e) => {
    if (!wrap.contains(e.target)) close();
  });

// Abrir automáticamente después de un rato (opcional). Comenta si no quieres.
  //setTimeout(open, 1200);
})();
</script>

</body>
</html>

Simple Systems | Desarrollo de Apps Móviles y Software Web en Chile

Innovación Tecnológica

Una compañía de desarrollo de aplicaciones móviles a tu alcance

Creemos que todas tus ideas se pueden desarrollar. Trabajemos en conjunto para concretar tus necesidades y transformar tu visión en realidad digital.

Ver servicios

Discovery

Análisis profundo antes de ejecutar

Lean

Desarrollo eficiente y escalable

Agile

Entregas iterativas y medibles

NUESTROS SERVICIOS

Soluciones tecnológicas completas

Ofrecemos un amplio rango de servicios de desarrollo para llevar tu proyecto desde la idea hasta la realidad

Desarrollo de Apps Móviles

Aplicaciones nativas e híbridas para iOS y Android con experiencias de usuario excepcionales.

iOS & Android

Flutter

UI/UX Design

Desarrollo Web

Sitios web y aplicaciones web modernas, responsivas y optimizadas para todos los dispositivos.

Vue & Nuxt

Responsive Design

SEO Optimizado

Consultoría IT

Asesoría tecnológica estratégica para transformar digitalmente tu negocio.

Análisis Técnico

Arquitectura

Mejores Prácticas

Auditoría de Código

15+

Años de Experiencia

SOBRE NOSOTROS

Transformamos ideas en soluciones digitales

En Simplesystems, somos un equipo apasionado de desarrolladores, diseñadores y estrategas digitales comprometidos con convertir tus ideas en aplicaciones y sistemas innovadores.

Creemos firmemente que todas las ideas pueden desarrollarse, sin importar su complejidad. Trabajamos en estrecha colaboración contigo para entender tus necesidades y entregar soluciones que superen tus expectativas.

Enfocados en Resultados

Nos comprometemos a entregar soluciones que generen valor real para tu negocio.

Equipo Experto

Contamos con desarrolladores altamente calificados y apasionados por la tecnología.

Innovación Constante

Utilizamos las últimas tecnologías y mejores prácticas del mercado.

Calidad Garantizada

Procesos rigurosos de testing y QA para asegurar la excelencia en cada entrega.

PORTAFOLIO

Proyectos que nos enorgullecen

Explora algunos de nuestros proyectos más destacados.

Todos los Proyectos Apps Móviles Desarrollo Web

Agenda Online – Prechequeo.cl

Plataforma web para agendamiento de inspecciones automotrices con integración de pagos y notificaciones automáticas.

Vue 3 Firebase WebpayPlus transbank

Sistema Web Informes Mecánicos

Plataforma digital para generación y gestión de informes técnicos de inspección pre compra.

Vue 3 Firebase Cloud Functions

Me Falta Uno

App para completar parejas o equipos en distintos deportes de forma rápida y colaborativa.

Flutter Firebase Cloud Functions

dondeVamos

Aplicación móvil para descubrir bares y restaurantes con promociones y recomendaciones.

Flutter Firebase Cloud Functions

Power Mustang Club

App exclusiva para comunidad automotriz con eventos, membresías y comunicación interna.

Flutter Firebase Cloud Functions

American Mustang Club

Plataforma móvil para gestión de club automotriz con eventos, noticias y comunidad.

Flutter Firebase Cloud Functions

CONTACTO

¿Listo para comenzar tu proyecto?

Contáctanos hoy y comencemos a trabajar juntos para transformar tu idea en realidad

Email

contacto@simplesystems.cl

Teléfono

+56 9 95471336

Ubicación

Santiago, Chile

Formulario de Contacto

¿Necesitas una cotización para tu próximo proyecto?

Conversemos sobre tu idea y recibe una propuesta estratégica, clara y personalizada en menos de 24 horas.

Disponible ahora

BLOG

Artículos sobre apps móviles y tecnología

Ideas, guías y buenas prácticas para planificar, construir y lanzar tu aplicación.

Costos 6 min

¿Cuánto cuesta desarrollar una app en Chile en 2026?

Factores clave, rangos de inversión por tipo de app y cómo estimar tu MVP sin sorpresas.

Leer artículo

Tecnología 7 min

Flutter vs React Native: ¿qué conviene para tu app?

Comparación práctica: performance, time-to-market, ecosistema y cuándo elegir cada uno.

Leer artículo

MVP 5 min

Checklist para definir un MVP de app móvil

Una guía para priorizar funcionalidades, validar rápido y reducir riesgo de desarrollo.

Leer artículo

UX/UI 6 min

UX móvil: 10 errores comunes que cuestan conversiones

Patrones de diseño, accesibilidad y microinteracciones para mejorar retención y uso.

Leer artículo

Firebase 8 min

Arquitectura con Firebase para apps: lo que sí escala

Firestore, Auth, Functions y buenas prácticas para seguridad, costos y performance.

Leer artículo

Lanzamiento 7 min

Publicar en App Store y Google Play: pasos y requisitos

Checklist de publicación: cuentas, builds, privacidad, screenshots y revisión.

Leer artículo

Hablemos de tu app