@font-face{font-family:'Inter';font-weight:400;font-style:normal;src:url('../fonts/Inter-Regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;src:url('../fonts/Inter-Medium.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;src:url('../fonts/Inter-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;src:url('../fonts/Inter-Bold.woff2') format('woff2');}
:root{
  --navy:#021428;
  --cyan:#00A9B4;
  --cyan-dark:#008b95;
  --text:#1c2b3a;
  --muted:#6b7a8c;
  --line:#dde3ea;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:url('../img/bg-login.jpg') center/cover no-repeat fixed #03182f;
  position:relative;
}
/* leve escurecida na foto para o card saltar */
body::before{
  content:"";position:fixed;inset:0;
  background:rgba(2,20,40,.25);
}
.card{
  position:relative;z-index:1;
  background:#fff;
  width:100%;max-width:420px;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(2,20,40,.35);
  padding:40px 38px 30px;
}
.form-logo{width:280px;max-width:100%;margin:0 auto 30px}
.form-logo img{width:100%;display:block}
h1{font-size:24px;font-weight:700;color:#111827;margin-bottom:8px;text-align:center}
.sub{font-size:14px;color:#4b5563;margin-bottom:28px;text-align:center}
.field{margin-bottom:20px}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.field label{font-size:14px;font-weight:500;color:#374151}
.link{font-size:13.5px;color:var(--cyan-dark);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}
.field input{
  width:100%;padding:12px 16px;
  border:1px solid #d1d5db;border-radius:8px;
  font-family:inherit;font-size:14px;color:#111827;
  background:#fff;outline:none;box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s, box-shadow .15s;
}
.field input:hover{border-color:#b8c2cd}
.field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,169,180,.13)}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:46px}
.eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:6px;color:#8b97a5;
}
.eye:hover{color:#374151;background:#f3f4f6}
.cf-turnstile{margin-bottom:18px;display:flex;justify-content:center}
.err{min-height:20px;font-size:13px;color:#d64545;margin:-4px 0 8px;visibility:hidden;text-align:center}
.err.show{visibility:visible}
.btn{
  width:100%;padding:12px;
  background:var(--cyan);color:#fff;
  border:none;border-radius:8px;
  font-family:inherit;font-size:14px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05);
  cursor:pointer;transition:background .15s;
}
.btn:hover{background:var(--cyan-dark)}
.btn:disabled{background:#7ccbd1;cursor:default}
.spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;display:inline-block;vertical-align:-3px;margin-right:8px;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.foot{
  margin-top:24px;text-align:center;
  font-size:10.5px;font-weight:600;letter-spacing:1.6px;color:#b6c0cb;
}
@media (max-width:480px){
  .card{padding:32px 24px 24px}
  .form-logo{width:230px}
}