.pg-login { background: var(--sand); }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.heroi { background: radial-gradient(circle at 85% 10%, #17707b 0, transparent 45%), linear-gradient(160deg, #0d4a52, #0a363c); color: #fff; padding: 26px 20px 30px; position: relative; overflow: hidden; }
.heroi::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(185, 227, 220, .2); box-shadow: 0 0 0 36px rgba(185, 227, 220, .05), 0 0 0 72px rgba(185, 227, 220, .04); }
.marca-g { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.marca-g b { display: block; font-size: 1.2rem; line-height: 1.1; }
.marca-g small { color: var(--mint); font-size: .85rem; letter-spacing: .04em; }
.heroi h1 { font-size: 1.5rem; line-height: 1.25; max-width: 30ch; position: relative; z-index: 1; }
.pontos { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; color: #d6ebe7; font-size: .92rem; position: relative; z-index: 1; }
.pontos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caixa { padding: 18px 14px 34px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; width: 100%; margin: -14px auto 0; position: relative; z-index: 2; }
.caixa .card + .card { margin-top: 0; }
.demo-bts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
@media (min-width: 900px) {
  .login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .heroi { padding: 56px 56px; display: flex; flex-direction: column; justify-content: center; }
  .heroi h1 { font-size: 2.1rem; }
  .caixa { justify-content: center; margin: 0 auto; padding: 40px 28px; }
}