/* ==========================================================================
   /comecar — cadastro com a identidade da landing
   Camada em cima de landing.css (lp-auth*, lp-field, lp-input…): só o que é próprio do cadastro.
   Prefixo: cm-. A cena do painel escuro vem de /lp/builder.css.
   ========================================================================== */

.cm-page { margin: 0; }

.cm-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- topo: "Já tem conta? Entrar" no lugar do "Voltar ao site" ---- */
.cm-login { margin: 0; font-size: .9rem; color: var(--lp-muted); }
.cm-login .lp-link { margin-left: .25rem; padding: .45rem .9rem; border: 1px solid var(--lp-border-strong); border-radius: 999px; }
.cm-login .lp-link:hover { background: var(--lp-surface); text-decoration: none; }
@media (max-width: 380px) { .cm-login-text { display: none; } }

.cm-auth .lp-auth-body { max-width: 28rem; }
.cm-auth .lp-auth-head p { max-width: 26rem; }

/* ---- resumo do que a pessoa ganha (só no celular/tablet: no computador o painel escuro faz esse papel) ---- */
.cm-pitch {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.4rem 0 0;
  padding: 0;
}

.cm-pitch li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--lp-border);
  border-radius: .9rem;
  background: var(--lp-surface);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
}

.cm-pitch .ti { flex: none; font-size: 1.15rem; color: var(--lp-ink); }
@media (min-width: 1024px) { .cm-pitch { display: none; } }

.cm-sso { margin-top: 1.75rem; }
.cm-auth .lp-auth-form { margin-top: 1.5rem; gap: 1.1rem; }
.lp-divider { text-transform: none; }

/* ---- campos ---- */
.cm-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 360px) { .cm-2 { grid-template-columns: minmax(0, 1fr); } }

.cm-opt { font-weight: 500; color: var(--lp-faint); }

.cm-tick { position: absolute; right: .9rem; font-size: 1.15rem; color: rgb(var(--lpc-success)); pointer-events: none; }
.lp-ctrl .lp-input[type="email"], .lp-ctrl .lp-input[type="tel"] { padding-right: 2.6rem; }

.lp-input:focus-visible { outline: none; }
.lp-input.is-invalid:focus { box-shadow: 0 0 0 4px rgb(var(--lpc-failure) / .14); }

/* mensagens curtas ao vivo (dica, aviso, erro, ok) */
.cm-msg { display: flex; align-items: flex-start; gap: .4rem; margin: .45rem 0 0; font-size: .8125rem; line-height: 1.4; font-weight: 550; color: var(--lp-muted); }
.cm-msg .ti { flex: none; margin-top: .05rem; font-size: 1rem; }
.cm-msg-ok { color: rgb(var(--lpc-success)); }
.cm-msg-err { color: rgb(var(--lpc-failure)); }
.cm-msg-warn { color: #b45309; }
:root[data-mode="dark"] .cm-msg-warn { color: #fbbf24; }
.cm-msg-hint .ti { color: #b45309; }
:root[data-mode="dark"] .cm-msg-hint .ti { color: #fbbf24; }

.cm-fix { padding: 0; border: 0; background: none; color: var(--lp-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cm-fix:hover { text-decoration-thickness: 2px; }

/* ---- força da senha ---- */
.cm-meter { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; }
.cm-meter-bars { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.cm-meter-bars i { display: block; height: .3rem; border-radius: 999px; background: var(--lp-border-strong); transition: background-color .25s ease; }
.cm-meter-label { min-width: 4.4rem; font-size: .8125rem; font-weight: 700; text-align: right; color: var(--lp-muted); }

.cm-score-1 .cm-meter-bars i:nth-child(-n+1) { background: rgb(var(--lpc-failure)); }
.cm-score-1 .cm-meter-label { color: rgb(var(--lpc-failure)); }
.cm-score-2 .cm-meter-bars i:nth-child(-n+2) { background: #f59e0b; }
.cm-score-2 .cm-meter-label { color: #b45309; }
.cm-score-3 .cm-meter-bars i:nth-child(-n+3) { background: #84cc16; }
.cm-score-3 .cm-meter-label { color: #4d7c0f; }
.cm-score-4 .cm-meter-bars i { background: rgb(var(--lpc-success)); }
.cm-score-4 .cm-meter-label { color: #15803d; }
:root[data-mode="dark"] .cm-score-2 .cm-meter-label { color: #fbbf24; }
:root[data-mode="dark"] .cm-score-3 .cm-meter-label { color: #a3e635; }
:root[data-mode="dark"] .cm-score-4 .cm-meter-label { color: #4ade80; }

/* ---- requisitos ---- */
.cm-rules { list-style: none; display: grid; gap: .35rem; margin: .7rem 0 0; padding: 0; }
.cm-rules li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.35; color: var(--lp-muted); transition: color .2s ease; }
.cm-rules li .ti { flex: none; margin-top: .05rem; font-size: 1.05rem; color: var(--lp-faint); transition: color .2s ease, transform .2s ease; }
.cm-rules li em { flex: none; margin-left: auto; padding: .05rem .5rem; border: 1px solid var(--lp-border); border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 650; letter-spacing: .02em; color: var(--lp-faint); }
.cm-rules li.is-ok { color: var(--lp-ink); }
.cm-rules li.is-ok .ti { color: rgb(var(--lpc-success)); transform: scale(1.12); }
.cm-rules li.is-bad { color: rgb(var(--lpc-failure)); }
.cm-rules li.is-bad .ti { color: rgb(var(--lpc-failure)); }

.cm-submit { width: 100%; margin-top: .25rem; }
.cm-submit:disabled { cursor: progress; }
.cm-submit .lp-spin { border-color: rgb(var(--lpc-contrast-primary) / .3); border-top-color: rgb(var(--lpc-contrast-primary)); }

.cm-legal { margin: .1rem 0 0; font-size: .8125rem; line-height: 1.5; text-align: center; color: var(--lp-faint); }
.cm-legal a { color: var(--lp-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cm-auth .lp-auth-legal { margin-top: 1.75rem; }

/* ---- painel escuro: fica parado enquanto o formulário rola ---- */
@media (min-width: 1024px) {
  .cm-brand { position: sticky; top: 0; align-self: start; height: 100vh; padding: 2rem 3rem; }
}

.cm-brand .lp-auth-brand-inner { width: 100%; max-width: 33rem; }
.cm-brand h2 { margin: 1.1rem 0 1.5rem; font-size: clamp(1.45rem, 2.1vw, 1.9rem); }
.cm-brand .lb { max-width: none; }
.cm-brand .lb-page { min-height: 18.5rem; }
.cm-brand .lp-auth-brand-foot { margin-top: 1.5rem; }

/* Telas baixas: o painel é decoração, então cede espaço antes de cortar a cena */
@media (min-width: 1024px) and (max-height: 820px) {
  .cm-brand .lb-page { min-height: 16rem; }
  .cm-brand .lp-auth-brand-foot { display: none; }
}

/* ---- aviso flutuante (elemento <toast-message> da plataforma, que não tem o CSS do tema aqui) ---- */
.cm-toast {
  position: fixed;
  left: 50%;
  bottom: -6rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .8rem 1.1rem;
  border-radius: 1rem;
  background: var(--lp-ink);
  color: var(--lp-bg);
  box-shadow: var(--lp-shadow-lg);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: bottom .3s ease, opacity .3s ease, visibility .3s;
  cursor: pointer;
}

.cm-toast[data-open] { bottom: calc(1.25rem + env(safe-area-inset-bottom)); opacity: 1; visibility: visible; }
.cm-toast .ti { flex: none; font-size: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .cm-toast { transition: none; }
  .cm-rules li, .cm-rules li .ti, .cm-meter-bars i { transition: none !important; }
}