@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Outfit:wght@300;400;500&display=swap');

:root{--bg:#f5f2ec;--card:#fbfaf7;--fg:#1f2b25;--muted:#626864;--border:#d9d3c8;--moss:#2b4939;--dark:#213229;--gold:#b58b42;--gold-light:#d4af69;--danger:#a33d37}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:300 16px/1.6 'Outfit',system-ui,sans-serif;letter-spacing:.01em}
img{display:block;max-width:100%}
a{color:inherit}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.4em;font-size:.62rem;color:var(--gold)}

.login{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr}

/* Lado da imagem */
.login-visual{position:relative;overflow:hidden;background:var(--dark)}
.login-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:slowzoom 18s ease-out forwards}
.login-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,29,24,.88),rgba(19,29,24,.25) 55%,rgba(19,29,24,.15))}
.login-visual__text{position:absolute;left:clamp(28px,5vw,64px);right:clamp(28px,5vw,64px);bottom:clamp(32px,7vh,72px);z-index:1;color:#f5efe6}
.login-visual__quote{margin:14px 0 0;white-space:nowrap;font:300 clamp(1.6rem,2.6vw,2.5rem)/1.1 'Cormorant Garamond',serif;font-style:italic;color:#e7c98c}
@keyframes slowzoom{to{transform:scale(1)}}

/* Lado do formulário */
.login-panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,72px) clamp(20px,5vw,64px)}
.login-card{width:100%;max-width:400px}
.login-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.login-brand img{width:44px;height:44px;object-fit:contain}
.login-brand span{display:flex;flex-direction:column;line-height:1}
.login-brand strong{font:400 18px 'Cormorant Garamond',serif;letter-spacing:.08em}
.login-brand small{margin-top:5px;font-size:.55rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.login-head{margin:44px 0 30px}
.login-head h1{margin:12px 0 8px;font:300 clamp(2.2rem,4vw,2.8rem)/1.05 'Cormorant Garamond',serif}
.login-sub{margin:0;color:var(--muted);font-size:.92rem}

.field{margin-bottom:18px}
.field label{display:block;margin-bottom:7px;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--muted)}
.field-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.field input{width:100%;height:48px;padding:0 14px;border:1px solid var(--border);border-radius:3px 14px 3px 3px;background:var(--card);color:var(--fg);font:inherit;outline:0;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#a9a69f}
.field input:focus{border-color:var(--moss);box-shadow:0 0 0 3px rgba(43,73,57,.12)}
.field.error input{border-color:var(--danger)}
.field-error{margin:6px 0 0;min-height:0;font-size:.74rem;color:var(--danger)}
.field-error:empty{display:none}
.password-wrap{position:relative}
.password-wrap input{padding-right:48px}
.toggle-pass{position:absolute;top:0;right:0;width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer}
.toggle-pass:hover,.toggle-pass:focus-visible{color:var(--moss);outline:0}
.toggle-pass svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.toggle-pass .i-eye-off{display:none}
.toggle-pass[aria-pressed="true"] .i-eye{display:none}
.toggle-pass[aria-pressed="true"] .i-eye-off{display:block}
.caps-warning{margin:6px 0 0;font-size:.74rem;color:var(--gold)}
.link-muted{font-size:.74rem;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.link-muted:hover{color:var(--moss);border-color:currentColor}

.remember{display:flex;align-items:center;gap:10px;margin:4px 0 26px;font-size:.86rem;color:var(--muted);cursor:pointer}
.remember input{width:16px;height:16px;accent-color:var(--moss)}

.btn-login{position:relative;width:100%;height:52px;border:0;border-radius:3px 16px 3px 3px;background:var(--moss);color:#fff;font:400 .7rem 'Outfit',sans-serif;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}
.btn-login:hover{background:#223c2e;transform:translateY(-1px);box-shadow:0 16px 34px -22px rgba(33,50,41,.9)}
.btn-login:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-login[disabled]{cursor:wait;opacity:.85;transform:none}
.spinner{display:none;position:absolute;right:18px;top:50%;width:16px;height:16px;margin-top:-8px;border:1.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.btn-login.is-loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.form-status{margin:16px 0 0;font-size:.84rem;min-height:1.2em}
.form-status.error{color:var(--danger)}
.form-status.info{color:var(--gold)}
.form-status.done{color:var(--moss)}

.login-foot{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.login-foot a{text-decoration:none;color:var(--moss)}
.login-foot a:hover{text-decoration:underline}

@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-visual{min-height:200px;max-height:32vh}
  .login-visual__text{bottom:22px}
  .login-visual__quote{font-size:clamp(1.3rem,5.6vw,1.9rem)}
  .login-head{margin:32px 0 24px}
}
@media (prefers-reduced-motion:reduce){.login-visual img{animation:none;transform:none}}