/* =========================================================
   ISO BPO · tela de acesso (dois lados)
   Marca à esquerda, formulário à direita — como antes, com outro desenho:
   corte diagonal entre os lados, campo fotovoltaico em perspectiva no lado
   escuro e o formulário sem moldura, respirando.
   Tudo em CSS: a malha e o brilho vestem a cor do parceiro (--verde).
   ========================================================= */

:root{
  /* o lado da marca é sempre escuro (a logo é a branca), mas o TOM vem da cor
     secundária do parceiro — quem define os dois valores é app/paleta.php */
  --ac-escuro:   var(--marca-escuro, #141B26);
  --ac-escuro-2: var(--marca-escuro-2, #0C1119);
  --ac-malha:    rgba(255,255,255,.15);
  --ac-legenda:  #93a0b5;
  --ac-fundo:    #0D0D0D;
  --ac-titulo:   #f5f5f5;
}
[data-theme="light"]{
  --ac-fundo:  #f5f5f5;
  --ac-titulo: #0D0D0D;
  --ac-legenda:#69748a;
}

.entrada{
  min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  background:var(--ac-fundo);
}

/* ------------------------------------------------------- lado da marca */
.entrada-marca{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  padding:56px clamp(36px,5vw,72px);
  color:#fff;
  background:linear-gradient(168deg,var(--ac-escuro) 0%,var(--ac-escuro-2) 70%);
  /* o corte diagonal: é ele que dá o desenho novo */
  clip-path:polygon(0 0, 100% 0, calc(100% - 92px) 100%, 0 100%);
  margin-right:-46px;
}

/* o sol raso na base, na cor da marca */
.entrada-marca::before{
  content:''; position:absolute; inset:auto -10% -22% -10%; height:62%; z-index:-2; pointer-events:none;
  background:radial-gradient(60% 100% at 42% 100%, rgba(var(--marca-rgb),.55) 0%, transparent 68%);
  background:radial-gradient(60% 100% at 42% 100%, color-mix(in srgb, var(--verde) 55%, transparent) 0%, transparent 68%);
}

/* fileiras de módulos deitando até o horizonte */
.entrada-campo{
  position:absolute; inset:52% -40% -18% -40%; z-index:-1; pointer-events:none;
  perspective:300px; perspective-origin:50% 0%;
}
.entrada-campo i{
  display:block; height:100%; transform:rotateX(76deg); transform-origin:50% 0%;
  background-image:
    repeating-linear-gradient(90deg, var(--ac-malha) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg,  var(--ac-malha) 0 1px, transparent 1px 46px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 66%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 66%,transparent 96%);
  opacity:.5;
}

.entrada-marca > *{position:relative; z-index:1}
.entrada-logo{width:min(260px,58%); height:auto; display:block}
.entrada-frase{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(1.5rem,2.5vw,2.05rem); line-height:1.22; font-weight:600;
  letter-spacing:-.02em; margin:0; max-width:16ch; text-wrap:balance;
}
.entrada-frase b{color:var(--verde); font-weight:600}
.entrada-tagline{
  margin:0; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ac-legenda);
}

/* três linhas do que o app entrega — dão peso ao lado da marca sem virar propaganda */
.entrada-itens{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.entrada-itens li{display:flex; align-items:center; gap:12px; font-size:.88rem; color:#dbe2ec}
.entrada-itens i{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  font-size:.78rem; color:var(--verde);
  background:rgba(var(--marca-rgb),.14);
  background:color-mix(in srgb, var(--verde) 16%, transparent);
}

/* ------------------------------------------------------- lado do acesso */
.entrada-acesso{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:48px clamp(24px,4vw,56px);
}
.entrada-form{width:min(370px,100%)}

.entrada-titulo{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:1.72rem; font-weight:600; letter-spacing:-.02em; color:var(--ac-titulo); margin:0 0 6px;
}
.entrada-sub{margin:0 0 30px; font-size:.9rem; color:var(--ac-legenda)}

/* a logo do topo só aparece quando o lado da marca some (mobile) */
.entrada-logo-mob{display:none; width:170px; margin:0 auto 26px}
/* São duas versões do mesmo logo — a de fundo escuro e a de fundo claro.
   Só uma pode estar em pé por vez: ligar .entrada-logo-mob em bloco sem
   escolher pelo tema deixava as duas empilhadas no celular. */

.entrada-form form{display:flex; flex-direction:column; gap:19px}
.entrada-form .field{margin:0}
.entrada-form label{
  display:block; font-size:.71rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ac-legenda); margin-bottom:8px;
}
.entrada-form .input-ic input{
  height:50px; border-radius:12px; font-size:.95rem;
  transition:border-color .16s, box-shadow .16s;
}
.entrada-form .input-ic input:focus{
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(var(--marca-rgb),.20);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--verde) 20%, transparent);
}
.entrada-entrar{
  width:100%; justify-content:center; height:50px; margin-top:6px;
  border-radius:12px; font-size:.95rem; letter-spacing:.02em;
}

.entrada-rodape{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--borda);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.78rem; color:var(--ac-legenda);
}
.entrada-rodape a{color:var(--verde); font-weight:600; text-decoration:none}
.entrada-rodape a:hover{text-decoration:underline}

.entrada-tema{
  position:fixed; top:18px; right:20px; z-index:5;
  width:40px; height:40px; border-radius:11px; cursor:pointer;
  display:grid; place-items:center; font-size:.95rem;
  color:var(--ac-titulo); background:var(--card); border:1px solid var(--borda);
}
.entrada-tema:hover{color:var(--verde); border-color:var(--verde)}
.entrada-tema:focus-visible{outline:2px solid var(--verde); outline-offset:2px}

/* ------------------------------------------------------- telas estreitas */
@media (max-width:900px){
  .entrada{grid-template-columns:1fr}
  .entrada-marca{
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
    margin:0 0 -30px; padding:38px 28px 62px; gap:22px;
  }
  .entrada-frase{font-size:1.35rem; max-width:none}
  .entrada-itens{display:none}
  .entrada-campo{inset:58% -60% -20% -60%}
  .entrada-logo{width:180px}
  .entrada-acesso{padding:34px 24px 48px}
}
@media (max-width:560px){
  .entrada-marca{display:none}
  /* a de fundo escuro e a padrão: o tema nasce escuro, e assim uma logo
     aparece mesmo que o data-theme não chegue a ser aplicado */
  .entrada-logo-mob.logo-dark{display:block}
  [data-theme="light"] .entrada-logo-mob.logo-dark {display:none}
  [data-theme="light"] .entrada-logo-mob.logo-light{display:block}
  .entrada-acesso{min-height:100dvh}
}
@media (prefers-reduced-motion:reduce){ .entrada *{animation:none!important} }