@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-pro-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-pro-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans Pro";src:url("assets/fonts/source-sans-pro-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root {
  --login-bg: #050505;
  --login-text: #f7f7f7;
  --login-muted: rgba(255, 255, 255, .58);
  --login-line: rgba(255, 255, 255, .28);
  --login-line-soft: rgba(255, 255, 255, .12);
  --login-focus: rgba(255, 255, 255, .72);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--login-text);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, .06), transparent 26%),
    radial-gradient(circle at 82% 50%, rgba(255, 255, 255, .05), transparent 24%),
    linear-gradient(135deg, #0a0a0a 0%, #050505 48%, #101010 100%);
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .13;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

button,
input {
  font: inherit;
}

.login-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1px minmax(300px, 352px);
  align-items: center;
  justify-content: center;
  width: min(980px, 100%);
  min-height: min(540px, calc(100vh - 96px));
  gap: clamp(52px, 5.8vw, 72px);
}

.brand-panel {
  display: grid;
  place-items: center;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: min(420px, 100%);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58));
}

.login-divider {
  width: 1px;
  height: min(360px, 52vh);
  background: linear-gradient(transparent, rgba(255, 255, 255, .18), transparent);
}

.form-panel {
  width: 100%;
  min-width: 0;
  align-self: center;
  justify-self: center;
}

.form-title {
  margin: 0 0 clamp(16px, 2vw, 26px);
  color: #fff;
  font-size: clamp(1.35rem, 1.6vw, 1.65rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.login-form {
  display: grid;
  gap: 14px;
}

.field {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.input-shell {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 50px;
  border: 1px solid var(--login-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input-shell:focus-within {
  border-color: var(--login-focus);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

.input-icon {
  color: rgba(255, 255, 255, .74);
  text-align: center;
  font-size: 1rem;
}

.input-shell input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: clamp(.9rem, .9vw, .96rem);
  font-weight: 500;
}

.input-shell input::placeholder {
  color: var(--login-muted);
}

.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus,
.input-shell input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.password-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  outline: 0;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--login-line);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .01);
  font-size: clamp(.96rem, 1.05vw, 1.06rem);
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.submit-button:hover,
.submit-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--login-focus);
  background: rgba(255, 255, 255, .055);
  outline: 0;
}

.submit-button .fa-arrow-right {
  font-size: .96em;
}

@media (max-width: 900px) {
  .login-page {
    padding: 28px 20px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    width: min(350px, 100%);
    max-width: 100%;
    min-height: auto;
    gap: 34px;
    justify-items: center;
  }

  .brand-panel {
    width: 100%;
  }

  .brand-logo {
    width: min(280px, 70vw);
  }

  .login-divider {
    width: min(420px, 82vw);
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  }

  .form-panel {
    width: 100%;
    max-width: 100%;
    justify-self: center;
  }

  .form-title {
    margin-bottom: 26px;
    text-align: center;
  }

  .login-form {
    gap: 16px;
  }

  .input-shell {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    width: 100%;
    max-width: 100%;
    min-height: 62px;
  }

  .input-shell input {
    height: 60px;
    font-size: .96rem;
  }

  .input-icon {
    font-size: 1.12rem;
  }

  .password-toggle {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }

  .submit-button {
    width: 100%;
    max-width: 100%;
    min-height: 62px;
    font-size: 1.05rem;
  }
}


/* Marca e acessos do Meu Rango sobre o layout original do Rango. */
html{color-scheme:dark}body{line-height:1.4}.login-page{min-height:100dvh}.brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;color:#fff;font-size:clamp(64px,6.4vw,88px);font-weight:700;letter-spacing:-3px;line-height:.98;filter:drop-shadow(0 20px 30px #0008)}.brand-wordmark span:last-child{color:#f1f1f1}.form-title{font-size:25px;line-height:1.15;font-weight:400;margin-bottom:9px}.login-area{text-align:center;font-size:13px;color:#929292;margin:0 0 26px;line-height:1.4}.input-icon{display:grid;place-items:center}.input-icon svg,.password-toggle svg,.submit-button svg{width:20px;height:20px;display:block}.input-shell input{padding:0 12px 0 0;font-size:15px;line-height:1.4}.submit-button{font-weight:600}.login-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:14px;margin-top:16px;font-size:13px;color:#828282}.login-links a{display:inline-flex;align-items:center;min-height:40px;color:inherit;text-decoration:none}.login-links a:hover{color:#fff}.login-links a:focus-visible{outline:2px solid #bbb;outline-offset:3px;border-radius:2px}.login-error{color:#ffb4a9;font-size:14px;line-height:1.45;margin:16px 0 0}.login-error[hidden]{display:none}.field,.input-shell{min-width:0}.password-toggle{touch-action:manipulation}
@media(max-width:900px){.brand-wordmark{font-size:64px;letter-spacing:-2.5px;align-items:center;line-height:.98}.login-shell{gap:27px}.form-title{margin-bottom:8px}.login-area{margin-bottom:24px}.input-shell input{font-size:16px}.login-links{font-size:13px;column-gap:13px;margin-top:13px}}
@media(max-width:359px){.login-page{padding:26px 20px}.brand-wordmark{font-size:58px}.login-shell{gap:22px}.input-shell{grid-template-columns:44px minmax(0,1fr) auto}.password-toggle{width:36px;margin-right:5px}.login-links{column-gap:10px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}