@font-face { font-family:'Movistar Sans'; src:url('../fonts/movistar-sans/MovistarSans-Regular.woff2') format('woff2'),url('../fonts/movistar-sans/MovistarSans-Regular.woff') format('woff'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Movistar Sans'; src:url('../fonts/movistar-sans/MovistarSans-Medium.woff2') format('woff2'),url('../fonts/movistar-sans/MovistarSans-Medium.woff') format('woff'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:'Movistar Sans'; src:url('../fonts/movistar-sans/MovistarSans-Bold.woff2') format('woff2'),url('../fonts/movistar-sans/MovistarSans-Bold.woff') format('woff'); font-style:normal; font-weight:700; font-display:swap; }
:root { --primary:#1957c2; --primary-dark:#103d8e; --ink:#172033; --muted:#667085; --border:#d9e0eb; --background:#f4f7fb; color-scheme:light; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { background:var(--background); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
.login-page, .login-shell { min-height:100vh; }
.login-shell { display:grid; grid-template-columns:minmax(360px,1.05fr) minmax(440px,.95fr); }
.login-shell.is-movistar { --primary:#0066ff; --primary-dark:#022d67; --ink:#262423; --muted:#605e5c; --border:#dfdbd6; --background:#fffaf5; font-family:'Movistar Sans',Arial,Helvetica,sans-serif; }
.login-brand { position:relative; display:flex; align-items:center; overflow:hidden; padding:clamp(48px,8vw,112px); color:#fff; background:linear-gradient(145deg,#123675 0%,var(--primary) 58%,#3488df 100%); }
.is-movistar .login-brand { background:#0066ff; }
.brand-content { position:relative; z-index:1; max-width:610px; }
.brand-kicker, .eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.brand-kicker { margin:0 0 20px; color:#cfe2ff; }
.is-movistar .brand-kicker { color:#d3eeff; }
.brand-content h1 { margin:0; font-size:clamp(38px,5vw,68px); line-height:1.04; letter-spacing:-.035em; }
.brand-copy { max-width:500px; margin:24px 0 0; color:#e6efff; font-size:18px; line-height:1.6; }
.is-movistar .brand-copy { color:#fffaf5; }
.brand-decoration { position:absolute; right:-18%; bottom:-28%; width:65%; aspect-ratio:1; border:80px solid rgba(255,255,255,.08); border-radius:50%; }
.is-movistar .brand-decoration { border-color:#d3eeff; opacity:.2; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:48px; background:#fffaf5; }
.is-movistar .login-panel { background:#fffaf5; }
.login-card { width:min(100%,420px); }
.login-logo { display:block; width:auto; max-width:210px; max-height:76px; margin-bottom:48px; object-fit:contain; object-position:left center; }
.login-product-brand { display:flex; align-items:center; gap:17px; min-height:92px; margin-bottom:42px; }
.login-product-brand .login-logo { margin-bottom:0; }
.login-logo-movistar { width:92px; max-width:92px; max-height:none; }
.product-name { padding-left:17px; border-left:1px solid #ccd4e0; color:var(--ink); font-size:25px; line-height:1.1; letter-spacing:-.025em; white-space:nowrap; }
.is-movistar .product-name { border-left-color:#dfdbd6; }
.product-name strong { color:var(--primary); font-weight:700; }
.login-card header { margin-bottom:30px; }
.eyebrow { margin:0 0 9px; color:var(--primary); }
.login-card h2 { margin:0; font-size:34px; letter-spacing:-.025em; }
.login-card header>p:last-child { margin:10px 0 0; color:var(--muted); }
.login-alert { margin-bottom:22px; padding:13px 15px; border:1px solid #f4b9b9; border-radius:9px; background:#fff1f1; color:#9e2424; font-size:14px; }
.is-movistar .login-alert { border-color:#ffc5a8; background:#ffc5a8; color:#62301a; }
.field-group { margin-bottom:20px; }
.field-group label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; }
.field-group input { width:100%; height:50px; padding:0 14px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s,box-shadow .15s; }
.field-group input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(25,87,194,.13); }
.password-control { position:relative; }
.password-control input { padding-right:62px; }
.password-toggle { position:absolute; top:0; right:5px; height:50px; border:0; background:transparent; color:var(--primary); cursor:pointer; font-size:13px; font-weight:700; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 26px; font-size:14px; }
.remember-option { display:flex; align-items:center; gap:8px; color:var(--muted); cursor:pointer; }
.remember-option input { width:16px; height:16px; accent-color:var(--primary); }
.link-button { padding:0; border:0; background:transparent; color:var(--primary); cursor:pointer; }
.link-button:hover { text-decoration:underline; }
.signin-button { width:100%; min-height:52px; border:0; border-radius:9px; background:var(--primary); color:#fff; cursor:pointer; font-weight:700; box-shadow:0 8px 20px rgba(25,87,194,.2); transition:background .15s,transform .15s; }
.signin-button:hover { background:var(--primary-dark); }
.signin-button:active { transform:translateY(1px); }
.recovery-modal[hidden] { display:none; }
.recovery-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }
.recovery-backdrop { position:absolute; inset:0; background:rgba(10,20,40,.58); }
.recovery-dialog { position:relative; width:min(100%,480px); overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.3); }
.recovery-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.recovery-header h2 { margin:0; font-size:20px; }
.modal-close { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:28px; line-height:1; }
.recovery-dialog iframe { display:block; width:100%; height:220px; border:0; background:#fff; }
body.modal-open { overflow:hidden; }
@media (max-width:850px) { .login-shell{grid-template-columns:1fr}.login-brand{min-height:250px;padding:46px 32px;align-items:flex-end}.brand-content h1{font-size:clamp(32px,9vw,48px)}.brand-copy{display:none}.login-panel{padding:48px 24px 64px}.login-logo{margin-bottom:34px} }
@media (max-width:480px) { .login-brand{min-height:205px;padding:34px 22px}.login-panel{padding:38px 20px 52px}.login-card h2{font-size:30px}.login-options{align-items:flex-start;flex-direction:column}.login-product-brand{gap:13px;margin-bottom:34px}.login-logo-movistar{width:76px;max-width:76px}.product-name{padding-left:13px;font-size:22px} }