# CHANGELOG — PowerTech
## [1.0.1] — 2026-07-23
### Corrección de errores CORS y scripts vendor
#### Problema
Al abrir `index.htm` directamente con doble clic (protocolo `file://`), el navegador asigna origen `null` a todos los archivos locales. Esto causa:
1. **CORS policy** al cargar `site.webmanifest` vía `` — el manifest requiere CORS y `file://` no lo soporta
2. **`MotionPathPlugin is not defined`** — el plugin no estaba referenciado en el HTML
3. **`InfiniteMarquee is not loaded`** — librería de marquee no referenciada
4. **`Springer` no definido** — physics spring library no referenciada
5. **`` custom element no registrado** — 46 elementos del HTML no renderizaban
#### Cambios realizados
| Archivo | Cambio | Motivo |
|---------|--------|--------|
| `index.htm:39` | Eliminado `` | CORS bloquea manifest desde `file://`. Solo necesario en producción con servidor HTTP |
| `index.htm:3397-3401` | Agregados 5 `
```
**Lección aprendida:** Al eliminar scripts vendor en la limpieza v1.0.0, se verificó solo si el HTML los referenciaba directamente, pero no se revisó si `main.js` los usaba con `typeof` checks o `window.*` lookups. Siempre revisar tanto el HTML como el JS antes de eliminar dependencias.
---
## [1.0.0] — 2026-07-23
### Limpieza inicial
#### Archivos eliminados
| Archivo | Motivo | Riesgo de recurrencia |
|---------|--------|----------------------|
| `faq.htm` | Copia exacta de `index.htm` (236 KB basura) | Revisar si hay archivos `.htm` duplicados al comprar templates |
| `services.html` | Copia exacta de `index.htm` (236 KB basura) | Verificar la carpeta raíz tras descargar un template |
| `s/` (24 archivos TTF) | Fuentes Google cacheadas localmente (~2.2 MB innecesarios) | Las fuentes se sirven vía CDN, no cachear localmente |
| `fonts/next-sass.*` (4 archivos) | Icon font del template (~1 MB), reemplazado por SVGs inline | No usar icon fonts — prefieren SVGs inline o FontAwesome |
| `optim-ai/demo/` | Widget showcase de demos del marketplace | Eliminar siempre carpetas `demo/` de templates comprados |
| `vendor/motion-path.min.js` | ~~No usado~~ **CORREGIDO en v1.0.1** — sí se usa en `main.js:499` | |
| `vendor/number-flow.min.js` | ~~No usado~~ **CORREGIDO en v1.0.1** — define `` custom element | |
| `vendor/split-text.min.js` | ~~No usado~~ **CORREGIDO en v1.0.1** — se usa en `main.js:1099`+ | |
| `vendor/vanilla-infinite-marquee.min.js` | ~~No usado~~ **CORREGIDO en v1.0.1** — se usa en `main.js:1817` | |
| `vendor/springer.min.js` | ~~No usado~~ **CORREGIDO en v1.0.1** — se usa en `main.js:2153` | |
| `webcopy-origin.txt` | Log de descarga del sitio | No incluir archivos de log del downloader |
| `css2`, `css2-1` | Respuestas cacheadas de Google Fonts CSS | Limpiar archivos huérfanos en raíz |
**Lección aprendida:** Los templates de marketplaces vienen con mucho bloat. Siempre revisar archivos duplicados, carpetas demo, y vendor JS no referenciado antes de empezar.
### White-Label (Optim AI → PowerTech)
#### Cambios globales vía PowerShell (17 archivos HTML/HTM)
| Cambio | Detalle |
|--------|---------|
| Títulos `` | `AI Agency \|\| Optim AI` → `PowerTech — Agencia de IA` |
| Meta description | Texto en inglés → Español para SEO Chile |
| Meta keywords | `Optim AI` → `PowerTech, IA, Inteligencia Artificial...` |
| OG tags | URL: `ai-agency-op-tailwind.vercel.app` → `agenciapowertech.cl` |
| OG image | URL externa `demo-data.pixels-71.com` → `/images/og-powertech.jpg` |
| Footer | `hello@optimai.com` → `contacto@agenciapowertech.cl` |
| Footer | `+1 (202) 555-0130` → `+56 9 1234 5678` |
| Footer | `30 North Gould Street...` → `Santiago, Chile` |
| Copyright | `(c) Optim AI. All rights reserved.` → `© PowerTech. Todos los derechos reservados.` |
| Logo alt text | `Optim AI` → `PowerTech` |
| Author meta | `Optim AI` → `PowerTech` |
| Site name OG | `Optim AI` → `PowerTech` |
**Lección aprendida:** Usar PowerShell para reemplazos masivos es más rápido y consistente que editar 17 archivos a mano. Siempre guardar el script de reemplazo en caso de necesitar repetirlo.
#### Logos SVG generados
- `images/logo/logo-white.svg` — Logo completo con texto "PowerTech"
- `images/logo/logo-small.svg` — Solo icono para mobile
- `images/logo/logo-green-small.svg` — Solo icono (morado, no verde como el original)
**Lección aprendida:** El template tenía 3 logos distintos. Identificar todos los usos de imágenes de logo en el HTML antes de hacer reemplazos.
### CSS — Sistema de diseño
#### Variables de color actualizadas en `assets/main.css`
```css
/* ANTES */
--color-opai-yellow: #fff049;
--color-opai-purple: #8d59ff;
--color-opai-blue: #227eff;
--color-opai-lemon: #d0ff00;
--color-opai-green: #09f647;
--color-opai-cyan: #5ddcf6;
/* DESPUÉS */
--color-opai-yellow: #FF6B5F; /* Secundario */
--color-opai-purple: #5400F4; /* Primario */
--color-opai-blue: #5400F4; /* Primario */
--color-opai-lemon: #FF6B5F; /* Secundario */
--color-opai-green: #FF6B5F; /* Secundario */
--color-opai-cyan: #5400F4; /* Primario */
```
**Riesgo:** No renombrar las variables `--color-opai-*` porque están referenciadas en cientos de clases de Tailwind en el HTML. El fix fue reasignar los valores, no los nombres.
#### Tipografía
```css
/* Estrategia: mapear TODAS las fuentes legacy a Montserrat + Fira Code */
--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);
```
**Lección aprendida:** En lugar de cambiar 1170 referencias de clases de fuente en el HTML (imposible de mantener), se redirigen vía CSS. Esto permite que `font-sora`, `font-inter-tight`, etc. sigan funcionando pero rendericen Montserrat.
#### Icon font next-sass eliminado
- El template usaba un icon font custom (`next-sass`) con 128 iconos definidos vía `@font-face`
- Se eliminó el `@font-face`, la declaración de la font family, y las 128 reglas `.ns-shape-N:before`
- Se reemplazó con un placeholder inline que muestra `inline-flex`
**Lección aprendida:** Los icon fonts son pesados y difíciles de mantener. Si el template usa uno, evaluar si se puede reemplazar por SVGs inline o un icon font estándar como Lucide o Phosphor.
### JavaScript — Lazy loading
#### Three.js / LaserFlow
**Antes:** Three.js se cargaba y ejecutaba inmediatamente en DOMContentLoaded, bloqueando el LCP con un shader 3D de 610 KB.
**Después:**
- `three.min.js` se carga con `defer`
- `main.js` usa `IntersectionObserver` para inicializar el LaserFlow solo cuando el hero entra en viewport (+200px de margen)
- La función `autoInit()` fue modificada para envolver cada `.laser-flow` en un observer
```js
// Antes
function autoInit() {
document.querySelectorAll(".laser-flow").forEach((el) => {
initLaserFlow(el);
});
}
// Después
function autoInit() {
document.querySelectorAll(".laser-flow").forEach((el) => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
initLaserFlow(el);
observer.unobserve(el);
}
});
}, { rootMargin: "200px" });
observer.observe(el);
});
}
```
**Lección aprendida:** Cualquier librería pesada (>100 KB) que no sea necesaria para el render inicial debe cargarse lazy con IntersectionObserver.
#### Script tags actualizados
- Todos los vendor scripts ahora tienen `defer`
- Scripts de vendor no utilizados fueron removidos del HTML (motion-path, springer, number-flow, split-text, vanilla-infinite-marquee)
- El script `theme-links.js` (widget showcase) fue eliminado de todas las páginas
### Archivos generados
| Archivo | Propósito |
|---------|-----------|
| `favicon.svg` | Favicon con icono PowerTech + #5400F4 |
| `site.webmanifest` | PWA manifest con nombre PowerTech |
| `images/logo/logo-white.svg` | Logo principal blanco |
| `images/logo/logo-small.svg` | Icono para mobile |
| `images/logo/logo-green-small.svg` | Icono para secciones alternas |
| `Design.md` | Documentación del sistema de diseño |
| `CHANGELOG.md` | Este archivo |
### Errores cometidos y cómo evitarlos
| Error | Solución aplicada | Cómo prevenir |
|-------|-------------------|---------------|
| Reemplazo "Optim AI" → "PowerTech" rompió temporalmente algunos OG titles | Script de PowerShell con reemplazos en orden específico | Siempre revisar los resultados del replace en 2-3 archivos de muestra antes de aplicar a todos |
| El reemplazo de Google Fonts dejó una línea en blanco extra | Script de limpieza de líneas vacías múltiples | Incluir paso de normalización de whitespace en el script |
| El `theme-links.js` no se eliminó porque el script tag tenía atributo `beforeinteractive=""` | Ajustar el regex para aceptar cualquier atributo en el script tag | Usar regex flexibles: `<script[^>]*src="[^"]*theme-links\.js[^"]*"[^>]*></script>` |
| 5 vendor JS se eliminaron de la carpeta pero los script tags seguían en HTML | Eliminar también las referencias HTML con PowerShell | Siempre hacer la operación inversa: eliminar archivo Y su referencia |
| `#5A9FFF` hardcodeado en 166 lugares en HTML + CSS | Reemplazo global con PowerShell | Buscar colores hardcodeados con regex `#[0-9A-Fa-f]{6}` y revisar cada uno |
| Las clases `ns-shape-N` quedaron huerfanas sin el icon font | Reemplazar la clase por `inline-flex` | Al eliminar un icon font, buscar TODAS las referencias a sus clases en HTML |
---
## [1.1.0] — 2026-07-23
### Homepage — Copy completo en español + contenido Powertech real
Reescritura integral de `index.htm` para posicionar Powertech como agencia aliada para empresas chilenas, aplicando sesgos cognitivos y tono corporativo-educativo en español latinoamericano neutro.
#### Hero
- Título: "Sitios, campañas y automatizaciones para convertir más visitas en ventas."
- Subtítulo Powertech + CTA WhatsApp `https://wa.link/zv9fyz`
- Aplica **sesgo de anclaje**: contraste entre "sin complicaciones técnicas" y el esfuerzo previo del cliente
#### Nav y sidebar móvil
- Traducción completa de menús a español: Servicios, Páginas, Plataforma, Planes, Contacto
- Submenús traducidos con labels de servicio Powertech
- "Try now" → "Hablar con un experto" (link a WhatsApp)
#### Sección "Conectamos con las herramientas que ya usa"
- Título + copy en español sobre ecosistema digital unificado
#### Servicios
- **Sesgo de escasez:** "Todo lo que su negocio necesita en un solo equipo" (no necesitan buscar más agencias)
- 4 cards con servicios reales Powertech + iconos SVG inline:
1. Desarrollo Web y E-commerce
2. Marketing Digital
3. Automatizaciones e IA
4. Seguro WordPress™
#### Features (antes "Automate more. work smarter.")
- 6 cards completamente traducidas: Automatización de procesos, Orquestación de tareas con IA, Seguridad nivel empresarial, Notificaciones en tiempo real, Sincronización de datos
- UI mockups traducidos (Progreso de Tareas, Prototipo/Diseño/Desarrollo, etc.)
#### Portafolio (Prueba social)
- **Sesgo de prueba social:** 4 casos reales en homepage (Propiedades San Miguel, H.H. Trading, CAMSI, Valle La Purísima)
- Título: "Casos de éxito que hablan por sí solos."
#### Our Approach → Metodología
- 4 pasos en español: Diagnosticamos → Diseñamos → Ejecutamos → Medimos
- CTA: "Agendar diagnóstico gratuito" (escasez: paso previo obligatorio)
#### Team → Áreas de expertise
- Reemplazadas 6 fotos de personas por iconos SVG representando áreas de servicio
- **Diferenciación:** no mostramos personas (somos boutique, no mega-corp)
- 6 áreas: Desarrollo Web, Marketing Digital, Automatización e IA, Seguro WordPress™, Diseño Gráfico, Comunicación 360°
#### Testimonials → Casos de Éxito (Prueba social contundente)
- 6 cards con los 6 clientes reales del portafolio Powertech
- Sin testimonios inventados — cada card describe el servicio entregado
- Sección renombrada para evitar falsas expectativas
#### Pricing (Anclaje y contraste)
- Plan Estratégico / Plan 360° / Plan Crecimiento
- Precios genéricos "Desde $X" sin cifras concretas
- Plan 360° destacado como recomendado (efecto default)
- Seguro WordPress™ como upsell desde $19.990/mes
- **Sesgo de aversión a pérdida:** "Seguro WordPress™" protege su inversión
#### Blog
- 6 títulos y tags en español sobre marketing digital, IA, WordPress, e-commerce
#### FAQ
- 4 preguntas reales sobre planes, plazos, conocimientos técnicos y soporte
- Trust indicator: "150+ empresas confían en Powertech en Chile y Latinoamérica"
#### CTA final
- "Dé el primer paso hacia la transformación digital" → "Agendar evaluación gratuita"
- Link a contacto con filtro de evaluación
#### Footer
- Newsletter, menú y términos legales completamente en español
- Copyright PowerTech
#### Lecciones aprendidas
| Error | Solución | Cómo prevenir |
|-------|----------|---------------|
| La sección "Automate more." (Features) quedó en inglés por no alcanzar a leer todo el archivo | Escanear el HTML completo con `grep` de patrones ingleses (`>Automate|>Explore |>View `) | Después de cada ronda de cambios, ejecutar un grep de palabras inglesas comunes en el archivo para detectar omisiones |
| Los mega menus del desktop tienen texto inglés que no se ve en el scroll rápido | Revisión manual de cada `<ul>` y `<li>` en el nav | Incluir en el checklist de white-label: "revisar dropdowns del nav, no solo los links principales" |
| Las tooltips y placeholders del formulario newsletter estaban en inglés | Búsqueda de `placeholder="..."` en el HTML | Agregar `placeholder` y `aria-label` a la lista de atributos a traducir |
| El `data-menu="company-mega-menu"` usa IDs en inglés pero son internos (no visibles) | Dejar intactos los `data-menu` porque son referencias JS | No cambiar atributos `data-*` que usa el JS, solo el texto visible |
---
*Para agregar una nueva entrada: copiar el bloque `[X.Y.Z] — Fecha` y documentar qué cambió, por qué, y cómo evitar errores similares.*