/* Telas de login e cadastro */
body { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.lado { background: var(--degrade); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.lado .logo { color: #fff; }
.lado .logo b { color: var(--azul-300); }
.lado h1 { font-size: 2.2rem; letter-spacing: -.02em; max-width: 440px; }
.lado p { opacity: .9; max-width: 440px; }
.lado small { opacity: .8; }
.lado a { color: #fff; }
.etapas { padding-left: 1.2em; display: grid; gap: .6em; max-width: 420px; opacity: .95; }
.area { display: grid; place-items: center; padding: 32px 16px; }
form { width: 100%; max-width: 380px; }
form.largo { max-width: 520px; }
form h2 { font-size: 1.6rem; }
form p.sub { color: var(--texto-suave); margin-top: -.3em; margin-bottom: 1.6rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
label small { font-weight: 400; color: var(--texto-suave); }
input { display: block; width: 100%; margin-top: .4em; padding: .8em 1em; border: 1px solid var(--borda); border-radius: 10px; font: inherit; background: var(--azul-50); }
input:focus { border-color: var(--azul-400); background: #fff; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
fieldset.tipo { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: 10px; }
fieldset.tipo legend { font-weight: 600; font-size: .9rem; margin-bottom: .5em; }
fieldset.tipo label { flex: 1; display: flex; align-items: center; gap: .5em; margin: 0; padding: .7em 1em; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; font-weight: 500; }
fieldset.tipo label:has(input:checked) { border-color: var(--azul-400); background: var(--azul-50); color: var(--azul-700); }
fieldset.tipo input { width: auto; margin: 0; }
fieldset.modo label { align-items: flex-start; }
fieldset.modo label span { display: grid; gap: 2px; }
fieldset.modo small { font-weight: 400; color: var(--texto-suave); font-size: .8rem; }
fieldset.modo input { margin-top: 4px; }
.btn { width: 100%; margin-top: .5rem; }
.erro { background: #fdecec; color: var(--perigo); padding: .7em 1em; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; }
.voltar { display: inline-block; margin-top: 1.5rem; font-size: .9rem; }
.logo-mobile { display: none; color: var(--texto); margin-bottom: 2rem; }
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .lado { display: none; }
  .logo-mobile { display: inline-flex; }
}
@media (max-width: 480px) { .duas { grid-template-columns: 1fr; } }

.logo-marca{object-fit:contain;border-radius:8px}.logo b{color:inherit}