# Portal de acceso · stgn.site (landing unificada)

Espejo local de la documentación maestra en Notion. Ante cualquier diferencia,
**gana siempre la página de Notion**: este archivo se actualiza a mano cada vez
que cambia el original.

- Fuente: [Portal de acceso · stgn.site (landing unificada)](https://app.notion.com/p/f66d6ab645b44a59a09b3c1c09d26391)
- Última sincronización de este espejo: 2026-07-30 (el dominio del proyecto
  cambió de `steigen.xyz` a `stgn.site` en Notion; repositorio y carpeta local
  migrados en esta misma fecha — ver `docs/registro-decisiones.md`)

## Qué es y qué no es

- **Es** una vitrina de uso interno: muestra lo que el laboratorio tiene, lo que
  está en revisión y por dónde se entra a cada sistema.
- **Es** un sitio estático, liviano, sin base de datos y sin panel de
  administración.
- **No es** un cuarto sistema con lógica de negocio: el trabajo pesado vive en
  cotizaciones, Steigen OS y legajos.
- **No es** una web pública de cara a clientes: eso es steigen.com.ar. Acá el
  tono es 100% de uso interno.
- **No es** un tablero de datos: no hay indicadores, ni facturación, ni personal.

## 1 · Identidad del proyecto

| Dato | Valor |
| --- | --- |
| Nombre del producto | Portal Steigen (home interna) |
| Dominio raíz | `stgn.site` |
| Repositorio | `Lab-steigen/stgn-site` (privado, organización Lab-steigen) |
| Ruta local prevista | `/Users/maximiliano/Documents/GitHub/stgn-site` |
| Alojamiento | Cloudflare Pages (proyecto `stgn-site`) |
| Versión objetivo | v1.0 |
| Constructor | Claude Code (único). Codex solo lee y opina, no escribe |
| Base de marca obligatoria | Sistema maestro de marca Steigen |

## 2 · Público y accesos

| Perfil | Qué hace en el portal |
| --- | --- |
| Dirección | Entra a las herramientas y revisa lo pendiente de aprobación |
| Coordinación de gestión (Micaela) | Uso diario: acceso a los tres sistemas y a la vitrina interna |
| Gerencias y referentes de área | Consultan material, propuestas y mejoras futuras de su área |
| Invitados | Sin acceso. El portal queda detrás de Cloudflare Access |

## 3 · Arquitectura de información

Una sola página con navegación por secciones (anclas), sin recargar. Orden de
la pantalla, de arriba hacia abajo:

1. Encabezado: logo oficial, nombre, subtítulo de una línea y estado de fecha
   de actualización del contenido.
2. Bloque de acceso a herramientas: las tres tarjetas. Es el protagonista de
   la pantalla.
3. Vitrina interna: seis colecciones de material y decisiones a futuro,
   filtrables por área y estado. Secundaria, siempre debajo.
4. Pie: año, razón social, versión del portal y enlace a esta documentación.

> **Jerarquía cerrada, no negociable.** Las tres tarjetas de acceso son lo
> principal y ocupan la primera pantalla completa, sin necesidad de
> desplazarse. Todo lo demás son decisiones y material a futuro, y va debajo,
> con menor peso visual. Si al entrar la vista no está dominada por las tres
> tarjetas, el diseño está mal.

### 3.1 Acceso a herramientas

| Herramienta | Subdominio (según Notion) | Subdominio real verificado (Fase 8) | Texto en pantalla |
| --- | --- | --- | --- |
| Generador de cotizaciones | `cotizaciones.stgn.site` | `cotizaciones.stgn.site` ✓ coincide | Armar presupuestos en PDF y registrarlos |
| Steigen OS | `os.stgn.site` | **`dash.stgn.site`** — `os.stgn.site` no existe (DNS/HTTP verificado al publicar) | Tablero operativo del negocio |
| Portal de Legajos | `legajos.stgn.site` | **`rrhh.stgn.site`** — `legajos.stgn.site` no existe (DNS/HTTP verificado al publicar) | Consulta de legajos del personal |

> **Discrepancia encontrada al publicar (Fase 8, 2026-07-30):** esta tabla
> todavía no está corregida en Notion. `content/herramientas.json` en el
> repositorio ya usa los subdominios reales verificados. Falta corregir la
> página de Notion para que este espejo deje de mostrar el valor viejo.

Comportamiento: apertura en la misma pestaña, área táctil mínima de 44 px,
estado de foco visible, descripción de una línea y verbo de acción claro
("Entrar"). Estas tres son las únicas salidas del portal: no se agregan más
destinos sin decisión registrada primero en Notion.

### 3.2 Vitrina interna (seis colecciones)

Bloque secundario. Registro ordenado de lo que está en revisión o pendiente
de decisión. Sus enlaces apuntan a material, nunca a sistemas.

| Colección | Qué reúne |
| --- | --- |
| Pendiente de aprobación | Propuestas listas para revisar, con quién aprueba y qué falta |
| Mockups y diseños | Pantallas, interfaces, pruebas de identidad, aprobadas y descartadas |
| Indumentaria | Uniformes, ropa de planta, variantes de logo, proveedores, estado |
| Papelería y oficina | Membretes, carpetas, etiquetas, formularios, firmas, plantillas |
| Futuras mejoras | Ideas por área: producción, calidad, administración, comercial, RRHH, sistemas |
| Material del laboratorio | Presentaciones, imágenes institucionales, guías y recursos de marca |

### 3.3 Ficha de cada item de la vitrina

| Campo | Uso | Obligatorio |
| --- | --- | --- |
| `titulo` | Qué es el material o la propuesta | Sí |
| `area` | Producción · Calidad · Comercial · RRHH · Administración · Sistemas · Marca | Sí |
| `estado` | Idea · Armado · Listo para revisar · Enviado a gerencia · Aprobado · Descartado | Sí |
| `responsable` | Quién lo preparó o quién debe revisarlo | Sí |
| `link` | Archivo, carpeta de Drive, página de Notion o mockup | Sí |
| `nota` | Qué falta para avanzar, en una línea | No |
| `actualizado` | Fecha ISO de última revisión | Sí |
| `destacado` | Fija el item arriba de su colección | No |

> **Reglas de contenido, sin excepción.** Nada de credenciales, claves,
> salarios, márgenes, facturación, documentos personales ni auditorías. Si un
> item necesita mostrar una cifra, se usa un rótulo ("facturación del mes") y
> el dato queda en el sistema que corresponde.

## 4 · Modelo de datos del contenido

El contenido no se escribe dentro del HTML: vive en archivos JSON
versionados.

| Archivo | Contenido |
| --- | --- |
| `content/herramientas.json` | Las tres tarjetas de acceso |
| `content/vitrina.json` | Todos los items de las seis colecciones |
| `content/meta.json` | Versión, fecha de corte, enlace a esta documentación |

Reglas: esquema validado al cargar; si un item está mal formado se omite y se
muestra un aviso discreto, nunca una pantalla en blanco; el orden por defecto
es destacados primero y después por fecha de actualización descendente.

## 5 · Sistema visual

> **Jerarquía de autoridad visual.** 1) Sistema maestro de marca Steigen ·
> 2) 05 · Tokens CSS para implementación · 3) recursos externos de
> glassmorphism y movimiento. Ante conflicto, gana la marca.

### 5.1 Base obligatoria de marca

- Tipografía Montserrat en toda la interfaz, escala 12/14/16/18/24/32/44 px.
- Paleta exclusiva Steigen: `#1F3947`, `#406A80`, `#4C8099`, `#5995B2`,
  `#66AACC`, `#73BFE5`, `#80D4FF`, neutros azulados y `#EEF3F6`.
- Degradado institucional permitido: `#1F3947 → #406A80 → #5995B2`.
- Radio base 14 px, retícula de espaciado de 4 px, sombra base
  `0 14px 38px rgba(31,57,71,.09)`.
- Logo siempre desde archivo oficial del paquete de logos. Prohibido
  redibujarlo con CSS o alterar proporciones.
- Estados funcionales: correcto `#237356`, advertencia `#A9632B`, error
  `#9F3F47`, foco `#80D4FF`. Nunca solo color: siempre texto o icono.
- Los tokens se importan tal cual desde "05 · Tokens CSS para
  implementación". No se inventan variables nuevas sin registrarlas ahí.

### 5.2 Recursos externos a usar

| Recurso | Para qué se usa | Límite |
| --- | --- | --- |
| 21st.dev (glassmorphism) | Patrones de tarjetas, superficies y navegación en vidrio | Se adopta la técnica, no los colores del ejemplo |
| Motion | Animación declarativa real | Movimiento sobrio y corto. Respeto obligatorio de `prefers-reduced-motion` |
| motionsites.ai | Galería de referencia de movimiento | Referencia visual, no copia de layouts |
| Lafys | Referencia de composición y ritmo tipográfico | Solo criterio de calidad y proporción |

### 5.3 Glassmorphism en clave Steigen

- Fondo profundo con degradado institucional y dos manchas de luz suaves en
  `#5995B2` y `#80D4FF` a baja opacidad.
- Superficies de vidrio: relleno blanco 6–12 %, desenfoque 16–24 px, borde 1 px
  blanco al 14 %, brillo superior de un píxel y sombra profunda azulada.
- Elevación por capas: reposo, hover (2–4 px + borde con acento cian), activo
  (compresión leve).
- Contraste antes que efecto: WCAG AA en todo texto sobre vidrio.
- Respaldo obligatorio para navegadores sin `backdrop-filter`.

### 5.4 Movimiento

| Elemento | Comportamiento | Duración |
| --- | --- | --- |
| Entrada de la pantalla | Aparición con desplazamiento corto, en cascada | 240–320 ms |
| Tarjetas de acceso | Elevación, borde de acento y brillo interno al hover | 180–220 ms |
| Filtros de la vitrina | Reordenamiento animado, sin salto de altura | 200–260 ms |
| Apertura de detalle | Expansión desde el origen | 220–280 ms |
| `prefers-reduced-motion` | Aparición inmediata, sin desplazamiento | 0 ms |

## 6 · Stack técnico y estructura del repositorio

Sitio estático moderno: HTML semántico + CSS con tokens + JavaScript de
módulos nativos, más Motion como única dependencia de interfaz. Sin framework
de aplicación, sin servidor, sin base de datos.

| Carpeta o archivo | Contenido |
| --- | --- |
| `index.html` | Estructura semántica única |
| `assets/css/tokens.css` | Tokens canónicos de marca, copiados sin alterar |
| `assets/css/base.css` | Reinicio, tipografía, retícula y utilidades |
| `assets/css/glass.css` | Capa de vidrio, elevaciones y respaldos |
| `assets/js/main.js` | Arranque, carga de JSON, render y filtros |
| `assets/js/motion.js` | Animaciones y respeto de reducción de movimiento |
| `assets/logos/` | Logos oficiales y favicon |
| `content/` | `herramientas.json`, `vitrina.json`, `meta.json` |
| `docs/` | Espejo de esta documentación y registro de decisiones |
| `CLAUDE.md` y `AGENTS.md` | Reglas de trabajo idénticas |
| `README.md` | Qué es, cómo se corre, cómo se publica, cómo se actualiza el contenido |
| `.gitignore` | Excluye entorno local y cualquier archivo con secretos |

> **Seguridad del repositorio.** Ni una clave, ni un token, ni un identificador
> de base de Notion en el repositorio. El portal no consume APIs privadas:
> solo lee sus propios JSON.

## 7 · Publicación y acceso

1. Repositorio privado nuevo `Lab-steigen/stgn-site`, rama `main` protegida
   por criterio de trabajo.
2. Cloudflare Pages → Create → Connect to Git → `stgn-site`. Comando de
   compilación vacío. Directorio de salida: raíz.
3. Dominio personalizado: `stgn.site` y `www.stgn.site` con redirección al
   raíz.
4. Cloudflare Access sobre `stgn.site`: misma política de correo que
   Steigen OS y legajos.
5. Verificación de que los tres subdominios siguen respondiendo y que el
   portal no rompe ninguna política existente.

## 8 · Calidad y criterios de aceptación

- [ ] `stgn.site` carga el portal detrás de Cloudflare Access.
- [ ] Las tres tarjetas abren el subdominio correcto en la misma pestaña.
- [ ] La vitrina renderiza las seis colecciones desde `content/vitrina.json`.
- [ ] Los filtros por área y por estado funcionan y son navegables con teclado.
- [ ] Tipografía Montserrat y paleta exclusiva Steigen verificadas contra los tokens.
- [ ] Superficies de vidrio con respaldo sólido en navegadores sin soporte.
- [ ] Contraste WCAG AA validado en todo texto sobre vidrio, con captura de la medición.
- [ ] Foco visible en todo elemento interactivo y orden de tabulación coincidente con el orden visual.
- [ ] `prefers-reduced-motion` desactiva todo el movimiento.
- [ ] Validado a 1440, 1024, 768, 390 y 320 px, con capturas.
- [ ] Auditoría de rendimiento y accesibilidad sin errores críticos.
- [ ] Ningún dato sensible en el sitio ni en el repositorio.
- [ ] `README.md`, `CLAUDE.md` y `AGENTS.md` completos y commiteados.
- [ ] Al entrar, la primera pantalla está dominada por las tres tarjetas de acceso, sin desplazarse, en los cinco anchos validados.

## 9 · Gobernanza

- Un solo constructor por tanda. Claude Code escribe; el segundo agente lee,
  informa en castellano y propone, y solo se implementa con aprobación previa.
- Verificación después de cada fase (correr, mirar, confirmar). Auditoría con
  skills una vez por jornada o al cerrar la tanda.
- Relevo solo entre fases, con commit hecho y párrafo de traspaso anotado en
  Notion.
- Todo cambio de alcance se escribe primero acá (Notion) y después en el
  código.
- Nomenclatura de entrega: `stgn-site-v1.0-AAAA-MM-DD`.
- Excepciones de marca: se documentan con responsable, fecha, motivo y
  alcance. No se convierten en estándar por silencio.

### Decisiones tomadas por criterio (30-jul-2026)

| Punto | Decisión |
| --- | --- |
| Accesos del portal | Solo los tres ya definidos: cotizaciones, Steigen OS y legajos. Cerrado |
| Carga inicial de la vitrina | Se publica con la estructura de las seis colecciones y items de ejemplo marcados como tales. El contenido real se carga después |
| Responsables por colección | Coordinación de gestión mantiene todas al día por defecto |
| Política de Access | Se reutiliza la política de correo ya vigente en Steigen OS y legajos |
| Vitrina vacía al inicio | Cada colección sin items muestra estado vacío explicativo, no se oculta |

---

## Secuencia de fases (subpágina de prompts de Notion)

La documentación maestra remite a una subpágina con la secuencia completa de
prompts, uno por fase, que se pegan tal cual y no se saltean sin verificación:
["Prompts · Claude Code · Portal stgn.site v1.0"](https://app.notion.com/p/f97aaf1a2b7b4b20ba32949cb5411a51).

0. Contexto, repositorio y reglas
1. Estructura semántica y contenido
2. Marca Steigen aplicada
3. Glassmorphism con 21st.dev
4. Vitrina interna funcional (filtros, buscador, orden, detalle expandible)
5. Movimiento con Motion
6. Accesibilidad y responsive
7. Auditoría de calidad
8. Publicación y cierre

## Sistema de marca Steigen (resumen)

Fuente completa: "Sistema maestro de marca Steigen" → "02 · Sistema de
identidad y diseño" → "05 · Tokens CSS para implementación" (Notion).

- Posicionamiento: aliado farmacéutico B2B técnico, confiable, orientado a
  relaciones de largo plazo.
- Estética: corporativa, limpia, seria, minimalista y ordenada.
- Prohibido: redibujar logos, alterar proporciones, introducir colores ajenos
  o publicar promesas y capacidades no validadas.
- Tipografía: Montserrat (títulos Bold/SemiBold, cuerpo Regular, datos
  tabulares Medium).
- Contraste mínimo WCAG AA: 4.5:1 texto normal, 3:1 texto grande/componentes.
- Objetivos táctiles de al menos 44 × 44 px. Foco de teclado siempre visible.
- Validar responsive al menos en 1440, 1024, 768, 390 y 320 px.
- Los tokens CSS canónicos están en `assets/css/tokens.css` y se copian tal
  cual desde la página "05 · Tokens CSS para implementación" de Notion, sin
  inventar variables nuevas.