body {background: #f5f6fa;}
.visual-logo {position: absolute;z-index: 4;bottom: 45px;right: 65px;height: 150px;opacity: 1;}
.login-section {min-height: 100vh;display: flex;align-items: center;background: #f5f6fa;}
.visual-section {min-height: 100vh;position: relative;padding: 0;}
.visual-overlay {position: absolute;inset: 0;background: linear-gradient(135deg, #001368ff, #1a23acff, #344ecfff);background-size: 200% 200%;animation: gradientMotion 12s ease infinite;}
@keyframes gradientMotion {0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}        
.visual-content {position: relative;z-index: 3;padding: 60px;color: white;max-width: 680px;}
.visual-title {font-size: 2.4rem;font-weight: 700;}
.visual-text {font-size: 1.1rem;margin-top: 18px;opacity: 0.9;}
.fade-text {opacity: 1;transition: opacity 1.2s ease-in-out;}
.fade-out {opacity: 0;}    
@keyframes fadeSlideIn {0% {opacity: 0;transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);}}
@keyframes fadeSlideOut {0% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(20px);}}
.text-in {animation: fadeSlideIn 0.8s ease forwards;}
.text-out {animation: fadeSlideOut 0.5s ease forwards;}       
.visual-section::before {content: "";position: absolute;inset: 0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);background-size: 20px 20px;z-index: 1;pointer-events: none;}      
.form-floating .form-control {border-width: 2px;transition: border-color 0.25s ease, box-shadow 0.25s ease;}
.form-floating .form-control:focus {border-color: #0061ff;box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.15);}
.form-floating label {color: rgba(0, 0, 0, 0.55);transform-origin: left top;pointer-events: none;transition: transform 0.32s cubic-bezier(.4,0,.2,1), color 0.25s ease, opacity 0.25s ease;opacity: 0.85;}
.form-floating .form-control:focus + label, .form-floating .form-control:not(:placeholder-shown) + label {color: rgba(0, 0, 0, 0.88);opacity: 1;transform: translateY(-10px) scale(0.82);}
@keyframes flutuar {0%, 100% { transform: translateY(0px); }50% { transform: translateY(-4px); }}
.logo-flutuante {animation: flutuar 4s ease-in-out infinite;transition: transform 0.3s ease;}