/* A porta do Backstage (29/09/2026). As classes levam o prefixo bp- porque o DS do Backstage tem .campo, .btn,
   .barra, .erro e .col com regras próprias, que se somavam às da proposta e quebravam a pílula no celular.
   A porta: a tela de senha da proposta da BeFun, copiada literalmente a pedido do Alex
   ("precisa ficar como a tela da proposta da befun, pode pegar ela literalmente"). Fonte:
   encoredata-site/propostas/entrar.html. Mudou só o conteúdo: sem logo de cliente, com o campo de usuário, sem GA
   e Clarity. Toda regra mora dentro de #bs-login, porque .bp-btn, .bp-campo e .bp-etq também existem no DS do Backstage. */
#bs-login{
  --paper:#eeece4;--ink:#16170f;--deep:#283318;--moss:#4a5d23;--sage:#97a06b;--pale:#c9cda0;--amber:#d7b56d;
  --erro-claro:#f2c4ad;--ease:cubic-bezier(.2,.8,.2,1);--exp:cubic-bezier(.16,1,.3,1);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  position:fixed;inset:0;z-index:100;overflow:hidden auto;
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:#f4f2e8;
  -webkit-font-smoothing:antialiased;line-height:1.45;display:flex;flex-direction:column;isolation:isolate;
  background:
    radial-gradient(58% 48% at 16% 10%, rgba(74,93,35,.62), rgba(74,93,35,0) 64%),
    radial-gradient(54% 44% at 88% 26%, rgba(120,96,38,.34), rgba(120,96,38,0) 66%),
    radial-gradient(72% 62% at 66% 98%, rgba(151,160,107,.26), rgba(151,160,107,0) 68%),
    linear-gradient(148deg, #141c0c 0%, #2b3a1b 54%, #10160a 100%);
  transition:opacity .5s var(--exp)}
#bs-login *{margin:0;padding:0;box-sizing:border-box}
#bs-login::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grao);background-size:160px 160px;opacity:.5;mix-blend-mode:overlay}
#bs-login a{color:inherit}
#bs-login.bs-entrou{opacity:0;pointer-events:none}

/* ---- marca: a caixa da marca, 22px ---- */
#bs-login .bp-brandmark{white-space:nowrap;position:fixed;left:26px;top:18px;z-index:60;display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:13px;pointer-events:none;color:#fbfaf5}
#bs-login .bp-brandmark .bp-mark{width:22px;height:22px;fill:var(--pale)}
@media(max-width:820px){#bs-login .bp-brandmark{left:22px;top:16px}}

/* ---- holofote: a receita da capa ---- */
#bs-login .bp-cv-spot{position:fixed;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;
  pointer-events:none;z-index:1;transform:translate(-3000px,-3000px);
  background:radial-gradient(circle,rgba(151,160,107,.17) 0%,rgba(151,160,107,.06) 32%,transparent 66%);filter:blur(42px)}
#bs-login .bp-cv-mesh{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) .6px,transparent .9px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(320px at -900px -900px,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%);
  mask-image:radial-gradient(320px at -900px -900px,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%)}
@media(max-width:820px){#bs-login .bp-cv-mesh,#bs-login .bp-cv-spot,#bs-login .bp-cv-lit{display:none}#bs-login h1{color:#fbfaf5}}

/* ---- a coluna ---- */
#bs-login main{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:96px 22px 56px;
  transition:opacity .45s var(--exp),transform .45s var(--exp)}
#bs-login .bp-col{width:100%;max-width:420px}
#bs-login .bp-etq{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
#bs-login .bp-etq.bp-rot{color:var(--sage);display:flex;align-items:center;gap:8px;margin-bottom:18px}
#bs-login .bp-etq.bp-rot svg{width:14px;height:14px;flex:none}
#bs-login .bp-cv-tw{position:relative}
#bs-login h1{text-wrap:balance;font-size:clamp(32px,min(3.6vw,5vh),44px);line-height:1.06;letter-spacing:-.03em;font-weight:700;
  max-width:16ch;color:rgba(251,250,245,.84);transition:color .4s var(--ease)}
#bs-login h1 .bp-h1-sub{display:block;font-size:.62em;font-weight:600;letter-spacing:-.01em;margin-bottom:.45em;color:rgba(251,250,245,.62)}
#bs-login .bp-cv-lit{position:absolute;inset:0;margin:0;pointer-events:none;color:#fff;text-wrap:balance;
  font-size:clamp(32px,min(3.6vw,5vh),44px);line-height:1.06;letter-spacing:-.03em;font-weight:700;max-width:16ch;
  -webkit-mask-image:radial-gradient(320px at -900px -900px,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%);
  mask-image:radial-gradient(320px at -900px -900px,#000 0%,rgba(0,0,0,.45) 45%,transparent 80%)}
#bs-login .bp-cv-lit .bp-h1-sub{display:block;font-size:.62em;font-weight:600;letter-spacing:-.01em;margin-bottom:.45em;color:rgba(255,255,255,.72)}

/* ---- o campo: pílula de vidro, ícone à esquerda, mostrar/ocultar à direita, sem placeholder ---- */
#bs-login form{display:flex;flex-direction:column;gap:12px;margin-top:clamp(28px,4.4vh,40px)}
#bs-login .bp-fld{display:flex;flex-direction:column;gap:9px}
#bs-login .bp-fld label{color:rgba(251,250,245,.66)}
#bs-login .bp-campo{position:relative;display:flex;align-items:center;height:52px;border-radius:40px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  transition:border-color .2s,box-shadow .2s,background .2s}
#bs-login .bp-campo:focus-within{border-color:rgba(251,250,245,.55);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(215,181,109,.22)}
#bs-login .bp-campo > svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--sage);pointer-events:none}
/* A máscara da senha: o ponto da Verdana é um disco, o da Instrument Sans é um quadradinho (medido em 17/09 na
   proposta). Em modo senha, Verdana a 24px com tracking largo; visível, volta à Instrument Sans. */
#bs-login .bp-campo input{flex:1;height:100%;min-width:0;font-family:Verdana,'DejaVu Sans',sans-serif;font-size:24px;letter-spacing:.3em;color:#fbfaf5;
  background:transparent;border:0;padding:0 50px;text-align:center;text-indent:.3em;transition:font-size .15s,letter-spacing .15s}
#bs-login .bp-campo input:focus{outline:none}
#bs-login .bp-campo input::-ms-reveal{display:none}
/* o usuário é texto, não máscara: a mesma pílula com a fonte da página */
#bs-login .bp-campo.bp-texto input,#bs-login .bp-campo.bp-visivel input{font-family:inherit;font-size:17px;letter-spacing:.02em;text-indent:.02em}
#bs-login .bp-olho{position:absolute;right:4px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:rgba(251,250,245,.6);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,background .2s}
#bs-login .bp-olho svg{width:18px;height:18px}
#bs-login .bp-olho:hover,#bs-login .bp-olho:focus-visible{color:#fbfaf5;background:rgba(255,255,255,.08);outline:none}
#bs-login .bp-olho .bp-fechado{display:none}
#bs-login .bp-campo.bp-visivel .bp-olho .bp-aberto{display:none}
#bs-login .bp-campo.bp-visivel .bp-olho .bp-fechado{display:block}

/* ---- o botão, com o brilho da marca ---- */
#bs-login .bp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;
  font-size:14.5px;font-weight:700;border:0;cursor:pointer;border-radius:40px;padding:0 26px;height:46px;width:100%;
  background:#f4f2e8;color:var(--deep);transition:transform .15s var(--ease),background .2s}
#bs-login .bp-btn svg{width:16px;height:16px;transition:transform .2s var(--ease)}
#bs-login .bp-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(hover:hover){#bs-login .bp-btn:hover{background:#fff}#bs-login .bp-btn:hover svg{transform:translateX(3px)}}
#bs-login .bp-btn-glint{position:absolute;inset:-50% -70%;pointer-events:none;
  background:linear-gradient(68deg,transparent 40%,rgba(255,255,255,0) 46%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 54%,transparent 60%);
  transform:translateX(-130%);animation:bsBtnGlint 7s ease-in-out infinite}
@keyframes bsBtnGlint{0%,88%{transform:translateX(-130%)}96%,100%{transform:translateX(130%)}}
#bs-login .bp-erro{display:none;font-size:14px;line-height:1.45;color:var(--erro-claro)}
#bs-login .bp-erro.bp-on{display:block}
#bs-login .bp-cta-foot{font-size:13px;color:rgba(251,250,245,.55);margin-top:clamp(28px,4vh,40px)}
#bs-login .bp-cta-foot a{text-decoration:none;color:rgba(251,250,245,.8);display:inline-block;padding:14px 0;margin:-14px 0}

/* ---- a saída: a coluna se recolhe, o botão diz o que está fazendo, a linha âmbar corre no topo ---- */
#bs-login .bp-barra{position:fixed;left:0;top:0;height:2px;width:100%;z-index:80;background:rgba(215,181,109,.18);opacity:0;pointer-events:none}
#bs-login .bp-barra::before{content:"";position:absolute;left:0;top:0;height:100%;width:34%;background:var(--amber);transform:translateX(-110%)}
#bs-login.bp-saindo main{opacity:0;transform:translateY(-10px);pointer-events:none}
#bs-login.bp-saindo .bp-barra{opacity:1}
#bs-login.bp-saindo .bp-barra::before{animation:bsCorre 1.1s var(--ease) infinite}
#bs-login.bp-saindo .bp-btn-glint{animation:none}
@keyframes bsCorre{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){
  #bs-login .bp-btn,#bs-login .bp-campo,#bs-login main,#bs-login .bp-olho,#bs-login{transition:none}
  #bs-login .bp-btn:hover{transform:none}#bs-login .bp-btn-glint{animation:none;opacity:0}
  #bs-login.bp-saindo .bp-barra::before{animation:none;width:100%;transform:none}
}

/* Enquanto a porta está aberta, o app de fundo sai do layout: no celular algo dele é mais largo que a tela (a
   janela mediu 448px num aparelho de 390 em 29/09/2026) e empurrava a porta, que é fixa, para fora da borda. */
body:has(> #bs-login:not(.bs-entrou)) > :not(#bs-login){display:none}