# Design System — Local Services

Sistema de tokens e componentes para o nicho **local_services**. Tematização por demo via `themeJson`. WhatsApp e telefone são hierarquia visual primária. Densidade e urgência variam por posicionamento (emergência > recorrente > especialista).

> Regra de ouro: **conversão > decoração**. Cada viewport tem que ter WhatsApp ou telefone alcançável com o polegar.

---

## 1. Tokens

### 1.1 Cores semânticas

| Token | Função | Emergência 24h | Residencial recorrente | Técnico especialista |
|---|---|---|---|---|
| `--color-primary` | Marca, CTA primário | `#0D0F12` | `#3F5B40` | `#0050E0` |
| `--color-secondary` | Apoio, chips, hover | `#2EE078` | `#8AA38C` | `#475569` |
| `--color-accent` | WhatsApp, emergência, urgência | `#FF3B3B` | `#D4A24C` | `#0050E0` |
| `--color-bg` | Fundo da página | `#0D0F12` | `#F0EBE3` | `#FFFFFF` |
| `--color-surface` | Cards, formulário | `#181C22` | `#FFFFFF` | `#F7F9FC` |
| `--color-text` | Texto principal | `#FFFFFF` | `#2E2A26` | `#111111` |
| `--color-muted` | Metadata, legenda | `#94A3B8` | `#6E665C` | `#5A6B7A` |

`--color-whatsapp` fixo: `#25D366` em todas as demos (cor reconhecível da marca).

### 1.2 Tipografia

| Demo | `--font-heading` | `--font-body` |
|---|---|---|
| Emergência 24h | Inter / Plex Sans em peso 800–900 + JetBrains Mono para telefone | Inter |
| Residencial recorrente | Söhne / Reckless serif para títulos suaves | Inter / Karla |
| Técnico especialista | IBM Plex Sans bold + Plex Mono | IBM Plex Sans |

Escala (rem):

| Token | rem | px | Uso |
|---|---|---|---|
| `text-xs` | 0.75 | 12 | legais, badges |
| `text-sm` | 0.875 | 14 | metadata, links footer |
| `text-base` | 1.0 | 16 | corpo |
| `text-lg` | 1.125 | 18 | lead |
| `text-xl` | 1.25 | 20 | título card |
| `text-2xl` | 1.5 | 24 | seção menor |
| `text-3xl` | 1.875 | 30 | seção |
| `text-4xl` | 2.25 | 36 | hero mobile |
| `text-5xl` | 3.0 | 48 | hero tablet |
| `text-6xl` | 3.75 | 60 | hero desktop |
| `text-7xl` | 4.5 | 72 | telefone gigante (emergência) |
| `text-8xl` | 6.0 | 96 | telefone hero desktop |

### 1.3 Espaço (4px)

`0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32`.

- Mobile lateral: `4` (16px). Desktop: `8`/`10`.
- Entre seções: `16` mobile, `24` desktop.
- Padding de CTA principal: `4` vertical `6`–`8` horizontal.

### 1.4 Raio

| Token | Valor | Uso |
|---|---|---|
| `--radius-none` | 0 | demos técnicos (spec sheet) |
| `--radius-sm` | 4px | inputs |
| `--radius-md` | 8px | cards padrão |
| `--radius-lg` | 16px | cards destaque |
| `--radius-xl` | 24px | card de plano residencial |
| `--radius-full` | 9999px | pílulas, FAB WhatsApp, badges |

Emergência tende a `radius-md` (funcional). Recorrente a `radius-lg/xl` (acolhedor). Especialista a `radius-none/sm` (técnico).

### 1.5 Sombra

| Token | Valor | Uso |
|---|---|---|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.04)` | inputs focus |
| `--shadow-md` | `0 6px 16px rgba(0,0,0,0.08)` | cards |
| `--shadow-lg` | `0 16px 40px rgba(0,0,0,0.14)` | sticky CTA mobile |
| `--shadow-pulse` | `0 0 0 0 rgba(37,211,102,0.5)` | animação no FAB WhatsApp |

---

## 2. Componentes-base

### 2.1 Botão (`btn`)

**Variantes**: `btn-primary`, `btn-accent` (urgência), `btn-whatsapp` (verde fixo `#25D366`), `btn-phone` (tel:), `btn-ghost`.

**Tamanhos**: `sm` (h-9), `md` (h-11), `lg` (h-14). CTA principal sempre `lg` em mobile.

**Estados**: hover (-8% luminância), focus (anel 2px accent), disabled (opacity 50), loading (spinner), pulsing (animação box-shadow expandindo — só em FAB WhatsApp).

**Do**: WhatsApp visível em todas as viewports. Telefone como `tel:` clicável.
**Don't**: 4 CTAs do mesmo peso. Botão "Saiba mais" sem destino claro.

### 2.2 Card de serviço (`card-service`)

**Anatomia**: ícone/foto · título · descrição curta · preço-base ou "a partir de" · CTA (WhatsApp ou orçamento).

Variantes:
- `card-service-list`: linha horizontal com ícone à esquerda (emergência).
- `card-service-plan`: card de plano de assinatura (residencial).
- `card-service-spec`: ficha técnica tabular (especialista).

### 2.3 Phone block

Bloco dedicado ao telefone em demos de emergência. Telefone em display gigante (`text-7xl`/`text-8xl`), formato `(XX) XXXXX-XXXX`. Sempre `tel:` clicável. Acompanha selo "atendemos agora" ou contador de tempo médio de resposta.

### 2.4 Header

Sticky. Logo + nav + dois CTAs: WhatsApp + telefone (emergência), WhatsApp + agendar (recorrente), WhatsApp + orçamento (especialista).

Mobile: telefone clicável no header como `tel:`. Hamburguer abre drawer. FAB WhatsApp persistente.

### 2.5 Hero

Variantes:
- `hero-emergency`: tela quase cheia, telefone gigante centralizado, status "atendimento agora", área de atendimento como pulse num mapa estilizado.
- `hero-recurring`: foto da equipe em ambiente real do cliente + tipografia editorial calma + plano em destaque.
- `hero-spec`: ficha técnica + foto do equipamento + dados em mono + CTA "orçamento sem custo".

### 2.6 Service area map

Mapa estilizado (SVG ou imagem com overlay), pin do escritório, bairros/cidades atendidos com chips, raio em km. **Não** embed cru do Google Maps.

### 2.7 Process steps

3–4 passos numerados: "1. WhatsApp · 2. Visita gratuita · 3. Orçamento por escrito · 4. Execução com garantia". Tipografia grande, ícones de linha.

### 2.8 Trust strip

Faixa horizontal com: anos de mercado, número de clientes atendidos, nota Google, certificações (NR-10, Anvisa, PMOC). Sempre acima ou abaixo do hero.

### 2.9 Testimonial

Card com foto opcional do cliente + bairro + serviço + estrelas + texto curto. Bairro real (não cidade) aumenta confiança ("Vila Mariana — instalação de AC, mar/2026").

### 2.10 FAQ

5–8 perguntas. Foco em objeção: preço, garantia, área de atendimento, horário de emergência, prazo, forma de pagamento.

### 2.11 Footer

Marca + área de atendimento + contato (WhatsApp gigante, telefone, e-mail) + certificações + redes. Faixa inferior: CNPJ/MEI, política, **disclaimer demo**.

### 2.12 WhatsApp FAB

Botão circular 56px+ no canto inferior direito em mobile. Animação `pulse` sutil para indicar interatividade. Link `wa.me/55XX?text=...` com mensagem pré-preenchida.

---

## 3. Estados

| Componente | Estados |
|---|---|
| Botão | default, hover, focus, active, disabled, loading, pulsing |
| FAB WhatsApp | default, hover, pulsing |
| Input | default, focus, filled, error, disabled |
| Card | default, hover, selected |
| Accordion | collapsed, expanded |

---

## 4. Regras de uso

1. **WhatsApp em todas as viewports.** FAB fixo mobile, header desktop.
2. **Telefone clicável.** `<a href="tel:+55...">` sempre, nunca texto puro.
3. **Foto real.** Equipe uniformizada, ambiente de trabalho. Sem stock óbvio.
4. **Garantia em destaque.** Selo, badge, ou tipografia. "90 dias", "6 meses", "12 meses".
5. **Área de atendimento explícita.** Lista de bairros ou raio em km.
6. **Preço-base ou "a partir de".** Cliente quer ancorar; se não puder, "orçamento sem custo" com SLA.
7. **Process steps.** Mostrar o que acontece do contato à execução.
8. **Trust strip.** Anos, clientes, certificações. Não no hero, mas perto.
9. **Mobile-first.** CTA principal alcançável com o polegar.
10. **Linguagem direta**, pt-BR, "você" formal. Sem "imperdível", "exclusivo", "milagre".

---

## 5. Como tematizar

```html
<style>
  :root {
    --color-primary:   #0D0F12;
    --color-secondary: #2EE078;
    --color-accent:    #FF3B3B;
    --color-bg:        #0D0F12;
    --color-surface:   #181C22;
    --color-text:      #FFFFFF;
    --color-muted:     #94A3B8;
    --color-whatsapp:  #25D366;
    --font-heading:    'Inter', sans-serif;
    --font-body:       'Inter', sans-serif;
    --radius-base:     8px;
    --shadow-card:     0 6px 16px rgba(0,0,0,0.08);
  }
</style>
```

Markup constante; tokens variam por demo.