:root {
  color-scheme: light;
  --navy: #071b5e;
  --blue: #0a57e6;
  --gold: #ffc219;
  --muted: #7485b6;
  --outline: #d8e0f0;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100%; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #063b95 url('fundo.jpg') center center / cover no-repeat;
}
.scene {
  position: relative;
  width: min(100%, 1510px);
  height: min(920px, 100dvh);
  min-height: 695px;
}
.brand { position: absolute; left: 4.1%; top: 7%; width: 28.5%; z-index: 2; }
.logo { width: min(100%, 350px); height: auto; display: block; }
.overview { display: block; width: min(100%, 328px, 40vh); height: auto; margin-top: clamp(25px, 4.2vh, 50px); }
.mascot {
  position: absolute;
  left: 29.2%;
  bottom: -3%;
  height: 88.5%;
  width: auto;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.login-card {
  position: absolute;
  z-index: 3;
  left: 65.4%;
  top: 50%;
  transform: translateY(-50%);
  width: 31.6%;
  max-width: 468px;
  padding: clamp(28px, 3vw, 46px) clamp(28px, 2.85vw, 42px) 29px;
  border-radius: 23px;
  background: linear-gradient(145deg, #fff 8%, #fbfcff 80%, #f8faff 100%);
  border: 1px solid rgba(222, 230, 248, .95);
  box-shadow: 0 18px 55px rgba(0, 23, 100, .17), 0 0 1px rgba(255,255,255,.9) inset;
}
.login-card h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(23px, 2.15vw, 32px);
  line-height: 1.13;
  letter-spacing: -.055em;
  font-weight: 800;
}
.lead {
  color: var(--muted);
  font-size: clamp(13px, 1.12vw, 16px);
  line-height: 1.42;
  margin: 9px 0 31px;
}
.field-group {
  min-height: 69px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 14px;
  border: 1.5px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.field-group + .field-group { margin-top: 16px; }
.field-group:focus-within { border-color: #1178e7; box-shadow: 0 0 0 3px rgba(19, 129, 255, .14); }
.field-group.invalid { border-color: #da3347; }
.field-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  fill: none;
  stroke: #0c2b86;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.field-content { min-width: 0; flex: 1 1 auto; }
.field-content label {
  display: block;
  font-size: 13px;
  color: #081e68;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.field-content input {
  display: block;
  min-width: 0;
  width: 100%;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #0b245e;
  font-size: 15px;
  line-height: 23px;
  appearance: none;
}
.field-content input::placeholder { color: #8392b7; opacity: 1; }
.field-content input::-ms-reveal { display: none; }
.eye-button {
  flex: 0 0 28px;
  border: 0;
  background: transparent;
  color: #0c2b86;
  cursor: pointer;
  padding: 3px;
  display: grid;
  place-items: center;
}
.eye-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eye-button:focus-visible { outline: 2px solid var(--blue); border-radius: 4px; outline-offset: 2px; }
.controls { margin: 17px 0 20px; }
.remember { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #102a71; cursor: pointer; user-select: none; }
.remember input { margin: 0; width: 21px; height: 21px; accent-color: #145ef1; cursor: pointer; }
.login-button {
  width: 100%;
  min-height: 57px;
  border: 0;
  border-radius: 11px;
  color: #111;
  background: linear-gradient(180deg, #ffca1c, #ffb70d);
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.login-button:hover { filter: brightness(1.05); }
.login-button:active { transform: translateY(1px); }
.login-button:focus-visible { outline: 3px solid #107bff; outline-offset: 3px; }
.login-button svg { width: 24px; height: 24px; stroke: #111; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.security { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #17316f; line-height: 1.3; margin: 13px 0 0; }
.security svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: #092978; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.form-error { margin: -8px 0 14px; padding: 9px 11px; font-size: 13px; line-height: 1.35; color: #a11c31; background: #fff0f2; border: 1px solid #ffd1d9; border-radius: 9px; }
.form-error[hidden] { display: none; }

/* No tablet e celular, a composição usa as mesmas imagens com outra organização. */
@media (max-width: 1040px) {
  .page { display: block; overflow: auto; background-position: center center; }
  .scene {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) 16px max(38px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
  }
  .brand { position: relative; left: auto; top: auto; z-index: 3; width: 100%; display: flex; justify-content: center; }
  .logo { width: min(68vw, 305px); max-width: 100%; }
  .overview { display: none; }
  .mascot {
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    display: block;
    align-self: center;
    width: min(67vw, 295px);
    height: auto;
    object-fit: contain;
    margin-top: 11px;
    margin-bottom: calc(95px - 78vw);
    pointer-events: none;
  }
  .login-card {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
    width: min(100%, 455px);
    max-width: 455px;
    padding: 25px 22px 22px;
    border-radius: 19px;
  }
  .login-card h1 { font-size: clamp(23px, 6.3vw, 31px); text-align: center; letter-spacing: -.035em; }
  .lead { text-align: center; font-size: 14px; margin: 8px 0 23px; }
  .field-group { min-height: 62px; gap: 12px; }
  .field-group + .field-group { margin-top: 13px; }
  .field-content input { font-size: 14px; }
  .field-content label { font-size: 12px; }
  .controls { margin: 16px 0 18px; }
  .login-button { min-height: 54px; font-size: 19px; }
  .security { justify-content: center; font-size: 10px; }
}
@media (min-width: 700px) and (max-width: 1040px) {
  .scene { padding-top: 26px; }
  .logo { width: 290px; }
  .mascot { width: 355px; margin-bottom: -185px; }
  .login-card { padding: 29px 29px 27px; }
}

@media (max-width: 699px) {
  .scene { padding-bottom: 4px; }
  .mascot {
    width: min(58vw, 248px);
    margin-top: 14px;
    margin-bottom: -164px;
  }
  .login-card {
    margin-top: -4px;
  }
}

@media (max-width: 390px) {
  .scene { padding-inline: 14px; padding-top: 18px; }
  .logo { width: min(72vw, 265px); }
  .mascot { width: 58vw; margin-top: 12px; margin-bottom: -150px; }
  .login-card { padding: 23px 18px 21px; margin-top: -2px; }
  .field-group { gap: 9px; padding: 7px 10px; }
  .field-icon { flex-basis: 22px; width: 22px; height: 22px; }
  .field-content input { font-size: 12.5px; }
  .eye-button { flex-basis: 23px; padding: 0; }
  .eye-button svg { width: 22px; height: 22px; }
  .security { font-size: 9.7px; }
}
@media (min-width: 1041px) and (max-height: 760px) {
  .scene { min-height: 630px; }
  .brand { top: 5.3%; }
  .overview { width: min(100%, 275px); margin-top: 23px; }
  .mascot { height: 92%; bottom: -4%; }
  .login-card { padding-top: 25px; padding-bottom: 23px; }
  .lead { margin-bottom: 20px; }
  .field-group { min-height: 58px; }
  .controls { margin: 12px 0 14px; }
  .login-button { min-height: 49px; }
}
@media (prefers-reduced-motion: reduce) {
  .field-group, .login-button { transition: none; }
}

/* Ajuste 3: formulário compacto em telas pequenas, sem rolagem da página. */
@media (max-width: 699px) {
  html, body { height: 100%; overflow: hidden; }
  .page { height: 100dvh; overflow: hidden; }
  .scene { height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0; }
  .login-card { padding-top: 17px; padding-bottom: 13px; }
  .login-card h1 { font-size: clamp(22px, 5.7vw, 28px); }
  .lead { margin: 5px 0 13px; font-size: 12px; }
  .field-group { min-height: 53px; }
  .field-group + .field-group { margin-top: 9px; }
  .controls { margin: 10px 0 11px; }
  .login-button { min-height: 45px; font-size: 17px; }
  .security { margin-top: 9px; }
}
@media (max-width: 699px) and (max-height: 690px) {
  .scene { padding-top: 8px; }
  .logo { max-height: 62px; width: auto; }
  .mascot { width: min(49vw, 195px); margin-top: 5px; margin-bottom: -128px; }
  .login-card { padding-top: 12px; padding-bottom: 10px; }
  .lead { margin-bottom: 9px; }
  .field-group { min-height: 48px; }
  .controls { margin: 7px 0; }
  .login-button { min-height: 41px; }
}