---
URL de la captura de referencia: https://www.designprompting.com/themes/documenta/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/documenta/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 usando HTML, Tailwind CSS (CDN) y JavaScript vanilla en un solo archivo que reproduzca la estructura y estilo del sitio de documentación analizado, pero con la marca ficticia DocuMenta.
**Objetivo**: una documentación limpia y minimalista con barra superior, navegación lateral, página principal con hero y cuadrícula de categorías.
**Paleta de colores** (extraer de los SVG y fondos):
- Primario: #0d3b66
- Secundario: #faf0e6
- Acento: #f4d35e
- Texto oscuro: #1a1a1a
- Texto claro: #ffffff
**Tipografía**: usar Inter (Google Fonts) para todo el texto, tamaños basado en clases Tailwind `text-4xl`, `text-2xl`, `text-lg` etc.
**Header (barra superior)**:
- Logo a la izquierda (texto "DocuMenta" con versión "v. 1.0.0" al lado).
- Enlaces de navegación: Index, FAQ, Changelog, Support.
- Botón Lottie opcional (puede omitirse).
- Responsivo: colapsar en móvil a un icono de menú.
**Sidebar (navegación lateral)**:
- Área de búsqueda con placeholder "¿Qué buscas?" y botón Search.
- Lista de secciones con iconos SVG (usar íconos genéricos de Heroicons).
- Cada sección despliega sub‑enlaces (Getting Started, Core Concepts, Guides, Reference) como enlaces en bloque.
- Botones de "Sign in" (estilo base) y "Sign Up" (estilo light) al final.
- Scrollable y colapsable en móvil.
**Main (contenido principal)**:
1. **Tarjeta hero** con fondo abstracto (usar un SVG o imagen de degradado), título grande "DocuMenta Documentation", subtítulo "Plantilla para documentación" y breve descripción.
2. Botones CTA: "Get Started" (estilo base) y "Support" (estilo light).
3. Imagen decorativa a la derecha del hero.
4. Bloque "Getting Started" con texto introductorio y una imagen de fondo difusa.
5. Sección "Categories": cuadrícula responsive (3‑col en escritorio, 2‑col en tablet, 1‑col en móvil). Cada tarjeta muestra:
- Icono
- Título de la categoría
- Fondo ilustrativo
- Enlace a la página de la categoría.
**Páginas adicionales** (Index, FAQ, Changelog, Support, Sign‑in, Sign‑up):
- Mantener la misma barra superior y sidebar.
- En el cuerpo, colocar un contenedor con título y contenido placeholder (lista de artículos, acordeón de preguntas, registro de cambios, formulario de contacto, login, registro).
**Interactividad**:
- Menú lateral abre/cierra en móviles.
- Botón Search abre modal de búsqueda.
- Botones con transición de color on hover.
- Accordion en FAQ usando JS sencillo.
**Requisitos técnicos**:
- Un único archivo `index.html` que incluya todo el HTML, ``, `