/* =====================================================================
   As telas de ENTRADA do Vnt: login.php, entrar.php (login pelo endereço
   da empresa) e cadastro.php (criar conta). Desenho aprovado pelo Matteo
   para o login e, desde 08/09/2026, dividido entre as três — antes cada
   arquivo carregava esta folha inteira copiada dentro de um <style>, e a
   segunda cópia (entrar.php) já tinha nascido diferente da primeira.

   Estas telas NÃO carregam portal.css: são a única parte do sistema que
   alguém vê sem estar logado, e o fundo "snow grid" é o do site.
   ===================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{ font-family:'Inter', system-ui, sans-serif; overflow:hidden; }

/* Caixa alta também aqui (2026-08-11): estas telas têm CSS próprio e não
   carregam portal.css, então eram as únicas que continuavam em caixa de
   sentença. Mesma regra e mesmas exceções do resto do Portal — e-mail e
   senha ficam de fora, senão a pessoa digita a senha errada. */
body{ text-transform:uppercase; }
/* campo e botão não herdam caixa alta do body — mesma regra do
   portal.css, senão "Entrar" e "Esqueci minha senha" ficam de fora */
button, input, select, textarea{ text-transform:inherit; }
input[type="email"],
input[type="password"],
input[name*="email" i],
input[name*="senha" i]{ text-transform:none; }

.lg-tela{ display:flex; height:100vh; }

/* A faixa de fotos e as três linhas divisórias foram removidas em
   2026-08-04: a tela do login é só a parte clara, ocupando a largura toda. */

/* ---------------- fundo "snow grid" do site Vanitelli ---------------- */
.lg-direita{
  position:relative; flex:1 1 auto; min-width:0; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 5%; overflow:hidden;
}
/* as três camadas são as MESMAS do hero de vanitelli.com.br/advisory */
.lg-direita::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(130% 115% at 68% 38%, #ffffff 0px, #f6f8ff 22%, #edf1fb 42%, #e2e6f2 62%, #d7dbe8 82%, #cfd3e0 100%);
}
.lg-grid{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(15,19,37,.05), rgba(15,19,37,.02) 2px, rgba(15,19,37,0) 9px, rgba(15,19,37,.05) 30px, rgba(15,19,37,.09) 39px, rgba(15,19,37,.03) 40px);
}
.lg-vinheta{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 68% 38%, rgba(0,0,0,0) 48%, rgba(170,180,202,.28) 80%, rgba(150,161,186,.42) 100%),
    linear-gradient(to top, #edf3ff 0px, rgba(237,243,255,0) 26%);
}
/* luz suave que atravessa o fundo devagar (a "vida" do hero) */
.lg-luz{
  position:absolute; inset:-20%;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  animation:lg-varre 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lg-varre{
  0%, 12%{ transform:translateX(-55%); }
  55%, 100%{ transform:translateX(55%); }
}

/* ---------------- título + logo ---------------- */
.lg-topo{ position:relative; z-index:2; text-align:center; margin-bottom:34px; }
.lg-bemvindo{
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
  font-size:clamp(24px, 2.3vw, 34px); color:#0b1223; letter-spacing:.01em;
  margin-bottom:14px;
}
/* marca do Vnt: símbolo verde + palavra em azul do logo (#031026) */
.lg-marca{ display:flex; align-items:center; justify-content:center; gap:14px; text-transform:none; }
a.lg-marca{ text-decoration:none; color:inherit; }   /* a marca leva pro site */
.lg-marca-simbolo{ width:clamp(44px, 5.2vw, 64px); height:auto; display:block; }
.lg-marca-nome{
  font-family:'Inter', system-ui, sans-serif; font-weight:800;
  font-size:clamp(52px, 7vw, 92px); line-height:1; letter-spacing:-.045em; color:#031026;
}
/* entrar.php: o nome do CLIENTE no lugar de "Vnt" — nome de empresa é
   mais comprido que três letras, então cabe menor */
.lg-marca--cliente .lg-marca-nome{ font-size:clamp(40px, 6vw, 76px); }
/* logo de verdade do cliente (não o símbolo do Vnt): mesma proporção da
   marca no topo do sistema (portal.css .marca-topo-logo img), só maior —
   aqui é a tela toda, não uma barrinha */
.lg-marca-logo-cliente{ height:clamp(52px, 6.5vw, 84px); width:auto; max-width:min(420px, 80vw); object-fit:contain; display:block; }

/* ---------------- vidro (cartão, campos e botão) ---------------- */
.vidro{ position:relative; overflow:hidden; }
.vidro::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.18) 52%, transparent 62%);
  transform:translateX(-130%) skewX(-6deg);
  transition:transform 1.1s ease;
}
.vidro:hover::after{ transform:translateX(130%) skewX(-6deg); }

.lg-card{
  position:relative; z-index:2; width:min(560px, 100%);
  border-radius:36px; padding:44px 48px 34px;
  background:linear-gradient(168deg, rgba(255,255,255,.62), rgba(233,237,245,.34) 55%, rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:
    0 34px 70px rgba(15,20,35,.22),
    inset 0 2px 7px rgba(255,255,255,.9),
    inset 0 -10px 24px rgba(15,20,35,.07);
}

.lg-label{
  display:block; font-size:13.5px; font-weight:800; font-style:italic;
  letter-spacing:.05em; color:#0b1223; margin:0 0 8px 6px; text-transform:uppercase;
}
.lg-campo{ position:relative; margin-bottom:22px; }
.lg-input{
  width:100%; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.95);
  padding:4px 22px; font-family:inherit; font-size:14.5px; color:#0b1223;
  background:linear-gradient(180deg, #dde1e9, #f2f5fa 55%, #f8fafd);
  box-shadow:
    inset 0 4px 9px rgba(15,20,35,.22),
    inset 0 -2px 5px rgba(255,255,255,.95),
    0 1px 0 rgba(255,255,255,.8);
  outline:none; transition:box-shadow .2s ease;
}
.lg-input:focus{
  box-shadow:
    inset 0 4px 9px rgba(15,20,35,.2),
    inset 0 -2px 5px rgba(255,255,255,.95),
    0 0 0 4px rgba(132,188,37,.28);
}
.lg-olho{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  font-size:16px; color:#3c4358; border-radius:50%;
}
.lg-olho:hover{ background:rgba(15,20,35,.07); }
/* dica embaixo de um campo ("mínimo 8 caracteres") */
.lg-dica{ font-size:12px; font-weight:500; color:#3c4358; text-transform:none; margin:-12px 0 18px 6px; }

.lg-entrar{
  display:block; width:100%; height:64px; margin:32px 0 6px;
  border-radius:999px; border:1.5px solid rgba(255,255,255,.75); cursor:pointer;
  font-family:inherit; font-size:22px; font-weight:800; color:#16250a; letter-spacing:.01em;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #b9e174, #8ec737 55%, #a4d858);
  box-shadow:
    0 12px 30px rgba(132,188,37,.45),
    0 0 0 6px rgba(132,188,37,.16),
    inset 0 2px 5px rgba(255,255,255,.75),
    inset 0 -6px 12px rgba(60,110,10,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lg-entrar:hover{
  transform:translateY(-1px);
  box-shadow:
    0 16px 36px rgba(132,188,37,.55),
    0 0 0 7px rgba(132,188,37,.2),
    inset 0 2px 5px rgba(255,255,255,.75),
    inset 0 -6px 12px rgba(60,110,10,.25);
}
.lg-entrar:active{ transform:translateY(1px); }

/* links embaixo do cartão: "esqueci minha senha", "criar conta", "entrar" */
.lg-esqueci, .lg-links{ text-align:center; margin-top:20px; }
.lg-links{ display:flex; flex-direction:column; gap:10px; }
.lg-esqueci a, .lg-links a{
  font-size:14.5px; font-style:italic; font-weight:600; color:#0b1223;
  text-decoration:underline; text-underline-offset:3px;
}
.lg-esqueci a:hover, .lg-links a:hover{ color:#84bc25; }

.lg-erro, .lg-aviso{
  position:relative; z-index:2;
  border-radius:14px; padding:11px 16px; font-size:13.5px; font-weight:600;
  margin-bottom:18px; text-align:center;
}
.lg-erro{ background:rgba(180,50,47,.1); border:1px solid rgba(180,50,47,.35); color:#8f2320; }
/* aviso bom (ex.: "conta criada, entre com seu e-mail") */
.lg-aviso{ background:rgba(132,188,37,.14); border:1px solid rgba(92,149,28,.4); color:#2f5a0a; text-transform:none; }

/* ---------------- cadastro: mais campos ---------------- */
/* Quatro campos + título não cabem em 100vh numa tela baixa: aqui a
   página rola e os campos ficam mais juntos. Só o cadastro usa. */
.lg-rolavel{ overflow:auto; }
.lg-rolavel .lg-tela, .lg-rolavel .lg-direita{ height:auto; min-height:100vh; }
.lg-compacto .lg-topo{ margin-bottom:26px; }
.lg-compacto .lg-campo{ margin-bottom:16px; }
.lg-compacto .lg-entrar{ height:58px; font-size:20px; margin-top:22px; }
.lg-2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
/* campo-isca contra robô de cadastro: pessoa não vê nem preenche */
.lg-isca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------- telas menores ---------------- */
@media (max-width:920px){
  .lg-direita{ padding:26px 7%; }
  .lg-card{ padding:34px 26px 26px; }
  body{ overflow:auto; }
  /* 16px é o piso que evita o zoom automático do iOS ao focar o campo;
     o olho de mostrar senha cresce para alvo de dedo */
  .lg-input{ font-size:16px; }
  .lg-olho{ width:44px; height:44px; }
}
@media (max-width:560px){
  .lg-2col{ grid-template-columns:1fr; }
}