@keyframes alienBackgroundMove {
  0% {
    transform:
      scale(
        1.03
      )
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      scale(
        1.07
      )
      translate3d(
        -0.5%,
        -0.3%,
        0
      );
  }

  100% {
    transform:
      scale(
        1.03
      )
      translate3d(
        0,
        0,
        0
      );
  }
}

@keyframes alienGridMove {
  from {
    background-position:
      0
      0;
  }

  to {
    background-position:
      48px
      48px;
  }
}

@keyframes alienScan {
  0% {
    transform:
      translateY(
        -100vh
      );
  }

  100% {
    transform:
      translateY(
        100vh
      );
  }
}

@keyframes alienStatusPulse {
  0%,
  100% {
    opacity:
      0.35;

    transform:
      scale(
        0.85
      );
  }

  50% {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}

@keyframes alienPanelEnter {
  from {
    opacity:
      0;

    transform:
      translateX(
        35px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}

@keyframes alienCopyEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        24px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes alienLoader {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

@keyframes alienError {
  0%,
  100% {
    transform:
      translateX(
        0
      );
  }

  25% {
    transform:
      translateX(
        -8px
      );
  }

  50% {
    transform:
      translateX(
        8px
      );
  }

  75% {
    transform:
      translateX(
        -4px
      );
  }
}

.login-body--corporate {
  min-width:
    0;

  overflow:
    hidden;

  background:
    #050707;
}

.alien-login {
  position:
    relative;

  display:
    grid;

  min-height:
    100vh;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #050707;

  color:
    #e8ebe7;
}

.alien-login__background {
  position:
    absolute;

  z-index:
    -5;

  inset:
    -4%;

  background-image:
    url(
      "/assets/images/alien-login-background.webp"
    );

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    cover;

  filter:
    grayscale(
      0.2
    )
    contrast(
      1.1
    )
    brightness(
      0.54
    );

  animation:
    alienBackgroundMove
    24s
    ease-in-out
    infinite;
}

.alien-login__overlay {
  position:
    absolute;

  z-index:
    -4;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(
        3,
        5,
        5,
        0.25
      )
      0%,
      rgba(
        3,
        5,
        5,
        0.56
      )
      48%,
      rgba(
        3,
        5,
        5,
        0.92
      )
      100%
    ),
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        0.38
      ),
      rgba(
        0,
        0,
        0,
        0.12
      )
      44%,
      rgba(
        0,
        0,
        0,
        0.68
      )
    );
}

.alien-login__grid {
  position:
    absolute;

  z-index:
    -3;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(
        211,
        219,
        52,
        0.035
      )
      1px,
      transparent
      1px
    ),
    linear-gradient(
      90deg,
      rgba(
        211,
        219,
        52,
        0.03
      )
      1px,
      transparent
      1px
    );

  background-size:
    48px
    48px;

  mask-image:
    linear-gradient(
      90deg,
      rgba(
        0,
        0,
        0,
        0.5
      ),
      rgba(
        0,
        0,
        0,
        1
      )
    );

  animation:
    alienGridMove
    18s
    linear
    infinite;
}

.alien-login__scanline {
  position:
    absolute;

  z-index:
    -2;

  right:
    0;

  left:
    0;

  height:
    140px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(
        213,
        220,
        52,
        0.035
      ),
      transparent
    );

  pointer-events:
    none;

  animation:
    alienScan
    9s
    linear
    infinite;
}

.alien-login__system-header,
.alien-login__system-footer {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-color:
    rgba(
      213,
      220,
      52,
      0.18
    );

  background:
    rgba(
      5,
      7,
      7,
      0.74
    );

  backdrop-filter:
    blur(
      8px
    );
}

.alien-login__system-header {
  min-height:
    76px;

  padding:
    14px
    28px;

  border-bottom:
    1px solid
    rgba(
      213,
      220,
      52,
      0.18
    );
}

.alien-login__system-header::after {
  position:
    absolute;

  right:
    28px;

  bottom:
    -1px;

  width:
    110px;

  height:
    2px;

  background:
    #d5dc34;

  content:
    "";
}

.alien-login__system-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.alien-login__system-mark {
  position:
    relative;

  display:
    grid;

  width:
    42px;

  height:
    42px;

  place-items:
    center;

  border:
    1px solid
    rgba(
      213,
      220,
      52,
      0.55
    );

  color:
    #d5dc34;

  font-family:
    monospace;

  font-size:
    19px;

  font-weight:
    700;
}

.alien-login__system-mark::before,
.alien-login__system-mark::after {
  position:
    absolute;

  width:
    8px;

  height:
    8px;

  content:
    "";
}

.alien-login__system-mark::before {
  top:
    -2px;

  left:
    -2px;

  border-top:
    2px solid
    #d5dc34;

  border-left:
    2px solid
    #d5dc34;
}

.alien-login__system-mark::after {
  right:
    -2px;

  bottom:
    -2px;

  border-right:
    2px solid
    #d5dc34;

  border-bottom:
    2px solid
    #d5dc34;
}

.alien-login__system-brand div,
.alien-login__system-status div {
  display:
    grid;

  gap:
    2px;
}

.alien-login__system-brand strong {
  font-size:
    12px;

  letter-spacing:
    0.14em;
}

.alien-login__system-brand span,
.alien-login__system-status small,
.alien-login__system-status strong {
  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.12em;
}

.alien-login__system-brand div span,
.alien-login__system-status small {
  color:
    #737d78;
}

.alien-login__system-status {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}

.alien-login__system-status strong {
  color:
    #79ca8e;
}

.alien-login__status-indicator {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #79ca8e;

  animation:
    alienStatusPulse
    2s
    ease-in-out
    infinite;
}

.alien-login__content {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  width:
    100%;

  max-width:
    1560px;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      390px,
      490px
    );

  align-items:
    center;

  gap:
    clamp(
      40px,
      7vw,
      120px
    );

  margin:
    0 auto;

  padding:
    clamp(
      34px,
      6vh,
      72px
    )
    clamp(
      28px,
      6vw,
      92px
    );
}

.alien-login__presentation {
  display:
    grid;

  align-content:
    center;

  gap:
    34px;

  min-width:
    0;

  animation:
    alienCopyEnter
    700ms
    ease
    both;
}

.alien-login__classification {
  display:
    flex;

  max-width:
    680px;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding-bottom:
    12px;

  border-bottom:
    1px solid
    rgba(
      213,
      220,
      52,
      0.28
    );

  color:
    #aab1ad;

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.alien-login__presentation-copy {
  max-width:
    760px;
}

.alien-login__eyebrow {
  display:
    block;

  margin-bottom:
    13px;

  color:
    #d5dc34;

  font-family:
    monospace;

  font-size:
    10px;

  letter-spacing:
    0.16em;
}

.alien-login__presentation h1 {
  margin:
    0;

  font-size:
    clamp(
      48px,
      7vw,
      104px
    );

  font-weight:
    300;

  letter-spacing:
    -0.055em;

  line-height:
    0.91;

  text-transform:
    uppercase;
}

.alien-login__presentation h1 strong {
  display:
    block;

  color:
    #d5dc34;

  font-size:
    0.57em;

  font-weight:
    600;

  letter-spacing:
    0.06em;
}

.alien-login__presentation-copy p {
  max-width:
    610px;

  margin:
    26px
    0
    0;

  color:
    #b5bcb8;

  font-size:
    clamp(
      14px,
      1.4vw,
      18px
    );

  line-height:
    1.75;
}

.alien-login__telemetry {
  display:
    grid;

  max-width:
    680px;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );
}

.alien-login__telemetry article {
  display:
    flex;

  min-width:
    0;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    15px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  background:
    rgba(
      7,
      10,
      10,
      0.58
    );
}

.alien-login__telemetry article > span {
  color:
    #d5dc34;

  font-family:
    monospace;

  font-size:
    10px;
}

.alien-login__telemetry article div {
  display:
    grid;

  min-width:
    0;

  gap:
    4px;
}

.alien-login__telemetry strong {
  color:
    #d9ddda;

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.08em;
}

.alien-login__telemetry small {
  color:
    #707975;

  font-size:
    10px;
}

.alien-login__access-panel {
  position:
    relative;

  width:
    100%;

  padding:
    28px;

  border:
    1px solid
    rgba(
      213,
      220,
      52,
      0.3
    );

  background:
    rgba(
      10,
      13,
      13,
      0.9
    );

  backdrop-filter:
    blur(
      15px
    );

  animation:
    alienPanelEnter
    700ms
    140ms
    ease
    both;

  transition:
    border-color
    240ms
    ease,
    transform
    240ms
    ease;
}

.alien-login__access-panel.is-authorized {
  border-color:
    #79ca8e;

  transform:
    scale(
      0.985
    );
}

.alien-login__panel-corners span {
  position:
    absolute;

  width:
    16px;

  height:
    16px;
}

.alien-login__panel-corners span:nth-child(1) {
  top:
    -2px;

  left:
    -2px;

  border-top:
    2px solid
    #d5dc34;

  border-left:
    2px solid
    #d5dc34;
}

.alien-login__panel-corners span:nth-child(2) {
  top:
    -2px;

  right:
    -2px;

  border-top:
    2px solid
    #d5dc34;

  border-right:
    2px solid
    #d5dc34;
}

.alien-login__panel-corners span:nth-child(3) {
  bottom:
    -2px;

  left:
    -2px;

  border-bottom:
    2px solid
    #d5dc34;

  border-left:
    2px solid
    #d5dc34;
}

.alien-login__panel-corners span:nth-child(4) {
  right:
    -2px;

  bottom:
    -2px;

  border-right:
    2px solid
    #d5dc34;

  border-bottom:
    2px solid
    #d5dc34;
}

.alien-login__access-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding-bottom:
    19px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );
}

.alien-login__access-header div {
  display:
    grid;

  gap:
    5px;
}

.alien-login__access-header div > span,
.alien-login__access-code {
  color:
    #d5dc34;

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.alien-login__access-header h2 {
  margin:
    0;

  font-size:
    24px;

  font-weight:
    500;
}

.alien-login__access-code {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(
      213,
      220,
      52,
      0.34
    );
}

.alien-login__access-description {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin:
    20px
    0;

  padding:
    11px;

  border-left:
    2px solid
    #d5dc34;

  background:
    rgba(
      213,
      220,
      52,
      0.055
    );

  color:
    #9ca5a0;
}

.alien-login__access-description svg {
  width:
    18px;

  height:
    18px;

  flex:
    0 0
    auto;

  color:
    #d5dc34;
}

.alien-login__access-description p {
  margin:
    0;

  font-size:
    12px;
}

.alien-login__form {
  display:
    grid;

  gap:
    18px;
}

.alien-login__form.has-error {
  animation:
    alienError
    450ms
    ease;
}

.alien-login__field {
  display:
    grid;

  gap:
    8px;
}

.alien-login__field-label {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #aeb6b2;

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.alien-login__field-label small {
  color:
    #d5dc34;

  font-size:
    9px;
}

.alien-login__input-shell {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    42px
    minmax(
      0,
      1fr
    )
    42px;

  align-items:
    center;

  min-height:
    52px;

  border:
    1px solid
    #313936;

  background:
    rgba(
      4,
      6,
      6,
      0.82
    );

  transition:
    border-color
    160ms
    ease,
    background
    160ms
    ease;
}

.alien-login__input-shell:focus-within {
  border-color:
    #d5dc34;

  background:
    rgba(
      8,
      11,
      11,
      0.94
    );
}

.alien-login__input-shell > svg {
  width:
    17px;

  height:
    17px;

  justify-self:
    center;

  color:
    #747d79;
}

.alien-login__input-shell:focus-within > svg {
  color:
    #d5dc34;
}

.alien-login__input-shell input {
  width:
    100%;

  min-width:
    0;

  height:
    50px;

  padding:
    0
    8px;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    #eef0ed;

  caret-color:
    #d5dc34;
}

.alien-login__input-shell input::placeholder {
  color:
    #555e5a;
}

.alien-login__input-state {
  justify-self:
    center;

  color:
    #626b67;

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.1em;
}

.alien-login__password-toggle {
  display:
    grid;

  width:
    40px;

  height:
    40px;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #737c78;
}

.alien-login__password-toggle:hover {
  color:
    #d5dc34;
}

.alien-login__password-toggle svg {
  width:
    17px;

  height:
    17px;
}

.alien-login__security-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  color:
    #68716d;

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.09em;
}

.alien-login__security-row span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;
}

.alien-login__security-row svg {
  width:
    12px;

  height:
    12px;

  color:
    #79ca8e;
}

.alien-login__access-button {
  display:
    flex;

  min-height:
    50px;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    2px;

  padding:
    0
    17px;

  border:
    1px solid
    #d5dc34;

  background:
    #d5dc34;

  color:
    #070909;

  font-family:
    monospace;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  transition:
    background
    160ms
    ease,
    border-color
    160ms
    ease,
    transform
    160ms
    ease;
}

.alien-login__access-button:hover:not(:disabled) {
  border-color:
    #e5eb4d;

  background:
    #e5eb4d;

  transform:
    translateY(
      -2px
    );
}

.alien-login__access-button.is-loading {
  justify-content:
    center;
}

.alien-login__access-button svg {
  width:
    18px;

  height:
    18px;
}

.login-access-button__loader {
  width:
    17px;

  height:
    17px;

  border:
    2px solid
    rgba(
      7,
      9,
      9,
      0.28
    );

  border-top-color:
    #070909;

  border-radius:
    50%;

  animation:
    alienLoader
    650ms
    linear
    infinite;
}

.alien-login__access-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    22px;

  padding-top:
    13px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  color:
    #59615e;

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.09em;
}

.alien-login__system-footer {
  min-height:
    42px;

  padding:
    9px
    28px;

  border-top:
    1px solid
    rgba(
      213,
      220,
      52,
      0.16
    );

  color:
    #606965;

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.1em;
}

.alien-login__system-footer strong {
  color:
    #aeb5b1;
}

@media (
  max-width:
    1050px
) {
  .alien-login__content {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        360px,
        440px
      );

    gap:
      38px;

    padding-right:
      30px;

    padding-left:
      30px;
  }

  .alien-login__telemetry {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .alien-login__telemetry article {
    padding:
      11px;
  }
}

@media (
  max-width:
    820px
) {
  .login-body--corporate {
    overflow-y:
      auto;
  }

  .alien-login {
    min-height:
      100svh;
  }

  .alien-login__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(
          3,
          5,
          5,
          0.45
        ),
        rgba(
          3,
          5,
          5,
          0.86
        )
        44%,
        rgba(
          3,
          5,
          5,
          0.96
        )
      );
  }

  .alien-login__content {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    align-items:
      start;

    gap:
      34px;

    padding:
      35px
      20px
      45px;
  }

  .alien-login__presentation {
    gap:
      22px;
  }

  .alien-login__presentation h1 {
    font-size:
      clamp(
        48px,
        15vw,
        76px
      );
  }

  .alien-login__telemetry {
    display:
      none;
  }

  .alien-login__access-panel {
    width:
      min(
        100%,
        520px
      );

    justify-self:
      center;
  }
}

@media (
  max-width:
    560px
) {
  .alien-login__system-header {
    min-height:
      64px;

    padding:
      11px
      15px;
  }

  .alien-login__system-header::after {
    right:
      15px;
  }

  .alien-login__system-brand strong {
    font-size:
      10px;
  }

  .alien-login__system-status {
    display:
      none;
  }

  .alien-login__classification {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }

  .alien-login__presentation-copy p {
    font-size:
      14px;
  }

  .alien-login__access-panel {
    padding:
      22px
      18px;
  }

  .alien-login__access-header h2 {
    font-size:
      21px;
  }

  .alien-login__security-row,
  .alien-login__access-footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .alien-login__system-footer {
    justify-content:
      center;

    padding:
      10px
      15px;

    text-align:
      center;
  }

  .alien-login__system-footer span:first-child,
  .alien-login__system-footer span:last-child {
    display:
      none;
  }
}

@media (
  prefers-reduced-motion:
    reduce
) {
  .alien-login__background,
  .alien-login__grid,
  .alien-login__scanline,
  .alien-login__status-indicator,
  .alien-login__presentation,
  .alien-login__access-panel {
    animation:
      none
      !important;
  }
}

/* =========================================================
   LOGIN · FONDO ESPECÍFICO PARA CELULAR
   ========================================================= */

@media (
  max-width:
    820px
) {
  .alien-login__background {
    background-image:
      url(
        "/assets/images/alien-login-mobile.webp"
      );

    background-position:
      center top;

    background-size:
      cover;

    filter:
      grayscale(
        0.15
      )
      contrast(
        1.12
      )
      brightness(
        0.48
      );
  }
}

@media (
  max-width:
    560px
) {
  .alien-login__background {
    background-position:
      50%
      15%;
  }
}