---

URL de la captura de referencia: https://www.designprompting.com/themes/conectatech/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/conectatech/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 ConectaTech, una plataforma de eventos tecnológicos. Usa solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce el diseño visual y la estructura del sitio de ejemplo: 

- Paleta de colores: #0A0A0A (fondo negro), #FFFFFF (texto blanco), #F97316 (accent naranja), #3730A3 (accent azul oscuro), #E5E7EB (gris claro). 
- Tipografía: Inter (carga desde Google Fonts) para títulos y cuerpo, peso 400‑700.
- Header: barra de navegación fija con logo (svg placeholder), menú mega con columnas de enlaces (Home, Tickets, Schedule, Speakers, About, Sponsor, Blog, Contact, etc.) y botón destacado "Buy Tickets" con estilo de botón primario (bg‑orange‑600, hover:bg‑orange‑500, texto blanco). Menú colapsable en móvil con icono de hamburguesa animado.
- Hero: sección a pantalla completa, fondo negro con formas SVG decorativas posicionadas (4 capas). Título grande (display‑heading‑1, text‑white) con texto dinámico "Join Us at DevConnect Amsterdam 2024" (reemplazar por "ConectaTech Summit 2024"). Subtítulo en gris claro, opacidad 80%. Bloque de información del evento (icono venue, icono calendario) y datos (ciudad, fechas). Botones secundarios: "Buy Tickets" (primary) y "Become a sponsor" (outline con borde blanco).
- Sección "Speakers": contenedor con título grande, divisor decorativo, subtítulo. Carrusel horizontal (implementado con CSS scroll‑snap y JS para autoplay) que muestra tarjetas de ponente: imagen circular, nombre, cargo, título de charla y botón "See Details" (estilo secundario). Mostrar 4 tarjetas visibles y navegación con flechas laterales.
- Footer: fondo negro, columnas con enlaces rápidos, información de contacto y redes sociales (iconos SVG), texto pequeño en gris claro.
- Interactividad: dropdown mega menu, carrusel autoplay con pausa al hover, smooth scroll para anclas, botón de "Buy Tickets" que abre modal simple con formulario de compra (campo nombre, email, tipo de ticket, cantidad, botón enviar).
- Responsividad: usar las breakpoints de Tailwind (sm, md, lg, xl) para adaptar layout; el menú se vuelve hamburguesa en <md, el carrusel se vuelve scroll vertical en móvil.
- Código limpio, sin dependencias externas aparte de Tailwind CDN y Google Fonts. Incluye comentarios descriptivos y utiliza clases utilitarias de Tailwind para spacing, colors, typography y flex/grid.

Entrega el archivo completo listo para abrir en el navegador.

---

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