<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="Soluciones digitales a la medida: sitios web, imágenes, videos y aplicaciones de escritorio." />
<title>Soluciones Digitales a la Medida | Inicio</title>
<style>
/* Reset simple */
:root{--accent:#1f6feb;--muted:#6b7280;--bg:#f8fafc;--card:#ffffff;--radius:12px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.5;color:#111827;background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:24px}
/* Header */
header{background:transparent;padding:18px 0}
.brand{display:flex;gap:16px;align-items:center}
.logo{font-weight:700;color:var(--accent);font-size:20px}
nav{margin-left:auto}
.navlist{display:flex;gap:18px;list-style:none}
.navlist a{color:#374151;text-decoration:none;font-weight:500}
/* Hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;padding:36px 0}
.hero h1{font-size:36px;line-height:1.05;margin-bottom:12px}
.hero p.lead{color:var(--muted);margin-bottom:18px}
.cta{display:flex;gap:12px}
.btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid rgba(31,111,235,.12)}
.mockup{background:linear-gradient(180deg,rgba(31,111,235,.06),transparent);padding:20px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,.06)}
/* Services */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px 0}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,.04)}
.card h3{margin-bottom:8px}
.small{color:var(--muted);font-size:14px}
/* Process */
.process{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.step{flex:1;min-width:150px;background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;border-radius:10px;text-align:center}
/* Portfolio */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.portfolio .item{height:140px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.01));display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* Testimonials */
.testimonios{display:flex;gap:12px;flex-direction:column}
.quote{background:linear-gradient(180deg,#fff,#fcfcff);padding:14px;border-radius:10px}
/* Contact */
.contact{display:grid;grid-template-columns:1fr 320px;gap:18px;margin:28px 0}
form{display:flex;flex-direction:column;gap:10px}
input,textarea{padding:12px;border:1px solid #e6e9ee;border-radius:8px;font-size:14px}
.muted{color:var(--muted);font-size:14px}
footer{padding:20px 0;border-top:1px solid #eef2f7;margin-top:30px}
/* Responsive */
@media (max-width:900px){
.hero{grid-template-columns:1fr;}
.grid{grid-template-columns:1fr}
.portfolio{grid-template-columns:repeat(2,1fr)}
.contact{grid-template-columns:1fr}
nav{display:none}
}
</style>
</head>
<body>
<header class="container">
<div style="display:flex;align-items:center;gap:18px">
<div class="brand">
<div class="logo">SolucionesDigitales</div>
<div class="muted">Diseño • Video • Apps</div>
</div>
<nav>
<ul class="navlist">
<li><a href="#servicios">Servicios</a></li>
<li><a href="#portafolio">Portafolio</a></li>
<li><a href="#proceso">Proceso</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<!-- HERO -->
<section class="hero" id="inicio">
<div>
<h1>Soluciones digitales a la medida de tu negocio</h1>
<p class="lead">Sitios web profesionales, imágenes de alto impacto, videos corporativos y aplicaciones de escritorio diseñadas para resolver problemas reales y aumentar tus ventas.</p>
<div class="cta">
<a class="btn" href="#contacto">Comienza tu proyecto</a>
<a class="btn ghost" href="#portafolio">Ver portafolio</a>
</div>
<p class="muted" style="margin-top:12px">Trabajo con IA para acelerar entregas y mejorar propuestas creativas.</p>
</div>
<aside class="mockup">
<!-- Replace with your image or mockup -->
<div style="width:100%;height:260px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#f8fafc,#ffffff);">
<div style="text-align:center;color:var(--muted)">
<strong>Mockup</strong>
<div style="font-size:13px">Tu sitio — móvil y escritorio</div>
</div>
</div>
</aside>
</section>
<!-- SERVICES -->
<section id="servicios">
<h2>Servicios</h2>
<div class="grid" style="margin-top:12px">
<article class="card">
<h3>Creación de Sitios Web</h3>
<p class="small">Diseños responsive, optimizados para SEO y conversión. Integraciones con e-commerce, pasarelas de pago y herramientas administrativas.</p>
</article>
<article class="card">
<h3>Edición y Creación de Imágenes</h3>
<p class="small">Branding, retoque profesional, assets para redes y banners publicitarios listos para web y print.</p>
</article>
<article class="card">
<h3>Producción y Edición de Videos</h3>
<p class="small">Videos institucionales, anuncios para redes, motion graphics y edición profesional con enfoque en resultados.</p>
</article>
<article class="card">
<h3>Aplicaciones de Escritorio</h3>
<p class="small">Software a la medida para automatizar procesos internos, gestión de clientes y sistemas administrativos.</p>
</article>
</div>
</section>
<!-- PROCESS -->
<section id="proceso">
<h2>Mi Proceso</h2>
<div class="process" style="margin-top:12px">
<div class="step">1. Análisis</div>
<div class="step">2. Propuesta visual</div>
<div class="step">3. Desarrollo</div>
<div class="step">4. Revisiones</div>
<div class="step">5. Entrega + Capacitación</div>
</div>
</section>
<!-- PORTFOLIO -->
<section id="portafolio">
<h2>Portafolio</h2>
<p class="muted" style="margin-top:8px">Proyectos destacados — haz click para ver más (reemplaza con imágenes y enlaces reales).</p>
<div class="portfolio" style="margin-top:12px">
<div class="item">Proyecto 1</div>
<div class="item">Proyecto 2</div>
<div class="item">Proyecto 3</div>
<div class="item">Proyecto 4</div>
<div class="item">Proyecto 5</div>
<div class="item">Proyecto 6</div>
</div>
</section>
<!-- TESTIMONIOS -->
<section id="testimonios">
<h2>Testimonios</h2>
<div class="testimonios" style="margin-top:12px">
<div class="quote">“Trabajo profesional y entrega puntual. Nuestro sitio está fantástico.” — Cliente A</div>
<div class="quote">“Los videos y las imágenes aumentaron la conversión en redes.” — Cliente B</div>
</div>
</section>
<!-- CONTACT -->
<section id="contacto">
<h2>Contacto</h2>
<div class="contact" style="margin-top:12px">
<div>
<p class="muted">¿Listo para comenzar? Escríbeme con los detalles de tu proyecto y te responderé con una propuesta.</p>
<form action="#" onsubmit="alert('Formulario simulado — reemplaza la acción por tu endpoint o integralo con Formspree/EmailJS.');return false;">
<input type="text" name="nombre" placeholder="Tu nombre" required />
<input type="email" name="email" placeholder="Tu correo" required />
<input type="text" name="empresa" placeholder="Empresa (opcional)" />
<textarea name="mensaje" rows="5" placeholder="Cuéntame sobre tu proyecto" required></textarea>
<button class="btn" type="submit">Enviar mensaje</button>
</form>
</div>
<aside class="card" style="height:100%">
<h3>Información de contacto</h3>
<p class="small">Email: <a href="mailto:tu@correo.com">tu@correo.com</a></p>
<p class="small">WhatsApp: <a href="https://wa.me/521XXXXXXXXXX" target="_blank">+52 XXXXXXXXXX</a></p>
<p class="small">Ubicación: Ciudad, País</p>
<div style="margin-top:12px">
<a class="btn" href="mailto:tu@correo.com">Enviar correo</a>
</div>
</aside>
</div>
</section>
</main>
<footer class="container">
<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
<div class="muted">© "Tu Nombre" — Soluciones Digitales. Todos los derechos reservados.</div>
<div style="display:flex;gap:12px">
<a class="muted" href="#">Aviso de privacidad</a>
<a class="muted" href="#">Términos</a>
</div>
</div>
</footer>
<!-- SUGERENCIAS PARA IMPORTAR A WORDPRESS:
- Puedes copiar este HTML y pegarlo en un bloque HTML con el editor de Gutenberg
- O usar un widget HTML en Elementor y pegar aquí el contenido del <main> o la página completa
- Reemplaza los placeholders (email, whatsapp, imágenes) por tus datos reales
- Para formularios reales integra Formspree, EmailJS o un plugin de contacto
-->
</body>
</html>