# Identidad corporativa — Innovasport

> Extraída el 2026-09-19 de las variables CSS declaradas en `:root` por
> `https://www.innovasport.com/`. No son colores estimados de una captura de
> pantalla: son los tokens que el propio sitio usa en producción.

## 1. Paleta oficial (tal como la declara el sitio)

| Variable del sitio | HEX | Rol declarado |
|---|---|---|
| `--primary` | `#000000` | Color primario de marca |
| `--secondary` | `#AAAAAA` | Gris secundario |
| `--tertiary` | `#FFFFFF` | Blanco |
| `--quaternary` | `#FF4747` | Rojo claro de acento |
| `--background-main` | `#FFFFFF` | Fondo principal |
| `--background-variant` | `#E21736` | **Rojo de marca** — fondo de variante |

La marca es esencialmente **negro, blanco y un rojo saturado `#E21736`**, con `#FF4747` como acento más claro y `#AAAAAA` como gris de apoyo. Es una paleta deliberadamente corta: el color vivo lo pone el producto (los jerseys), no el cromado.

## 2. Tipografía

El sitio declara `--ff-inter: 'Inter', serif` y una escala tipográfica fija:

```
42 · 36 · 32 · 28 · 24 · 23 · 20 · 18 · 16 · 14 · 13 px
```

**Inter** es la familia corporativa. Es libre, está en Google Fonts y tiene versión variable, así que se puede usar sin fricción de licenciamiento.

## 3. Cómo se traduce a una consola administrativa

La paleta del e-commerce no se puede trasplantar tal cual a un sistema interno: un sitio de venta tolera el rojo como color dominante, y un panel operativo que se usa ocho horas al día, no.

**Tensión principal a resolver:** el rojo de marca `#E21736` está muy cerca del rojo que cualquier interfaz usa para error. Si el botón primario y el estado de error son el mismo rojo, el usuario deja de distinguir "acción" de "problema".

**Resolución adoptada:**

- `#E21736` se reserva para **acción primaria y estado activo** (botón principal, ítem seleccionado del menú, enlaces de folio).
- El **error** usa un rojo más profundo y desaturado, `#B42318`, que se lee como advertencia y no como botón.
- Todo estado lleva además **ícono y etiqueta de texto**, nunca solo color. Esto resuelve el conflicto de raíz y además cumple WCAG.

### Tokens derivados para la consola

| Token | Light | Dark | Origen |
|---|---|---|---|
| `--brand-red` | `#E21736` | `#F0344F` | Marca, aclarado en oscuro para contraste |
| `--brand-red-hover` | `#C2122D` | `#FF4747` | Derivado / `--quaternary` |
| `--sidebar-bg` | `#16100F` | `#0E0B0B` | `--primary` con matiz cálido |
| `--sidebar-active` | `#E21736` | `#E21736` | Marca |
| `--bg` | `#F4F5F7` | `#0F1113` | Derivado de `--background-main` |
| `--surface` | `#FFFFFF` | `#181B1F` | `--tertiary` |
| `--border` | `#E4E6EA` | `#2A2F36` | Derivado de `--secondary` |
| `--text` | `#14161A` | `#ECEDEE` | `--primary` |
| `--text-muted` | `#646B76` | `#9BA3AE` | `--secondary` |
| `--info` | `#2563EB` | `#60A5FA` | Nuevo — estado |
| `--success` | `#0E9F6E` | `#34D399` | Nuevo — estado |
| `--warning` | `#D97706` | `#FBBF24` | Nuevo — estado |
| `--danger` | `#B42318` | `#F87171` | Nuevo — error, separado del rojo de marca |

Todos los pares texto/fondo cumplen WCAG AA.

## 4. Logotipos

**No fue posible descargarlos automáticamente.** El sitio y su CDN de assets (`site.innovasport.com`) responden `403 Forbidden` a cualquier petición que no venga de una sesión de navegador real — tanto por `curl` como por fetch programático. Es una protección de WAF, no un error de configuración.

Rutas detectadas mientras la sesión de navegador estuvo activa:

- `https://site.innovasport.com/cx/others/storefront-icon.svg` — ícono de tienda

**Para completarlo**, coloca los archivos manualmente en:

```
prototipos/prototipo-01/assets/brand/
├── innovasport-logo.svg        # logotipo horizontal, fondo claro
├── innovasport-logo-blanco.svg # versión para el sidebar oscuro
└── innovasport-isotipo.svg     # marca reducida, para el colapso del menú
```

El prototipo ya los referencia: en cuanto existan, aparecen sin tocar código. Mientras tanto muestra un wordmark tipográfico de respaldo.

## 5. Enseñas del grupo

El sistema es multi-enseña. Cada una tiene su propia identidad y el selector del sidebar debe reflejarlo:

| Enseña | Perfil | Dominio |
|---|---|---|
| Innovasport | Deportivo tradicional | innovasport.com |
| Innvictus | Sneakers y urban | innvictus.com |
| Over Time | Tercer formato | — |
| Rookie Kids | Infantil premium | rookiekids.com |
| Marathon | Sudamérica (EC, PE, CL, BO) | — |

Los tokens de arriba son los de **Innovasport**. Cuando se habiliten las demás, cada enseña sobrescribe únicamente `--brand-red` y `--sidebar-bg`; el resto del sistema permanece igual. Esa es la razón de que todo esté en variables CSS y no en valores literales.