/
home
/
simp499cl
/
public_html
/
/home/simp499cl/public_html
mkdir
upload
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.html
(94834B)
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8" /> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <!-- Title --> <title>Simple Systems | Desarrollo de Apps Móviles y Software Web en Chile</title> <!-- Description (ideal 150–160 chars aprox) --> <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." /> <!-- Robots (más moderno que solo index/follow) --> <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" /> <!-- Keywords (hoy pesa poco, pero si la quieres, mejor más enfocada) --> <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="author" content="Simple Systems" /> <meta name="language" content="es" /> <meta name="referrer" content="strict-origin-when-cross-origin" /> <meta name="format-detection" content="telephone=yes" /> <!-- Theme --> <meta name="theme-color" content="#000000" /> <!-- Canonical --> <link rel="canonical" href="https://www.simplesystems.cl/" /> <!-- Idioma / Región (útil si apuntas a Chile) --> <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" /> <!-- Open Graph --> <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" /> <!-- Twitter --> <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" /> <!-- Opcional si tienes @usuario --> <!-- <meta name="twitter:site" content="@simplesystems" /> --> <!-- GEO (ok mantenerlo, aunque Google lo usa poco hoy) --> <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" /> <!-- Performance (opcional pero recomendado si usas Google Fonts/recursos externos) --> <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> --> <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> --> <!-- Favicons (ajusta rutas reales) --> <link rel="icon" href="/images/favicon.png" sizes="any"> <!-- <link rel="icon" href="/icon.svg" type="image/svg+xml"> --> <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> --> <!-- CSS --> <link href="main.a894a370.css" rel="stylesheet" /> <!-- Structured Data: WebSite + Organization + LocalBusiness + Services --> <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> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"> <div class="App"> <div class="min-h-screen bg-slate-50"> <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="relative flex justify-between items-center py-4"> <div class="flex items-center"> <img alt="Simplesystems Logo" class="h-10 w-auto transition-transform duration-300 hover:scale-105" src="shngv6t9_logo.png" /> </div> <nav class="hidden md:flex items-center space-x-8"> <a href="#hero" class="text-slate-700 hover:text-cyan-600 font-medium transition-colors duration-200">Inicio</a> <a href="#services" class="text-slate-700 hover:text-cyan-600 font-medium transition-colors duration-200">Servicios</a> <a href="#about" class="text-slate-700 hover:text-cyan-600 font-medium transition-colors duration-200">Nosotros</a> <a href="#portfolio" class="text-slate-700 hover:text-cyan-600 font-medium transition-colors duration-200">Portafolio</a> <a href="contact.html" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 shadow h-9 bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-200 hover:shadow-lg hover:scale-105">Contacto</a> </nav> <div class="md:hidden flex items-center"> <div class="mobile-menu-toggle" aria-label="Menú móvil"> <a href="#mobile-menu" class="mobile-menu-open text-slate-700 hover:text-cyan-600 transition-colors duration-200 inline-flex items-center justify-center" aria-label="Abrir menú"> <svg class="icon-hamburger" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </a> <a href="#close" class="mobile-menu-close text-slate-700 hover:text-cyan-600 transition-colors duration-200 inline-flex items-center justify-center" aria-label="Cerrar menú"> <svg class="icon-close" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </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"> Empresa de <span class="text-cyan-600">Desarrollo de Aplicaciones Móviles</span> y Software a Medida en Chile </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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_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="desarrollo-apps-chile" class="py-24 bg-white"> <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-start"> <div class="space-y-6"> <div class="inline-flex items-center px-4 py-2 bg-cyan-100 rounded-full"> <span class="text-cyan-700 font-semibold text-sm">DESARROLLO DE APPS EN CHILE</span> </div> <h2 class="text-4xl md:text-5xl font-bold text-slate-900 leading-tight"> Desarrollo de aplicaciones móviles para empresas, startups y nuevos negocios </h2> <p class="text-lg text-slate-600 leading-relaxed"> En Simple Systems diseñamos y desarrollamos aplicaciones móviles para iOS y Android, plataformas web y software a medida para empresas que necesitan digitalizar procesos, lanzar nuevos productos o mejorar la experiencia de sus clientes. Trabajamos con tecnologías modernas como Flutter, Firebase, Vue, Nuxt y Cloud Functions para construir soluciones escalables, seguras y fáciles de mantener. </p> <p class="text-lg text-slate-600 leading-relaxed"> Nuestro foco está en transformar una idea en un producto digital real: analizamos el negocio, definimos un MVP, diseñamos la experiencia de usuario, desarrollamos la aplicación, integramos APIs, paneles administrativos, pagos, notificaciones y acompañamos el proceso de publicación en App Store y Google Play. </p> </div> <div class="rounded-2xl border border-slate-200 bg-slate-50 p-8 shadow-lg space-y-6"> <h3 class="text-2xl font-bold text-slate-900">Servicios principales</h3> <div class="space-y-4"> <a href="servicios/desarrollo-aplicaciones-moviles-chile.html" class="block p-5 rounded-xl bg-white border border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"> <h4 class="font-bold text-slate-900 mb-1">Desarrollo de aplicaciones móviles</h4> <p class="text-slate-600 text-sm">Apps para iOS y Android, MVPs, productos digitales y soluciones móviles empresariales.</p> </a> <a href="servicios/desarrollo-software-medida.html" class="block p-5 rounded-xl bg-white border border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"> <h4 class="font-bold text-slate-900 mb-1">Desarrollo de software a medida</h4> <p class="text-slate-600 text-sm">Sistemas web, automatización de procesos, plataformas internas y paneles administrativos.</p> </a> <a href="servicios/desarrollo-flutter-chile.html" class="block p-5 rounded-xl bg-white border border-slate-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300"> <h4 class="font-bold text-slate-900 mb-1">Desarrollo Flutter en Chile</h4> <p class="text-slate-600 text-sm">Aplicaciones multiplataforma con una sola base de código, alto rendimiento y diseño consistente.</p> </a> </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="/servicios/desarrollo-apps-ios-chile.html" class="hover:text-cyan-600 transition-colors duration-200"> iOS </a> <span class="mx-2"> & </span> <a href="/servicios/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="/servicios/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 & 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"> <!-- Header --> <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> <!-- CSS filtros --> <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> <!-- Radios --> <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"> <!-- Botones --> <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> <!-- Grid --> <div class="pf-grid grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- WEB 1 --> <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> <!-- WEB 2 --> <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> <!-- APP 1 --> <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> <!-- APP 2 --> <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> <!-- APP 3 --> <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> <!-- APP 4 --> <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"> <!-- Título dentro del contenedor --> <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> <!-- Tarjetas dentro del contenedor --> <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"> <!-- Email --> <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> <!-- Teléfono --> <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> <!-- Ubicación --> <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> <!-- Banner centrado --> <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> <!-- BLOG --> <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> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <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> <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/mvp-app-checklist.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: 200ms"> <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"> MVP </span> <span class="text-sm text-slate-500">5 min</span> </div> <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> <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/ux-mobile-errores-comunes.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: 300ms"> <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"> UX/UI </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"> 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> <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/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> <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/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 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> </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> <footer class="bg-slate-900 text-white pt-16 pb-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12"> <!-- Columna Marca --> <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> <!-- Empresa --> <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> <!-- Servicios --> <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> <script> (function () { const PHONE = "56995471336"; // sin +, sin espacios const MESSAGE = "Hola, quiero una cotización"; const POS = { bottom: 24, right: 24 }; // px // --- 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>
Save
cmd:
run
