/* Balão de WhatsApp padrão Komplexa (kx-core), no desenho do balão do Template 3.
   Igual em todos os sites do showroom. Botão no verde do WhatsApp; painel no azul escuro da Komplexa.
   Camada: acima do site, do botão do catálogo e do aviso de cookies; abaixo do widget de reserva (.kx-res, 2147483000). */
[data-kx-balao-raiz]{--kx-balao-base:20px;--kx-balao-lado:20px;--kx-balao-teclado:0px;--kx-balao-tam:58px;
  --kx-balao-azul:#0E3F7E;--kx-balao-azul-2:#0A2F5F;--kx-balao-verde:#25D366;--kx-balao-verde-2:#1EBE5A;
  --kx-balao-borda:rgba(26,26,26,.14);--kx-balao-bolha:#EAF0F8}
.kx-balao{position:fixed;right:var(--kx-balao-lado);bottom:var(--kx-balao-base);z-index:2147482000;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none;text-align:left;color:#1A1A1A}
.kx-balao *,.kx-balao *::before,.kx-balao *::after,.kx-balao-convite,.kx-balao-convite *{box-sizing:border-box}

/* ---- botão flutuante ---- */
.kx-balao-btn{display:flex;align-items:center;justify-content:center;width:var(--kx-balao-tam);height:var(--kx-balao-tam);padding:0;margin:0;border:0;border-radius:50%;
  background:var(--kx-balao-verde);color:#fff;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:background-color .2s,transform .2s}
.kx-balao-btn:hover{background:var(--kx-balao-verde-2);transform:scale(1.06)}
.kx-balao-btn:focus-visible{outline:3px solid var(--kx-balao-azul);outline-offset:3px}
.kx-balao-btn svg{width:30px;height:30px;display:block}

/* ---- painel: card acima do botão, topo fixo, só o corpo rola ---- */
.kx-balao-painel{position:fixed;right:var(--kx-balao-lado);z-index:1;
  bottom:calc(var(--kx-balao-base) + var(--kx-balao-tam) + 12px + var(--kx-balao-teclado));
  width:370px;max-width:calc(100vw - 2 * var(--kx-balao-lado));
  max-height:calc(100vh - var(--kx-balao-base) - var(--kx-balao-tam) - 28px - var(--kx-balao-teclado));
  max-height:calc(100dvh - var(--kx-balao-base) - var(--kx-balao-tam) - 28px - var(--kx-balao-teclado));
  display:flex;flex-direction:column;overflow:hidden;background:#fff;color:#1A1A1A;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);transform-origin:bottom right;animation:kxBalaoEntra .22s ease}
.kx-balao-painel[hidden]{display:none}
@keyframes kxBalaoEntra{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

.kx-balao-topo{flex:none;display:flex;align-items:center;gap:10px;padding:8px 6px 8px 14px;background:var(--kx-balao-azul);color:#fff}
.kx-balao-icone{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16)}
.kx-balao-icone svg{width:17px;height:17px}
.kx-balao-titulo{flex:1 1 auto;min-width:0;margin:0;font-size:15.5px;font-weight:700;line-height:1.3;color:#fff}
.kx-balao-fechar{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;transition:background-color .2s}
.kx-balao-fechar svg{width:20px;height:20px}
.kx-balao-fechar:hover{background:rgba(255,255,255,.18)}
.kx-balao-fechar:focus-visible{outline:2px solid #fff;outline-offset:-4px}

.kx-balao-form{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
/* balão de saudação com a pontinha virada para o ícone */
.kx-balao-intro{position:relative;align-self:flex-start;margin:0 0 0 6px;padding:8px 11px;background:var(--kx-balao-bolha);color:#1A1A1A;
  font-size:13px;line-height:1.45;border-radius:4px 10px 10px 10px}
.kx-balao-intro::before{content:"";position:absolute;top:0;left:-6px;border-width:0 6px 8px 0;border-style:solid;border-color:transparent var(--kx-balao-bolha) transparent transparent}

/* os campos num único card, separados por fio, com rótulo visível */
.kx-balao-campos{border:1px solid var(--kx-balao-borda);border-radius:8px;background:#fff;overflow:hidden}
.kx-balao-campo{display:block;margin:0;padding:6px 12px 2px;transition:background-color .2s}
.kx-balao-campo + .kx-balao-campo{border-top:1px solid var(--kx-balao-borda)}
.kx-balao-campo:focus-within{background:rgba(14,63,126,.05);box-shadow:inset 3px 0 0 var(--kx-balao-azul)}
.kx-balao-campo label{display:block;margin:0;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:#444}
.kx-balao-linha{display:flex;align-items:center;gap:8px}
.kx-balao-bandeira{flex:none;display:flex}
.kx-balao-bandeira svg{width:22px;height:16px;border-radius:2px;display:block}
.kx-balao-campo input{display:block;width:100%;min-height:36px;margin:0;padding:4px 0 6px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  appearance:none;color:#1A1A1A;font:inherit;font-size:16px;font-weight:400;line-height:1.3}
.kx-balao-campo input::placeholder{color:#8a8a8a;opacity:1}
.kx-balao-campo input:-webkit-autofill,.kx-balao-campo input:-webkit-autofill:hover,.kx-balao-campo input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset}

/* aceite numa caixa azul clara, marcado por padrão e obrigatório */
.kx-balao-optin{display:flex;align-items:flex-start;gap:9px;margin:0;padding:9px 11px;background:var(--kx-balao-bolha);border:1px solid rgba(14,63,126,.28);border-radius:8px;
  cursor:pointer;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:#1A1A1A}
.kx-balao-optin input{flex:none;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--kx-balao-azul)}
.kx-balao-optin a{color:var(--kx-balao-azul);text-decoration:underline}

/* envio: pílula azul escura */
.kx-balao-enviar{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:2px 0 0;padding:0 20px;border:0;border-radius:999px;
  background:var(--kx-balao-azul);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .2s,opacity .2s}
.kx-balao-enviar svg{width:16px;height:16px;flex:none}
.kx-balao-enviar:hover:not(:disabled){background:var(--kx-balao-azul-2)}
.kx-balao-enviar:disabled{opacity:.55;cursor:not-allowed}
.kx-balao-enviar:focus-visible{outline:3px solid var(--kx-balao-azul-2);outline-offset:2px}
#waLeadForm *,[id*="waLeadForm"] *{pointer-events:none}

/* ---- convite: balãozinho de fala acima do botão ---- */
.kx-balao-convite{position:fixed;z-index:2147481999;display:flex;align-items:flex-start;width:max-content;max-width:230px;padding:0;
  background:#fff;color:#1A1A1A;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 8px 24px -6px rgba(0,0,0,.22);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.kx-balao-convite[hidden]{display:none}
.kx-balao-convite.kx-balao-convite-on{opacity:1;transform:none}
.kx-balao-convite::after{content:"";position:absolute;bottom:-7px;right:var(--kx-convite-seta,22px);width:12px;height:12px;background:#fff;
  border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);transform:rotate(45deg)}
.kx-balao-convite-txt{display:block;flex:1 1 auto;min-width:0;margin:0;padding:10px 0 11px 13px;border:0;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;border-radius:14px 0 0 14px}
.kx-balao-convite-txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:#1A1A1A}
.kx-balao-convite-txt span{display:block;margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.35;color:#555}
.kx-balao-convite-x{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:2px 2px 0 0;padding:0;border:0;border-radius:50%;
  background:transparent;color:#777;cursor:pointer}
.kx-balao-convite-x svg{width:14px;height:14px}
.kx-balao-convite-x:hover{background:rgba(0,0,0,.06);color:#1A1A1A}
.kx-balao-convite-txt:focus-visible,.kx-balao-convite-x:focus-visible{outline:2px solid var(--kx-balao-azul,#0E3F7E);outline-offset:-2px}

/* ---- celular: painel na largura da tela, 16px de margem, acima do botão ---- */
@media (max-width:640px){
  [data-kx-balao-raiz]{--kx-balao-lado:16px;--kx-balao-tam:56px}
  .kx-balao-painel{left:16px;right:16px;width:auto;max-width:none}
  .kx-balao-convite{max-width:200px}
}
@media (prefers-reduced-motion:reduce){
  .kx-balao-btn,.kx-balao-enviar,.kx-balao-campo,.kx-balao-convite{transition:none}
  .kx-balao-btn:hover{transform:none}
  .kx-balao-painel{animation:none}
  .kx-balao-convite{transform:none}
}
@media print{.kx-balao,.kx-balao-convite{display:none}}
