# Referência: Propostas Premium — Design de Capas e Páginas Visuais

Guia prático para criar páginas visuais de impacto em propostas comerciais Descomplicar.
Baseado na filosofia canvas-design: design-forward, cada página comunica antes de ser lida.

---

## Filosofia de Design

**Princípio central:** o cliente forma opinião sobre a proposta nos primeiros 3 segundos.
Cada página deve funcionar como imagem antes de funcionar como texto.

| Princípio | Aplicação |
|-----------|-----------|
| Visual-first | Imagem/composição comunica o tema antes do texto |
| Texto mínimo | Menos palavras, mais impacto por palavra |
| Espaço negativo | Respiração generosa — o vazio é parte do design |
| Tipografia como design | O tipo de letra é um elemento visual, não só legível |
| Paleta disciplinada | Máximo 3 cores por página (+ neutros) |

---

## Paleta Descomplicar

```python
# Cores base da marca — aplicar consistentemente
PALETA = {
    "dourado":    "#C9A84C",   # acento principal
    "dourado_lt": "#E8D5A3",   # acento suave / fundo dourado
    "preto":      "#0D0D0D",   # fundo principal dark
    "cinza_esc":  "#1A1A1A",   # fundo secundário
    "cinza_med":  "#3D3D3D",   # separadores
    "cinza_lt":   "#F5F5F5",   # fundo light / texto em dark
    "branco":     "#FFFFFF",   # texto em dark, fundo clean
}

# Tipografia (Nexa é a fonte da marca)
FONTES = {
    "heading":   "Nexa Bold",
    "subheading":"Nexa Light",
    "corpo":     "Source Sans 3",
    "detalhe":   "IBM Plex Mono",   # para números, códigos
}
```

---

## Workflow: do conceito à página

```
1. BRIEFING         — que secção é esta? qual a mensagem principal?
2. COMPOSIÇÃO       — escolher layout base (ver tipos abaixo)
3. HIERARQUIA       — definir 3 níveis: âncora visual / título / detalhe
4. COR              — aplicar paleta com dominante + acento
5. TIPOGRAFIA       — tamanhos com contraste forte (ex: 72pt / 14pt)
6. REFINAMENTO      — remover tudo o que não é necessário
7. EXPORTAÇÃO       — PDF vector (300dpi para imprimir, 72dpi para digital)
```

---

## Tipos de Página por Secção

### Capa de Proposta (primeira página)

**Objectivo:** impressionar, identificar o cliente, criar antecipação.

```python
# Composição com python-reportlab
from reportlab.lib.pagesizes import A4
from reportlab.pdfgen import canvas
from reportlab.lib.colors import HexColor

W, H = A4  # 595 x 842 pontos

def criar_capa(c: canvas.Canvas, nome_cliente: str, titulo: str):
    # Fundo preto total
    c.setFillColor(HexColor("#0D0D0D"))
    c.rect(0, 0, W, H, fill=1, stroke=0)

    # Barra dourada lateral esquerda (elemento âncora)
    c.setFillColor(HexColor("#C9A84C"))
    c.rect(0, 0, 8, H, fill=1, stroke=0)

    # Logo Descomplicar (topo direito)
    c.drawImage("assets/logo-white.png", W - 130, H - 60, 110, 40, mask="auto")

    # Título em grande — dois terços da página
    c.setFillColor(HexColor("#FFFFFF"))
    c.setFont("Nexa-Bold", 52)
    # Quebra em 2 linhas se necessário
    linhas = quebrar_texto(titulo, max_chars=24)
    y = H * 0.55
    for linha in linhas:
        c.drawString(48, y, linha)
        y -= 64

    # Nome do cliente — acento dourado
    c.setFillColor(HexColor("#C9A84C"))
    c.setFont("Nexa-Light", 18)
    c.drawString(48, H * 0.35, f"Preparado para {nome_cliente}")

    # Data — rodapé discreto
    c.setFillColor(HexColor("#3D3D3D"))
    c.setFont("SourceSans3-Regular", 10)
    c.drawString(48, 32, f"Descomplicar® · descomplicar.pt · Março 2026")
```

**Composição alternativa (versão light):**
- Fundo branco com mancha fotográfica no lado direito (60% da largura)
- Título sobreposto à foto com overlay escuro
- Logo em preto, barra dourada mantida

### Separador de Secção

**Objectivo:** pausar o ritmo, anunciar o tema seguinte.

```python
def criar_separador(c: canvas.Canvas, numero: str, titulo_seccao: str):
    # Fundo dourado total — inversão de cor
    c.setFillColor(HexColor("#C9A84C"))
    c.rect(0, 0, W, H, fill=1, stroke=0)

    # Número enorme em background (marca de água visual)
    c.setFillColor(HexColor("#E8D5A3"))  # dourado claro
    c.setFont("Nexa-Bold", 280)
    c.drawString(-20, H * 0.1, numero)  # pode sair do bounds — intencional

    # Título da secção — preto sobre dourado
    c.setFillColor(HexColor("#0D0D0D"))
    c.setFont("Nexa-Bold", 42)
    c.drawString(48, H * 0.45, titulo_seccao)

    # Linha divisória fina
    c.setStrokeColor(HexColor("#0D0D0D"))
    c.setLineWidth(1)
    c.line(48, H * 0.42, W - 48, H * 0.42)
```

### Infográfico de Dados

**Objectivo:** tornar números abstractos em narrativa visual.

```python
def criar_infografico_metricas(c: canvas.Canvas, metricas: list[dict]):
    """
    metricas = [
        {"valor": "3x", "label": "Aumento de tráfego", "icone": "trend"},
        {"valor": "47%", "label": "Redução de custo por lead", "icone": "savings"},
        {"valor": "12", "label": "Palavras-chave no Top 3", "icone": "star"},
    ]
    """
    # Fundo neutro quente
    c.setFillColor(HexColor("#F5F5F5"))
    c.rect(0, 0, W, H, fill=1, stroke=0)

    # Título da página
    c.setFillColor(HexColor("#0D0D0D"))
    c.setFont("Nexa-Bold", 32)
    c.drawString(48, H - 80, "Resultados Projectados")

    # Grid de métricas (3 colunas)
    col_w = (W - 96) / len(metricas)
    for i, m in enumerate(metricas):
        x = 48 + i * col_w
        y_center = H * 0.5

        # Caixa de métrica
        c.setFillColor(HexColor("#FFFFFF"))
        c.roundRect(x + 8, y_center - 80, col_w - 16, 160, 12, fill=1, stroke=0)

        # Valor principal — grande e dourado
        c.setFillColor(HexColor("#C9A84C"))
        c.setFont("Nexa-Bold", 56)
        c.drawCentredString(x + col_w / 2, y_center + 20, m["valor"])

        # Label — preto, pequeno
        c.setFillColor(HexColor("#3D3D3D"))
        c.setFont("SourceSans3-Regular", 11)
        c.drawCentredString(x + col_w / 2, y_center - 20, m["label"])
```

### Página de Pricing Visual

**Objectivo:** apresentar preços sem que pareçam uma tabela de custos.

```python
def criar_pricing(c: canvas.Canvas, planos: list[dict]):
    """
    planos = [
        {"nome": "Essencial", "preco": 450, "destaque": False,
         "items": ["SEO On-page", "Relatório mensal", "2 artigos/mês"]},
        {"nome": "Crescimento", "preco": 850, "destaque": True,
         "items": ["SEO completo", "Google Ads", "4 artigos/mês", "Dashboard BI"]},
    ]
    """
    # Fundo escuro para pricing
    c.setFillColor(HexColor("#0D0D0D"))
    c.rect(0, 0, W, H, fill=1, stroke=0)

    card_w = (W - 96 - 16 * (len(planos) - 1)) / len(planos)

    for i, p in enumerate(planos):
        x = 48 + i * (card_w + 16)
        y_top = H * 0.75

        if p["destaque"]:
            # Card dourado para o plano recomendado
            c.setFillColor(HexColor("#C9A84C"))
            c.roundRect(x - 4, y_top - 4, card_w + 8, H * 0.5 + 8, 16, fill=1, stroke=0)
            texto_cor = HexColor("#0D0D0D")
        else:
            c.setFillColor(HexColor("#1A1A1A"))
            c.roundRect(x, y_top, card_w, H * 0.5, 12, fill=1, stroke=0)
            texto_cor = HexColor("#FFFFFF")

        # Nome do plano
        c.setFillColor(texto_cor)
        c.setFont("Nexa-Bold", 20)
        c.drawString(x + 20, y_top + H * 0.5 - 44, p["nome"])

        # Preço
        c.setFont("Nexa-Bold", 48)
        c.drawString(x + 20, y_top + H * 0.5 - 100, f"{p['preco']}€")
        c.setFont("SourceSans3-Regular", 11)
        c.drawString(x + 20, y_top + H * 0.5 - 118, "/ mês + IVA")

        # Items incluídos
        c.setFont("SourceSans3-Regular", 12)
        y_item = y_top + H * 0.5 - 150
        for item in p["items"]:
            c.drawString(x + 28, y_item, f"— {item}")
            y_item -= 22
```

---

## Ferramentas: python-reportlab vs pptxgenjs

| Critério | python-reportlab | pptxgenjs (Node) |
|----------|-----------------|------------------|
| Output | PDF nativo | PPTX (editável) |
| Controlo | Pixel-perfect | Aproximado |
| Fontes custom | Suporte completo | Limitado |
| Melhor para | Proposta final PDF | Template editável pelo cliente |
| Ambiente | Servidor dev (`/root/Dev`) | Servidor dev ou local |

**Recomendação:** usar reportlab para proposta final; pptxgenjs se o cliente precisar de editar.

```bash
# Instalar no servidor dev
pip install reportlab Pillow

# Registar fontes Nexa
from reportlab.pdfbase import pdfmetrics
from reportlab.pdfbase.ttfonts import TTFont
pdfmetrics.registerFont(TTFont("Nexa-Bold",  "/root/Dev/assets/fonts/Nexa-Bold.ttf"))
pdfmetrics.registerFont(TTFont("Nexa-Light", "/root/Dev/assets/fonts/Nexa-Light.ttf"))
```

---

## Regras de Composição (resumo operacional)

1. **Uma mensagem por página** — se precisas de duas frases para explicar, remove uma
2. **Âncora visual primeiro** — o olho precisa de um ponto de entrada (número grande, foto, cor)
3. **Contraste de escala** — combinar elemento 280pt com texto 12pt (não 24pt com 18pt)
4. **Margens generosas** — margem mínima de 48pt em A4; prefere 64pt
5. **Rodapé discreto** — página + marca em 9pt, nunca competir com conteúdo
6. **Máximo 3 fontes** — Nexa Bold + Nexa Light + Source Sans 3 (IBM Plex Mono opcional para dados)
7. **Alinhamento consistente** — escolher esquerda ou centrado para o documento inteiro

---

## Checklist de Qualidade

- [ ] Capa com nome do cliente e data correctos
- [ ] Logo Descomplicar presente em todas as páginas (rodapé ou canto)
- [ ] Paleta restrita a 3 cores por página
- [ ] Nenhuma fonte genérica (Arial, Calibri, Times)
- [ ] Espaço negativo generoso — sem páginas "cheias"
- [ ] Preços em EUR sem decimais desnecessários (850EUR, não 850,00EUR)
- [ ] PDF exportado em vector (não rasterizado)
- [ ] Tamanho final < 10MB para envio por email
- [ ] Testar visualização em modo claro e escuro (PDF viewer)

---

*Referência: premium-proposals v1.0 | 2026-03-10 | Descomplicar®*
