!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content=" oindex">
  <title>Luma Demo</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
    .hero { background: #1a1a2e; color: #fff; padding: 80px 20px; text-align: center; }
    .hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
    .hero p { font-size: 1.1rem; opacity: 0.9; }
    .services { padding: 60px 20px; background: #f8f9fa; }
    .services h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }
    .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1000px; margin: 0 auto; }
    .service-card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); flex: 1 1 250px; text-align: center; }
    .contact { padding: 60px 20px; text-align: center; background: #1a1a2e; color: #fff; }
    .contact h2 { margin-bottom: 20px; font-size: 2rem; }
    .contact a { color: #e94560; }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Luma Demo</h1>
    <p>Sitio ficticio de demostración</p>
  </section>
  <section class="services">
    <h2>Nuestros Servicios</h2>
    <div class="services-grid">
      <div class="service-card"><h3>Diseño Web</h3><p>Creación de sitios web modernos y responsivos.</p></div>
      <div class="service-card"><h3>SEO</h3><p>Optimización para motores de búsqueda.</p></div>
      <div class="service-card"><h3>Marketing Digital</h3><p>Estrategias de marketing en línea.</p></div>
    </div>
  </section>
  <section class="contact">
    <h2>Contacto</h2>
    <p>Email: <a href="mailto:info@ejemplo.com">info@ejemplo.com</a></p>
  </section>
</body>
</html>