# HANDOFF — Intelligent System

> Página auditada: https://intelligentsystem-roan.vercel.app/
> Repo analizado: solo el HTML renderizado en Vercel (no tenemos acceso al código fuente).
> Stack detectado: Next.js + Tailwind + CSS custom props + Inter.

---

## 1. Evidencias (capturas + snapshots)

| Archivo | Qué prueba |
|---|---|
| [`audit/screenshots/desktop.png`](audit/screenshots/desktop.png) (1.1 MB) | Vista 1440×900 full-page. Dashboard mockup, todos los proyectos, proceso, CTA. |
| [`audit/screenshots/tablet.png`](audit/screenshots/tablet.png) (884 KB) | Vista 768×1024 full-page. Stats 4 cols, proyectos 2 cols. |
| [`audit/screenshots/mobile.png`](audit/screenshots/mobile.png) (820 KB) | Vista 390×844 full-page. Dashboard ilegible a 9px, nav sin menú. |
| [`audit/findings.json`](audit/findings.json) (16 KB) | Snapshot JSON: secciones, overflow por viewport, imágenes, SVGs, copy, CSS vars, headings. |
| [`audit/deep-desktop.json`](audit/deep-desktop.json) + [`deep-mobile.json`](audit/deep-mobile.json) | DOM profundo del header, H1, dashboard, footer logo. |
| [`audit/source.html`](audit/source.html) (32 KB) | HTML minificado servido en producción, una sola línea. |
| [`audit/recursos/logo-antes.png`](audit/recursos/logo-antes.png) (165 KB) | PNG original 500×500 descargado para comparativo. |
| [`audit/audit.mjs`](audit/audit.mjs) + [`deep-audit.mjs`](audit/deep-audit.mjs) | Scripts Playwright reproducibles. Re-correr con `bun run audit.mjs` desde `audit/`. |

---

## 2. Mejoras — top 5 priorizadas

### P0 · Logo PNG → SVG
- **Ahora:** `/intelligent_system.png` (500×500) renderizado a 40px en nav y footer. ~80–200 KB en el bundle.
- **Cambio:** reemplazar por [`logo/logo-mark.svg`](logo/logo-mark.svg) + favicon nuevo.
- **Esfuerzo:** 10 min. Cambia 1 línea de HTML, 1 de favicon.

### P0 · Nav sin menú mobile
- **Ahora:** `<div class="hidden md:flex">` desaparece los links en <768px sin reemplazo.
- **Cambio:** botón hamburguesa + drawer móvil con Servicios / Portafolio / Proceso / Agendar.
- **Esfuerzo:** 1–2 h. Hay que tocar estado (`useState`) y agregar animación.

### P0 · Hero mobile ilegible
- **Ahora:** H1 a `text-5xl` (48px) + `<br>` duros + dashboard mockup con textos a 9px.
- **Cambio:** quitar `<br>`, escalar a `text-4xl sm:text-5xl md:text-7xl lg:text-[82px]`, simplificar dashboard móvil a 2 KPIs grandes.
- **Esfuerzo:** 30 min.

### P1 · Header sin fondo + pt-40 del hero
- **Ahora:** nav fijo transparente, se mezcla con el hero al scrollear. Hero con `pt-40` (160px) deja hueco blanco en mobile.
- **Cambio:** `bg-white/70 backdrop-blur-md border-b` en nav. `pt-28 md:pt-40` en hero.
- **Esfuerzo:** 15 min.

### P1 · Footer + inputs del form
- **Ahora:** footer con `<a href="#">` en Instagram/LinkedIn, mismo PNG del header. Form con inputs nativos sin validación accesible.
- **Cambio:** SVG mark en footer, links reales o quitarlos, `aria-invalid` + honeypot en form.
- **Esfuerzo:** 30 min.

> Todas las mejoras viven detalladas con HTML original vs propuesto en [`auditoria.md`](auditoria.md) (secciones 2.1–2.10).

---

## 3. Cómo aplicar las mejoras — 3 caminos

### Camino A · Pasárselo a una IA (lo más rápido)

El prompt listo está en [`auditoria.md`](auditoria.md) §5. **Copiá y pegá** ese bloque en una conversación nueva con Claude / GPT y adjuntá:

1. [`audit/source.html`](audit/source.html) (HTML renderizado).
2. [`audit/screenshots/desktop.png`](audit/screenshots/desktop.png) + [`mobile.png`](audit/screenshots/mobile.png) (evidencia visual).
3. Los SVG del logo ([`logo/`](logo/)) — si la IA tiene que producirlos, sirve el actual + los nuevos como referencia.
4. Si tenés acceso al repo, agregá también los archivos `.tsx/.jsx` del componente Hero y del nav.

Resultado esperado: diff de cambios en `Hero.tsx`, `Nav.tsx`, `Footer.tsx`, `app/layout.tsx` (favicon).

### Camino B · Pasárselo a un dev humano

Compartí este [`HANDOFF.md`](HANDOFF.md) + [`auditoria.md`](auditoria.md) + el directorio [`logo/`](logo/). El dev humano lee el top 5 (sección 2 de HANDOFF), abre el resto del detalle si necesita HTML/CSS concreto, y aplica los cambios localmente antes de commitear a Vercel.

Sugerencia de mensaje:

```
Hola — adjunto auditoría UI/UX del sitio. El top 5 (en HANDOFF.md §2)
es lo prioritario y son cambios pequeños. Si tenés dudas sobre dónde
tocar cada cosa, abrí [`auditoria.md`](auditoria.md) §2.X que tiene el HTML original
y el snippet propuesto.
```

### Camino C · Aplicarlo vos mismo (manual)

Si tenés acceso al repo local:

```bash
# 1. Reemplazar el logo del nav
#    src/components/Header.tsx (o similar)
#    <img src="/intelligent_system.png" ...>
#    →  <img src="/logo/logo-mark.svg" alt="Intelligent System — Inicio" width="40" height="40" />

# 2. Favicon en app/layout.tsx o similar
#    icons: [{ rel: "icon", url: "/icon.png", sizes: "500x500" }]
#    →  icons: [{ rel: "icon", type: "image/svg+xml", url: "/logo/favicon.svg" }]

# 3. Quitar <br> duros del H1 y ajustar tipografía
#    (ver auditoria.md §2.2)

# 4. Background al nav al hacer scroll
#    onScroll → setIsScrolled(true) → className condicional

# 5. Menú mobile con hamburguesa
#    useState isOpen, drawer con transition
```

### Estructura de archivos en producción (nueva)

```
public/
  logo/
    logo-mark.svg       ← nav, footer
    logo-mark-dark.svg
    logo-wordmark.svg   ← hero alt, OG image
    favicon.svg        ← reemplazar /icon.png
  og-image.png         ← conservar el PNG viejo solo acá (1200×630)
```

---

## 4. Cómo validar que las mejoras quedaron bien

```bash
cd ~/code/artifacts/audit
bun run audit.mjs       # nuevo screenshots/ → comparar vs originales
```

Comparar `before/` (los actuales) vs `after/` (los nuevos):

| Métrica | Antes | Objetivo |
|---|---|---|
| Overflow horizontal 320–1440 | (mobile dashboard quizá) | 0 px en todo el rango |
| H1 sin palabras rotas | 1 (`software`) | 0 |
| Lighthouse mobile perf | sin medir | ≥ 90 |
| Lighthouse a11y | sin medir | ≥ 95 |
| Logo favicon legible | NO | SÍ |

---

## 5. Estado del funnel / serve

`tailscale funnel` está **activo y público**:
URL: `https://macbook-pro-de-elmer.tail2a2809.ts.net/`

Lo que pasa en tu Mac local: el DNS del sistema no resuelve `.ts.net`.
Para verlo desde Safari sin otro dispositivo:

```
Tailscale.app → Settings → DNS → Use Tailscale DNS (activar)
```

Y para apagarlo cuando termines:

```bash
tailscale funnel --https=443 off
kill 97568    # el http.server (PID cambia si lo reiniciás)
```

---

**Próximo paso natural:** elegir Camino A, B o C de §3 y disparar.