# PowerTech — Design System
## Colores
| Token | Color | Hex | Uso |
|-------|-------|-----|-----|
| `--color-opai-blue` (primario) |  | `#5400F4` | Botones principales, links, acentos, LaserFlow 3D |
| `--color-opai-purple` (primario) |  | `#5400F4` | Mapeado al primario |
| `--color-opai-cyan` (primario) |  | `#5400F4` | Mapeado al primario |
| `--color-opai-green` (secundario) |  | `#FF6B5F` | Acentos secundarios, badges, highlights |
| `--color-opai-lemon` (secundario) |  | `#FF6B5F` | Mapeado al secundario |
| `--color-opai-yellow` (secundario) |  | `#FF6B5F` | Mapeado al secundario |
> **Nota**: Los nombres de variable (opai-blue, opai-purple, etc.) se conservan del template original. No renombrarlos porque están referenciados en múltiples clases de Tailwind en el HTML.
### Fondos (dark theme)
| Token | Hex | Uso |
|-------|-----|-----|
| `--color-background-6` | `#0d1017` | Fondo principal del sitio |
| `--color-background-5` | `#11141d` | Secciones alternas |
| `--color-background-4` | `#191d2a` | Cards y contenedores |
| `--color-background-14` | `#12161f` | Variante de fondo |
| `--color-background-7` | `#f8f9fa` | Fondos claros (texto invertido) |
## Tipografía
| Rol | Fuente | Variable CSS | Pesos cargados |
|-----|--------|-------------|----------------|
| Principal (sans-serif) | **Montserrat** | `--font-montserrat` | 400, 500, 600, 700 |
| Mono/código | **Fira Code** | `--font-fira-code` | 400, 500, 600 |
### Mapeo de clases legacy
Todas las clases de fuente del template original fueron redirigidas vía CSS:
```css
--font-inter-tight: var(--font-montserrat); /* → Montserrat */
--font-ibm-plex-mono: var(--font-fira-code); /* → Fira Code */
--font-instrument-serif: var(--font-montserrat);
--font-manrope: var(--font-montserrat);
--font-sora: var(--font-montserrat);
```
Esto permite que cualquier clase como `font-sora`, `font-inter-tight`, `font-manrope` en el HTML renderice con Montserrat, sin necesidad de modificar los HTML.
### Google Fonts
Cargado en el `` de todas las páginas:
```html
```
- `font-display: swap` evita FOIT (Flash of Invisible Text)
## Arquitectura del Proyecto
### Stack
- **HTML estático** — Sin framework, sin build system, sin package.json
- **Tailwind CSS v4.3.0** — CSS pre-compilado (no se necesita CLI de Tailwind)
- **JavaScript vanilla** — Animaciones, interactividad
- **GSAP** — Animaciones scroll (ScrollTrigger), transitions
- **Three.js** — Efecto LaserFlow 3D en el hero (carga lazy)
- **Lenis** — Smooth scroll
### Estructura de archivos
```
├── index.htm (homepage)
├── *.html (17 páginas internas)
├── assets/
│ ├── main.css (Tailwind compilado + custom CSS)
│ └── main.js (animaciones y lógica)
├── vendor/
│ ├── three.min.js (610 KB, carga lazy)
│ ├── gsap.min.js (67 KB, defer)
│ ├── scroll-trigger.min.js (41 KB, defer)
│ └── lenis.min.js (12 KB, defer)
├── images/
│ ├── logo/ (3 logos SVG)
│ ├── gradient/ (fondos decorativos)
│ └── icons/ (iconos SVG de marcas)
├── favicon.svg
└── site.webmanifest
```
### Scripts — Orden de carga
```html
```
El `main.js` usa `IntersectionObserver` para inicializar Three.js solo cuando el hero (`.laser-flow`) es visible, evitando bloqueos de LCP.
## Convenciones
### Nombramiento de archivos HTML
- **index.htm** para la homepage (herencia del template)
- ***.html** para el resto de páginas
- Nombres en inglés, minúsculas, con guiones (ej: `service-details.html`)
### Estilo de código
- **CSS**: Tailwind utility classes en HTML, variables CSS en `:root`
- **JS**: ES5 vanilla (sin módulos), funciones globales, `document.addEventListener("DOMContentLoaded", ...)`
- **No modificar** las clases legacy como `font-inter-tight`, `color-opai-blue` en el HTML — el mapeo en CSS las resuelve
### Imágenes
- Formatos aceptados: SVG, WebP (preferido), JPG (fallback)
- Las imágenes del hero deben tener `width` y `height` explícitos
- Imágenes below-the-fold deben tener `loading="lazy"`
- Logo: 3 variantes (white para fondo oscuro, small para mobile, green-small para secciones claras)
## Performance — Check-list
- [ ] LCP < 2.5s
- [ ] CLS < 0.1
- [ ] TBT < 200ms
- [ ] Imágenes en WebP
- [ ] `defer` en todos los scripts
- [ ] `loading="lazy"` en imágenes below-the-fold
- [ ] `width` + `height` en todas las `![]()
`
- [ ] Fuentes con `font-display: swap`
## Mantenimiento
### Para cambiar colores
Editar variables en `assets/main.css`, líneas 86–92:
```css
--color-opai-blue: #5400F4; /* Cambiar aquí */
--color-opai-yellow: #FF6B5F; /* Cambiar aquí */
```
Los cambios se reflejan automáticamente en todo el sitio.
### Para cambiar tipografía
1. Actualizar la URL de Google Fonts en todos los HTML
2. Cambiar variables en `assets/main.css`, líneas 67–68:
```css
--font-montserrat: "Montserrat", sans-serif;
--font-fira-code: "Fira Code", monospace;
```
### Para modificar el efecto LaserFlow 3D
- Configuración en el atributo `data-*` del div `.laser-flow` en `index.htm`
- Lazy loading controlado por `IntersectionObserver` en `assets/main.js`
### Para agregar una página nueva
Copiar una página existente y modificar:
1. `` → `NombrePágina — PowerTech`
2. Meta tags (description, keywords, OG)
3. Contenido del cuerpo
---
*Última actualización: Julio 2026*