# Documentación del Proyecto WiniCliente

## 📋 Información General del Proyecto

**Nombre:** WiniCliente - Landing Page Masterclass de Alisados
**Tipo:** Sitio web de marketing / Landing page de conversión
**Propósito:** Promocionar y vender cupos para la Masterclass presencial de Alisados profesionales
**Cliente:** Winifer Tovar - CEO de Arqui Alisados
**Instagram:** @arqui.alisados
**Teléfono:** 505.87871043

---

## 🎯 Información del Servicio

### Masterclass de Alisados Profesionales

**Instructor:** Winifer Tovar
- Máster en Alisados
- CEO de Arqui Alisados
- Más de 5 años de experiencia

**Características del curso:**
- **Modalidad:** Presencial personalizado
- **Duración:** 10-12 horas de aprendizaje
- **Cupos:** Limitados
- **Nivel:** Desde cero a profesional

**Lo que incluye:**
- Material Teórico
- Material Práctico
- Kit de inicio
- 3 tipos de Alisados de 500ml
- Kit post alisado
- Certificado Legal
- Coffee Break

---

## 📂 Estructura de Archivos

```
c:\xampp\htdocs\winicliente\
├── claude.md                          # Este archivo de documentación
├── README.md                          # Documentación del handoff
├── .claude\
│   └── settings.local.json            # Configuración local de Claude
└── project\
    ├── hero-section.html              # Página principal (HTML único)
    ├── tweaks-panel.html              # Demo del panel de ajustes
    ├── tweaks-panel.css               # Estilos del panel de control
    ├── tweaks-panel.js                # Lógica del panel de ajustes
    └── uploads\
        ├── fondo.png                  # Imagen de fondo del hero
        ├── fondo2.png                 # Imagen de fondo de Includes section
        ├── masterclass.png            # Imagen promocional de la Masterclass
        └── 2.jpg                      # Foto del salón Arqui Alisados (Includes section)
```

---

## 🎨 Sistema de Diseño

### Paleta de Colores (OKLCH)

**Colores principales:**
```css
--gold: oklch(72% 0.11 75);           /* Dorado principal */
--gold-light: oklch(85% 0.09 78);     /* Dorado claro */
--gold-dark: oklch(58% 0.10 68);      /* Dorado oscuro */
--cream: oklch(96% 0.015 80);         /* Crema/blanco cálido */
--espresso: oklch(22% 0.03 60);       /* Marrón oscuro (texto) */
--brown-mid: oklch(38% 0.05 55);      /* Marrón medio */
--text-light: oklch(97% 0.008 75);    /* Texto claro */
--beige-bg: oklch(91% 0.025 78);      /* Fondo beige */
```

**Tema:** Lujo y elegancia (Gold + Cream + Brown)

### Tipografías

**Fuentes principales:**
- **Títulos:** 'Playfair Display' (serif elegante)
  - Pesos: 400, 500, 600, 700
  - Cursivas: 400, 600
- **Cuerpo:** 'Lato' (sans-serif limpia)
  - Pesos: 300 (light), 400 (regular), 700 (bold)

**Fuente:** Google Fonts

### Animaciones

| Nombre | Duración | Uso | Efecto |
|--------|----------|-----|--------|
| `fadeUp` | 0.5-0.7s | Elementos que aparecen | Fade + translateY desde abajo |
| `fadeIn` | 1.4s | Imágenes de fondo | Fade simple |
| `shimmer` | 3.5s | Texto con acento dorado | Gradiente animado de brillo |
| `pulse-ring` | 2-2.5s | Badges, botones CTA | Onda expansiva tipo halo |
| `floatBadge` | 4s | Tarjetas flotantes | Movimiento vertical suave |

---

## 🏗️ Arquitectura del Sitio

### Archivo Principal: `hero-section.html`

El sitio es una **single page** (una sola página HTML) con múltiples secciones.

### Secciones Implementadas (en orden)

#### 1. **Hero Section** (Completa ✅)
- **Ubicación:** Líneas 894-837 (HTML)
- **ID:** `#hero-section`
- **Propósito:** Primera impresión, captar atención y presentar la oferta

**Elementos:**
- Imagen de fondo (`uploads/fondo.png`)
- Overlay con gradiente
- Badge: "CURSO PROFESIONAL"
- Headline principal con acento dorado animado
- Divisor dorado decorativo
- Subheadline descriptivo
- 3 bullet points con checkmarks
- 2 botones CTA (primario y secundario)
- 3 trust badges (alumnas, garantía, cupos)
- Tarjeta flotante con reseñas (5 estrellas, 248 reseñas)

**Características técnicas:**
- Grid 2 columnas en desktop, 1 en móvil
- 100vh de altura
- Responsive completo
- Modo oscuro compatible

---

#### 2. **Learning Section - "¿Qué Aprenderás?"** (Completa ✅)
- **Ubicación:** Líneas 840-900 (HTML) | Líneas 703-889 (CSS)
- **ID:** `#learning-section`
- **Propósito:** Mostrar el programa educativo completo

**Contenido (7 módulos):**
1. Alisados Profesionales desde Cero
2. Diagnóstico Capilar
3. Técnicas y Alisados en Tendencia
4. Técnicas de Aplicación y Cauterización
5. Cuidado Post Alisado
6. Hidratación y Terapias
7. Prácticas Monitoreadas con Modelo Real

**Estructura visual:**
- Grid 3 columnas (desktop) → 2 (tablet) → 1 (móvil)
- Tarjetas con números dorados grandes (01-07)
- Efecto hover: elevación y sombra
- Animaciones fadeUp escalonadas
- Fondo beige claro

---

#### 3. **Includes Section - "¿Qué Incluye?"** (Completa ✅)
- **Ubicación:** Líneas 1092-1178 (HTML) | Líneas 891-1086 (CSS)
- **ID:** `#includes-section`
- **Propósito:** Mostrar todo lo que recibe al inscribirse

**Contenido (7 items):**
1. Material Teórico Completo
2. Material Práctico
3. Kit de Inicio Profesional
4. 3 Tipos de Alisados Premium (500ml c/u)
5. Kit Post Alisado
6. Certificado Legal
7. Coffee Break Incluido

**Estructura visual:**
- **Layout 2 columnas:** Imagen del salón (izquierda) + Contenido (derecha)
- Imagen principal: `uploads/2.jpg` (Salón Arqui Alisados)
- Imagen de fondo decorativa: `uploads/fondo2.png` (elementos de peluquería)
- **Capas:** Gradiente base + Imagen de fondo + Overlay transparente (estilo Hero)
- Lista vertical con checkmarks dorados grandes
- Badge flotante sobre la imagen del salón
- Diseño asimétrico (completamente diferente a Learning)
- Modo oscuro compatible (overlay más opaco)
- **Responsive:** En móvil, la imagen va primero, contenido después

---

### Secciones Pendientes (por implementar)

---

#### 4. **Instructor Section - "Sobre Winifer Tovar"** (Pendiente)
**Propósito:** Generar confianza y autoridad

**Contenido planificado:**
- Foto profesional de Winifer
- Título: "Máster en Alisados"
- CEO de Arqui Alisados
- +5 años de experiencia
- Breve biografía o filosofía

---

#### 5. **Details Section - "Detalles del Curso"** (Pendiente)
**Propósito:** Información práctica

**Contenido planificado:**
- Duración: 10-12 horas
- Modalidad: Presencial personalizado
- Ubicación: [por definir]
- Cupos: LIMITADOS
- Inversión: [por definir]

---

#### 6. **CTA Final + Contact** (Pendiente)
**Propósito:** Conversión final

**Contenido planificado:**
- "Reserva tu Cupo Ahora"
- Botón WhatsApp: 505.87871043
- Instagram: @arqui.alisados
- Mensaje de urgencia

---

## 🛠️ Tecnologías Utilizadas

### Frontend
- **HTML5:** Semántico, viewport responsivo
- **CSS3 Moderno:**
  - Sistema de colores OKLCH (más preciso que RGB/HSL)
  - CSS Grid y Flexbox
  - Variables CSS (custom properties)
  - Animaciones @keyframes
  - Media queries (mobile-first)
  - Backdrop filters y blur effects
  - Gradientes lineales y radiales
- **JavaScript Vanilla:** Sin frameworks, código puro

### Características Especiales

#### Sistema de Tweaks (Panel de Control)
- **Archivo:** `tweaks-panel.js`
- **Propósito:** Editar contenido en tiempo real sin tocar código
- **Ubicación:** Panel flotante esquina inferior derecha

**Componentes disponibles:**
- `TweakSection`: Separadores de secciones
- `TweakText`: Campos de texto
- `TweakToggle`: Switches on/off
- `TweakSlider`: Controles deslizadores
- `TweakColor`: Selector de color
- `TweakRadio`: Selección segmentada
- `TweakSelect`: Dropdowns
- `TweakButton`: Botones de acción

**Estado global:** Sistema `useTweaks()` con valores por defecto

---

## 📱 Responsive Design

### Breakpoints

```css
/* Desktop: por defecto (1280px max-width) */

@media (max-width: 1024px) {
  /* Tablets */
}

@media (max-width: 768px) {
  /* Móviles */
}

@media (max-width: 480px) {
  /* Móviles pequeños */
}
```

### Adaptaciones Principales

**Desktop (>1024px):**
- Hero: Grid 2 columnas
- Learning: Grid 3 columnas
- Includes: Layout 2 columnas (imagen + lista)
- Padding amplio (48-64px)

**Tablet (768px-1024px):**
- Hero: Grid 2 columnas compacto
- Learning: Grid 2 columnas
- Includes: Layout 2 columnas compacto
- Padding medio (32px)

**Móvil (<768px):**
- Hero: 1 columna, overlay más opaco
- Learning: 1 columna
- Includes: 1 columna (imagen arriba, contenido abajo)
- Botones: 100% width
- Trust badges: vertical
- Floating card: relativa (no flotante)
- Padding compacto (20-24px)

---

## 🎨 Modo Oscuro

### Activación
- Toggle en el panel de tweaks
- JavaScript: Agrega clase `.dark-mode` a las secciones
- Funciona en: `#hero-section`, `#learning-section`, `#includes-section`

### Cambios de color (modo oscuro)

**Fondos:**
- Sección: `oklch(13% 0.025 55)` (marrón muy oscuro)
- Overlay hero: Gradiente oscuro con transparencias

**Textos:**
- Títulos: `oklch(96% 0.015 80)` (crema muy claro)
- Subtítulos: `oklch(82% 0.02 78)` (beige claro)
- Descripciones: `oklch(80% 0.025 78)` (beige medio)

**Tarjetas:**
- Background: `oklch(18% 0.035 58 / 0.5)` (marrón oscuro semi-transparente)
- Sombras: Más profundas y opacas

---

## 📝 Convenciones de Código

### Nomenclatura de Clases (BEM simplificado)

**Patrón:** `{seccion}-{elemento}`

Ejemplos:
- `.hero-section`, `.hero-content`, `.hero-text`
- `.learning-section`, `.learning-card`, `.learning-number`
- `.cta-primary`, `.cta-secondary`
- `.trust-badge`, `.trust-badge-icon`

### Estructura de Secciones

```html
<section class="[nombre]-section" id="[nombre]-section">
  <div class="[nombre]-container">
    <div class="[nombre]-header">
      <h2 class="[nombre]-title">Título</h2>
      <p class="[nombre]-subtitle">Subtítulo</p>
    </div>

    <div class="[nombre]-grid">
      <!-- Contenido de la sección -->
    </div>
  </div>
</section>
```

### Orden de Propiedades CSS

1. Posicionamiento (`position`, `top`, `z-index`)
2. Box model (`display`, `width`, `padding`, `margin`)
3. Tipografía (`font-family`, `font-size`, `line-height`)
4. Visual (`background`, `border`, `box-shadow`)
5. Interactividad (`transition`, `animation`, `cursor`)

---

## 🔧 Sistema de Tweaks - Valores por Defecto

```javascript
const TWEAK_DEFAULTS = {
  headline: "Domina el Arte del Cabello y Convierte tu Talento en Ingresos",
  subheadline: "Aprende desde cero técnicas profesionales de alisado, peinados y tratamientos capilares",
  ctaText: "Quiero Aprender Ahora",
  ctaSecondary: "Ver Programa Completo",
  badge: "CURSO PROFESIONAL",
  darkMode: false
};
```

### Elementos Editables (IDs)

- `#badge-text` → Badge superior
- `#headline` → Título principal (con lógica para mantener efecto shimmer)
- `#subheadline` → Subtítulo
- `#cta-primary` → Botón principal
- `#cta-secondary` → Botón secundario

---

## 🚀 Próximos Pasos (Roadmap)

### Secciones por Crear (en orden)

1. **Instructor Section** - "Sobre Winifer Tovar" (siguiente)
2. **Details Section** - "Detalles del Curso"
3. **CTA Final** - Llamado a la acción + contacto

### Mejoras Futuras (opcional)

- Galería de fotos de trabajos anteriores
- Testimonios de alumnas graduadas
- FAQ (Preguntas frecuentes)
- Formulario de pre-inscripción
- Integración con WhatsApp Business API
- Pixel de Facebook/Instagram para remarketing

---

## 📞 Información de Contacto

**Masterclass impartida por:**
Winifer Tovar
@arqui.alisados
Tel: 505.87871043

---

## 🎯 Notas Importantes para la IA

### Al Editar el Proyecto:

1. **NO modificar el hero** - Está aprobado y completo
2. **Mantener la paleta de colores** - Gold + Cream + Brown
3. **Usar las mismas animaciones** - fadeUp, fadeIn, shimmer, etc.
4. **Seguir la estructura de secciones** - Header + Grid/Contenido
5. **Responsive first** - Siempre pensar en mobile
6. **Modo oscuro compatible** - Todas las secciones nuevas deben soportarlo
7. **IDs únicos** - Cada sección necesita ID para modo oscuro
8. **Actualizar toggle darkMode** - Agregar nueva sección al script

### Al Crear Nuevas Secciones:

```javascript
// Actualizar el toggle de modo oscuro:
const hero = document.getElementById('hero-section');
const learning = document.getElementById('learning-section');
const includes = document.getElementById('includes-section');
const nuevaSeccion = document.getElementById('nueva-section');

if (v) {
  hero.classList.add('dark-mode');
  learning.classList.add('dark-mode');
  includes.classList.add('dark-mode');
  nuevaSeccion.classList.add('dark-mode'); // ← Agregar nueva sección
} else {
  hero.classList.remove('dark-mode');
  learning.classList.remove('dark-mode');
  includes.classList.remove('dark-mode');
  nuevaSeccion.classList.remove('dark-mode');
}
```

### Información de la Imagen Masterclass

**Archivo:** `uploads/masterclass.png`

**Contenido visual:**
- Logo "MASTERCLASS ALISADOS" en la parte superior
- Foto de Winifer Tovar con productos de alisado
- Secciones "¿QUÉ VAS APRENDER?" y "¿QUÉ INCLUYE?"
- Badge "POR WINIFER TOVAR" con experiencia
- Info de contacto y cupos limitados
- Diseño con franjas diagonales doradas/amarillas

---

**Última actualización:** 2026-05-03
**Versión:** 1.2
**Estado:** En desarrollo - 3 de 6 secciones completadas (Hero ✅, Learning ✅, Includes ✅)
**Nota:** Cada sección tiene un diseño visual único y diferenciado