# Mariachis.co — Guía de Marca y Sistema de Diseño

> Referencia técnica extraída del código fuente. Usar como base para toda nueva vista, landing y componente.

---

## 1. Identidad de marca

### Nombre y concepto
- **Nombre:** Mariachis.co
- **Posicionamiento:** Marketplace de mariachis en Colombia — conecta artistas con clientes.
- **Tono:** Profesional, cálido, directo. No formal en exceso. Sin anglicismos innecesarios.

### Logo

| Archivo | Ruta | Uso |
|---|---|---|
| Logo SVG (isotipo + wordmark) | `/marketplace/assets/logo.svg` | Web, emails, documentos |
| Logo PNG wordmark | `/marketplace/assets/logo-wordmark.png` | Emails, fondos blancos |
| Logo PNG wordmark 390px | `/marketplace/assets/logo-wordmark-390.webp` | Mobile, header |
| Logo PNG wordmark 520px | `/marketplace/assets/logo-wordmark-520.webp` | Desktop, hero |
| Logo marketplace PNG | `/marketplace/logo.png` | Fallback general |

#### Anatomía del logo

```
┌─────────────────┐   ┌──────────────────────────────┐
│  Isotipo (48×48)│   │  Wordmark "MARIACHIS.CO"     │
│                 │   │  Fuente: semibold/bold        │
│  Fondo: #9A3412 │ + │  Color: #1F2937 (oscuro)      │
│  Icono: #FDE68A │   │                              │
│  (notas música) │   │                              │
└─────────────────┘   └──────────────────────────────┘
```

**Isotipo:**
- Forma: cuadrado redondeado (rx=12)
- Fondo: `#9A3412` — rojo teja/ladrillo (calidez mexicana)
- Ícono: ondas de música en `#FDE68A` — dorado cálido

**Reglas de uso:**
- Sobre fondos claros: usar el logo completo oscuro
- Sobre fondos oscuros o verdes: usar versión blanca/clara (pendiente crear)
- No distorsionar proporciones
- Mínimo 120px de ancho en digital

---

## 2. Paleta de colores

### Color principal — Verde Mariachis

El verde es el color de marca principal. Representa naturaleza, confianza y Colombia.

| Token CSS | Variable Tailwind | Hex | Uso |
|---|---|---|---|
| `--brand-100` | `brand-100` | `#d9efe7` | Fondos sutiles, badges suaves |
| `--brand-200` | `brand-200` | `#b8ded1` | Bordes de énfasis, separadores |
| `--brand-500` | `brand-500` | `#006847` | Verde medio, hover states |
| `--brand-600` | `brand-600` | `#00563b` | **Color principal** — botones, links, CTAs |
| `--brand-700` | `brand-700` | `#00472f` | Hover de botones primarios |
| `--brand-800` | `brand-800` | `#003422` | Textos sobre fondos verdes |

**Uso en CSS:**
```css
/* Tailwind */
bg-brand-600   text-brand-600   border-brand-600

/* CSS variable */
color: var(--brand-600);
background: var(--brand-600);
```

### Colores de texto

| Variable | Hex | Uso |
|---|---|---|
| `--text-900` | `#111827` | Títulos principales, headings |
| `--text-700` | `#374151` | Texto de cuerpo principal |
| `--text-600` | `#4b5563` | Párrafos secundarios |
| `--text-500` | `#64748b` | Texto de apoyo, labels |
| `--text-400` | `#94a3b8` | Placeholders, metadata |
| `--text-300` | `#cbd5e1` | Texto deshabilitado |

### Fondos y superficies

| Variable | Hex | Uso |
|---|---|---|
| `--bg-base` | `#f8f5f2` | Fondo global del sitio público (cálido, no blanco puro) |
| `--surface` | `#ffffff` | Cards, modals, paneles |
| `--surface-soft` | `#f1f5f9` | Fondos alternativos, zebra tables |
| `--surface-elevated` | `rgba(255,255,255,0.9)` | Nav sticky, overlays |

> ⚠️ El fondo base del sitio público es `#f8f5f2`, NO `#ffffff`. Este tono cálido es parte de la identidad visual.

### Colores de acento

| Variable | Hex | Uso |
|---|---|---|
| `--accent-red` | `#b22222` | Errores, alertas críticas |
| `--accent-success` | `#10b981` | Confirmaciones, éxito |
| Isotipo bg | `#9A3412` | Solo en el isotipo del logo |
| Isotipo icon | `#FDE68A` | Solo en el ícono del isotipo |

### Degradados del hero

El hero del sitio público usa un degradado sutil de fondo:

```css
background: radial-gradient(ellipse at 28% 45%,
  rgba(0, 86, 59, 0.1) 0%, transparent 65%),
  radial-gradient(ellipse at 72% 55%,
  rgba(184, 222, 209, 0.32) 0%, transparent 60%),
  linear-gradient(160deg, #f7fbf9 0%, #fbfdfc 50%, #fefefe 100%);
```

---

## 3. Tipografías

### Fuente principal — Plus Jakarta Sans

| Propiedad | Valor |
|---|---|
| Nombre | Plus Jakarta Sans |
| Fuente | Google Fonts |
| Pesos cargados | 400, 500, 600, 700, 800 |
| Variable CSS | `--font-sans` |
| Clase Tailwind | `font-sans` |
| Uso | Todo el cuerpo de texto, navegación, botones, labels, párrafos |

```css
font-family: "Plus Jakarta Sans", sans-serif;
```

**Import Google Fonts:**
```html
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

### Fuente display — Playfair Display

| Propiedad | Valor |
|---|---|
| Nombre | Playfair Display |
| Fuente | Google Fonts |
| Pesos cargados | 600, 700, 800 |
| Variable CSS | `--font-display` |
| Clase Tailwind | `font-display` |
| Uso | Títulos hero grandes, headings de secciones principales, elementos editoriales |

```css
font-family: "Playfair Display", serif;
```

### Jerarquía tipográfica (sitio público)

| Elemento | Fuente | Tamaño | Peso | Uso |
|---|---|---|---|---|
| Hero H1 | Playfair Display | clamp(2.05rem, 6vw, 4.65rem) | 800 | Título principal del hero |
| H2 secciones | Plus Jakarta Sans | clamp(1.6rem, 3.5vw, 2.4rem) | 900 | Títulos de sección |
| H3 cards | Plus Jakarta Sans | 1.1rem–1.3rem | 700–800 | Nombres en tarjetas |
| Body | Plus Jakarta Sans | 1rem (16px) | 400–500 | Texto de párrafos |
| Lead/Subtítulo | Plus Jakarta Sans | 1.05rem–1.2rem | 500 | Subtítulos de sección |
| Small/Meta | Plus Jakarta Sans | 0.8rem–0.88rem | 400–600 | Fechas, etiquetas, metadata |
| Badge/Eyebrow | Plus Jakarta Sans | 0.72rem–0.75rem | 700–800, uppercase | Etiquetas sobre títulos |

### Jerarquía tipográfica (panel admin/partner)

El panel usa Vuexy con Bootstrap. Las fuentes del admin son:

| Elemento | Fuente | Notas |
|---|---|---|
| Todo el panel | Plus Jakarta Sans | Mismo que el sitio público |
| Código/datos | System monospace | Para tablas de datos técnicos |

---

## 4. Bordes y sombras

### Radios de borde

| Contexto | Valor | Equivalente |
|---|---|---|
| Cards grandes (listing, hero) | `1.5rem` (24px) | `rounded-3xl` |
| Cards medianas | `1rem` (16px) | `rounded-2xl` |
| Botones | `0.75rem–0.88rem` (12–14px) | `rounded-xl` |
| Inputs | `0.7rem` (11px) | `rounded-lg` |
| Chips / badges | `999px` | `rounded-full` |
| Isotipo del logo | `12px` | — |

### Sombras

| Token | Valor CSS | Uso |
|---|---|---|
| `--shadow-soft` | `0 24px 48px -30px rgba(15,23,42,0.42)` | Cards en hover, modals |
| `box-shadow: soft` (Tailwind) | igual que arriba | Clase Tailwind personalizada |
| Sombra ligera | `0 8px 32px rgba(0,0,0,0.08)` | Cards sin hover |

---

## 5. Líneas y bordes

| Variable | Valor | Uso |
|---|---|---|
| `--line-soft` | `rgba(15,23,42,0.1)` | Separadores sutiles, bordes de cards |
| `--line-strong` | `rgba(15,23,42,0.16)` | Bordes con más contraste |
| `--line-contrast` | `rgba(255,255,255,0.75)` | Bordes sobre fondos oscuros |

---

## 6. Animaciones y transiciones

El proyecto usa transiciones suaves consistentes:

```css
/* Transición estándar de color/fondo */
transition: background 0.35s ease, color 0.35s ease;

/* Hover de cards */
transition: transform 0.2s ease, box-shadow 0.2s ease;

/* Hover de botones */
transition: background 0.18s ease, transform 0.18s ease;
```

**Regla:** hover de cards sube `translateY(-3px)` a `translateY(-4px)`. Nunca más de `-6px`.

---

## 7. Assets de marca disponibles

### Logos

| Archivo | Ruta pública | Dimensiones | Formato |
|---|---|---|---|
| Logo SVG completo | `/marketplace/assets/logo.svg` | 192×48 | SVG |
| Wordmark PNG | `/marketplace/assets/logo-wordmark.png` | — | PNG |
| Wordmark WebP 390 | `/marketplace/assets/logo-wordmark-390.webp` | 390px | WebP |
| Wordmark WebP 520 | `/marketplace/assets/logo-wordmark-520.webp` | 520px | WebP |

### Favicons

| Archivo | Ruta | Tamaño |
|---|---|---|
| Favicon ICO | `/favicon.ico` | 16, 32, 48 |
| Favicon PNG 16 | `/marketplace/favicon-16.png` | 16×16 |
| Favicon PNG 32 | `/marketplace/favicon-32.png` | 32×32 |
| Favicon PNG | `/marketplace/favicon.png` | — |

---

## 8. Componentes de UI clave

### Botón primario (verde)
```html
<!-- Tailwind (sitio público) -->
<a href="#" class="inline-block bg-brand-600 hover:bg-brand-700 text-white font-bold px-6 py-3.5 rounded-xl transition-all">
  CTA aquí
</a>

<!-- Bootstrap (panel admin) -->
<a href="#" class="btn btn-primary">CTA aquí</a>
```

### Badge/Eyebrow de sección
```html
<p class="text-xs font-bold uppercase tracking-[0.14em] text-brand-600">
  Etiqueta de sección
</p>
```

### Card estándar
```html
<div class="bg-white rounded-3xl border border-slate-200 shadow-soft p-6 transition-all hover:-translate-y-1 hover:shadow-lg">
  ...
</div>
```

### Nav sticky del sitio público
- Fondo: `rgba(255,255,255,0.95)` con `backdrop-filter: blur(8px)`
- Borde inferior: `1px solid var(--line-soft)`

---

## 9. Pendientes de marca

Los siguientes elementos **no existen aún** y deben crearse:

- [ ] Logo en versión blanca (para uso sobre fondos verdes/oscuros)
- [ ] Isotipo solo (sin wordmark) en SVG — para favicon y apps
- [ ] Paleta de color oficial en Figma o documento de diseño
- [ ] Guía de voz y tono para textos (copywriting)
- [ ] Mockups del home rediseñado
- [ ] Iconografía consistente (actualmente mezcla Boxicons, Tabler Icons y emojis)
- [ ] Ilustraciones o fotos de marca propias

---

## 10. Aplicación en la landing de partners

La landing de `partner.mariachis.co` debe usar:

- **Fondo hero:** `#0f172a` con acento radial verde `rgba(0,86,59,0.35)` ✅
- **Verde CTAs:** `#16a34a` (equivalente a `brand-600` en contexto oscuro) ✅
- **Fuente:** Plus Jakarta Sans para todo, Playfair Display para el H1 principal
- **Logo:** `/marketplace/assets/logo-wordmark-390.webp` en el nav, versión blanca pendiente
- **Fondo base:** `#f8f5f2` para secciones claras (no `#ffffff`)

---

*Actualizar este documento cada vez que se agreguen nuevos colores, fuentes o activos de marca.*