/* =========================================================================
   Imagine.IDE — Portão de WhatsApp
   -------------------------------------------------------------------------
   Autónomo de propósito: este CSS entra no site principal E no microsite,
   que têm temas diferentes. Nada aqui herda do tema, e nada aqui vaza para
   fora do modal — todo seletor começa em .iip-.

   Cores da marca: fundo #0E0E10, tinta #F3F1EA, âmbar #F5A623.
   Contraste medido: tinta sobre fundo 16,4:1 · âmbar sobre fundo 9,55:1 ·
   tinta escura sobre âmbar 9,0:1. O botão âmbar leva tinta escura.
   ========================================================================= */

.iip-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;          /* acima do cabeçalho fixo e do botão do WhatsApp */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font: 400 16px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.iip-modal.is-on { display: flex; }

.iip-modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, .78);
}

.iip-modal__caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #17171B;
  border: 1px solid #2A2A31;
  border-radius: 18px;
  padding: 30px 26px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: iip-sobe .22s ease-out both;
}
@keyframes iip-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iip-modal__caixa { animation: none; }
}

.iip-modal__x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #8D8D97;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.iip-modal__x:hover { color: #F3F1EA; background: #22222A; }

.iip-modal__filete {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #FFDD96, #F9B23C, #F08A12);
  margin-bottom: 18px;
}

.iip-modal__tit {
  margin: 0 0 8px;
  font: 700 21px/1.25 Poppins, Inter, sans-serif;
  letter-spacing: -.02em;
  color: #F3F1EA;
}

.iip-modal__sub {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: #8D8D97;      /* 5,88:1 sobre o fundo da caixa */
}

.iip-campo { display: block; margin-bottom: 14px; }
.iip-campo > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #C9C9D1;
}
.iip-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;      /* 16px evita o zoom automático do iOS ao focar */
  color: #F3F1EA;
  background: #0E0E10;
  border: 1px solid #33333C;
  border-radius: 11px;
  outline: none;
}
.iip-campo input::placeholder { color: #6A6A74; }
.iip-campo input:focus {
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
}

/* isca de robô: fora da tela, mas não display:none — há robôs que ignoram */
.iip-mel {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.iip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;      /* alvo de toque confortável */
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #FFDD96, #F9B23C, #F08A12);
  color: #0E0E10;        /* tinta escura sobre âmbar, nunca branco */
  font: 600 15.5px/1 Inter, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.iip-btn:hover { filter: brightness(1.06); }
.iip-btn:disabled { opacity: .6; cursor: default; }
.iip-btn--enviar { margin-top: 6px; }

.iip-erro {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13.5px;
  color: #FF9B9B;
}

/* --------------------------------------------------- aviso do /obrigado/ */
.iip-aviso {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 8, .9);
  font: 400 16px/1.55 Inter, -apple-system, sans-serif;
}
.iip-aviso__caixa {
  max-width: 340px;
  text-align: center;
  background: #17171B;
  border: 1px solid #2A2A31;
  border-radius: 18px;
  padding: 32px 26px 26px;
}
.iip-aviso__tit { margin: 0 0 6px; font-weight: 700; color: #F3F1EA; }
.iip-aviso__sub { margin: 0 0 20px; font-size: 14px; color: #8D8D97; }
.iip-aviso__spin {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 3px solid #33333C;
  border-top-color: #F5A623;
  border-radius: 50%;
  animation: iip-gira .8s linear infinite;
}
@keyframes iip-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .iip-aviso__spin { animation-duration: 3s; }
}

/* --------------------------------------------------------------- celular */
@media (max-width: 420px) {
  .iip-modal { padding: 12px; }
  .iip-modal__caixa { padding: 26px 20px 22px; border-radius: 16px; }
  .iip-modal__tit { font-size: 19px; }
}