Cores

Paleta completa extraída de style-sobre.css e main.css. O roxo é a cor primária da marca; o laranja-terra aparece exclusivamente em taglines de impacto.

Marca

Texto & Neutros

Superfícies & Bordas

Referência CSS

/* Cole no topo do seu arquivo CSS global */
:root {
  /* Marca */
  --color-primary:       #660099;
  --color-purple-dark:   #5d2684;
  --color-purple-deeper: #4e2771;
  --color-accent-warm:   #9a4d1c;

  /* Texto */
  --color-text-dark:     #1e1e1e;
  --color-text-medium:   #69645c;
  --color-text-muted:    #5c5c5c;

  /* Superfícies */
  --color-surface-alt:   #f9f7f4;
  --color-border:        #e0d8eb;
}

Tipografia

Uma única família: Montserrat. Pesos 400–800. A hierarquia é construída inteiramente via tamanho e peso, sem mudança de família.

Espaçamento

Grade baseada em múltiplos de 4px. Todos os espaçamentos usados na página estão documentados abaixo com a barra proporcional ao valor.

Header

Fixo no topo (z-index 200). Altura 80px. Fundo branco. Contém logo à esquerda e nav à direita.

header {
  height:     80px;
  background: #fff;
  position:   fixed;
  z-index:    200;
}

Navegação

Dois variantes de botão no header. .button-menu (ghost) para links internos; .button-contato (filled) para ação de contato.

Elementos de Texto

Todos os elementos tipográficos da página sobre/ — títulos, corpo, destaques e links.

Accordion

Expansão exclusiva — apenas um item aberto por vez. Chevron anima com CSS transform: rotate(45deg) via classe .is-open.

Cards de Benefício

Grade 2 colunas com fundo roxo primário. Texto branco centrado. Usado na seção "Porque Existimos".

.sobre-porque-box {
  background: #660099;
  padding:    40px 28px;
  display:    flex;
  align-items:     center;
  justify-content: center;
}
.sobre-porque-box p {
  font-size:   22px;
  font-weight: 500;
  color:       #fff;
  text-align:  center;
}

Footer

Footer de duas linhas: topo com brand + colunas de navegação; base com copyright e CNPJ separados por hr.footer-divider.

Padrões de Layout

Três padrões de layout recorrentes na página. Todos centralizam o conteúdo e controlam a largura máxima.

Posicionamento

Breakpoints

Dois breakpoints responsivos. Mobile-last: os estilos de desktop são base, os media queries sobrepõem.

Regras de Uso

Convenções que garantem coerência visual ao criar ou alterar componentes.