---

URL de la captura de referencia: https://www.designprompting.com/themes/colaluxe/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/colaluxe/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 **ColaLuxe** (grooming de mascotas) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. Reproduce fielmente la **estructura y estilo visual** del sitio analizado: 

- **Paleta de colores**: #2C3E50 (azul oscuro), #F39C12 (ámbar), #ECF0F1 (gris muy claro), #FFFFFF (blanco), #34495E (gris medio). 
- **Tipografía**: `Inter` para cuerpo y `Playfair Display` para títulos, importados desde Google Fonts. 
- **Header**: barra transparente que se vuelve sólida al hacer scroll, logo a la izquierda, menú central con enlaces (Home, About, Services, Contact), ítem "Pages" con dropdown multi‑columna, botón primario "Get in touch" visible solo en móvil. 
- **Hero**: sección de ancho completo, fondo ilustrativo (placeholder), título grande en Playfair, subtítulo en Inter, botón CTA "Reserva tu cita". 
- **Bloque de Servicios**: grid 3‑columna, cada tarjeta con icono circular, título en mayúsculas, breve texto. 
- **Galería**: carrusel simple (sin librería) con cuatro imágenes de mascotas, controles de flecha y dots. 
- **Testimonios**: cards en columna sencilla, foto circular, nombre, cita en cursiva. 
- **Paquetes de Precio**: tres cards con plan básico, premium y deluxe, resaltado el medio, incluye lista de características y botón "Seleccionar". 
- **Formulario de Reserva**: campos nombre, email, teléfono, fecha, hora, botón enviar. Validación mínima con JS. 
- **Footer**: fondo gris oscuro, columnas de enlaces (Company, Services, Legal), iconos de redes sociales, texto de copyright. 

**Requisitos técnicos**:
- Usa la CDN de Tailwind v3 (`<script src="https://cdn.tailwindcss.com"></script>`). 
- Añade `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap');` en un `<style>` interno.
- Implementa el menú dropdown y el carrusel con JavaScript puro (event listeners, toggle classes). 
- Asegura que el sitio sea responsive: header colapsa en móvil, grid se vuelve 1‑columna, hero texto centrado. 
- No incluir textos o marcas originales; generar copy original en español (España) siguiendo los bloques descritos. 
- Mantén una única página `index.html` que incluya todas las secciones descritas (Home, About, Services, Contact) con anclajes internos (`#about`, `#services`, etc.). 
- Añade comentarios claros en el código para cada bloque. 

Entrega el código completo listo para guardar como `index.html`.

---

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