---

URL de la captura de referencia: https://www.designprompting.com/themes/stack-eter/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/stack-eter/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 página web completa para la marca ficticia Stack Éter, una plataforma SaaS de gestión empresarial. Utiliza HTML + Tailwind CSS CDN + JavaScript vanilla en un único archivo. Reproduce el diseño visual y la estructura del sitio de referencia sin copiar textos ni imágenes del original.

**Paleta de colores**
- Primary: #0A2540 (navy deep)
- Secondary: #1E3A5F (rich navy)
- Accent: #4A90E2 (bright blue)
- Background: #F5F7FA (soft gray)
- Text: #212B36 (dark charcoal)

**Tipografía**
- Headings: "Inter", sans-serif; weight 600‑700
- Body: "Inter", sans-serif; weight 400
- Buttons: uppercase, tracking wider

**Header**
- Barra superior fija con mensaje promocional "Ahorra 25% en suscripciones anuales" y enlaces a redes sociales (FB, LinkedIn, X, Instagram).
- Navbar con logo a la izquierda, menú principal con 5 items (Home, Pages, Pricing, Blog, Contact) cada uno con dropdown de enlaces internos. Botón “Contacta” y número de teléfono a la derecha.
- Menú responsive con icono hamburguesa que despliega el mismo contenido.

**Hero**
- Sección a pantalla completa, fondo blanco, texto grande centrado: "Soluciones SaaS que optimizan tu negocio" y subtítulo descriptivo. Texto repetido en efecto marquee horizontal (dos capas, una con color primario y otra con opacidad 0.1). Botones CTA: "Contacta" (estilo sólido) y "Nuestros planes" (estilo contorno).

**Bloques de Home**
1. Características: grid de 4 columnas, cada una con ícono SVG (placeholder) y título corto + párrafo.
2. Testimonios: carrusel simple con 3 tarjetas, cada una con foto circular, nombre, cargo y testimonio.
3. Planes de precios: tres tarjetas alineadas, título del plan, precio ficticio, lista de ventajas, botón "Empezar".
4. CTA final: fondo azul claro, texto motivador y formulario de captura de email (campo y botón).

**Footer**
- Sección de enlaces rápidos (Producto, Empresa, Legal), contactos (tel, email), y redes sociales. Fondo navy deep, texto blanco.

**Interactividad**
- Dropdowns y menú móvil con toggle de clase Tailwind `hidden`/`block`.
- Carrusel de testimonios con simples intervalos de 5s y botones prev/next.
- Smooth scroll para enlaces internos.
- Validación básica del formulario de suscripción (campo requerido, formato email).

**Requisitos técnicos**
- Todos los estilos deben usar clases Tailwind CDN (v3.x).
- Incluir `<script>` al final para manejar toggles, carrusel y validación.
- Utilizar imágenes de placeholder `https://picsum.photos` donde sea necesario.
- Mantener semántica HTML5 (header, nav, main, section, footer).
- Asegurar accesibilidad: `aria-label` en botones, focos visibles, contraste suficiente.
- El código debe estar comentado y organizado para que Claude Design pueda generar la versión final sin errores.

---

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