---

URL de la captura de referencia: https://www.designprompting.com/themes/ayudaplus/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/ayudaplus/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 la marca "AyudaPlus" (ayudaplus.com) usando HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe reproducir el diseño y la estructura de la plantilla original sin copiar textos ni imágenes. 

**Objetivo**: una página de inicio tipo SaaS/Startup de soporte técnico con los siguientes bloques en orden:
1. **Header**: barra superior fija, fondo oscuro, logo a la izquierda (placeholder), menú horizontal con enlaces: "Inicio", "Base de Conocimientos", "Noticias", "Eventos", "Variaciones" (dropdown con dos opciones). Botón hamburguesa para móviles.
2. **Hero**: sección a pantalla completa, color de fondo primario (#2b78be). Título grande centrado, subtítulo, y debajo tres tarjetas de enlaces rápidos (columna en desktop, fila en móvil) con iconos genéricos y textos originales.
3. **Bloque Intro**: fila de tres columnas, cada una con un icono circular, título y breve descripción. Enlaces a "Base de Conocimientos", "FAQs" y "Más preguntas?".
4. **Artículos Destacados**: título de sección y botón "Ver todo", seguida de una cuadrícula de 3 columnas (mobile: 1). Cada tarjeta muestra una etiqueta de categoría con fondo de color (usar #2b78be, #d54c4c, #8659c5, #f28023 según categoría), título del artículo y enlace.
5. **Contenido Triple**: tres columnas con fondo blanco. Cada columna contiene:
   - **Noticias**: lista de 3 entradas con icono, fecha y título enlazable.
   - **Eventos**: lista similar con fecha completa y título.
   - **FAQs**: lista de preguntas colapsables (acordeón). Cada pregunta al hacer click muestra una respuesta de texto de varios párrafos.
   Cada columna finaliza con un enlace "Ver todo".
6. **CTA de Contacto**: fondo gris claro, título principal y subtítulo, fila de tres tarjetas enlazables con textos "General question?", "Ver FAQs" y otro CTA a convenir.
7. **Footer**: fondo oscuro, enlaces de navegación secundaria y datos de contacto ficticios.

**Estilos**:
- Paleta de colores: primario #2b78be, secundario #d54c4c, acento #8659c5, alerta #f28023, fondo oscuro #111, fondo claro #f9f9f9, texto blanco #fff, texto oscuro #222.
- Tipografía: "Inter" para títulos (font-bold, text-4xl), "Roboto" para cuerpo (text-base, leading-relaxed). Cargar fuentes desde Google Fonts.
- Utiliza utilidades Tailwind para márgenes, paddings, grids, flex, responsividad y transiciones.

**Interactividad**:
- Menú dropdown y hamburguesa con toggles de clases.
- Acordeón de FAQs: al click cambia la altura de la respuesta y rota un ícono.
- Hover en tarjetas de artículo cambia la sombra.

**Requisitos técnicos**:
- Todo el código en un solo archivo HTML.
- Incluir `<script>` al final para manejar toggles y acordeón.
- No usar imágenes reales; sustituir por placeholders SVG o colores de fondo.
- Comentarios claros en el HTML indicando cada sección.
- Validar accesibilidad básica (atributos aria, alt text).

Genera el código completo listo para copiar y pegar.

---

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