/* Card */
    .login-card {
      transition: none !important;
      padding-top: 2.2rem;
      padding-bottom: 2.2rem;
      min-height: 480px;
    }

    .login-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    /* Fundo azul */
    body.login {
      background: linear-gradient(to right, #0e305d, #0a5bd7);
      overflow-y: hidden;
    }

    /* Ícone */
    .login .login-icon {
      width: 140px;
      height: auto;
      max-height: none;
    }

    /* Inputs */
    .login .input {
      width: 100%;
      box-sizing: border-box;
    }

    /* Título */
    .login .arara {
      display: block;
      min-height: 3.2em;
      line-height: 1.6em;
      position: relative;
    }

    .login .arara-curto {
      font-size: 2.2rem;
      font-weight: 800;
      display: block;
    }

    .login .arara-longo {
      font-size: 1rem;
      font-weight: 500;
      display: none;
      line-height: 1.5em;
    }

    .login .arara span {
      transition: opacity 0.3s ease;
    }

    .fade { opacity: 0; }

    /* Wrapper da arara */
    .arara-wrapper {
      position: relative;
      display: inline-block;
      margin: 0 auto 1rem;
    }

    /* Balão */
    .fala {
      position: absolute;
      max-width: 240px;
      min-width: 180px;
      background: #fff;
      color: #122033;
      padding: 0.6rem 0.8rem;
      border-radius: 12px;
      font-size: 0.85rem;
      line-height: 1.35em;
      box-shadow: 0 6px 18px rgba(0,0,0,0.22);
      pointer-events: none;
      white-space: normal;
      word-break: break-word;
      opacity: 0;
      scale: 0.95;
      transition: opacity 0.25s ease, scale 0.25s ease;
      z-index: 20;
    }

    .fala.show {
      opacity: 1;
      scale: 1;
    }

    .fala::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 14px;
      border-width: 6px 6px 0;
      border-style: solid;
      border-color: #fff transparent transparent;
    }

    .hidden { display: none; }

    .fala-top {
      bottom: 115%;
      left: 50%;
      translate: -50% 0;
    }

    .fala-right {
      top: 20%;
      left: 115%;
    }

    .fala-left {
      top: 20%;
      right: 115%;
    }

    .login-links {
      margin-top: 0.2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
    }

    @keyframes girar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .animar {
      animation: girar 2.5s linear infinite;
    }
	
	@keyframes shake {
	  0%   { transform: translate(0, 0) rotate(0deg); }
	  20%  { transform: translate(-2px, 0) rotate(-1deg); }
	  40%  { transform: translate(2px, 0) rotate(1deg); }
	  60%  { transform: translate(-2px, 0) rotate(-1deg); }
	  80%  { transform: translate(2px, 0) rotate(1deg); }
	  100% { transform: translate(0, 0) rotate(0deg); }
	}

	.fala {
	  animation: shake 0.4s ease-in-out infinite;
	}
	
	@keyframes explode {
	  0% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
		filter: blur(0);
	  }
	  30% {
		transform: scale(1.3) rotate(10deg);
	  }
	  60% {
		transform: scale(0.9) rotate(-20deg);
	  }
	  100% {
		transform: scale(2.5) rotate(720deg);
		opacity: 0;
		filter: blur(6px);
	  }
	}

	.login-icon.explodir {
	  animation: explode 0.7s ease-out forwards;
	  pointer-events: none;
	}
	
	@keyframes tremer {
	  0%   { transform: translateX(0); }
	  20%  { transform: translateX(-4px); }
	  40%  { transform: translateX(4px); }
	  60%  { transform: translateX(-3px); }
	  80%  { transform: translateX(3px); }
	  100% { transform: translateX(0); }
	}

	.login-icon.tremendo {
	  animation: tremer 0.3s infinite;
	}

	.login-icon.invisivel {
	  opacity: 0;
	  visibility: hidden;   /* mantém o espaço */
	  pointer-events: none;
	}
	@keyframes explosao {
	  0% {
		transform: scale(1);
		opacity: 1;
		filter: blur(0);
	  }
	  30% {
		transform: scale(1.25);
	  }
	  60% {
		transform: scale(0.85);
	  }
	  100% {
		transform: scale(1.8);
		opacity: 0;
		filter: blur(4px);
	  }
	}

	.login-icon.explodindo {
	  animation: explosao 0.6s ease-out forwards;
	  pointer-events: none;
	}

	/* container invisível das partículas */
	.arara-wrapper {
	  position: relative;
	  overflow: visible;
	}

	/* partícula individual */
	.particula {
	  position: absolute;
	  width: 6px;
	  height: 6px;
	  background: #ffeb3b;
	  border-radius: 50%;
	  pointer-events: none;
	  z-index: 30;
	  animation: particula-explodir 700ms ease-out forwards;
	}

	/* variações */
	.particula.vermelha { background: #ff5252; }
	.particula.laranja  { background: #ff9800; }
	.particula.branca   { background: #ffffff; }

	@keyframes particula-explodir {
	  from {
		transform: translate(0, 0) scale(20);
		opacity: 1;
	  }
	  to {
		transform: translate(var(--dx), var(--dy)) scale(0.2);
		opacity: 0;
	  }
	}