/* Tela de entrada da eixo (site e CRM): formulário à esquerda, novidades à direita.

   Duas aparências, escolhidas por classe no <body>:
     lg-claro   fundo branco (o site)
     lg-escuro  fundo preto (o CRM)
   O desenho vem do redesign de login; as classes aqui são as mesmas nas duas telas. */

.lg{
  --lg-bg:#fff; --lg-tx:#0b1f1c; --lg-tx2:rgba(11,31,28,.64); --lg-tx3:rgba(11,31,28,.5);
  --lg-linha:rgba(11,31,28,.12); --lg-linha2:rgba(11,31,28,.26); --lg-campo:#f5f8f7;
  --lg-ac:#24c9b0; --lg-ac2:#3fd8c0; --lg-acf:#0f8a79; --lg-sobre:#04251f;
  --lg-erro:#d92d3a; --lg-aviso:#a86400; --lg-cartao:rgba(11,31,28,.03); --lg-cartao-b:rgba(11,31,28,.09);
  --lg-chip:rgba(255,255,255,.7);
}
.lg.escuro{
  --lg-bg:#07090a; --lg-tx:#fff; --lg-tx2:rgba(255,255,255,.64); --lg-tx3:rgba(255,255,255,.5);
  --lg-linha:rgba(255,255,255,.12); --lg-linha2:rgba(255,255,255,.26); --lg-campo:#0f1415;
  --lg-ac:#2fd6bd; --lg-ac2:#5fe6d1; --lg-acf:#2fd6bd; --lg-sobre:#04120f;
  --lg-erro:#ff8f8f; --lg-aviso:#ffc66b; --lg-cartao:rgba(255,255,255,.025); --lg-cartao-b:rgba(255,255,255,.09);
  --lg-chip:rgba(255,255,255,.04);
}

html:has(.lg){background:#fff}
html:has(.lg.escuro){background:#07090a}
body.lg-pagina{zoom:1!important;margin:0;font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
.lg *,.lg *::before,.lg *::after{box-sizing:border-box}
.lg{min-height:100vh;display:flex;background:var(--lg-bg);color:var(--lg-tx);font-family:'Outfit',system-ui,sans-serif;line-height:1.5}
.lg a{color:var(--lg-acf);text-decoration:none}
.lg a:hover{color:var(--lg-tx)}
.lg h1,.lg h2{font-family:'Outfit',system-ui,sans-serif}
.lg ::placeholder{color:var(--lg-tx3);opacity:1}

/* ---- esquerda ---- */
.lg-esq{flex:1 1 0;min-width:480px;max-width:660px;min-height:100vh;display:flex;flex-direction:column;background:var(--lg-bg);position:relative;overflow:hidden}
.lg-fundo{position:absolute;inset:0;pointer-events:none}
.lg-fundo .brilho{position:absolute;inset:0;background:radial-gradient(60% 45% at 0% 0%,rgba(36,201,176,.16),transparent 70%),radial-gradient(70% 40% at 100% 100%,rgba(36,201,176,.12),transparent 70%)}
.lg.escuro .lg-fundo .brilho{background:radial-gradient(60% 45% at 0% 0%,rgba(47,214,189,.12),transparent 70%),radial-gradient(70% 40% at 100% 100%,rgba(47,214,189,.08),transparent 70%)}
.lg-fundo .grade{position:absolute;inset:0;background-image:linear-gradient(var(--lg-grade,rgba(11,31,28,.045)) 1px,transparent 1px),linear-gradient(90deg,var(--lg-grade,rgba(11,31,28,.045)) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(80% 60% at 20% 20%,#000,transparent);mask-image:radial-gradient(80% 60% at 20% 20%,#000,transparent)}
.lg.escuro .lg-fundo .grade{--lg-grade:rgba(255,255,255,.04)}
.lg-fundo svg{position:absolute;left:-120px;bottom:-140px;width:420px;height:420px}
.lg-topo{position:relative;display:flex;align-items:center;justify-content:space-between;padding:32px 56px 0}
.lg-marca{display:flex;align-items:center;gap:14px}
.lg-marca img:first-child{height:36px;display:block}
.lg-marca img:last-child{height:22px;display:block}
.lg-nav{display:flex;gap:10px;font-size:13.5px;font-weight:500;white-space:nowrap}
.lg-nav a{color:var(--lg-tx2);display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--lg-linha);border-radius:999px;background:var(--lg-chip);transition:color .15s,border-color .15s}
.lg-nav a:hover{color:var(--lg-tx);border-color:var(--lg-linha2)}
.lg-meio{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 56px}
.lg-miolo{width:100%;max-width:400px;margin:0 auto 0 0;position:relative}
.lg-rodape{position:relative;padding:0 56px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:13px;color:var(--lg-tx3)}
.lg-rodape span:first-child{display:flex;align-items:center;gap:8px}
.lg-rodape .links{display:flex;gap:20px}
.lg-rodape a{color:var(--lg-tx3)}
.lg-rodape a:hover{color:var(--lg-tx)}

/* ---- formulário ---- */
.lg-etiqueta{font:500 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--lg-acf);margin-bottom:18px;text-transform:uppercase}
.lg h1,.lg .lg-titulo{display:block;margin:0 0 12px;font-weight:600;font-size:42px;line-height:1.06;letter-spacing:-1.5px;text-wrap:balance;color:var(--lg-tx)}
.lg h1 em,.lg .lg-titulo em{font-style:normal;color:var(--lg-ac)}
.lg-sub{margin:0 0 30px;font-size:16px;line-height:1.5;color:var(--lg-tx2);text-wrap:pretty}
.lg-rot{display:block;font-size:13.5px;font-weight:500;margin-bottom:8px;color:var(--lg-tx);opacity:.86}
.lg-campo{position:relative;margin-bottom:0}
.lg-campo>svg{position:absolute;left:16px;top:17px;pointer-events:none;stroke:var(--lg-tx3)}
.lg-campo input{width:100%;height:52px;padding:0 16px 0 46px;background:var(--lg-campo);border:1.5px solid var(--lg-linha);border-radius:12px;color:var(--lg-tx);font:400 16px 'Outfit',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.lg-campo input:hover{border-color:var(--lg-linha2)}
.lg-campo input:focus{border-color:var(--lg-acf);box-shadow:0 0 0 4px rgba(36,201,176,.16)}
.lg-campo.erro input{border-color:var(--lg-erro)}
.lg-campo.senha input{padding-right:86px}
.lg-olho{position:absolute;right:8px;top:8px;height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--lg-tx2);font:500 13px 'Outfit',sans-serif;cursor:pointer}
.lg-olho:hover{color:var(--lg-tx);background:var(--lg-cartao-b)}
.lg-erro{margin-top:10px;font-size:13.5px;color:var(--lg-erro);display:flex;gap:8px;align-items:center}
.lg-erro::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.lg-erro[hidden],.lg-caps[hidden],.lg-aviso[hidden]{display:none}
.lg-caps{margin-top:10px;font-size:13.5px;color:var(--lg-aviso)}
.lg-aviso{margin:0 0 18px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;background:rgba(209,58,44,.08);border:1px solid rgba(209,58,44,.4);color:var(--lg-tx)}
.lg-aviso.ok{background:rgba(36,201,176,.1);border-color:rgba(36,201,176,.4)}
.lg-aviso.info{background:var(--lg-cartao);border-color:var(--lg-cartao-b)}
.lg-btn{margin-top:20px;width:100%;height:54px;border:0;border-radius:12px;background:var(--lg-ac);color:var(--lg-sobre);-webkit-text-fill-color:var(--lg-sobre);font:600 16px 'Outfit',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,background .15s,opacity .15s}
.lg-btn:hover:not(:disabled){background:var(--lg-ac2)}
.lg-btn:active:not(:disabled){transform:scale(.985)}
.lg-btn:disabled{opacity:.7;cursor:progress}
.lg-btn.vazio{background:transparent;color:var(--lg-tx);-webkit-text-fill-color:var(--lg-tx);border:1.5px solid var(--lg-linha);font-weight:500;font-size:15px;height:50px;margin-top:12px}
.lg-btn.vazio:hover:not(:disabled){background:var(--lg-cartao-b)}
.lg-giro{width:18px;height:18px;border:2.5px solid rgba(4,37,31,.3);border-top-color:var(--lg-sobre);border-radius:50%;animation:lgspin .7s linear infinite}
.lg-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:14px}
.lg-linha a,.lg-linha button.link{font-weight:500;color:var(--lg-acf);background:none;border:0;padding:0;font:500 14px 'Outfit',sans-serif;cursor:pointer;text-decoration:none}
.lg-linha a:hover,.lg-linha button.link:hover{color:var(--lg-tx)}
.lg-quem{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border:1px solid var(--lg-linha);border-radius:999px;margin-bottom:26px;max-width:100%}
.lg-quem .ini{width:22px;height:22px;border-radius:50%;background:rgba(36,201,176,.18);color:var(--lg-acf);font:600 12px 'Outfit',sans-serif;display:flex;align-items:center;justify-content:center;flex:none}
.lg-quem .mail{font-size:14px;color:var(--lg-tx);opacity:.86;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-quem button{flex:none;border:0;background:var(--lg-cartao-b);color:var(--lg-tx);font:500 12.5px 'Outfit',sans-serif;padding:5px 11px;border-radius:999px;cursor:pointer}
.lg-quem button:hover{background:var(--lg-linha)}
.lg-convite{margin-top:32px;padding:18px 20px;border:1px solid var(--lg-cartao-b);border-radius:14px;background:var(--lg-cartao);display:flex;align-items:center;justify-content:space-between;gap:16px}
.lg-convite div{font-size:14px;line-height:1.4;color:var(--lg-tx2)}
.lg-convite strong{font-weight:500;color:var(--lg-tx)}
.lg-convite a{flex:none;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;height:38px;padding:0 16px;border-radius:999px;background:var(--lg-ac);color:var(--lg-sobre)}
.lg-convite a:hover{background:var(--lg-ac2);color:var(--lg-sobre)}
.lg-recado{margin-top:14px;font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:10px;border:1px solid var(--lg-cartao-b);background:var(--lg-cartao)}
.lg-recado[hidden]{display:none}
.lg-recado.bom{border-color:rgba(36,201,176,.5);background:rgba(36,201,176,.08)}
.lg-recado.ruim{border-color:rgba(217,45,58,.45);background:rgba(217,45,58,.07)}
.lg-selo{width:56px;height:56px;border-radius:16px;background:rgba(36,201,176,.14);color:var(--lg-acf);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.lg-passo{animation:lgfade .55s cubic-bezier(.2,.7,.2,1) both}
.lg-passo[hidden]{display:none}
.lg-form[data-passo="email"] .so-senha,.lg-form[data-passo="senha"] .so-email{display:none}
.lg-shake{animation:lgshake .4s}
.lg-codigo input{padding-left:16px;letter-spacing:.18em;font-size:20px;text-align:center}

/* ---- direita: novidades ---- */
.lg-dir{flex:1 1 0;min-width:340px;padding:16px 16px 16px 0;display:flex}
.lg-painel{position:relative;flex:1;border-radius:28px;overflow:hidden;background:#000;color:#fff;border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:space-between;padding:44px 52px 40px}
.lg-foto{position:absolute;inset:0;background-color:#000;background-repeat:no-repeat;background-size:cover;opacity:0;transition:opacity .9s ease}
.lg-foto.on{opacity:1}
.lg-foto.a{background-image:url(foto-1.jpg);background-position:30% 30%;transform:scaleX(-1)}
.lg-foto.b{background-image:url(foto-2.jpg);background-position:66% 30%}
.lg-foto.c{background-image:url(foto-3.jpg);background-position:22% 36%;transform:scaleX(-1)}
.lg-veu{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,0) 68%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%)}
.lg-pt{position:relative;display:flex;align-items:center;justify-content:space-between;font:500 11.5px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;color:#fff}
.lg-pb{position:relative}
.lg-slide{display:none}
.lg-slide.on{display:block;animation:lgfade .55s cubic-bezier(.2,.7,.2,1) both}
.lg-slide h2{margin:0 0 14px;font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1.06;letter-spacing:-1.4px;max-width:560px;text-wrap:balance;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.lg-slide p{margin:0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.5);max-width:480px;text-wrap:pretty}
.lg-slide p.mb{margin-bottom:24px}
.lg-pilares{display:flex;flex-wrap:wrap;gap:10px;max-width:440px;margin-bottom:36px}
.lg-pilares span{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);font-size:14.5px;font-weight:500;color:#fff}
.lg-slide a.cta{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;background:#fff;color:#07090a;font-weight:600;font-size:15.5px}
.lg-slide a.cta:hover{background:#3fd8c0;color:#07090a}
.lg-ctrl{display:flex;align-items:center;gap:14px;margin-top:40px}
.lg-ctrl>button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.lg-ctrl>button:hover{background:rgba(255,255,255,.1)}
.lg-barras{display:flex;gap:8px;flex:1;max-width:260px}
.lg-barras button{flex:1;height:18px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center}
.lg-barras .trilho{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.lg-barras .trilho i{display:block;height:100%;background:#fff;width:0}

/* ---- entrada no sistema ---- */
.lg-intro{position:fixed;inset:0;z-index:100;background:var(--lg-bg);display:flex;align-items:center;justify-content:center;animation:lgin .25s ease backwards;transition:opacity .5s ease}
.lg-intro[hidden]{display:none}
.lg-intro.some{opacity:0}
.lg-intro .halo{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(36,201,176,.25),transparent 65%)}
.lg-intro img{position:relative;width:min(220px,40vw);display:block;animation:lglogo 1.4s cubic-bezier(.2,.7,.2,1) both}

@keyframes lgshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes lgspin{to{transform:rotate(360deg)}}
@keyframes lgfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lgin{from{opacity:0}to{opacity:1}}
@keyframes lglogo{0%{opacity:0;transform:scale(.9)}35%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1.04)}}

@media (max-width:1100px){.lg-topo,.lg-meio,.lg-rodape{padding-left:40px;padding-right:40px}.lg-painel{padding:32px 30px 28px}}
@media (max-width:860px){.lg-dir{display:none}.lg-esq{max-width:none}}
@media (max-width:520px){.lg-esq{min-width:0}.lg-topo,.lg-meio,.lg-rodape{padding-left:22px;padding-right:22px}.lg h1,.lg .lg-titulo{font-size:34px}.lg-nav a:nth-child(2){display:none}.lg-convite{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.lg *,.lg *::before,.lg *::after{animation:none!important;transition:none!important}}