Tu web de servicios, hecha con Claude

Con el brief.md que te adjunto, armá el plan de mi sitio web antes de diseñarlo. Pensalo para un negocio de servicios cuyo objetivo es conseguir consultas o reservas.

Entregame un documento plan-del-sitio.md con:
1. Cliente ideal: un párrafo con su situación, sus 3 problemas principales, lo que quiere lograr y sus objeciones.
2. Mensaje: la promesa principal (título de la home), una bajada y 3 variantes alternativas del título.
3. Mapa del sitio: cada página con su objetivo, su URL (corta, en minúsculas, con guiones) y su llamado a la acción.
4. Home sección por sección (en orden): objetivo de la sección, título, texto y botón. Escribí los textos reales, no relleno, en el tono de voz del brief.
5. Las demás páginas con la misma estructura.
6. SEO de cada página: la búsqueda principal que debería atacar (palabra clave), un title de hasta 60 caracteres y una meta description de hasta 155.
7. Lista de fotos e imágenes que necesito, con medidas sugeridas.

Reglas: un solo llamado a la acción principal en todo el sitio, textos cortos y escaneables, nada de frases vacías ("somos líderes", "soluciones integrales"). Si algo del brief no alcanza para decidir, preguntame antes de inventar.

Con mi brief.md (bloque 7: marca) armá un design system simple para mi sitio web y entregámelo como design-system.md.

Incluí:
1. Colores: principal, fondo, texto, secundario y uno de acento, con códigos HEX. Verificá que texto y fondo cumplan contraste WCAG AA.
2. Tipografías: una para títulos y una para textos (de Google Fonts o las que ya tengo), con tamaños para celular y compu.
3. Botones: primario y secundario (colores, radio de borde, tamaño mínimo de 44 px de alto).
4. Espaciados, ancho máximo del contenido y estilo de fotos (bordes, recortes).
5. Componentes que se repiten: tarjetas de servicios, testimonios, preguntas frecuentes, pie de página.
6. Qué evitar para que no parezca una plantilla genérica.

Si tengo logo o colores propios, respetalos. Si no tengo, proponeme 2 opciones y esperá a que elija.

Vas a construir el sitio web de mi negocio de servicios. En esta carpeta tenés:
- contenido/brief.md (quién soy, a quién le vendo, qué ofrezco, objetivo de la web)
- contenido/plan-del-sitio.md (páginas, secciones, textos y SEO de cada página)
- contenido/design-system.md (colores, tipografías y componentes)
- contenido/imagenes/ (logo y fotos)

Antes de escribir código:
1. Leé los tres documentos y decime en 5 líneas qué entendiste del negocio y del objetivo de la web.
2. Si falta algo importante o hay contradicciones, preguntame. No inventes testimonios, números ni datos de contacto.
3. Creá un archivo CLAUDE.md en la raíz con: de qué se trata el sitio, la tecnología, la estructura de carpetas, el resumen del design system y todas las reglas de abajo. Leelo siempre antes de cada cambio.

Tecnología:
- HTML, CSS y JavaScript sin frameworks ni build, listo para subir tal cual a un hosting compartido (Hostinger, carpeta public_html). Página index.html y una carpeta por página para tener URLs limpias.
- Archivo .htaccess con: redirección a HTTPS, sin "www" (o con, como prefiera), caché de archivos estáticos y página 404 propia.

Velocidad (Google PageSpeed, objetivo 90+ en celular):
- Core Web Vitals: LCP menor a 2,5 s, CLS menor a 0,1 e INP menor a 200 ms.
- Imágenes en WebP, con width y height, tamaño adecuado para cada pantalla (srcset) y loading="lazy" salvo la principal de arriba, que va con prioridad alta.
- Tipografías alojadas en el sitio (woff2), solo los pesos que se usan, con preload de la principal y font-display adecuado para no generar saltos.
- CSS mínimo, sin librerías enteras para usar dos cosas. JavaScript solo si hace falta y diferido. Nada que bloquee la carga.
- Sin sliders pesados, videos de fondo ni animaciones que muevan el contenido.

Usabilidad y accesibilidad:
- Mobile first: primero se diseña para celular. Probalo a 360 px de ancho sin scroll horizontal.
- La promesa y el botón principal tienen que verse sin hacer scroll, en celular y en compu.
- Botones y links de al menos 44 x 44 px, textos de 16 px como mínimo, contraste WCAG AA.
- HTML semántico (header, nav, main, section, footer), un solo H1 por página y títulos en orden.
- Todas las imágenes con texto alternativo descriptivo, foco visible al navegar con teclado y formularios con etiquetas.
- Botón de WhatsApp (o el contacto principal) siempre fácil de encontrar, con mensaje precargado.

SEO:
- Cada página con su title, meta description, URL canónica y etiquetas Open Graph, usando lo que está en plan-del-sitio.md.
- Datos estructurados JSON-LD de tipo ProfessionalService (o LocalBusiness si atiendo presencial) con mis datos reales.
- sitemap.xml, robots.txt, favicon y enlaces internos entre páginas relacionadas.
- Textos reales y útiles, con la palabra clave de cada página usada de forma natural.

Forma de trabajo:
- Trabajá por etapas: 1) estructura y home, 2) resto de páginas, 3) SEO técnico y velocidad, 4) revisión final. Al terminar cada etapa decime qué hiciste, qué archivos tocaste y qué tengo que revisar.
- Mostrame la vista previa en compu y celular y esperá mi aprobación antes de pasar a la siguiente etapa.
- Trabajá en la rama dev. Nunca toques la rama main: esa se publica sola en mi web y se actualiza solo cuando yo diga "publicalo".
- No agregues funciones que no estén en el plan.

Empezá por el punto 1.

# Sitio web de [TU NEGOCIO] · Instrucciones para Claude

## Documentos que mandan
- contenido/brief.md · contenido/plan-del-sitio.md · contenido/design-system.md

## Tecnología
HTML + CSS + JS sin frameworks ni build. Se publica en Hostinger (public_html) desde la rama main.

## Reglas
- Velocidad: PageSpeed celular 90+, LCP < 2,5 s, CLS < 0,1, INP < 200 ms. Imágenes WebP con medidas.
- Usabilidad: mobile first, botón principal visible sin scroll, botones de 44 px, contraste AA.
- SEO: title, description, canónica y Open Graph por página, un H1, JSON-LD, sitemap.xml.
- No inventar testimonios, números ni datos de contacto.
- Trabajar en dev. Pasar a main solo cuando el dueño diga "publicalo".
- Antes de publicar cambios de diseño: mostrar vista previa en celular y compu.

Quiero hacer este cambio en la página [NOMBRE DE LA PÁGINA], sección [NOMBRE O DESCRIPCIÓN]:

Qué hay ahora: [lo que ves]
Qué quiero: [lo que querés, lo más concreto posible]
Por qué: [para que se entienda la intención]

[Adjuntá una captura con la zona marcada]

Antes de cambiarlo, confirmame qué vas a tocar. Cuidá que siga cumpliendo las reglas de CLAUDE.md (velocidad, usabilidad y SEO) y mostrame cómo queda en celular y en compu.

Antes de publicar, hacé una auditoría completa del sitio siguiendo CLAUDE.md y devolveme una tabla con: punto revisado, estado (OK / A corregir) y qué corregiste.

Revisá:
1. Velocidad: peso de cada página, imágenes sin optimizar, tipografías, CSS o JS que bloquean, LCP, CLS e INP.
2. Usabilidad: vista a 360 px, 768 px y 1440 px, botón principal visible sin scroll, tamaño de botones y textos, contraste, foco con teclado, textos alternativos.
3. SEO: title y meta description únicos, un H1 por página, canónicas, Open Graph, JSON-LD válido, sitemap.xml, robots.txt, links rotos y página 404.
4. Contenido: errores de ortografía, textos de relleno, datos de contacto correctos, links de WhatsApp y redes funcionando, páginas legales.

Corregí lo que esté mal y mostrame el resultado. Después te paso el informe de PageSpeed Insights para ajustar lo que falte.

Este es el informe de PageSpeed Insights de mi sitio (celular). Ordená los problemas de mayor a menor impacto, explicame cada uno en una línea y corregilos uno por uno en la rama dev, sin romper el diseño. Al final decime qué puntaje esperás.

[PEGÁ ACÁ LOS PUNTOS DE "OPORTUNIDADES" Y "DIAGNÓSTICOS" O UNA CAPTURA]