/* ZAMP - Z Talent | Programa de Trainee 2027
Folha única do site. Editar aqui direto: o único arquivo gerado é js/main.js.
As fontes vêm do Google Fonts, pelo no do index.html.
Sumário
1. Tokens (cores, fontes, medidas)
2. Base
3. Peças que se repetem (inclui a foto em polaroide)
4. Topo
5. Hero
6. Marcas (logos animados)
7. 01 Sobre o programa
8. 02 Como são os 12 meses (produtos que caem)
9. Faixa
10. 03 Pré-requisitos
11. 04 Benefícios
12. 05 Sobre a empresa e galeria de fotos
13. 06 Etapas
14. 07 Trilhas
15. Chamada final
16. Rodapé
17. Traço da rolagem
18. Tablet (até 1080px)
19. Celular (até 760px)
20. Movimento reduzido
*/
/* =========================================================================
1. TOKENS
========================================================================= */
:root {
/* Marca */
--azul: #0028F1;
--laranja: #FD7F25; /* detalhes: etiquetas, ícones, traço, botões */
--marinho: #001166;
--bege: #EBEADB;
/* Superfícies e texto */
--papel: #FBFAF6;
--cartao: #FFFEFB;
--texto-apoio: #59617A;
--texto-claro: #DCE3FF;
--texto-claro-apoio: #C7CCE6;
--marinho-cartao: #0A1D86;
--marinho-borda: #2E40A6;
--azul-trilho: #3A5BF7;
--azul-palavra: #1B41F6;
/* Cores das marcas do ecossistema (logos oficiais): detalhes para a
página não ficar só em azul. */
--vermelho: #D62300; /* Burger King */
--verde: #00891A; /* Subway */
--amarelo: #F2B700; /* Subway */
--verde-escuro: #006A14; /* cartões sobre o fundo verde */
--verde-claro: #DDF3E1; /* texto de apoio sobre o verde */
--titulo: 'Poppins', 'Arial Black', Arial, sans-serif;
--texto: 'Montserrat', 'Segoe UI', Arial, sans-serif;
/* Largura máxima do conteúdo. Trocar aqui muda o site inteiro. */
--largura: 1040px;
--contorno: 3px solid var(--marinho);
--raio: 28px;
/* Altura do topo fixo (barra + contorno). O hero e a jornada, que também
gruda na tela, descontam essa altura. */
--topo-h: 91px;
}
/* =========================================================================
2. BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); }
body { margin: 0; background: var(--papel); color: var(--marinho); font-family: var(--texto); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
mark { background: none; color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
::selection { background: var(--laranja); color: var(--marinho); }
.container { width: min(88%, var(--largura)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--laranja); font-weight: 700; }
.skip:focus { top: 16px; }
/* Entrada suave dos blocos. Usa `translate` para não brigar com as
inclinações dos adesivos, que usam `rotate`. */
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.visible { opacity: 1; translate: 0 0; }
/* =========================================================================
3. PEÇAS QUE SE REPETEM
========================================================================= */
.secao { padding-block: clamp(72px, 9vw, 120px); }
.titulo { font-family: var(--titulo); font-size: clamp(40px, 6.2vw, 88px); line-height: .95; font-weight: 900; letter-spacing: -.045em; text-wrap: balance; }
/* Nome da seção: é o primeiro destaque de cada bloco, por isso vem como
adesivo cheio, e não só com contorno. */
.etiqueta { display: inline-flex; padding: 11px 20px; background: var(--azul); color: var(--papel); border: var(--contorno); border-radius: 999px; box-shadow: 4px 4px 0 var(--marinho); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .18em; white-space: nowrap; }
.etiqueta + .titulo { margin-top: 28px; }
/* Nos fundos escuros o adesivo inverte, para continuar saltando. */
.etiqueta-clara { background: var(--papel); color: var(--marinho); }
.etiqueta-bege { background: var(--bege); color: var(--marinho); }
.etiqueta-laranja { background: var(--laranja); color: var(--marinho); }
.etiqueta-amarela { background: var(--amarelo); color: var(--marinho); }
.etiqueta-verde { background: var(--verde); color: var(--papel); }
.etiqueta-vermelha { background: var(--vermelho); color: var(--papel); }
.lead { max-width: 520px; margin-top: 22px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; font-weight: 600; color: var(--texto-apoio); }
.lead-clara { color: var(--texto-claro-apoio); }
/* Negrito dentro do texto corrido: 800, o peso mais forte da Montserrat que a
página carrega. Sem isso o navegador inventa um 900 engrossando a letra. */
.lead strong { font-weight: 800; }
.destaque { display: inline-block; padding: 0 .16em .06em; border-radius: .2em; rotate: -1.5deg; }
.destaque-azul { background: var(--azul); color: var(--papel); }
.destaque-papel { background: var(--papel); color: var(--marinho); border: var(--contorno); }
.cor-azul { color: var(--azul); }
.cor-bege { color: var(--bege); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border: var(--contorno); border-radius: 999px; font-family: var(--titulo); font-size: 16px; font-weight: 800; transition: translate .2s ease; }
.botao:hover { translate: -2px -2px; }
.botao-azul { background: var(--azul); color: var(--papel); box-shadow: 4px 4px 0 var(--marinho); }
.botao-marinho { background: var(--marinho); color: var(--papel); box-shadow: 5px 5px 0 var(--laranja); }
.botao-laranja { background: var(--laranja); color: var(--marinho); box-shadow: 6px 6px 0 var(--marinho); }
.botao-grande { min-height: 68px; padding: 0 34px; font-size: 19px; }
.cartao { background: var(--cartao); border: var(--contorno); border-radius: var(--raio); }
.numero { display: grid; place-items: center; width: 62px; height: 62px; border: var(--contorno); border-radius: 50%; font-family: var(--titulo); font-size: 22px; font-weight: 900; }
.numero-laranja { background: var(--laranja); }
.numero-azul { background: var(--azul); color: var(--papel); }
.numero-bege { background: var(--bege); }
.numero-verde { background: var(--verde); color: var(--papel); }
.numero-amarelo { background: var(--amarelo); }
.numero-vermelho { background: var(--vermelho); color: var(--papel); }
.numero .icone { width: 30px; height: 30px; stroke-width: 2.2; }
/* Foto em polaroide: moldura de papel, contorno e sombra dura, levemente
torta (--giro). Endireita e cresce um pouco quando o mouse passa. Não use
junto com .reveal no mesmo elemento: coloque a polaroide dentro dele. */
.polaroid { position: relative; padding: 10px 10px 40px; background: var(--cartao); border: var(--contorno); box-shadow: 8px 8px 0 var(--marinho); rotate: var(--giro, 0deg); transition: rotate .45s cubic-bezier(.2, 1.5, .4, 1), scale .45s cubic-bezier(.2, 1.5, .4, 1); }
.polaroid img { width: 100%; border: 2px solid var(--marinho); }
.polaroid:hover { rotate: 0deg; scale: 1.04; }
/* =========================================================================
4. TOPO
========================================================================= */
/* Topo fixo: acompanha a rolagem e fica sempre à mão. */
.topo { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: var(--contorno); }
.topo-barra { display: flex; align-items: center; gap: 24px; height: 88px; }
.topo-logo img { width: auto; height: 44px; }
.topo-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 700; }
.topo-nav a { padding: 10px 16px; border-radius: 999px; transition: background .2s; }
.topo-nav a:hover { background: var(--bege); }
.topo-inscricao { min-height: 50px; padding: 0 20px; font-size: 15px; }
.menu { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: var(--contorno); border-radius: 50%; background: var(--papel); }
.menu .icone { width: 22px; height: 22px; }
/* =========================================================================
5. HERO
Arte animada do Z Talent (4000x1535, o dobro de 2000x768). Largura no
padrão Hager: base de 1140px, acompanhando a tela a partir daí e travando
em 2000px. A altura ocupa a tela abaixo do topo; o excedente de largura
sai pelas laterais (object-fit: cover).
Trava de segurança: título, foto e logos ocupam uns 62% do centro da
arte. Em tela muito alta o corte lateral pegaria o "Z", então a altura
para em largura / 1,72, a proporção em que tudo ainda cabe.
Acima de 2000px as laterais continuam as cores das bordas da arte.
z-index 2: o hero cobre o traço da rolagem (seção 17).
========================================================================= */
.hero { position: relative; z-index: 2; display: flex; justify-content: center; height: min(calc(100svh - var(--topo-h)), calc(min(100vw, 2000px) / 1.72)); overflow: hidden; background: linear-gradient(90deg, #0000FF 50%, #FFFFFF 50%); }
.hero picture { display: contents; }
.hero-kv { display: block; flex: none; width: clamp(1140px, 100vw, 2000px); max-width: none; height: 100%; object-fit: cover; object-position: center; }
/* Abaixo de 1140px a base de 1140 cortaria o título nas laterais: aqui a
arte encolhe junto com a tela e a seção fica com a altura dela. A caixa
1400x768 corta só sobra de fundo (o conteúdo vai de 380 a 1640 na arte
de 2000). Vale até vir a versão mobile da arte. */
@media (max-width: 1139px) {
.hero { height: auto; }
.hero-kv { width: 100%; height: auto; aspect-ratio: 1400 / 768; }
}
/* =========================================================================
6. MARCAS
Logos oficiais em adesivos redondos (os desenhos ficam no começo do
index.html, nos ). Quando o adesivo aparece na tela,
o JS põe .desenhada: ele salta, o logo se contorna em marinho e depois
ganha cor. Passar o mouse por cima recomeça tudo, só naquele adesivo.
Com a rolagem, os adesivos da faixa balançam (--balanco).
Os mesmos adesivos aparecem pequenos sobre as fotos da galeria.
========================================================================= */
/* Cada faixa colorida numa cor do grupo: a página não fica só azul. */
.marcas { padding-block: 22px; background: var(--laranja); color: var(--papel); border-block: var(--contorno); }
.marcas-linha { display: flex; align-items: center; justify-content: center; gap: 24px; }
.marcas-rotulo { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .16em; }
.marcas-fim { text-align: right; }
.marcas-lista { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.marca { display: block; rotate: calc(var(--giro, 0deg) + var(--balanco, 0deg)); }
.marca-adesivo { display: grid; place-items: center; width: clamp(64px, 7.4vw, 104px); aspect-ratio: 1; background: var(--papel); border: var(--contorno); border-radius: 50%; box-shadow: 4px 4px 0 var(--marinho); }
/* Altura igual à largura: sem isso o