--- URL de la captura de referencia: https://www.designprompting.com/themes/arcova-studio/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/arcova-studio/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 **Arcova Studio**, estudio de arquitectura, con el siguiente alcance y stack: - **Stack**: HTML5 + Tailwind CSS (CDN) + JavaScript vanilla en un único archivo. No usar frameworks ni dependencias externas. - **Paleta de colores**: #0A0A0A (negro profundo), #FFFFFF (blanco), #1A73E8 (azul acento), #E0E0E0 (gris claro) y #F5F5F5 (gris muy claro). - **Tipografía**: `Inter` para textos y `Playfair Display` para títulos, ambas importadas desde Google Fonts. - **Header**: barra de navegación fija con logo a la izquierda y botón hamburguesa que abre una barra lateral derecha. La sidebar contiene enlaces: Home, Visiones, Soluciones, Artículos, Contacto y redes sociales (Facebook, Instagram, X, YouTube) con iconos SVG. - **Hero**: sección a pantalla completa con subtítulo "Encuentra tu propio diseño", título "Transformando **Ideas** en Arquitectura" donde la palabra *Ideas* usa el color de acento, párrafo descriptivo y botón CTA "Reserva una consulta" enlazado a la página de contacto. A la derecha, una composición de 6 imágenes 3D (placeholders) posicionadas con `transform: translate3d()` para crear efecto de profundidad. - **Bloques subsecuentes**: 1. **Servicios**: tres columnas, cada una con icono SVG, título y breve descripción. 2. **Portafolio**: grid de 4 tarjetas, cada una con imagen de proyecto y overlay al pasar el cursor con título del proyecto. 3. **Testimonios**: carrusel simple (JS) que muestra cita, avatar circular y nombre. 4. **Contacto**: formulario de cuatro campos (nombre, email, asunto, mensaje) y botón enviar, junto a bloque con dirección, teléfono y email. - **Footer**: fondo gris muy claro, columnas con enlaces de navegación, sección de redes sociales y texto de copyright. - **Interacciones**: smooth scroll para anclas, apertura/cierre de sidebar con transición, hover effects en botones y tarjetas, carrusel automático con pausa al hover. - **Responsividad**: diseño mobile‑first, con breakpoints en 640px y 1024px para reordenar la galería hero y el grid de portafolio. Genera el HTML completo, incluye los enlaces a Tailwind CDN y a Google Fonts, define las clases Tailwind necesarias y agrega scripts mínimos para sidebar y carrusel. No incluir contenido copiado del original; crear textos originales en español siguiendo el esquema descrito. --- ## 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 ```