/* OBAT · Entrar (holograma) — casca comum de login.html (aluno, código, Fundador) e login-admin.html.
   Porte de design_wip/Campanha de Lançamento/OBAT · Site · Entrar · Holograma (hi-fi).dc.html (21 out).
   Só tema escuro por enquanto. Comportamento em assets/entrar/entrar.js. */
:root{
  --en-ora:#e8892a; --en-ora-hi:#FFB35C; --en-ora-hv:#ffb15c;
  --en-tx:#ececec; --en-tx2:#8e8e94; --en-tx3:#6e6e74; --en-lbl:#9a9aa0;
  --en-campo-bd:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:#000}
body{font-family:'Jost',system-ui,sans-serif;color:var(--en-tx);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--en-ora);text-decoration:none}
a:hover{color:var(--en-ora-hv)}
input::placeholder{color:#5e5e64}

/* ---------- palco: fundo + véus + lema ---------- */
.en-palco{position:relative;min-height:100vh;min-height:100dvh;background:#000}
.en-fundo{position:fixed;inset:0;pointer-events:none}
.en-fundo iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;pointer-events:none}
.en-veu{position:fixed;inset:0;pointer-events:none;background:rgba(0,0,0,.28)}
.en-veu2{background:linear-gradient(90deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 80%,rgba(0,0,0,.5) 100%),radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}

.en-lema{position:absolute;left:0;top:0;width:calc(100% - 8vw - 468px);height:100vh;pointer-events:none;z-index:1;font-family:'Julius Sans One',sans-serif}
.en-lema-l{position:absolute;left:0;right:0;top:9vh;display:flex;justify-content:center;flex-wrap:nowrap;font-size:clamp(12px,calc((100vw - 8vw - 468px) / 26),22px);letter-spacing:.32em;color:#F2E6CF;text-transform:uppercase;white-space:pre}
.en-lema-l span{display:inline-block;animation:enLzSurge 1.4s ease var(--e,0s) both,enLzPisca var(--dur,4s) ease-in-out var(--d,2s) infinite}
@media (max-width:899px){.en-lema{display:none}}

/* ---------- cartão ---------- */
.en-centro{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:flex-end;padding:24px}
/* (21 out) iluminação nova (print do Jorge): luz do canto superior esquerdo + filete de brilho na borda de cima */
.en-cartao{position:relative;width:100%;max-width:404px;margin-right:8vw;padding:40px 38px 34px;border-radius:20px;background:radial-gradient(85% 60% at 0 0,rgba(255,255,255,.11),rgba(255,255,255,0)),linear-gradient(180deg,rgba(25,25,29,.96),rgba(15,15,17,.97));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:18px}
.en-cartao::before{content:'';position:absolute;left:16px;right:16px;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.55) 50%,rgba(255,255,255,.16))}
@media (max-width:899px){.en-centro{justify-content:center}.en-cartao{margin-right:0}}
@media (max-width:420px){.en-centro{padding:20px 16px}.en-cartao{padding:32px 22px 28px}}

.en-topo{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.en-placa{width:64px;height:64px;border-radius:16px;display:block;box-shadow:0 14px 30px -12px rgba(0,0,0,.9),0 0 0 1px rgba(232,137,42,.22)}
.en-marca{font-size:22px;font-weight:700;letter-spacing:.5em;margin-top:10px;margin-right:-.5em}
.en-rotulo{font-size:11px;font-weight:600;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;color:var(--en-ora);white-space:nowrap;line-height:1.4}
.en-subt{font-family:'Outfit',sans-serif;font-size:13px;color:var(--en-tx2);line-height:1.5}

.en-passo,.en-form{display:flex;flex-direction:column;gap:18px}
.en-titulo{margin:0;font-size:20px;font-weight:700;text-align:center;color:var(--en-tx);line-height:1.3}
.en-texto{margin:0;font-family:'Outfit',sans-serif;font-size:13.5px;color:var(--en-tx2);line-height:1.6}
.en-texto b,.en-texto strong{color:var(--en-tx);font-weight:600}

/* Google (botão oficial do Google, centralizado na largura do cartão) */
.en-google{display:flex;justify-content:center;min-height:40px;transition:opacity .2s}
.en-ou{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#77777d}
.en-ou::before,.en-ou::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}

/* campos */
.en-campo{display:flex;flex-direction:column;gap:8px}
.en-campo>label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--en-lbl)}
.en-campo input{width:100%;font-family:'Outfit',sans-serif;font-size:14px;color:var(--en-tx);background:rgba(0,0,0,.5);border:1px solid var(--en-campo-bd);border-radius:10px;padding:13px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.en-campo input:focus{border-color:var(--en-ora);box-shadow:0 0 0 3px rgba(232,137,42,.15)}
.en-campo input[readonly]{color:#b9b9be;background:rgba(255,255,255,.03);cursor:default}
.en-campo input[readonly]:focus{border-color:var(--en-campo-bd);box-shadow:none}
@media (pointer:coarse){.en-campo input{font-size:16px}} /* iPhone não dá zoom no foco */
.en-dica{font-family:'Outfit',sans-serif;font-size:12px;color:var(--en-tx3);line-height:1.5}
.en-senha{position:relative;display:block}
.en-senha input{padding-right:84px}
.en-ver{position:absolute;right:8px;top:50%;transform:translateY(-50%);appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--en-tx2);cursor:pointer;font:inherit;font-size:11px;letter-spacing:.08em;padding:6px}
.en-ver:hover,.en-ver[aria-pressed="true"]{color:var(--en-ora-hi)}
.en-codigo input{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:22px;letter-spacing:.3em;text-align:center;font-weight:700}

.en-check{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-size:13px;color:#c9c9ce;cursor:pointer;line-height:1.45}
/* caixa desenhada (a nativa do WebKit desmarcada é um quadrado branco) */
.en-check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);border-radius:4px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .15s,border-color .15s}
.en-check input:checked{background:var(--en-ora);border-color:var(--en-ora)}
.en-check input:checked::after{content:'';width:4px;height:8px;border:solid #141414;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.en-check input:focus-visible{outline:2px solid var(--en-ora);outline-offset:2px}
.en-check .en-cinza{color:#77777d}
.en-check--topo{align-items:flex-start}
.en-check--topo input{margin-top:2px}

/* botões */
.en-cta{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border:0;border-radius:13px;background:linear-gradient(180deg,#1E1E22,#0E0E11);color:var(--en-ora-hi);font:inherit;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(232,137,42,.42),inset 0 1px 0 rgba(255,255,255,.08),0 18px 34px -18px rgba(0,0,0,.9);transition:box-shadow .2s}
.en-cta:hover{box-shadow:inset 0 0 0 1px rgba(232,137,42,.75),inset 0 1px 0 rgba(255,255,255,.1),0 0 24px -6px rgba(232,137,42,.35)}
.en-cta:focus-visible,.en-cta2:focus-visible{outline:2px solid var(--en-ora);outline-offset:3px}
.en-cta:disabled{cursor:default;opacity:.8}
.en-cta.carregando::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,179,92,.3);border-top-color:var(--en-ora-hi);animation:enGira .8s linear infinite}
.en-cta2{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:0;border-radius:13px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#F5F4F2;font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:box-shadow .2s,color .2s}
.en-cta2:hover{box-shadow:inset 0 0 0 1px rgba(232,137,42,.55);color:var(--en-ora-hi)}
.en-link{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--en-ora-hi)}
.en-link:hover{color:var(--en-ora-hv)}
.en-link:disabled{opacity:.5;cursor:default}
.en-link--cinza{color:var(--en-tx2)}

/* pé do cartão */
.en-pe{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px}
.en-pe-linha{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px}
.en-sep{width:100%;display:flex;align-items:center;gap:12px;margin:6px 0 2px;font-family:'Outfit',sans-serif;font-size:12px;color:var(--en-tx3)}
.en-sep::before,.en-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
.en-nota{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--en-tx2);text-align:center;line-height:1.5;margin:0}
.en-nota--p{font-size:11.5px;color:var(--en-tx3)}
.en-bloco{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}

/* mensagens */
.en-msg{display:none;padding:12px 14px;border-radius:10px;font-family:'Outfit',sans-serif;font-size:13px;line-height:1.45}
.en-msg.visivel{display:block}
.en-msg--erro{background:rgba(232,64,64,.08);border:1px solid rgba(232,64,64,.35);color:#ff8a80}
.en-msg--ok{background:rgba(78,201,122,.08);border:1px solid rgba(78,201,122,.35);color:#7fdca0}
.en-msg a{color:inherit;text-decoration:underline}

/* ---------- popup (boas-vindas do Fundador): mesmo vidro do cartão ---------- */
.en-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px 16px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:enSurge .3s ease both;overflow-y:auto}
/* opaco e sem backdrop-filter próprio: no WebKit, blur dentro de blur não desfoca e o cartão de trás vazava */
.en-modal .en-modal-cartao{max-width:380px;margin:auto;padding:32px 30px 28px;text-align:center;-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(85% 60% at 0 0,rgba(255,255,255,.11),rgba(255,255,255,0)),linear-gradient(180deg,#19191d,#0f0f11);animation:enSobe .35s cubic-bezier(.2,.8,.2,1) both}
.en-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.en-lista li{position:relative;padding:10px 12px 10px 30px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);font-family:'Outfit',sans-serif;font-size:13.5px;color:var(--en-tx2);line-height:1.45}
.en-lista li::before{content:'';position:absolute;left:13px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--en-ora);box-shadow:0 0 8px rgba(232,137,42,.7)}
.en-lista b{color:var(--en-tx);font-weight:600}
@keyframes enSobe{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- carregamento (holograma) ---------- */
.en-carga{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;background:radial-gradient(50% 60% at 50% 45%,#1c1712,#050505 75%);transition:opacity .6s ease;animation:enSurge .4s ease both}
.en-carga.saindo{opacity:0;pointer-events:none}
.en-holo{position:relative;width:min(62vw,280px);height:min(64vw,286px);transition:transform .45s cubic-bezier(.6,0,.9,.4),opacity .45s ease-in}
.en-holo>div{position:absolute;inset:0}
.en-carga.saindo .en-holo{transform:scale(.92);opacity:0}
.en-barra{width:min(52vw,240px);height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.en-barra i{display:block;height:100%;background:linear-gradient(90deg,#e8892a,#ffe0b0);box-shadow:0 0 10px #e8892a;transform-origin:left;animation:enBarra90 3.2s cubic-bezier(.2,.7,.3,1) both;transition:transform .35s ease-out}
.en-carga.pronta .en-barra i{animation:none;transform:scaleX(1)}

@keyframes enTr{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes enC0{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes enC1{0%{stroke-dashoffset:108}100%{stroke-dashoffset:8}}
@keyframes enC2{0%{stroke-dashoffset:124}100%{stroke-dashoffset:24}}
@keyframes enR0{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes enLiga{0%,30%{opacity:0}36%{opacity:.8}40%{opacity:.15}48%{opacity:.9}53%{opacity:.4}70%,100%{opacity:1}}
@keyframes enSurge{from{opacity:0}to{opacity:1}}
@keyframes enFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes enFlashA{0%,100%{opacity:1;transform:scale(1)}12%,88%{opacity:0;transform:scale(.3)}}
@keyframes enFlashB{0%,38%,62%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes enRespira{0%,100%{opacity:.35}50%{opacity:.75}}
@keyframes enCota{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes enBarra90{from{transform:scaleX(0)}to{transform:scaleX(.88)}}
@keyframes enGira{to{transform:rotate(360deg)}}
@keyframes enLzPisca{0%,100%{opacity:.35;text-shadow:0 0 0 rgba(255,236,200,0)}45%{opacity:1;text-shadow:0 0 10px rgba(255,226,180,.85)}}
@keyframes enLzSurge{0%{opacity:0;filter:blur(8px)}100%{opacity:1;filter:blur(0)}}

@media (prefers-reduced-motion:reduce){
  .en-lema-l span,.en-carga,.en-carga *,.en-modal,.en-modal-cartao{animation:none!important}
}