# Marca Balam — tokens de diseño

> Destilado del **Manual de Imagen Corporativa** que Pedro envió el 1-jul-2026 (evidencia: [`../fuentes/manual de imagen corporativa - Balam.pdf`](../fuentes/manual%20de%20imagen%20corporativa%20-%20Balam.pdf)). Es la fuente oficial de color, tipografía y uso del logo para el **prototipo visual navegable** (Etapa 0) y cualquier UI/entregable de la plataforma.
>
> ⚠️ Ojo: el ámbar de la **propuesta PDF** (`#C0892F`) es un acento editorial de Johann, **no** el amarillo de marca. Para la plataforma y prototipos, usar los tokens de abajo.

## Colores corporativos

| Token | Nombre | HEX | RGB | Uso |
|---|---|---|---|---|
| `--balam-amarillo` | Amarillo | `#F7BD0C` | 245, 189, 12 | Color primario de marca. Logo, acentos, botones, énfasis. |
| `--balam-cafe` | Café | `#331F0E` | 51, 31, 14 | Fondo oscuro de marca, texto sobre claro, superficies. |
| `--balam-blanco` | Blanco | `#FFFFFF` | 255, 255, 255 | Fondo claro, texto sobre café. |

Complementos que aparecen en el manual (sin HEX oficial, apoyo): un **gris neutro** (~`#5C5C5C`) y un **degradado café→amarillo** para fondos/decoración.

```css
:root {
  --balam-amarillo: #F7BD0C;
  --balam-cafe:     #331F0E;
  --balam-blanco:   #FFFFFF;
  --balam-gris:     #5C5C5C; /* neutro de apoyo, sin HEX oficial */
}
```

**Combinaciones del manual:** logo amarillo sobre café (versión principal), café sobre amarillo, y monocromático blanco/negro. Mantener contraste alto (café ↔ amarillo/blanco).

## Tipografía

**Familia única: Poppins** (sans-serif geométrica). Pesos disponibles: Light · Regular · Medium · SemiBold · Bold · ExtraBold.

Jerarquía del manual (px a escala de presentación — reescalar a `rem` en web):

| Nivel | Peso | Tamaño manual |
|---|---|---|
| Títulos | SemiBold | 75 px |
| Subtítulos | Regular | 46 px |
| Párrafo | Light | 28 px |
| Botones | Light | 28 px |

```css
/* Poppins vía Google Fonts o self-hosted */
body { font-family: "Poppins", system-ui, sans-serif; }
h1   { font-weight: 600; }  /* SemiBold */
h2   { font-weight: 400; }  /* Regular  */
p    { font-weight: 300; }  /* Light    */
```

## Logo

- **Símbolo:** felino (jaguar) en avance + wordmark `BALAM` con bajada `TALENTO ESTRATÉGICO`.
- **Versiones:** (1) principal a color sobre café · (2) monocromática a color · (3) blanco y negro. Elegir según fondo para máximo contraste.
- **Área de restricción:** margen libre alrededor del logo ≈ la altura de la contramarca ("X"), sin que texto/imágenes/bordes lo invadan.
- **Tamaño óptimo / mínimos:** 484 px, 352 px y **207 px como mínimo** de ancho para legibilidad.
- **Co-branding:** Balam **siempre en primer lugar**, respetando la distancia definida frente al logo del partner.

## Aplicación al prototipo (Etapa 0)

- Tema oscuro de marca: fondo `--balam-cafe`, texto `--balam-blanco`, acción/acento `--balam-amarillo`.
- Tema claro: fondo `--balam-blanco`, texto `--balam-cafe`, acento `--balam-amarillo`.
- Botones primarios en amarillo con texto café; tipografía Poppins en toda la UI.
- Logo en la versión que corresponda al fondo (principal sobre café; b/n cuando el color no aplique).