/* Telas de entrar, convite e nova senha das lojas: sempre escuras, em duas colunas (a marca à esquerda, o formulário à direita). */
html, body { background: #0E1013; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: #F2F4F5; }
.login-marca { position: relative; overflow: hidden; padding: 0 clamp(24px, 7vw, 120px); background: #111418; border-right: 1px solid #1D2126; }
.login-marca > div { position: sticky; top: 0; z-index: 1; max-width: 480px; min-height: 100vh; padding: 56px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }   /* fica parado no meio quando o formulário é longo */
.login .marca { color: #F2F4F5; margin-bottom: 40px; }
.login .marca .selo { background: #C6F432; color: #0E1013; }
.login .marca-crm { background: #C6F432; color: #0E1013; }
.pilula { display: inline-block; font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #D6F75F; padding: 7px 11px; border: 1px solid rgba(198, 244, 50, .28); border-radius: 999px; margin-bottom: 18px; }
.login-marca h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin: 0 0 16px; }
.login-marca h1 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: #C6F432; letter-spacing: -.01em; }
.login-marca .apoio { color: #A3ABB4; font-size: 15px; line-height: 1.6; margin: 0 0 30px; }
.vantagens { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vantagens li { display: flex; align-items: center; gap: 14px; color: #C9CED4; font-size: 14px; }
.vantagens .ic-bola { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(198, 244, 50, .1); border: 1px solid rgba(198, 244, 50, .18); color: #C6F432; }
.vantagens .ic-bola svg { width: 18px; height: 18px; }

.login-lado { display: grid; place-items: center; padding: 40px 20px; }
.login-cartao { width: min(400px, 100%); background: #16191D; border: 1px solid #262B31; border-radius: 22px; padding: 34px 30px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.login-cartao h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-align: center; margin: 0 0 6px; }
.login-cartao .sub { text-align: center; color: #9AA2AB; margin: 0 0 22px; }
.login-cartao label { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 700; color: #C9CED4; margin: 16px 0 7px; }
.login-cartao input[type=text], .login-cartao input[type=email], .login-cartao input[type=password] {
  border-radius: 999px; padding: 12px 18px; background: #1D2126; border-color: #2C3138; color: #F2F4F5; }
.login-cartao input::placeholder { color: #6B737C; }
.login-cartao input:focus { outline: 2px solid #C6F432; outline-offset: 1px; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 48px !important; }
.campo-senha button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0;
  border: 0; background: transparent; color: #9AA2AB; border-radius: 50%; }
.campo-senha button:hover { background: #262B31; color: #F2F4F5; }
.campo-senha button svg { width: 18px; height: 18px; }
.login-cartao button.entrar-bt { width: 100%; margin-top: 24px; padding: 14px 20px; font-size: 15px; font-weight: 700;
  background: #C6F432; border-color: #C6F432; color: #0E1013; box-shadow: 0 10px 30px rgba(198, 244, 50, .18); }
.login-cartao button.entrar-bt:hover { background: #D6F75F; border-color: #D6F75F; opacity: 1; }
.login-cartao button.entrar-bt svg { width: 18px; height: 18px; }
.login-rodape { text-align: center; color: #9AA2AB; font-size: 13px; margin: 18px 0 0; }
.login-rodape a { color: #C6F432; font-weight: 700; text-decoration: none; }
.login-rodape a:hover { text-decoration: underline; }
/* Criar conta (primeira vez, só no computador do dono): a lista de ramos no tema escuro */
.login-cartao .explica { font-size: 13px; color: #9AA2AB; }
.login-cartao .opcoes-ramo label { text-transform: none; letter-spacing: 0; font-size: 14px; color: #F2F4F5; border-color: #2C3138; }
.login-cartao .opcoes-ramo label:has(input:checked) { border-color: #C6F432; background: #1D2126; }
.login-cartao.largo { width: min(520px, 100%); }

@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-marca { padding: 0 20px; border-right: 0; border-bottom: 1px solid #1D2126; }
  .login-marca > div { position: relative; min-height: 0; padding: 36px 0 28px; }
  .login .marca { margin-bottom: 22px; }
  .login-marca h1 { font-size: 30px; }
  .login-marca .apoio { margin-bottom: 0; }
  .vantagens { display: none; }
  .login-lado { padding: 28px 16px 40px; place-items: start center; }
  .login-cartao { padding: 28px 20px 24px; }
}
.linha-lembrar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13.5px; }
.linha-lembrar label.lembrar { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 13.5px; font-weight: 500; color: #C9CED4; cursor: pointer; }
.linha-lembrar input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: #C6F432; }
.link-lima { color: #C6F432; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-size: 13.5px; cursor: pointer; }
.link-lima:hover { text-decoration: underline; background: none; }
.feito { text-align: center; }
.feito .bola { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center;
  background: rgba(198, 244, 50, .12); border: 1px solid rgba(198, 244, 50, .25); color: #C6F432; }
.feito .bola svg { width: 26px; height: 26px; }
.login-cartao .email-fixo { display: block; padding: 12px 18px; border-radius: 999px; background: #121418; border: 1px dashed #2C3138; color: #C9CED4; font-size: 14px; overflow-wrap: anywhere; }
.opcoes-ramo.compacto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcoes-ramo.compacto label { padding: 10px 12px; align-items: center; }
.opcoes-ramo.compacto b { font-size: 13.5px; line-height: 1.3; }
.opcoes-ramo.compacto .desc, .opcoes-ramo.compacto .forma-ramo { display: none; }
.opcoes-ramo.compacto label:has(input:checked) { grid-column: 1 / -1; align-items: flex-start; }
.opcoes-ramo.compacto label:has(input:checked) .desc, .opcoes-ramo.compacto label:has(input:checked) .forma-ramo { display: block; margin-top: 3px; }
@media (max-width: 480px) { .opcoes-ramo.compacto { grid-template-columns: minmax(0, 1fr); } }
.login-cartao label.aceite { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; text-transform: none; letter-spacing: 0;
  font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #C9CED4; cursor: pointer; }
.login-cartao label.aceite input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: #C6F432; }
.login-cartao label.aceite a { color: #C6F432; font-weight: 700; text-decoration: none; }
.login-cartao label.aceite a:hover { text-decoration: underline; }
/* regras da senha nova: cinza até cumprir, verde quando cumpre */
.regras-senha { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.regras-senha li { font-size: 12px; color: #9AA2AB; border: 1px solid #2C3138; border-radius: 999px; padding: 3px 10px; }
.regras-senha li.ok { color: #101208; background: #C6F432; border-color: #C6F432; }
.senha-difere { color: #FF8A80; margin: 6px 0 0; }