:root{--blue1:#112438;--blue2:#1e293b;--text:#1e293b;--gray:#64748b}
*{margin:0;padding:0;box-sizing:border-box}
body,html{height:100%;font-family:'Inter',sans-serif;color:var(--text);overflow:hidden}

/* === SLIDER DE FONDO === */
.bg-slider{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2}
.bg-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease-in-out}
.bg-slide.active{opacity:1}
.overlay{position:fixed;inset:0;background:rgba(10,38,64,.38);pointer-events:none;z-index:-1}

/* === CONTENEDOR PRINCIPAL === */
.container{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-wrapper{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;width:100%;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
@media(max-width:992px){.login-wrapper{grid-template-columns:1fr}}

/* === PANEL IZQUIERDO - LOGIN === */
.login-panel{padding:60px 50px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.logo{width:180px;margin-bottom:40px;filter:brightness(0)}
h1{font-size:34px;font-weight:800;margin-bottom:8px;color:var(--text)}
.login-panel p{font-size:16px;color:#555;margin-bottom:40px}
.input-group{margin-bottom:20px;position:relative}
.input-group input{width:100%;padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;transition:all .3s}
.input-group input:focus{outline:none;border-color:var(--blue2);box-shadow:0 0 0 5px rgba(10,110,255,.15)}
.btn-login{width:100%;padding:16px;background:var(--blue2);color:#fff;border:none;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer;transition:.3s}
.btn-login:hover{background:#1e293b;transform:translateY(-2px)}
.recovery-link{margin-top:20px;text-align:center;font-size:14px}
.recovery-link a{color:var(--text);text-decoration:none}
.recovery-link a:hover{text-decoration:underline}

/* === PANEL DERECHO - INFO === */
.info-panel{padding:60px 50px;background:linear-gradient(135deg,var(--blue1),var(--blue2));color:#fff;display:flex;flex-direction:column;justify-content:center}
.info-panel h2{font-size:34px;font-weight:800;margin-bottom:20px;line-height:1.2}
.info-panel p{font-size:16px;line-height:1.7;margin-bottom:30px;opacity:.95}
.info-features{list-style:none}
.info-features li{margin:14px 0;padding-left:28px;position:relative;font-size:16px}
/*.info-features li:before{content:"Checkmark";color:#fff;font-weight:900;position:absolute;left:0}*/
footer{margin-top:auto;font-size:13px;opacity:.8}

/* === CONTROLES DEL SLIDER === */
.controls{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:20px;background:rgba(0,0,0,.4);padding:12px 24px;border-radius:50px}
.arrow{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;opacity:.7;transition:.3s}
.arrow:hover{opacity:1;transform:scale(1.2)}
.dots{display:flex;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.4;transition:.3s;cursor:pointer}
.dot.active{opacity:1;transform:scale(1.3);background:#112438}

@media(max-width:576px){
    section{padding:40px 30px}
    h1,.info-panel h2{font-size:30px}
    .controls{bottom:15px;padding:10px 20px}
}
.error{
    color:red;
    padding-bottom: 10px;
}