--- URL de la captura de referencia: https://www.designprompting.com/themes/lunapixel/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/lunapixel/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 estático para la marca ficticia **LunaPixel**, estudio creativo de diseño y branding. Utiliza **HTML5**, **Tailwind CSS (CDN)** y **JavaScript vanilla** en un solo archivo. La página debe incluir: - **Header**: barra fija con logo (texto LunaPixel) a la izquierda y menú hamburguesa a la derecha. Al hacer clic, se despliega un menú overlay con links a #about, #services, #work, #contact. Usa transiciones suaves y fondo oscuro semi‑transparente. - **Hero**: sección a pantalla completa con título fragmentado en tres líneas ("Diseño", "que", "inspira") que aparecen con animación de desplazamiento vertical (utiliza IntersectionObserver). Incluye un subtítulo descriptivo y un fondo de color gris muy claro. Añade una forma geométrica decorativa (cuatro bloques rotados) usando CSS pseudo‑elementos. - **About**: bloque con texto grande alineado a la izquierda ("Somos un estudio creativo" etc.) y una galería de tres imágenes en columna que se apilan en móvil. Entre los textos, inserta una animación Lottie de una flecha que rebota. Botón "Trabaja con nosotros" con efecto slide. - **Services**: grid de 3 tarjetas, cada una con número pequeño (01., 02., 03.), título (Publicidad, Gráfico, Desarrollo) y una imagen de fondo. Al pasar el cursor, la imagen se escala ligeramente y aparece una sombra interna. - **CTA / Contact**: sección con fondo oscuro y texto centrado invitando a contactar. Botón grande con efecto de movimiento de fondo (gradient shift) que enlaza a un formulario simple (nombre, email, mensaje) que se muestra en overlay al hacer clic. - **Footer**: barra inferior con enlaces de navegación, dirección ficticia y email de contacto. Fondo negro, texto gris claro. **Paleta de colores**: - #111827 (gris muy oscuro) - #1F2937 (gris medio) - #F9FAFB (casi blanco) - #3B82F6 (azul accent) - #10B981 (verde accent) **Tipografía**: "Inter" para cuerpo y "Playfair Display" para títulos, importadas vía Google Fonts. **Requisitos técnicos**: - Todas las animaciones deben ser CSS + IntersectionObserver, sin librerías externas. - El menú mobile y el formulario modal deben ser accesibles (focus trap, aria‑labels). - El HTML debe ser semántico (header, nav, main, section, footer). - El sitio debe ser totalmente responsive, con breakpoints en sm (640px) y md (768px). - Incluye comentarios claros en el código para cada bloque. - No incluir ningún contenido copiado del original; generar texto y imágenes de ejemplo con placeholders. Entrega el archivo completo como código listo para abrir en el navegador. --- ## 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 ```