:root { --login-green:#1769c2; --login-dark:#071d49; --login-muted:#66758b; --login-border:#dbe5f2; }
* { box-sizing: border-box; }
body { margin: 0; color: #17231f; background: #f3f7f5; }
.obs-login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0,1.25fr) minmax(430px,.75fr); }
.obs-login-story {
  position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between;
  min-height: 100vh; padding: clamp(34px,5vw,70px); color: #fff;
  background: #071d49 url("../img/fondo_arequipa.jpg") center/cover no-repeat;
}
.obs-login-story__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(7,20,49,.96),rgba(10,61,145,.88) 55%,rgba(23,105,194,.76));
}
.obs-login-story::after {
  position: absolute; right: -15%; bottom: -35%; width: 620px; height: 620px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: "";
  box-shadow: 0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018);
}
.obs-login-story__top,.obs-login-story__content,.obs-login-story__footer { position: relative; z-index: 1; }
.obs-login-story__top { display: flex; align-items: center; gap: 14px; }
.obs-login-seal { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.obs-login-seal img { width: 44px; height: 44px; object-fit: contain; }
.obs-login-story__top strong,.obs-login-story__top span { display: block; }
.obs-login-story__top strong { color: #fff; font-size: .95rem; }
.obs-login-story__top span { margin-top: 2px; color: rgba(255,255,255,.62); font-size: .72rem; }
.obs-login-story__content { max-width: 690px; }
.obs-login-eyebrow { color: #8bc4ff; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.obs-login-story h1 { margin: 12px 0 10px; color: #fff; font-size: clamp(3rem,7vw,5.8rem); font-weight: 800; line-height: .95; letter-spacing: -.055em; }
.obs-login-story__content > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.7); font-size: clamp(1rem,1.8vw,1.25rem); line-height: 1.65; }
.obs-login-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.obs-login-features span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.07); font-size: .73rem; backdrop-filter: blur(8px); }
.obs-login-features i { color: #8bc4ff; font-size: 1rem; }
.obs-login-story__footer { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.52); font-size: .7rem; }
.obs-login-access { display: grid; min-height: 100vh; place-items: center; padding: clamp(28px,5vw,74px); background: radial-gradient(circle at 100% 0,#e2efff,transparent 32%),#f5f8fc; }
.obs-login-card { width: 100%; max-width: 430px; }
.obs-login-mobile-brand { display: none; }
.obs-login-heading { display: flex; align-items: center; gap: 13px; }
.obs-login-heading__icon { display: grid; width: 48px; height: 48px; place-items: center; color: var(--login-green); border-radius: 14px; background: #e5f0ff; font-size: 1.45rem; }
.obs-login-heading small { color: var(--login-green); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.obs-login-heading h2 { margin: 2px 0 0; color: var(--login-dark); font-size: 2rem; font-weight: 800; letter-spacing: -.035em; }
.obs-login-intro { margin: 18px 0 28px; color: var(--login-muted); line-height: 1.6; }
.obs-login-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; color: #9d343b; border: 1px solid #f2c9cd; border-radius: 12px; background: #fff1f2; font-size: .78rem; }
.obs-login-alert i { margin-top: 1px; font-size: 1rem; }
.obs-login-field { margin-bottom: 19px; }
.obs-login-field > label { display: block; margin-bottom: 8px; color: #34463f; font-size: .75rem; font-weight: 700; }
.obs-login-input { display: flex; align-items: center; height: 54px; border: 1px solid var(--login-border); border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(18,48,39,.035); transition: border .2s,box-shadow .2s; }
.obs-login-input:focus-within { border-color: var(--login-green); box-shadow: 0 0 0 4px rgba(23,105,194,.11); }
.obs-login-input > i { margin-left: 16px; color: #789088; font-size: 1.15rem; }
.obs-login-input input { min-width: 0; flex: 1; height: 100%; padding: 0 13px; color: #1d2b26; border: 0; outline: 0; background: transparent; font: inherit; }
.obs-login-input input::placeholder { color: #a4b1ac; }
.obs-password-toggle { display: grid; width: 48px; height: 100%; place-items: center; color: #789088; border: 0; outline: 0; background: transparent; cursor: pointer; }
.obs-login-options { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 4px 0 22px; }
.obs-login-options label { display: flex; align-items: center; gap: 7px; color: #586a63; font-size: .73rem; cursor: pointer; }
.obs-login-options input { accent-color: var(--login-green); }
.obs-login-secure { display: inline-flex; align-items: center; gap: 5px; color: #1769c2; font-size: .7rem; font-weight: 700; }
.obs-login-submit { display: flex; width: 100%; height: 54px; align-items: center; justify-content: center; gap: 10px; color: #fff; border: 0; border-radius: 13px; background: linear-gradient(135deg,#0a3d91,#1976d2); box-shadow: 0 12px 24px rgba(10,61,145,.26); font-weight: 700; cursor: pointer; transition: transform .2s,box-shadow .2s; }
.obs-login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(10,61,145,.32); }
.obs-login-submit i { font-size: 1.25rem; }
.obs-login-help { display: flex; align-items: center; gap: 11px; margin-top: 28px; padding: 14px; border: 1px solid var(--login-border); border-radius: 13px; background: rgba(255,255,255,.64); }
.obs-login-help > i { color: var(--login-green); font-size: 1.35rem; }
.obs-login-help p { margin: 0; color: #465a52; font-size: .72rem; line-height: 1.45; }
.obs-login-help span { color: #82918c; }
.obs-login-version { margin: 24px 0 0; color: #97a49f; font-size: .66rem; text-align: center; }
@media (max-width: 1050px) { .obs-login-shell { grid-template-columns: minmax(0,1fr) 430px; } .obs-login-story { padding: 40px; } }
@media (max-width: 820px) {
  .obs-login-shell { display: block; }
  .obs-login-story { display: none; }
  .obs-login-access { padding: 32px 22px; }
  .obs-login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 38px; color: var(--login-dark); font-weight: 800; }
  .obs-login-mobile-brand img { width: 45px; height: 45px; object-fit: contain; }
}
@media (max-width: 420px) { .obs-login-options { align-items: flex-start; flex-direction: column; } }