/* Login empresarial Neto Bizerra — preto e laranja.
   A arte (1080×1920) ocupa o lado esquerdo pela largura; foto e textos se posicionam
   em "cqw" (porcentagem da largura do painel) para casar com o círculo da imagem. */
:root{--laranja:#F85A0C;--laranja2:#FF7A2E;--preto:#161616;--grafite:#3A3B3D;--texto:#F4F1EC;--suave:rgba(244,241,236,.66);
  --fonte:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--preto);color:var(--texto);font-family:var(--fonte);-webkit-font-smoothing:antialiased}
/* A arte é limitada pela altura da tela: tudo cabe sem rolar, em qualquer zoom */
.pagina{min-height:100vh;display:grid;grid-template-columns:min(54vw,106vh) minmax(0,1fr)}
@media (min-width:861px){html{font-size:min(16px,1.75vh)}}

.arte{position:relative;container-type:inline-size;min-height:100vh;overflow:hidden;
  background:url(/pub/fundo-neto.webp) top center/100% auto no-repeat,#1E1E1E}
.moldura{position:absolute;left:50%;top:22.04cqw;width:31.4cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
.foto{width:100%;height:100%;object-fit:cover;display:block}
.foto.inicial{display:flex;align-items:center;justify-content:center;background:var(--grafite);color:var(--laranja);font-size:12cqw;font-weight:800}
.foto[hidden]{display:none}
.arte-texto{position:relative;margin:43cqw 7cqw 4cqw 30cqw;display:flex;flex-direction:column;gap:1.4cqw}
.arte-nome{font-size:5cqw;font-weight:800;letter-spacing:-.035em;line-height:1}
.arte-cargo{font-size:1.9cqw;color:var(--laranja2);font-weight:700}
.arte-area{font-size:1.5cqw;color:var(--suave);margin-top:-.4cqw}
.arte-bio{display:flex;flex-direction:column;gap:1.2cqw;margin-top:1cqw}
.arte-bio p{margin:0;font-size:1.6cqw;line-height:1.6;color:rgba(244,241,236,.82)}
.arte-resumo{display:none}
.arte-texto blockquote{margin:1cqw 0 0;padding:1.4cqw 1.8cqw;border-left:.4cqw solid var(--laranja);background:rgba(255,255,255,.05);border-radius:0 1.6cqw 1.6cqw 0;font-size:2.6cqw;font-weight:800;letter-spacing:-.025em}

/* Login centralizado num cartão de vidro */
.lado-login{display:flex;align-items:center;justify-content:center;padding:3rem 2rem;
  background:radial-gradient(700px 500px at 70% 30%,rgba(248,90,12,.12),transparent 65%)}
.cartao{width:100%;max-width:440px;display:flex;flex-direction:column;gap:1.1rem;padding:2.6rem 2.4rem;border-radius:28px;
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.marca{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.marca-sup{font-size:1.35rem;font-weight:900;letter-spacing:.2em}
.marca-sub{font-size:.9rem;color:var(--laranja);font-weight:600;letter-spacing:.05em}
h1{margin:.6rem 0 .2rem;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;text-align:center}
form{display:flex;flex-direction:column;gap:1rem}
label{display:flex;flex-direction:column;gap:.45rem;font-size:.92rem;font-weight:600;color:var(--suave)}
input{font:inherit;font-size:1.05rem;color:var(--texto);background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.85rem 1rem;min-height:50px;transition:border-color .3s,box-shadow .3s}
input:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 4px rgba(248,90,12,.22)}
button{font:inherit;font-size:1.1rem;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--laranja2),var(--laranja));border:0;border-radius:999px;padding:.95rem;min-height:54px;cursor:pointer;margin-top:.4rem;box-shadow:0 12px 30px rgba(248,90,12,.3),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
button:active{transform:scale(.97)}
.erro{display:none;background:rgba(248,90,12,.15);border:1px solid rgba(248,90,12,.5);color:#FFC9AC;border-radius:12px;padding:.75rem .9rem;font-size:.95rem}
.rodape{margin:.6rem 0 0;color:rgba(244,241,236,.42);font-size:.86rem;text-align:center}

/* Celular: topo da arte com a foto, resumo curto e login embaixo */
@media (max-width:860px){
  .pagina{grid-template-columns:1fr}
  .arte{min-height:0;height:auto;aspect-ratio:auto;padding-top:44cqw}
  .moldura{top:22.04cqw}
  .arte-texto{margin:0;padding:0 1.4rem 1rem;gap:.5rem;text-align:center;align-items:center}
  .arte-nome{font-size:2rem}
  .arte-cargo{font-size:1rem}
  .arte-area{font-size:.9rem;margin:0}
  .arte-bio{display:none}
  .arte-resumo{display:block;margin:.3rem 0 0;font-size:.98rem;line-height:1.5;color:rgba(244,241,236,.8)}
  .arte-texto blockquote{font-size:1.25rem;border-left:0;border-radius:14px;background:rgba(248,90,12,.14);padding:.7rem 1rem;margin-top:.4rem}
  .lado-login{padding:.6rem 1rem 2.5rem;background:none}
  .cartao{padding:1.6rem 1.3rem;max-width:none}
}