# Sistella Renew Project - Full Context

## Overview
Sistella is a high-end digital solutions company based in Mexico, specializing in E-learning, Corporate Universities, and bespoke Software Development. This project represents their 2026 digital identity, built with modern web standards, premium aesthetics, and a "Mobile First" approach.

---

## Technical Architecture

### Core Stack
- **Frontend**: Semantic HTML5, Vanilla JavaScript (ES6+).
- **Styling**: Tailwind CSS (CDN) with a custom design system defined in `tailwind.config`.
- **Interactivity**: Lucide Icons, Framer-inspired CSS animations, and vertical video integration.
- **Backend**: PHP 8.x for mail processing (`send_mail.php`) with honeypot spam protection.
- **Assets**: Optimized WebP imagery and SVG vectors for maximum performance.

### Design Tokens (Defined in Header)
- **Primary Blue**: `#0673f9` (Main brand color)
- **Tech Blue**: `#0d74f2` (Secondary/Backgrounds)
- **Accent Pink**: `#ff66c4` (Special accents)
- **Dark Mode Backgrounds**: `#101822`, `#0f1823`, `#0b0f19`
- **Typography**: Inter (Sans-serif) for high readability and premium feel.

---

## File Directory Map

### Root Configuration
- `.htaccess`: URL rewriting (hiding .html) and security headers.
- `robots.txt` & `sitemap.xml`: SEO prioritization and crawling rules.
- `favicon.ico`: Standard site icon.
- `llms.txt`: This context file for AI agents.

### Core Website Pages
- `index.html`: Home page featuring high-impact hero with vertical video tour in a modal.
- `about.html`: Corporate history and value proposition.
- `servicios.html`: Master directory of Sistella solutions.
- `contacto.html`: Advanced contact form with security measures.
- `hola.html`: Link-in-bio style page for social media.
- `404.html`: Custom error page maintaining brand consistency.

### Service Landing Pages (Verticals)
- `universidad-corporativa.html`: Implementation of business LMS and training automation.
- `soluciones-tecnologicas.html`: Custom software and platform development.
- `desarrollo-de-cursos.html`: Instructional design and SCORM content factory.
- `capacitacion-en-seguridad.html`: Specialized NOM-STPS compliance training.
- `onboarding-virtual.html`: Digital employee induction processes.
- `capacitacion.html`: General E-learning services.
- `centro-de-entrenamiento.html`: Hub for accessing the CES (Centro de Entrenamiento Sistella).
- `sitio-web.html` & `sitio-web-mxl.html`: Web development services (General vs. Localized for Mexicali).

### Professional Profiles
- `angelresendiz.html`: Profile for Angel Reséndiz, E-learning Consultant.
- `karladuarte.html`: Profile for Karla Duarte, Instructional Designer.

### Client & Special Pages
- `clientes/`: Directory for client-specific reports and portals.
  - `2601-escuderos.html`: Project report for Escuderos de Jalisco.
  - `2602-sinapsis.html`: Client portal for Sinapsis.
  - `pagos-sistella.html`: Payment instructions portal.
- `proyectos/`: Historical project documentation.
- `showroom.html`: High-end showcase of Sistella's portfolio.
- `renovacion-sinapsis.html`: Specialized presentation slide deck.

---

## Assets System

### Images (`/assets/images/`)
- `logos_sistella/`: Official brand vectors (`sistella_c.svg`, `sistella_hor_full.svg`).
- `logos_clientes/`: Client trust bar logos (`cl_01_Piensa.png` through `cl_10_Selfbridge.png`).
- `hero_pages/`: Optimized WebP backgrounds for landing page headers.
- `favicon/`: Full set of icons for mobile and web apps (`apple-touch-icon.png`).

### Multimedia
- `assets/videos_sistella/elearning_sistella.mp4`: Vertical 9:16 video tour used in the index hero modal.

---

## Strategic Context for AI Agents
When modifying this codebase, prioritize:
1. **Visual Excellence**: Maintain the "Glassmorphism" and premium shadows defined in the Tailwind configs.
2. **SEO Integrity**: Ensure `aria-labels` are present and `sitemap.xml` is updated for new public pages.
3. **Security**: All forms must pass through `send_mail.php` with the established honeypot validation.
4. **Consistency**: Use existing color tokens and Lucide icons for all UI elements.
5. **Cleanliness**: Always remove `.DS_Store` and unused `.png` versions after converting to WebP.

*Date Created: February 2026*