/* Tela de login — sem .topo/.abas (o usuário ainda não está autenticado). */
body.pg-login {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(600px 400px at 15% 10%, color-mix(in srgb, var(--primaria) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, color-mix(in srgb, var(--primaria) 8%, transparent), transparent 60%),
    var(--fundo);
  padding: 24px;
}
.pg-tema { position: fixed; top: 18px; right: 18px; min-width: 40px; min-height: 40px; justify-content: center; }
.pg-caixa {
  width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.pg-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pg-marca .logo {
  width: 40px; height: 40px; border-radius: 11px; background: var(--primaria); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.pg-marca h1 { font-size: 17px; margin: 0; }
.pg-marca small { color: var(--texto-3); font-size: 12px; }
.pg-senha-wrap { position: relative; }
.pg-senha-wrap input { padding-right: 42px !important; }
.pg-olho {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: var(--texto-3); padding: 6px; min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 6px;
}
.pg-olho:hover { color: var(--texto); background: var(--superficie-2); }
.pg-erro {
  background: var(--perigo-suave); color: var(--perigo); border: 1px solid color-mix(in srgb, var(--perigo) 35%, transparent);
  border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px;
}
.pg-entrar { width: 100%; justify-content: center; padding: 10px; font-size: 14px; margin-top: 4px; }
.pg-nota { text-align: center; color: var(--texto-3); font-size: 11.5px; margin: 18px 0 0; }
.pg-entrar:disabled { opacity: .6; cursor: default; }

/* -------- link "agendar demonstração" + modal de captação de lead -------- */
.pg-demo-link {
  display: block; width: 100%; text-align: center; margin-top: 14px; padding: 10px; background: none; border: none;
  color: var(--texto-3); font-size: 12.5px; cursor: pointer;
}
.pg-demo-link span { color: var(--primaria); font-weight: 600; }
.pg-demo-link:hover span { text-decoration: underline; }

.modal-fundo {
  position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--fundo) 78%, transparent);
  backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-fundo.aberto { opacity: 1; pointer-events: auto; }
.pg-demo-modal {
  position: fixed; z-index: 91; top: 50%; left: 50%; width: min(460px, 92vw); max-height: 88vh; overflow-y: auto;
  transform: translate(-50%, -47%) scale(.97); opacity: 0; pointer-events: none;
  transition: opacity .28s cubic-bezier(.16,.8,.3,1), transform .28s cubic-bezier(.16,.8,.3,1);
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5), 0 0 40px -14px var(--glow);
}
.pg-demo-modal.aberto { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .pg-demo-modal, .modal-fundo { transition: none; } }
.pg-demo-modal h2 { font-size: 18px; padding-right: 20px; }
.pg-demo-sub { font-size: 13px; color: var(--texto-2); margin: 8px 0 18px; line-height: 1.5; }
.pg-demo-modal .modal-fechar {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--borda-forte);
  background: var(--superficie-2); color: var(--texto-2); display: grid; place-items: center; cursor: pointer; font-size: 14px; line-height: 1; z-index: 2;
}
.pg-demo-modal .modal-fechar:hover { color: var(--texto); border-color: var(--primaria); }
.pg-demo-check {
  width: 48px; height: 48px; border-radius: 50%; background: var(--sucesso-suave); color: var(--sucesso);
  display: grid; place-items: center; font-size: 22px; font-weight: 700; margin: 4px auto 16px;
}
#demo-passo-sucesso { text-align: center; }
#demo-passo-sucesso h2 { padding-right: 0; }

/* -------- versão ampla do modal de demonstração: painel visual + formulário lado a lado -------- */
.pg-demo-modal-ampla { width: min(900px, 94vw); padding: 0; overflow: hidden; }
/* grid-template-rows minmax(0,1fr): sem isso a linha única do grid cresce até o conteúdo (min-height auto) e vaza
   do max-height — o modal cortava tudo abaixo de 88vh e nada rolava (botão "Enviar solicitação" inalcançável). */
.pg-demo-grade { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr); max-height: 88vh; }
.pg-demo-visual {
  position: relative; padding: 30px 26px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(165deg, color-mix(in srgb, var(--primaria) 22%, var(--superficie)), var(--superficie-2));
  border-right: 1px solid var(--borda);
}
.pg-demo-visual-glow {
  position: absolute; top: -90px; left: -70px; width: 280px; height: 280px; z-index: 0;
  background: radial-gradient(closest-side, var(--glow), transparent 70%); filter: blur(10px); pointer-events: none;
}
.pg-demo-visual-marca { position: relative; display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; }
.pg-demo-visual-marca .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--primaria); color: #fff; flex: none;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.pg-demo-visual h3 { position: relative; font-size: 19px; line-height: 1.32; letter-spacing: -.01em; margin: 22px 0 0; text-transform: none; color: var(--texto); font-weight: 800; }
.pg-demo-beneficios { position: relative; list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; flex: 1; }
.pg-demo-beneficios li { display: flex; gap: 9px; font-size: 12.6px; color: var(--texto-2); line-height: 1.45; }
.pg-demo-beneficios li .icone { color: var(--sucesso); flex: none; width: 15px; height: 15px; margin-top: 1px; }
.pg-demo-stats { position: relative; display: flex; gap: 22px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--borda); }
.pg-demo-stats strong { display: block; font-family: var(--mono); font-size: 17px; color: var(--texto); }
.pg-demo-stats span { font-size: 10.5px; color: var(--texto-3); }
.pg-demo-form-pane { padding: 28px 26px; overflow-y: auto; min-height: 0; max-height: 88vh; overscroll-behavior: contain; }
.pg-demo-form-pane #demo-titulo { padding-right: 30px; }

.opcional { color: var(--texto-3); font-weight: 400; }
/* "Seu nome | Cargo" e "E-mail | Telefone" — o markup é <div class="campo linha"> (classes no mesmo
   elemento), mas estilo.css só cobre `.campo .linha` (descendente): os pares nunca ficavam lado a lado e,
   pior, no celular os dois campos colavam um no outro sem respiro. */
.campo.linha { display: flex; gap: 10px; }
.campo.linha > * { flex: 1; min-width: 0; }
.plano-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.plano-opcao {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px;
  border-radius: 9px; border: 1px solid var(--borda-forte); background: var(--superficie); cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.plano-opcao:hover { border-color: var(--primaria); }
.plano-opcao.selecionado { border-color: var(--primaria); background: var(--primaria-suave); box-shadow: 0 0 0 1px var(--primaria), 0 0 14px -6px var(--glow); }
.plano-opcao .nome { font-size: 12.5px; font-weight: 700; color: var(--texto); }
.plano-opcao .preco { font-family: var(--mono); font-size: 10.8px; color: var(--texto-3); }
.plano-opcao.selecionado .preco { color: var(--primaria); }
.plano-opcao-ia .selo {
  position: absolute; top: -7px; right: 8px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, var(--primaria), var(--primaria-escura)); color: var(--primaria-contraste);
}

@media (max-width: 760px) {
  .pg-demo-grade { grid-template-columns: 1fr; }
  .pg-demo-visual { display: none; }
}
@media (max-width: 480px) {
  .plano-picker { grid-template-columns: repeat(2, 1fr); }
  .campo.linha { flex-direction: column; gap: 12px; }
}