Crachá Pendurado

Tenho o modelo "Crachá Pendurado" da Modelos Prontos na pasta cracha-pendurado/ (index.html, estilo.css, script.js, img/retrato.jpg e LEIAME.md). Quero adaptá-lo à minha marca.

Minha marca:
- Nome: [nome]
- Cor principal: [hex] · cor de apoio: [hex]
- Fonte: [nome da fonte ou "manter"]
- Tom dos textos: [ex.: direto e amigável]

O que fazer:
1. Leia o LEIAME.md e o estilo.css; troque as cores e fontes pelas variáveis do :root (não espalhe cores soltas pelo CSS).
2. Troque os textos de exemplo pelos meus, em português do Brasil.
3. Coloque meu logo: [cole o SVG aqui ou diga o arquivo].
4. Mantenha animações, acessibilidade (contraste AA, foco visível) e prefers-reduced-motion.
5. Abra o index.html no navegador e confira em 1440px e 390px, sem rolagem horizontal.
Me mostre um resumo do que mudou.

Quero colocar o modelo "Crachá Pendurado" (pasta cracha-pendurado/: index.html, estilo.css, script.js, img/retrato.jpg) dentro do meu projeto.

Meu projeto usa: [React + Vite / Next.js (App Router) / Vue / WordPress / HTML puro] e [Tailwind / CSS Modules / CSS comum].
Onde colocar: [página ou componente, ex.: src/pages/Login.tsx].

O que fazer:
1. Leia o LEIAME.md e entenda HTML, CSS e JS do modelo.
2. Transforme em componente(s) do meu framework, mantendo o mesmo visual e TODO o comportamento (animações, teclado, toque).
3. Mantenha o CSS com as classes prefixadas (evita conflito) ou converta para o padrão do meu projeto, sem perder nada.
4. Troque manipulação direta do DOM por estado/efeitos do framework quando fizer sentido; limpe listeners e timers ao desmontar.
5. Rode o projeto, abra a página e confira no desktop e no celular.
Liste os arquivos criados e alterados.

A partir do modelo "Crachá Pendurado" (index.html, estilo.css, script.js, img/retrato.jpg), crie 3 variações novas para eu escolher:
1. Uma versão clara (se o original é escuro) ou escura (se é claro).
2. Uma versão com a minha cor de marca: [cor em hex].
3. Uma versão mais compacta, para usar dentro de cards e telas pequenas.

Regras: mantenha as mesmas classes e a acessibilidade, troque só tokens do :root e o necessário de CSS, e salve cada variação numa pasta separada (variacao-1/, variacao-2/, variacao-3/). Abra cada uma no navegador e confira em 1440px e 390px.

Revise o modelo "Crachá Pendurado" que adaptei (pasta cracha-pendurado/) antes de eu publicar:
1. Abra no navegador em 1440px, 768px e 390px: nada cortado, sobreposto ou com rolagem horizontal.
2. Navegue só pelo teclado (Tab, Enter, Esc, setas): tudo alcançável e com foco visível.
3. Contraste AA nos textos e botões; aria-label nos ícones; mensagens de erro anunciadas.
4. Console sem erros; sem console.log esquecido; sem recursos externos além das fontes.
5. Com "reduzir movimento" ligado no sistema, a tela continua bonita e usável.
Corrija o que encontrar e me diga o que foi corrigido.