*{box-sizing:border-box}
body{margin:0;background:#f3f8f5;color:var(--txt);
  --txt:#18231e;--fraco:#63756c;--card:#fff;--linha:#dce9e0;
  --grave:#b3261e;--grave-bg:#fdecea;--verde:#17855a;--verde-fraco:#e3f4e9;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
::selection{background:var(--verde-fraco);color:var(--txt)}
.tela{min-height:100svh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(145deg,#f8fbf9,#edf6f0)}
.acesso{width:100%;max-width:380px;padding:2rem;border:1px solid #dce9e0;
  border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(12,64,50,.08)}
.marca{display:flex;flex-direction:column;align-items:center;margin-bottom:1.8rem;text-align:center}
.marca img{display:block;width:118px;height:118px;object-fit:cover;object-position:left;
  border-radius:50%;background:#0b352c}
.marca h1{margin:.75rem 0 0;color:#123b2f;font-size:1.55rem;font-weight:750;
  letter-spacing:-.035em;line-height:1.1}
form{display:flex;flex-direction:column;gap:1.05rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo label{font-size:.83rem;font-weight:600}
.caixa{position:relative;display:flex}
input[type=text],input[type=password]{width:100%;padding:.72rem .85rem;font:inherit;
  color:var(--txt);background:var(--card);border:1px solid var(--linha);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--fraco);opacity:.7}
input:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 22%,transparent)}
.caixa input{padding-right:4.2rem}
.revelar{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;
  background:none;color:var(--fraco);cursor:pointer;font:600 .78rem/1 inherit;
  font-family:inherit;padding:.42rem .5rem;border-radius:7px}
.revelar:hover{color:var(--verde);background:var(--verde-fraco)}
.revelar:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.aviso{margin:0;padding:.65rem .8rem;border-radius:10px;background:var(--grave-bg);
  color:var(--grave);font-size:.87rem;font-weight:600}
button.entrar{padding:.75rem 1rem;border:1px solid var(--verde);border-radius:10px;
  background:var(--verde);color:#fff;font:600 .95rem/1.2 inherit;font-family:inherit;
  cursor:pointer;transition:filter .15s}
button.entrar:hover{filter:brightness(1.08)}
button.entrar:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
button.entrar[disabled]{opacity:.72;cursor:progress}
@media (max-width:440px){.tela{padding:1rem}.acesso{padding:1.5rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}