# Prompt — Intelligent System (pegar tal cual en Claude / GPT)

Este archivo es **independiente**: abrí Claude o GPT en una conversación nueva, copiá todo el bloque entre las líneas ` ```text ` (o copiá todo este archivo) y adjuntá los 3 archivos de evidencia.

---

## Adjuntos que debés cargar junto con el prompt

1. **[`audit/screenshots/desktop-hero.png`](audit/screenshots/desktop-hero.png)** — vista del hero aislada, 1440×900. Sirve para ver la desproporción entre H1 y el dashboard.
2. **[`audit/screenshots/desktop-dashboard.png`](audit/screenshots/desktop-dashboard.png)** — solo el dashboard mockup (KPIs + tabla). Sirve para ver los issues 7-13 del §C).
3. **[`audit/screenshots/mobile-dashboard.png`](audit/screenshots/mobile-dashboard.png)** — dashboard a 390px. Sirve para confirmar ilegibilidad del sidebar.
4. **[`audit/screenshots/desktop.png`](audit/screenshots/desktop.png)** — vista 1440×900 full-page.
5. **[`audit/screenshots/tablet.png`](audit/screenshots/tablet.png)** — vista 768×1024 full-page.
6. **[`audit/screenshots/mobile.png`](audit/screenshots/mobile.png)** — vista 390×844 full-page.
7. **[`audit/source.html`](audit/source.html)** — HTML renderizado en producción (32 KB minificado).
8. Carpeta **[`logo/`](logo/)** con los 4 SVG ya generados: [`logo-mark.svg`](logo/logo-mark.svg), [`logo-mark-dark.svg`](logo/logo-mark-dark.svg), [`logo-wordmark.svg`](logo/logo-wordmark.svg), [`favicon.svg`](logo/favicon.svg).

Si el agente tiene acceso directo al repo del sitio, agregá también los `.tsx/.jsx` del Hero y de la Nav, que son los dos componentes críticos.

---

## Bloque del prompt (copiable)

```text
# Contexto
Estás editando la landing de https://intelligentsystem-roan.vercel.app/.
Stack: Next.js (Turbopack), Tailwind, CSS custom props. Tipografía Inter.
Paleta: --primary #5b5bd6, --primary-hover #4a4ac7, --bg-base #f8f8f9,
        --text-main #0f0f10, --text-muted #6b6b80, --border-subtle #0000000e.
Logo actual: /intelligent_system.png (PNG 500×500) usado a h-10.
Logo nuevo provisto: /logo/logo-mark.svg, /logo/logo-wordmark.svg, /logo/favicon.svg.

# Cambios requeridos

## A) Logo (crítico)
1. Reemplazar la referencia del header y footer <img src="/intelligent_system.png" ...>
   por <img src="/logo/logo-mark.svg" alt="Intelligent System — Inicio" width="40" height="40">.
2. Envolver el logo en <a href="/" aria-label="Inicio">.
3. Cambiar el favicon:
   <link rel="icon" type="image/svg+xml" href="/logo/favicon.svg">
4. Conservar /intelligent_system.png solo como /og-image.png (1200×630) si se usa en redes.

## B) Nav fija responsive
1. Convertir el <nav> actual a <header class="fixed inset-x-0 top-0 z-50">
   con bg-white/70 backdrop-blur-md border-b border-border-subtle y md:bg-transparent md:border-none.
2. Implementar mobile menu con un botón hamburguesa (<button aria-expanded aria-controls>)
   que abre un <div role="dialog" aria-label="Menú"> con los links Servicios / Portafolio / Proceso / Agendar.
3. Reducir py-5 → py-3 md:py-4.
4. Asegurar contraste WCAG AA: nav links 16px+ sobre fondo translúcido.

## C) Hero
1. Quitar los <br> duros del H1. Dejar que el navegador haga wrapping natural.
2. Escalar tipografía: text-4xl sm:text-5xl md:text-7xl lg:text-[82px].
3. Ajustar pt-40 → pt-28 md:pt-40 (más aire en mobile).
4. Sustituir el dashboard mockup actual por una versión simplificada en mobile:
   - <md: solo 2 KPI cards (Leads, Conversión) con números grandes y 1 fila destacada.
   - >=md: layout actual.
5. En el dashboard mockup: reemplazar `border border-black/[0.06]` en cada KPI por
   `shadow-card` (token existente).
6. Dashboard mockup — KPIs: unificar color de los números al `--primary` violeta;
   dejar verde solo en "Confirmados" y gris en el resto. Aplicar `tabular-nums`
   y `tracking-tighter` para que las 4 cifras alineen a la misma anchura.
7. Dashboard mockup — gap interno: subir `gap-2 p-3` a `gap-3 p-4` en el grid de
   KPIs; aumentar `p-4` general del mockup.
8. Reemplazar `shadow-2xl` del wrapper por `shadow-card` para evitar halo borroso
   cuando se anima con `animate-float`.
9. Reemplazar la barra de browser (3 dots macOS + URL `intelligentsystem.vercel.app`)
   por una barra de tabs del producto (`Pipeline · Leads · Closer · Analytics`)
   para vender el producto, no repetir la URL.
10. Reducir el sidebar a 2 items (`Leads` activo + `Embudo` inactivo) para no
    prometer tabs que no existen.
11. Alinear verticalmente las filas de clientes al borde inferior de la última
    fila de KPIs (justify-items-end o mt-auto en la última fila de la tabla).

## D) Borders / visuales
1. Auditoría de bordes redundantes en stats, servicios, proyectos, proceso. Consolidar.
2. Recortar los decorativos `blur-3xl`: en mobile usar w-[300px] h-[300px],
   mantener `pointer-events-none`.

## E) Form del CTA
1. Reemplazar inputs nativos por FormInput/FormSelect si ya existen en el repo.
2. Añadir validación visual con aria-invalid y mensaje de error visible.
3. Añadir honeypot (<input type="text" name="website" tabindex="-1" hidden>).

## F) Footer
1. Reemplazar el PNG por el SVG mark.
2. Quitar los href="#" huérfanos (Instagram/LinkedIn) o reemplazarlos por las URLs reales.
3. Añadir enlaces "Privacidad" / "Términos" en una fila inferior si los hay.

# Restricciones
- No introduzcas nuevas dependencias.
- No cambies la paleta ni la tipografía.
- Mantén el diseño compacto, evita bordes gruesos, sombras pesadas y colores chillones.
- Conserva todas las animaciones existentes (`animate-fade-in-up`).

# Criterio de aceptación
- Lighthouse mobile ≥ 90 en Performance, Accessibility, Best Practices, SEO.
- Sin overflow horizontal en 320–1440px.
- El logo se ve nítido a 16px (favicon) y a 40px (header).
- El nav permite acceder a todas las secciones en mobile vía menú hamburguesa.
- El H1 no rompe palabras a 320px ni a 1440px.

# Entregable esperado
Un patch / diff / propuesta de cambio en los archivos del repo
(idealmente Hero.tsx, Nav.tsx, Footer.tsx, layout.tsx) con el código
listo para commit. Si no podés tocar el repo, devolvé los snippets
exactos con la ruta del archivo a editar y la línea a modificar.
```

---

## Después de ejecutar el prompt

Pegá el resultado de la IA en `auditoria-respuesta-ia.md` (crear archivo nuevo) para tener trazabilidad: qué entendió, qué no entendió, qué cambios concretos propuso. Eso te sirve para revisar antes de mergear al sitio.

Si querés iterar: pegá en una nueva conversación "Iteración 2: cambié X por Y, ajustá Z" junto con el resultado previo.

---

## Ver también

- [Auditoría completa](auditoria.md) · [HANDOFF](HANDOFF.md) · [README](README.md) · [Showcase](index.html)
- [logo/README.md](logo/README.md) · [audit/findings.json](audit/findings.json)