--- URL de la captura de referencia: https://www.designprompting.com/themes/almendro-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/almendro-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 una web completa en un único archivo HTML usando Tailwind CSS vía CDN y JavaScript vanilla, sin frameworks ni dependencias externas más allá de Tailwind. La web es para una marca ficticia llamada **Almendro Studio**, un estudio creativo de marketing digital y redes sociales para marcas emergentes con sede en Valencia. Dominio: almendrostudio.com. Email: hola@almendrostudio.com. Claim: "Cuidamos cada palabra como si fuera nuestra". Año 2025. Tono editorial, cercano, en español de España, sin jerga marketinera ni precios concretos. ## Estética visual - Estilo editorial minimalista con personalidad tipográfica fuerte. - Paleta: fondo crema cálido `#F4F1EC`, texto principal negro `#0A0A0A`, blanco `#FFFFFF`, acento menta `#B8E0C2` para botones y highlights, acento oscuro `#1A1A1A` para secciones inversas. - Tipografía: títulos en serif moderna tipo "Fraunces" o "DM Serif Display" (cargar vía Google Fonts), cuerpo en sans-serif geométrica tipo "Inter". Títulos hero extragrandes (clamp 60-140px), interletraje ajustado. - Mucho aire, márgenes generosos, transiciones suaves al hacer hover (subrayados animados, fade). ## Header (navbar fijo arriba con fondo crema) - Logo a la izquierda (texto "almendro*" en serif, el asterisco en menta). - Menú central horizontal con los enlaces SEPARADOS POR COMAS reales visibles entre items: Inicio, Sobre, Casos, Servicios, Diario, Empleo, Tienda. Cada enlace con subrayado animado en hover. - Icono de carrito a la derecha con contador (0) y botón "Contacto" en píldora menta. - Versión mobile: menú hamburguesa desplegable. ## Home, sección a sección 1. **Hero**: titular gigantesco en serif a tres líneas: "Hacemos marcas / que la gente / recuerda." A la derecha un párrafo breve explicando que son un estudio independiente. CTA primario menta "Ver casos" y secundario subrayado "Conócenos". Pequeña etiqueta arriba "Estudio creativo · Valencia, 2025". 2. **Marquee de clientes**: banda horizontal con scroll infinito CSS mostrando 10 nombres de marcas ficticias en serif (ej: Olivar, Cinco Lunas, Bambú&Co, Tinta Roja, Paloma, etc.) separados por asteriscos. 3. **Sobre nosotros**: a la izquierda texto a dos párrafos sobre la filosofía del estudio. A la derecha tres métricas grandes en serif: "08 años", "120+ proyectos", "14 personas". 4. **Casos destacados**: grid de 4 tarjetas (2x2) con imagen placeholder (usar divs con gradientes o colores sólidos), etiqueta de categoría arriba (Branding, Social, Campaña, Web), título serif del caso y flecha. Hover: imagen con zoom suave. 5. **Servicios**: lista vertical numerada (01, 02, 03, 04, 05) tipo acordeón. Cada item al hacer clic despliega descripción. Servicios: Estrategia de marca, Contenido para redes, Campañas digitales, Diseño web, Producción audiovisual. 6. **Testimonio**: una sola cita gigante en serif centrada con comillas decorativas, firmada por un cliente ficticio y su cargo. 7. **Diario (blog)**: 3 tarjetas de artículos recientes con imagen, fecha, categoría y título. 8. **Tienda destacada**: 4 productos de merchandising (tote bag, camiseta, libreta, póster) con imagen placeholder, nombre y botón "Añadir" (no funcional, solo visual). 9. **CTA final**: sección de fondo oscuro `#1A1A1A` con texto crema. Titular grande "¿Empezamos algo juntos?" y formulario inline con campos nombre, email y mensaje + botón menta enviar. 10. **Footer**: logo grande "almendro*" ocupando ancho. Columnas con enlaces (Estudio, Trabajo, Recursos, Legal), redes sociales (Instagram, Behance, LinkedIn, Vimeo), email hola@almendrostudio.com, dirección ficticia en Valencia. Línea inferior con © 2025 Almendro Studio y enlaces a Privacidad y Cookies. ## Requisitos técnicos - Single file HTML autocontenido. - Tailwind vía `` con configuración inline para colores y fuentes personalizadas. - Google Fonts para Fraunces e Inter. - JavaScript vanilla para: menú móvil, acordeón de servicios, scroll suave en anclas, marquee infinito (CSS animation), contador del carrito. - Responsive completo (mobile-first), breakpoints md y lg. - Accesibilidad: roles ARIA, contraste correcto, focus visible. - Todos los textos en español de España, originales, sin copiar de ninguna referencia. - Imágenes mediante placeholders con `
` de colores o gradientes (no usar URLs externas). --- ## 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 ```