# Manual de identidad — Sitio público labSoft

> **Ámbito:** landing, registro y **futuras páginas de marketing** (`layouts/public`).  
> **No aplica** al backoffice (admin / empleado / lab / super): esos layouts siguen
> el shell Modernize operativo y **no se rediseñan** con este manual.  
> **Referencia de estructura:** [SaasSpace (Tailgrids)](https://saasspace.demos.tailgrids.com/)  
> — se copian **secciones, jerarquía y ritmo**, **no** la paleta del demo.  
> **Colores y tipografía:** tokens Modernize ya usados en `public/css/app.css`.

---

## 1. Principios

| Principio | Qué significa en labSoft |
|-----------|--------------------------|
| **Estructura SaaS, alma clínica** | Layout tipo product landing (hero centrado, preview, trust, features, trial, CTA). Copy y mockups hablan de laboratorio, no de “creativity tools”. |
| **Una sola paleta** | Solo tokens `--lb-*`. Nunca hex del demo SaasSpace (`#3758f9`, etc.). |
| **Scope estricto** | Clases nuevas con prefijo `public-` (o bajo `body.public-site`). No tocar estilos globales del backoffice. |
| **Sin build tooling** | HTML + Bootstrap 5.3 + `app.css` + iconos Bootstrap Icons. Sin Tailwind en producción. |
| **Honestidad de producto** | **$0 en fase de desarrollo**; precios del software **por determinarse**; sin tarjeta; sin planes inventados de cobro. |
| **Mobile-first** | Nav colapsable, grids 1→2→3 columnas, preview legible en móvil. |

---

## 2. Tokens de marca (obligatorios)

Fuente de verdad: `:root` en `public/css/app.css`.

| Token | Valor | Uso público |
|-------|-------|-------------|
| `--lb-primary` | `#5d87ff` | CTAs, links, acentos, números hero |
| `--lb-primary-emphasis` | `#4a6cd9` | Hover de primary, degradados CTA |
| `--lb-secondary` | `#49beff` | Acentos suaves, barras mock |
| `--lb-success` | `#13deb9` | Checks, estados “ok” |
| `--lb-warning` | `#f6b51e` | Badges / estados pendientes (mock) |
| `--lb-danger` | `#ef4444` | Errores de form (Bootstrap) |
| `--lb-info` | `#8754ec` | Variante de icono / acento |
| `--lb-heading` | `#2a3547` | Títulos y textos fuertes |
| `--lb-body` | `#5a6a85` | Párrafos, nav, meta |
| `--lb-bg` | `#eff4fa` | Fondo de página / secciones soft invertidas |
| `--lb-surface` | `#ffffff` | Cards, nav glass, footer |
| `--lb-border` | `#e5e5e5` | Bordes 1px |
| `--lb-radius` | `10px` | Controles y cards compactas |
| `--lb-shadow-card` | (ver CSS) | Elevación estándar app |
| Tipografía | **DM Sans** | 400–700; headings con letter-spacing negativo |

### Superficies pastel (iconos)

Usar clases existentes (no inventar hex):

- `bg-light-primary` · `bg-light-secondary` · `bg-light-success`
- `bg-light-warning` · `bg-light-danger` · `bg-light-info`

### Tokens solo marketing (bajo `.public-site`)

| Token | Rol |
|-------|-----|
| `--pub-radius-lg` | `16px` — feature cards, steps |
| `--pub-radius-xl` | `24px` — preview, price, CTA, form card |
| `--pub-shadow-soft` | Elevación suave de cards marketing |
| `--pub-shadow-float` | Preview y price featured |

---

## 3. Arquitectura de página (plantilla SaasSpace → labSoft)

Orden canónico de la home pública:

```
1. Nav sticky (logo · anchors · Entrar · Empezar gratis)
2. Hero centrado + CTAs + meta “$0 en desarrollo / precios por definir”
3. Preview mock del producto (chrome + sidebar + KPIs)
4. Trust / stats strip (incluye $0 y precios TBD)
5. Problema (PAS) + banner solución
6. Features beneficio-first (grid 3×2)
7. Split narrativo (lista de checks + card de flujo)
8. Cómo funciona (3 pasos) + CTA
9. Acceso early $0 (fase de desarrollo; precios por determinarse)
10. Para quién / no para quién
11. Escenarios por rol (no reseñas falsas)
12. FAQ (precio primero)
13. CTA banner final
14. Footer multi-columna + nota de pricing
```

### Pricing (copy obligatorio mientras no haya billing)

- **$0 en fase de desarrollo** — no “gratis para siempre”.
- **Precios del software por determinarse** — en hero, card de acceso, FAQ y footer.
- Sin badge “Recomendado” si solo hay un plan; sin “Cancela cuando quieras” si no hay cobro.
- Sin tiers inventados de cobro.

### Mapeo desde SaasSpace

| Sección demo | labSoft | Notas |
|--------------|---------|--------|
| Hero + dual CTA | Sí | Copy de lab + gratuidad en desarrollo |
| Dashboard preview | Mock HTML CSS | No screenshot real obligatorio |
| Trusted by logos | Stats operativos | Evitar logos falsos de clientes |
| Features grid | 6 funciones en lenguaje de beneficio | POS, lab, resultados, roles… |
| Pricing | Acceso early $0 | Fase de desarrollo; precios TBD |
| Testimonials | Escenarios por rol | No reseñas inventadas de marca ajena |
| FAQ | Sí | Objeción de precio primero |
| Blog | No en v1 | Reservado para SEO futuro |
| Newsletter / Contact form | No en v1 | Footer + registro bastan |
| CTA blocks | Banner final | Degradado primary + meta pricing |

---

## 4. Componentes reutilizables

### 4.1 Prefijo y layout

- Layout: `app/Views/layouts/public.php`
- Vistas: `app/Views/public/*`
- Estilos: bloque “Landing / sitio público” en `public/css/app.css`

### 4.2 Catálogo de clases

| Clase | Uso |
|-------|-----|
| `.public-nav` / `.public-nav-inner` | Barra superior glass |
| `.public-brand` | Logo + wordmark |
| `.public-nav-links` | Anchors desktop |
| `.public-btn-pill` | Botones CTA redondeados 999px |
| `.public-eyebrow` | Chip de sección (Funciones / Acceso / FAQ…) |
| `.public-hero` + `.public-hero-blobs` | Hero + fondos radiales |
| `.public-hero-title` / `.public-hero-lead` | H1 y subtítulo |
| `.public-preview-card` | Mock de producto |
| `.public-section` / `.public-section-soft` | Ritmo de secciones (bg bg vs surface) |
| `.public-section-title` / `.public-section-lead` | H2 de sección |
| `.public-stat-card` | Métrica trust |
| `.public-feature-card` | Feature con icono (beneficio-first) |
| `.public-pain-card` / `.public-solution-banner` | Bloque PAS (problema + solución) |
| `.public-check-list` | Bullets con check success |
| `.public-split-card` / `.public-split-row` | Flujo caja→lab→entrega |
| `.public-step-card` / `.public-step-num` | Pasos 01–03 |
| `.public-price-card` (+ `-featured`) / `.public-price-note` | Acceso early $0 + nota precios TBD |
| `.public-audience-card` | Para quién / no para quién |
| `.public-scenario-card` | Escenario por rol (no reseña) |
| `.public-faq-accordion` | FAQ Bootstrap accordion |
| `.public-quote-card` | Legacy; preferir escenarios |
| `.public-cta-banner` / `.public-cta-meta` | Bloque final + meta pricing |
| `.public-form-card` | Registro y forms marketing |
| `.public-footer*` | Footer multi-columna + nota $0 |

### 4.3 Iconografía

- Librería: **Bootstrap Icons** (`bi bi-*`).
- Contenedor: `.brand-icon.brand-icon-sm` + `bg-light-{tone}`.
- Tono por dominio sugerido:
  - POS / primary → `primary`
  - Lab / ok → `success`
  - Resultados / envío → `info`
  - Secondary accent → `secondary`
  - Alertas leves → `warning`

### 4.4 Botones

| Acción | Clase |
|--------|--------|
| Primaria (registro, CTA) | `btn btn-primary public-btn-pill` |
| Secundaria (aprender más) | `btn btn-outline-primary public-btn-pill` |
| Sobre banner primary | `btn btn-light … text-primary` / `btn-outline-light` |
| Nav desktop login | `btn btn-link public-nav-login` |

Tamaños: hero `btn-lg`; nav `btn-sm`.

### 4.5 Tipografía de marketing

| Elemento | Tratamiento |
|----------|-------------|
| H1 hero | `clamp(2rem … 3.25rem)`, weight 700, tracking −0.03em, max ~18ch en desktop |
| H2 sección | `clamp(1.55rem … 2.15rem)`, weight 700 |
| Lead | ~1.05–1.1rem, color body |
| Eyebrow | 0.8rem, weight 600, pill primary pastel |
| Meta hero | 0.875rem, checks success |

Un solo **H1** por página.

---

## 5. Contenido y tono

- **Idioma:** español (México / LatAm neutro operativo).
- **Voz:** clara, profesional, sin hype vacío (“revoluciona”, “AI-powered” sin base).
- **Promesas permitidas hoy:** **$0 en fase de desarrollo**, precios del software por determinarse, sin tarjeta, activo al instante, roles admin/caja/lab, POS + captura + PDF/portal.
- **Promesas a evitar:** precios mensuales inventados, “gratis para siempre”, “cancela cuando quieras” (sin billing), “10 000 labs confían”, logos/reseñas de clientes ficticios.
- **Escenarios por rol:** título “Escenario · Caja/Lab/Dirección”; no comillas de testimonio ni iniciales de “clientes” inventados.

---

## 6. SEO y social

- `pageTitle`, `ogTitle`, `ogDescription`, `ogImage`, `ogUrl` desde el controlador.
- Partial: `partials/opengraph.php`.
- Cover: `public/img/og-cover.jpg`.
- Meta description alineada al hero (venta + lab + resultados + $0 en desarrollo + precios TBD).

---

## 7. Cómo añadir una sección nueva

1. **Definir el rol** en el mapa de §3 (¿es trust, feature, proof, CTA?).
2. **Marcar HTML** en la vista con `public-section` (+ `public-section-soft` si alterna fondo blanco).
3. **Usar componentes** del catálogo; si falta uno, crear clase `public-*` en el bloque CSS público.
4. **Colores solo tokens** / `bg-light-*` / utilidades Bootstrap mapeadas.
5. **Anchor** en nav si es sección principal de home (`#id`).
6. **Mobile:** revisar 320–480px (títulos, grids, preview).
7. **Documentar** en este manual si el patrón se reutilizará.
8. **No** copiar estilos al layout admin/empleado/lab/super.

### Checklist de PR (página pública)

- [ ] Solo cambia vistas `public/` / `layouts/public.php` / CSS bajo `.public-site` (salvo docs/tests).
- [ ] Sin hex nuevos de marca; reutiliza `--lb-*`.
- [ ] CTAs apuntan a `/registro` o `/login` (o anclas internas).
- [ ] Un H1; headings en orden lógico.
- [ ] Contraste legible (texto body sobre bg/surface).
- [ ] Nav móvil funcional.
- [ ] Tests de contratos de landing siguen verdes.

---

## 8. Qué no hacer

- Mezclar la paleta azul Tailgrids del demo con Modernize.
- Introducir Tailwind o un build de CSS solo para la landing.
- Reutilizar classes `public-*` dentro del backoffice.
- Poner el POS real embebido en la landing (el mock es estático).
- Añadir jQuery obligatorio en marketing (vanilla o Bootstrap JS bastan).
- Inventar planes de precio cobrables antes de existir billing.

---

## 9. Archivos clave

```
app/Views/layouts/public.php          ← shell nav + footer
app/Views/public/landing.php          ← home marketing
app/Views/public/registro.php         ← alta trial
app/Controllers/Home.php              ← guest → landing; OG/title
public/css/app.css                    ← bloque .public-site
public/js/landing.js                  ← GSAP + ScrollTrigger
docs/MANUAL_IDENTIDAD_PUBLICA.md      ← este documento
docs/PLAN_LANDING_REGISTRO.md         ← producto / rutas / anti-abuso / copy $0
tests/unit/LandingRegistroTest.php    ← contratos mínimos + pricing
```

---

## 10. Evolución futura

| Idea | Nota |
|------|------|
| Página `/precios` | Solo cuando haya planes reales de cobro |
| Blog / changelog | SEO; misma identidad |
| Logos de clientes reales | Con permiso; sustituyen stats genéricos |
| Capturas reales del producto | Reemplazar mock CSS del hero |
| Términos / privacidad | Links formales en footer (hoy FAQ + nota pricing) |
| Alinear copy de `/registro` | Mismo mensaje $0 / precios TBD en el form |

---

## 11. Animaciones (GSAP)

- **CDN:** GSAP 3 + ScrollTrigger (jsDelivr), solo en `public/landing.php` (`section('scripts')`).
- **Script:** `public/js/landing.js` — hero, reveals al scroll (stats, features, steps, escenarios, FAQ, CTA), parallax blobs/preview.
- **Hooks de markup:** clases `gs-*` (`gs-hero`, `gs-feature`, `gs-step`, `gs-faq`…); no afectan backoffice.
- **A11y:** si `prefers-reduced-motion: reduce`, no se crean tweens; el contenido queda visible.
- **Fallback:** sin CDN/GSAP, `body` recibe `.gsap-ready` y el hero no se queda oculto; `<noscript>` fuerza opacidad.

---

*Última actualización: 2026-07-28 — rewrite copy conversión + GSAP + pricing honesto ($0 desarrollo).*