/* Login: fundo vivo, título que entra palavra por palavra, feed de atendimento ao vivo e formulário que sobe suave. */
.login-marca { position: relative; overflow: hidden; isolation: isolate; }
.login-marca > * { position: relative; z-index: 1; }
.login-marca > .login-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.login-fundo i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: login-flutua 16s ease-in-out infinite; }
.login-fundo .bolha-1 { width: 46vmin; height: 46vmin; left: -10vmin; top: -8vmin; background: #2740A8; opacity: .55; }
.login-fundo .bolha-2 { width: 36vmin; height: 36vmin; right: -8vmin; top: 30%; background: #FF6A3D; opacity: .22; animation-delay: -6s; animation-duration: 20s; }
.login-fundo .bolha-3 { width: 42vmin; height: 42vmin; left: 20%; bottom: -16vmin; background: #26A5E4; opacity: .24; animation-delay: -11s; animation-direction: reverse; }
.login-fundo .pontos { position: absolute; inset: 0; background-image: radial-gradient(rgba(245, 240, 232, .16) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 85%); mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 85%); animation: login-pontos 30s linear infinite; }
.login-marca > .login-brilho { position: absolute; left: 0; top: 0; z-index: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(245, 240, 232, .13), transparent); transform: translate(var(--mx, 30%), var(--my, 30%)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

.login-marca .marca { animation: login-desce .8s cubic-bezier(.2, .8, .2, 1) both; }
.login-marca .marca b { display: inline-block; animation: login-ponto 2.6s ease-in-out 1s infinite; }
.login-titulo { margin: 0; }
.login-titulo .palavra { display: inline-block; margin-right: .26em; opacity: 0; transform: translateY(.7em); animation: login-palavra .75s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 100ms + 250ms); }
.login-titulo .destaque { position: relative; }
.login-titulo .destaque::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; border-radius: 2px; background: #FF6A3D; transform: scaleX(0); transform-origin: left; animation: login-risco .8s cubic-bezier(.6, 0, .2, 1) 1.5s forwards; }
.login-marca small { animation: login-sobe .8s ease 1.8s both; }

.login-feed { position: relative; width: min(440px, 100%); margin: 18px 0 0; animation: login-sobe .8s ease .9s both; }
.feed-cartao { position: absolute; left: 0; right: 0; top: 0; height: 126px; box-sizing: border-box; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(245, 240, 232, .08); border: 1px solid rgba(245, 240, 232, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--lateral-texto); transform: translateY(calc(var(--pos, -1) * 138px)) scale(calc(1 - max(var(--pos, 0), 0) * .035)); opacity: calc(1 - max(var(--pos, 0), 0) * .3); transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
.feed-cartao[style*="--pos: -1"], .feed-cartao[style*="--pos: 3"], .feed-cartao[style*="--pos: 4"] { opacity: 0; }
.feed-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #F5F0E8; }
.feed-logo .icone { width: 22px; height: 22px; }
.feed-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.feed-nome { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.feed-nome span { color: var(--lateral-fraco); font-size: 12px; }
.feed-bolha { margin: 0; font-size: 13px; line-height: 1.3; padding: 4px 10px; border-radius: 10px; width: fit-content; max-width: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; }
.feed-bolha.cliente { background: rgba(245, 240, 232, .14); border-top-left-radius: 3px; animation: feed-bolha .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.feed-bolha.ia { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #3A53C4; color: #fff; border-top-right-radius: 3px; align-self: flex-end; animation: feed-bolha .5s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.feed-bolha.ia b { margin-right: 6px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .22); font-size: 10px; letter-spacing: .06em; }
.feed-chip { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; animation: feed-bolha .5s cubic-bezier(.2, .8, .2, 1) 2s both; }
.feed-chip.ok { background: rgba(37, 211, 102, .2); color: #7FE2A6; }
.feed-chip.info { background: rgba(38, 165, 228, .22); color: #8FD3F4; }
.feed-chip.alerta { background: rgba(255, 106, 61, .22); color: #FFB59C; }

.login-forma form { animation: login-forma .8s cubic-bezier(.2, .8, .2, 1) .2s both; }
.login-forma .entrada { transition: border-color .2s, box-shadow .2s, transform .2s; }
.login-forma .entrada:focus { box-shadow: 0 0 0 4px rgba(58, 83, 196, .28); transform: translateY(-1px); }
.login-forma .btn.primario { position: relative; overflow: hidden; transition: transform .15s, box-shadow .2s; }
.login-forma .btn.primario::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: login-brilho-botao 4.5s ease-in-out 2.2s infinite; }
.login-forma .btn.primario:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(39, 64, 168, .4); }

@keyframes login-flutua { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vmin, 4vmin) scale(1.12); } }
@keyframes login-pontos { to { background-position: 26px 26px; } }
@keyframes login-desce { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes login-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes login-palavra { to { opacity: 1; transform: none; } }
@keyframes login-risco { to { transform: scaleX(1); } }
@keyframes login-ponto { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes login-forma { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes feed-bolha { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes login-brilho-botao { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Celular: o painel da marca vira uma faixa de cima com o título e UM cartão do feed animado; o formulário fica logo abaixo. */
@media (max-width: 900px) {
  .login-brilho { display: none; }
  .login-marca { padding: 28px 18px 24px; gap: 14px; min-height: 0; justify-content: flex-start; }
  .login-marca .marca { font-size: 28px; }
  .login-marca .login-titulo { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.2; max-width: 18ch; }
  .login-marca small { display: none; }
  .login-feed { height: 126px !important; width: 100%; max-width: 440px; margin: 4px 0 0; }
  .feed-cartao[style*="--pos: 1"], .feed-cartao[style*="--pos: 2"], .feed-cartao[style*="--pos: 3"], .feed-cartao[style*="--pos: 4"] { opacity: 0; }
  .login-forma { align-items: flex-start; padding: 28px 18px 40px; }
  .login-forma form { width: 100%; max-width: 440px; }
}
/* Tela baixa no computador: dois cartões em vez de três. */
@media (min-width: 901px) and (max-height: 820px) {
  .login-feed { height: 264px !important; }
  .feed-cartao[style*="--pos: 2"] { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login *, .login *::before, .login *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .login-brilho { display: none; }
}