Feat/new style

[pixelead0]

📝 Descripción

Rediseño completo del sistema de estilos y reorganización de la documentación del proyecto Python CDMX. Se implementa una arquitectura variables-first con 18+ variables CSS centralizadas y se crea una guía completa de sistema de diseño como fuente única de verdad.

🎯 Tipo de Cambio

• ✨ Nueva característica (STYLE_GUIDE.md como sistema de diseño completo)
• 📚 Mejora de documentación (reorganización completa de docs)
• 🎨 Mejora de diseño (optimización CSS y variables centralizadas)
• 🔧 Refactorización (migración a arquitectura variables-first)

🔗 Issues Relacionados

Relacionado con la optimización continua del CSS y mejora de la documentación del proyecto.

📋 Cambios Realizados

🎨 Sistema CSS Optimizado

• Arquitectura variables-first implementada - 18+ variables CSS centralizadas
• Zero colores hardcoded - Todos los valores #hex migrados a variables CSS
• 10 nuevas variables CSS para badges, años y categorías
• Sistema de transiciones unificado usando var(--transition-base) y var(--transition-smooth)
• Optimización de especificidad - Zero declaraciones !important

📚 Reorganización Completa de Documentación

• STYLE_GUIDE.md creado - Guía completa de sistema de diseño (~471 líneas)
• README.md optimizado - Nueva sección "Documentación" con referencias claras
• CLAUDE.md actualizado - Referencia al STYLE_GUIDE.md como fuente única de verdad
• Separación clara de responsabilidades entre archivos de documentación

🏗️ Sistema de Variables CSS

• Colores principales - --python-green, --python-green-dark, --python-white
• Colores de redes sociales - 6 variables para plataformas (Telegram, Meetup, YouTube, etc.)
• Sistema de badges - 8 variables para roles (ambassador, organizer, technical, etc.)
• Categorías de años - Variables para --year-2024-color, --year-2023-color y hover states
• Layout y transiciones - Variables para radios, espaciado y animaciones

🧪 Pruebas Realizadas

• Pruebas locales ejecutadas
• Sitio construido correctamente (mkdocs build)
• Servidor de desarrollo funciona (mkdocs serve)
• Compatibilidad modo claro/oscuro verificada
• Responsive design probado en diferentes dispositivos
• Todas las variables CSS validadas y funcionando
• Documentación actualizada y verificada

Antes vs Después - Página Principal

📸 Capturas de Pantalla

Página Principal - Transformación Completa

ANTES

DESPUÉS

Sistema Unificado de Tarjetas - Voluntarios

ANTES

DESPUÉS

Sistema Unificado de Tarjetas - Ponentes

ANTES

DESPUÉS

Comunidades Aliadas - Grid Optimizado

ANTES

DESPUÉS

Información y About - Mejoras de Contenido

ANTES

DESPUÉS

Navegación y Estructura - 2025 Meetups

ANTES

DESPUÉS

Navegación General - Organización Mejorada

ANTES

DESPUÉS

Nueva Documentación Implementada

Nueva Página: Cómo Contribuir

Ejemplo de Contenido Mejorado

CSS Variables System

/* ANTES: Colores hardcoded */
.volunteer-card .badge.technical {
  color: #37474F;
  border: 1px solid rgba(96, 125, 139, 0.3);
}

/* DESPUÉS: Variables centralizadas */
.volunteer-card .badge.technical {
  color: var(--badge-technical);
  border: 1px solid rgba(96, 125, 139, 0.3);
}

📱 Ver más capturas (responsive, navegación, etc.)

Navegación y Responsive

Nueva Documentación

🔍 Checklist

• Mi código sigue las guías de estilo del proyecto
• He realizado una auto-revisión de mi código
• He comentado mi código, especialmente en áreas difíciles de entender
• He hecho los cambios correspondientes en la documentación (STYLE_GUIDE.md creado)
• Mis cambios no generan nuevos warnings (eliminación de !important)
• He verificado compatibilidad con modo claro/oscuro automático
• Las variables CSS funcionan en todos los componentes
• La documentación está actualizada y organizada profesionalmente

📝 Notas Adicionales

🎯 Impacto del Cambio

1. Mantenibilidad mejorada: Variables centralizadas facilitan cambios globales de diseño
2. Documentación profesional: STYLE_GUIDE.md sigue estándares de proyectos open source
3. Developer Experience: Información específica para cada audiencia (frontend devs, contributors, IA)
4. Escalabilidad: Arquitectura variables-first permite agregar nuevos componentes fácilmente
5. Consistencia: Sistema unificado de colores y transiciones en todo el sitio

🔧 Arquitectura Implementada

• 18+ variables CSS organizadas por categorías
• 13 secciones lógicas en STYLE_GUIDE.md
• Zero duplicación de información entre archivos de documentación
• Retrocompatibilidad completa - todos los componentes existentes funcionan

📚 Nueva Estructura de Docs

• STYLE_GUIDE.md → Desarrollo frontend y sistema de diseño
• README.md → Overview y quick start del proyecto
• CLAUDE.md → Documentación técnica para IA
• CONTRIBUTING.md → Proceso de contribución

🤝 ¿Necesitas ayuda?

Este PR implementa cambios arquitectónicos importantes pero mantiene retrocompatibilidad completa. Todos los componentes existentes funcionan igual, pero ahora con un sistema más mantenible y profesional.

[hugramirez]

Look good to me. Aprobado, me gusta gracias por esta gran contribución.