/* Ajustes de demonstração dentro dos ecrãs (cliente e gestão) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.demo-strip {
  margin: 0; padding: 3px 12px; text-align: center; background: var(--accent-soft); border-top: 1px solid var(--accent-line);
  color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
}
.demo-fill { margin-top: 10px; }
.demo-note { margin: -6px 0 14px; }

/* WhatsApp simulado */
.wa-sheet {
  width: min(92vw, 360px); padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); font: inherit; color: #111b21;
}
.wa-sheet::backdrop { background: rgba(20, 20, 20, .35); }
.wa-head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: #075e54; color: #fff; }
.wa-head small { display: block; opacity: .8; font-size: .75rem; }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; background: #dfe5e7 center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aeb3'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E"); }
.wa-body { padding: 18px 14px; background: #efeae2; }
.wa-bubble {
  margin: 0 0 0 auto; max-width: 88%; padding: 9px 12px; border-radius: 12px 12px 4px 12px;
  background: #d9fdd3; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.wa-note { margin: 0; padding: 12px 16px 4px; font-size: .82rem; color: #54656f; }
.wa-sheet form { padding: 12px 16px 16px; }

/* Marca da demonstração no desenho da Inês Paixão: ícone redondo + nome no topo,
   e o nome por baixo do logótipo no passo 1 (sem o logótipo horizontal dela) */
.brand { gap: 10px; min-width: 0; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.brand-name {
  position: static; width: auto; height: auto; clip: auto; overflow: hidden; text-overflow: ellipsis;
  font: 400 1.2rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.hero-logo { width: 84px; max-width: 30%; }
.hero-name { margin: 10px 0 0; font: 400 1.95rem/1.1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }