/* ==========================================================================
   Formulário de contato do rodapé — CP-20260807-07 (2026-08-07)
   Painel centrado (flex), no padrão dark/ciano do site. Carregado no index.
   ========================================================================== */

/* Overlay. [hidden] explícito ANTES do display:flex — sem isso o flex anula o
   atributo hidden nativo e o painel nasce aberto (mesmo bug já corrigido no
   .msheet do /mapa, ver DIARIO 2026-07-24). */
.cmod[hidden] { display: none; }
.cmod {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(3, 5, 10, .72); backdrop-filter: blur(4px);
  animation: cmodIn .18s var(--ease);
}
@keyframes cmodIn { from { opacity: 0 } to { opacity: 1 } }

.cmod__card {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 1.9rem);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}

.cmod__close {
  position: absolute; top: .7rem; right: .7rem;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--mute); font-size: 1.5rem; line-height: 1;
  cursor: pointer; transition: background .2s, color .2s;
}
.cmod__close:hover { background: rgba(231,236,246,.06); color: var(--text); }

.cmod__title {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  padding-right: 2rem;
}
.cmod__sub { color: var(--mute); font-size: .9rem; margin-top: .35rem; }

.cmod__field { margin-top: 1rem; }
.cmod__label {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); margin-bottom: .35rem;
}
.cmod__in, .cmod__ta {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: .95rem;
  color: var(--text); background: var(--ink);
  border: 1px solid var(--line-2); border-radius: 9px;
  transition: border-color .2s, box-shadow .2s;
}
.cmod__ta { min-height: 118px; resize: vertical; line-height: 1.5; }
.cmod__in:focus, .cmod__ta:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-glow);
}

/* Campo-armadilha: fora da tela e fora da ordem de tabulação. Não usa
   display:none porque parte dos bôs ignora campo oculto por display. */
.cmod__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.cmod__altcha { margin-top: 1rem; }

.cmod__send {
  width: 100%; margin-top: 1.2rem; padding: .85rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); background: var(--cyan); border: 0; border-radius: 10px;
  cursor: pointer; transition: filter .2s, opacity .2s;
}
.cmod__send:hover:not(:disabled) { filter: brightness(1.08); }
.cmod__send:disabled { opacity: .5; cursor: not-allowed; }

/* Faixa de retorno: erro (vermelho) e sucesso (ciano) */
.cmod__msg { margin-top: .9rem; font-size: .9rem; border-radius: 8px; padding: .7rem .85rem; }
.cmod__msg[hidden] { display: none; }
.cmod__msg--erro { color: #ffd9d9; background: rgba(255,111,111,.12); border: 1px solid rgba(255,111,111,.3); }
.cmod__msg--ok   { color: var(--text); background: rgba(52,229,196,.1);  border: 1px solid rgba(52,229,196,.32); }

.cmod__nota { margin-top: .9rem; color: var(--mute); font-size: .78rem; }
.cmod__nota a { color: var(--soft); text-decoration: underline; }

/* ── Tela de agradecimento (2026-08-07) ───────────────────────────────────
   Substitui o conteúdo do card depois do envio: a confirmação vira momento,
   não uma faixa discreta. Fecha com microcompromisso ("Ok, te aguardo"). */
.cmod__ok-wrap { text-align: center; padding: .6rem .2rem .2rem; }

.cmod__ok-mark {
  width: 62px; height: 62px; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(52,229,196,.12);
  border: 1px solid rgba(52,229,196,.4);
  animation: okPop .45s var(--ease) both;
}
.cmod__ok-mark svg { width: 30px; height: 30px; stroke: var(--cyan); fill: none; stroke-width: 2.4; }
/* o traço do check se desenha */
.cmod__ok-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: okDraw .5s var(--ease) .2s forwards; }

@keyframes okPop  { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes okDraw { to { stroke-dashoffset: 0 } }

.cmod__ok-h {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 4vw, 1.7rem);
  line-height: 1.2; letter-spacing: -.01em;
}
.cmod__ok-p { color: var(--soft); margin-top: .85rem; font-size: .97rem; line-height: 1.6; }
.cmod__ok-p strong { color: var(--text); }

/* Selo do prazo — dá concretude à promessa de retorno */
.cmod__ok-selo {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: 1.2rem; padding: .5em .9em; border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); background: rgba(52,229,196,.08); border: 1px solid rgba(52,229,196,.25);
}
.cmod__ok-selo i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  animation: pulse 2.6s var(--ease) infinite;
}

.cmod__ok-cta {
  width: 100%; margin-top: 1.6rem; padding: .9rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); background: var(--cyan); border: 0; border-radius: 10px;
  cursor: pointer; transition: filter .2s;
}
.cmod__ok-cta:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .cmod__ok-mark { animation: none; }
  .cmod__ok-mark path { animation: none; stroke-dashoffset: 0; }
  .cmod__ok-selo i { animation: none; }
}

@media (max-width: 520px) {
  .cmod { align-items: flex-end; padding: 0; }
  .cmod__card { max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .cmod { animation: none; }
}