/* Login cinematográfico da área do cliente (app e overlay publicado). Só vale dentro de .nx-login.
   Movimento para todos, por decisão do dono: as regras de animação usam !important para não serem
   anuladas pelo bloco global de movimento reduzido. Todo elemento termina visível mesmo sem animação:
   o estado base é o final, e os quadros-chave só descrevem a entrada. */
@property --nxfx-iris { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

/* ---------- Chegada: capa navy #0b1729 (a mesma do portal do site) que se abre em íris ---------- */
.nx-login::before, .nx-login::after {
  content: ''; position: fixed; z-index: 90; pointer-events: none; visibility: hidden; opacity: 0;
}
.nx-login::before {
  inset: 0; background: #0b1729;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent var(--nxfx-iris), #000 calc(var(--nxfx-iris) + 9%));
  mask-image: radial-gradient(circle at 50% 46%, transparent var(--nxfx-iris), #000 calc(var(--nxfx-iris) + 9%));
  animation: nxfx-iris .62s cubic-bezier(.6, .02, .2, 1) .08s both !important;
}
.nx-login::after {
  left: 50%; top: 46%; width: 112px; height: 82px; margin: -41px 0 0 -56px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 78.4' fill='none' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M0 0H30.5L100 72.4H69.5Z' stroke='%2382c4f5' fill='%231576c7' fill-opacity='.22'/%3E%3Cpath d='M59 0H100V48.5L84 28L83 17L66 6Z' stroke='%23f3cd84' fill='%23e3bd5b' fill-opacity='.2'/%3E%3Cpath d='M41 72.4H0V23.9L16 44.4L17 55.4L34 66.4Z' stroke='%23f3cd84' fill='%23e3bd5b' fill-opacity='.2'/%3E%3C/svg%3E");
  animation: nxfx-seal .5s cubic-bezier(.4, 0, .2, 1) both !important;
}
html[data-nxfx-login="site"] .nx-login::before { animation-delay: .16s !important; }
html[data-nxfx-login="site"] .nx-login::after { animation-duration: .6s !important; }
.nx-login.nxfx-again::before, .nx-login.nxfx-again::after,
.nx-login.nxfx-opened::before, .nx-login.nxfx-opened::after { content: none; }
@keyframes nxfx-iris {
  from { visibility: visible; opacity: 1; --nxfx-iris: -10%; }
  80% { opacity: 1; }
  to { visibility: hidden; opacity: 0; --nxfx-iris: 100%; }
}
@keyframes nxfx-seal {
  from { visibility: visible; opacity: 1; transform: scale(1); }
  to { visibility: hidden; opacity: 0; transform: scale(1.45); }
}
@keyframes nxfx-cover { from { visibility: visible; opacity: 1; } to { visibility: hidden; opacity: 0; } }

/* ---------- Estrutura ---------- */
.nx-login.nxfx-on { position: relative; isolation: isolate; overflow: hidden; }
.nxfx-on .nx-install-footer { position: relative; }
.nxfx-on .nx-login-story {
  isolation: isolate;
  background: radial-gradient(ellipse at 92% 88%, #e3bd5b1f, transparent 52%), radial-gradient(ellipse at 8% 4%, #1576c724, transparent 46%), linear-gradient(150deg, #132946, #0b1729 62%, #09152a);
}
.nxfx-on .nx-login-story::after { content: none; }
.nxfx-on .nx-login-story > :not(.nxfx-layer) { position: relative; z-index: 2; }
.nxfx-net { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; animation: nxfx-fade 1.6s ease-out .2s both !important; }
.nxfx-net.is-lite { height: min(64vh, 560px); }

/* ---------- Título, texto e recursos: sobem em sequência ---------- */
.nxfx-on .nx-login-story .nx-logo { animation: nxfx-up .9s cubic-bezier(.16, .84, .24, 1) .12s both !important; }
.nxfx-on .nx-login-story .nx-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #e3bd5b; animation: nxfx-up .9s cubic-bezier(.16, .84, .24, 1) .24s both !important; }
.nxfx-on .nx-login-story .nx-eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, #e3bd5b, #e3bd5b00); transform-origin: left; animation: nxfx-grow 1s cubic-bezier(.16, .84, .24, 1) .45s both !important; }
.nxfx-on .nx-login-story h1 .nxfx-line { display: inline-block; animation: nxfx-rise 1s cubic-bezier(.16, .84, .24, 1) .34s both !important; }
.nxfx-on .nx-login-story h1 em.nxfx-line { padding-right: .06em; margin-right: -.06em; color: #e3bd5b; animation-delay: .5s !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nxfx-on .nx-login-story h1 em.nxfx-gold {
    background: linear-gradient(100deg, #d9b25e 0%, #e3bd5b 32%, #fff3c4 46%, #f3cd84 52%, #e3bd5b 62%, #c9a045 100%) 0 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: nxfx-rise 1s cubic-bezier(.16, .84, .24, 1) .5s both, nxfx-sheen 1.9s cubic-bezier(.3, .6, .2, 1) 1.3s both !important;
  }
}
.nxfx-on .nx-login-story p { animation: nxfx-up .9s cubic-bezier(.16, .84, .24, 1) .72s both !important; }
.nxfx-on .nx-story-foot { animation: nxfx-fade 1.2s ease-out 1.05s both !important; }

.nxfx-strip { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; animation: nxfx-up .9s cubic-bezier(.16, .84, .24, 1) .9s both !important; }
.nxfx-chip { position: relative; z-index: 1; padding: 7px 13px; border-radius: 999px; border: 1px solid #adc4d91f; background: #0b1729cc; color: #adc4d9; font-size: 12px; letter-spacing: .04em; line-height: 1.3; transition: color .6s ease, border-color .6s ease, background-color .6s ease !important; }
.nxfx-chip.is-on { color: #f3cd84; border-color: #e3bd5b00; background-color: #252b2fd9; }
.nxfx-cursor {
  position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none;
  box-shadow: inset 0 0 0 1px #e3bd5ba6, 0 0 22px -6px #e3bd5bb3;
  transition: transform .75s cubic-bezier(.65, 0, .25, 1), width .75s cubic-bezier(.65, 0, .25, 1) !important;
}

/* ---------- Órbitas e símbolo N/X em linhas (só transform/opacity) ---------- */
.nxfx-orbit { position: absolute; right: clamp(78px, 13%, 170px); bottom: clamp(96px, 21%, 250px); width: 0; height: 0; z-index: 1; pointer-events: none; animation: nxfx-fade 1.6s ease-out .3s both !important; }
.nxfx-ring, .nxfx-halo { position: absolute; border-radius: 50%; }
.nxfx-ring { width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); }
.nxfx-ring::before { content: ''; position: absolute; left: 50%; top: 0; border-radius: 50%; }
.nxfx-r1 { --r: 96px; border: 1px solid #e3bd5b33; animation: nxfx-spin 28s linear infinite !important; }
.nxfx-r1::before { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #f3cd84; box-shadow: 0 0 12px 2px #e3bd5b99; }
.nxfx-r2 { --r: 156px; border: 1px dashed #82c4f52e; animation: nxfx-spin 52s linear infinite reverse !important; }
.nxfx-r2::before { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #82c4f5; box-shadow: 0 0 10px 1px #4a9fe0aa; }
.nxfx-r3 { --r: 236px; border: 1px solid #ffffff0d; animation: nxfx-spin 16s linear infinite !important; }
.nxfx-r3::before {
  left: -1px; top: -1px; right: -1px; bottom: -1px;
  background: conic-gradient(from 0deg, #0000 0 70%, #e3bd5b24 80%, #f3cd84d9 89.5%, #0000 90%);
  -webkit-mask-image: radial-gradient(farthest-side, #0000 calc(100% - 1.5px), #000 calc(100% - 1px));
  mask-image: radial-gradient(farthest-side, #0000 calc(100% - 1.5px), #000 calc(100% - 1px));
}
.nxfx-halo { width: 260px; height: 260px; left: -130px; top: -130px; background: radial-gradient(circle, #1576c740, #e3bd5b14 42%, #0000 68%); animation: nxfx-halo 6.5s ease-in-out 1.6s infinite !important; }
.nxfx-mark { position: absolute; left: -58px; top: -42px; width: 116px; height: 84px; max-width: none; max-height: none; overflow: visible; animation: nxfx-breathe 6.5s ease-in-out 1.6s infinite !important; }
.nxfx-mark path { stroke-width: 1.15; stroke-linejoin: round; stroke-dasharray: 1; animation: nxfx-draw 1.8s cubic-bezier(.6, .1, .2, 1) .35s both !important; }
.nxfx-mark-band { stroke: #82c4f5; fill: #1576c7; fill-opacity: .14; }
.nxfx-mark-crease { stroke: #82c4f5; stroke-opacity: .35; fill: none; animation-delay: .6s !important; }
.nxfx-mark-gold { stroke: #f3cd84; fill: #e3bd5b; fill-opacity: .12; animation-delay: .75s !important; }

/* Luz que corre pela divisória entre os painéis. */
.nxfx-seam { position: absolute; top: 0; right: -1px; width: 1px; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.nxfx-seam i { position: absolute; inset: 0; background: linear-gradient(to bottom, #0000 42%, #82c4f580 47.5%, #f3cd84e6 50%, #0000 53%); animation: nxfx-seam 8s cubic-bezier(.45, 0, .55, 1) 1.8s infinite both !important; }

/* ---------- Painel do formulário: vidro, luz na borda, campos e botão ---------- */
.nxfx-aura { position: absolute; grid-column: 2; grid-row: 1 / 3; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nxfx-aura::before {
  content: ''; position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(#82c4f51a 1px, #0000 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 46%, #000, #0000 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 46%, #000, #0000 72%);
}
.nxfx-aura i { position: absolute; width: 640px; height: 640px; border-radius: 50%; }
.nxfx-aura i:first-child { right: -220px; top: -240px; background: radial-gradient(circle, #1576c733, #0000 64%); animation: nxfx-drift 22s ease-in-out infinite alternate !important; }
.nxfx-aura i:last-child { left: -200px; bottom: -280px; background: radial-gradient(circle, #e3bd5b1a, #0000 64%); animation: nxfx-drift 27s ease-in-out -9s infinite alternate-reverse !important; }

.nxfx-on .nx-login-card > .nx-eyebrow, .nxfx-on .nx-login-card > h2, .nxfx-on .nx-login-card > .nx-subtitle { display: block; animation: nxfx-in .24s cubic-bezier(.2, .7, .2, 1) both !important; }
.nxfx-on .nx-login-card > .nx-eyebrow { color: #e3bd5b; }
.nxfx-on .nx-login-card > h2 { animation-delay: .03s !important; }
.nxfx-on .nx-login-card > .nx-subtitle { animation-delay: .06s !important; }
.nxfx-rim { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none; opacity: .9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s ease !important; animation: nxfx-fade .3s ease-out both !important; }
.nxfx-rim i { position: absolute; left: 50%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px;
  background: conic-gradient(from 0deg, #0000 0 22%, #82c4f540 27%, #0000 32%, #0000 52%, #82c4f526 60%, #82c4f5b3 70%, #f3cd84 76.5%, #fff3c4 77.3%, #0000 79.5%, #0000 100%);
  animation: nxfx-spin 11s linear infinite !important; }
.nxfx-on .nx-login-card:has(.nx-submit:disabled) .nxfx-rim { opacity: 1; }

.nxfx-on .nx-login-card label { transition: color .25s ease !important; }
.nxfx-on .nx-login-card label:has(+ input:focus), .nxfx-on .nx-login-card label:has(+ .nx-password input:focus) { color: #f3cd84; }
.nxfx-on .nx-login-card input {
  background-color: #0a1a30d9; border-color: #adc4d929;
  transition: border-color .22s ease, box-shadow .32s ease, background-color .22s ease !important;
}
.nxfx-on .nx-login-card input:hover { border-color: #adc4d952; }
.nxfx-on .nx-login-card input:focus {
  outline: 2px solid #0000; outline-offset: 2px; border-color: #e3bd5bcc; background-color: #0d213bf2;
  box-shadow: 0 0 0 3px #e3bd5b26, 0 0 28px -4px #e3bd5b5c;
}
.nxfx-on .nx-password button { transition: color .2s ease !important; }
.nxfx-on .nx-password button:hover { color: #f3cd84; text-decoration: underline; text-underline-offset: 3px; }

.nxfx-on .nx-submit {
  position: relative; overflow: hidden; isolation: isolate; letter-spacing: .02em; color: #0b1729;
  background: linear-gradient(135deg, #f1d07c 0%, #e3bd5b 46%, #c9a045 100%);
  box-shadow: 0 16px 34px -18px #e3bd5bcc, inset 0 1px 0 #ffffff73, inset 0 -1px 0 #7a520e40;
  transition: box-shadow .3s ease, filter .3s ease, transform .15s ease !important;
}
.nxfx-on .nx-submit::before {
  content: ''; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 36%;
  background: linear-gradient(100deg, #fff0, #ffffffa6, #fff0); transform: translateX(-160%) skewX(-20deg);
}
.nxfx-on .nx-submit::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: .7;
  transform: rotate(45deg); transition: transform .3s ease, opacity .3s ease !important;
}
.nxfx-on .nx-submit:hover:not(:disabled), .nxfx-on .nx-submit:focus-visible { filter: brightness(1.05); box-shadow: 0 20px 44px -16px #e3bd5be6, inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #7a520e40; }
.nxfx-on .nx-submit:hover:not(:disabled)::before, .nxfx-on .nx-submit:focus-visible::before { transform: translateX(360%) skewX(-20deg); transition: transform .8s cubic-bezier(.2, .7, .2, 1) !important; }
.nxfx-on .nx-submit:hover:not(:disabled)::after { transform: translateX(3px) rotate(45deg); opacity: 1; }
.nxfx-on .nx-submit:active:not(:disabled) { transform: translateY(1px); }
.nxfx-on .nx-submit:disabled { opacity: 1; cursor: progress; filter: saturate(.85) brightness(.97); }
.nxfx-on .nx-submit:disabled::before { animation: nxfx-sweep 1.15s cubic-bezier(.45, 0, .55, 1) infinite !important; }
.nxfx-on .nx-submit:disabled::after {
  width: 16px; height: 16px; margin-top: -8px; right: 18px; opacity: 1; box-sizing: border-box; transform: rotate(0deg);
  border: 2px solid #0b172938; border-top-color: #0b1729; border-radius: 50%;
  animation: nxfx-spin .75s linear infinite !important;
}
.nxfx-on .nx-login-error:not([hidden]) { border: 1px solid #ff8a8a38; background: #701b2440; animation: nxfx-in .3s cubic-bezier(.2, .7, .2, 1) both !important; }
.nxfx-on .nx-back { transition: color .2s ease !important; }
.nxfx-on .nx-back:hover { color: #f3cd84; }

/* ---------- Ajuda útil no cartão (canais reais), instalar o aplicativo e as pontes site/Cloud ---------- */
.nxfx-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 18px 0 0; font-size: 12.5px; line-height: 1.4; }
.nxfx-help-link { display: inline-flex; align-items: center; min-height: 32px; color: #adc4d9; text-decoration: none; transition: color .2s ease !important; }
.nxfx-help-link:hover, .nxfx-help-link:focus-visible { color: #f3cd84; text-decoration: underline; text-underline-offset: 4px; }
.nxfx-support::before { content: ''; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #e3bd5b; box-shadow: 0 0 10px #e3bd5b99; }
.nxfx-on .nx-login-card .nx-install-footer { margin: 6px 0 0; padding: 0; width: auto; text-align: center; }
.nxfx-on .nx-login-card .nx-install { min-height: 32px; padding: 4px 8px; font-size: 12px; color: #9cacc0; }
.nxfx-on .nx-login-card .nx-install-help { margin: 4px auto 0; max-width: 340px; }
.nxfx-places { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 18px; }
.nxfx-places .nx-back { margin: 0; }
.nxfx-cloud { color: #9cacc0; font-size: 12px; text-decoration: none; transition: color .2s ease !important; }
.nxfx-cloud::after { content: ' ↗'; }
.nxfx-cloud:hover, .nxfx-cloud:focus-visible { color: #f3cd84; }
html[data-nx-installed="true"] .nxfx-cloud { display: none !important; }
@media (display-mode: standalone), (display-mode: fullscreen) { .nxfx-cloud { display: none !important; } }

/* ---------- Passagem Nexxa: com a capa ou o holograma na tela, o cartão espera e entra quando a página se abre
   (classe nxp-reveal no <html>). Proteção: sem a passagem, ele aparece sozinho em 2,6 s. ---------- */
.nxp-p:not(.nxp-reveal) .nxfx-on .nx-login-card { animation: nxfx-hold 2.6s step-end backwards !important; }
.nxp-reveal .nxfx-on .nx-login-card { animation: nxfx-card .8s cubic-bezier(.16, .84, .24, 1) backwards !important; }
@keyframes nxfx-hold { from, to { opacity: 0; } }
@keyframes nxfx-card { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); } }

@media (min-width: 761px) {
  /* Ancorado pelo topo (na prática, centralizado): a mensagem de erro cresce para baixo e os campos não saltam. */
  .nxfx-on .nx-login-card {
    align-self: start; width: min(calc(100% - 56px), 468px); margin: max(24px, calc(50vh - 296px)) auto 16px; padding: 44px 44px 28px; border-radius: 24px;
    background: linear-gradient(165deg, #ffffff12, #ffffff05 42%, #ffffff08);
    border: 1px solid #ffffff14;
    box-shadow: 0 44px 90px -42px #000000d9, 0 0 0 1px #0313294d, inset 0 1px 0 #ffffff12;
  }
  .nxfx-on .nx-footer { margin-top: 30px; }
  .nxfx-on .nx-login-card { padding-bottom: 30px; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .nxfx-on .nx-login-card { width: calc(100% - 40px); padding: 40px 28px 26px; }
}

/* ---------- Celular: pilha legível, efeitos leves ---------- */
@media (max-width: 760px) {
  .nx-login::before { -webkit-mask-image: none; mask-image: none; animation-name: nxfx-cover !important; animation-duration: .5s !important; }
  .nx-login::after { width: 92px; height: 68px; margin: -34px 0 0 -46px; }
  .nxfx-rim { display: none; }
  .nxfx-aura::before { display: none; }
  .nxfx-aura i { width: 420px; height: 420px; }
  .nxfx-aura i:first-child { right: -170px; top: -150px; }
  .nxfx-aura i:last-child { left: -190px; bottom: -200px; }
  .nxfx-on .nx-login-card { z-index: 1; }
  .nxfx-on .nx-mobile-brand { position: relative; isolation: isolate; }
  .nxfx-on .nx-mobile-brand::before {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 280px; height: 130px; margin: -65px 0 0 -140px;
    background: radial-gradient(ellipse at center, #1576c73d, #e3bd5b12 45%, #0000 70%); pointer-events: none;
    animation: nxfx-halo 6s ease-in-out infinite !important;
  }
}

@keyframes nxfx-fade { from { opacity: 0; } }
@keyframes nxfx-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes nxfx-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes nxfx-rise { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nxfx-grow { from { transform: scaleX(0); } }
@keyframes nxfx-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes nxfx-spin { to { transform: rotate(360deg); } }
@keyframes nxfx-draw { from { stroke-dashoffset: 1; fill-opacity: 0; } 60% { fill-opacity: 0; } }
@keyframes nxfx-breathe { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes nxfx-halo { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes nxfx-seam { from { transform: translateY(-56%); } to { transform: translateY(56%); } }
@keyframes nxfx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-70px, 60px, 0) scale(1.12); } }
@keyframes nxfx-sweep { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(360%) skewX(-20deg); } }