/* ═══════════════════════════════════════════════════════════════════════════
   Formulário "Falar com especialista".

   Mesma linguagem do herói e da seção de clientes: fundo #F9F9F9, filete de
   1px, rótulo pequeno, azul da marca só no botão. Não é um pop-up de captura
   agressivo — é a antessala do WhatsApp, e tem que parecer parte do site.
   ═══════════════════════════════════════════════════════════════════════════ */

.esp {
  --esp-ink: #111827;
  --esp-muted: #4A5468;
  --esp-faint: #8A93AC;
  --esp-brand: #2846c9;
  --esp-rule: rgba(17, 24, 39, .14);
  --esp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 32px);
}
.esp[hidden] { display: none }

.esp__fundo {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, .42);
  backdrop-filter: blur(2px);
}

.esp__caixa {
  position: relative;
  width: min(460px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--esp-rule);
  border-radius: 14px;
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 34px 70px -30px rgba(17, 24, 39, .5);
  animation: esp-entra .22s ease-out;
}
@media (prefers-reduced-motion: reduce) { .esp__caixa { animation: none } }
@keyframes esp-entra { from { opacity: 0; transform: translateY(10px) } }

.esp__x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; line-height: 1;
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; color: var(--esp-faint); border-radius: 8px;
}
.esp__x:hover { background: rgba(17, 24, 39, .06); color: var(--esp-ink) }

.esp__titulo {
  margin: 0 28px 0 0; font-size: clamp(20px, 2.4vw, 25px); font-weight: 800;
  letter-spacing: -.03em; color: var(--esp-ink); line-height: 1.15;
}
.esp__nota {
  margin: 10px 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--esp-muted);
}

.esp__form { display: grid; gap: 14px }

.esp__campo { display: grid; gap: 6px }
.esp__campo > span {
  font-family: var(--esp-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--esp-faint);
}
.esp__campo input,
.esp__campo select {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; font-size: 15.5px; font-family: inherit;
  color: var(--esp-ink); background: #fff;
  border: 1px solid var(--esp-rule); border-radius: 9px;
  /* 16px é o piso do iOS: abaixo disso o Safari dá zoom ao focar o campo e o
     visitante perde o enquadramento da página no meio do formulário. */
}
@media (max-width: 767px) {
  .esp__campo input, .esp__campo select { font-size: 16px }
}
.esp__campo input:focus-visible,
.esp__campo select:focus-visible {
  outline: 2px solid var(--esp-brand); outline-offset: 1px; border-color: transparent;
}

/* O aviso mora SOB O CAMPO que errou. Uma frase única no rodapé do formulário
   obriga quem preencheu a adivinhar qual dos cinco campos ela descreve. */
.esp__aviso {
  font-style: normal; font-size: 12.5px; line-height: 1.4; color: #9f1d29;
}
.esp__aviso[hidden] { display: none }

.esp__campo.is-erro input,
.esp__campo.is-erro select {
  border-color: #d05a63; background: rgba(190, 30, 45, .04);
}
/* O verde é discreto de propósito: confirmar que está certo ajuda, mas o campo
   preenchido não precisa competir com o que ainda falta. */
.esp__campo.is-ok input,
.esp__campo.is-ok select { border-color: rgba(23, 163, 74, .5) }

.esp__enviar {
  margin-top: 4px; padding: 13px 18px; width: 100%;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--esp-brand); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: background .2s ease, transform .2s ease;
}
.esp__enviar:hover:not(:disabled) { background: #1e37a6; transform: translateY(-1px) }
.esp__enviar:disabled { opacity: .6; cursor: progress; transform: none }

.esp__privacidade {
  margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--esp-faint);
  text-align: center;
}
.esp__privacidade a { color: var(--esp-brand) }

/* ── botão flutuante ──────────────────────────────────────────────────────
   No lugar do widget do Agendor. Verde porque é o canal que ele abre, e é a
   única cor de fora da paleta no site inteiro — o visitante reconhece o canal
   antes de ler. */
.esp-flutua {
  position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  z-index: 9990;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #17a34a; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 14px 30px -12px rgba(15, 100, 45, .6);
  transition: background .2s ease, transform .2s ease;
}
.esp-flutua:hover { background: #128a3e; transform: translateY(-2px) }
.esp-flutua svg { flex: none }

/* No celular fica só o ícone: a pílula com texto cobre um terço da largura e
   tapa justamente o conteúdo que a pessoa está lendo. */
@media (max-width: 560px) {
  .esp-flutua { padding: 15px; border-radius: 50% }
  .esp-flutua span { display: none }
}
@media (prefers-reduced-motion: reduce) { .esp-flutua { transition: none } }