/* tela de login do meuez ("a braba", 09/2026): fundo preto, painel de vidro escuro no centro com o carrossel de
   campanhas à esquerda e o formulário à direita, aura de partículas em vórtice atrás (login/aura.js). Poppins. */
:root{--ink:#f4f2f7;--ink-2:#a9a4b4;--ink-3:#6f6a7c;--linha:rgba(255,255,255,.14);--fundo:#0a0810;--roxo:#8a1fc4}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--fundo);overflow:hidden;-webkit-font-smoothing:antialiased}
/* aura: camada 2D própria, atrás do painel; não recebe mouse */
#auras{position:fixed;inset:0;z-index:1;pointer-events:none}
#auras canvas{width:100%;height:100%;display:block}
.topo{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.4rem;pointer-events:none}
.topo nav{display:flex;gap:1.6rem;font-size:.82rem;font-weight:400;pointer-events:auto}
.topo nav a{color:var(--ink-2);text-decoration:none}
.topo nav a:hover{color:var(--ink)}
main{pointer-events:none;position:relative;z-index:2;height:100vh;display:grid;place-items:center;padding:2rem}
/* painel de vidro escuro no centro: campanha e login lado a lado */
.painel{pointer-events:auto;display:grid;grid-template-columns:auto minmax(21rem,26rem);gap:3.4rem;padding:2.6rem;border-radius:32px;background:rgba(22,14,36,.34);backdrop-filter:blur(30px) saturate(1.35);-webkit-backdrop-filter:blur(30px) saturate(1.35);border:1px solid rgba(255,255,255,.12);box-shadow:0 60px 120px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.painel.sem-campanha{grid-template-columns:minmax(21rem,26rem)}
/* campanha: sempre no formato vertical da arte (493x684), inteira */
.campanha{position:relative;height:min(64vh,36rem);width:calc(min(64vh,36rem) * .7207);aspect-ratio:493/684;border-radius:20px;overflow:hidden;background:#1a1226;display:block;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.campanha:active{cursor:grabbing}
.campanha img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.campanha .trilho{position:absolute;inset:0;display:flex;will-change:transform;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.campanha .slide{position:relative;flex:0 0 100%;height:100%;display:block;-webkit-user-drag:none}
.campanha .rotulo{position:absolute;left:.9rem;bottom:.9rem;z-index:2;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(17,16,20,.45);padding:.3rem .6rem;border-radius:999px;backdrop-filter:blur(6px)}
.campanha .pontos{position:absolute;right:.7rem;bottom:.7rem;z-index:3;display:flex;gap:.5rem;padding:.45rem .55rem;border-radius:999px;background:rgba(17,16,20,.35);backdrop-filter:blur(6px)}
.campanha .pontos i{position:relative;cursor:pointer;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s,transform .3s}
.campanha .pontos i::after{content:'';position:absolute;inset:-8px}
.campanha .pontos i:hover{background:rgba(255,255,255,.85)}
.campanha .pontos i.on{background:#fff;transform:scale(1.4)}
.campanha .seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;margin:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(17,16,20,.42);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:none;opacity:0;transition:opacity .2s,background .15s,transform .15s}
.campanha .seta svg{width:16px;height:16px;display:block}
.campanha .seta.ant{left:.7rem}
.campanha .seta.prox{right:.7rem}
.campanha:hover .seta,.campanha .seta:focus-visible{opacity:1}
.campanha .seta:hover{background:rgba(17,16,20,.7);transform:translateY(-50%) scale(1.06)}
@media (hover:none){.campanha .seta{opacity:1}}
/* login: "meuez" em texto (Poppins SemiBold nas cores da logo), logo oficial, "valorize seu tempo." */
.entrar{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:.4rem .4rem .4rem 0}
.entrar .meuez{font-size:3.6rem;font-weight:600;letter-spacing:-.035em;line-height:1;margin:0 0 1rem;display:flex}
.entrar .meuez .meu{color:#b995c9}
.entrar .meuez .ez{color:#ade0e0}
.entrar .logo{height:24px;width:auto;display:block;margin:0 0 1rem}
.entrar .sub{margin:0 0 2rem;font-size:1rem;font-weight:300;color:var(--ink-2)}
.entrar .sub b{font-weight:400;color:var(--ink)}
/* aviso (login de administrador) e erros do formulário */
.entrar .aviso{margin:-.8rem 0 1.4rem;font-size:.8rem;font-weight:300;color:var(--ink-2);background:rgba(255,255,255,.06);border:1px solid var(--linha);border-radius:10px;padding:.6rem .9rem}
.entrar .aviso a{color:#c9a0f0}
.errorlist{list-style:none;margin:0 0 .8rem;padding:0;font-size:.8rem;font-weight:400;color:#ffb3c1;text-align:left}
.campo .errorlist{margin:.35rem 0 0}
form{width:100%}
.campo{margin-bottom:.7rem;position:relative}
input{width:100%;font:inherit;font-weight:300;font-size:.95rem;padding:.9rem 1.1rem;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.12);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#c4bfcf}
input:hover{border-color:rgba(255,255,255,.42)}
input:focus{border-color:#c9a0f0;box-shadow:0 0 0 3px rgba(201,160,240,.15)}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #2a1f3d inset}
.campo.senha input{padding-right:3rem}
.campo .olho{position:absolute;right:.6rem;top:.55rem;width:2rem;height:2rem;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;box-shadow:none}
.campo .olho:hover{color:var(--ink);background:rgba(255,255,255,.08);transform:none}
.campo .olho svg{width:18px;height:18px}
.campo .olho .fechado{display:none}
.campo .olho.mostrando .aberto{display:none}
.campo .olho.mostrando .fechado{display:block}
button{width:100%;font:inherit;font-weight:500;font-size:.95rem;padding:.95rem;border:0;border-radius:10px;color:#fff;background:var(--roxo);cursor:pointer;margin-top:.3rem;transition:background .15s,transform .12s;box-shadow:0 12px 30px -10px rgba(138,31,196,.7)}
button:hover{background:#9d33d8;transform:translateY(-1px)}
button:disabled{opacity:.7;cursor:progress;transform:none}
.links{display:flex;justify-content:space-between;margin-top:1rem;font-size:.82rem;font-weight:300;width:100%}
.links a{color:#d9d4e3;text-decoration:underline;text-decoration-color:rgba(217,212,227,.4);text-underline-offset:3px}
.links a:hover{color:#fff;text-decoration-color:#fff}
.links a.destaque{color:#c9a0f0;font-weight:400;text-decoration:none}
.rodape{position:fixed;left:0;right:0;bottom:1.3rem;z-index:3;display:flex;justify-content:space-between;padding:0 2.4rem;font-size:.72rem;color:var(--ink-3);font-weight:300;pointer-events:none}
/* celular: página rola, painel em coluna com o login em cima, campanha inteira no mesmo formato vertical */
@media (max-width:900px){
  body{overflow:auto}
  .topo{position:absolute;padding:1.1rem 1.2rem}
  .topo nav{gap:1.1rem;font-size:.78rem}
  main{height:auto;min-height:100vh;min-height:100dvh;align-items:start;padding:3.6rem .9rem 1.4rem}
  .painel,.painel.sem-campanha{grid-template-columns:1fr;gap:1.3rem;padding:1.1rem 1.1rem 1.4rem;width:min(100%,26rem);border-radius:24px;background:rgba(22,14,36,.2)}
  .campanha{height:min(52vh,30rem);height:min(52dvh,30rem);width:calc(min(52vh,30rem) * .7207);width:calc(min(52dvh,30rem) * .7207);aspect-ratio:493/684;margin:0 auto;border-radius:16px}
  .campanha .seta{width:34px;height:34px;opacity:.85}
  .entrar{padding:.4rem 0 .2rem;order:-1}
  .entrar .meuez{font-size:2.8rem;margin-bottom:.7rem}
  .entrar .logo{height:18px;margin-bottom:.7rem}
  .entrar .sub{font-size:.9rem;margin-bottom:1.3rem}
  input{font-size:16px;padding:.8rem 1rem}
  button{font-size:.95rem;padding:.85rem}
  .links{margin-top:.8rem}
  .rodape{display:none}
}
@media (prefers-reduced-motion:reduce){.campanha .trilho{transition:none}}
/* navegador sem backdrop-filter (ou aura parada em máquina fraca): painel mais opaco, sem blur pra recalcular */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.painel{background:rgba(22,14,36,.88)}}
html[data-aura="parada"] .painel{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,14,36,.8)}