# 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 paisagens da região em crossfade com Ken Burns, título e subtítulo da copy
3. **Serviços** — marquee com Transfer, Passeios, Receptivo, Viagens e Eventos
4. **Rotas** — 3 cards de transfer a partir do aeroporto de Ilhéus
5. **Sobre** — foto do Edson, os dois parágrafos, os 3 motivos e a barra de números
6. **Roteiros** — 6 cards com as distâncias e horários reais dos flyers
7. **Cidades** — 6 cards com foto de cada cidade atendida
8. **Frota** — 3 vans, 3 executivos, 1 Spin, com foto da frota
9. **Galeria** — 9 fotos, com a do Luciano Huck em destaque (2x2), grelha 4x3
10. **Dúvidas** — acordeão
11. **CTA final** — WhatsApp e Instagram
12. **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** — os 7 são fotos reais em alta (fazenda de cacau, casario de
  Canavieiras, Casa de Jorge Amado em Ilhéus, praia de Itacaré, igreja histórica,
  sumaúma e cachoeira), guardadas em `assets/fotos/`. Já nenhuma vem do flyer.

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.

### Fotos de paisagem (Wikimedia Commons)

As fotos da EVC são de telemóvel e não dão a resolução que um hero a toda a
largura precisa, e não havia foto própria de Barra Grande nem de Morro de São
Paulo. Fui buscar ao Wikimedia Commons, escolhendo por licença e por qualidade:

| Onde | Foto | Autor | Licença |
|---|---|---|---|
| Hero 1 | Taipu de Fora, nascer do sol | Stela Madruga | CC BY-SA 4.0 |
| Hero 2 | Segunda Praia, Morro de São Paulo | Beto Quissak | CC BY-SA 4.0 |
| Hero 3 | Barra Grande, Península de Maraú | Deise Useda | CC BY-SA 3.0 |
| Cidades | Aeroporto de Ilhéus | Carlos Mendonça | domínio público |
| Cidades | Itacaré | Marinelson Almeida | CC BY 2.0 |
| Cidades | Praia de Barra Grande | Otávio Nogueira | CC BY 2.0 |
| Cidades | Morro de São Paulo, pôr do sol | Naassom Azevedo | CC0 |
| Cidades | Comandatuba e Canavieiras | EVC | próprias |

Todas menos a CC0 e a de domínio público **exigem atribuição**, por isso há um
bloco **Créditos das fotos** no rodapé, dobrado num `<details>`, com link para a
página de cada foto no Commons e para o texto da licença. Não apagar esse bloco
enquanto estas fotos estiverem no site.

Nota sobre as **CC BY-SA**: a cláusula ShareAlike aplica-se a obras derivadas da
foto. O recorte e o redimensionamento contam como derivada, por isso a versão
usada aqui herda a mesma licença. A atribuição com link para a licença, como está
no rodapé, cobre isso. Se quiseres evitar a cláusula por completo, substitui as
três do hero por fotos próprias ou por CC BY / CC0.

As originais em alta ficaram em `assets/fotos/`, para poderes recortar de novo
sem voltar ao Commons.

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.
- **Direitos das fotos dos roteiros e das cidades** — as dos roteiros vieram de
  ti; as de Ilhéus, Itacaré, Barra Grande e Morro de São Paulo vieram do Wikimedia
  Commons com licença livre (ver tabela acima). Se alguma das tuas for de banco de
  imagens ou de terceiros, confirmar a licença antes de publicar.
- **Foto de Ilhéus nas cidades** — usei a pista do aeroporto, que é onde os
  transfers começam. Se preferires o centro histórico, o casarão amarelo já está
  em `evc-rot-ilheus.jpg`.
- **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.
