# EVC Turismo — site

Site de uma página em HTML/CSS/JS, sem dependências e sem build.
A estrutura e as animações vieram do template capturado em `html.txt`; o conteúdo é
o de `copy-evc-turismo.md`, as cores saíram do logo e as fotos são as de
`assets/fotos/`.

## Estrutura

```
index.html                          página principal + sprite SVG dos ícones
politica-de-privacidade/index.html  página legal (LGPD), URL sem .html
css/style.css                 design system, numerado por secções
js/main.js                    interações e animações (vanilla)
assets/img/                   23 imagens tratadas + logo
assets/fotos/                 fontes em alta + os dois flyers e os vídeos
copy-evc-turismo.md           texto de origem
html.txt                      dump do template original, só para referência
```

Única dependência externa: a fonte **Red Hat Display** (Google Fonts).

## Contacto: só WhatsApp

O site não tem formulários. Todos os botões de contacto são links diretos para
`wa.me/5573999372191`, abrem em nova aba e levam a mesma mensagem pré-preenchida:

> Olá, vim por meio do site e gostaria saber mais sobre os serviços.

São 24 pontos de contacto na página principal, mais o botão flutuante. O botão de
WhatsApp saiu do cabeçalho para não competir com o CTA do hero; lá ficou o
telefone, num botão de contorno.

## Menu

A partir de **992px** o menu é inline: as sete secções aparecem em linha no
cabeçalho, com sublinhado dourado que cresce a partir do centro em hover, e o
hambúrguer desaparece. Abaixo de 992px é o contrário: menu escondido e hambúrguer
a abrir o drawer. Se a janela for alargada com o drawer aberto, ele fecha sozinho.

O link da secção em que se está fica destacado, via `IntersectionObserver` que
escolhe a secção com maior fatia visível (`initScrollSpy` em
[js/main.js](js/main.js)).

O telefone é um botão de contorno em todos os tamanhos, mais compacto no mobile.

## Cookies e privacidade

O banner aparece na primeira visita e a escolha fica guardada em `localStorage`
(`evc:cookie-consent`). Em **Recusar** nada é ativado; em **Aceitar** o site chama
`enableMeasurement()` em [js/main.js](js/main.js), que é o único ponto onde uma
ferramenta de analytics deve ser ligada no futuro. Hoje não há nenhuma instalada,
por isso a função só marca `data-measurement="on"` no `<html>`.

O banner segue as regras do `CLAUDE.md`: `width: 100vw` em vez de `left/right: 0`,
`overflow: hidden` e camada GPU própria. Enquanto está visível, o botão flutuante
do WhatsApp sobe para não ficar tapado.

A [política de privacidade](politica-de-privacidade/) foi escrita para a LGPD
e cobre responsável, dados recolhidos, cookies, terceiros (WhatsApp, Instagram,
Google Fonts), finalidades, prazos, partilha, segurança e direitos do titular.

Vive em `politica-de-privacidade/index.html`, para a URL ficar
`/politica-de-privacidade/` sem o `.html`. Foi feito com pasta em vez de
regra de servidor porque funciona em qualquer alojamento estático, sem
`.htaccess` nem configuração. Os caminhos dentro dela sobem um nível (`../css/…`),
por isso continua a abrir por `file://` e em subpastas.

## Paleta — tirada do logo

Amostrei os pixels do `logo.png` e usei as cores dominantes:

| Token | Cor | Onde |
|---|---|---|
| `--indigo` | `#29166f` | azul do "EVC" — texto sobre claro, discos das setas |
| `--gold` | `#f4af01` | acento principal — destaques, botões, números |
| `--orange` | `#e36013` | degradê, hover do botão dourado |
| `--red` | `#da251c` | fim do degradê, estados de erro |
| `--green` | `#01923f` | verde do logo — todos os CTAs de WhatsApp |
| `--sea` | `#01a0de` | azul do mar (reserva) |
| `--ink` / `--ink-2` | `#0b0722` / `#140d33` | fundos, indigo bem escuro |

O degradê do pôr do sol do logo (`--sunset`) aparece na faixa do topo e na barra
de números.

## Secções

1. **Header** — faixa com degradê colada ao topo, logo em placa branca, menu e telefone
2. **Hero** — 3 fotos em crossfade com Ken Burns, título e subtítulo da copy
3. **Serviços** — marquee com Transfer, Passeios, Receptivo, Viagens e Eventos
4. **Sobre** — foto do Edson, os dois parágrafos, os 3 motivos e a barra de números
5. **Roteiros** — 6 cards com as distâncias e horários reais dos flyers
6. **Regiões** — marquee com as 8 localidades
7. **Frota** — 3 vans, 3 executivos, 1 Spin, com foto da frota
8. **Galeria** — 9 fotos, com a do Luciano Huck em destaque (2x2), grelha 4x3
9. **Dúvidas** — acordeão
10. **CTA final** — WhatsApp e Instagram
11. **Rodapé** — card da marca (logo em painel branco) + contactos e botões de WhatsApp

## Animações

Marquees infinitos que clonam os itens em JS, medem a largura de um conjunto e
calculam a duração exata — o loop não salta e pausa em `:hover`. Hero com
crossfade e Ken Burns. Reveal no scroll com stagger nas grelhas. Troca de setas
nos botões, zoom nas imagens, acordeão, contadores nos números. Tudo respeita
`prefers-reduced-motion`.

## De onde veio cada foto

As fontes em alta resolução estão em `assets/fotos/` com nomes descritivos
(`van-coqueiros.png`, `frota-aeroporto-ilheus.png`, `edson-travessa-artes.png`,
etc.). Delas saem os recortes de `assets/img/`:

- **Hero e serviços** — van entre os coqueiros, frota no aeroporto de Ilhéus,
  grupo no letreiro de Canavieiras, rua histórica, grupo corporativo.
- **Sobre** — o retrato do Edson na Travessa das Artes.
- **Galeria** — murais, grupos e centro histórico.
- **Roteiros** — continuam a ser recortados do **flyer**
  `WhatsApp Image ... 10.12.06.jpeg`, que traz fotos individuais de fazenda de
  cacau, Canavieiras, Ilhéus, Itacaré, cachoeira e sumaúma. Cada uma ficou com a
  legenda que o próprio flyer lhe dá. **Estas são as únicas imagens do site ainda
  em baixa resolução** (206 a 366 px de largura), porque não há versão em alta.
  Se conseguires as originais, é só substituir.

As originais em baixa qualidade foram apagadas, já que existe versão melhor de
cada uma. Ficaram os dois flyers (fonte dos roteiros) e os dois vídeos.

A marca de água "Galaxy A54 5G" das três fotos verticais foi cortada no
processamento.

## Pontos que precisam da tua confirmação

- **Respostas das dúvidas** — a copy não trazia FAQ. As seis respostas foram
  escritas por mim a partir do resto do texto. **Rever antes de publicar.**
- **Números da barra de estatísticas** — "25 anos" e "7 veículos" vêm da copy;
  "8 destinos" é a contagem das regiões listadas; "1 base fixa" é o Transamerica.
  Nenhum é inventado, mas confirma se é assim que queres comunicar.
- **Horários e distâncias dos roteiros** — saíram dos flyers (13 km / 42 km / 76 km,
  saída 9h30 e retorno às 12h). Confirmar se continuam válidos.
- **Duração dos passeios** ("Dia inteiro", "Meio dia") — inferida, não estava escrita.
- **Vídeos** (`10.12.23.mp4`, `10.12.32.mp4`) — ainda não usados. Dava para pôr um
  deles como fundo do hero.
- **Logo do rodapé** — usa o mesmo `logo.png` sobre painel branco, porque o logo é
  multicolor e precisa de fundo neutro. Mesma razão para a placa branca no header.
- **Data da política de privacidade** — está fixa em 14 de agosto de 2026.
  Atualizar sempre que o texto mudar.

## Regras de layout respeitadas

Seguindo as notas do `CLAUDE.md`:

- Nenhum `overflow-x: hidden/clip` no `html` ou `body`; o overflow é contido
  localmente (`.ticker`, `.hero`, `.gal-card`, `.brand-card`).
- O `<header>` fixo é filho direto do `<body>`.
- Elementos fixos usam `width: 100vw`; o botão flutuante do WhatsApp usa
  `left: calc(100vw - 88px)` em vez de `right`, e força camada GPU própria.
- O drawer mobile usa fade, nunca `translateX`.
- Imagens de fundo são `<img>` reais com `object-fit: cover`, nunca `url()` em
  custom property.

## Estado

Verificado em Chrome headless a 1440, 1200, 992, 991, 810 e 430px, nas duas
páginas: sem erros de consola, sem pedidos falhados, sem overflow horizontal em
nenhuma largura, todos os reveals disparam, 0 formulários, todos os links de
WhatsApp com a mensagem certa e `target="_blank"`, 0 travessões no texto visível,
cabeçalho colado ao topo sem folga, menu a trocar entre inline e hambúrguer nos
992px, destaque da secção atual a acompanhar o scroll, e o tile de destaque da
galeria a ocupar 2x2 nos três tamanhos. O banner de cookies foi testado nos dois
caminhos e na segunda visita.

## Correr localmente

```bash
npx http-server -p 8899 -c-1
```

Os caminhos são relativos, por isso também funciona por `file://` e em subpastas.
