:root{
  --bg:#f2f4f8;
  --card:#ffffff;
  --text:#2e2e2e;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2f6bff;
  --primary-2:#1f56ff;
  --shadow: 0 18px 40px rgba(0,0,0,.12);
  --radius: 22px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.wrap{
  width:min(560px, 100%);
  text-align:center;
}

.brand{
  font-size:3.25rem;
  font-weight:800;
  letter-spacing:-0.06rem;
  margin:0.625rem 0 1.125rem;
  text-decoration: none;
  color: #293762;
}
.brand span{ color:var(--primary); }

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.125rem 2rem 1.75rem;
}

.title{
  margin:0 0 1.25rem;
  color:var(--muted);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.05rem;
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  margin:1.125rem 0 1.375rem;
}

.field{
  display:flex;
  align-items:center;
  gap:0.75rem;
  border:1px solid var(--border);
  border-radius:0.875rem;
  padding:0.875rem 0.875rem;
  background:#fbfcff;
  margin:0.75rem 0;
  transition:.15s;
}
.field:focus-within{
  border-color:rgba(47,107,255,.55);
  box-shadow:0 0 0 4px rgba(47,107,255,.12);
  background:#ffffff;
}

.icon{
  width:1.375rem;
  height:1.375rem;
  color:#9aa3b2;
  flex:0 0 1.375rem;
}

.field input, .field select{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:1.1rem;
  color:var(--text);
}
.field input::placeholder { color:#9aa3b2; font-size:1.1rem; }
.field select:invalid {
  color: #9aa3b2;
}
.field select option[value=""] {
  color: #9aa3b2;
}

.toggle{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0.375rem;
  border-radius:0.625rem;
  color:#9aa3b2;
  transition:.15s;
}
.toggle:hover{ background:rgba(0,0,0,.04); color:#6b7280; }

.btn{
  width:100%;
  margin-top:1rem;
  border:0;
  border-radius:0.875rem;
  padding:0.875rem 1rem;
  font-weight:700;
  font-size:1.125rem;
  cursor:pointer;
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow: 0 0.875rem 1.75rem rgba(47,107,255,.25);
  transition:.18s;
}
.btn:hover{ transform:translateY(-0.06rem); filter:saturate(1.05); }
.btn:active{ transform:translateY(0px); }

.foot{
  margin-top:2rem;
  color:var(--muted);
  font-size:1rem;
}
.foot a{
  color:var(--primary);
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
}
.foot a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .brand{ font-size:2.2rem; }
  .title{ font-size:.8rem; }
  .card{ padding:1.2rem 0.7rem 1rem; }
  .field input, .field input::placeholder { font-size:1rem; }
  .btn, .foot, .foot a { font-size:0.98rem; }
}

.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.overlay.active{
  display:flex;
}
.popup-response {
  background:var(--card);
  border-radius: 1rem;
  padding: 1rem 1rem;
  width:90%;
  max-width:500px;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  box-shadow:0 12px 32px rgba(37,99,235,.24);
}
.popup-response h2 {
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  margin-bottom: 1rem;
}
.popup-response p {
  font-size:1rem;
  color:var(--text);
  margin-bottom: 2rem;
}
.popup-response a {
  width:100%;
  text-align: center;
  border:0;
  border-radius:0.875rem;
  padding:0.875rem 1rem;
  font-weight:700;
  font-size:1.125rem;
  cursor:pointer;
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow: 0 0.875rem 1.75rem rgba(47,107,255,.25);
  text-decoration: none;
  transition:.18s;
}
.hiperlink-forgot-password {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--primary);
  text-decoration: none;
  text-align: right;
}
.hiperlink-forgot-password:hover {
  text-decoration: underline;
}
.hiperlink-forgot-password:active {
  color: var(--primary-2);
}
.hiperlink-forgot-password:visited {
  color: var(--primary);
}