---

URL de la captura de referencia: https://www.designprompting.com/themes/lumenario/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/lumenario/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 inspirado en el diseño analizado, usando solo HTML, TailwindCSS vía CDN y JavaScript vanilla en un único archivo. Marca ficticia: Lumenario (plataforma de contenidos).

**Objetivo**: reproducir la estructura, patrones visuales y comportamiento del sitio original sin copiar textos ni imágenes específicas. Genera todos los bloques enumerados en la tabla, manteniendo la jerarquía y la interacción (preloader, menú sticky, marquee infinito, botones con efecto hover, tarjetas con sombra). Utiliza una paleta de colores basada en los siguientes HEX: #1A202C (gris oscuro), #2D3748 (gris medio), #4A5568 (gris claro), #4299E1 (azul acento), #FFFFFF (blanco). Tipografía: "Inter" para encabezados y "Roboto" para párrafos, ambas importadas de Google Fonts.

**Estructura del HTML**:
- `<header>` con barra sticky: logo SVG placeholder, menú horizontal (Home, Blogs, Categorías, Autores, Cuenta), email de contacto y botón primario "Contactar".
- `<section id="preloader">` con contador que anima del 0 al 100% y desaparece al cargar.
- `<section class="banner">` con fondo gris claro, texto grande "Suscríbete para recibir novedades".
- `<section class="hero" style="background:#F7FAFC;">` con contenedor max-w-7xl, dos columnas: izquierda (h1 "Aprende algo nuevo cada día", p descriptivo, botón primario "Suscribirse"), derecha con tres imágenes de muestra (usa placeholders via https://placehold.co/).
- `<section class="marquee">` con contenedor flex overflow-hidden, texto repetido "Comparte tu voz con el mundo" y un ícono de estrella (SVG) intercalado.
- `<section class="trending">` con encabezado h2 "Trending Now", botón secundario "Ver todos los blogs" y grid 3 columnas de tarjetas de blog. Cada tarjeta: imagen placeholder, línea de categoría + tiempo, título clickable.
- `<section class="categories">` con encabezado h2 "Categorías populares", grid 3 columnas de tarjetas de categoría. Cada tarjeta: título, descripción corta, flecha SVG animada.
- `<footer>` con fondo gris oscuro, logo, enlaces rápidos (Home, Blogs, Categorías, Contacto), bloque de email (hola@lumenario.com) y texto de derechos.

**Estilos Tailwind**: usar utility‑classes para márgenes, paddings, tipografía, colores y efectos de transición. Añadir clases personalizadas en `<style>` para animaciones marquee (keyframes) y preloader fade‑out.

**JS**: 
- Preloader: al DOMContentLoaded, animar número del 0 al 100 y ocultar el div.
- Marquee: duplicar contenido para bucle continuo.
- Botón hover: cambiar fondo a azul #4299E1 y texto a blanco.
- Menú móvil: toggle de clase "hidden" en lista de enlaces cuando se hace click en ícono hamburguesa.

**Salida esperada**: un único archivo `index.html` completo, listo para abrir en el navegador y visualizar el diseño replicado de Lumenario.

---

## 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>
```