# Rebelocity Club — Contexto de proyecto

## Quién es la usuaria
Ángeles (maria.bravo@empowerlabs.com) — diseñadora/responsable de producto de Rebelocity Club. Trabaja mockups HTML interactivos en esta carpeta para presentarlos al equipo de desarrollo.

## Qué es Rebelocity Club
Plataforma de comunidad deportiva enfocada en triatlón, running y ciclismo. Funcionalidades principales: perfil de atleta, eventos, directorio de miembros/coaches/clubs, foros, clasificados y sistema de puntos de lealtad. Idioma: español (México).

## ⚠️ Ubicación canónica de archivos: IntelliBanks
Toda la documentación y mockups de Rebelocity Club vive de forma canónica en:
`C:\Users\Angeles\Documents\Intellibanks\IB-REB-Rebelocity\RebelocityClub\`
(mockups HTML dentro de la subcarpeta `UI-Mockups\`, documentación en la raíz).

Esta carpeta local ("Rebelocity Club Usabilidad 2") es solo una copia de trabajo de Ángeles — **no se sincroniza con el equipo**. IntelliBanks sí. Por lo tanto:
- Todo archivo nuevo o editado se guarda (o se copia) también en IntelliBanks, en la ruta de arriba.
- Al compartir archivos con Ángeles (para ella pasárselos a Gus o al equipo), usar siempre las rutas de IntelliBanks, nunca las de esta carpeta local.
- Si algo se edita aquí, el cambio debe reflejarse también en la copia de IntelliBanks antes de dar la tarea por terminada.

## Archivos clave en esta carpeta

| Archivo | Descripción |
|---|---|
| `MOCKUP-RCH-Perfil-v01.html` | Vista de perfil — tema dark ✅ validado |
| `MOCKUP-RCH-Perfil-v01-light.html` | Vista de perfil — tema light ✅ validado |
| `MOCKUP-RCH-Eventos-v01.html` | Vista de eventos (detalle/registro) |
| `MOCKUP-RCH-Footer-v01.html` | Footer standalone — referencia para páginas públicas |
| `DESIGN-SYSTEM-RCH.md` | Spec completa del sistema de diseño |

## Paleta de colores (marca oficial)

| Token | Dark | Light | Uso |
|---|---|---|---|
| `--accent` | `#E2261C` | `#E2261C` | Rojo marca — logo, alertas, énfasis |
| `--accent2` | `#E8554D` | `#E8554D` | Rojo secundario / gradiente |
| `--blue` | `#4A80D6` | `#234E9C` | Azul principal — CTAs, activos, interacciones |
| `--green` | `#10B981` | `#059669` | Éxito, estados positivos |
| `--gold` | `#F5B842` | `#D97706` | Puntos, logros, nivel |
| `--red` | `#EF4444` | `#DC2626` | Errores, estados críticos |

> ⚠️ El azul dark (`#4A80D6`) es una adaptación con mejor contraste sobre fondo oscuro. El azul exacto de marca es `#234E9C`.

## Tipografía
- **Headings**: `Montserrat` (pesos 500, 600, 700, 800, 900) — vía Google Fonts
- **Body**: `Inter` (pesos 400, 500, 600) — vía Google Fonts

## Reglas de diseño que YA están validadas
1. Botones primarios → relleno azul (`--blue`) + texto blanco. El rojo se reserva solo para alertas/errores.
2. Botón secundario → borde `border2` + texto `text2`; hover: borde azul + texto azul.
3. Tabs activos → color azul (`--blue`), border-bottom azul.
4. Chips seleccionados → fondo azul 12% opacidad + borde azul + texto azul.
5. Toggles activos → fondo azul.
6. Footer → solo en páginas públicas (Home, evento público, perfil compartido). NO en vistas autenticadas (Perfil, Sherpa IA, Membresía).
7. Save bar → solo visible en tab Perfil, oculta en Sherpa IA y Membresía.
8. Rol = Coach activa bloque "Mi club" y oculta "Busco coach o entrenador".
9. No usar hero banner / portada en el perfil (desactivado por ahora).

## Reglas de trabajo para nuevas secciones
- Crear siempre en single-file HTML con CSS custom properties.
- Mantener tokens dark/light como variables `:root`.
- Naming de archivos: `MOCKUP-RCH-[Sección]-v[N].html`
- No crear archivos README ni documentación extra salvo que se pida.