# Auditoría UI/UX — Intelligent System

**URL auditada:** https://intelligentsystem-roan.vercel.app/
**Fecha:** 2026-07-20
**Stack detectado:** Next.js (Turbopack), Inter (system-ui fallback), Tailwind CSS, CSS custom props.
**Viewport base:** Desktop 1440×900 / Tablet 768×1024 / Mobile 390×844 (DPR 2).

---

## Resumen ejecutivo

La landing tiene un concepto sólido (paleta violeta coherente, jerarquía tipográfica clara, copy directo) pero **sufre problemas de responsive en mobile**, **un logo demasiado pesado para su tamaño de uso**, y **decisiones de marcado que rompen la jerarquía visual** (el H1 del hero, los `<br>` duros, la nav sin menú móvil, los bordes redundantes en el dashboard mockup).

Prioridad recomendada:

| # | Severidad | Área | Síntoma | Esfuerzo |
|---|---|---|---|---|
| 1 | Crítico | Logo header/footer | PNG 500×500 servido, renderizado a 40px en `<img class="h-10">`. El detalle se pierde, pesa más de lo necesario, mismo activo en 2 lugares. | Bajo |
| 2 | Crítico | Mobile (<768px) | Nav se oculta sin reemplazo. No hay menú hamburguesa. En 390px solo aparece el CTA "Agendar Reunión" como botón huérfano. | Bajo–Medio |
| 3 | Crítico | Hero mobile | Dashboard mockup ilegible (textos a 9px), H1 a 48px y `<br>` duros dejan "el" huérfano. | Medio |
| 4 | Alto | Padding hero | `pt-40` (160px) deja un hueco blanco visible encima del hero en mobile. | Trivial |
| 5 | Alto | Header scroll | Nav fijo sin fondo al hacer scroll: el contenido se mezcla con el hero. | Bajo |
| 6 | Alto | Borders / Shadow | Cada KPI del dashboard tiene `border border-black/[0.06]`. Ruido visual innecesario. | Trivial |
| 7 | Medio | Footer logo | Mismo PNG 500×500, otra vez a 40px. | Bajo |
| 8 | Medio | SEO markup | `<nav>` sin `<header>`, logo sin `<a href="/">`, falta `aria-label`. | Trivial |
| 9 | Medio | H1 partido | `<br>` duros calcan un layout de escritorio y rompen en mobile. | Trivial |
| 10 | Bajo | Hero decorativos | `div absolute blur-3xl` se salen del viewport en los 3 tamaños (right=1463/935/557). Padre con `overflow-hidden`, pero el segundo sale por la izquierda. | Trivial |

---

## 1. Inventario de páginas y secciones (1 página, 7 bloques + nav fija)

Auditada con Playwright (`audit.mjs` + `deep-audit.mjs`):

| # | Sección | Tag / clase | Altura desktop | Altura mobile | Notas |
|---|---|---|---|---|---|
| Nav | Nav fija | `<nav class="fixed top-0 left-0 right-0 z-50">` | 40px (logo) | Solo CTA | Sin menú mobile |
| 1 | Hero | `section pt-40 pb-24 px-6 overflow-hidden` | 1194 px | 1222 px | H1 + subtítulo + 2 CTAs + dashboard mockup |
| 2 | Stats bar | `section px-6 py-16` | 250 px | 420 px | 4 KPI cards (12+, 99.9%, <24h, 3x) |
| 3 | Servicios | `section px-6 py-16` | 534 px | 1064 px | 3 cards: Sistemas / Bots / Páginas |
| 4 | Proyectos | `section px-6 py-16` | 1131 px | 2063 px | 4 cards apiladas en mobile, 2×2 en desktop |
| 5 | Proceso | `section px-6 py-16` | 897 px | 1112 px | 5 steps numerados |
| 6 | CTA + form | `section px-6 py-16 mb-10` | 662 px | 1110 px | "¿Listo para escalar tu empresa?" + form |
| 7 | Footer | `footer border-t border-border-subtle` | 366 px | 834 px | 3 columnas + © + redes |

---

## 2. Hallazgos — Detalle por bloque

### 2.1 Nav fija (header)

**HTML actual (origen del problema):**

```html
<nav class="fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-300 py-5">
  <div class="w-full max-w-6xl mx-auto px-6 flex justify-between items-center transition-all duration-300 ">
    <img src="/intelligent_system.png" alt="Intelligent System" class="h-10 w-auto object-contain">
    <div class="hidden md:flex gap-8 text-sm font-medium text-text-muted">
      <a href="#servicios">Servicios</a>
      <a href="#portafolio">Portafolio</a>
      <a href="#proceso">Proceso</a>
    </div>
    <a href="#contacto" class="btn-primary text-sm py-2.5 px-5">Agendar Reunión</a>
  </div>
</nav>
```

**Issues:**
1. **No hay `<header>` semántico** — debería ser `<header>` con `<nav>` adentro para SEO/lectores de pantalla.
2. **Logo no es un link** — debería ser `<a href="/" aria-label="Inicio">` envolviendo el logo o el SVG.
3. **Falta `alt`** descriptivo — "Intelligent System" es vago; debería ser "Intelligent System — Inicio".
4. **Falta menú móvil** — `hidden md:flex` desaparece los links en <768px sin reemplazo. Necesita un botón hamburguesa con drawer.
5. **Fondo transparente** — sin `bg-white/70 backdrop-blur-md border-b` el nav no tiene legibilidad al hacer scroll sobre el hero.
6. **Sin cambio de estilo al scroll** — la clase `transition-all duration-300` sugiere una intención de pill/contraer que no está implementada (no hay `useEffect` que observe el scroll).
7. **py-5 (20px)** — vertical-padding generoso. En mobile con el botón CTA de 40px queda un header de ~80px de alto, comiendo viewport.

### 2.2 Hero

**HTML del H1 (origen del problema):**

```html
<h1 class="text-5xl md:text-7xl lg:text-[82px] font-bold tracking-tight mb-6 leading-[1.08]">
  Construimos el<br><span class="text-gradient">software</span> que escala<br>tu empresa.
</h1>
```

**Issues:**
1. **`<br>` duros** — al achicar el ancho (mobile/tablet) el primer `<br>` deja "el" colgando en línea 1 y "software que escala" tiene que saltar de nuevo. La librería no recalcula los cortes para reflow. Resultado: `innerText` revela 3 líneas (`Construimos el / software que escala / tu empresa.`), pero el `<br>` forzado deja "Construimos el" suelto cuando hay espacio.
2. **`text-5xl` mobile (48px)** — desproporcionado contra el subtítulo a 18px y los KPI a 9px. La escala tipográfica tiene un "salto" demasiado grande.
3. **`leading-[1.08]` y `tracking-tight`** están bien calibrados para desktop, pero en 390px el tracking negativo más el tamaño 48px crea líneas estrechas que rompen palabras si Justify-Text estuviera aplicado (no lo está, pero la pista visual es de apretado).
4. **`text-gradient` solo en "software"** — nice pero inconsistente con el resto de la marca (no hay gradiente en otros lugares).
5. **Subtítulo**: `max-w-2xl` está bien, pero `text-lg md:text-xl` mantiene tamaño de copy general muy parecido al H1 mobile.

### 2.3 Dashboard mockup (hero lower)

```html
<div class="grid grid-cols-12 gap-3 p-4">
  <aside class="col-span-2 /* sidebar CRM/Leads/Analytics/Bots/Config */">
    <div class="text-[9px] md:text-xs">CRM</div>
    <div class="text-[9px] md:text-xs bg-primary text-white">Leads</div>
    ...
  </aside>
  <div class="col-span-10">
    <div class="grid grid-cols-4 gap-2">
      <div class="bg-white rounded-xl border border-black/[0.06] p-3">
        <div class="text-base md:text-2xl font-bold" style="color:#5b5bd6">12</div>
        <div class="text-[9px] md:text-xs">Leads nuevos</div>
      </div>
      ...x4 (12 Leads / 4 Contactos / 3 Reuniones / 89% Conversión)
    </div>
    <table>/* Barbería Control / Salón Macaria / Restaurante El Fugaz */</table>
  </div>
</div>
```

**Issues:**
1. **Sidebar 5 items en `col-span-2`** — a 390px cada item queda de ~60px de ancho con texto a 9px: ilegible, se vuelve un smear. El `bg-primary` (violeta) sobre "Leads" es el único indicador útil pero no compensa.
2. **`text-[9px]`** — debajo del umbral legible (recomendado WCAG: ≥12px para body, ≥14px para ui).
3. **Bordes duplicados** — 4 KPI cards + 3 filas de tabla = 7 bordes `border-black/[0.06]` consecutivos. En blanco crea una grilla cuadriculada que distrae.
4. **Status pills (Contactado, Pendiente, Activo)** a 9px — sub-pixel rendering inconsistente en mobile (en la captura tablet se ven borrosos).
5. **`rounded-xl` + sombra declarada en tokens pero no aplicada** — las cards usan `border` en vez de `shadow-sm`, generando la sensación de "wireframe en vez de producto".
6. **No es responsive por debajo de 768px** — el grid `grid-cols-12` con sidebar 2 + main 10 colapsa mal. Falta un breakpoint que oculte el sidebar y muestre solo KPIs + 1 fila destacada.
7. **KPIs sin sistema de color** — los cuatro números usan colores arbitrarios (`12` violeta, `4` verde, `3` naranja, `89%` azul) sin relación con la paleta del sitio (que es violeta) ni con su significado. Verde = "Confirmados" funciona, pero los otros 2 colores parecen aleatorios. Recomendado: violeta coherente en todos + un punto de color solo en el dato más destacado (89% Conversión).
8. **Grid 4 cols sin `min-w-0`** — el card "89%" termina más ancho visual que "12" porque incluye el símbolo `%` más el padding. La grid no compensa y el porcentaje "se pega" al `Confirmados` y `Pendientes` que están al lado. Aplicar `tabular-nums` y/o `tracking-tighter` para que las 4 cifras se vean alineadas a la derecha con el mismo ancho.
9. **Gap interno `gap-2 p-3`** — las 4 cards están casi pegadas entre sí, los números `text-2xl` sobresalen visualmente. Subir a `gap-3` y `p-4` con `shadow-card` en vez de border.
10. **Browser chrome redundante** — la barra de macOS con los 3 dots + address `intelligentsystem.vercel.app` está repitiendo información que ya está en la URL del sitio. Ocupa ~50px de alto sin valor agregado. Considerar reemplazar por una barra de tabs contextuales (`Pipeline · Leads · Closer · Analytics`) que venda el producto.
11. **Falta alineación vertical KPIs ↔ tabla de clientes** — la fila "Barbería Central" arranca a una altura ligeramente inferior a la del KPI "89% Conversión". El usuario percibe ese desfase como "el dashboard no encaja".
12. **Animación `animate-float` + `shadow-2xl`** — la sombra se mueve con el float creando un halo borroso. En devices de baja potencia (mobile gama media) el shadow animado es jank-y. Reemplazar `shadow-2xl` por `shadow-card` y mantener `animate-float` solo si se conserva la jerarquía visual.
13. **Sidebar "Analytics" sin activo** — al ser un dashboard estático (no es producto funcional), `Analytics / Bots / Config` son ruido. Si el dashboard es decorativo, debería tener solo 2 items reales (`Leads · Activo`, `Embudo · inactivo`) para no prometer tabs que no existen.

### 2.4 Stats bar (12+ / 99.9% / <24h / 3x)

**OK estructuralmente** (`grid-cols-2 md:grid-cols-4`). Issues menores:
- Falta unidad o contexto en el 99.9% ("de uptime" sí aparece, bien).
- "3x ROI promedio" — ambigüedad, ¿vs qué baseline? Aceptable para marketing.

### 2.5 Servicios (3 cards)

**Issues:**
- Iconos son SVGs `lucide` 20×20 a `w-11 h-11` contenedor — bien.
- Tag "LO QUE CONSTRUIMOS" arriba en `text-xs uppercase tracking-widest` color `text-primary` — bien.
- Falta CTA por tarjeta: el usuario tiene que scrollear hasta el form para convertir. Sugerido: link "Ver Servicio →" en cada card.
- Una sola imagen por servicio (no hay) — está bien, ahorra peso.

### 2.6 Proyectos (4 cards)

**Issues:**
- Tags (Whastapp / E-commerce / Reservas / ERP / POS / etc.) en cada card — útiles.
- Hover state activo (no confirmado por captura estática): la maqueta muestra `Ver proyecto →` que aparece al hover — bien, pero el color `text-primary` requiere suficiente contraste contra `bg-white`.
- Dos cards con imagen BG (`Premium Autos` y `Sistema ERP` con mockups superpuestos) y dos con foto (`Barbería Don Cornejo`, `Bloomed Studio`). Coherencia visual baja — debería elegirse un lenguaje único o separar layouts.

### 2.7 Proceso (5 steps)

**Issues:**
- Steps numerados `01 / 02 / 03 / 04 / 05` en caja `bg-primary-soft` violeta-claro — bien.
- En mobile (`<768px`) el timeline se aplana en lista vertical; falta un conector vertical sutil (línea de tiempo) entre los steps para mantener lectura secuencial.

### 2.8 CTA + form

**Issues:**
- Inputs nativos (`<input>`, `<textarea>`) sin `FormInput`/`FormSelect` de Chakra UI — el repo de Elena usa wrappers y convendría alinearse con ese patrón para reusabilidad. **Crítico si el proyecto comparte design system con Elena.**
- Falta validación visible (HTML `required` está pero no se aprecia el feedback). No hay `aria-invalid` ni mensajes de error.
- Botón "Enviar Solicitud →" violeta — bien contrastado.
- Falta CAPTCHA/honeypot (básica seguridad anti-spam).

### 2.9 Footer

**Issues:**
1. Mismo PNG 500×500 que el header. Reemplazar por SVG mark.
2. `border-t border-border-subtle` (ya tenemos eso bien).
3. "<a href=\"#\">Instagram</a>" / "<a href=\"#\">LinkedIn</a>" — `href="#"` no es buena práctica; debería ser el URL real o quitarse.
4. Falta link "Privacidad / Términos" legal.
5. "Hecho con ❤️ en Costa Rica" — bien como detalle humano.

### 2.10 Decorativos (radiales con `blur-3xl`)

```css
.absolute.top-0.right-0.w-96.h-96.bg-primary/[0.04] { /* sale por la derecha */ }
.absolute.-top-32.left-1/4.w-[600px].h-[600px].rounded-full.bg-primary/[0.07] { /* sobresale izquierda */ }
```

**Issues:**
- En desktop el primero se extiende 23px fuera (`right=1463` vs `winW=1440`).
- En tablet y mobile, ambos sobresalen por izquierda/derecha. Padre con `overflow-hidden` los recorta pero consumen GPU en blur. Considerar mover el blur al fondo de la sección con `pointer-events: none; user-select: none;` y reducir radio en mobile a `w-[300px] h-[300px]`.

---

## 3. Logo — comparación y propuesta

### Logo actual

- Archivo: `intelligent_system.png` (500×500 px, JPEG/PNG).
- Concepto: isotipo "C + chips + curva tecnológica" + wordmark "Intelligent System" + tagline "CHATBOTS & SOLUCIONES INTELIGENTES".
- Uso real: `<img class="h-10 w-auto object-contain">` → render a 40px de alto (header y footer).
- Problemas:
  1. **Asset 12× más grande que su tamaño de uso**: en mobile @2x se sirven 1178×1178 px efectivos para un display de 80 px. Bytes innecesarios.
  2. **Tagline ilegible**: "CHATBOTS & SOLUCIONES INTELIGENTES" desaparece a 40px.
  3. **Favicon derivado**: `icon.png?icon.3kt8rk7h87zus.png sizes="500x500"` hereda el mismo problema para tabs/bookmarks.
  4. **Sin tema dark/claro**: una sola versión no se adapta a futuros modos.

### Logo propuesto (en este repo)

Diseñado respetando la paleta `#5b5bd6` / `#4a4ac7` y la fuente Inter, en 4 variantes:

| Archivo | Uso sugerido | viewBox |
|---|---|---|
| [`logo/logo-mark.svg`](logo/logo-mark.svg) | Nav, footer, avatar | 0 0 64 64 |
| [`logo/logo-mark-dark.svg`](logo/logo-mark-dark.svg) | Sobre fondos claros en secciones dark | 0 0 64 64 |
| [`logo/logo-wordmark.svg`](logo/logo-wordmark.svg) | Header hero, firmas de email, OG image | 0 0 280 64 |
| [`logo/favicon.svg`](logo/favicon.svg) | `<link rel="icon" type="image/svg+xml">` | 0 0 64 64 |

**Concepto:**
- Cuadrado violeta redondeado (rx 14) como contenedor.
- Antena del robot (`circle` + `rect`) en la parte superior.
- Cabeza del robot (`<rect>` rounded) con las letras **IS** dentro en bold (peso 800).
- 3 puntos LED en la base del robot, opacidades 0.85 / 0.6 / 0.85 — pista visual de "señal/conectividad".
- Para favicon, simplificado a solo "IS" grande (sin detalles) para ≤16px.

**Ventajas:**
- Vectorial, escala infinita.
- ~1.5 KB por archivo, total ~5 KB las 4 variantes vs ~80–200 KB estimados del PNG original.
- Coherente con `--primary: #5b5bd6`.
- Funciona como isotipo solo (mark) y como brand (wordmark).

### Cambios a aplicar en producción

1. Reemplazar `/intelligent_system.png` por [`/logo/logo-mark.svg`](logo/logo-mark.svg) en `<img>` del nav y footer.
2. Reemplazar `/icon.png` por [`/logo/favicon.svg`](logo/favicon.svg) con `<link rel="icon" type="image/svg+xml" href="/logo/favicon.svg">`.
3. (Opcional) Conservar el PNG viejo solo para Open Graph image (`og:image`) donde sí se necesita un artefacto grande.
4. Wrapper el logo del nav: `<a href="/" aria-label="Intelligent System — Inicio">…</a>`.

---

## 4. Estructura artifacts/ (Tailscale funnel ready)

```
artifacts/
├── [README.md](README.md)                ← este archivo (índice)
├── [auditoria.md](auditoria.md)             ← reporte completo (este doc)
├── [HANDOFF.md](HANDOFF.md)                ← resumen ejecutivo + 3 caminos de acción
├── [PROMPT.md](PROMPT.md)                 ← prompt IA listo para copiar
├── [index.html](index.html)                ← showcase interactivo
├── audit/
│   ├── [audit.mjs](audit/audit.mjs)            ← script Playwright multi-viewport
│   ├── [deep-audit.mjs](audit/deep-audit.mjs)       ← DOM profundo (header, logo, svgs)
│   ├── [findings.json](audit/findings.json)        ← snapshot de evidencia
│   ├── [deep-desktop.json](audit/deep-desktop.json)
│   ├── [deep-mobile.json](audit/deep-mobile.json)
│   ├── [source.html](audit/source.html)          ← HTML renderizado (1 línea, 32 KB)
│   ├── [package.json](audit/package.json)
│   └── screenshots/
│       ├── [desktop.png](audit/screenshots/desktop.png)      ← 1440×5073 full-page
│       ├── [tablet.png](audit/screenshots/tablet.png)       ← 768×5552 full-page
│       └── [mobile.png](audit/screenshots/mobile.png)       ← 390×7865 full-page
└── logo/
    ├── [README.md](logo/README.md)            ← guía de uso y migración
    ├── [logo-mark.svg](logo/logo-mark.svg)        ← isotipo 64×64
    ├── [logo-mark-dark.svg](logo/logo-mark-dark.svg)
    ├── [logo-wordmark.svg](logo/logo-wordmark.svg)    ← wordmark con marca 280×64
    └── [favicon.svg](logo/favicon.svg)         ← favicon simplificado
```

### Exponer vía Tailscale Funnel

```bash
# Servir artifacts/ en local
cd ~/code/artifacts
python3 -m http.server 8765 --bind 127.0.0.1

# En otra terminal, exponer al tailnet
tailscale funnel 8765
# Tailscale devolverá una URL https://<node>.<tailnet>.ts.net/
```

Sugerido: un `index.html` en artifacts/ con thumbnails + links a este `auditoria.md` y al showcase de logos.

---

## 5. Prompt listo para pasar a una IA (Claude / GPT)

Pegar el bloque siguiente en una conversación nueva con el contexto que sigue.

```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).

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

---

## 6. Próximos pasos

1. Crear `index.html` showcase en `artifacts/` (para tailnet).
2. Validar el logo nuevo contra el sitio real tras aplicar cambios.
3. Re-correr `audit.mjs` y comparar `screenshots/desktop.png` y `screenshots/mobile.png` antes/después.
4. Si quieres, exponer los screenshots viejos en un `audit/before/` y los nuevos en `audit/after/`.