# Especificação funcional e visual

## Princípio de experiência

O site deve responder depressa a duas perguntas: “que apoio existe para a minha situação?” e “qual é o próximo passo?”. A organização é feita por etapa de vida, não pela estrutura interna da instituição.

## Estrutura proposta

- **Início** — hero de impacto; orientar por etapa de vida; apresentar percurso, respostas, espaços, horários publicados, apoio comunitário e ações imediatas.
- **Respostas sociais** — visão geral por etapa de vida e, numa fase seguinte, páginas de detalhe por resposta.
- **Inscrições** — preparação, formulário infantil por etapas, rascunho e confirmação.
- **Instituição** — missão, história, equipa/organização e instalações com informação aprovada.
- **Documentos** — estatutos, relatórios, regulamentos e documentos públicos atuais.
- **Contactos** — sede e extensão, canais diretos, acessos e horários confirmados.
- **Privacidade** — texto legal aprovado antes da publicação.

## Percursos prioritários

### Família com criança

Início → Infância e Juventude → comparar respostas → consultar condições → preparar documentos → inscrição → confirmação com referência.

### Pessoa idosa ou familiar

Início → Terceira Idade → distinguir Centro de Dia/Apoio Domiciliário → contactar equipa. Uma candidatura sénior só será criada após definição de campos e processo administrativo.

### Secretaria

Receção → validação → estado/histórico → revisão documental → pedido de elementos → PDF/email → arquivo lógico. Mantém-se a base técnica, sem presumir regras de admissão.

## Formulário infantil — estado da amostra

- Utilizador: pai, mãe ou outro responsável.
- Etapas: Preparar; Criança; Responsáveis; Agregado; Rever e enviar.
- Capacidades mantidas: validação por etapa, rascunho sem uploads, documentos privados, idempotência, confirmação, PDF e processamento administrativo.
- Respostas listadas para demonstração: Berçário/Aquisição de Marcha, Creche, Creche Familiar, Pré-Escolar, CATL, Espaço Jovem e Centro Académico.
- Campos/documentos atuais são herdados da baseline e **não estão aprovados para produção**. Só devem ser reduzidos ou alterados após confirmação do processo real.
- Mensagem obrigatória: receção não significa admissão.

## Direção visual

**Tese:** “uma comunidade inteira”. A árvore do logótipo inspira ramificações, percursos e encontros, sem repetir literalmente o símbolo em toda a interface.

- Tipografia: `Trebuchet MS` nos títulos pela forma aberta e humana; sistema sans-serif no corpo para leitura e desempenho.
- Cores: verde `#67B62D` para estrutura e estados positivos; laranja `#F4820B` para ações; carvão `#1F2924` para texto; fundos claros neutros.
- Composição: assimetria editorial, cabeçalho de vidro com logótipo isolado e grande, hero fotográfico de ecrã inteiro e uma faixa escura de orientação por públicos.
- Espaçamento: ritmo amplo nas páginas públicas; densidade moderada e previsível no formulário.
- Fotografia: hero IA criado especificamente para mostrar infância, juventude, famílias e pessoas idosas sem representar utentes reais; restantes imagens documentais do espaço atual. Usar alt text factual e não expor crianças identificáveis sem autorização.
- Iconografia: símbolos simples e funcionais; não competir com o logótipo.
- Movimento: revelação subtil no carregamento, deslocações pequenas em hover e transições de cor. Desativado com `prefers-reduced-motion`.
- Formas: cantos médios (não excessivamente arredondados), linhas finas e blocos sobrepostos para criar dinamismo.

## Estados e acessibilidade

- Texto base mínimo de 16 px, contraste AA e controlos com pelo menos 44 px.
- Foco visível em verde escuro/laranja, navegação por teclado e link “Saltar para o conteúdo”.
- Menu móvel sem esconder a ação de inscrição.
- Erros por campo + resumo com foco; sucesso com referência inequívoca.
- Conteúdo utilizável a 200% de zoom e sem scroll horizontal a 390 px.
- Movimento reduzido respeitado em toda a experiência.
- O logótipo reduz suavemente após 56 px de scroll; a transição é removida quando o sistema pede movimento reduzido.

## Dependências para expansão

- Aprovação da arquitetura e direção visual desta amostra.
- Conteúdos atuais validados por resposta social.
- Processo de inscrição e admissão validado pela secretaria.
- Texto de privacidade e retenção aprovado.
- Fotografias originais em resolução adequada e respetivas autorizações.