/* Responde Bem · demonstração animada do atendimento no WhatsApp (botão flutuante + janela).
   Só CSS e JS (demo-whatsapp.js), sem vídeo nem GIF. A janela imita o tema escuro do aplicativo para a
   pessoa reconhecer a conversa; o verde do WhatsApp deu lugar ao azul da landing (pedido de 16/10/2026),
   por isso as variáveis "verde" guardam azul: o nome ficou para não renomear o arquivo inteiro. */
.wa-demo {
  --wa-verde: #2E86DE;
  --wa-verde-2: #1D6FBF;
  --wa-teal: #14508C;
  --wa-fundo: #0B141A;
  --wa-bolha-agente: #202C33;
  --wa-bolha-cliente: #0F3D6B;
  --wa-texto: #E9EDEF;
  --wa-texto-2: rgba(233, 237, 239, .62);
  --wa-azul: #53BDEB;
  --wa-vermelho: #E53935;
  --wa-dir: 34px; --wa-base: 34px; /* distância do botão até a borda direita e até o rodapé */
  position: fixed; right: calc(var(--wa-dir) + env(safe-area-inset-right, 0px)); bottom: calc(var(--wa-base) + env(safe-area-inset-bottom, 0px));
  z-index: 94; /* abaixo do banner de cookies (95) */
  width: 64px; height: 64px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.wa-demo svg { stroke: none; fill: none; }

/* ---------- botão ---------- */
.wa-demo-btn {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; perspective: 300px;
}
.wa-demo-btn:focus-visible { outline: 3px solid #A9D4FA; outline-offset: 4px; }
.wa-demo-nucleo {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 30%, #7FB9F0 0%, var(--wa-verde) 42%, var(--wa-verde-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 30px -8px rgba(46, 134, 222, .75), 0 2px 6px rgba(0, 0, 0, .18);
  animation: waToca 4s ease-in-out infinite;
  transition: transform .2s var(--ease, ease);
}
.wa-demo-btn:active .wa-demo-nucleo { transform: scale(.95); }
.wa-demo.aberto .wa-demo-nucleo { animation: none; } /* com a janela aberta, para de "tocar" */
.wa-demo-icone { display: grid; place-items: center; color: #fff; transform-style: preserve-3d; transition: transform .85s var(--ease, ease); }
.wa-demo-icone svg { width: 32px; height: 32px; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wa-demo-btn:hover .wa-demo-icone { transform: rotateY(360deg); }

/* ondas ("ping") */
.wa-demo-onda {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa-verde); opacity: 0; pointer-events: none;
  animation: waOnda 2.6s ease-out infinite;
}
.wa-demo-onda:nth-child(2) { animation-delay: 1.3s; }

/* texto em círculo girando (a rotação é feita pelo JS com a Web Animations API, para acelerar no hover sem pular).
   Gira o grupo de dentro, e não o SVG: a caixa do SVG fica parada, a 8 px da borda, e nunca passa da tela. */
.wa-demo-giro {
  position: absolute; inset: -26px; width: 116px; height: 116px; pointer-events: none; overflow: visible;
}
.wa-demo-giro-g { transform-origin: 50px 50px; }
.wa-demo-giro-g.css { animation: waGira 22s linear infinite; }
.wa-demo-btn:hover .wa-demo-giro-g.css { animation-duration: 6s; }
.wa-demo-giro text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 9.2px; font-weight: 800; letter-spacing: .14em;
  fill: var(--deep, #0C2A45); stroke: rgba(255, 255, 255, .9); stroke-width: 1.6px; paint-order: stroke; stroke-linejoin: round;
}

/* selo de não lida */
.wa-demo-nao-lida {
  position: absolute; top: -5px; right: -5px; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 12px;
  display: grid; place-items: center; background: var(--wa-vermelho); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(229, 57, 53, .8); animation: waPop .4s var(--ease, ease);
}
.wa-demo-nao-lida[hidden] { display: none; }

/* convite ao lado do botão: aparece uma vez por visita; clicar abre a janela, o X dispensa */
.wa-demo-convite {
  position: absolute; right: calc(100% + 30px); top: 50%; transform: translateY(-50%); /* 30 px: passa do anel */
  display: flex; align-items: center; white-space: nowrap; border-radius: 999px; background: #fff;
  border: 1px solid #D2DCE7; box-shadow: 0 10px 24px -12px rgba(12, 42, 69, .45); animation: waPop .4s var(--ease, ease);
}
.wa-demo-convite::after { /* bico apontando para o botão */
  content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg);
  background: #fff; border-right: 1px solid #D2DCE7; border-top: 1px solid #D2DCE7;
}
.wa-demo-convite[hidden] { display: none; }
.wa-demo.aberto .wa-demo-convite { display: none; }
.wa-demo-convite button { margin: 0; border: 0; background: none; font: inherit; color: var(--deep, #0C2A45); cursor: pointer; }
.wa-demo-convite .wa-demo-convite-abrir { min-height: 40px; padding: 0 4px 0 14px; font-size: 13.5px; font-weight: 700; line-height: 1; border-radius: 999px 0 0 999px; }
.wa-demo-convite .wa-demo-convite-abrir:hover { color: var(--wa-verde-2); }
.wa-demo-convite .wa-demo-convite-x {
  position: relative; z-index: 1; width: 36px; height: 40px; padding: 0 6px 0 0; font-size: 20px; line-height: 1;
  color: #5B6B7D; border-radius: 0 999px 999px 0;
}
.wa-demo-convite .wa-demo-convite-x:hover { color: var(--deep, #0C2A45); }
.wa-demo-convite button:focus-visible { outline: 3px solid #2E86DE; outline-offset: 1px; }

/* ---------- janela ---------- */
.wa-demo-janela {
  position: absolute; right: 0; bottom: 80px; width: min(310px, 100vw - 44px);
  max-height: min(560px, 100vh - 140px); max-height: min(560px, 100dvh - 140px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--wa-fundo); color: var(--wa-texto); text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 30px 60px -20px rgba(0, 0, 0, .55);
  transform-origin: 100% 100%; animation: waAbrir .28s cubic-bezier(.2, .8, .3, 1); /* sem passar do tamanho final: nada pula nem invade a margem */
}
.wa-demo-janela[hidden] { display: none; }

.wa-demo-topo {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
  background: linear-gradient(180deg, var(--wa-verde-2), var(--wa-teal)); color: #fff;
}
.wa-demo-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.wa-demo-avatar svg { width: 24px; height: 24px; stroke: var(--wa-verde-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wa-demo-online {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--wa-verde); border: 2px solid var(--wa-teal); animation: waPulsa 1.8s ease-in-out infinite;
}
.wa-demo-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.wa-demo-quem strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-demo-quem small { font-size: 12px; opacity: .85; }
.wa-demo-linha2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wa-demo-selo {
  flex: none; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25);
}
.wa-demo-fechar {
  flex: none; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #fff; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s;
}
.wa-demo-fechar:hover { background: rgba(255, 255, 255, .14); }
.wa-demo-fechar:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* conversa: textura sutil como o papel de parede do WhatsApp (SVG embutido, só traços claros) */
.wa-demo-conversa {
  flex: 1; min-height: 250px; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
  background-color: var(--wa-fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3Cpath d='M44 10h10M49 5v10'/%3E%3Cpath d='M12 48c4-6 10-6 14 0'/%3E%3Crect x='46' y='42' width='12' height='12' rx='3'/%3E%3Cpath d='M30 30l4 4m0-4l-4 4'/%3E%3Cpath d='M58 62l4 4-4 4-4-4z'/%3E%3C/svg%3E");
  transition: opacity .4s;
}
.wa-demo-conversa.saindo { opacity: 0; }

.wa-demo-msg {
  position: relative; max-width: 84%; padding: 6px 8px 5px; border-radius: 10px; font-size: 13.5px; line-height: 1.4;
  display: flex; flex-direction: column; animation: waPop .32s var(--ease, ease); box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.wa-demo-msg.de-agente { align-self: flex-start; background: var(--wa-bolha-agente); border-top-left-radius: 2px; transform-origin: 0 0; }
.wa-demo-msg.de-cliente { align-self: flex-end; background: var(--wa-bolha-cliente); border-top-right-radius: 2px; transform-origin: 100% 0; }
.wa-demo-msg.de-agente::before { content: ""; position: absolute; top: 0; left: -6px; border-top: 8px solid var(--wa-bolha-agente); border-left: 7px solid transparent; }
.wa-demo-msg.de-cliente::before { content: ""; position: absolute; top: 0; right: -6px; border-top: 8px solid var(--wa-bolha-cliente); border-right: 7px solid transparent; }
.wa-demo-txt { word-wrap: break-word; }
.wa-demo-meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 0 10px; font-size: 10.5px; line-height: 1; color: var(--wa-texto-2); }
.wa-demo-ticks { display: inline-flex; color: #8696A0; transition: color .35s; }
.wa-demo-ticks svg { width: 15px; height: 10px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-demo-ticks.lido { color: var(--wa-azul); }

/* capa ilustrativa da escola fictícia, no topo da conversa (não é mensagem de ninguém) */
.wa-demo-capa {
  align-self: center; width: min(220px, 74%); margin: 2px 0 8px; border-radius: 10px; overflow: hidden;
  background: var(--wa-bolha-agente); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); animation: waPop .32s var(--ease, ease);
}
.wa-demo-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EAF3FC; }
.wa-demo-img svg { display: block; width: 100%; height: 100%; }
.wa-demo-capa figcaption { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 8px; text-align: center; line-height: 1.25; }
.wa-demo-capa strong { font-size: 12.5px; font-weight: 700; }
.wa-demo-capa figcaption span { font-size: 11px; color: var(--wa-texto-2); }

/* "digitando…" */
.wa-demo-digitando { flex-direction: row; gap: 4px; padding: 10px 12px; }
.wa-demo-digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: waPula .9s ease-in-out infinite; }
.wa-demo-digitando i:nth-child(2) { animation-delay: .15s; }
.wa-demo-digitando i:nth-child(3) { animation-delay: .3s; }

/* rodapé: barra de mensagem falsa; no fim, vira o botão de contato */
.wa-demo-rodape { flex: none; padding: 8px 10px 10px; background: #111B21; }
.wa-demo-input {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 1px dashed rgba(233, 237, 239, .22); color: #8696A0; font-size: 12.5px;
  justify-content: center; cursor: default; user-select: none;
}
.wa-demo-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #5AA8EE, var(--wa-verde)); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; text-align: center;
  box-shadow: 0 10px 24px -10px rgba(46, 134, 222, .8); animation: waPop .45s var(--ease, ease); transition: transform .2s var(--ease, ease), box-shadow .2s;
}
.wa-demo-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(46, 134, 222, .9); }
.wa-demo-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wa-demo-seta { display: inline-block; font-size: 20px; line-height: 1; font-weight: 800; animation: waSeta 1.1s ease-in-out infinite; }
.wa-demo-rodape.pronto .wa-demo-input { display: none; }
.wa-demo-rodape:not(.pronto) .wa-demo-cta { display: none; }

/* ---------- animações ---------- */
@keyframes waOnda { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.95); opacity: 0; } }
@keyframes waGira { to { transform: rotate(360deg); } }
@keyframes waToca {
  0%, 14%, 100% { transform: rotate(0); }
  2% { transform: rotate(-11deg); } 4% { transform: rotate(10deg); } 6% { transform: rotate(-8deg); }
  8% { transform: rotate(7deg); } 10% { transform: rotate(-4deg); } 12% { transform: rotate(3deg); }
}
@keyframes waPop { 0% { opacity: 0; transform: scale(.6) translateY(8px); } 65% { transform: scale(1.03) translateY(0); } 100% { opacity: 1; transform: none; } }
@keyframes waAbrir { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes waPulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 134, 222, .6); } 60% { box-shadow: 0 0 0 5px rgba(46, 134, 222, 0); } }
@keyframes waPula { 0%, 100% { transform: translateY(0); opacity: .6; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes waSeta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes waFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- tablet e celular ---------- */
@media (max-width: 767px) {
  /* a janela ocupa a largura útil menos 16 px de cada lado e fica sempre acima do botão, dentro da tela */
  .wa-demo-janela {
    position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); width: auto;
    bottom: calc(var(--wa-base) + 76px + env(safe-area-inset-bottom, 0px));
    max-height: min(75vh, 100vh - var(--wa-base) - 92px - env(safe-area-inset-bottom, 0px));
    max-height: min(75dvh, 100dvh - var(--wa-base) - 92px - env(safe-area-inset-bottom, 0px));
  }
  .wa-demo-conversa { min-height: 160px; }
}
@media (max-width: 640px) {
  /* a landing tem a barra "Agendar demonstração" fixa no rodapé: o botão sobe para não cobrir */
  .wa-demo.com-cta-fixo { --wa-base: 82px; }
}
@media (max-width: 520px) {
  .wa-demo-giro { display: none; }
  .wa-demo { --wa-dir: 18px; --wa-base: 22px; }
  .wa-demo.com-cta-fixo { --wa-base: 82px; }
  .wa-demo-convite { right: calc(100% + 14px); } /* sem anel no celular */
  .wa-demo-convite .wa-demo-convite-abrir { font-size: 13px; padding-left: 12px; }
}

/* ---------- quem pede menos movimento: nada se mexe, a conversa aparece pronta ---------- */
@media (prefers-reduced-motion: reduce) {
  .wa-demo-nucleo, .wa-demo-onda, .wa-demo-giro-g.css, .wa-demo-nao-lida, .wa-demo-online,
  .wa-demo-msg, .wa-demo-digitando i, .wa-demo-cta, .wa-demo-seta { animation: none; }
  .wa-demo-janela, .wa-demo-convite, .wa-demo-capa { animation: waFade .2s ease-out; } /* só aparece, sem crescer nem pular */
  .wa-demo-onda { display: none; }
  .wa-demo-icone, .wa-demo-ticks, .wa-demo-conversa, .wa-demo-cta { transition: none; }
  .wa-demo-btn:hover .wa-demo-icone { transform: none; }
}