/* #/_login?opcao=1|2|3 · as três opções da tela de entrada (08/10; design/2026-10-08-login-analises-opcoes/).
   Um arquivo só serve as duas casas: o protótipo (a tela de demonstração, por cima da casca) e a página do Phoenix (login.html), que
   não carrega core.css e vive sob a CSP clássica (default-src 'self': nenhum style="" no HTML, nenhum script inline). Por isso tudo aqui
   mora sob .lg-raiz e traz os próprios valores (com o core por cima quando existe). Nenhuma @font-face: no protótipo ela vem do core.css; na
   página, de login-fontes.css (o mesmo bloco com os caminhos de intake/static).
   Linguagem: preto chapado, o campo de pontos de 12 px, réguas de 1 px, rótulos mono, o laranja SÓ no botão Entrar. */
.lg-raiz{
  --lg-bg:#0a1016; --lg-raised:#15181b; --lg-in:#13181e;
  --lg-s100:#F3F4F4; --lg-s200:#E4E6E6; --lg-s300:#CBD0D0; --lg-s400:#A9AFAF; --lg-s500:#7E8686; --lg-s600:#5C6464; --lg-s700:#3E4548;
  --lg-or:#F75105; --lg-or-d:#C94204; --lg-tint:#FFB18F;
  --lg-fg-rgb:255,255,255; --lg-tinta-rgb:243,244,244; --lg-aco-rgb:169,175,175; --lg-aco3-rgb:203,208,208; --lg-chao-rgb:10,16,22; --lg-tint-rgb:255,177,143;
  --lg-max:#fff; --lg-inv:#0a1016; --lg-sobre-or:#0a1016; --lg-or-h:#ff6a24; --lg-sombra-k:1; --lg-brilho-k:1; --lg-led-luz:1;
  --lg-rule:rgba(var(--lg-fg-rgb),.10); --lg-rule-2:rgba(var(--lg-fg-rgb),.06);
  --lg-sans:var(--sans,"Neue Montreal","Neue Montreal Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);
  --lg-mono:var(--mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);
  --lg-out:cubic-bezier(.2,.8,.2,1); --lg-io:cubic-bezier(.4,0,.2,1);
  --lg-gut:40px; --lg-gap:24px; --lg-maxw:1520px; --lg-min:11px;   /* 12/10: o piso de texto (11 px, 12 no celular), o --t-min do core: o login não carrega o core.css */
  --lg-degrau:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  position:fixed; inset:0; z-index:120; overflow-x:hidden; overflow-y:auto;
  display:flex; flex-direction:column; min-height:100%;
  background:var(--lg-bg); color:var(--lg-s300); font:400 15px/1.45 var(--lg-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color-scheme:dark;
}
/* 10/11 (frente 3, o modo claro): a entrada segue o sistema (ninguém entrou ainda, não há escolha a ler). Os mesmos valores da /novo/
   (core.css, "cor: o tema"): a rampa invertida sobre o papel, o laranja de texto escurecido, nada brilha. */
@media (prefers-color-scheme:light){
  .lg-raiz{--lg-bg:#FFFFFF; --lg-raised:#F3F4F4; --lg-in:#F3F4F4;
    --lg-s100:#101720; --lg-s200:#101720; --lg-s300:#3E4548; --lg-s400:#4A5153; --lg-s500:#5C6464; --lg-s600:#7E8686; --lg-s700:#A9AFAF;
    --lg-tint:#B83D04; --lg-fg-rgb:16,23,32; --lg-tinta-rgb:16,23,32; --lg-aco-rgb:92,100,100; --lg-aco3-rgb:62,69,72; --lg-chao-rgb:255,255,255; --lg-tint-rgb:184,61,4;
    --lg-max:#0a1016; --lg-inv:#FFFFFF; --lg-brilho-k:0; --lg-led-luz:0; color-scheme:light}
}
:where(.lg-raiz) *,:where(.lg-raiz) *::before,:where(.lg-raiz) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.lg-raiz) :where(button,input){font:inherit;color:inherit;background:none;border:0;border-radius:0;appearance:none;-webkit-appearance:none}
:where(.lg-raiz) a{color:inherit;text-decoration:none}
:where(.lg-raiz) :focus{outline:none}
:where(.lg-raiz) :focus-visible{outline:1px solid var(--lg-tint);outline-offset:3px}
.lg-raiz .lg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1099px){.lg-raiz{--lg-gut:24px}}
@media (max-width:760px){.lg-raiz{--lg-gut:16px;--lg-gap:16px;--lg-min:12px}}
/* na página do Phoenix .lg-raiz é a página inteira (o html é preto como ela) */
html.lg-pagina,html.lg-pagina body{background:#0a1016;min-height:100%}
@media (prefers-color-scheme:light){html.lg-pagina,html.lg-pagina body{background:#FFFFFF}}   /* depois da regra escura: senão ela vence pela ordem */
/* no protótipo a tela cobre a casca */
html.lg-demo{overflow:hidden}
html.lg-demo .px-tk,html.lg-demo .px-avisos,html.lg-demo .px-vivo-aviso{visibility:hidden}

/* ───── o campo de pontos: uma camada base e uma acesa, mascarada perto do herói (o --lg-luz-x/y de cada opção) ───── */
.lg-campo{position:fixed;inset:0;pointer-events:none}
.lg-campo::after{position:absolute;inset:0;pointer-events:none}
.lg-campo{z-index:0;background-image:radial-gradient(circle,rgba(var(--lg-aco-rgb),.13) 0.9px,transparent 1.15px);background-size:12px 12px;background-position:6px 6px}
.lg-campo::after{content:"";background-image:radial-gradient(circle,rgba(var(--lg-aco3-rgb),.42) 1px,transparent 1.3px);background-size:12px 12px;background-position:6px 6px;
  -webkit-mask-image:radial-gradient(ellipse var(--lg-luz-w,46%) var(--lg-luz-h,52%) at var(--lg-luz-x,26%) var(--lg-luz-y,48%),#000 0%,rgba(0,0,0,.45) 42%,transparent 100%);
  mask-image:radial-gradient(ellipse var(--lg-luz-w,46%) var(--lg-luz-h,52%) at var(--lg-luz-x,26%) var(--lg-luz-y,48%),#000 0%,rgba(0,0,0,.45) 42%,transparent 100%)}
.lg-raiz > :not(.lg-campo):not(.lg-demo-faixa){position:relative;z-index:1}

/* ───── a moldura: barra da marca, o corpo, a régua do pé ───── */
.lg-mold{width:100%;max-width:calc(var(--lg-maxw) + 2 * var(--lg-gut));margin-inline:auto;padding-inline:var(--lg-gut)}
.lg-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;flex:none}
.lg-marca{display:inline-flex;align-items:center;gap:12px;font:500 16px/1 var(--lg-sans);letter-spacing:-.01em;color:var(--lg-s100)}
.lg-marca svg{width:20px;height:20px;fill:currentColor;flex:none}
.lg-teste{margin-left:4px;padding:3px 6px 2px;font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lg-tint);box-shadow:inset 0 0 0 1px rgba(var(--lg-tint-rgb),.45)}
.lg-relogio{font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-s500);font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-relogio b{font-weight:400;color:var(--lg-s300)}
.lg-corpo{flex:1 0 auto;display:flex;flex-direction:column}
.lg-pe{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;border-top:1px solid var(--lg-rule-2);
  font:400 var(--lg-min)/1.3 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-s500)}
.lg-pe span + span{text-align:right}

/* ───── o formulário (as três usam o mesmo): rótulo mono, campo de régua, o botão ───── */
.lg-form{position:relative;display:flex;flex-direction:column;width:100%}
.lg-campo-f{position:relative;display:block}
.lg-campo-f + .lg-campo-f{margin-top:22px}
.lg-rot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font:400 var(--lg-min)/1.2 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-s400)}
.lg-in{display:block;width:100%;height:52px;padding:0 14px;background-color:var(--lg-in);color:var(--lg-s100);box-shadow:inset 0 -1px 0 var(--lg-s500);
  font:400 18px/1 var(--lg-sans);letter-spacing:-.005em;caret-color:var(--lg-tint);transition:box-shadow 120ms var(--lg-io),background-color 120ms var(--lg-io)}
.lg-in:hover{box-shadow:inset 0 -1px 0 var(--lg-s300)}
.lg-in:focus-visible{outline:none;background-color:var(--lg-raised);box-shadow:inset 0 -2px 0 var(--lg-s100),0 0 0 1px rgba(var(--lg-tinta-rgb),.16)}
.lg-in:-webkit-autofill{-webkit-text-fill-color:var(--lg-s100);-webkit-box-shadow:inset 0 -1px 0 var(--lg-s500),inset 0 0 0 60px var(--lg-in);caret-color:var(--lg-tint)}
.lg-in[type=password]{letter-spacing:.12em}
.lg-erro .lg-in{box-shadow:inset 0 -1px 0 var(--lg-or)}
.lg-mostrar{font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-s500);cursor:pointer;padding:2px 0;border-bottom:1px solid transparent;transition:color 120ms,border-color 120ms}
.lg-mostrar:hover{color:var(--lg-s200);border-color:var(--lg-s600)}
.lg-mostrar[hidden]{display:none}
/* o botão vem depois do campo no DOM (ordem do Tab) e aparece na linha do rótulo */
.lg-senha .lg-mostrar{position:absolute;right:0;top:-1px}
.lg-acoes{display:flex;align-items:center;gap:20px;margin-top:32px}
.lg-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;
  font:500 16px/1 var(--lg-sans);letter-spacing:-.005em;color:var(--lg-sobre-or);cursor:pointer;white-space:nowrap;user-select:none;transition:transform 80ms var(--lg-io)}
.lg-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lg-or);clip-path:var(--lg-degrau);transition:background 120ms var(--lg-io)}
.lg-btn svg{width:14px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform 200ms var(--lg-out)}
@media (hover:hover) and (pointer:fine){.lg-btn:hover::before{background:var(--lg-or-h)}.lg-btn:hover svg{transform:translateX(3px)}}
.lg-btn:active{transform:translateY(1px)}
.lg-btn:active::before{background:var(--lg-or-d)}
.lg-btn:focus-visible{outline:2px solid var(--lg-s100);outline-offset:3px}
.lg-btn[disabled]{color:var(--lg-s500);cursor:not-allowed;transform:none}
.lg-btn[disabled]::before{background:var(--lg-s700)}
.lg-btn[disabled] svg{display:none}
.lg-btn.is-ocupado{cursor:progress;pointer-events:none}
.lg-btn.is-ocupado::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--lg-degrau);background:linear-gradient(100deg,transparent 30%,rgba(var(--lg-fg-rgb),.34) 50%,transparent 70%);background-size:250% 100%;animation:lg-btn-varre 1300ms var(--lg-io) infinite}
@keyframes lg-btn-varre{from{background-position:130% 0}to{background-position:-30% 0}}
.lg-dica{font:400 12px/1.4 var(--lg-mono);color:var(--lg-s500)}
/* o aviso: erro e espera. Uma frase em tint, um quadrado laranja de 6 px, nada de caixa */
.lg-aviso{margin-bottom:28px;padding-top:12px;box-shadow:inset 0 1px 0 rgba(var(--lg-tint-rgb),.45);font:400 15px/1.45 var(--lg-sans);color:var(--lg-tint)}
.lg-aviso b{font-weight:400;font-family:var(--lg-mono);font-variant-numeric:tabular-nums;color:var(--lg-s100)}
.lg-aviso.livre{color:var(--lg-s300)}
.lg-aviso.livre{box-shadow:inset 0 1px 0 var(--lg-rule)}
/* a varredura ao entrar: uma linha de luz desce pelo formulário, com rastro */
.lg-varre{position:absolute;left:-12px;right:-12px;top:0;height:64px;pointer-events:none;opacity:0;transform:translateY(-64px);
  background:linear-gradient(180deg,rgba(var(--lg-tinta-rgb),0) 0%,rgba(var(--lg-tinta-rgb),.05) 70%,rgba(var(--lg-tinta-rgb),.10) 100%);box-shadow:0 1px 0 rgba(var(--lg-tinta-rgb),.7)}
.lg-form.entrando .lg-varre{animation:lg-varre 900ms var(--lg-io) both}
@keyframes lg-varre{0%{opacity:0;transform:translateY(-64px)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(var(--lg-varre-y,320px))}}

/* entrada da tela: o herói sobe 8 px, o formulário depois */
.lg-raiz [data-lg-entra]{animation:lg-entra 480ms var(--lg-out) both}
.lg-raiz [data-lg-entra="2"]{animation-delay:90ms}
.lg-raiz [data-lg-entra="3"]{animation-delay:180ms}
@keyframes lg-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* a faixa de demonstração (só no protótipo) */
.lg-demo-faixa{position:fixed;right:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:6px;padding:6px;background:rgba(var(--lg-chao-rgb),.92);box-shadow:inset 0 0 0 1px var(--lg-rule);
  font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-s500)}
.lg-demo-faixa > span{padding:0 6px}
.lg-demo-faixa a{padding:7px 9px;color:var(--lg-s400);box-shadow:inset 0 0 0 1px var(--lg-rule-2);text-decoration:none}
.lg-demo-faixa a[aria-current=true]{color:var(--lg-inv);background:var(--lg-s100);box-shadow:none}
.lg-demo-faixa a:hover{color:var(--lg-s100)}
.lg-demo-faixa i{width:1px;height:18px;background:var(--lg-rule);margin:0 4px}

/* ═════════════════ OPÇÃO 1 · A FRASE ═════════════════
   Pôster suíço: "Entrar no Phoenix." à esquerda, o formulário no segundo eixo (coluna 8), o pé de instrumento. */
.lg-o1{--lg-luz-x:24%;--lg-luz-y:52%;--lg-luz-w:42%;--lg-luz-h:44%}
.lg-o1 .lg-corpo{justify-content:center;padding:48px 0 72px}
.lg-o1 .lg-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--lg-gap);align-items:end}
.lg-o1 .lg-heroi{grid-column:1 / 8;padding-bottom:4px}
.lg-o1 .lg-lado{grid-column:8 / 13;max-width:440px}
.lg-sobre{display:block;margin-bottom:22px;font:400 var(--lg-min)/1.2 var(--lg-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lg-s500)}
.lg-frase{font:700 clamp(72px,8vw,132px)/.9 var(--lg-sans);letter-spacing:-.045em;word-spacing:.08em;color:var(--lg-s100);margin-left:-.05em;text-wrap:balance}
.lg-frase span{display:block;color:var(--lg-s500);font-weight:500;letter-spacing:-.045em}
.lg-sub{margin-top:28px;max-width:38ch;font:400 13px/1.55 var(--lg-mono);color:var(--lg-s400)}
.lg-o1 .lg-lado .lg-form{padding-top:6px}

/* ═════════════════ OPÇÃO 2 · O PLACAR ═════════════════
   Um LED só, grande: a hora (e, na espera, a contagem). A régua do dia embaixo, com o agora. O formulário do outro lado do eixo. */
.lg-o2{--lg-luz-x:27%;--lg-luz-y:48%;--lg-luz-w:40%;--lg-luz-h:40%}
.lg-o2 .lg-corpo{justify-content:center;padding:40px 0 64px}
.lg-o2{--lg-led-w:450px}
.lg-o2 .lg-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--lg-gap);align-items:center}
.lg-o2 .lg-heroi{grid-column:1 / 8;min-width:0}
.lg-o2 .lg-lado{grid-column:8 / 13;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:calc(var(--lg-gap) + 8px);border-left:1px solid var(--lg-rule);max-width:none}
.lg-o2 .lg-lado .lg-form{max-width:420px}
.lg-o2 .lg-lado .lg-tit{margin-bottom:30px;font:500 28px/1.1 var(--lg-sans);letter-spacing:-.025em;color:var(--lg-s100)}
.lg-o2 .lg-lado .lg-tit span{color:var(--lg-s500)}
.lg-led-rot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;max-width:var(--lg-led-w,450px);margin-bottom:18px;font:400 var(--lg-min)/1.2 var(--lg-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lg-s500)}
.lg-led-rot b{font-weight:400;color:var(--lg-s200)}
.lg-led-rot [data-lg-led-modo]{transition:color 200ms}
.lg-led-rot [data-lg-led-modo].espera{color:var(--lg-tint)}
.lg-led{display:block;max-width:100%;height:auto;overflow:visible}
.lg-led .ap{fill:rgba(var(--lg-aco-rgb),.16)}
.lg-led .ac{fill:var(--lg-s100)}
.lg-led .bl{fill:var(--lg-s100);opacity:calc(.5 * var(--lg-led-luz))}
.lg-led .nu{fill:#fff;opacity:var(--lg-led-luz)}   /* o núcleo é luz emitida: no claro o LED não emite */
.lg-led.espera .ac,.lg-led.espera .bl{fill:var(--lg-tint)}
.lg-led.espera .nu{fill:#FFE3D6}
.lg-led .col{transition:opacity 120ms var(--lg-io)}
.lg-led.acende .col{animation:lg-led-col 320ms steps(1,end) both;animation-delay:calc(var(--c) * 14ms)}
@keyframes lg-led-col{from{opacity:0}to{opacity:1}}
/* a régua do dia: um tique por hora, o agora */
.lg-dia{position:relative;max-width:var(--lg-led-w,450px);height:34px;margin-top:30px;border-bottom:1px solid var(--lg-s700)}
.lg-dia i{position:absolute;bottom:0;width:1px;height:5px;background:var(--lg-s600)}
.lg-dia i.h6{height:9px;background:var(--lg-s500)}
.lg-dia em{position:absolute;bottom:-18px;transform:translateX(-50%);font:400 var(--lg-min)/1 var(--lg-mono);font-style:normal;color:var(--lg-s500);letter-spacing:.04em}
.lg-dia .ag{position:absolute;bottom:-1px;width:1px;height:26px;background:var(--lg-s100);box-shadow:0 0 6px rgba(var(--lg-tinta-rgb),calc(.5 * var(--lg-brilho-k)))}
.lg-dia .ag.esq b{left:auto;right:8px}   /* 08/10: depois das 15h o rótulo vai para a esquerda da linha; à direita estourava 6 px no celular */
.lg-dia .ag b{position:absolute;left:8px;top:-2px;font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.08em;color:var(--lg-s100);white-space:nowrap}
.lg-dia .feito{position:absolute;left:0;bottom:-1px;height:1px;background:var(--lg-s300)}
.lg-o2 .lg-heroi .lg-sub{margin-top:44px}

/* ═════════════════ OPÇÃO 3 · O CARIMBO ═════════════════
   Uma folha de desenho técnico: a margem com as zonas, o desenho do painel de LED com as cotas, e o carimbo (a legenda da folha) é o login. */
.lg-o3{--lg-luz-x:38%;--lg-luz-y:44%;--lg-luz-w:48%;--lg-luz-h:48%}
.lg-o3 .lg-folha{position:relative;flex:1 0 auto;display:flex;flex-direction:column;margin:20px;border:1px solid var(--lg-s700);min-height:calc(100vh - 40px)}
.lg-o3 .lg-folha::before,.lg-o3 .lg-folha::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(var(--lg-s300),var(--lg-s300)) left top/14px 1px no-repeat,linear-gradient(var(--lg-s300),var(--lg-s300)) left top/1px 14px no-repeat,
    linear-gradient(var(--lg-s300),var(--lg-s300)) right top/14px 1px no-repeat,linear-gradient(var(--lg-s300),var(--lg-s300)) right top/1px 14px no-repeat,
    linear-gradient(var(--lg-s300),var(--lg-s300)) left bottom/14px 1px no-repeat,linear-gradient(var(--lg-s300),var(--lg-s300)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--lg-s300),var(--lg-s300)) right bottom/14px 1px no-repeat,linear-gradient(var(--lg-s300),var(--lg-s300)) right bottom/1px 14px no-repeat}
/* as zonas na margem: letras na esquerda, números em cima */
.lg-zonas{position:absolute;pointer-events:none;font:400 var(--lg-min)/1 var(--lg-mono);letter-spacing:.06em;color:var(--lg-s500)}
.lg-zonas.x{left:0;right:0;top:-15px;display:flex}
.lg-zonas.x span{flex:1;text-align:center;border-left:1px solid var(--lg-s700);height:6px;padding-top:0;transform:translateY(9px)}
.lg-zonas.x span:first-child{border-left:0}
.lg-zonas.x span b{display:block;font-weight:400;transform:translateY(-12px)}
.lg-zonas.y{top:0;bottom:0;left:-15px;display:flex;flex-direction:column}
.lg-zonas.y span{flex:1;display:flex;align-items:center}
.lg-o3 .lg-topo{height:64px;padding:0 24px;border-bottom:1px solid var(--lg-rule-2)}
.lg-o3 .lg-quadro{position:relative;flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,500px);align-items:end;gap:0 40px;padding:28px 24px 24px}
.lg-desenho{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 0 24px}
.lg-desenho svg{display:block;width:100%;max-width:960px;height:auto;overflow:visible}
.lg-desenho .lg-des-m{display:none}
.lg-des-m text{font-size:var(--lg-min)}
.lg-desenho .ln{fill:none;stroke:var(--lg-s600);stroke-width:1}
.lg-desenho .ln.f{stroke:var(--lg-s400)}
.lg-desenho .ln.c{stroke:var(--lg-s500)}
.lg-desenho .ln.e{stroke:var(--lg-s700)}
.lg-desenho .px{fill:rgba(var(--lg-aco-rgb),.22)}
.lg-desenho .px.on{fill:var(--lg-s100)}
.lg-desenho .px.mid{fill:var(--lg-s400)}
.lg-desenho text{font:400 var(--lg-min) var(--lg-mono);fill:var(--lg-s500);letter-spacing:.06em}
.lg-desenho text.t{fill:var(--lg-s300)}
.lg-desenho .seta{fill:var(--lg-s500)}
/* o traço se desenha na entrada: cada linha do contorno corre (stroke-dashoffset), depois os pixels acendem */
.lg-desenho.desenha .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:lg-traco 820ms var(--lg-io) forwards}
.lg-desenho.desenha .ln.d2{animation-delay:120ms}.lg-desenho.desenha .ln.d3{animation-delay:260ms}.lg-desenho.desenha .ln.d4{animation-delay:420ms}
.lg-desenho.desenha .px.on{opacity:0;animation:lg-acende 1ms steps(1,end) forwards;animation-delay:760ms}
.lg-desenho.desenha .px.g2,.lg-desenho.desenha .px.g4{animation-delay:800ms}.lg-desenho.desenha .px.g3,.lg-desenho.desenha .px.g5,.lg-desenho.desenha .px.g7{animation-delay:840ms}
.lg-desenho.desenha .px.g6,.lg-desenho.desenha .px.g8{animation-delay:880ms}.lg-desenho.desenha .px.g9{animation-delay:920ms}
.lg-desenho.desenha text{opacity:0;animation:lg-entra 320ms var(--lg-out) forwards;animation-delay:900ms}
@keyframes lg-traco{to{stroke-dashoffset:0}}
@keyframes lg-acende{to{opacity:1}}
/* o carimbo: a tabela da legenda da folha. O login mora nas linhas de baixo */
.lg-carimbo{border:1px solid var(--lg-s600);background:var(--lg-bg);font-size:13px}
.lg-carimbo .lg-lin{display:grid;grid-template-columns:96px minmax(0,1fr);border-top:1px solid var(--lg-s700)}
.lg-carimbo .lg-lin:first-child{border-top:0}
.lg-carimbo .lg-lin > *{min-width:0}
.lg-carimbo .lg-k{padding:11px 12px 0;font:400 var(--lg-min)/1.2 var(--lg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lg-s500);border-right:1px solid var(--lg-s700)}
.lg-carimbo .lg-v{padding:9px 14px 10px;font:400 14px/1.35 var(--lg-sans);color:var(--lg-s200)}
.lg-carimbo .lg-v.lg-tt{font:700 30px/1 var(--lg-sans);letter-spacing:-.035em;color:var(--lg-s100);padding:16px 14px 14px}
.lg-carimbo .lg-v.lg-tt span{color:var(--lg-s500);font-weight:500}
.lg-carimbo .lg-v.lg-vm{font:400 12px/1.35 var(--lg-mono);letter-spacing:.04em;color:var(--lg-s300)}
.lg-carimbo .lg-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lg-carimbo .lg-tres > div{padding:8px 12px 9px;border-left:1px solid var(--lg-s700)}
.lg-carimbo .lg-tres > div:first-child{border-left:0}
.lg-carimbo .lg-tres small{display:block;margin-bottom:4px;font:400 var(--lg-min)/1.2 var(--lg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lg-s500)}
.lg-carimbo .lg-tres span{font:400 12px/1.2 var(--lg-mono);color:var(--lg-s300);font-variant-numeric:tabular-nums}
.lg-carimbo .lg-form{display:block}
.lg-carimbo .lg-lin.lg-lc .lg-k{padding-top:21px}
.lg-carimbo .lg-lin.lg-lc .lg-campo-f{margin:0}
.lg-carimbo .lg-lin.lg-lc .lg-campo-f + .lg-campo-f{margin:0}
.lg-carimbo .lg-in{height:54px;background-color:transparent;box-shadow:none;padding:0 14px}
.lg-carimbo .lg-in:hover{background-color:rgba(var(--lg-fg-rgb),.02)}
.lg-carimbo .lg-in:focus-visible{background-color:var(--lg-raised);box-shadow:inset 0 -1px 0 var(--lg-tint)}
.lg-carimbo .lg-erro .lg-in,.lg-carimbo.lg-erro .lg-in{box-shadow:inset 0 -1px 0 var(--lg-or)}
.lg-carimbo .lg-lin.lg-lc{position:relative}
.lg-carimbo .lg-lin.lg-lc .lg-mostrar{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.lg-carimbo .lg-lin.lg-la{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.lg-carimbo .lg-lin.lg-la .lg-dica{align-self:center;padding:0 12px;font-size:var(--lg-min);letter-spacing:.06em;text-transform:uppercase}
.lg-carimbo .lg-lin.lg-la .lg-btn{height:56px;padding:0 32px}
.lg-carimbo .lg-lin.lg-la .lg-btn::before{clip-path:none}
.lg-carimbo .lg-lin.lg-tres-w{display:block}
.lg-carimbo .lg-lin.lg-lc input[type=password],.lg-carimbo .lg-lin.lg-lc input#password{padding-right:96px}
.lg-carimbo .lg-lin.lg-lv{display:block;padding:14px 14px 2px}
.lg-carimbo .lg-lin.lg-lv .lg-aviso{margin-bottom:12px;font-size:14px}
.lg-o3 .lg-varre{left:0;right:0}

/* ───────── tablet ───────── */
@media (min-width:761px) and (max-width:1099px){
  .lg-o2{--lg-led-w:400px}
  .lg-o1 .lg-heroi{grid-column:1 / 7}
  .lg-o1 .lg-lado{grid-column:7 / 13}
  .lg-o2 .lg-grade{grid-template-columns:minmax(0,1fr)}
  .lg-o2 .lg-heroi,.lg-o2 .lg-lado{grid-column:1 / -1}
  .lg-o2 .lg-lado{border-left:0;padding-left:0;margin-top:48px;padding-top:40px;border-top:1px solid var(--lg-rule)}
  .lg-o3 .lg-quadro{grid-template-columns:minmax(0,1fr)}
}
/* ───────── celular ───────── */
@media (max-width:760px){
  .lg-topo{height:56px}
  .lg-pe{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding-block:16px 20px}
  .lg-pe span + span{text-align:left}
  .lg-o1,.lg-o2{--lg-luz-x:30%;--lg-luz-y:30%;--lg-luz-w:80%;--lg-luz-h:30%}
  .lg-o1 .lg-corpo,.lg-o2 .lg-corpo{justify-content:flex-start;padding:28px 0 40px}
  .lg-o1 .lg-grade,.lg-o2 .lg-grade{grid-template-columns:minmax(0,1fr)}
  .lg-o1 .lg-heroi,.lg-o1 .lg-lado,.lg-o2 .lg-heroi,.lg-o2 .lg-lado{grid-column:1 / -1;max-width:none}
  .lg-frase{font-size:clamp(52px,15vw,64px)}
  .lg-sub{margin-top:18px;font-size:12px}
  .lg-o1 .lg-lado{margin-top:44px}
  .lg-acoes{margin-top:28px}
  .lg-acoes{flex-direction:column;align-items:stretch;gap:16px}
  .lg-btn{width:100%}
  .lg-o2 .lg-lado{border-left:0;padding-left:0;margin-top:36px;padding-top:32px;border-top:1px solid var(--lg-rule)}
  .lg-o2 .lg-lado .lg-tit{font-size:24px;margin-bottom:24px}
  .lg-dia{margin-top:22px}
  .lg-o2{--lg-led-w:300px}
  .lg-o2 .lg-heroi .lg-sub{margin-top:36px}
  .lg-o3 .lg-folha{margin:10px;min-height:calc(100vh - 20px)}
  .lg-zonas{display:none!important}
  .lg-o3 .lg-topo{padding:0 14px}
  .lg-o3 .lg-quadro{grid-template-columns:minmax(0,1fr);padding:12px 12px 12px}
  .lg-o3 .lg-desenho{padding:12px 0 28px}
  .lg-o3 .lg-quadro{align-content:space-between}
  .lg-desenho .lg-des-d{display:none}
  .lg-desenho .lg-des-m{display:block;max-width:330px}
  .lg-carimbo .lg-lin{grid-template-columns:76px minmax(0,1fr)}
  .lg-carimbo .lg-v.lg-tt{font-size:26px}
  .lg-carimbo .lg-lin.lg-la{grid-template-columns:minmax(0,1fr)}
  .lg-carimbo .lg-lin.lg-la .lg-dica{display:none}
  .lg-carimbo .lg-lin.lg-la .lg-btn{width:100%}
  .lg-demo-faixa{left:8px;right:8px;bottom:8px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .lg-raiz [data-lg-entra],.lg-led.acende .col,.lg-desenho.desenha .ln,.lg-desenho.desenha .px,.lg-desenho.desenha text,.lg-form.entrando .lg-varre,.lg-btn.is-ocupado::after{animation:none!important;opacity:1;stroke-dashoffset:0}
  .lg-form.entrando .lg-varre{opacity:0}
}