---

URL de la captura de referencia: https://www.designprompting.com/themes/velopixel/theme.jpg

IMPORTANTE — Verificación previa (hazla ANTES de cualquier otra cosa):
Comprueba si tienes la imagen de referencia ADJUNTA como archivo (no como URL en texto).

- Si NO hay imagen adjunta y solo ves la URL → DETENTE. No generes nada.
  Responde únicamente:
  "⚠️ Solo tengo la URL, no la captura. Descárgala desde aquí y adjúntala al chat
  para que pueda replicar el diseño con fidelidad:
  https://www.designprompting.com/themes/velopixel/theme.jpg"

- Si la imagen SÍ está adjunta → continúa con las instrucciones de abajo.

---

## Fase 0 — Spec medida de la captura (OBLIGATORIA antes de codificar)
Antes de escribir una sola línea de código, analiza la captura adjunta y escribe una spec con:
- Lista ordenada de secciones tal y como aparecen de arriba a abajo. No añadas secciones que no estén en la captura (si no se ve header de navegación o footer, no los inventes).
- Por sección: altura aproximada (px sobre ancho 1440), nº de columnas, gap, color de fondo (hex), border-radius dominante, ratio de las imágenes y % de overlay si lo hay.
- Tipografía: tamaños aproximados de H1/H2/cuerpo en px y pesos.
Esta spec manda durante toda la generación: el código se escribe contra ella.

---

## Referencia visual
Replica fielmente el diseño de la captura adjunta (estructura, paleta, tipografía).
Si necesitas la imagen como recurso real en la web, está disponible en la URL indicada arriba.

---
Crea un sitio web completo para la marca ficticia VeloPixel, una plataforma SaaS de gestión de proyectos. Utiliza sólo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Emula el diseño de la plantilla analizada: un menú fullscreen que se abre al hacer clic en el ícono de hamburguesa, con tres columnas (enlaces principales, enlaces secundarios y redes sociales). El hero ocupa la ventana completa, tiene una imagen de fondo con efecto parallax, título grande en blanco y un botón circular con borde animado que dice "Descubrir".

Paleta de colores (hex):
- #0d0d0d (fondo negro profundo)
- #ffffff (texto principal)
- #ff6f61 (accento coral para botones y enlaces)
- #1a1a1a (tarjetas y bloques internos)
- #333333 (borde y sombras suaves)

Tipografía: Use "Inter" para todo el texto (carga desde Google Fonts). Título hero: font‑size 4rem, font‑weight 700. Subtítulos: 1.5rem, peso 600. Cuerpo: 1rem, peso 400.

Estructura de la HOME (sección por sección):
1. Menú fullscreen oculto, activado por botón burger en la esquina superior derecha. Tres columnas con enlaces (Overview, Demo, Comprar), menú de UI (Headers, Sliders, Content, Cards, Listings, Ecommerce, CTA, Forms, Tabs, Footers) y iconos de redes (YouTube, Facebook, LinkedIn). Cada enlace se anima al hover (cambio de color a #ff6f61).
2. Hero: contenedor con clase `relative h-screen bg-black` y `bg-cover bg-center` que muestra una imagen placeholder de alta resolución (https://picsum.photos/2000/1200). Sobre la imagen, capa overlay `bg-black/60`. Texto centrado verticalmente: "Gestión ágil para equipos modernos" y botón circular con borde animado, fondo transparente, texto coral.
3. Grid de soluciones (6 ítems). Cada ítem es una tarjeta `relative overflow-hidden rounded-lg shadow-lg bg-[#1a1a1a]`. Imagen de fondo parallax (usando `data-speed="0.3"` y JS simple). Título encima, botón circular "Descubrir" idéntico al hero. Espaciado 2rem entre tarjetas.
4. Bloque de texto introductorio con ancho máximo 800px, centrado, margen superior 4rem, color #ffffff.
5. Footer: fondo #0d0d0d, columnas con enlaces de ayuda, política y contacto, y fila de iconos sociales en blanco que cambian a coral al hover.

Requisitos técnicos:
- Incluir `<script>` al final que gestione la apertura/cierre del menú fullscreen y el efecto parallax (escucha scroll y actualiza `transform: translateY`).
- Todos los componentes deben ser responsivos: el grid pasa a 2 columnas en tablets y 1 columna en móviles.
- No usar imágenes reales de la plantilla; usar placeholders de picsum o unsplash.
- No copiar ningún texto del original; generar contenido original en español, activo y sin jerga.
- Añadir meta etiquetas básicas y favicon ficticio.
- El HTML debe estar bien indentado y comentado para cada bloque.
- Proveer clases de Tailwind personalizadas mediante `@layer utilities` si es necesario (por ejemplo, para el círculo animado).

---

## Protocolo de construcción por bloques
Construye el HTML sección a sección, en el orden exacto de la captura. Tras cada bloque, compáralo con su zona de la imagen (estructura, columnas, espaciados, radios, colores) y corrígelo antes de pasar al siguiente. No avances con un bloque que no coincida.

## Regla anti-invención
Si la captura y este prompt se contradicen en algo visual, manda la captura. Si un dato visual no está especificado, derívalo de la captura; nunca lo inventes. Los textos sin sentido de la captura (errores tipográficos de IA) NO se copian: redacta textos coherentes en español manteniendo longitud y jerarquía visual equivalentes. Única excepción: el footer obligatorio de Design Prompting del final de este prompt se añade siempre.

## Checklist de fidelidad (antes de entregar)
- Orden y número de secciones = captura
- Paleta y contraste = captura
- Columnas, gaps y border-radius = spec de la Fase 0
- Ratios de imagen y alturas de sección ≈ captura
- Densidad de texto similar a la captura (sin párrafos inflados)

## Protocolo de iteración
Si el usuario señala diferencias tras la primera generación, corrige únicamente los deltas indicados sin regenerar las secciones ya validadas.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```