# Identidad visual — Supplements Shop

Documenta los **defaults canónicos** del producto. Cada tenant puede sobrescribir vía `/admin/onboarding` o `/admin/site-data`, pero estos son los valores con los que nace una provisión fresh.

## Paleta de colores

Inspirada en marcas premium del rubro (Optimum Nutrition, 1st Phorm) — azul profesional + verde menta accent.

| Variable CSS | Hex | Uso |
|---|---|---|
| `--primary` | `#141F88` | Azul deep — botones CTA, page-headers, headlines hover |
| `--secondary` | `#030E68` | Azul casi navy — alternativo primary, headings sobre fondo claro |
| `--tertiary` | `#4BB98C` | Verde menta — accent en boxes/badges/cards (NUEVO, DESCUENTO) |
| `--quaternary` | `#1A2333` | Gris azulado oscuro — fondo del footer, dark sections, trust bar |
| `--dark` | `#0B1124` | Texto base sobre fondos claros |
| `--light` | `#FFFFFF` | Texto sobre fondos oscuros |

**Por qué esta paleta**:
- Azul profundo transmite confianza profesional (cf. marcas argentinas como Star Nutrition, ENA Sport)
- Verde menta da el "wellness/salud" sin caer en lo "natural artesanal" (que sería verde sage opaco)
- Quaternary oscuro permite secciones de alto contraste (athlete spotlight, footer)

## Tipografía

| Slot | Familia | Uso |
|---|---|---|
| `font-family-primary` | Poppins | Texto general, cuerpos, labels |
| `font-family-secondary` | Poppins | Headings — mismo family que primary, peso diferenciado |
| `font-family-tertiary` | Shadows Into Light | Decorativo, citas en athlete spotlight (rare) |

**Headings shop**:
- Class `font-weight-extra-bold` (800) con `letter-spacing: -0.5px` para tracking apretado
- Tamaños vía `clamp()` para responsive natural
- Uppercase en hero, eyebrows ("HISTORIAS REALES"), botones

## Iconografía

- Font Awesome 6 (incluido en Porto template)
- Estilo `fas` (solid) para iconos comerciales (shopping-bag, cart-plus, truck, check-circle)
- Estilo `fab` (brands) para WhatsApp, redes sociales
- Tamaños consistentes: `1rem` inline icons, `1.2rem` pillar icons, `2.5rem` hero icons

## Imagery — direcciones de arte

Producto premium del rubro suplementos debe transmitir:
- **Performance** — gym, deporte, atletismo (NO yoga lifestyle pastel)
- **Cuerpo** — manos sosteniendo el producto, atleta en acción, primer plano de polvo/perlas
- **Certificación** — etiquetas, sellos ANMAT, frascos profesionales

**Source default**: Unsplash con `?w=900&h=600&fit=crop&auto=format&q=80` para listado, `?w=800&h=800` para detail main, `?w=200&h=200` para thumbs.

**Lo que NO usar**:
- Lifestyle wellness genérico (pastel, manos sosteniendo verdes)
- Médicos con bata blanca (eso es demo-medical)
- Fotos de comida (eso es restaurant)

## Logos

`brand_kit.logo_pack` = `medical` (heredado, los logos siguen el pack medical-style). Para tenant real:
- Logo principal: max 800×200 (aspect 4:1) PNG transparente
- Logo sticky: idéntico o versión más compacta
- Logo footer: idéntico o versión light/inverso

## Voz y tono

| Atributo | Sí | No |
|---|---|---|
| Profesional | "Marcas certificadas ANMAT" | "Suplementos top que rompen" |
| Confiable | "Productos con evidencia clínica" | "Lo que toman los pros" |
| Directo | "Hacer pedido" | "Conocer la propuesta" |
| Cercano | "Te asesoramos según tu objetivo" | "Soporte 24/7 personalizado" |
| Honesto | "No vendemos lo más caro, vendemos lo que funciona" | "Promo única tiempo limitado" |

## Decisiones de UX shop

- **CTA primario**: `"Hacer pedido"` → `/products-catalogue` (no `/contact`, no genérico)
- **Headline hero**: Verbo de acción + beneficio ("Suplementos que funcionan", "Potenciá tu rendimiento")
- **Botones**: Uppercase + letter-spacing 1px + border-radius 2px (más cuadrado/comercial vs 4px corporate)
- **Cards**: Hover con `translateY(-3px)` + shadow — sutil pero diferenciado
- **Imágenes**: Aspect 1/1 cuadrado en catálogo y detail (estándar e-commerce)