Brasil Ao Vivo · Indicadores no Outdoor

Site com um outdoor digital em uma cidade à noite como plano de fundo: os indicadores do Brasil passam no telão (valor grande girando a cada 5 s + letreiro correndo embaixo), e abaixo do hero ficam os cards legíveis com todos os dados e fontes.

Arquivos

Arquivo	O que é
index.html	O site. Hero em tela cheia com a foto da cidade + telão animado, e os cards abaixo.
assets/periferia-outdoor.jpg	Imagem de fundo atual (1792×1008): periferia de capital brasileira ao entardecer, gerada com Grok Imagine.
assets/cidade-outdoor.jpg	Fundo alternativo (metrópole à noite). Para usar, troque o src da imagem e as % do .telao (left 32,53% · top 36,36% · width 36,05% · height 34,67%).
indicadores-brasil.html	O HTML original em cards, mantido como referência.
fig.js, fig-preview.js, outdoor-brasil.html, preview-indicador.html	Versão anterior em iso-glow (descartada, mantida por histórico — pode apagar).

Como funciona o telão

• O conteúdo é posicionado por porcentagens sobre a tela preta da foto (medida por pixel: left 33,71%, top 15,67%, width 34,10%, height 29,46%). O contêiner .cena mantém a proporção 1792:1008 e cobre a viewport, então o alinhamento não quebra ao redimensionar.
• Indicador principal troca a cada 5 s com animação de deslize; letreiro inferior corre em loop com todos os indicadores.
• Relógio de São Paulo e selo AO VIVO (verde, dado da API) / ÚLT. DADO (amarelo, última divulgação).
• Tamanhos de fonte em unidades de container query (cqh/cqw), escalam junto com o telão.

Dados

• Ao vivo (fetch na abertura): Dólar PTAX (SGS 1), Selic meta (SGS 432), IPCA 12 meses (SGS 13522) — API pública api.bcb.gov.br. Com falha de rede/CORS, caem nos últimos valores conhecidos.
• Última divulgação oficial: desemprego, PIB, dívida bruta, população, alfabetização, IDHM, pobreza, Gini, expectativa de vida (IBGE/PNUD/BCB) e desmatamento Prodes (INPE).

Rodar

Abrir index.html direto no navegador já funciona. Para servir localmente:

python -m http.server 8734
# http://localhost:8734