# Guia do banner patrocinado — Alto Vale Shopping

Este documento é para quem vai **desenhar a arte** de um banner no
altovaleshopping.com. Ele diz a medida exata de cada peça, o que a plataforma
desenha por cima da sua arte, e o que muda na mensagem conforme o espaço
contratado.

Modelos prontos (SVG, abra no Figma, Illustrator ou Canva):
`/ads/modelos/` — um par desktop + celular para cada espaço de faixa, e
`stories-vertical.svg` para o slide dos stories.

`marca-desktop.svg` e `marca-mobile.svg` são a peça da **casa** — o convite do
próprio marketplace, na identidade da marca. Serve de referência de tom e de
arte para divulgação nossa (post, parceiro, material impresso); não é espaço à
venda, e por isso é a única peça sem o selo "Publicidade" e sem a linha do
anunciante.

---

## 1. As medidas

São **duas peças** para os espaços de faixa (home, busca e painel do comprador)
e **uma terceira, vertical**, só para os stories. O que muda de um espaço
de faixa para outro é a mensagem, não o arquivo.

| Peça | Medida | Proporção | Obrigatória? |
|---|---|---|---|
| **Desktop** | **1440 × 180 px** | 8:1 | Sim |
| **Celular** | **1080 × 540 px** | 2:1 | Não, mas recomendada |
| **Stories** | **1080 × 1920 px** | 9:16 | Não — e só para quem contrata o espaço `stories` |

- **Formatos aceitos:** JPG, PNG, WebP ou AVIF. **Até 5 MB** por arquivo.
- **Mínimo aceitável:** 1200 px de largura no desktop, 720 px no celular. Abaixo
  disso a arte aparece borrada em tela retina.
- **Acima de 1440 px de largura não adianta:** a imagem é reamostrada para 1440
  na entrega. Enviar 4000 px só deixa o upload mais lento.

### Por que a peça de celular existe

O espaço é **8:1 no desktop e 2:1 no celular** — são formatos muito diferentes.
Se você mandar só a peça de desktop, ela aparece **inteira** no celular (menor,
sem corte) — o que é legível, mas pequeno. Uma peça 8:1 recortada para 2:1
perderia as duas pontas, que é exatamente onde ficam o logo e o botão.

Se puder mandar as duas, mande. Se só tiver uma, mande a de desktop.

### Por que a peça de stories é vertical

O slide de stories ocupa **a tela inteira do celular**, de pé. Sem a peça
vertical o site ainda exibe a sua campanha — a arte de celular entra como um
**cartão centrado** sobre fundo escuro, e funciona. Mas é meia tela de fundo
liso em volta: uma faixa 8:1 no meio de uma tela cheia parece arte quebrada.

Se você contratou o espaço `stories`, mande a peça de 1080 × 1920. Ela vira o
slide inteiro. Se não mandar, nada quebra — cai no cartão.

---

## 2. O que a plataforma desenha por cima

Dois selos são aplicados sobre a arte, e **não** fazem parte do arquivo que você
entrega. Deixe esses dois cantos livres:

| Selo | Onde | Espaço a reservar |
|---|---|---|
| Pill **"PUBLICIDADE"** | canto superior direito | ~130 × 36 px no desktop, ~220 × 60 px no celular |
| Nome + logo do anunciante | canto inferior esquerdo | ~40% da largura × 32 px no desktop, ~50% × 60 px no celular |

O pill "Publicidade" é obrigatório e não sai: anúncio pago sempre se declara.
Nos modelos em `/ads/modelos/` os dois selos estão desenhados em cinza — é a
área que você não deve usar.

**Nos stories os selos não são cantos, são faixas.** O rótulo "Publicidade" fica
centrado no alto e o botão da campanha ocupa a largura toda no rodapé: reserve
os **260 px de cima** e os **250 px de baixo** da peça vertical. O nome do
anunciante NÃO é sobreposto ali — quem assina a peça é a arte, então ponha a sua
marca dentro dela. O modelo `stories-vertical.svg` traz as duas faixas
desenhadas.

### Área segura

Mantenha texto e logo dentro de uma margem de **48 px no desktop** e **72 px no
celular** em relação às bordas, e fora dos dois cantos acima. O card tem cantos
arredondados: qualquer elemento colado no canto some.

---

## 3. As regras que valem para qualquer banner

1. **Uma ideia por peça.** 180 px de altura no desktop é uma faixa, não um
   cartaz. Uma manchete, uma linha de apoio, um botão. Nada mais.
2. **Manchete de até 40 caracteres.** No celular, até 24 caracteres por linha e
   no máximo duas linhas.
3. **Contraste real.** Texto branco sobre foto clara desaparece. Se a arte tiver
   foto, ponha uma faixa sólida ou um degradê atrás do texto.
4. **Botão visível, com verbo.** "Conhecer", "Simular", "Ver ofertas". Ele não
   precisa funcionar como botão — a peça inteira é clicável — mas precisa
   parecer um.
5. **Não imite a interface do site.** Banner que finge ser um card de imóvel ou
   um alerta do sistema gera clique enganado, reclamação e cancelamento. Está
   vetado nos Termos de Patrocínio.
6. **Preço na peça exige preço na página de destino.** Se a manchete diz um
   valor ou uma condição, o link tem que levar a essa oferta — não à home do seu
   site.
7. **Sem texto minúsculo.** Nada abaixo de 14 px no desktop e 22 px no celular.
   Rodapé de condições contratuais não cabe aqui; ele vai na página de destino.
8. **Logo pequeno, mensagem grande.** Seu logo já aparece no selo do canto
   inferior. Na arte ele é assinatura, não protagonista.
9. **Peso do arquivo.** Mire em menos de 300 KB. O banner divide a tela com fotos
   de imóveis; peça pesada atrasa o carregamento e derruba o CTR.

---

## 4. O que muda em cada espaço

A medida é a mesma. O que muda é **em que estado mental a pessoa está** quando
vê o banner — e é isso que decide a mensagem.

### Página inicial (`home_hero`)

**Quem vê:** todo mundo que chega ao site, muitos pela primeira vez, sem busca
definida. É o espaço mais nobre e o mais caro.

**Serve para:** marca e lançamento. Um empreendimento novo, uma inauguração, uma
campanha institucional da construtora.

**Não serve para:** oferta de nicho ou condição complicada. Quem acabou de
chegar não tem contexto para entender desconto condicionado.

**Fórmula que funciona:** nome do que você está anunciando + onde fica + prazo.
> *Residencial Bela Vista — 2 e 3 dormitórios no Centro de Rio do Sul, entrega em
> 2027* · botão **Conhecer**

---

### Busca de imóveis (`shopping_list`)

**Quem vê:** pessoa navegando resultados de busca, comparando anúncios, com
critério na cabeça (bairro, faixa de preço, quartos).

**Serve para:** o que **destrava a compra** — financiamento, avaliação, crédito,
documentação, seguro. Ela está a um passo da decisão e travada em algo.

**Não serve para:** institucional genérico. Ele é ignorado no meio de uma lista
de imóveis; a atenção está em comparar cards.

**Fórmula que funciona:** o obstáculo + o número que resolve.
> *Financiamento aprovado em 48h — simule com o banco parceiro sem sair do Alto
> Vale* · botão **Simular agora**

**Cuidado:** este é o espaço em que a arte mais se parece com um card de imóvel.
Use um fundo claramente diferente do card branco do site (cor sólida, foto com
faixa) para que ninguém clique achando que é um anúncio de imóvel.

---

### Painel do comprador (`buyer_home`)

**Quem vê:** usuário logado, com favoritos e visitas agendadas. É o público mais
qualificado do site — e o menor.

**Serve para:** serviço da mudança e do pós-compra. Mudança, marcenaria, reforma,
móveis, internet, seguro residencial.

**Não serve para:** captar imóvel para venda (esta pessoa está comprando) nem
repetir a oferta que ela já viu na busca.

**Fórmula que funciona:** o próximo passo depois da chave.
> *Mudou? A gente carrega — mudanças residenciais no Alto Vale, orçamento em 1
> minuto* · botão **Pedir orçamento**

---

### Stories (`stories`)

**Quem vê:** quem abriu os stories dos imóveis e está passando slide a slide, no
celular, com a tela inteira dedicada a uma coisa de cada vez. É a única atenção
exclusiva do site — e ela dura poucos segundos.

**Serve para:** uma mensagem só, grande. Lançamento, plantão de vendas, decorado
aberto, data com hora marcada.

**Não serve para:** tabela, condição com asterisco, três ofertas na mesma peça.
Ninguém lê letra pequena num slide que anda sozinho.

**Fórmula que funciona:** o convite + quando.
> *Decorado aberto neste sábado — Residencial Bela Vista, Centro de Rio do Sul,
> das 9h às 17h* · botão **Agendar visita**

**Cuidado com o rodapé:** o botão que leva ao seu site é desenhado pela
plataforma, na faixa de baixo. Se você desenhar um botão na sua arte, ponha-o
mais acima — dois botões colados confundem, e só o de baixo é clicável.

---

## 5. Se você vai gerar a arte com IA

Os modelos em `/ads/modelos/` já saem prontos para editar. Se preferir gerar
uma peça do zero com um modelo de imagem, use o prompt abaixo trocando o que
está entre colchetes — e **componha o texto por cima depois**, num editor.
Modelos de imagem escrevem texto com erro de grafia, e um banner com erro de
português é pior do que banner nenhum.

> Wide horizontal banner background, 8:1 aspect ratio, [assunto: fachada de
> prédio residencial ao entardecer / caminhão de mudança em rua arborizada /
> balcão de loja de materiais], clean editorial photography, generous empty
> space on the right third for text, muted cool tones with a deep burgundy
> accent (#6c043b), soft natural light, no text, no logos, no watermarks.

Para a peça de celular, troque para `2:1 aspect ratio` e
`generous empty space in the lower half for text`. Para a de stories, use
`vertical 9:16 aspect ratio, full-bleed` e
`generous empty space in the top and bottom fifths for text` — são as duas
faixas que a plataforma cobre.

**Checklist antes de mandar a arte:**

- [ ] 1440 × 180 px (e, se possível, 1080 × 540 px)
- [ ] 1080 × 1920 px, se o espaço contratado inclui os stories
- [ ] Menos de 5 MB — de preferência menos de 300 KB
- [ ] JPG, PNG, WebP ou AVIF
- [ ] Canto superior direito e canto inferior esquerdo livres (nos stories: as
      faixas de cima e de baixo)
- [ ] Manchete legível a um braço de distância, no celular
- [ ] Botão com verbo
- [ ] Link de destino levando exatamente à oferta anunciada
- [ ] Sem erro de português (leia em voz alta)

---

Dúvida sobre o espaço contratado, o período ou o valor da diária:
**altovaleshopping.com/anuncie**