*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:#f5f7f6;color:#2a3232;font:15px/1.5 Jost,'Avenir Next',system-ui,sans-serif;display:grid;grid-template-columns:1.1fr 1fr;-webkit-font-smoothing:antialiased}
.foto{background:#e9ecea url(/img/login.jpg) center/cover no-repeat}
form{align-self:center;justify-self:center;width:100%;max-width:380px;padding:32px 24px}
img{width:220px;display:block;margin:0 0 36px -6px}
h1{font:400 32px/1.15 Cardo,Georgia,serif;margin:0 0 6px}p{margin:0 0 28px;color:#63706d}
label{display:block;font-size:13px;font-weight:500;color:#4d5957;margin-bottom:6px}
input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #c9d3d0;background:#fff;font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:#5e9898;box-shadow:0 0 0 3px rgb(94 152 152 / .2)}
button{margin-top:14px;width:100%;min-height:46px;border:0;border-radius:10px;background:#3c7474;color:#fff;font:500 15px Jost,system-ui,sans-serif;cursor:pointer;transition:background .15s}
button:hover{background:#2f6262}button:focus-visible{outline:2px solid #5e9898;outline-offset:2px}
.err{color:#a3402f;font-size:14px;margin-top:12px;min-height:20px}
::selection{background:#cfe3e2}
@media (max-width:760px){body{grid-template-columns:1fr;grid-template-rows:34vh 1fr}.foto{background-position:center 30%}form{align-self:start;padding-top:28px}img{width:180px;margin-bottom:24px}}