---

URL de la captura de referencia: https://www.designprompting.com/themes/autos-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/autos-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 un sitio web estático en un único archivo HTML que reproduzca el diseño visual y la estructura de la captura adjunta, con la marca ficticia **Autos Aurora** (concesionario digital de vehículos eléctricos y de alta gama). Claim de la marca: "Encuentra tu próximo coche eléctrico con asesoría real". Utiliza Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks) para animaciones y componentes interactivos.

**Paleta de colores** (colores dominantes extraídos de la captura; ajusta los matices finos mirando la imagen):
- #f8efe6 (~27% de la captura)
- #151417 (~25% de la captura)
- #fcf6ef (~14% de la captura)
- #f5ece3 (~12% de la captura)
- #986d58 (~12% de la captura)
- #cdbfb4 (~10% de la captura)

Asigna los roles según la captura: el color mayoritario suele ser el fondo (#f8efe6), el más oscuro el texto principal (#151417) y el más saturado el acento de botones y enlaces (#986d58). Verifica estos roles contra la imagen en la Fase 0.

**Tipografía**: identifícala en la Fase 0 a partir de la captura (serif/sans, pesos y tamaños) y usa una Google Font equivalente.

**Home — Sección por sección**:
1. Hero a pantalla completa con slider de modelos destacados, titular condensado en mayúsculas y CTA dual
2. Buscador rápido por marca, modelo, carrocería, año y rango de precio
3. Sección 'Conoce nuestra misión' con imagen lateral, párrafo editorial y bloque de calidad premium
4. Listado de coches en venta tipo grid con badge de oferta, precio, especificaciones (motor, transmisión, combustible) y agente asignado
5. Banner promocional horizontal con contador y CTA financiación
6. Tabs por categoría de vehículo (Sedán, SUV, Deportivo, Híbrido, Eléctrico)
7. Contadores animados de hitos (coches vendidos, clientes satisfechos, años, ciudades)
8. Carrusel de marcas distribuidas
9. Servicios postventa en tres columnas con icono
10. Testimonios de clientes en slider con foto y valoración
11. Últimas entradas del blog editorial en grid de tres tarjetas
12. CTA final con formulario de contacto rápido y dato de la concesión
13. Footer con cuatro columnas (marca, enlaces, contacto, newsletter)

**Requisitos técnicos**:
- Incluir `<script>` al final del body que gestione menú móvil, contadores animados, sliders y acordeones si la captura los muestra.
- Todas las clases deben ser de Tailwind (no CSS custom).
- HTML semántico (`header`, `nav`, `section`, `article`, `footer`).
- Añadir meta viewport y descripción genérica.
- No usar imágenes protegidas; emplear `https://picsum.photos/` como placeholders.
- El archivo debe poder abrirse directamente en el navegador y reproducir la experiencia completa.

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