/* Familiar WhatsApp launcher; its click is bridged to the Contasy dialog. */
.contact-fab { right:24px; bottom:24px; width:60px; height:60px; padding:0; border:0; border-radius:50%; background:#25d366; color:#fff; box-shadow:0 6px 20px #25d36666; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.contact-fab:hover { background:#25d366; transform:scale(1.08); }
.contact-fab svg { position:relative; z-index:2; width:32px; height:32px; fill:#fff; stroke:none; }
.contact-fab::before { content:""; position:absolute; inset:0; border-radius:50%; background:#25d366; animation:contact-pulse 2.4s ease-out infinite; }
body:has(#wB) .contact-fab { display:none; }
body.modal-open #wB { visibility:hidden; }
@keyframes contact-pulse { 0% {transform:scale(1);opacity:.6} 80%,100% {transform:scale(1.6);opacity:0} }
.portrait-name { display:flex; align-items:center; gap:6px; }
.verified-badge { width:17px; height:17px; flex:0 0 17px; }

/* A guided tour: each selected tab owns a visible progress line. */
#plataforma .workspace { overflow:hidden; }
#plataforma .workspace-tour-controls { display:flex; align-items:center; gap:14px; margin-left:auto; }
#plataforma .workspace-tour-controls[hidden], #plataforma .workspace-tour-footer[hidden] { display:none; }
.workspace-playback-label { display:flex; align-items:center; gap:7px; color:#65758b; font-size:11px; }
.workspace-playback-label i { width:5px; height:5px; border-radius:50%; background:#10b981; }
#plataforma .workspace-toggle { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid #e0e6ef; border-radius:50%; background:#fff; color:#64748b; cursor:pointer; }
#plataforma .workspace-toggle:hover { background:#f1f5f9; color:#172235; }
#plataforma .workspace-toggle .icon { width:12px; height:12px; }
.workspace-toggle .tour-play, .workspace[data-tour-paused="true"] .tour-pause { display:none; }
.workspace[data-tour-paused="true"] .tour-play { display:block; }
.workspace[data-tour-paused="true"] .workspace-playback-label i { background:#94a3b8; }
#plataforma .workspace-nav [role="tab"] { overflow:hidden; min-height:51px; padding-right:25px; border-color:#e5eaf0; background:#fff; cursor:pointer; }
#plataforma .workspace-nav [role="tab"]::after { content:"›"; position:absolute; right:11px; font-size:19px; color:#a3aebd; }
#plataforma .workspace-nav [role="tab"]:hover { border-color:#abb8c9; background:#f8fafc; }
#plataforma .workspace-nav [role="tab"][aria-selected="true"] { border-color:#ffccd9; background:#fff5f8; color:#a61643; box-shadow:0 2px 7px #b8244c08; }
#plataforma .workspace-nav [role="tab"][aria-selected="true"] .icon { color:var(--rose); }
#plataforma .workspace-nav [role="tab"][aria-selected="true"]::after { color:var(--rose); }
#plataforma .workspace-nav [role="tab"][aria-selected="true"]::before { display:none; }
.workspace-tab-progress { position:absolute; bottom:0; inset-inline:0; height:2px; overflow:hidden; }
.workspace-tab-progress i { display:block; height:100%; width:100%; background:var(--rose); transform:scaleX(0); transform-origin:left; }
#plataforma .workspace-content { position:relative; align-content:center; padding-bottom:96px; }
#plataforma .workspace-content.is-enhanced .product-panel { grid-area:1 / 1; }
#plataforma .workspace-content.is-enhanced .product-panel[hidden] { display:grid!important; visibility:hidden; pointer-events:none; }
#plataforma .workspace-tour-footer { position:absolute; left:36px; right:36px; bottom:27px; }
.workspace-tour-status { display:flex; align-items:center; gap:11px; margin-bottom:13px; font-size:11px; line-height:1.5; color:#607086; }
.workspace-tour-count { font:9px var(--font-mono); color:#8c9bb0; white-space:nowrap; }
.workspace-tour-next { margin-left:auto; color:#8592a5; font-size:10px; }
.workspace-tour-next > span { margin-left:7px; }
.workspace-tour-track { height:3px; border-radius:2px; background:#eef1f5; overflow:hidden; }
.workspace-tour-track i { display:block; width:100%; height:100%; background:var(--rose); transform-origin:left; transform:scaleX(0); }
.workspace[data-tour-complete="true"] [data-tour-status] { color:#047857; }
#plataforma .workspace.is-touring .product-demo { position:relative; overflow:hidden; }
#plataforma .workspace.is-touring [data-tour-item] { opacity:0; transform:translateY(12px); transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1); }
#plataforma .workspace.is-touring [data-tour-item][data-shown="true"] { opacity:1; transform:translateY(0); }
#plataforma .workspace.is-touring .milestone[data-shown="false"] { opacity:.15; transform:translateY(4px); }
#plataforma .workspace.is-touring .milestone[data-current="true"] .milestone-icon { color:var(--rose); background:#fff0f4; border-color:#ffcbd9; }
#plataforma .workspace.is-touring .doc-tile[data-shown="false"] { opacity:.18; transform:translateY(4px); }
#plataforma .workspace.is-touring .doc-tile .status { opacity:0; transition:opacity .4s; }
#plataforma .workspace.is-touring .doc-tile[data-shown="true"] .status { opacity:1; }
#plataforma .demo-conversation { position:relative; }
.demo-typing { display:none; align-items:center; justify-content:flex-end; gap:4px; min-height:26px; margin-top:15px; font-size:10px; color:#7d899a; }
.demo-typing span { margin-right:5px; }
.demo-typing i { width:3px; height:3px; border-radius:50%; background:#94a3b8; animation:tour-typing 1.1s ease-in-out infinite; }
.demo-typing i:nth-last-child(2) { animation-delay:.15s; }
.demo-typing i:last-child { animation-delay:.3s; }
.workspace.is-touring .demo-typing { display:flex; visibility:hidden; }
.workspace.is-touring .demo-typing[data-active="true"] { visibility:visible; }
.workspace[data-tour-paused="true"] .demo-typing i { animation-play-state:paused; }
@keyframes tour-typing { 0%,65%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-3px);opacity:1} }
.workspace-month-steps { display:grid; gap:10px; margin:18px auto 0; min-width:190px; }
.workspace-month-steps > div { display:flex; align-items:center; gap:9px; font-size:11px; color:#61728a; }
.workspace-month-steps .icon { width:15px; height:15px; color:#059669; }

/* A decisive, full-color closing invitation in the brand's pink. */
#comecar.last-call { isolation:isolate; margin-inline:auto; padding:80px 68px; background:radial-gradient(ellipse at 12% 0%,#ff8baf66,transparent 60%),linear-gradient(115deg,#eb2863 5%,#dd1e5a 48%,#9d1649 100%); border:1px solid #db2057; color:#fff; box-shadow:0 22px 55px -30px #a1164d77; }
#comecar.last-call::before { content:""; position:absolute; z-index:-1; width:720px; height:720px; right:-325px; top:-240px; border:1px solid #ffffff21; border-radius:50%; box-shadow:0 0 0 70px #ffffff05,0 0 0 140px #ffffff04; pointer-events:none; }
#comecar .display, #comecar .display em { color:#fff; }
#comecar p { color:#fff; opacity:.9; }
#comecar .last-arrow { color:#ffffff80; }
#comecar .button { background:#fff; color:#98163f; border-color:#fff; box-shadow:0 5px 18px #75042c1a; }
#comecar .button:hover { background-color:#fff1f5; border-color:#fff1f5; }
@media(max-width:1200px) { #comecar.last-call { margin-inline:var(--gutter); padding:64px 44px; } }
@media(max-width:900px) {
  #plataforma .workspace-content { padding-bottom:98px; }
  #plataforma .workspace-tour-footer { left:28px; right:28px; }
  #plataforma .workspace-nav [role="tab"] { justify-content:flex-start; }
  #comecar .last-call-inner { grid-template-columns:1fr; gap:28px; }
}
@media(max-width:600px) {
  .workspace-playback-label { display:none; }
  #plataforma .workspace-tour-controls { margin-left:auto; }
  #plataforma .workspace-chrome { gap:10px; }
  #plataforma .workspace-nav [role="tab"] { padding-right:20px; }
  #plataforma .workspace-tour-footer { left:16px; right:16px; bottom:20px; }
  .workspace-tour-status { flex-wrap:wrap; gap:5px 9px; margin-bottom:10px; }
  .workspace-tour-next { width:100%; margin-left:0; padding-left:50px; }
  #comecar.last-call { padding:48px 28px; border-radius:16px; }
  #comecar .display { font-size:42px; }
  #comecar .button { width:100%; justify-content:space-between; }
}
@media(max-width:480px) { .contact-fab { bottom:16px; right:16px; width:56px; height:56px; } .contact-fab svg { width:28px; height:28px; } }
@media(prefers-reduced-motion:reduce) {
  .contact-fab::before, #wB::before, .demo-typing i { animation:none!important; }
  #plataforma .workspace.is-touring [data-tour-item] { transition:none; }
}

/* Conversation screens use the same geometry, typography and colors as the reference. */
@font-face { font-family:"Contasy Chat"; src:url("../fonts/SystemiaVFTest-Regular.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
#duvidas { --font-disp:"Contasy Chat",Figtree,sans-serif; --fw-med:500; --line:#f5f5f5; --white:#fff; --n-600:#525252; --n-400:#a3a3a3; --sp-8:32px; }
/* ---- Mural: 3 colunas, cards empilhados dentro de cada coluna ------------ */
.duvidas__grid {
  margin-top: var(--sp-8);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  align-items: start;
}
.dv-col { display: flex; flex-direction: column; gap: 32px; }

/* ---- Card de conversa ---------------------------------------------------- */
.dv-chat {
  display: flex; flex-direction: column; gap: 8px;
  background: #ededed;
  border-radius: 8px;
  padding: 24px;
  min-width: 0;
}

/* ---- Turno (bloco de balões do mesmo interlocutor + horário) ------------- */
.dv-turn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dv-turn--in { align-items: flex-start; }

/* linha do turno de saída: pilha de balões + avatar ancorado na base */
.dv-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; width: 100%; min-width: 0; }
.dv-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-stack > .dv-b { width: 100%; }

/* ---- Balão --------------------------------------------------------------- */
.dv-b {
  margin: 0; max-width: 100%;
  border: 1px solid var(--line);
  padding: 6.5px 13px;
  font-family: var(--font-disp); font-weight: 300;
  font-size: 13.9px; line-height: 21.3px;
  overflow-wrap: anywhere;
}
.dv-b > p { margin: 0; }
.dv-b--multi { display: flex; flex-direction: column; gap: 8px; }

.dv-turn--in .dv-b  { background: var(--white); color: var(--n-600); border-radius: 10px 10px 10px 0; }
.dv-turn--out .dv-b { background: #454545;      color: #f0f3f6;      border-radius: 10px 10px 0 10px; }
/* balão de continuação: canto de cima do lado do remetente vira reto */
.dv-turn--in  .dv-b--cont { border-top-left-radius: 0; }
.dv-turn--out .dv-b--cont { border-top-right-radius: 0; }

/* Conteúdo "borrado". O blur é APENAS estético e vale só para o texto — nunca
   para o balão (fundo/borda/raio ficam nítidos). O dado real do cliente não é
   publicado: o HTML já traz texto fictício, então remover o filtro no
   inspecionar não revela nada. */
.dv-blur { display: block; filter: blur(3px); user-select: none; }
.dv-link { color: #8db2ff; font-weight: var(--fw-med); line-height: 18.8px; }

/* ---- Avatar do atendimento ---------------------------------------------- */
.dv-av {
  flex: none; box-sizing: border-box;
  width: 20.5px; height: 20.5px; border-radius: 50%;
  background: var(--rose);
  display: grid; place-items: center; padding-top: 1.6px;
}
.dv-av img { display: block; width: 12.3px; height: 11.7px; }
.dv-av--ghost { visibility: hidden; }

/* ---- Horário + confirmação de leitura ----------------------------------- */
.dv-meta {
  display: flex; align-items: center; gap: 3.3px;
  font-family: var(--font-disp); font-weight: var(--fw-med);
  font-size: 8.2px; line-height: 1.2; color: var(--n-400);
}
.dv-turn--out .dv-meta { width: 100%; justify-content: flex-end; padding-right: 24.6px; }
.dv-check { display: block; width: 11.5px; height: 5.7px; }

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 1023px) {
  /* achata as colunas: os 6 cards voltam à ordem de leitura em 2 colunas */
  .dv-col { display: contents; }
  .duvidas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .duvidas__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}