--- URL de la captura de referencia: https://www.designprompting.com/themes/cargafacil/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/cargafacil/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 completo para la marca ficticia "CargaFácil" (logística y transporte) usando solo HTML estático, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emula la estructura y estilo del template analizado: - Paleta de colores: #0D0D0D (fondo principal), #FFFFFF (texto), #FF6600 (acentos y líneas), #F5F5F5 (secciones claras). - Tipografía: Inter (sans‑serif) para cuerpo y títulos, peso 400‑700. - Header: barra fija con logo SVG, menú de navegación con dropdown "Demo" y mega‑menú "Pages" (estructura de columnas con enlaces), enlaces rápidos a Service, Blog, Contact y botón de teléfono. Hamburger responsive para móvil. - Preloader: overlay centrado con logo y animación de letras que aparecen una a una (usar CSS keyframes y JS para añadir clase "visible" en secuencia). - Hero: sección a pantalla completa, fondo sólido #0D0D0D, etiqueta pequeña con línea decorativa, título h1 grande blanco, botón primary "Explorar ahora" con fondo #FF6600 y hover #E65500. - Sección servicios: grid 3 columnas (responsive a 1 en móvil), tarjetas con icono SVG, título y párrafo corto, borde superior #FF6600. - Estadísticas: fila con 4 bloques, número grande animado (contadores) y descripción, fondo #F5F5F5. - Testimonios: carrusel horizontal automático, tarjetas con foto redonda, nombre, cargo y comentario, fondo blanco y sombra ligera. - CTA secundaria: bloque ancho con fondo #FF6600, texto blanco centrado y botón secundario blanco borde #FF6600. - Footer: fondo #0D0D0D, 4 columnas: Sobre nosotros (texto breve), Enlaces rápidos (lista), Contacto (teléfono, email, dirección) y redes sociales (iconos SVG). Texto en gris claro #CCCCCC, enlaces en blanco con hover #FF6600. - Responsividad completa: usar clases Tailwind (container, mx-auto, grid, flex, hidden md:block, etc.). - Interactividad: dropdowns y mega‑menú con toggle JS, contador animado con IntersectionObserver, carrusel con setInterval y scroll suave, preloader ocultado al cargar. - No incluir contenido copiado del original; generar textos genéricos en español de España. - Añadir meta tags básicos (charset, viewport, título, descripción). - Exportar todo en un único archivo index.html que cargue Tailwind desde https://cdn.tailwindcss.com y el script al final del body. - Garantizar accesibilidad: atributos alt en imágenes, aria‑labels en menús y botones. --- ## 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 ```