.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#baa35e;--e-global-color-accent:#1C3700;--e-global-color-d559c7b:#006039;--e-global-color-8843812:#00000000;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Verdana";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{font-size:1px;}.elementor-kit-5 h2{font-size:23px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */## Guia de Implementação no **Elementor Pro**
Este guia traduz o layout do manifesto para uma página **100% nativa do Elementor** (mais fácil de editar e manter). Inclui estrutura, widgets, classes e **CSS pronto** para colar em *Site Settings › Custom CSS* (ou em *Page Settings › Advanced › Custom CSS*).
---
### 1) Preparação — Cores & Tipografia (Site Settings)
* **Global Colors**
* `Z Green` `#0e3f2c`
* `Z Green 2` `#0b3425`
* `Z Gold` `#c8a550`
* `Z Cream` `#f7f5ef`
* `Z Ink` `#0f1412`
* `Z Muted` `#5d6b66`
* **Global Fonts**
* **Primary**: Inter (400/500/600/700)
* **Accent**: Playfair Display (600/700)
* **Layout**: Container **largura 1140px**, *Content Width*: Boxed.
* **Radius base**: 18px.
* **Sombra base**: `0 10px 30px rgba(0,0,0,.08)`.
> Opcional: *Site Settings › Experiments* → habilitar **Flexbox Container** (recomendado) e **Improved Asset Loading**.
---
### 2) Nova página
* Título: **Manifesto — Confiança como Padrão**
* Template: *Elementor Canvas* (ou *Default* se quiser manter header/footer do tema)
* Editar com Elementor
---
### 3) Estrutura por Seções (Containers)
#### A) **HERO** (fundo verde em degradê)
* **Container principal** (largura total, sem gap)
* **Background**: deixe sem cor; aplicaremos *CSS* com a classe `.z-hero`.
* **Padding**: `92px 0` (desktop) | `72px 0` (mobile)
* **Class**: `z-hero`
* **Container interno** (máx. 1140px) com **2 colunas** (≈ 55% / 45%)
* **Coluna esquerda**:
* *HTML* (pequeno) para a *brand line* (` ZION Realty`)
* *Heading* **H1**: “Confiança como Padrão” (Accent/Playfair 700)
* *Text Editor* (sub): frase com **exclusividade, projeto de venda e dados**
* **Buttons** (2): Primário (Agendar diagnóstico) / Secundário (WhatsApp)
* **KPI Row**: 3 caixas (usando **Container interno** com 3 colunas) — número grande + rótulo
* `≤ 10%` No-show • `≥ 35%` Leads qualificados • `-25%` Desperdício em 60 dias
* **Coluna direita**:
* **Card 1** (Declaração da Causa) — *Text Editor* dentro de um **Container** com classe `z-card`
* **Card 2** (Rallying cry: #ConfiançaComoPadrão) — idem
#### B) **Manifesto**
* **Grid 2 colunas** (60/40)
* Esquerda: *Eyebrow* (linha + “Manifesto”), *Heading* H2 e *Lead*
* Direita: **Card** com o texto do manifesto (classe `z-card`)
#### C) **Como Operamos** (Arquitetura de Vendas)
* Título + subtítulo
* **Grid de 6 cartões** (3 por linha, depois 2/1 em mobile)
* Cada cartão recebe classe `z-pillar`
* No topo, um *badge* com a etapa (classe `z-pill`): 1) Avaliação… 6) Prestação de contas
#### D) **Para Quem** (Split B2B/B2C)
* **2 colunas** com cartões (`z-split` > `z-col`)
* Título pequeno da tag (Incorporadoras & Imobiliárias / Proprietários & Compradores)
* Título H3 + parágrafo
* **Icon List** com 2–3 bullets (inclua o **+42%** em 90 dias no B2B)
#### E) **Compromissos mensuráveis** (KPIs)
* Título
* **Grid 4 colunas** com cartões `z-kcard`: 72h / 15 min / 100% / 15 dias
#### F) **FAQ**
* Use o widget **Accordion** com 4 perguntas (exclusividade, transição, dados, alto padrão)
#### G) **CTA Final**
* Container com **degradê** (classe `z-cta-final`)
* Título + microcopy + 2 botões (Agendar / WhatsApp)
#### H) **Contato**
* **Form** (Elementor Pro): campos Nome, E-mail, WhatsApp, Tipo de cliente (Select: Incorporadora / Imobiliária / Proprietário / Comprador), Mensagem.
* **Actions After Submit**: Email (+ opcional Webhook/CRM)
* Mensagem de sucesso: “Obrigado! Em até 15 minutos úteis retornamos.”
---
### 4) Classes a aplicar
* No **Container** do HERO: `z-hero`
* Nos **cards** (manchetes, manifesto, etc.): `z-card`
* Nos **badges** dos pilares: `z-pill`
* Nas **caixas KPI** (hero): `z-kpi`
* Nas **kcards** (compromissos): `z-kcard`
* No **CTA final**: `z-cta-final`
* No título pequeno “eyebrow”: aplique `z-eyebrow`
* Para o ponto dourado da brand: use `` dentro de um widget HTML/Text
---
### 5) **CSS** (cole em *Site Settings › Custom CSS*)
```css
:root{
--z-green:#0e3f2c; --z-green-2:#0b3425; --z-gold:#c8a550; --z-cream:#f7f5ef;
--z-ink:#0f1412; --z-muted:#5d6b66; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.08);
--max:1140px;
}
body{background:var(--z-cream)}
/* HERO */
.z-hero{position:relative;color:#fff}
.z-hero > .e-con-inner, .z-hero .elementor-container{max-width:var(--max)}
.z-hero{background:radial-gradient(1200px 600px at 10% 0%, #12533b 0%, var(--z-green) 45%, var(--z-green-2) 100%)}
.z-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--z-gold);box-shadow:0 0 0 4px rgba(200,165,80,.15);margin-right:8px}
/* Cards e texto */
.z-card{background:#fff;border:1px solid #ece7da;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.z-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--z-green);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.14em}
.z-eyebrow:before{content:"";display:inline-block;width:28px;height:2px;background:var(--z-gold)}
/* Pillars */
.z-pillar{background:#fff;border:1px solid #ece7da;border-radius:16px;padding:18px}
.z-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(200,165,80,.12);color:#6f5a2b;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600}
/* KPIs */
.z-kpi, .z-kcard{background:#fff;border:1px solid #ece7da;border-radius:14px;padding:16px;text-align:center}
.z-kpi .n, .z-kcard .n{font-size:28px;font-weight:800;color:var(--z-green)}
.z-kpi .l, .z-kcard .l{font-size:12px;color:var(--z-muted)}
/* CTA Final */
.z-cta-final{color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;background:linear-gradient(135deg, var(--z-green-2), var(--z-green))}
/* Botões */
.elementor-button--primary{background:var(--z-gold);color:#16140e;border-radius:999px;border:0}
.elementor-button--secondary{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px}
.elementor-button--secondary:hover{background:rgba(255,255,255,.06)}
/* Responsivo */
@media (max-width:920px){
.z-hero{padding:72px 0 !important}
}
```
> **Dica:** se usar **Buttons** padrão do tema, aplique as classes `elementor-button--primary` e `elementor-button--secondary` nos botões respectivos para herdar o estilo acima.
---
### 6) Conteúdos (copiar/colar)
Use os textos já aprovados no manifesto anterior. Sugestão de microcopy nas áreas-chave:
* **Declaração da Causa**: “Instalar um novo baseline no mercado: confiança como padrão…”
* **Lead hero**: “Acabar com o amadorismo… exclusividade, projeto de venda e dados.”
* **B2B bullet**: “Case: ajuste de narrativa e mídia destravou **+42%** de vendas em 90 dias.”
* **Compromissos**: 72h / 15 min / 100% / 15 dias.
* **CTA Final**: “Agende um diagnóstico e receba um esboço de Projeto de Venda.”
---
### 7) Form (Elementor Pro)
* Campos: Nome (required), E-mail (required), WhatsApp (tel), Tipo (select), Mensagem (textarea)
* Placeholders: claros e objetivos
* Mensagem de sucesso: “Obrigado! Em até 15 minutos úteis retornamos.”
* Ações: **Email** (para [contato@zionrealty.com.br](mailto:contato@zionrealty.com.br)) e **Webhook** (futuro CRM)
* Aviso legal abaixo do botão: “Imagens meramente ilustrativas. Condições sujeitas a alterações.”
---
### 8) Otimização & SEO
* **Slug**: `manifesto-confianca-como-padrao`
* **Title**: “Confiança como Padrão — Manifesto | ZION Realty”
* **Meta Description**: mesma do manifesto (40–155 caracteres)
* **Preload de fontes** (opcional) ou usar **System Fonts** para máximo desempenho.
---
### 9) Checklist final
* [ ] Links do WhatsApp e e-mail atualizados
* [ ] Classes aplicadas (z-hero, z-card, z-pill, z-kpi, z-kcard, z-cta-final, z-eyebrow)
* [ ] Resposividade checada em 1200/992/768/480px
* [ ] Form testado (e-mail e webhook)
* [ ] Disclaimer inserido
---
Se quiser, posso **montar a hierarquia exata de containers/widgets** (com nomes e ordem) para você replicar em 10–15 minutos. Também posso adaptar o CSS às **cores finais da marca ZION** se você já tiver os HEX oficiais./* End custom CSS */