/* ACF Builder — Mockups de interface em HTML (antes eram WebP).
   Um bloco por seção, na ordem da página. Carregar depois de styles.css. */

/* Loop pausado fora da viewport (classe aplicada por mockups.js). */
.mk-paused, .mk-paused * { animation-play-state: paused !important; }
/* Uma vez por entrada: terminada a animação, nada continua em loop (exceção: anéis do motor no hover). */
.mk-done *:not(.eng-sweep), .mk-done *::before, .mk-done *::after { animation: none !important; }
/* Mobile: cada mockup entra com fade suave; a animação interna só começa depois (mockups.js). */
@media (max-width: 1139.98px) {
  .mk-fade { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .mk-fade.mk-in { opacity: 1; transform: none; }
}


/* ==================== hero ==================== */
/* ---------- Hero: widget "CRM e funil" em HTML (layout.pen: Product nWmzi / a324u3) ----------
   Ajuste pedido pelo cliente: texto secundário #8B8F98 → #6B6F78 e chip WhatsApp #14864A → #0F6E3C.
   Contraste (regra 4,5:1): azul da IA #1D74D8 → #1766C9 sobre #EAF4FF; contadores → #5D6169 sobre #E9EAEE; nav e campo → #62666F sobre #F1F2F4.
   As demais cores seguem o layout. */
.product { position: relative; }
.hero-widget[hidden] { display: none; }
.crm {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
}
.crm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.crm-ic { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crm-app { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: #f4f5f7; }
.crm-body { display: flex; flex: 1; min-height: 0; }
.crm-main { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 14px 12px 0; }

.crm-head { display: flex; justify-content: space-between; align-items: center; }
.crm-title { display: flex; flex-direction: column; gap: 2px; }
.crm-crumb { font-size: 11.5px; color: #6b6f78; }
.crm-h { font-size: 17px; font-weight: 600; letter-spacing: -.5px; }
.crm-new-m { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #111318; color: #fff; font-size: 15px; }

.crm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; min-width: 0; }
.crm-stat > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.crm-stat b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; white-space: nowrap; }
.crm-stat span { font-size: 11px; color: #6b6f78; white-space: nowrap; }
.crm-stat i { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: #f1f2f4; color: #6b6f78; font-size: 14px; }
.crm-stat.dark { background: #111318; outline: 0; color: #fff; }
.crm-stat.dark span { color: #9aa0aa; }
.crm-stat.dark i { background: #ffffff1a; color: #fff; }

.crm-stages { display: flex; gap: 6px; overflow: hidden; }
.crm-stages span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; outline: 1px solid #e3e4e7; outline-offset: -1px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.crm-stages i { width: 6px; height: 6px; border-radius: 50%; }
.crm-stages em { font-style: normal; font-size: 11px; font-weight: 400; color: #6b6f78; }
.crm-stages .on { background: #111318; outline-color: #111318; color: #fff; }
.crm-stages .on em { color: #9aa0aa; }
.crm-stages .c1 { background: #3b82f6; }
.crm-stages .c2 { background: #8b5cf6; }
.crm-stages .c3 { background: #f59e0b; }
.crm-stages .c4 { background: #22c55e; }

.crm-kanban { display: flex; gap: 10px; flex: 1; min-height: 0; }
.crm-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.crm-col:not(.is-m), .crm-colh { display: none; }
.crm-colh { align-items: center; gap: 7px; padding: 2px 2px 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.crm-colh i { width: 7px; height: 7px; border-radius: 50%; }
.crm-colh .c1 { background: #4faeff; }
.crm-colh .c2 { background: #a78bfa; }
.crm-colh .c3 { background: #f59e0b; }
.crm-colh .c4 { background: #22c55e; }
.crm-colh em { padding: 1px 6px; border-radius: 999px; background: #e9eaee; font-style: normal; font-size: 10.5px; font-weight: 500; color: #5d6169; }

.crm-deal { display: flex; flex-direction: column; gap: 9px; padding: 11px; border-radius: 10px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.crm-deal.hot { outline: 1.5px solid #4faeff; outline-offset: -1.5px; }
.crm-deal .r1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.crm-deal .av { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: #eef0f3; color: #3b3f47; font-size: 8.5px; font-weight: 600; }
.crm-deal .r2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-deal .r2 b { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.crm-deal .ch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.crm-deal .ch .crm-ic { font-size: 11px; }
.crm-deal .meta { background: #e7f0ff; color: #1d4ed8; }
.crm-deal .wa { background: #e7f8ee; color: #0f6e3c; }
.crm-deal .site { background: #f1f2f4; color: #5b606a; }
.crm-deal .ig { background: #fde8f1; color: #c2185b; }
.crm-ai { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: #eaf4ff; color: #1766c9; font-size: 10.5px; font-weight: 500; }
.crm-ai .crm-ic { font-size: 12px; }
.crm-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, #f4f5f700 0%, #f4f5f7 90%); pointer-events: none; }

/* Chat (só desktop) */
.crm-chat { display: flex; flex-direction: column; width: 300px; flex-shrink: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #e7e8ec; }
.crm-chat-h { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.crm-chat-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: #ede7fb; color: #5b3fb8; font-size: 11px; font-weight: 600; }
.crm-chat-t { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.crm-chat-t b { font-size: 13px; font-weight: 600; }
.crm-chat-t span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #6b6f78; }
.crm-chat-t .crm-ic { color: #14864a; font-size: 11px; }
.crm-call { color: #6b6f78; font-size: 15px; }
.crm-msgs { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 14px; background: #fafafb; }
.crm-msg { position: relative; display: flex; }
.crm-msg.out { justify-content: flex-end; }
.crm-msg .bub { display: flex; flex-direction: column; gap: 3px; width: 200px; padding: 8px 10px; }
.crm-msg.in .bub { background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; border-radius: 12px 12px 12px 3px; }
.crm-msg.out .bub { background: #111318; color: #fff; border-radius: 12px 12px 3px 12px; }
.crm-msg p { font-size: 11.5px; line-height: 16px; }
.crm-msg .tm { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: #6b6f78; }
.crm-msg.out .tm { color: #9aa0aa; }
.crm-msg.out .tm .crm-ic { color: #7cc4ff; font-size: 10px; }
.crm-sys { display: flex; justify-content: center; padding-top: 2px; }
.crm-sys span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #eaf4ff; color: #1766c9; font-size: 10px; font-weight: 500; }
.crm-sys .crm-ic { font-size: 11px; }
.crm-input { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 10px; border-top: 1px solid #e7e8ec; flex-shrink: 0; }
.crm-input span { flex: 1; padding: 8px 12px; border-radius: 999px; background: #f1f2f4; color: #62666f; font-size: 11px; }
.crm-input i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #111318; color: #fff; font-size: 14px; }

/* Indicador de digitação: ocupa o lugar da resposta da IA, sem mexer no layout. */
.crm-typing { position: absolute; top: 0; right: 0; display: flex; gap: 4px; padding: 10px 12px; border-radius: 12px 12px 3px 12px; background: #111318; opacity: 0; transform: translateY(4px); }
.crm-typing i { width: 5px; height: 5px; border-radius: 50%; background: #9aa0aa; }
.crm-msg.is-typing .crm-typing { opacity: 1; transform: none; }
.crm-msg.is-typing .crm-typing i { animation: crm-dot 1s ease-in-out infinite; }
.crm-msg.is-typing .crm-typing i:nth-child(2) { animation-delay: .15s; }
.crm-msg.is-typing .crm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes crm-dot { 0%, 60%, 100% { opacity: .4; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* Estados da animação (o HTML sem JS já é o estado final do layout). */
.crm.mk-live .crm-msg > .bub, .crm.mk-live .crm-ai, .crm.mk-live .crm-sys, .crm.mk-live .crm-typing { transition: opacity .4s ease-out, transform .4s ease-out; }
.crm-msg.is-off > .bub, .crm-sys.is-off { opacity: 0; transform: translateY(6px); }
.crm-ai.is-off { opacity: 0; transform: scale(.96); }

@media (min-width: 740px) and (max-width: 1139.98px) {
  .crm-stat b { font-size: 18px; }
}

@media (min-width: 1140px) {
  .crm { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); }
  .crm-app { border-radius: 15px; }
  .crm-top { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 18px; background: #fff; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
  .crm-brand, .crm-tools { display: flex; align-items: center; width: 220px; }
  .crm-brand { gap: 8px; font-family: var(--brand); font-size: 15px; font-weight: 700; }
  .crm-mark { width: 20.5px; height: 20px; }
  .crm-nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #f1f2f4; }
  .crm-nav span { padding: 6px 13px; border-radius: 999px; color: #62666f; font-size: 12.5px; font-weight: 500; }
  .crm-nav .on { background: #111318; color: #fff; }
  .crm-tools { justify-content: flex-end; gap: 10px; }
  .crm-iconbtn, .crm-me { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; }
  .crm-iconbtn { outline: 1px solid #e7e8ec; outline-offset: -1px; color: #6b6f78; font-size: 15px; }
  .crm-me { background: #111318; color: #fff; font-size: 11px; font-weight: 600; }
  .crm-body { gap: 16px; padding: 18px; }
  .crm-main { gap: 14px; padding: 0; }
  .crm-head { align-items: flex-end; }
  .crm-title { gap: 4px; }
  .crm-h { font-size: 21px; }
  .crm-actions { display: flex; align-items: center; gap: 8px; }
  .crm-filter, .crm-new { display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; }
  .crm-filter { gap: 6px; padding: 7px 12px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
  .crm-filter .crm-ic { color: #6b6f78; font-size: 14px; }
  .crm-new { gap: 8px; padding: 7px 8px 7px 14px; background: #111318; color: #fff; }
  .crm-plus { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #4faeff; font-size: 13px; }
  .crm-stats { display: flex; gap: 10px; }
  .crm-stat { flex: 1; }
  .crm-col:not(.is-m) { display: flex; }
  .crm-colh { display: flex; }
}

/* ==================== engine ==================== */
/* ---------- Motor da seção Plataforma (mockup em HTML, layout.pen: "Engine" Ca0C6 / mobile Inputs, Core Link, Automation) ----------
   Ajustes de contraste em relação ao layout (texto abaixo de 4,5:1 no fundo #08090B/#0F1013):
   #5E6067 e #45474D → #8E9097; #55575E e #3F4146 → #85888F; título pendente = #F5F5F7 com opacidade .55 (≈ #8B8B8C). */
.eng {
  --eng-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
  text-align: left;
}
.eng ul, .eng ol { margin: 0; padding: 0; list-style: none; }

/* Cabeçalhos "ENTRADAS · 4 CANAIS" e "FEITO PELO SISTEMA · AO VIVO" */
.eng-head {
  display: flex; justify-content: space-between; align-items: center;
  height: 16px; margin-bottom: 16px;
  font: 400 10.5px/14px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #8e9097;
}
.eng-head span + span { letter-spacing: .6px; }
.eng-live { display: flex; align-items: center; gap: 6px; color: #8fe3ae; }
.eng-live i { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; }

/* Cards de entrada */
.eng-cards { display: flex; flex-direction: column; gap: 8px; }
.eng-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 16px 0 14px;
  background: #0f1013; border: 1px solid #ffffff10; border-radius: 12px;
}
.eng-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none;
  background: #4faeff0d; border: 1px solid #4faeff4d;
  opacity: 0; transition: opacity .45s var(--eng-ease);
}
.eng-card.is-on::after { opacity: 1; }
.eng-card.is-arrive { animation: eng-arrive .45s var(--eng-ease); }
@keyframes eng-arrive { from { transform: translateX(-6px); } to { transform: none; } }
.eng-card > * { position: relative; z-index: 1; }

.eng-tile {
  position: relative; flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: #17181c; border: 1px solid #ffffff14; color: #8e9097;
}
.eng-tile svg { width: 16px; height: 16px; }
.eng-tile svg:not(.ic) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eng-tile-on {
  position: absolute; inset: -1px; display: grid; place-items: center; border-radius: 10px;
  background: #4faeff1a; border: 1px solid #4faeff33; color: #8fd0ff;
  opacity: 0; transition: opacity .45s var(--eng-ease);
}
.eng-tile-on.eng-wa { background: #25d3661a; border-color: #25d36633; color: #25d366; }
.is-on > .eng-tile .eng-tile-on { opacity: 1; }

.eng-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.eng-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 18px; }
.eng-top b { font-size: 13.5px; font-weight: 500; line-height: 18px; color: #f5f5f7; white-space: nowrap; transition: opacity .4s var(--eng-ease); }
.eng-card:not(.is-on) .eng-top b { opacity: .8; }
.eng-meta { position: relative; flex: none; height: 13px; font: 400 10px/13px var(--mono); letter-spacing: .4px; white-space: nowrap; }
.eng-ago { display: block; color: #85888f; transition: opacity .3s var(--eng-ease); }
.eng-now {
  position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 5px; color: #a8deff;
  opacity: 0; transform: translateY(4px); transition: opacity .4s var(--eng-ease), transform .4s var(--eng-ease);
}
.eng-now i { width: 5px; height: 5px; border-radius: 50%; background: #4faeff; }
.eng-card.is-on .eng-ago { opacity: 0; }
.eng-card.is-on .eng-now { opacity: 1; transform: none; }
.eng-prev { font-size: 12px; line-height: 16px; color: #9ea1a9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s var(--eng-ease); }
.eng-card:not(.is-on) .eng-prev { opacity: .88; }

/* Núcleo (mobile: bloco "Core Link" 350×220) */
.eng-mid { position: relative; height: 220px; }
.eng-mid > * { position: absolute; }
.eng-pool {
  left: calc(50% - 130px); top: -20px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, #1f6fd640, #1f6fd600);
}
.eng-glow { display: none; }
/* Anel do mobile: sem hover no toque, fica oculto. */
.eng-mring { display: none; left: calc(50% - 80px); top: 30px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid #ffffff12; }
.eng-mwire { left: calc(50% - 1px); width: 2px; height: 58px; }
.eng-mwire-in { top: 0; background: linear-gradient(#8fd0ff33, #8fd0ff); }
.eng-mwire-out { top: 162px; background: linear-gradient(#8fd0ff, #8fd0ff33); }
.eng-mwire::before {
  content: ""; position: absolute; left: -3px; width: 8px; height: 40px; border-radius: 4px; filter: blur(5px);
}
.eng-mwire-in::before { top: 20px; background: linear-gradient(#4faeff00, #4faeff99); }
.eng-mwire-out::before { top: -2px; background: linear-gradient(#4faeff99, #4faeff00); }
.eng-mwire i {
  position: absolute; left: 0; top: 0; width: 2px; height: 18px; border-radius: 1px;
  background: linear-gradient(#ffffff00, #fff, #ffffff00);
  opacity: 0; transform: translateY(0);
}
.eng-mpin { left: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1px solid #bfe7ff; }
.eng-mpin-in { top: 55px; }
.eng-mpin-out { top: 159px; }

.eng-core {
  left: calc(50% - 52px); top: 58px; width: 104px; height: 104px; border-radius: 31px; overflow: hidden;
  background:
    radial-gradient(65% 100% at 50% 0%, #6fb8ff38, #6fb8ff00),
    linear-gradient(#1c2333, #0b0e15);
}
.eng-core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(#ffffff66, #ffffff0d 55%, #8fd0ff40);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.eng-core > * { position: absolute; }
.eng-core-tex {
  inset: 0;
  background-image: radial-gradient(circle, #a8deff 0 .5px, transparent 1px);
  background-size: 4px 4px; opacity: .22;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 10%, #000, transparent);
  mask-image: radial-gradient(90% 90% at 50% 10%, #000, transparent);
}
.eng-core-sheen { left: 3.1%; top: -36%; width: 93.75%; height: 62.5%; border-radius: 50%; background: radial-gradient(closest-side, #ffffff1f, #ffffff00); }
.eng-core-bezel { inset: 7%; border-radius: 23.4%; }
.eng-core-bezel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(#ffffff1a, #ffffff05);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.eng-mark { inset: 0; width: 100%; height: 100%; }

/* Linha do tempo "Feito pelo sistema" (mobile: card próprio) */
.eng-out { padding: 17px 15px; background: #0e0f12; border: 1px solid #ffffff14; border-radius: 16px; }
.eng-steps { display: flex; flex-direction: column; gap: 10px; }
.eng-step { position: relative; display: flex; gap: 12px; height: 48px; }
.eng-node {
  position: relative; z-index: 1; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #0f1013; border: 1px solid #ffffff24;
}
.eng-node > i { position: absolute; inset: -1px; border-radius: 50%; }
.eng-n-act {
  background: #08090b; border: 1.5px solid #4faeff;
  opacity: 0; transition: opacity .35s var(--eng-ease);
}
.eng-n-act::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #8fd0ff; }
.eng-n-act::after { content: ""; position: absolute; inset: -7.5px; border-radius: 50%; border: 1px solid #4faeff40; }
.eng-n-done {
  display: grid; place-items: center; background: #4faeff; border: 1px solid #8fd0ff; color: #06121f;
  opacity: 0; transform: scale(.6); transition: opacity .35s var(--eng-ease), transform .35s var(--eng-ease);
}
.eng-n-done .ic { font-size: 11px; }
.eng-step.is-active .eng-n-act { opacity: 1; }
.eng-step.is-done .eng-n-done { opacity: 1; transform: none; }
.mk-live .eng-step.is-active .eng-n-act::after { animation: eng-ping 1.6s ease-out infinite; }
@keyframes eng-ping { 0% { transform: scale(.7); opacity: 1; } 70%, 100% { transform: scale(1.1); opacity: 0; } }

.eng-rail { position: absolute; left: 8px; top: 22px; width: 2px; height: 32px; border-radius: 1px; background: #ffffff1a; overflow: hidden; }
.eng-rail i {
  position: absolute; inset: 0; background: linear-gradient(#4faeff, #4faeff99);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--eng-ease) .1s;
}
.eng-step.is-done .eng-rail i { transform: none; }
.eng-step .eng-top b { opacity: .55; }
.eng-step.is-done .eng-top b, .eng-step.is-active .eng-top b { opacity: 1; }
.eng-time { flex: none; font: 400 10px/13px var(--mono); letter-spacing: .4px; color: #85888f; }
.eng-time.is-now { color: #a8deff; }
.eng-sub { font-size: 12px; line-height: 16px; color: #8e9097; white-space: nowrap; }
.eng-prog { display: flex; gap: 4px; padding-top: 2px; }
.eng-prog i { position: relative; width: 24px; height: 2px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.eng-prog i::after {
  content: ""; position: absolute; inset: 0; background: #4faeff;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--eng-ease), opacity .3s;
}
.eng-prog i.is-full::after { transform: none; }
.eng-prog i.is-half::after { transform: none; opacity: .5; }

/* Pulso (desktop: SVG) */
.eng-pulse { opacity: 0; transition: opacity .2s; }
.eng-pulse.is-run { opacity: 1; }
.eng-pulse path { fill: none; stroke-linecap: round; stroke-dasharray: 9 200; stroke-dashoffset: 9; }
.eng-pulse path:first-child { stroke: #4faeff; stroke-width: 5; stroke-opacity: .5; }
.eng-pulse path:last-child { stroke: #fff; stroke-width: 1.75; }

.mk-live .eng-live i { animation: eng-blink 2s ease-in-out infinite; }
@keyframes eng-blink { 50% { opacity: .35; } }

@media (min-width: 740px) and (max-width: 1139.98px) {
  .eng { max-width: 560px; margin-inline: auto; }
}

/* ---------- Desktop: canvas 1080×392 com as posições do layout ---------- */
@media (min-width: 1140px) {
  .eng { display: block; width: 1080px; height: 392px; margin: 0 auto; }
  .eng-fx { position: absolute; inset: 0; }
  .eng-fx > * { position: absolute; }
  .eng-dots {
    inset: 0; z-index: 0;
    background-image: radial-gradient(circle, #5db6ff 0 1px, transparent 1.4px);
    background-size: 7px 7px; opacity: .2;
    -webkit-mask-image: radial-gradient(34% 60% at 50% 54%, #000, transparent);
    mask-image: radial-gradient(34% 60% at 50% 54%, #000, transparent);
  }
  .eng-wires { inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
  .eng-wires use, .eng-wires path { fill: none; stroke-linecap: round; }
  .eng-ticks { stroke: #ffffff24; stroke-width: 1; }
  .eng-wire { stroke: #ffffff1f; stroke-width: 1.25; }
  .eng-wire-on { stroke: #8fd0ff; stroke-width: 1.5; opacity: 0; transition: opacity .45s var(--eng-ease); }
  .eng-wire-on.is-on { opacity: .8; }
  .eng-wire-out.is-on { opacity: .65; }
  .eng-flow { opacity: 0; transition: opacity .5s var(--eng-ease); mix-blend-mode: screen; }
  .eng-flow.is-on { opacity: 1; }

  .eng-ring, .eng-sweep { left: 408px; top: 80px; width: 264px; height: 264px; border-radius: 50%; z-index: 4; }
  .eng-ring { border: 1px solid #ffffff0f; }
  .eng-sweep {
    background: conic-gradient(from 300deg, #8fd0ff00 0 60%, #8fd0ffb3 97%, #8fd0ff00 100%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  }
  /* Anéis atrás do núcleo: ocultos e parados em repouso; no hover entram com fade e giram. */
  .eng-ring, .eng-sweep, .eng-ticks { opacity: 0; transition: opacity .4s ease-out; }
  .eng-sweep { animation: eng-spin 14s linear infinite; animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {
    .eng:hover :is(.eng-ring, .eng-sweep, .eng-ticks) { opacity: 1; }
    .eng:hover .eng-sweep { animation-play-state: running !important; }
  }
  @keyframes eng-spin { to { transform: rotate(360deg); } }

  .eng-pinlight {
    width: 110px; height: 110px; z-index: 5; mix-blend-mode: screen; border-radius: 50%;
    background:
      radial-gradient(closest-side, #fff 0, #e6f5ffcc 6.4%, #bfe7ff00 12.7%),
      radial-gradient(closest-side, #4faeff 0, #4faeff66 20.9%, #4faeff00 41.8%),
      radial-gradient(closest-side, #1f6fd6b3 0, #1f6fd640 45%, #1f6fd600 100%);
    opacity: 0; transition: opacity .45s var(--eng-ease), transform .45s var(--eng-ease);
  }
  .eng-pinlight.is-on { opacity: 1; }
  .eng-pinlight-in { left: 421px; top: 133px; transform: translateY(calc(var(--c, 0) * 16px)); }
  .eng-pinlight-out { left: 549px; top: 157px; }

  .eng-port, .eng-pin { width: 7px; height: 7px; border-radius: 50%; z-index: 7; background: #08090b; }
  .eng-port { left: 317px; top: calc(var(--y) - 3.5px); border: 1px solid #ffffff2e; }
  .eng-pin { left: 473px; top: calc(var(--y) - 3.5px); border: 1px solid #ffffff40; }
  .eng-pin-out { left: 601px; top: 209px; }
  .eng-port::after, .eng-pin::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    opacity: 0; transition: opacity .35s var(--eng-ease);
  }
  .eng-port::after { background: #08090b; border: 1px solid #8fd0ff; }
  .eng-pin::after { background: #fff; border: 1px solid #bfe7ff; }
  .eng-port.is-on::after, .eng-pin.is-on::after { opacity: 1; }

  .eng-in, .eng-out { position: absolute; top: 40px; width: 280px; z-index: 8; }
  .eng-in { left: 40px; }
  .eng-out { left: 760px; padding: 0; background: none; border: 0; border-radius: 0; }
  .eng-rail { top: 9px; height: 58px; z-index: 0; border-radius: 0; background: #ffffff14; }

  .eng-mid { position: absolute; inset: 0; height: auto; }
  .eng-pool { left: 240px; top: 12px; width: 600px; height: 400px; z-index: 1; background: radial-gradient(closest-side, #1f6fd633 0, #1f6fd60d 45%, #1f6fd600 100%); }
  .eng-glow { display: block; left: 420px; top: 92px; width: 240px; height: 240px; z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, #5db6ff2e, #5db6ff00); }
  .eng-core { left: 476px; top: 148px; width: 128px; height: 128px; border-radius: 38px; z-index: 6; }

  .eng-chip {
    position: absolute; left: 540px; top: 322px; z-index: 8; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 12px;
    background: #0f1013; border: 1px solid #4faeff33; border-radius: 999px;
    font-size: 12.5px; line-height: 16px; color: #c5c7cd; white-space: nowrap;
  }
  .eng-chip i { width: 5px; height: 5px; border-radius: 50%; background: #4faeff; }
  .eng-chip span { transition: opacity .3s var(--eng-ease); }
  .eng-chip span.is-out { opacity: 0; transition-duration: .2s; }
}

@media (prefers-reduced-motion: reduce) {
  .eng *, .eng *::before, .eng *::after { animation: none !important; transition: none !important; }
}

/* ==================== autos ==================== */
/* ---------- Automações: fluxos em HTML + seção travada no scroll ----------
   Fonte: layout.pen, componentes "Card/Scenario" (frame n1Ez9) e seção Automations (desktop J3Lyi, mobile QA693).
   Estados: sem JS ou com prefers-reduced-motion, os 5 cenários ficam empilhados e estáticos.
   Com JS, .autos.is-pinned trava o conteúdo (sticky) e o scroll escolhe o cenário ativo. */

/* Device (moldura escura) */
.af-device {
  position: relative;
  height: 401px;
  border-radius: 16px;
  background: #121316;
  overflow: hidden;
}
.af-device::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(-164deg, #ffffff2e 9%, #ffffff0a 50%, #ffffff14 91%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.af-plate { display: none; }
.af-ui {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 13px;
  border-radius: 14px;
  background: #fff;
  color: #111318;
}
.af-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 100px;
  background: linear-gradient(180deg, #12131600 0%, #121316 85%);
  pointer-events: none;
}

/* Nós */
.af-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border: 1px solid #ecedf0;
  border-radius: 14px;
  background: #fbfbfc;
}
.af-node-on::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #9cc3f5;
  border-radius: inherit;
  pointer-events: none;
}
.af-r { display: flex; align-items: center; gap: 8px; }
.af-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; }
.af-ic .af-svg { width: 13px; height: 13px; }
.af-amber { background: #fef3d7; color: #b7791f; }
.af-blue { background: #e7f0ff; color: #1d74d8; }
.af-violet { background: #efeafd; color: #6d4bd8; }
.af-green { background: #e7f8ee; color: #14864a; }
/* layout: #8B8F98 (3,1:1). Ajustado para 4,5:1. */
.af-k { flex: 1; font-size: 11.5px; line-height: 15px; color: #6b6f78; }
.af-m { font-size: 12px; line-height: 15px; color: #b5b8bf; letter-spacing: 1px; }
.af-t { font-size: 14.5px; font-weight: 600; line-height: 18px; letter-spacing: -.2px; color: #111318; }
.af-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.af-chip { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 14px; }
.af-c-blue { background: #e7f0ff; color: #1d4ed8; }
.af-c-pink { background: #fde8f1; color: #c2185b; }
.af-c-gray { background: #f1f2f4; color: #5b606a; }
/* layout: #14864A (4,2:1) e #B7791F (3,3:1). Ajustados para 4,5:1. */
.af-c-green { background: #e7f8ee; color: #0f7a42; }
.af-c-amber { background: #fef3d7; color: #8a5a12; }
.af-f {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #ecedf0;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  line-height: 15px;
}
.af-fa { color: #6b6f78; }
.af-fi { width: 11px; height: 11px; color: #b5b8bf; flex-shrink: 0; }
.af-fb { font-weight: 500; color: #111318; }
.af-pick {
  width: 100%;
  padding: 10px 9px;
  border: 1px solid #9cc3f5;
  border-radius: 8px;
  background: #f5f9ff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 16px;
  /* layout: #1D74D8 (4,4:1). Ajustado para 4,5:1. */
  color: #1766c9;
}
.af-conn { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.af-line { display: block; width: 1.5px; height: 14px; background: #d9dbe0; }
.af-dot { display: block; width: 7px; height: 7px; border: 1.5px solid #c9ccd2; border-radius: 50%; background: #fff; }

/* Cursor de mão (layout: "Cursor", lucide pointer) */
.af-cursor { position: absolute; z-index: 2; width: 26px; height: 26px; left: 213px; top: 11px; }
.af-cursor .af-svg { width: 100%; height: 100%; fill: #fff; stroke: #111318; stroke-width: 1.6; }

/* ---------- Animação de entrada (só transform e opacity) ---------- */
.af-device .af-node,
.af-device .af-dot,
.af-device .af-cursor { transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .7, .2, 1); }
.af-device .af-line { transform-origin: 50% 0; transition: transform .3s ease-out; }
.af-device .af-node-on::after { transition: opacity .4s ease-out; }
.af-device .af-cursor .af-svg,
.af-device .af-pick { transition: transform .15s ease-out; }

.af-device.af-play .af-node:not(.af-in) { opacity: 0; transform: translateY(10px); }
.af-device.af-play .af-conn:not(.af-in) .af-line { transform: scaleY(0); }
.af-device.af-play .af-conn:not(.af-in) .af-dot { opacity: 0; transform: scale(.4); }
.af-device.af-play .af-node-on:not(.af-lit)::after { opacity: 0; }
.af-device.af-play .af-cursor:not(.af-in) { opacity: 0; transform: translate(18px, 22px); }
.af-device.af-click .af-cursor .af-svg { transform: scale(.86); }
.af-device.af-click .af-node-on .af-pick { transform: scale(.98); }
.af-device.af-reset *, .af-device.af-reset *::after { transition: none !important; }

/* ---------- Seção travada ---------- */
.autos.is-pinned { padding: 0; }
.autos.is-pinned .autos-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
/* O bloco travado cabe sempre na tela: escala calculada em mockups.js (--af-s). */
.autos.is-pinned .autos-pin > .wrap { transform: scale(var(--af-s, 1)); transform-origin: 50% 50%; }
/* Tela baixa: espaçamentos compactos antes de escalar. */
.autos.is-pinned.af-short .autos-pin > .wrap { gap: 14px; }
.autos.is-pinned.af-short .autos-head,
.autos.is-pinned.af-short .autos-head .l { gap: 10px; }
.autos.is-pinned .scen-cards { display: grid; }
.autos.is-pinned .scen-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease-out, transform .35s ease-out, visibility 0s linear .35s;
}
.autos.is-pinned .scen-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s ease-out .05s, transform .4s ease-out .05s, visibility 0s;
}

/* Mobile travado: lista vira 5 segmentos de progresso clicáveis acima do card. */
.autos.is-pinned .autos-row { display: flex; flex-direction: column; gap: 12px; }
.autos.is-pinned .scen-list { display: block; width: 100%; }
.autos.is-pinned .scen-list .link-arrow { display: none; }
.autos.is-pinned .scen-tabs { display: flex; gap: 6px; }
.autos.is-pinned .scen-rail { display: none; }
.autos.is-pinned .scen-tab {
  position: relative;
  flex: 1;
  height: 28px;
  font-size: 0;
  color: transparent;
}
.autos.is-pinned .scen-tab::before,
.autos.is-pinned .scen-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 3px;
  border-radius: 2px;
  background: #ffffff26;
}
.autos.is-pinned .scen-tab::after {
  background: var(--t1);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.autos.is-pinned .scen-tab.is-done::after { transform: none; opacity: .55; }
.autos.is-pinned .scen-tab:focus-visible { outline-offset: 0; }

@media (min-width: 1140px) {
  .af-device { height: 441px; }
  .af-plate { display: block; position: absolute; height: 480px; border-radius: 14px; }
  .af-plate-3 { left: calc(50% - 305px); top: 44px; width: 610px; background: #26272c; }
  .af-plate-2 { left: calc(50% - 291px); top: 32px; width: 582px; background: #303137; }
  .af-ui { left: calc(50% - 275px); right: auto; top: 20px; width: 550px; height: 480px; padding: 22px 65px; }
  .af-fade { display: none; }
  .af-cursor { left: 367px; top: 94px; }
  .af-cursor-a { left: 264px; }
  .af-device::after { background: linear-gradient(-150deg, #ffffff2e 17%, #ffffff0a 50%, #ffffff14 83%); }

  /* Sem trava (sem JS ou movimento reduzido): os 5 cards empilhados ao lado da lista. */
  .scen-cards { display: flex; flex-direction: column; gap: 24px; }

  .autos.is-pinned.af-short .autos-pin > .wrap { gap: 24px; }
  .autos.is-pinned.af-short .autos-head .l { gap: 12px; }
  .autos.is-pinned .autos-row { flex-direction: row; gap: 40px; }
  .autos.is-pinned .scen-cards { display: grid; }
  .autos.is-pinned .scen-list { display: flex; width: 300px; }
  .autos.is-pinned .scen-list .link-arrow { display: inline-flex; }
  .autos.is-pinned .scen-tabs { position: relative; display: block; }
  .autos.is-pinned .scen-tab {
    flex: none;
    height: auto;
    font-size: 21px;
    color: #81848c;
    border-left-color: transparent;
  }
  .autos.is-pinned .scen-tab::before, .autos.is-pinned .scen-tab::after { content: none; }
  .autos.is-pinned .scen-tab:hover { color: var(--t-nav); }
  .autos.is-pinned .scen-tab[aria-selected="true"] { color: var(--t1); border-left-color: var(--t1); }
  .autos.is-pinned .scen-tab:focus-visible { outline-offset: 3px; }
  /* Indicador de progresso: o trilho lateral da lista preenche conforme o scroll. */
  .autos.is-pinned .scen-rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #ffffff1a; }
  .autos.is-pinned .scen-rail i {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #ffffff59;
    transform-origin: 50% 0;
    transform: scaleY(var(--af-p, 0));
  }
}

@media (min-width: 740px) and (max-width: 1139.98px) {
  .autos.is-pinned .scen-list { max-width: 560px; margin-inline: auto; }
}

/* ==================== bento ==================== */
/* ACF Builder — Bento "Além do CRM": mockups em HTML (substituem os bento-*.webp).
   Fonte: layout.pen, frame "Service Bento" (desktop) e "Mobile > Service Bento".
   Mobile-first; >= 1140px = desktop. Prefixo bx-. Animações em mk-bento.js. */

/* ---------- Cartões: sem imagem de fundo, borda em degradê do layout ---------- */
.bento .bcard {
  background-image: none;
  aspect-ratio: auto;
  --gb: linear-gradient(180deg, #ffffff24 0%, #ffffff0a 50%, #ffffff0f 100%);
}
.bento .bcard.gb::before { z-index: 10; }
.bcard-call { min-height: 560px; }
.bcard-reviews { min-height: 420px; }
.bcard-instagram, .bcard-sites, .bcard-sign { min-height: 386px; }
.bcard-reviews, .bcard-instagram, .bcard-sites, .bcard-sign { justify-content: space-between; }
.bcard-app { height: 660px; }

.bx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bx-vis { position: relative; flex: 0 0 auto; }
.bcard-call .bx-vis, .bcard-app .bx-vis { position: absolute; inset: 0; }
.bcard-reviews .bx-vis { height: 262px; }
.bcard-instagram .bx-vis, .bcard-sites .bx-vis, .bcard-sign .bx-vis { height: 232px; }
.bx-vis > * { position: absolute; }
.bx-vis svg { display: block; fill: currentColor; }
.bx-mono { font-family: var(--mono); font-weight: 400; }
.bx-acc { color: var(--a1); }

/* Luz de fundo do layout (gradiente radial, não é glow novo) */
.bx-light {
  left: -200px; top: -260px; width: 900px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #4faeff24, #4faeff00);
  pointer-events: none;
}

/* ---------- Animação: estados (só opacity/transform) ---------- */
.bx-a { transition: opacity .45s ease-out, transform .45s ease-out; }
.bento.bx-js .bx-a:not(.on) { opacity: 0; transform: var(--bx-from, translateY(8px)); }
.bx-type { position: relative; }
.bx-typed { position: absolute; inset: 0; }
.bento.bx-js .bx-ghost { visibility: hidden; }

/* ---------- Avatares e cabeçalhos comuns ---------- */
.bx-head { display: flex; align-items: center; gap: 10px; }
.bx-av {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #4faeff1f; color: var(--a1);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.bx-av-ring { outline: 1px solid #4faeff40; outline-offset: -1px; }
.bx-av-sm { width: 28px; height: 28px; font-size: 10.5px; }
.bx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bx-who b { font-size: 12.5px; font-weight: 500; line-height: 16px; color: var(--t1); }
.bx-shead { display: flex; align-items: center; gap: 7px; }
.bx-shead .ic { font-size: 13px; color: var(--a1); }
.bx-shead b { flex: 1; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--t1); }
.bx-shead .bx-mono { font-size: 9.5px; letter-spacing: .6px; line-height: 12px; }

/* ---------- Ligação no WhatsApp ---------- */
.bx-photo { left: 0; top: 0; width: 100%; height: 340px; }
.bx-photo img { width: 100%; height: 100%; object-fit: cover; }
.bx-fade { left: 0; right: 0; top: 120px; height: 240px; background: linear-gradient(180deg, #0e0f1200 0%, #0e0f12 90%); }
.bcard-call .bx-light { left: -260px; top: 120px; width: 620px; height: 520px; background: radial-gradient(closest-side, #4faeff1a, #4faeff00); }
.bx-glass {
  display: flex; flex-direction: column;
  padding: 14px;
  border-radius: 16px;
  background: #0b0d12cc;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  outline: 1px solid #ffffff1f; outline-offset: -1px;
}
.bx-callbar { left: 16px; right: 16px; top: 208px; gap: 12px; }
/* #8E9097 do layout subiu para #A6A9B0: sobre a parte clara da foto o vidro escuro ficava abaixo de 4,5:1 */
.bx-meta { white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .4px; line-height: 13px; color: #a6a9b0; }
.bx-rec { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #4faeff1f; }
.bx-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--a2); }
.bx-wave { display: flex; align-items: center; justify-content: space-between; height: 22px; }
.bx-wave i { width: 2.5px; height: calc(var(--h) * 1px); border-radius: 2px; background: var(--a1); }
.bx-wave i.off { background: #ffffff2e; }
.bx-summary { display: none; }

/* Waveform e gravação: só rodam com o card na tela */
@keyframes bx-wave { 50% { transform: scaleY(.4); } }
@keyframes bx-rec { 50% { opacity: .35; } }
.bx-call.mk-live.bx-in .bx-wave i { animation: bx-wave 1.1s ease-in-out infinite; }
.bx-call.mk-live.bx-in .bx-wave i:nth-child(3n) { animation-duration: .9s; animation-delay: -.3s; }
.bx-call.mk-live.bx-in .bx-wave i:nth-child(3n+1) { animation-duration: 1.3s; animation-delay: -.6s; }
.bx-call.mk-live.bx-in .bx-wave i:nth-child(4n) { animation-delay: -.15s; }
.bx-call.mk-live.bx-in .bx-wave i.off { animation: none; }
.bx-call.mk-live.bx-in .bx-rec i { animation: bx-rec 1.6s ease-in-out infinite; }

/* ---------- Google Meu Negócio ---------- */
.bx-thread { left: 16px; right: 16px; top: 26px; display: flex; flex-direction: column; gap: 12px; }
.bx-review {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px; border-radius: 14px;
  background: #16171b; outline: 1px solid #ffffff14; outline-offset: -1px;
}
.bx-review .bx-who { gap: 3px; }
.bx-stars { display: flex; gap: 2px; }
.bx-stars svg { width: 11px; height: 10.5px; color: var(--a3); --bx-from: scale(.4); }
/* "HÁ 3 MIN", "@JOANA.LIMA" e "PUBLICADO": #5E6067 do layout subiu para #8E9097 (contraste) */
.bx-when { font-size: 9.5px; letter-spacing: .5px; line-height: 12px; color: var(--t3); }
.bx-txt { font-size: 12.5px; line-height: 18px; color: var(--check); }
.bx-dimtxt { color: var(--t3); }
.bx-reply-wrap { position: relative; padding-left: 26px; }
.bx-reply {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px; border-radius: 14px;
  background: #0f1520; outline: 1px solid #4faeff38; outline-offset: -1px;
}
.bx-tag { padding: 2px 6px; border-radius: 5px; background: #4faeff1f; color: var(--a1); }
.bx-status { display: flex; align-items: center; gap: 6px; --bx-from: translateY(4px); }
.bx-status svg { width: 12px; height: 12px; color: var(--a3); }
.bx-status .bx-mono { font-size: 9.5px; letter-spacing: .5px; line-height: 12px; color: var(--t3); }
.bx-tline { position: absolute; left: 12px; top: -12px; width: 16px; height: 38px; overflow: visible; --bx-from: none; }
.bx-tline path { fill: none; stroke: #4faeff59; stroke-width: 1.25; stroke-linecap: round; }

/* ---------- Instagram ---------- */
.bx-flow { left: 20px; right: 20px; top: 22px; display: flex; flex-direction: column; gap: 10px; }
.bx-comment {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: #16171b; outline: 1px solid #ffffff14; outline-offset: -1px;
}
/* Degradê do avatar levemente mais escuro no centro para o "JL" branco passar de 4,5:1 */
.bx-av-grad { width: 30px; height: 30px; font-size: 10.5px; color: #fff; background: linear-gradient(135deg, #5db6ff 0%, #1a6fd6 30%, #1764c8 100%); }
.bx-comment .bx-who { gap: 3px; }
.bx-comment .bx-who b { font-size: 13.5px; font-weight: 600; line-height: 17px; }
.bx-heart { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.bx-heart svg { width: 14px; height: 14px; }
.bx-heart-off { color: #5e6067; }
.bx-heart-on { position: absolute; inset: 0; color: var(--a3); --bx-from: scale(.5); }
.bx-auto { display: flex; align-items: center; gap: 8px; --bx-from: scale(.96); }
.bx-auto i { flex: 1; height: 1px; background: #4faeff26; }
.bx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #4faeff14; outline: 1px solid #4faeff40; outline-offset: -1px;
  color: var(--a1); font-size: 9.5px; letter-spacing: .5px; line-height: 12px; white-space: nowrap;
}
.bx-chip .ic { font-size: 11px; }
.bx-dm-row { display: flex; justify-content: flex-end; }
/* Degradê do layout (#1A6FD6 → #4FAEFF) escurecido: o texto branco ficava abaixo de 4,5:1 na ponta clara */
.bx-dm {
  width: 248px; max-width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 16px 16px 4px 16px;
  background: linear-gradient(90deg, #1764c8 0%, #1f74da 100%);
  --bx-from: translateY(10px) scale(.97);
  transform-origin: 100% 100%;
}
.bx-dm p { font-size: 12.5px; line-height: 18px; color: #fff; }
.bx-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 8px;
  background: #0b0d122e;
  color: #fff; font-size: 11.5px; font-weight: 500; line-height: 15px;
  --bx-from: translateY(4px);
}
.bx-link .ic { font-size: 11px; }

/* ---------- Sites com IA ---------- */
.bx-prompt {
  left: 20px; right: 20px; top: 20px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 12px; border-radius: 12px;
  background: #16171b; outline: 1px solid #4faeff4d; outline-offset: -1px;
}
.bx-prompt > .ic { font-size: 14px; color: var(--a1); }
.bx-prompt p { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--t1); white-space: nowrap; overflow: hidden; }
.bx-send { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--a3); transition: transform .3s ease-out; }
.bx-send svg { width: 13px; height: 13px; color: #06121f; }
.bx-send.press { transform: scale(.86); }
.bx-browser {
  left: 20px; right: 20px; top: 74px; height: 144px;
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: #16171b; outline: 1px solid #ffffff1a; outline-offset: -1px;
}
.bx-chrome { flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; }
.bx-dots { display: flex; gap: 4px; }
.bx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff26; }
.bx-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 18px; border-radius: 5px; background: #0e0f12; }
.bx-url svg { width: 8px; height: 8px; color: #5e6067; }
.bx-url .bx-mono { font-size: 9px; line-height: 11px; color: var(--t3); }
.bx-gen { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: #4faeff1f; color: var(--a1); font-size: 9px; letter-spacing: .4px; line-height: 11px; --bx-from: scale(.8); }
.bx-gen .ic { font-size: 9px; }
.bx-page { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 10px 14px; background: #fafafb; }
.bx-pnav { display: flex; align-items: center; gap: 8px; --bx-from: translateY(-4px); }
.bx-pnav b { margin-right: auto; font-size: 11px; font-weight: 700; letter-spacing: -.2px; line-height: 14px; color: #111318; }
.bx-pnav span, .bx-ptext span { font-size: 8.5px; line-height: 11px; color: #6b6f78; }
.bx-phero { display: flex; align-items: center; gap: 12px; }
.bx-ptext { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bx-ptext strong { font-size: 15px; font-weight: 600; letter-spacing: -.4px; line-height: 17px; color: #111318; }
.bx-ptext em { padding: 5px 9px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 8.5px; font-style: normal; font-weight: 600; line-height: 11px; }
.bx-pimg { flex-shrink: 0; width: 96px; height: 72px; border-radius: 8px; background: linear-gradient(180deg, #cfe6ff 0%, #8fc2f5 100%); --bx-from: scale(.94); }

/* ---------- Assinatura digital ---------- */
.bcard-sign .bx-light { background: radial-gradient(closest-side, #5db6ff24, #5db6ff00); }
.bx-docwrap { left: 36px; right: 36px; top: 22px; height: 200px; }
.bx-doc { display: flex; flex-direction: column; gap: 7px; padding: 16px; border-radius: 12px; background: #fafafb; color: #111318; }
/* Cinzas do layout (#8B8F98 e #B5B8BF) escurecidos para 4,5:1 sobre o papel */
.bx-dhead { display: flex; justify-content: space-between; font-size: 9px; line-height: 11px; }
.bx-dhead span:first-child { letter-spacing: .8px; color: #6b6f78; }
.bx-dhead span:last-child { letter-spacing: .4px; color: #6e727b; }
.bx-plan { font-size: 13px; font-weight: 600; line-height: 16px; }
.bx-val { font-size: 19px; font-weight: 600; letter-spacing: -.5px; line-height: 23px; }
.bx-sigwrap { margin-top: 11px; padding-bottom: 2px; border-bottom: 1px solid #d9dbe0; }
.bx-sig { position: relative; display: inline-block; overflow: hidden; vertical-align: top; font-family: var(--hand); font-size: 26px; line-height: 26px; color: #1d4ed8; transition: opacity .3s ease-out; }
.bx-sig.out { opacity: 0; }
/* A assinatura é "escrita" por uma máscara da cor do papel que corre para a direita */
.bx-sigcover {
  position: absolute; top: 0; bottom: 0; left: -14px; right: 0;
  background: linear-gradient(90deg, #fafafb00 0, #fafafb 14px);
  transform: translateX(100%);
  transition: transform .8s cubic-bezier(.33, .1, .4, 1);
}
.bento.bx-js .bx-sigcover:not(.on) { transform: none; }
.bx-cap { font-size: 10.5px; line-height: 13px; color: #6b6f78; --bx-from: translateY(4px); }
/* Selo: #2D86EA do layout escurecido para #1F74DA (texto branco a 4,6:1), igual à barra de anúncio */
.bx-signed {
  position: absolute; top: 98px; right: 17px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  background: #1f74da; color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 15px;
  --bx-from: scale(.85);
}
.bx-signed .ic { font-size: 12px; }

/* ---------- App iOS e Android ---------- */
.bcard-app .bx-light { left: -120px; top: 240px; width: 590px; height: 460px; background: radial-gradient(closest-side, #4faeff29, #4faeff00); }
.bx-phone {
  left: 50%; top: 300px; margin-left: -133.25px;
  width: 266.5px; height: 418.5px;
  padding: 10.5px;
  border-radius: 46px;
  background: #0a0b0e;
}
.bx-phone::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(180deg, #ffffff40 0%, #ffffff0d 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bx-screen {
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 38px; overflow: hidden;
  background: linear-gradient(180deg, #13284a 0%, #0e1424 55%, #0b0d12 100%);
}
.bx-sbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 10px; color: #fff; }
.bx-sbar b { font-size: 12px; font-weight: 600; line-height: 15px; }
.bx-island { width: 76px; height: 22px; border-radius: 999px; background: #000; }
.bx-sbar span { display: flex; gap: 4px; }
.bx-sbar svg { width: 12px; height: 12px; }
.bx-clock { display: flex; flex-direction: column; align-items: center; padding: 6px 0 8px; }
.bx-clock span { font-size: 11.5px; font-weight: 500; line-height: 14px; color: #c9d4e6; }
.bx-clock b { font-size: 50px; font-weight: 600; letter-spacing: -2px; line-height: 53px; color: #eaf2ff; }
.bx-notif {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px; border-radius: 18px;
  background: #ffffff1f; outline: 1px solid #ffffff14; outline-offset: -1px;
  --bx-from: translateY(-10px) scale(.97);
}
.bx-nhead { display: flex; align-items: center; gap: 7px; }
.bx-appic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(180deg, #1c2333 0%, #0b0e15 100%); outline: .75px solid #ffffff26; outline-offset: -.75px; }
.bx-appic svg { width: 10px; height: 10px; color: var(--a2); }
.bx-nhead .bx-mono { flex: 1; font-size: 9px; letter-spacing: .6px; line-height: 11px; color: #c9d4e6; }
/* "agora"/"1 min": #9AA6BA do layout clareado para #A9B4C6 (4,5:1 no topo da tela) */
.bx-nwhen { font-size: 10px; line-height: 12px; color: #a9b4c6; }
.bx-notif b { font-size: 12px; font-weight: 600; line-height: 15px; color: #fff; }
.bx-notif > span { font-size: 11.5px; line-height: 14px; color: #c9d4e6; }
.bx-pfade { left: 0; right: 0; top: 580px; height: 80px; background: linear-gradient(180deg, #0e0f1200 0%, #0e0f12b3 45%, #0e0f12 90%); }
.bx-float {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border-radius: 14px;
  background: #18191eb3; outline: 1px solid #ffffff1f; outline-offset: -1px;
  opacity: var(--o, 1);
  --bx-from: translateY(10px);
}
.bx-fic { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #4faeff14; outline: 1px solid #ffffff0f; outline-offset: -1px; color: var(--a2); }
.bx-fic svg { width: 13px; height: 13px; }
.bx-fic .ic { font-size: 13px; }
.bx-ft { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bx-ftop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bx-ft b { font-size: 12px; font-weight: 500; line-height: 15px; color: var(--t1); }
.bx-ft > span:not(.bx-ftop) { font-size: 11px; line-height: 14px; color: var(--t3); }
.bx-ftop .bx-mono { font-size: 8.5px; letter-spacing: .4px; line-height: 11px; }
.bx-f-sale { left: 50%; top: 592px; width: 210px; margin-left: -105px; outline-color: #4faeff4d; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bx-f-sale .bx-fic { background: #4faeff26; outline-color: #4faeff40; color: var(--a1); }

/* ---------- Desktop ---------- */
@media (min-width: 1140px) {
  .bento .bcard { min-height: 0; }
  .bcard-app { height: auto; }

  /* Ligação: foto à direita, degradê à esquerda e embaixo */
  .bx-photo { left: 180px; width: 480px; height: 420px; }
  .bx-fade {
    top: 0; height: 100%;
    background:
      linear-gradient(180deg, #0e0f1200 50%, #0e0f12b3 100%),
      linear-gradient(90deg, #0e0f12 30%, #0e0f12cc 42%, #0e0f1200 60%);
  }
  .bx-callbar { left: auto; right: 24px; top: 24px; width: 204px; }
  .bx-summary { display: flex; gap: 10px; left: auto; right: 24px; top: 248px; width: 256px; --bx-from: translateY(10px); }
  .bx-summary .bx-txt, .bx-summary p { font-size: 12.5px; line-height: 18px; color: var(--check); }
  .bx-next {
    display: flex; align-items: center; gap: 7px;
    padding-top: 10px; border-top: 1px solid #ffffff14;
    font-size: 12px; line-height: 16px; color: #a6a9b0;
    --bx-from: translateY(4px);
  }
  .bx-next .ic { font-size: 13px; color: var(--a1); }

  .bx-thread { left: 24px; right: 24px; }

  /* App: celular à direita com notificações ao redor */
  .bcard-app .bx-light { left: 480px; top: -120px; width: 620px; height: 520px; }
  .bx-phone { left: 610px; top: 34px; margin-left: 0; }
  .bx-pfade { left: 480px; right: auto; top: 228px; width: 600px; height: 72px; }
  .bx-f-sale { left: 420px; top: 104px; width: 212px; margin-left: 0; }
  .bx-f-task { left: 856px; top: 124px; width: 196px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .bx-f-meet, .bx-f-signed { gap: 7px; padding: 8px 9px; border-radius: 12px; }
  .bx-f-meet { left: 902px; top: 52px; width: 154px; }
  .bx-f-signed { left: 392px; top: 194px; width: 184px; }
  .bx-f-meet .bx-fic, .bx-f-signed .bx-fic { width: 22px; height: 22px; border-radius: 7px; }
  .bx-f-meet .bx-fic svg { width: 11px; height: 11px; }
  .bx-f-signed .bx-fic .ic { font-size: 11px; }
  .bx-f-meet .bx-ft b, .bx-f-signed .bx-ft b { font-size: 10.5px; line-height: 13px; }
  .bx-f-meet .bx-ft > span:not(.bx-ftop), .bx-f-signed .bx-ft > span:not(.bx-ftop) { font-size: 9.5px; line-height: 12px; }
  .bx-f-signed .bx-ftop .bx-mono { font-size: 8px; }
  /* Notificações esmaecidas: o layout usa 55% de opacidade; subi para 70% e o texto
     secundário para #B4B6BD, para os textos passarem de 4,5:1 */
  .bx-dim { --o: .7; }
  .bx-dim .bx-ft > span:not(.bx-ftop), .bx-dim .bx-ftop .bx-mono { color: var(--t2); }
}

/* ==================== agenda ==================== */
/* ---------- Agenda e chat da agenda (HTML; layout.pen "Calendar UI" + "AI Scheduling Chat") ----------
   Contraste: cinza #8B909B do layout → #656A78 (texto pequeno; 4,9 a 5,4:1);
   #1A6FD6 sobre #EAF3FF → #1766C9; #CFE3FB sobre #1A6FD6 → #F2F8FF.
   Sombra do chat e do popover: vem do layout (effect shadow), não é decoração nova. */
.ag-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ag-ic { width: 1em; height: 1em; flex-shrink: 0; }

/* Mobile: agenda "sangra" até a borda direita, recorte de 540px com degradê à direita e embaixo. */
.ag-cal {
  position: relative;
  width: calc(100% + 20px);
  height: 540px;
  overflow: hidden;
  color: #0b0f19;
}
.ag-cal::before, .ag-cal::after { content: ""; position: absolute; z-index: 2; pointer-events: none; }
.ag-cal::before { top: 0; right: 0; bottom: 0; width: 140px; background: linear-gradient(90deg, #ffffff00, #fff); }
.ag-cal::after { left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, #ffffff00, #fff); }

.ag-ui {
  width: 900px;
  height: 684px;
  background: #fff;
  border-radius: 20px;
  outline: 1px solid #e3e4e7;
  outline-offset: -1px;
  overflow: hidden;
  font-family: var(--font);
}
.ag-tool { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; border-bottom: 1px solid #eef0f3; }
.ag-month { display: flex; align-items: center; gap: 10px; }
.ag-month-t { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.ag-nav { display: flex; gap: 2px; }
.ag-nav span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; outline: 1px solid #e3e4e7; outline-offset: -1px; font-size: 13px; color: #0b0f19; }
.ag-views { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #f2f3f5; }
.ag-views span { padding: 4px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 15px; color: #656a78; }
.ag-views .on { background: #fff; outline: 1px solid #e3e4e7; outline-offset: -1px; color: #0b0f19; }
.ag-team { display: flex; align-items: center; }
.ag-team span {
  display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; border-radius: 50%;
  outline: 2px solid #fff; font-size: 9.5px; font-weight: 600;
}
.ag-team .a1 { background: #1a6fd6; color: #fff; }
.ag-team .a2 { background: #cfe3fb; color: #0b3a75; }
.ag-team .a3 { background: #eaf3ff; color: #1766c9; }
.ag-new { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding: 7px 12px 7px 10px; border-radius: 8px; background: #1a6fd6; color: #fff; font-size: 12px; font-weight: 600; line-height: 15px; }
.ag-new .ag-ic { font-size: 13px; }

.ag-days { display: flex; height: 60px; border-bottom: 1px solid #eef0f3; }
.ag-gutter { width: 60px; flex-shrink: 0; }
.ag-day { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 120px; padding: 0 12px; border-left: 1px solid #eef0f3; }
.ag-day .d { font-family: var(--mono); font-size: 10px; letter-spacing: .8px; line-height: 13px; color: #656a78; }
.ag-day .n { font-size: 20px; font-weight: 500; letter-spacing: -.5px; line-height: 24px; }
.ag-day.off .n { color: #656a78; }
.ag-day.today .d { color: #1a6fd6; }
.ag-day.today .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1a6fd6; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0; }

.ag-body { position: relative; height: 560px; }
.ag-body > * { position: absolute; }
.ag-today-col { left: 420px; top: 0; width: 120px; height: 560px; background: #f5f9ff; }
.ag-weekend { left: 660px; top: 0; width: 240px; height: 560px; background: #fafafb; }
.ag-hour { left: 0; right: 0; top: calc(var(--y) * 56px); height: 1px; }
.ag-hour::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; height: 1px; background: #eef0f3; }
.ag-hour b { position: absolute; left: 0; top: 5px; width: 52px; text-align: right; font-family: var(--mono); font-size: 9.5px; font-weight: 400; line-height: 12px; color: #656a78; }
.ag-col { left: calc(60px + var(--x) * 120px); top: 0; width: 1px; height: 560px; background: #eef0f3; }

.ag-ev {
  left: calc(62.5px + var(--x) * 120px);
  width: 113px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px 6px 9px;
  border-left: 3px solid #2d86ea;
  border-radius: 7px;
  background: #eaf3ff;
  overflow: hidden;
}
.ag-ev .t { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: -.1px; line-height: 13px; color: #0b3a75; }
.ag-ev .t .ic { font-size: 10px; color: #2d86ea; }
.ag-ev .s { font-size: 10px; line-height: 13px; color: #3d6fa8; white-space: nowrap; }
.ag-ev.slim { justify-content: center; padding-block: 0; }
.ag-ev.gray { background: #f2f3f5; border-color: #b5b8bf; }
.ag-ev.gray .t { color: #5a6070; }
.ag-ev.gray .s { color: #656a78; }
.ag-mariana { padding-block: 5px; background: #1a6fd6; border-color: #1a6fd6; transform-origin: 0 50%; }
.ag-mariana .t, .ag-mariana .t .ic { color: #fff; }
.ag-mariana .s { color: #f2f8ff; }

.ag-now { left: 60px; right: 0; top: 186.5px; height: 1px; background: #1a6fd666; }
.ag-now-today { left: 420px; top: 186px; width: 120px; height: 2px; background: #1a6fd6; }
.ag-now-dot { left: 415px; top: 182px; width: 10px; height: 10px; border-radius: 50%; background: #1a6fd6; outline: 2px solid #fff; outline-offset: -1px; }
.ag-now-time { left: 6px; top: 177.5px; padding: 2px 6px; border-radius: 5px; background: #1a6fd6; color: #fff; font-family: var(--mono); font-size: 9.5px; font-weight: 600; line-height: 12px; }

.ag-pop {
  left: 184px; top: 34px; z-index: 3;
  width: 232px;
  display: none;
  flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  outline: 1px solid #e3e4e7;
  outline-offset: -1px;
  box-shadow: 0 2px 6px #0b0f1914, 0 16px 40px #0b0f1924; /* layout: effect do "Event Popover" */
  transform-origin: 100% 40%;
}
.ag-pop-head { display: flex; align-items: flex-start; gap: 8px; }
.ag-pbar { width: 4px; height: 34px; border-radius: 2px; background: #1a6fd6; flex-shrink: 0; }
.ag-pop-head .tt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ag-pop-head b { font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; line-height: 17px; }
.ag-pop-head .tt span { font-size: 11.5px; line-height: 14px; color: #5a6070; }
.ag-pop-head .x { font-size: 14px; color: #656a78; }
.ag-pop-meta { display: flex; flex-direction: column; gap: 8px; }
.ag-pop-meta span { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 15px; }
.ag-pop-meta .ag-ic { font-size: 13px; color: #5a6070; }
.ag-div { position: static; display: block; height: 1px; background: #eef0f3; }
.ag-done { display: flex; flex-direction: column; gap: 8px; }
.ag-done .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; line-height: 12px; color: #656a78; }
.ag-chk { display: flex; align-items: center; gap: 8px; }
.ag-chk .ck { position: relative; width: 13px; height: 13px; color: #1a6fd6; font-size: 13px; }
.ag-chk .ck .ag-ic { position: absolute; inset: 0; }
.ag-chk .t { flex: 1; font-size: 12px; line-height: 15px; }
.ag-chk .w { font-family: var(--mono); font-size: 9px; letter-spacing: .4px; color: #656a78; }
.ag-chk .w.now { color: #1a6fd6; }
.ag-actions { display: flex; gap: 8px; padding-top: 2px; }
.ag-actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-radius: 8px; font-size: 12px; line-height: 15px; }
.ag-actions .go { background: #1a6fd6; color: #fff; font-weight: 600; }
.ag-actions .go .ag-ic { font-size: 12px; }
.ag-actions .re { outline: 1px solid #e3e4e7; outline-offset: -1px; font-weight: 500; }

/* Chat */
.ag-chat {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 350px;
  border-radius: 16px;
  background: #fff;
  outline: 1px solid #e3e4e7;
  outline-offset: -1px;
  box-shadow: 0 2px 6px #0b0f1914, 0 16px 40px #0b0f1924; /* layout: effect do "AI Scheduling Chat" */
  color: #0b0f19;
}
.ag-chat-in { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ag-chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 4px; }
.ag-chat-head .av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf3ff; color: #1766c9; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.ag-chat-head .nm { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ag-chat-head .nm b { font-size: 12.5px; font-weight: 600; line-height: 16px; }
.ag-chat-head .nm span { font-family: var(--mono); font-size: 9px; letter-spacing: .6px; line-height: 12px; color: #656a78; }
.ag-chat-head .tag { display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: #eaf3ff; color: #1766c9; font-size: 10px; font-weight: 600; line-height: 13px; }
.ag-chat-head .tag .ic { font-size: 10px; }
.ag-msg { position: relative; display: flex; }
.ag-msg.out { justify-content: flex-end; }
.ag-msg > span { max-width: 204px; padding: 7px 10px; font-size: 12px; line-height: 17px; }
.ag-msg.in > span { border-radius: 12px 12px 12px 4px; background: #f2f3f5; }
.ag-msg.out > span { width: 204px; border-radius: 12px 12px 4px 12px; background: #1a6fd6; color: #fff; transform-origin: 100% 100%; }
.ag-msg.in > span { transform-origin: 0 100%; }
.ag-typing {
  position: absolute; right: 0; top: 0;
  display: flex; gap: 3px; padding: 10px 11px;
  border-radius: 12px 12px 4px 12px;
  background: #1a6fd6;
  opacity: 0;
  pointer-events: none;
}
.ag-typing b { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.ag-booked { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f5f9ff; outline: 1px solid #cfe3fb; outline-offset: -1px; }
.ag-booked > .ag-ic { font-size: 14px; color: #1a6fd6; }
.ag-booked > span { display: flex; flex-direction: column; gap: 1px; }
.ag-booked b { font-size: 12px; font-weight: 600; line-height: 15px; color: #0b3a75; }
.ag-booked span span { font-size: 11px; line-height: 14px; color: #3d6fa8; }

@media (min-width: 1140px) {
  .ag-cal { position: absolute; left: 580px; top: 88px; width: 900px; height: 684px; overflow: visible; }
  .ag-cal::before, .ag-cal::after { content: none; }
  .ag-pop { display: flex; }
  .ag-chat { position: absolute; left: 416px; top: 548px; width: 272px; max-width: none; }
}

/* ---------- Animação (só com JS e sem prefers-reduced-motion; o estado padrão é o final do layout) ---------- */
.ag-anim .ag-step {
  transition: opacity .4s ease-out, transform .4s ease-out;
}
.ag-anim .ag-step:not(.on) { opacity: 0; transform: translateY(6px); }
.ag-anim .ag-msg .ag-step:not(.on) { transform: translateY(6px) scale(.96); }
.ag-anim .ag-mariana:not(.on) { transform: scale(.9); }
.ag-anim .ag-pop:not(.on) { transform: translateY(6px) scale(.98); }
/* Checks: o anel fica, o "v" e o rótulo da data entram. */
.ag-anim .ag-chk.ag-step:not(.on) { opacity: 1; transform: none; }
.ag-anim .ag-chk .tick, .ag-anim .ag-chk .w { transition: opacity .35s ease-out, transform .35s ease-out; }
.ag-anim .ag-chk:not(.on) .tick { opacity: 0; transform: scale(.4); }
.ag-anim .ag-chk:not(.on) .w { opacity: 0; transform: translateX(-4px); }
.ag-anim .ag-chk:not(.on) .ring { opacity: .45; }
.ag-anim .ag-chk .ring { transition: opacity .35s ease-out; }
.ag-anim .ag-typing { transition: opacity .3s ease-out; }
.ag-anim .ag-typing.on { opacity: 1; }
.ag-anim .ag-typing.on b { animation: ag-dot 1s ease-in-out infinite; }
.ag-anim .ag-typing.on b:nth-child(2) { animation-delay: .15s; }
.ag-anim .ag-typing.on b:nth-child(3) { animation-delay: .3s; }
@keyframes ag-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
.ag-anim.ag-run .ag-now-dot { animation: ag-pulse 2.4s ease-out infinite; }
@keyframes ag-pulse { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.3); } 45% { transform: scale(1); } }

/* ==================== onboard ==================== */
/* ---------- Onboarding: chamada de boas-vindas em HTML (layout.pen: Laptop K9XdhT / Device gQy6e) ----------
   Só a foto do Rafael é imagem. Subtítulos #5E6067 → #8E9097 (contraste 5,6:1 no fundo #15171B).
   A sombra de chão do notebook (Floor Shadow) é um radial-gradient do layout, não box-shadow. */
.lap { position: relative; width: 100%; text-align: left; color: #f5f5f7; font-size: 11.5px; line-height: normal; }
.lap-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lap-ic { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lap-lid { position: relative; padding: 7px; border-radius: 22px; background: #0a0b0d; }
.lap-lid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #ffffff33 0%, #ffffff0a 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.lap-screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: #0e0f12; }

.lap-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid #ffffff0f; flex-shrink: 0; }
.lap-logo { width: 18px; height: 18px; }
.lap-title { flex: 1; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap-rec { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #ffffff0d; color: #c5c7cd; font-family: var(--mono); font-size: 10px; }
.lap-rec i { width: 6px; height: 6px; border-radius: 50%; background: #8fd0ff; }

.lap-main { display: flex; flex-direction: column; gap: 10px; padding: 10px; flex: 1; min-height: 0; }
.lap-people { order: -1; display: flex; gap: 10px; height: 118px; }
.lap-tile { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 8px; }
.lap .lap-rafael img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.lap-rafael::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #00000000 55%, #000000b3 100%); }
.lap-rafael::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid #4faeffb3; pointer-events: none; }
.lap-name { position: absolute; left: 8px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: #0b0d12b3; color: #fff; font-size: 9.5px; font-weight: 500; }
.lap-name .lap-ic { color: #8fd0ff; font-size: 11px; }
.lap-client { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, #1c2333 0%, #11151e 100%); outline: 1px solid #ffffff14; outline-offset: -1px; color: #c5c7cd; font-size: 9.5px; font-weight: 500; }
.lap-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(180deg, #4faeff 0%, #1a6fd6 100%); color: #fff; font-size: 14px; font-weight: 600; }

.lap-share { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #15171b; outline: 1px solid #4faeff59; outline-offset: -1px; }
.lap-label { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #4faeff1a; color: #a8deff; font-size: 10px; }
.lap-label .lap-ic { font-size: 13px; }
.lap-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; flex: 1; }
.lap-head { display: flex; align-items: center; justify-content: space-between; }
.lap-head > div { display: flex; flex-direction: column; gap: 3px; }
.lap-head b { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.lap-head span { font-size: 10.5px; color: #8e9097; }
.lap-head strong { font-size: 20px; font-weight: 600; letter-spacing: -.6px; color: #a8deff; }
.lap-track { height: 4px; overflow: hidden; border-radius: 999px; background: #ffffff14; }
.lap-fill { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2d86ea 0%, #8fd0ff 100%); transform: translateX(-40%); }

.lap-list { display: flex; flex-direction: column; gap: 5px; }
.lap-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; background: #ffffff05; outline: 1px solid #ffffff0a; outline-offset: -1px; }
.lap-row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #4faeff14; border: 1px solid #4faeff4d; opacity: 0; pointer-events: none; }
.lap-row.is-active::after { opacity: 1; }
.lap-ri { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: #ffffff0a; color: #a8deff; font-size: 14px; }
.lap-rt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lap-rt b { font-size: 11.5px; font-weight: 500; }
.lap-rt span { font-size: 10px; color: #8e9097; }
.lap-row.is-next .lap-ri { color: #6e7179; }
.lap-row.is-next b { color: #9a9da5; }
.lap-st { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.lap-st > * { grid-area: 1 / 1; }
.lap-empty { width: 14px; height: 14px; border-radius: 50%; border: 1.25px solid #ffffff26; }
.lap-ok { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #4faeff; color: #06121f; font-size: 10px; }
.lap-ok .lap-ic { stroke-width: 3; }
.lap-row:not(.is-done) .lap-ok { opacity: 0; transform: scale(.6); }
.lap-row.is-done .lap-empty, .lap-row.is-active .lap-empty { opacity: 0; }
.lap-spin { color: #a8deff; font-size: 14px; opacity: 0; }
.lap-row.is-active .lap-spin { opacity: 1; animation: lap-spin 1s linear infinite; }
@keyframes lap-spin { to { transform: rotate(360deg); } }
.lap-cursor { position: absolute; right: 50px; top: 250px; z-index: 2; color: #fff; font-size: 16px; }

.lap-ctrl { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-top: 1px solid #ffffff0f; flex-shrink: 0; }
.lap-ctrl span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #ffffff0f; color: #e8e9ed; font-size: 14px; }
.lap-ctrl .on { background: #4faeff; color: #06121f; }
.lap-ctrl .end { width: 44px; background: #2a2d33; color: #fff; }
.lap-base { display: none; }

/* Estados da animação (o HTML sem JS já é o estado final do layout). */
.lap.mk-live .lap-ok, .lap.mk-live .lap-empty, .lap.mk-live .lap-spin, .lap.mk-live .lap-row::after { transition: opacity .4s ease-out, transform .4s ease-out; }
.lap.mk-live .lap-fill { transition: transform .6s ease-out; }
.lap.mk-live .lap-cursor { transition: opacity .3s ease-out, transform .6s ease-out; }
.lap-cursor.c-start { transform: translate(-80px, -90px); }
.lap-cursor.c-hide { opacity: 0; transform: translate(-80px, -90px); }
.lap.mk-live .lap-cursor.c-hide { transition: opacity .3s ease-out, transform 0s .3s; }

@media (min-width: 1140px) {
  .lap { width: 760px; height: 458px; }
  .lap-lid { position: absolute; left: 40px; top: 0; width: 680px; height: 431px; padding: 10px; border-radius: 18px 18px 6px 6px; }
  .lap-screen { border-radius: 8px; }
  .lap-main { flex-direction: row; }
  .lap-people { order: 0; flex-direction: column; width: 148px; height: auto; flex-shrink: 0; }
  .lap-name { bottom: 19px; }
  .lap-share { flex: 1; min-width: 0; }
  .lap-cursor { right: auto; left: 300px; top: 240px; }
  .lap-base { display: block; position: absolute; left: 0; top: 431px; width: 760px; height: 16px; }
  .lap-base svg { width: 100%; height: 100%; }
  .lap-notch { position: absolute; left: 325px; top: 0; width: 110px; height: 5px; border-radius: 0 0 6px 6px; background: #15171a; }
  .lap-floor { position: absolute; left: 60px; top: 15px; width: 640px; height: 12px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #00000099 0%, #00000000 100%); }
}


/* ==================== hero · conversas ==================== */
/* ---------- Hero: widget "Conversas" (layout.pen: Widget · Conversas r7kWkG) ----------
   Moldura e topbar reaproveitam as classes .crm-* do widget "CRM e funil".
   Mobile: só a caixa de entrada (como o CRM mostra só o funil). */
.wc {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
}
.wc-body { padding: 10px; }
.wc p { margin: 0; }

/* Caixa de entrada */
.wc-list { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #e7e8ec; }
.wc-lh { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.wc-lt { display: flex; align-items: center; justify-content: space-between; }
.wc-lt b { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.wc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; }
.wc-pill .crm-ic { font-size: 11px; }
.wc-filters { display: flex; gap: 6px; }
.wc-filters span { padding: 4px 10px; border-radius: 999px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; color: #3b3f47; font-size: 11px; font-weight: 500; white-space: nowrap; }
.wc-filters .on { background: #111318; outline: 0; color: #fff; }

.wc-items { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.wc-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
/* Estado selecionado numa camada própria, para entrar só com opacidade. */
.wc-row::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: #eaf4ff; outline: 1px solid #4faeff; outline-offset: -1px; opacity: 0; }
.wc-row.is-sel::before { opacity: 1; }
.wc-row > * { position: relative; }
.wc-av { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: #eef0f3; color: #3b3f47; font-size: 11px; font-weight: 600; }
.wc-tx { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.wc-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wc-l1 b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.wc-tx p { overflow: hidden; color: #3b3f47; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.wc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; color: #6b6f78; font-size: 10px; }
.wc-badge { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #1a5fb4; color: #fff; font-size: 10px; font-style: normal; font-weight: 600; }

/* Chips de canal (cores do roteiro, todas ≥ 4,5:1) */
.wc-ch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.wc-ch .crm-ic { font-size: 10px; }
.wc-ch.wa { background: #e7f8ee; color: #0f6e3c; }
.wc-ch.ig { background: #fde8f1; color: #c2185b; }
.wc-ch.em { background: #fff4e5; color: #8a4200; }
.wc-ch.ms { background: #e7f0ff; color: #1d4ed8; }
.wc-ch.tt { background: #eef0f3; color: #111318; }

/* Conversa aberta (só desktop) */
.wc-chat { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #e7e8ec; }
.wc-ch-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.wc-cav { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: #ede7fb; color: #5b3fb8; font-size: 11px; font-weight: 600; }
.wc-ct { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.wc-ct b { font-size: 13px; font-weight: 600; line-height: 17px; }
.wc-ct div { display: flex; align-items: center; gap: 6px; height: 17px; }
.wc-sub { color: #6b6f78; font-size: 10.5px; }
.wc-assign { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 11px; font-weight: 500; }
.wc-assign i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #111318; color: #fff; font-size: 8.5px; font-style: normal; font-weight: 600; }
.wc-assign .crm-ic { color: #6b6f78; font-size: 12px; }
.wc-msgs { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 14px; background: #fafafb; }
.wc-msg { display: flex; }
.wc-msg.out { justify-content: flex-end; }
.wc-msg .bub { display: flex; flex-direction: column; gap: 3px; width: 260px; padding: 8px 10px; }
.wc-msg.in .bub { background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; border-radius: 12px 12px 12px 3px; }
.wc-msg.out .bub { background: #111318; color: #fff; border-radius: 12px 12px 3px 12px; }
.wc-msg p { font-size: 11.5px; line-height: 1.4; }
.wc-msg .tm { color: #6b6f78; font-size: 9.5px; }
.wc-msg.out .tm { color: #9aa0aa; }
.wc-note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff7e0; outline: 1px solid #e9c46a; outline-offset: -1px; }
.wc-note > .crm-ic { color: #7a4d00; font-size: 12px; }
.wc-note div { display: flex; flex-direction: column; gap: 2px; }
.wc-note b { color: #7a4d00; font-size: 10px; font-weight: 600; }
.wc-note p { color: #5c3a00; font-size: 11px; line-height: 1.4; }
.wc-quick { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; flex-shrink: 0; }
.wc-quick > .crm-ic { color: #1a5fb4; font-size: 12px; }
.wc-quick span { padding: 4px 9px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.wc .wc-input { border-top: 0; }

/* ---------- Animação (roteiro "1. Conversas") ----------
   Sem JS ou com movimento reduzido, nada disto se aplica: o widget fica no estado final. */
.wc.mk-live [data-wc], .wc.mk-live .wc-ch, .wc.mk-live .wc-badge, .wc.mk-live .wc-row::before {
  transition: opacity .32s cubic-bezier(.2, .8, .2, 1), transform .32s cubic-bezier(.2, .8, .2, 1);
}
.wc.wc-reset *, .wc.wc-reset *::before { transition: none !important; animation: none !important; }
.wc [data-wc].is-off { opacity: 0; transform: translateY(12px); }
.wc [data-wc="assign"].is-off { transform: translateX(16px); }
.wc .wc-note.is-off { transform: translateY(8px); }
.wc [data-wc="quick"].is-off { transform: translateX(-6px); }
.wc .wc-row.is-off .wc-ch { opacity: 0; transform: scale(.8); }
.wc .wc-badge.is-off { opacity: 0; transform: scale(0); }
.wc .wc-badge.is-pop { animation: wc-pop .36s cubic-bezier(.2, .8, .2, 1); }
.wc .wc-badge.is-pulse { animation: wc-pulse .6s ease-in-out; }
.wc .wc-row.is-unsel::before { opacity: 0; }
@keyframes wc-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (min-width: 1140px) {
  .wc { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); }
  .wc-body { padding: 18px; }
  .wc-list { flex: 0 0 330px; }
}

/* ==================== hero · automacoes ==================== */
/* ---------- Hero: widget "Automações" (layout.pen: Widget · Automações kMIbE) ----------
   Moldura, topbar e título reaproveitam as classes .crm-* do widget "CRM e funil".
   Mobile (sem layout próprio): só o fluxo, em coluna (gatilho → … → condição → Não → follow-up → proposta),
   com o mesmo tamanho do CRM no mobile. O ramo "Sim", o selo e o painel lateral ficam só no desktop. */
.hero-widget.wa {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
}
.wa-canvas { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 14px 12px 12px; }
.wa-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wa-head .crm-h { white-space: nowrap; }
.wa-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wa-ativa { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e7f8ee; color: #0f6e3c; font-size: 11px; font-weight: 500; }
.wa-ativa i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.wa-power { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 12px; font-weight: 500; }

/* Toggle: o azul é uma camada com opacidade e o knob anda com transform. */
.wa-tg { position: relative; display: block; width: 30px; height: 18px; flex-shrink: 0; border-radius: 999px; background: #d5d8de; }
.wa-tg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1a5fb4; }
.wa-tg i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(12px); }
.wa-tg.off::before { opacity: 0; }
.wa-tg.off i { transform: none; }

/* Área do fluxo */
.wa-area { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 14px 12px; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wa-area::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(180deg, #fff0 0%, #fff 85%); pointer-events: none; }
.wa-row { display: flex; flex-direction: column; }
.wa-no { flex-direction: column-reverse; }

.wa-node { position: relative; display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 10px; border-radius: 10px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wa-top { display: contents; }
.wa-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f1f2f4; color: #3b3f47; font-size: 13px; }
.wa-ic.blue { background: #eaf4ff; color: #1a5fb4; }
.wa-ic.amber { background: #fdebc0; color: #7a4d00; }
.wa-ic.green { background: #e7f8ee; color: #0f6e3c; }
.wa-k { grid-column: 2; font-size: 10px; font-weight: 500; color: #6b6f78; }
.wa-node b { grid-column: 2; font-size: 12px; font-weight: 600; line-height: 16px; }
.wa-sub { display: none; font-size: 10.5px; line-height: 14px; color: #6b6f78; }
.wa-node.cond { background: #fff7e0; outline: 1.5px solid #e9c46a; outline-offset: -1.5px; }
.wa-node.hot { outline: 1.5px solid #4faeff; outline-offset: -1.5px; }
/* Passagem do ponto pelo nó 5: a borda azul fica mais forte (camada sólida, sem brilho). */
.wa-node.hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #1a6fd6; opacity: 0; transition: opacity .3s ease-out; pointer-events: none; }
.wa-node.hot.is-pass::after { opacity: 1; }

.wa-con { display: flex; justify-content: center; align-items: center; height: 12px; color: #9aa0aa; font-size: 12px; }
.wa-con .crm-ic { transform: rotate(90deg); }
.wa-no .wa-con .crm-ic { transform: rotate(-90deg); }
.wa-down { display: flex; justify-content: center; height: 12px; }
.wa-down i { display: block; width: 2px; height: 100%; background: #c9cdd4; transform-origin: 50% 0; }
.wa-area > * { flex-shrink: 0; }
.wa-yes, .wa-down.wa-yes-down, .wa-selo-row { display: none; }
.wa-lbl { align-self: center; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }
.wa-lbl.no { background: #fdecea; color: #a61b12; }
.wa-lbl.yes { background: #e7f8ee; color: #0f6e3c; }
.wa-selo-row { padding-top: 18px; }
.wa-selo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; }
.wa-selo .crm-ic { font-size: 11px; }

/* Ponto que percorre o caminho (cor sólida, sem brilho). */
.wa-dot { position: absolute; z-index: 2; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #4faeff; opacity: 0; pointer-events: none; }

/* ---------- Estados da animação (o HTML sem JS já é o estado final do layout) ---------- */
.hero-widget.wa.mk-live [data-wa] { transition: opacity .32s cubic-bezier(.2, .8, .2, 1), transform .32s cubic-bezier(.2, .8, .2, 1); }
.hero-widget.wa.mk-live .wa-down i { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.hero-widget.wa.mk-live .wa-tg::before { transition: opacity .24s cubic-bezier(.2, .8, .2, 1); }
.hero-widget.wa.mk-live .wa-tg i { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.hero-widget.wa.mk-live .wa-dot { transition: opacity .2s ease-out; }
.hero-widget.wa.wa-pre [data-wa]:not(.is-in) { opacity: 0; transform: translateY(12px); }
.hero-widget.wa.wa-pre .wa-con:not(.is-in) { transform: translateY(-6px); }
.hero-widget.wa.wa-pre .wa-down i:not(.is-in) { opacity: 1; transform: scaleY(0); }
.hero-widget.wa.wa-pre .wa-lbl:not(.is-in) { transform: scale(.85); }
.hero-widget.wa.wa-pre [data-wt]:not(.is-in)::before { opacity: 0; }
.hero-widget.wa.wa-pre [data-wt]:not(.is-in) i { transform: none; }
.hero-widget.wa.wa-reset *, .hero-widget.wa.wa-reset *::before, .hero-widget.wa.wa-reset *::after { transition: none !important; }

@media (min-width: 1140px) {
  .hero-widget.wa { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); }
  .wa-canvas { gap: 14px; padding: 0; }
  .wa-head { align-items: flex-end; }
  .wa-area { padding: 22px 18px; }
  .wa-area::after { content: none; }
  .wa-row { flex-direction: row; align-items: center; gap: 4px; }
  .wa-branch { justify-content: flex-end; padding-right: 53px; }
  .wa-no { flex-direction: row; }
  .wa-yes, .wa-selo-row { display: flex; }
  .wa-down.wa-yes-down { display: flex; }
  .wa-down { justify-content: flex-end; height: 22px; padding-right: 74px; }

  .wa-node { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 150px; flex-shrink: 0; padding: 10px 11px; }
  .wa-top { display: flex; align-items: center; gap: 7px; }
  .wa-ic { font-size: 14px; }
  .wa-sub { display: block; }
  .wa-con { width: 22px; height: auto; flex-shrink: 0; font-size: 16px; }
  .wa-con .crm-ic, .wa-no .wa-con .crm-ic { transform: none; }

  .hero-widget.wa.wa-pre .wa-r1 .wa-con:not(.is-in) { transform: translateX(-6px); }
  .hero-widget.wa.wa-pre .wa-branch .wa-con:not(.is-in) { transform: translateX(6px); }

  /* Painel "Automações ativas" */
  .wa-panel { display: flex; flex-direction: column; width: 300px; flex-shrink: 0; overflow: hidden; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
  .wa-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid #e7e8ec; }
  .wa-ph b { font-size: 13px; font-weight: 600; }
  .wa-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; }
  .wa-pill .crm-ic { font-size: 11px; }
  .wa-list { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 6px; }
  .wa-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; }
  .wa-item.on { background: #eaf4ff; outline: 1.5px solid #4faeff; outline-offset: -1.5px; }
  .wa-iic { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: #f1f2f4; color: #3b3f47; font-size: 14px; }
  .wa-it { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .wa-it b { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .wa-it span { font-size: 10.5px; color: #6b6f78; white-space: nowrap; }
  .wa-pf { padding: 10px; border-top: 1px solid #e7e8ec; }
  .wa-lib { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #111318; color: #fff; font-size: 12px; font-weight: 500; }
  .wa-lib .crm-ic { font-size: 13px; }
}

/* ==================== hero · agentes ==================== */
/* ---------- Hero: widget "Agentes de IA" (layout.pen: Widget · Agentes de IA aD4CH) ----------
   Moldura e topbar reaproveitam as classes .crm-* do widget "CRM e funil".
   Mobile: só a conversa com a IA (os painéis de configuração e ficha ficam no desktop).
   Animação: .wi-play esconde o que ainda não entrou (.is-in); sem ela, tudo fica no estado final do layout. */
.wi {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  --wi-ease: cubic-bezier(.2, .8, .2, 1);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
}
.wi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wi-body { padding: 8px; }

.wi-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wi-tt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.wi-tt b { font-size: 13px; font-weight: 600; }
.wi-tt > span:not(.wi-chip) { font-size: 10.5px; color: #6b6f78; }

/* Chips de canal (padrão dos widgets novos, todos ≥ 4,5:1) */
.wi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.wi-chip .crm-ic { font-size: 10px; }
.wi-chip.wa { background: #e7f8ee; color: #0f6e3c; }
.wi-chip.ig { background: #fde8f1; color: #c2185b; }
.wi-chip.ms { background: #e7f0ff; color: #1d4ed8; }

/* Conversa */
.wi-chat { flex: 1; }
.wi-chat-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.wi-av { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: #fde8f1; color: #9c1450; font-size: 11px; font-weight: 600; }
.wi-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.wi-status .crm-ic { font-size: 11px; }
.wi-msgs { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 14px; background: #fafafb; }
.wi-msg { position: relative; display: flex; }
.wi-msg.out { justify-content: flex-end; }
.wi-b { display: flex; flex-direction: column; gap: 3px; max-width: 78%; padding: 8px 10px; border-radius: 12px 12px 3px 12px; background: #111318; color: #fff; }
.wi-b.in { border-radius: 12px 12px 12px 3px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; color: #111318; }
.wi-b p { margin: 0; font-size: 11.5px; line-height: 1.4; }
.wi-tm { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: #9aa0aa; }
.wi-b.in .wi-tm { color: #6b6f78; }
.wi-tm .crm-ic { font-size: 9px; color: #7cc4ff; }
.wi-typing { position: absolute; top: 0; right: 0; display: flex; gap: 4px; padding: 11px 12px; border-radius: 12px 12px 3px 12px; background: #111318; opacity: 0; }
.wi-typing i { width: 5px; height: 5px; border-radius: 50%; background: #9aa0aa; }
.wi-seal-row { display: flex; justify-content: center; }
.wi-seal { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff1e6; outline: 1px solid #f4b183; outline-offset: -1px; color: #9a3412; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wi-seal .crm-ic { font-size: 12px; }
.wi-seal .wi-arr { font-size: 11px; margin: 0 -2px; }

/* Configuração do agente */
.wi-cfg-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.wi-bot { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: #111318; color: #7cc4ff; font-size: 16px; }
.wi-toggle { position: relative; width: 30px; height: 18px; flex-shrink: 0; overflow: hidden; border-radius: 999px; background: #c9ccd2; }
.wi-toggle::before { content: ""; position: absolute; inset: 0; background: #1a5fb4; }
.wi-toggle i { position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.wi-blk { display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 0; }
.wi-lbl { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #6b6f78; }
.wi-field { margin: 0; padding: 8px 10px; border-radius: 9px; background: #f7f8fa; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 11px; line-height: 1.4; color: #3b3f47; }
.wi-row { display: flex; gap: 6px; }
.wi-chips { gap: 5px; }
.wi-opt { padding: 4px 9px; border-radius: 999px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 10.5px; font-weight: 500; color: #3b3f47; }
.wi-opt.on { background: #111318; outline: 0; color: #fff; }
.wi-rules { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.wi-rules li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #3b3f47; }
.wi-ck { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px; background: #1a5fb4; color: #fff; font-size: 11px; }
.wi-ck .crm-ic { stroke-width: 3; }

/* Ficha do contato */
.wi-sheet-h { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e7e8ec; flex-shrink: 0; }
.wi-sheet-h b { font-size: 13px; font-weight: 600; }
.wi-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #eaf4ff; color: #1a5fb4; font-size: 10.5px; font-weight: 500; }
.wi-pill .crm-ic { font-size: 11px; }
.wi-fields { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.wi-fld { display: flex; flex-direction: column; gap: 4px; }
.wi-k { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #6b6f78; }
.wi-k .crm-ic { font-size: 11px; }
/* Campo: base neutra + camada verde (preenchido) por opacidade. */
.wi-v { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 27px; padding: 0 9px; border-radius: 8px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wi-v::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: #f2fbf5; outline: 1px solid #a7e3bf; outline-offset: -1px; }
.wi-v b { position: relative; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wi-v .crm-ic { position: relative; font-size: 12px; color: #0f6e3c; }
.wi-line { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.wi-hot { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #fff1e6; color: #9a3412; font-size: 10.5px; font-weight: 500; }
.wi-hot .crm-ic { font-size: 11px; }
.wi-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.wi-owner i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #111318; color: #fff; font-style: normal; font-size: 8.5px; font-weight: 600; }

/* ---------- Animação ---------- */
.wi .wi-toggle::before, .wi .wi-toggle i, .wi [data-wi], .wi .wi-b, .wi .wi-typing, .wi .wi-v::before, .wi .wi-v .crm-ic {
  transition: opacity .32s var(--wi-ease), transform .32s var(--wi-ease);
}
.wi.wi-reset *, .wi.wi-reset *::before { transition: none !important; }
.wi.wi-play .wi-toggle:not(.is-in)::before { opacity: 0; }
.wi.wi-play .wi-toggle:not(.is-in) i { transform: translateX(-12px); }
.wi.wi-play [data-wi="blk"]:not(.is-in),
.wi.wi-play .wi-msg:not(.is-in) .wi-b,
.wi.wi-play [data-wi="seal"]:not(.is-in) { opacity: 0; transform: translateY(12px); }
.wi.wi-play [data-wi="seal"]:not(.is-in) { transform: translateY(8px) scale(.92); }
.wi.wi-play [data-wi="pop"]:not(.is-in),
.wi.wi-play [data-wi="hot"]:not(.is-in),
.wi.wi-play [data-wi="owner"]:not(.is-in) { opacity: 0; transform: scale(.6); }
.wi.wi-play .wi-ck:not(.is-in) { transform: scale(0); }
.wi.wi-play [data-wi="fld"]:not(.is-in) .wi-v::before,
.wi.wi-play [data-wi="fld"]:not(.is-in) .wi-v .crm-ic { opacity: 0; }
.wi.wi-play [data-wi="fld"]:not(.is-in) .wi-v .crm-ic { transform: scale(.4); }
.wi .wi-msg.is-typing .wi-typing { opacity: 1; }
.wi .wi-typing i { animation: wi-dot 1s ease-in-out infinite; }
.wi .wi-typing i:nth-child(2) { animation-delay: .15s; }
.wi .wi-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wi-dot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
/* Loop: o ícone do "IA atendendo" respira (100 → 50 → 100%, 2 s). */
.wi.wi-loop .wi-status .crm-ic { animation: wi-breathe 2s ease-in-out infinite; }
@keyframes wi-breathe { 50% { opacity: .5; } }
.wi.mk-static .wi-typing i, .wi.mk-static .wi-status .crm-ic { animation: none; }

@media (min-width: 740px) and (max-width: 1139.98px) {
  .wi { max-width: 560px; margin-inline: auto; }
}

@media (min-width: 1140px) {
  .wi { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); }
  .wi-body { gap: 16px; padding: 18px; }
  .wi-cfg { width: 286px; flex-shrink: 0; }
  .wi-chat { flex: none; width: 482px; }
  .wi-sheet { flex: 1; }
  .wi-b { max-width: 240px; }
  .wi-msg.out .wi-b { width: 240px; }
  .wi-msg:not(.out) .wi-b { width: 240px; }
}

/* ==================== hero · agenda ==================== */
/* ---------- Hero: widget da aba "Agenda" (layout.pen: Widget · Agenda O0fKXO) ----------
   Moldura e topbar reaproveitam as classes do widget "CRM e funil" (crm-app, crm-top, crm-nav…).
   Mobile (não existe no layout): só Qui e Sex na grade e um resumo da demonstração com os lembretes. */
.wg {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
  --h: 30px;
}
.wg-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; padding: 14px 12px 12px; }
.wg-week { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; min-height: 0; }
.wg-head { display: flex; justify-content: space-between; align-items: flex-end; }

.wg-legend { gap: 6px; }
.wg-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 11px; font-weight: 500; color: #3b3f47; }
.wg-legend i { width: 7px; height: 7px; border-radius: 50%; }
.wg-legend .ana { background: #4faeff; }
.wg-legend .diego { background: #a78bfa; }
.wg-legend .bruno { background: #22c55e; }

/* Grade da semana */
.wg-grid { display: flex; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wg-hours { display: flex; flex-direction: column; width: 34px; flex-shrink: 0; padding-top: 34px; }
.wg-hours span { height: var(--h); padding-top: 2px; text-align: center; font-size: 10px; color: #6b6f78; }
.wg-day { display: flex; flex-direction: column; flex: 1; min-width: 0; border-left: 1px solid #e7e8ec; }
.wg-day:not(.wg-dm) { display: none; }
.wg-today { background: #fafcff; }
.wg-dh { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; flex-shrink: 0; border-bottom: 1px solid #e7e8ec; }
.wg-dh span { font-size: 11px; color: #6b6f78; }
.wg-dh b { font-size: 12px; font-weight: 600; }
.wg-dh .wg-hoje { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #111318; color: #fff; font-size: 11px; }
.wg-slots { position: relative; flex: 1; }
.wg-slots::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--h) * 7); background: linear-gradient(to bottom, transparent calc(100% - 1px), #f1f2f4 0) 0 0 / 100% var(--h); }

.wg-ev {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(var(--t) * var(--h) + 3px);
  min-height: calc(var(--d) * var(--h) - 6px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 7px;
  border-left: 3px solid;
  border-radius: 7px;
  transform-origin: 50% 0;
}
.wg-ev b { font-size: 9.5px; font-weight: 600; line-height: 12px; white-space: nowrap; }
.wg-ev span { font-size: 10px; font-weight: 500; line-height: 13px; white-space: nowrap; color: #111318; }
.wg-ev.ana { background: #eaf4ff; border-color: #4faeff; color: #1a5fb4; }
.wg-ev.diego { background: #f1ecfd; border-color: #a78bfa; color: #5b3fb8; }
.wg-ev.bruno { background: #e7f8ee; border-color: #22c55e; color: #0f6e3c; }
.wg-ev.wg-ia { gap: 3px; padding: 6px 8px; border: 0; border-radius: 8px; background: #111318; outline: 1.5px solid #4faeff; outline-offset: -.75px; transform-origin: 50% 50%; }
.wg-ia em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 9.5px; font-weight: 600; line-height: 12px; color: #7cc4ff; }
.wg-ia em .crm-ic { font-size: 10px; }
.wg-ia b { font-size: 10.5px; line-height: 14px; color: #fff; }
.wg-ia span { font-weight: 400; color: #c9cdd4; }

/* Painel da demonstração */
.wg-pline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wg-pline > b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.wg-ok { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #e7f8ee; color: #0f6e3c; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.wg-ok .crm-ic { font-size: 11px; }

.wg-mp { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wg-mrow { display: flex; gap: 6px; }
.wg-mc { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; padding: 5px 7px; border-radius: 8px; background: #fafafb; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.wg-mc > .crm-ic { font-size: 12px; }
.wg-mc.wa > .crm-ic { color: #0f6e3c; }
.wg-mc.sms > .crm-ic { color: #3b3f47; }
.wg-mc.mail > .crm-ic { color: #8a4200; }
.wg-mc .wg-st { margin-left: auto; }

/* Status do lembrete: "Enviando…" → "Enviado" (as duas versões ocupam o mesmo lugar). */
.wg-st { display: inline-grid; justify-items: end; align-items: center; font-size: 10px; font-weight: 500; white-space: nowrap; }
.wg-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 3px; }
.wg-st .crm-ic { font-size: 12px; }
.wg-st .s1 { color: #6b6f78; opacity: 0; }
.wg-st .s2 { color: #0f6e3c; }
.wg-st.is-sending .s1 { opacity: 1; }
.wg-st.is-sending .s2 { opacity: 0; transform: scale(.8); }
.wg-st.sched { display: inline-flex; gap: 3px; color: #1a5fb4; }

/* Estados da animação. Sem JS (ou com movimento reduzido) o HTML já é o estado final do layout. */
.wg.mk-live [data-wg], .wg.mk-live .wg-st > span { transition: opacity .32s cubic-bezier(.2, .8, .2, 1), transform .32s cubic-bezier(.2, .8, .2, 1); }
.wg.mk-live .wg-ev[data-wg="ev"] { transition-duration: .26s; }
.wg.mk-live .wg-ia, .wg.mk-live .wg-ok { transition: opacity .34s cubic-bezier(.2, .8, .2, 1), transform .34s cubic-bezier(.3, 1.5, .6, 1); }
.wg .wg-off { opacity: 0; transform: translateY(12px); }
.wg .wg-ev.wg-off { transform: scaleY(0); }
.wg .wg-ia.wg-off { transform: scale(.9); }
.wg .wg-ok.wg-off { transform: scale(.8); }
.wg [data-wg="panel"].wg-off { transform: translateY(8px); }
.wg-reset *, .wg-reset *::before { transition: none !important; }
.wg-hoje.wg-pulse { animation: wg-pulse .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes wg-pulse { 50% { transform: scale(1.12); } }

@media (min-width: 1140px) {
  .wg { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); --h: 44px; }
  .wg-body { flex-direction: row; gap: 16px; padding: 18px; }
  .wg-week { gap: 14px; }
  .wg-legend { display: flex; }
  .wg-hours { width: 44px; padding-top: 38px; }
  .wg-day:not(.wg-dm) { display: flex; }
  .wg-dh { height: 38px; }

  .wg-panel { display: flex; flex-direction: column; width: 290px; flex-shrink: 0; overflow: hidden; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
  .wg-ph { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid #e7e8ec; }
  .wg-det { display: flex; flex-direction: column; gap: 7px; }
  .wg-det > span { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #3b3f47; }
  .wg-det .crm-ic { font-size: 12px; color: #6b6f78; }
  .wg-det .wg-sel { font-weight: 600; color: #111318; }
  .wg-sel i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: #111318; color: #fff; font-style: normal; font-size: 8.5px; font-weight: 600; }
  .wg-lems { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
  .wg-lab { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #6b6f78; }
  .wg-lem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: #fafafb; outline: 1px solid #e7e8ec; outline-offset: -1px; }
  .wg-lic { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; font-size: 13px; }
  .wa > .wg-lic { background: #e7f8ee; color: #0f6e3c; }
  .sms > .wg-lic { background: #f1f2f4; color: #3b3f47; }
  .mail > .wg-lic { background: #fff4e5; color: #8a4200; }
  .wg-lt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .wg-lt b { font-size: 11.5px; font-weight: 600; }
  .wg-lt span { font-size: 10.5px; color: #6b6f78; white-space: nowrap; }
  .wg-lem .wg-st { margin-right: 4px; }
  .wg-reply { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px 12px 12px 3px; background: #e7f8ee; }
  .wg-reply b { font-size: 10px; font-weight: 600; color: #0f6e3c; }
  .wg-reply span { font-size: 11.5px; }
}

/* ==================== hero · relatorios ==================== */
/* ---------- Hero: widget "Relatórios" (layout.pen: Widget · Relatórios aC9my) ----------
   Moldura, topbar e ícones reaproveitam as classes .crm-* do widget "CRM e funil".
   Larguras das barras em % do trilho, calculadas das medidas do layout.
   O selo "Dados ilustrativos" (topo e rodapé do painel) nunca anima para fora. */
.wr {
  height: 483px;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff0d;
  --gb: linear-gradient(180deg, #ffffff33 0%, #ffffff0d 100%);
  text-align: left;
  color: #111318;
  font-size: 12px;
  line-height: normal;
}
.wr b { font-weight: 600; }
.wr [data-v], .wr-stage b, .wr-src b { font-variant-numeric: tabular-nums; }

.wr-dash { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 14px 12px 0; }
.wr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.wr-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-h { font-size: 17px; font-weight: 600; letter-spacing: -.5px; white-space: nowrap; }
.wr-actions { display: flex; align-items: center; gap: 8px; }
.wr-note { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff7e0; color: #7a4d00; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.wr-note .crm-ic { font-size: 11px; }
.wr-filter { align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wr-filter .crm-ic { color: #6b6f78; font-size: 14px; }

.wr-row { display: flex; flex-direction: column; gap: 12px; }
.wr-card { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; min-width: 0; }
.wr-ct { font-size: 12.5px; font-weight: 600; }

/* Chips de canal (mesmas cores do CRM e dos widgets novos, todas ≥ 4,5:1) */
.wr-ch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.wr-ch .crm-ic { font-size: 11px; }
.wr-ch.meta { background: #e7f0ff; color: #1d4ed8; }
.wr-ch.google { background: #fff4e5; color: #8a4200; }
.wr-ch.ig { background: #fde8f1; color: #c2185b; }
.wr-ch.site { background: #f1f2f4; color: #5b606a; }

/* Origem dos leads */
.wr-src { display: flex; align-items: center; gap: 8px; }
.wr-lb { width: 104px; flex-shrink: 0; }
.wr-track { flex: 1; height: 10px; border-radius: 999px; background: #f1f2f4; }
.wr-src b, .wr-stage b { font-size: 11px; text-align: right; }
.wr-stage b { min-width: 19px; }
.wr-bx { display: block; height: 100%; border-radius: 999px; transform-origin: 0 50%; }

/* Leads por etapa */
.wr-stage { display: flex; align-items: center; gap: 8px; }
.wr-sl { display: flex; align-items: center; gap: 6px; width: 78px; flex-shrink: 0; color: #3b3f47; font-size: 11px; white-space: nowrap; }
.wr-sl i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wr-strack { flex: 1; height: 16px; }
.wr-st { border-radius: 5px; }

/* Receita por vendedor */
.wr-cols { display: flex; align-items: flex-end; gap: 16px; flex: 1; }
.wr-seller { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.wr-sv { font-size: 11px; white-space: nowrap; }
.wr-col { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: #d5d8de; }
.wr-by { transform-origin: 50% 100%; }
.wr-sn { display: flex; align-items: center; gap: 5px; color: #3b3f47; font-size: 11px; }
.wr-av { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #eef0f3; color: #3b3f47; font-size: 8.5px; font-weight: 600; }
.wr-av.dark { background: #111318; color: #fff; }

/* Ligações do time */
.wr-num { display: flex; align-items: flex-end; gap: 8px; }
.wr-num b { font-size: 26px; letter-spacing: -.6px; line-height: 1; }
.wr-num span { color: #6b6f78; font-size: 11px; }
.wr-days, .wr-dl { display: flex; gap: 6px; }
.wr-days { align-items: flex-end; flex: 1; }
.wr-day { display: block; flex: 1; border-radius: 4px 4px 1px 1px; background: #cfe6ff; }
.wr-day.on { background: #1a5fb4; }
.wr-dl span { flex: 1; text-align: center; color: #6b6f78; font-size: 10px; }

/* Painel lateral: retorno por anúncio */
.wr-side { display: flex; flex-direction: column; width: 290px; flex-shrink: 0; overflow: hidden; border-radius: 14px; background: #fff; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wr-side-h { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border-bottom: 1px solid #e7e8ec; }
.wr-side-h b { font-size: 13px; }
.wr-side-h span { color: #6b6f78; font-size: 10.5px; }
.wr-camps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px; }
.wr-camp { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; border-radius: 10px; background: #fafafb; outline: 1px solid #e7e8ec; outline-offset: -1px; }
.wr-camp-t, .wr-camp-v { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.wr-camp-t b { font-size: 11.5px; }
.wr-camp-v { font-size: 10.5px; }
.wr-camp-v > span { color: #6b6f78; }
.wr-ctrack { display: block; height: 6px; border-radius: 999px; background: #e9eaee; }
.wr-cb { background: #4faeff; }
.wr-foot { display: flex; padding: 0 12px 12px; }
.wr-foot span { display: flex; align-items: center; gap: 6px; flex: 1; padding: 6px 9px; border-radius: 8px; background: #fff7e0; color: #7a4d00; font-size: 10px; font-weight: 500; }
.wr-foot .crm-ic { font-size: 11px; }

/* ---------- Animação (o HTML sem JS já é o estado final) ----------
   Só durante a entrada (.wr-play) os itens ainda não revelados (.is-in) ficam ocultos. */
.wr.mk-live .wr-c { transition: opacity .32s cubic-bezier(.2, .8, .2, 1), transform .32s cubic-bezier(.2, .8, .2, 1); }
.wr.mk-live .wr-bx, .wr.mk-live .wr-by { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.wr.mk-live .wr-sv { transition: opacity .3s ease-out; }
.wr.wr-play .wr-c:not(.is-in) { opacity: 0; transform: translateY(12px); }
.wr.wr-play .wr-bx:not(.is-in) { transform: scaleX(0); }
.wr.wr-play .wr-by:not(.is-in) { transform: scaleY(0); }
.wr.wr-play .wr-sv:not(.is-in) { opacity: 0; }
.wr.wr-reset *, .wr.wr-reset { transition: none !important; }

@media (min-width: 1140px) {
  .wr { height: 600px; background: #ffffff14; --gb: linear-gradient(#ffffff33, #ffffff33); }
  .wr-dash { padding: 0; }
  .wr-head { align-items: flex-end; }
  .wr-title { gap: 4px; }
  .wr-h { font-size: 21px; }
  .wr-filter { display: inline-flex; }
  .wr-row { flex-direction: row; flex: 1; min-height: 0; }
  .wr-row > .wr-card { flex: 1; }
}

/* ==================== hero-tabs ==================== */
/* Painéis empilhados na mesma célula: a troca faz fade + leve deslocamento (0,3 s). */
.product { display: grid; grid-template-columns: minmax(0, 1fr); }
/* O .hero centraliza o texto; dentro dos widgets o alinhamento é o do layout. */
.hero-widget { text-align: left; }
.hero-panel { grid-area: 1 / 1; min-width: 0; transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1); }
.hero-panel[hidden] { display: none; }
.hero-panel.is-entering { opacity: 0; transform: translateY(8px); transition: none; }
.hero-panel.is-leaving { opacity: 0; transform: translateY(-4px); transition-duration: .2s; transition-timing-function: ease-in; pointer-events: none; }
.tab[aria-selected="true"] { background: #fff; color: #111214; }
@media (prefers-reduced-motion: reduce) { .hero-panel { transition: none; } }