/* Tela de entrada do site (identidade BGS OS — Group BGS · OS):
pré-página do grupo -> animação do logo do BI -> front page com a escolha
do módulo. É a primeira coisa que aparece depois do login no Google.
Porte fiel do pacote de identidade (entrega-bgs-bi): as durações, atrasos,
curvas e medidas abaixo são as mesmas do arquivo entregue — lá estavam em
atributos style= inline (era um arquivo de design isolado), aqui viraram
classes porque index.html não carrega estilo. Se a entrega for revisada,
é aqui que os números mudam.
Paleta FIXA (--ent-*, ver tokens.css): esta tela não segue o tema
claro/escuro do resto do site. Ela é a capa da marca, sempre no azul da
identidade — como o splash de um aplicativo.
Tipografia: Archivo e IBM Plex Mono, as fontes da identidade — a marca
escrita ("GROUPBGS") é desenhada em Archivo. Servidas pelo próprio site
(assets/fontes/), não pelo Google Fonts: o projeto não tem dependência de
runtime e scripts/04_verificar.py REPROVA recurso externo no index.html —
é ele que libera a publicação, então um pro Google travaria a
rotina agendada que republica o site. Hospedadas aqui, a tela funciona
offline, sem terceiro no caminho e sem exceção nenhuma à regra. */
/* Só o subconjunto `latin`: cobre o português inteiro (Ç, Ã, É, ê e cia
moram em U+00C0-00FF). Palavra fora dele cai na fonte de reserva de
--ent-fonte, caractere por caractere, sem quebrar a tela.
Archivo é fonte VARIÁVEL — um arquivo só serve os três pesos que a tela
usa (400 no "GROUP" e no h1, 600 nos rótulos e botões, 800 no "BGS"), daí
o intervalo em font-weight em vez de três arquivos. */
@font-face{
font-family:Archivo;
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url(../assets/fontes/archivo-latin.woff2) format('woff2');
}
@font-face{
font-family:"IBM Plex Mono";
font-style:normal;
font-weight:400;
font-display:swap;
src:url(../assets/fontes/ibm-plex-mono-latin.woff2) format('woff2');
}
.entrada{
position:relative; min-height:100vh; overflow:hidden;
background:radial-gradient(120% 90% at 50% 42%, var(--ent-blue) 0%, var(--ent-bg) 62%, var(--ent-bg-2) 100%);
font-family:var(--ent-fonte);
}
/* ---------- etapas ---------- */
/* Só uma etapa por vez, por `display`. Trocar de etapa por display:none
também REINICIA as animações da etapa que entra (o navegador cancela as
animações de quem sai do fluxo de renderização) — é o que faz o REPETIR
funcionar sem precisar recriar elemento nenhum. */
.ent-etapa{display:none; min-height:100vh; box-sizing:border-box}
.entrada[data-etapa="pre"] .ent-pre,
.entrada[data-etapa="splash"] .ent-splash,
.entrada[data-etapa="home"] .ent-home{display:flex}
/* ---------- etapa 1: pré-página do grupo (3s) ---------- */
.ent-pre{padding:64px 40px; flex-direction:column; align-items:center; justify-content:center; gap:52px}
.ent-pre-kicker{
font-family:var(--ent-mono); font-size:12px; letter-spacing:.24em; color:var(--ent-ink-3);
animation:ent-pre 3s ease-in-out both;
}
.ent-pre-grupo{display:flex; flex-direction:column; align-items:center; gap:40px}
.ent-pre-linha{display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap}
.ent-pre-linha img{max-width:52vw; display:block; animation:ent-pre 3s ease-in-out both}
/* Larguras por empresa: cada logo tem proporção própria, então o que iguala
o peso visual das quatro não é a largura, é o desenho — estes valores vêm
medidos da entrega, não são um grid. */
.ent-logo-grupobgs{width:240px; animation-delay:.16s}
.ent-logo-csi{width:262px; animation-delay:.36s}
.ent-logo-grimp{width:238px; animation-delay:.56s}
.ent-logo-brasimpex{width:230px; animation-delay:.76s}
.ent-pre-div{
width:1px; height:70px; background:rgba(255,255,255,.28);
animation:ent-pre-linha 3s ease-in-out both;
}
.ent-pre-div-1{animation-delay:.28s}
.ent-pre-div-2{animation-delay:.66s}
/* Cada logo do grupo (pré-página e rodapé) é um link pro site da empresa —
o wrapper só precisa não atrapalhar o layout/animação que já valem pro
de dentro (ver .ent-logo-*/.ent-pre-linha img acima), então herda
display:block e ganha só o feedback de hover/foco. */
.ent-logo-link{display:block; line-height:0; border-radius:4px; transition:opacity .15s ease, transform .15s ease}
.ent-logo-link:hover, .ent-logo-link:focus-visible{transform:translateY(-2px)}
.ent-logo-link:focus-visible{outline:2px solid rgba(255,255,255,.55); outline-offset:6px}
.ent-pre-linha .ent-logo-link:hover img, .ent-pre-linha .ent-logo-link:focus-visible img{opacity:.82}
/* ---------- etapa 2: inicialização — Brax + marca BGS OS (4,4s) ---------- */
.ent-splash{padding:64px 40px; flex-direction:column; align-items:center; justify-content:center; gap:36px}
/* O símbolo: hexágono laranja, hexágono azul por dentro e o Brax subindo de
dentro dele. Feito com clip-path em vez da imagem pronta porque cada peça
anima por conta própria. Medidas e tempos da entrega "entrega-bgs-os". */
.ent-hex{
position:relative; width:196px; height:214px; margin-top:70px;
animation:ent-ring .8s cubic-bezier(.22,.9,.24,1) both;
}
.ent-hex-out{
position:absolute; inset:0; background:var(--ent-orange);
clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ent-hex-in{
position:absolute; left:10px; top:11px; width:176px; height:192px;
background:var(--ent-blue); overflow:hidden;
clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation:ent-core .6s cubic-bezier(.22,.9,.24,1) .26s both;
}
/* Recorte do Brax: o hexágono "aberto em cima" (polígono da entrega) — ele
fica dentro do hexágono embaixo e passa por cima da borda superior. */
.ent-brax-recorte{
position:absolute; left:-20px; top:-70px; width:236px; height:273px; overflow:hidden;
clip-path:polygon(0px 0px, 236px 0px, 236px 100px, 206px 118px, 206px 214px, 118px 262px, 30px 214px, 30px 118px, 0px 100px);
}
.ent-brax{position:absolute; left:3px; top:18px; width:230px; animation:ent-brax .9s cubic-bezier(.3,.9,.3,1) .8s both}
.ent-brax img{width:100%; display:block; transform-origin:50% 100%; animation:ent-bob 1.8s ease-in-out 1.8s infinite}
.ent-marca{display:flex; flex-direction:column; align-items:center; gap:16px}
.ent-marca{gap:14px}
.ent-word{display:flex; align-items:baseline; gap:18px; animation:ent-wipe .8s cubic-bezier(.4,0,.2,1) 1.5s both}
.ent-word span{font-size:84px; font-weight:900; letter-spacing:-.03em; line-height:1}
/* "BGS" branco + "OS" laranja: a palavra da marca BGS OS. */
.ent-word-bgs{color:var(--ent-ink)}
.ent-word-os{color:var(--ent-orange)}
.ent-word-sub{
font-size:14px; font-weight:600; letter-spacing:.24em; color:var(--ent-ink-2); white-space:nowrap;
animation:ent-track .9s cubic-bezier(.22,.9,.24,1) 1.9s both;
}
@media (max-width:560px){
.ent-word span{font-size:58px}
.ent-word-sub{font-size:11px; letter-spacing:.16em; white-space:normal; text-align:center}
}
.ent-loader{display:flex; flex-direction:column; align-items:center; gap:14px;
animation:ent-rise .6s ease-out 2.2s both}
.ent-bar{width:240px; height:3px; background:rgba(255,255,255,.16); overflow:hidden}
.ent-bar-fill{
width:100%; height:100%; background:var(--ent-orange); transform-origin:left center;
animation:ent-bar 1.6s cubic-bezier(.5,0,.2,1) 2.3s both;
}
.ent-loader-lbl{font-family:var(--ent-mono); font-size:11px; letter-spacing:.16em; color:var(--ent-ink-3)}
/* ---------- etapa 3: front page ---------- */
.ent-home{padding:36px 44px 32px; flex-direction:column; gap:56px; animation:ent-in .7s ease-out both}
/* Três zonas — logo à esquerda, relógios ao CENTRO, ações à direita — em
vez do `flex;space-between` de antes, que deixava os relógios grudados
nas ações do lado direito (pedido do usuário, 2026-09-21: "quero ambos
mais centralizados"). `1fr auto 1fr` centraliza os relógios de verdade,
não importa quantos botões aparecem do lado direito (conta comum vs.
administradora mostram números diferentes de ações). Empilha em telas
estreitas, onde uma grade de 3 colunas não cabe. */
.ent-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px 24px}
@media (max-width:860px){
.ent-top{grid-template-columns:1fr; justify-items:center; text-align:center}
.ent-top-dir{justify-self:center}
}
.ent-lockup{display:flex; align-items:center; gap:16px}
/* Mesmo símbolo da etapa 2 em 44px, estático: hexágono + o Brax saindo por
cima (medidas da entrega — não escalam por proporção). */
.ent-hex-sm{position:relative; width:44px; height:48px; flex:none; margin-top:12px}
.ent-hex-sm-out, .ent-hex-sm-in{position:absolute; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}
.ent-hex-sm-out{inset:0; background:var(--ent-orange)}
.ent-hex-sm-in{left:3px; top:3px; width:38px; height:42px; background:var(--ent-blue)}
.ent-brax-sm{
position:absolute; left:-4px; top:-16px; width:52px; height:61px; overflow:hidden;
clip-path:polygon(0px 0px, 52px 0px, 52px 23px, 45px 27px, 45px 48px, 26px 59px, 7px 48px, 7px 27px, 0px 23px);
}
.ent-brax-sm img{position:absolute; left:.7px; top:4px; width:50.7px; display:block}
.ent-lockup-txt{display:flex; flex-direction:column; gap:5px}
.ent-word-sm{display:flex; align-items:baseline; gap:7px; line-height:1}
.ent-word-sm span{font-size:28px; font-weight:900; letter-spacing:-.03em}
.ent-word-sub-sm{font-size:8.5px; font-weight:600; letter-spacing:.18em; color:var(--ent-ink-2); white-space:nowrap}
/* wrap: com INFORMAÇÕES DAS EMPRESAS + ADMINISTRAÇÃO + SAIR juntos (conta
administradora), quatro itens nesta linha não cabem numa tela estreita. */
.ent-top-dir{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; justify-content:flex-end; justify-self:end}
.ent-top-tag{font-family:var(--ent-mono); font-size:11px; letter-spacing:.14em; color:var(--ent-ink-3)}
/* Painel de horários estilo relógio de mesa de operações (pedido do
usuário, 2026-09-21: "no estilo daqueles relógios de action brokers")
— cada cidade numa célula própria, cidade+hora centralizados dentro
dela (antes era uma linha de texto corrido, alinhada à esquerda). Cor
de destaque é a mesma laranja da marca (--ent-orange), não o verde do
relógio de referência, pra continuar no tom do resto da página. */
.ent-relogios{display:flex; flex-wrap:wrap; justify-content:center; background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden}
.ent-relogio{display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:3px; padding:7px 14px; min-width:72px}
.ent-relogio+.ent-relogio{border-left:1px solid rgba(255,255,255,.12)}
/* Rótulos variam bastante em tamanho (RIO BRANCO x FERNANDO DE NORONHA) —
quebra em duas linhas em vez de estourar a largura da célula ou forçar
um min-width gigante só pro maior nome. */
/* line-height*2 de altura reservada — "FERNANDO DE NORONHA" quebra em duas
linhas, os outros rótulos não; sem essa altura fixa (com o texto só
centralizado dentro dela) a hora de cada célula ficava numa altura
diferente (pedido do usuário, 2026-09-21: "alinhe Fernando de Noronha
com o restante"). */
.ent-relogio-cidade{font-family:var(--ent-mono); font-size:8.5px; font-weight:600;
letter-spacing:.1em; color:var(--ent-ink-3); text-align:center; max-width:80px;
line-height:1.35; min-height:2.7em; display:flex; align-items:center; justify-content:center}
.ent-relogio-hora{font-family:var(--ent-mono); font-size:20px; font-weight:700;
letter-spacing:.05em; color:var(--ent-orange); text-shadow:0 0 8px rgba(238,125,35,.45);
font-variant-numeric:tabular-nums}
/* Brasília é o fuso de referência do site — destaque sutil (fundo e
rótulo na cor da marca) pra distinguir das demais sem gritar (pedido do
usuário, 2026-09-21: "a local (Brasília) tem que ter algum tipo de
destaque"). */
.ent-relogio-local{background:rgba(238,125,35,.16)}
.ent-relogio-local .ent-relogio-cidade{color:var(--ent-orange); font-weight:700}
@media (max-width:600px){.ent-relogio{padding:6px 10px; min-width:60px}
.ent-relogio-hora{font-size:16px}}
/* Discreto de propósito: sair é o caminho de saída, não uma das ações da
capa — a hierarquia do canto continua sendo o ENTRAR NO PAINEL do centro.
Nasce escondido e só aparece onde há sessão (ver js/sair.js). */
.ent-sair{
font-family:var(--ent-mono); font-size:11px; letter-spacing:.14em;
color:var(--ent-ink-3); text-decoration:none; cursor:pointer;
padding:7px 12px; border:1px solid rgba(255,255,255,.2); border-radius:8px;
transition:border-color .14s, color .14s;
}
.ent-sair:hover{border-color:var(--ent-orange); color:var(--ent-ink)}
/* Administração é ação de administrador, não a saída: laranja de partida pra
se distinguir do SAIR ao lado sem precisar de ícone nesta tipografia. */
.ent-admin{border-color:rgba(238,125,35,.5); color:var(--ent-orange)}
.ent-admin:hover{border-color:var(--ent-orange); color:var(--ent-ink)}
/* Conta sem nenhum módulo liberado (ver js/sessao-ui.js). */
.ent-sem-acesso{
margin:0; max-width:520px; font-size:14px; line-height:1.6; color:var(--ent-ink-2);
padding:16px 18px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);
border-radius:12px;
}
/* Duas colunas — hero+módulos à esquerda, resumo de e-mail à direita (pedido
do usuário, 2026-09-21). GRID com colunas em `fr`, não flex com
`max-width` fixo em cada item: a versão em flex deixava as duas colunas
do tamanho do próprio teto (720px + 420px) e sobrava um vão morto do lado
direito em telas largas — exatamente o "desarmônico" reportado pelo
usuário (2026-09-21). Colunas em fração SEMPRE somam 100% da largura
disponível, então não existe resto sem dono. `minmax(0, ...)` no lugar de
só a fração: sem isso um filho com conteúdo largo (o card de resumo, com
texto de erro longo da OpenAI, por exemplo) empurraria a coluna além da
fração e voltaria a desequilibrar. `max-width` + `margin:auto` no
container: usa a largura da tela até um teto generoso — sem teto, em
monitor ultrawide as colunas ficariam absurdamente esticadas, o oposto de
harmônico. Empilha abaixo de 980px (ver @media no fim do bloco). */
.ent-home-grid{
flex:1; display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
align-items:stretch; gap:56px; width:100%; max-width:1600px; margin:0 auto;
}
@media (max-width:980px){.ent-home-grid{grid-template-columns:1fr}}
.ent-hero{display:flex; flex-direction:column; justify-content:center; gap:32px; min-width:0}
.ent-hero h1{
margin:0; font-size:clamp(34px, 5vw, 60px); font-weight:400; line-height:1.06;
color:var(--ent-ink); text-wrap:pretty;
}
.ent-hero h1 b{font-weight:800; color:var(--ent-orange)}
.ent-lead{margin:0; max-width:520px; font-size:17px; line-height:1.6; color:var(--ent-ink-2)}
.ent-ctas{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.ent-btn{
display:inline-flex; align-items:center; padding:17px 32px; border:0; border-radius:10px;
background:var(--ent-orange); color:var(--ent-ink);
font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.14em;
text-decoration:none; cursor:pointer; transition:background .14s, color .14s;
}
.ent-btn:hover{background:var(--ent-ink); color:var(--ent-blue)}
.ent-btn-ghost{
display:inline-flex; align-items:center; padding:17px 30px; border-radius:10px;
background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--ent-ink);
font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.14em;
text-decoration:none; cursor:pointer; transition:border-color .14s, color .14s;
}
.ent-btn-ghost:hover{border-color:var(--ent-orange); color:var(--ent-orange)}
/* Card do resumo diário de e-mail (pedido do usuário, 2026-09-21) —
conteúdo montado por js/email.js#montarWidgetResumo, que reaproveita as
MESMAS classes `.mail-resumo-geral`/`.mail-assuntos`/`.mail-assunto`/
`.chip`/`.loading-ph` do módulo Email (css/email.css) em vez de duplicar
a marcação. Essas classes usam os tokens do APP (`--ink`, `--surface-2`,
`--brand-orange`...), que não existem nesta tela (paleta fixa `--ent-*`,
ver cabeçalho do arquivo) — em vez de reescrever cada classe pra cá,
SOMBREIA os tokens que elas leem, escopado a este card: qualquer
`.mail-*`/`.chip`/`.loading-ph` dentro dele já sai na cor certa, sem
tocar em nada do módulo Email de verdade. */
.ent-resumo-email{
--surface-2:rgba(255,255,255,.05); --surface-3:rgba(255,255,255,.09);
--border:rgba(255,255,255,.18); --hair:rgba(255,255,255,.16);
--ink:var(--ent-ink); --ink-2:var(--ent-ink-2); --ink-muted:var(--ent-ink-3);
--brand-orange:var(--ent-orange);
min-width:0; padding:26px 28px; background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.16); border-radius:14px;
animation:ent-rise .45s ease-out both;
}
.ent-resumo-email h3{
margin:0 0 12px; font-family:var(--ent-mono); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--ent-ink-3); font-weight:600;
}
.ent-resumo-email .chip{background:transparent; border:1px solid rgba(255,255,255,.28)}
.ent-resumo-email .chip:hover{border-color:var(--ent-orange); color:var(--ent-orange)}
.ent-resumo-email .mail-assuntos{grid-template-columns:1fr}
/* ---------- escolha do módulo (abre no ENTRAR NO PAINEL) ---------- */
/* Nasce com o atributo `hidden` no HTML e é o botão ENTRAR NO PAINEL que a
revela (ver js/entrada.js) — a front page continua sendo uma capa, e a
escolha do painel é o segundo passo, não uma lista que já chega aberta. */
.ent-modulos{display:flex; flex-direction:column; gap:14px; animation:ent-rise .45s ease-out both}
.ent-modulos[hidden]{display:none}
.ent-modulos-lbl{font-family:var(--ent-mono); font-size:10px; letter-spacing:.2em; color:var(--ent-ink-4)}
/* auto-fit em vez de 1fr 1fr fixo: com 2 módulos preenchia a linha certinho,
mas o 3º (Atacado/Varejo) sobrava sozinho numa segunda linha, com um vão
vazio ao lado — vira 3 colunas iguais na largura disponível hoje, e
continua se ajustando sozinho se um 4º módulo aparecer. */
.ent-modulos-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px}
@media (max-width:720px){.ent-modulos-grid{grid-template-columns:1fr}}
.ent-mod{
display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left;
padding:18px 20px; background:rgba(255,255,255,.05); border-radius:12px;
border:1px solid rgba(255,255,255,.18); color:var(--ent-ink);
font-family:inherit; cursor:pointer;
transition:border-color .13s, background .13s, transform .1s;
}
.ent-mod:hover{border-color:var(--ent-orange); background:rgba(255,255,255,.09); transform:translateY(-1px)}
.ent-mod:active{transform:translateY(0)}
/* Nasce assim (ver index.html) enquanto data/atas.json não chegou — mesma
razão da tela antiga: não dá pra entrar num módulo cujo dataset ainda não
existe, e esconder-e-revelar o cartão piscaria ao lado do outro. */
.ent-mod:disabled{cursor:default; opacity:.5}
.ent-mod:disabled:hover{border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); transform:none}
.ent-mod-title{font-size:15px; font-weight:600}
.ent-mod-desc{font-size:12.5px; line-height:1.45; color:var(--ent-ink-2)}
/* ---------- rodapé do grupo ---------- */
.ent-rodape{
display:flex; align-items:center; gap:36px; flex-wrap:wrap;
padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
}
.ent-rodape-lbl{font-family:var(--ent-mono); font-size:10px; letter-spacing:.2em; color:var(--ent-ink-4)}
/* As mesmas quatro logos da pré-página, menores e apagadas — daí as larguras
próprias em vez das de .ent-logo-* (que valem na etapa 1). */
.ent-rodape img{opacity:.68; display:block; transition:opacity .15s ease}
.ent-rodape .ent-logo-grupobgs{width:118px}
.ent-rodape .ent-logo-csi{width:128px}
.ent-rodape .ent-logo-grimp{width:116px}
.ent-rodape .ent-logo-brasimpex{width:112px}
.ent-rodape .ent-logo-link:hover img, .ent-rodape .ent-logo-link:focus-visible img{opacity:1}
/* Foco visível pra quem navega por teclado. Mesma convenção do resto do site
(outline de 2px + offset, ver .brand-logo-btn em components.css), mas em
laranja: o azul-marinho de lá desapareceria neste fundo. */
.entrada button:focus-visible, .entrada a:focus-visible{
outline:2px solid var(--ent-orange); outline-offset:3px;
}
/* ---------- PULAR / REPETIR ---------- */
.ent-acoes{position:fixed; right:24px; bottom:24px; display:flex; gap:10px; z-index:2}
.ent-acao{
padding:10px 16px; background:transparent; border:1px solid rgba(255,255,255,.24); border-radius:8px;
color:var(--ent-ink-2); font-family:var(--ent-mono); font-size:11px; letter-spacing:.14em;
cursor:pointer; transition:border-color .14s, color .14s;
}
.ent-acao:hover{border-color:var(--ent-orange); color:var(--ent-ink)}
/* Não há o que pular quando a animação já acabou. */
.entrada[data-etapa="home"] .ent-pular{display:none}
/* Numa tela estreita a front page vira uma coluna só e o rodapé encosta no
canto de baixo, justamente onde estes dois botões flutuam — sem esta
folga, o REPETIR fica em cima das logos do grupo. */
@media (max-width:720px){.ent-home{padding-bottom:84px}}
/* ---------- animações (nomes, durações e curvas da entrega) ---------- */
@keyframes ent-ring{from{opacity:0; transform:scale(.7) rotate(-30deg)} to{opacity:1; transform:scale(1) rotate(0deg)}}
@keyframes ent-core{from{opacity:0; transform:scale(1.16)} to{opacity:1; transform:scale(1)}}
@keyframes ent-brax{0%{transform:translateY(300px)} 70%{transform:translateY(-8px)} 100%{transform:translateY(0)}}
@keyframes ent-bob{0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-6px) scaleY(1.015)}}
@keyframes ent-wipe{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes ent-track{from{opacity:0; letter-spacing:.5em}}
@keyframes ent-bar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes ent-rise{from{opacity:0; transform:translateY(14px)}}
@keyframes ent-in{from{opacity:0}}
@keyframes ent-pre{0%{opacity:0; transform:translateY(10px)} 18%,76%{opacity:1; transform:translateY(0)} 100%{opacity:0; transform:translateY(-8px)}}
@keyframes ent-pre-linha{0%{opacity:0; transform:scaleY(0)} 30%,76%{opacity:1; transform:scaleY(1)} 100%{opacity:0}}
/* Quem pediu menos movimento no sistema entra direto na front page (a etapa
inicial já nasce "home", ver o