/* PLAS Academy — janelinha de nome + telefone antes do WhatsApp (links/lead.js).
   Usada no /links e no botão flutuante do /pro. As cores e fontes ficam presas à própria janelinha,
   para ela sair igual em qualquer página.
   Celular: folha que sobe do rodapé, ao alcance do polegar. Tela larga: caixa no centro. */
dialog.lead {
  --orange: #FA4200; --orange-deep: #D63800; --black: #0D0900; --white: #ECECEC; --card: #FFFFFF;
  --ink-2: #4A4843; --line: #DEDEDA;
  --titulo: "Neue Machina", "Helvetica Neue", Arial, sans-serif;
  --texto: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%; max-width: 100%;
  margin: auto 0 0; padding: 0;
  border: 0; background: transparent;
  font: 500 16px/1.4 var(--texto); /* o /pro tem um .lead de parágrafo: aqui volta ao texto do formulário */
  color: var(--black);
}
dialog.lead::backdrop { background: rgba(13, 9, 0, .62); backdrop-filter: blur(2px); }
dialog.lead[open] { animation: lead-sobe .22s ease-out; }
@keyframes lead-sobe { from { transform: translateY(24px); opacity: 0; } }

.lead__caixa {
  position: relative;
  margin: 0 auto;
  max-width: 520px;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--card);
  border-radius: 22px 22px 0 0;
  border-top: 4px solid var(--orange);
}
.lead__fechar {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--white); color: var(--black);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lead__tag {
  display: inline-block; margin: 0 0 10px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(250, 66, 0, .10); color: var(--orange-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.lead__tag:empty { display: none; }
.lead__t {
  margin: 0 44px 4px 0;
  font-family: var(--titulo); font-weight: 800; text-transform: uppercase;
  font-size: 19px; line-height: 1.15;
}
.lead__d { margin: 0 0 16px; font-size: 14px; font-weight: 300; color: var(--ink-2); }

.lead__campo { display: block; margin-bottom: 12px; }
.lead__campo > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; }
dialog.lead input, dialog.lead select {
  width: 100%; min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--black);
  font: 500 16px/1.2 var(--texto); /* 16px: o iPhone não dá zoom no campo */
}
dialog.lead input:focus, dialog.lead select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(250, 66, 0, .15); }
.lead__tel { display: flex; gap: 8px; }
dialog.lead .lead__tel select { flex: 0 0 auto; width: 118px; padding-right: 4px; font-size: 15px; }
dialog.lead .lead__tel input { flex: 1; min-width: 0; }
.lead__isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lead__erro { margin: -2px 0 10px; font-size: 13px; font-weight: 700; color: #C4200B; }
.lead__ir {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; margin-top: 4px;
  border: 0; border-radius: 14px;
  background: var(--orange); color: var(--black);
  font: 800 15px/1 var(--titulo); text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(250, 66, 0, .30);
}
.lead__ir svg { width: 22px; height: 22px; }
.lead__ir:hover { background: var(--orange-deep); }
.lead__ir:disabled { opacity: .7; cursor: progress; }
.lead__priv { margin: 12px 0 0; text-align: center; font-size: 12px; color: #7A7872; }
.lead__priv a { color: inherit; }

@media (min-width: 600px) {
  dialog.lead { margin: auto; max-width: 440px; }
  .lead__caixa { border-radius: 22px; padding: 26px 24px 22px; }
}
@media (prefers-reduced-motion: reduce) { dialog.lead[open] { animation: none; } }