`, `<meta description>`, atributos alt en imágenes. - Garantizar accesibilidad: roles ARIA en menú, botones y formularios. Entrega el archivo completo listo para abrirse en cualquier navegador moderno. --- ## 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> ```

--- URL de la captura de referencia: https://www.designprompting.com/themes/token-aurora/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/token-aurora/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 **Token Aurora** (podcast y contenido de audio) siguiendo exactamente el estilo visual y estructural del sitio analizado. Utiliza **HTML5** y **Tailwind CSS vía CDN** en un único archivo, con **JavaScript vanilla** para interactividad (menú hamburguesa, carrusel de testimonios, contador animado y apertura/cierre del carrito). **Paleta de colores** (usar en Tailwind config inline): - #0A0A0A (casi negro) → gray-900 - #FFFFFF (blanco) → white - #FF5722 (naranja vibrante) → orange-600 - #212121 (gris oscuro) → gray-800 - #F5F5F5 (gris claro) → gray-100 **Tipografía**: `Inter` para todo el sitio, importada desde Google Fonts (``). **Estructura**: 1. **Header (navbar)** – logo a la izquierda, enlaces de navegación (Home, About, Podcast, Blog, Contact), botón "Suscríbete" visible en escritorio, icono de carrito con número de items, menú hamburguesa responsivo que despliega los enlaces en móvil. 2. **Banner hero** – fondo claro, título grande en negrita, párrafo descriptivo, botones primary ("Más info") y secondary con icono de play ("Escuchar ahora"), barra inferior con contador animado que muestra métricas (episodios, suscriptores, descargas, etc.) usando efectos de desplazamiento numérico. 3. **Sección Episodios destacados** – grid de 3 columnas (responsive a 1‑2‑3), cada tarjeta con imagen, título, autor y botón "Reproducir" (icono play), hover con sombra ligera. 4. **Testimonios** – carrusel simple (JS), cada slide muestra foto circular, nombre, breve comentario, fondo gris claro. 5. **CTA de suscripción** – bloque centrado con texto “Únete a la comunidad”, campo de email y botón "Suscribirme"; fondo con sutil degradado naranja‑gris. 6. **Footer** – 4 columnas: Navegación rápida, Recursos, Contacto (email, teléfono), Redes sociales (iconos SVG). Texto de copyright y enlace a política de privacidad. **Interactividad**: - Menú móvil: toggle de clase `hidden`/`block`. - Carrusel de testimonios: setInterval automático + controles manuales. - Contador animado: usar `requestAnimationFrame` para contar de 0 a los valores finales al cargar la sección. - Carrito simulado: al hacer clic en "Reproducir" de un episodio se añade un ítem ficticio al carrito y actualiza el número visible. **Requisitos técnicos**: - Todo el CSS proviene de Tailwind CDN (``) y configuraciones personalizadas vía `tailwind.config = {theme:{extend:{colors:{'primary':'#FF5722','dark':'#0A0A0A','light':'#F5F5F5'}}}}`. - No usar librerías externas de JS salvo para iconos SVG inline. - El HTML debe estar bien indentado y usar clases utilitarias de Tailwind para layout (flex, grid, spacing, typography, colores). - Incluir comentarios claros en el código indicando cada sección. - Optimizar para SEO básico: etiquetas ``, `<meta description>`, atributos alt en imágenes. - Garantizar accesibilidad: roles ARIA en menú, botones y formularios. Entrega el archivo completo listo para abrirse en cualquier navegador moderno. --- ## 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> ```