*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:url('../images/escolalogin.png') center center no-repeat;background-size:cover;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.container{width:100%;max-width:1000px;height:620px;background:#fff;border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;position:relative;z-index:1}
/* Welcome Section */
.welcome-section{position:relative;background:linear-gradient(rgba(52, 107, 152, 0.548),rgba(52, 107, 152, 0.548));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center}
.welcome-section::before{content:"";position:absolute;inset:0;background:url('../images/dalces-logo.webp') center center no-repeat;background-size:60% auto;opacity:.12;pointer-events:none}
.welcome-section>*{position:relative;z-index:1}
.welcome-section h1{font-size:2.25rem;font-weight:700;margin-bottom:1.5rem}
.welcome-section p{font-size:1.125rem;line-height:1.75;max-width:400px;margin-bottom:3rem;opacity:.95}
.portal-buttons{width:100%;max-width:350px;display:flex;flex-direction:column;gap:1rem}
.portal-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.875rem 1.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:.5rem;color:#fff;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;backdrop-filter:blur(10px)}
.portal-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.portal-btn svg{width:20px;height:20px}
/* Login Section */
.login-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 3.25rem}
.login-content{width:100%;max-width:360px}
.logo-section{text-align:center;margin-bottom:2rem}
.logo-section img{height:64px;width:auto;margin-bottom:1rem}
.logo-section h2{font-size:1.875rem;color:#3d4852;margin-bottom:.5rem}
.logo-section p{color:#374151}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.875rem;color:#1f2937;margin-bottom:.5rem;font-weight:500}
.input-wrapper{position:relative}
.input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#4b5563;width:20px;height:20px}
.form-input{width:100%;padding:.875rem 1rem .875rem 2.75rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:1rem;transition:all .2s;background:#fff}
.form-input:focus{outline:none;border-color:#4b7cb8;box-shadow:0 0 0 3px rgba(75,124,184,.1)}
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.remember-me{display:flex;align-items:center;gap:.5rem}
.remember-me input[type="checkbox"]{width:16px;height:16px;cursor:pointer}
.remember-me label{font-size:.875rem;color:#1f2937;cursor:pointer;margin:0}
.forgot-password{font-size:.875rem;color:#4b7cb8;text-decoration:none}
.forgot-password:hover{text-decoration:underline}
.btn-login{width:100%;padding:.875rem;background:#4b7cb8;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}
.btn-login:hover{background:#3d6498;transform:translateY(-1px);box-shadow:0 4px 12px rgba(75,124,184,.3)}
.signup-link{text-align:center;margin-top:1.5rem;font-size:.875rem;color:#374151}
.signup-link a{color:#4b7cb8;font-weight:500;text-decoration:none}
.signup-link a:hover{text-decoration:underline}
/* Responsive */
@media (max-width:1024px){.container{grid-template-columns:1fr;height:auto}.welcome-section{display:none}.login-section{padding:2rem}}
@media (max-width:640px){.container{border-radius:0;box-shadow:none}.login-section{padding:1.5rem}.logo-section h2{font-size:1.5rem}}