/* Login da Área do Aluno. O arquivo logo.png já tem transparência. */
.login-page {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
  min-height: 100dvh;
  background: #f6f6f0;
}
.login-art {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(32px, 4.4vw, 76px) clamp(38px, 6vw, 110px) 36px;
  color: #fff;
  background: linear-gradient(145deg, #0c3228 0%, #103e31 58%, #164c38 100%);
}
.login-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 91% 44%, #63ae7b13 0 20%, transparent 48%),
              linear-gradient(120deg, transparent 0 58%, #ffffff05 58% 58.2%, transparent 58.2% 100%);
  pointer-events: none;
}
.login-art::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 43vw;
  height: 43vw;
  min-width: 520px;
  min-height: 520px;
  right: -36%;
  bottom: -50%;
  transform: rotate(-28deg);
  border: 1px solid #b4dbb61c;
  border-radius: 50%;
  box-shadow: 0 0 0 80px #c4e6bc08, 0 0 0 175px #c4e6bc06;
  pointer-events: none;
}
.login-hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  position: relative;
  z-index: 1;
}
.login-wordmark {
  display: inline-block;
  position: relative;
  font: 800 23px/1 'Outfit', sans-serif;
  letter-spacing: .18em;
  color: #f4f8ef;
}
.login-wordmark-road {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 8px;
  border-radius: 10px;
  background: repeating-linear-gradient(to right, #ecc66a 0 16px, transparent 16px 24px);
}
.login-hero-top > span:last-child {
  color: #a4c5af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}
.login-statement {
  position: relative;
  z-index: 1;
  width: min(100%, 650px);
  max-width: none;
  margin: auto 0;
  padding: 64px 0 72px;
}
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c5ddc6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}
.login-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #edc969;
  box-shadow: 0 0 0 5px #edc96918;
}
.login-statement h1 {
  font-size: clamp(53px, 4.7vw, 78px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.055em;
  margin: 22px 0 24px;
}
.login-statement h1 em {
  font-style: normal;
  color: #edc969;
}
.login-statement p {
  max-width: 490px;
  color: #c9ddd0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  margin: 0;
}
.login-route {
  position: relative;
  width: min(100%, 455px);
  display: flex;
  justify-content: space-between;
  margin-top: 49px;
}
.login-route::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(to right, #d6ba76 0 15px, transparent 15px 25px);
  opacity: .8;
}
.login-route span {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid #edc969;
  border-radius: 50%;
  background: #103e31;
}
.login-route span:first-child {background: #edc969;box-shadow: 0 0 0 6px #edc9691d}
.login-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
  border-top: 1px solid #ffffff2a;
  padding: 24px 0 25px;
}
.login-highlights div {display: grid;align-content: start;gap: 4px}
.login-highlights div > span {color: #edc969;font-size: 11px;font-weight: 800;letter-spacing: .06em}
.login-highlights strong {font: 600 17px/1.2 'Outfit', sans-serif;color: #f5f9f3}
.login-highlights small {color: #a8c8b1;font-size: 11px;line-height: 1.35}
.login-art-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
  color: #90b49d;
  font-size: 11px;
}
.login-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 50px clamp(35px, 6vw, 108px);
  background: radial-gradient(circle at 87% 12%, #dfebda88, transparent 38%), #f6f6f0;
}
.login-form-inner {width: min(100%, 455px)}
.login-form-wrap .login-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  position: static;
  width: auto;
  margin: 0 0 clamp(31px, 5vh, 55px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-form-wrap .login-brand img {
  width: 222px;
  height: 74px;
  object-fit: contain;
  object-position: left;
}
.login-form-wrap .login-brand span {
  color: #59856d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
  margin-left: 2px;
}
.login-form-wrap .login-form {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-form .welcome {
  display: inline-block;
  color: #438566;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  margin-bottom: 10px;
}
.login-form h2 {
  color: #173c2c;
  font-size: clamp(34px, 2.75vw, 43px);
  letter-spacing: -.045em;
  line-height: 1.12;
  margin: 0 0 11px;
}
.login-form > p {color: #667b6e;font-size: 15px;margin: 0 0 32px}
.login-form label:not(.remember) {color: #28543b;font-weight: 700;font-size: 13px}
.login-form input:not([type=checkbox]) {
  min-height: 56px;
  background: #fff;
  border: 1px solid #ccdcd0;
  border-radius: 12px;
  color: #173c2c;
  font-size: 15px;
  box-shadow: 0 2px 8px #133f2810;
}
.login-form input:not([type=checkbox]):focus {border-color: #3b9564;box-shadow: 0 0 0 4px #4194671b}
.login-form .pin-wrap {position: relative}
.login-form .pin-wrap button {color: #286f4e;font-size: 12px;font-weight: 800}
.login-form .remember {color: #71867a;font-size: 12px;margin: 19px 0 21px}
.login-form .login-submit {
  width: 100%;
  min-height: 55px;
  border-radius: 12px;
  background: #145a3e;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 24px #1b5a371c;
}
.login-form .login-submit:not(:disabled):hover {background: #0f482f}
.login-form .login-submit:disabled {opacity: 1;background: #9bb7a4;color: white;box-shadow: none}
.login-demo-note {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 75px;
  margin-top: 25px;
  padding: 12px 13px;
  border: 1px solid #d8e8d4;
  border-radius: 13px;
  background: #ebf2e8;
}
.login-demo-icon {display: grid;place-items: center;width: 36px;height: 36px;border-radius: 9px;background: #dcebdd;color: #216447;flex: none}
.login-demo-note > span:nth-child(2) {min-width: 0;flex: 1;display: grid;gap: 2px}
.login-demo-note strong {font-size: 12px;color: #28533c}
.login-demo-note small {font-size: 11px;color: #637b6a;line-height: 1.35}
.login-demo-note a {display: inline-flex;align-items: center;gap: 4px;color: #1b6747;font-size: 11px;font-weight: 800;white-space: nowrap;text-decoration: none}
.login-demo-note a:hover,.login-support a:hover {text-decoration: underline}
.login-form .demo-access {margin-top: 18px}
.login-form .login-support {border-top: 1px solid #dce5dc;padding-top: 20px;margin-top: 25px;color: #849588;font-size: 12px}
.login-form .login-support a {color: #266a4a;font-weight: 700;text-decoration: none}
.login-form .alert.error {margin-bottom: 20px}
@media(max-width: 1180px) {
  .login-page {grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr)}
  .login-art {padding-left: 48px;padding-right: 48px}
  .login-highlights {gap: 12px}
  .login-statement h1 {font-size: clamp(51px, 5.1vw, 69px)}
  .login-form-wrap {padding-left: 45px;padding-right: 45px}
}
@media(max-width: 850px) {
  .login-page {display: block}
  .login-art {min-height: 345px;padding: 25px 28px 30px}
  .login-art::after {right: -390px;bottom: -550px}
  .login-statement {padding: 38px 0 0;margin: 0}
  .login-statement h1 {font-size: clamp(43px, 7vw, 56px);margin: 14px 0 13px}
  .login-statement p {font-size: 14px;line-height: 1.55}
  .login-route,.login-highlights,.login-art-footer {display: none}
  .login-form-wrap {padding: 32px 28px 45px}
  .login-form-inner {width: min(100%, 560px)}
  .login-form-wrap .login-brand {margin-bottom: 24px}
  .login-form-wrap .login-brand img {width: 180px;height: 60px}
  .login-form h2 {font-size: 34px}
}
@media(max-width: 490px) {
  .login-art {min-height: 318px;padding: 23px 21px 26px}
  .login-wordmark {font-size: 20px}
  .login-hero-top > span:last-child {font-size: 9px}
  .login-statement {padding-top: 32px}
  .login-statement h1 {font-size: clamp(40px, 10.5vw, 49px)}
  .login-statement p {font-size: 13px;max-width: 350px}
  .login-form-wrap {padding: 30px 21px 44px}
  .login-form-wrap .login-brand img {width: 165px;height: 55px}
  .login-form h2 {font-size: 32px}
  .login-form > p {margin-bottom: 25px}
  .login-demo-note {align-items: flex-start;flex-wrap: wrap}
  .login-demo-note a {margin-left: 47px}
}
@media(prefers-reduced-motion:reduce) {
  .login-form .btn,.login-demo-note a {transition: none}
}

.login-code-hint{display:block;margin:3px 0 0;color:#64796a;font-size:12px;line-height:1.45}