/* =============================================================================
   demos.css — "mini-demonstrações de produto" nos painéis das seções split.
   O glyph estático vira uma cena de interface do Yuris. Escopo body.lp2.
   Estado FINAL é o padrão (fallback sem JS / reduced-motion); o JS arma a
   animação adicionando .is-armed e reproduz a cena ao entrar na viewport.
   Dados 100% fictícios, isolados no frontend.
   ========================================================================== */
@layer demos {
  /* ---- Palco (a "janela" do app) ---- */
  body.lp2 .lp2-split-visual.lp2-demo-wrap { padding:0; overflow:visible; background:none; border:none; box-shadow:none; }
  body.lp2 .lp2-demo {
    position:relative; width:100%; min-height:368px;
    border-radius:var(--lp2-radius); overflow:hidden;
    background:linear-gradient(165deg,var(--lp2-card-2),var(--lp2-bg-1));
    border:1px solid var(--lp2-border-strong);
    box-shadow:var(--lp2-shadow),var(--lp2-glow);
    padding:42px 20px 20px;
    display:flex; flex-direction:column; gap:12px;
    font-size:.8rem; color:var(--lp2-text);
  }
  /* barra de título da janela */
  body.lp2 .lp2-demo::before {
    content:''; position:absolute; inset:0 0 auto 0; height:30px;
    background:rgba(6,13,26,.6); border-bottom:1px solid var(--lp2-hairline);
  }
  body.lp2 .lp2-demo::after {
    content:''; position:absolute; top:11px; left:16px; width:8px; height:8px; border-radius:50%;
    background:var(--lp2-metal);
    box-shadow:14px 0 0 var(--lp2-metal), 28px 0 0 var(--lp2-metal);
    opacity:.5;
  }

  /* ---- Primitivas de cena (genéricas, reusadas por todas as cenas) ---- */
  body.lp2 .dm-card {
    background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:10px;
    padding:13px 15px;
  }
  body.lp2 .dm-tag {
    display:inline-block; font-family:var(--lp2-font-display); font-size:.6rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--lp2-gold); margin-bottom:7px;
  }
  body.lp2 .dm-num { font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--lp2-blue-glow); margin-bottom:8px; }
  body.lp2 .dm-row { display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:.74rem; }
  body.lp2 .dm-row span { color:var(--lp2-text-mute); }
  body.lp2 .dm-row b { color:var(--lp2-text); font-weight:600; }

  /* timeline */
  body.lp2 .dm-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  body.lp2 .dm-timeline li { position:relative; display:flex; align-items:center; gap:9px; padding-left:18px; font-size:.74rem; color:var(--lp2-text-dim); }
  body.lp2 .dm-timeline li::before { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--lp2-bg-0); border:2px solid var(--lp2-cyan); }
  body.lp2 .dm-timeline li::after { content:''; position:absolute; left:6px; top:-8px; height:8px; width:2px; background:var(--lp2-border-strong); }
  body.lp2 .dm-timeline li:first-child::after { display:none; }
  body.lp2 .dm-timeline time { font-family:ui-monospace,Menlo,monospace; color:var(--lp2-text-mute); font-size:.68rem; }
  body.lp2 .dm-timeline li.dm-hot { color:var(--lp2-text); border-radius:7px; }
  body.lp2 .dm-timeline li.dm-hot::before { border-color:var(--lp2-gold); background:var(--lp2-gold-soft); }

  /* card de detalhe (movimentação aberta) */
  body.lp2 .dm-detail {
    background:linear-gradient(160deg,rgba(201,162,75,.10),var(--lp2-bg-0));
    border:1px solid rgba(201,162,75,.32); border-radius:10px; padding:12px 14px;
  }
  body.lp2 .dm-detail .dm-tag { color:var(--lp2-gold); }

  /* badges de vínculo */
  body.lp2 .dm-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
  body.lp2 .dm-badge {
    display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
    background:rgba(126,184,246,.08); border:1px solid var(--lp2-border-strong);
    font-size:.68rem; color:var(--lp2-text-dim);
  }
  body.lp2 .dm-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--lp2-cyan); }
  body.lp2 .dm-badge.dm-resp::before { background:var(--lp2-gold); }

  /* selo de confirmação */
  body.lp2 .dm-done { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:#6EE7A0; }
  body.lp2 .dm-done svg { width:15px; height:15px; }

  /* selo de status automático: mostra a FUNCIONALIDADE entregue, não o motor */
  body.lp2 .dm-flag {
    display:inline-flex; align-items:center; gap:7px; margin-top:10px;
    font-size:.68rem; color:#6EE7A0; letter-spacing:.01em;
  }
  body.lp2 .dm-flag::before {
    content:''; width:6px; height:6px; border-radius:50%; background:#6EE7A0;
    box-shadow:0 0 8px rgba(110,231,160,.75);
  }

  /* ---- Estado ARMADO (JS vai animar): esconde os elementos da cena ---- */
  body.lp2 .lp2-demo.is-armed .dm-el { opacity:0; }

  /* ═════════════ Cena INTIMAÇÕES ═════════════ */
  body.lp2 .dm-monitor { display:flex; align-items:center; gap:9px; font-size:.72rem; color:var(--lp2-text-dim); }
  body.lp2 .dm-pulse { width:8px; height:8px; border-radius:50%; background:var(--lp2-cyan); flex:none; animation:dm-pulse 2.2s ease-out infinite; }
  body.lp2 .dm-intim { padding:11px 14px; }
  body.lp2 .dm-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:9px; }
  body.lp2 .dm-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:.66rem; color:var(--lp2-blue-glow); background:rgba(126,184,246,.10); border:1px solid var(--lp2-border-strong); }
  @keyframes dm-pulse { 0%{box-shadow:0 0 0 0 rgba(91,188,224,.55)} 70%{box-shadow:0 0 0 9px rgba(91,188,224,0)} 100%{box-shadow:0 0 0 0 rgba(91,188,224,0)} }

  /* ═════════════ Cena COMUNICAÇÃO ═════════════ */
  body.lp2 .dm-chat { gap:10px; }
  body.lp2 .dm-chat-head { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--lp2-hairline); }
  body.lp2 .dm-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--lp2-font-display); font-size:.72rem; color:var(--lp2-bg-0); background:linear-gradient(150deg,var(--lp2-blue-glow),var(--lp2-cyan)); flex:none; }
  body.lp2 .dm-chat-head b { display:block; font-size:.8rem; color:var(--lp2-text); }
  body.lp2 .dm-chat-head span { font-size:.66rem; color:var(--lp2-text-mute); }
  body.lp2 .dm-msg { max-width:82%; padding:9px 13px; border-radius:13px; font-size:.74rem; line-height:1.45; }
  body.lp2 .dm-msg.dm-in { align-self:flex-start; background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-bottom-left-radius:4px; color:var(--lp2-text-dim); }
  body.lp2 .dm-msg.dm-out { align-self:flex-end; background:linear-gradient(150deg,var(--lp2-primary),#1E3A5F); border-bottom-right-radius:4px; color:#fff; }
  body.lp2 .dm-chip { align-self:center; font-size:.64rem; color:var(--lp2-gold); background:var(--lp2-gold-soft); border:1px solid rgba(201,162,75,.3); padding:4px 12px; border-radius:999px; text-align:center; }
  body.lp2 .dm-note { align-self:stretch; font-size:.66rem; color:var(--lp2-text-mute); border-left:2px solid var(--lp2-metal); padding:3px 0 3px 10px; font-style:italic; }

  /* ═════════════ Cena OPERAÇÃO (funil) ═════════════ */
  body.lp2 .dm-funnel { padding-bottom:42px; }
  body.lp2 .dm-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
  body.lp2 .dm-col { position:relative; min-height:158px; border:1px dashed var(--lp2-border-strong); border-radius:9px; background:rgba(126,184,246,.03); }
  body.lp2 .dm-coltag { position:absolute; top:8px; left:0; right:0; text-align:center; font-size:.58rem; letter-spacing:.03em; text-transform:uppercase; color:var(--lp2-text-mute); }
  body.lp2 .dm-lead { position:absolute; left:20px; top:104px; width:calc((100% - 40px - 21px)/4); box-sizing:border-box; padding:9px 11px; border-radius:9px; font-size:.68rem; color:var(--lp2-text); background:linear-gradient(155deg,var(--lp2-card-2),var(--lp2-bg-1)); border:1px solid var(--lp2-cyan); box-shadow:0 8px 22px rgba(0,0,0,.45); }
  body.lp2 .dm-lead small { display:block; margin-top:3px; font-size:.6rem; color:var(--lp2-text-mute); }
  body.lp2 .dm-funnel-done { position:absolute; left:20px; right:20px; bottom:14px; display:flex; justify-content:center; margin-top:0; }

  /* ═════════════ Cena GESTÃO (escopo) ═════════════ */
  body.lp2 .dm-seg { position:relative; display:grid; grid-template-columns:repeat(3,1fr); background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:10px; padding:4px; }
  body.lp2 .dm-seg-i { position:relative; z-index:2; text-align:center; padding:7px 0; font-size:.68rem; color:var(--lp2-text-mute); transition:color var(--mo-base); }
  body.lp2 .dm-seg-i.is-on { color:var(--lp2-text); }
  body.lp2 .dm-seg-thumb { position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); border-radius:7px; background:linear-gradient(150deg,var(--lp2-primary),#1E3A5F); border:1px solid var(--lp2-border-strong); }
  body.lp2 .dm-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:8px; }
  body.lp2 .dm-kpi { background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:9px; padding:14px 8px; text-align:center; }
  body.lp2 .dm-kpi b { display:block; font-family:var(--lp2-font-display); font-size:1.45rem; color:var(--lp2-blue-glow); line-height:1; }
  body.lp2 .dm-kpi span { display:block; margin-top:7px; font-size:.6rem; color:var(--lp2-text-mute); }

  /* ═════════════ Cena AUTOMAÇÕES ═════════════ */
  body.lp2 .dm-auto { align-items:center; justify-content:center; gap:16px; text-align:center; }
  body.lp2 .dm-event { padding:11px 17px; border-radius:10px; font-size:.78rem; color:var(--lp2-text); background:linear-gradient(150deg,var(--lp2-card-2),var(--lp2-bg-1)); border:1px solid var(--lp2-cyan); }
  body.lp2 .dm-event .dm-tag { display:block; margin-bottom:4px; }
  body.lp2 .dm-flow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  body.lp2 .dm-node { padding:9px 16px; border-radius:9px; font-size:.7rem; color:var(--lp2-text-dim); background:rgba(126,184,246,.06); border:1px solid var(--lp2-border-strong); }

  /* ═════════════ Cena VÍNCULOS (organograma) ═════════════ */
  body.lp2 .dm-org { align-items:center; gap:0; justify-content:flex-start; }
  body.lp2 .dm-onode { padding:7px 14px; border-radius:8px; font-size:.7rem; color:var(--lp2-text); background:var(--lp2-bg-0); border:1px solid var(--lp2-border-strong); white-space:nowrap; }
  body.lp2 .dm-onode.dm-matriz { background:linear-gradient(150deg,var(--lp2-primary),#1E3A5F); border-color:var(--lp2-blue-glow); }
  body.lp2 .dm-onode.dm-adv { border-color:var(--lp2-cyan); }
  body.lp2 .dm-branch { display:flex; gap:16px; justify-content:center; position:relative; margin-top:22px; }
  body.lp2 .dm-branch::before { content:''; position:absolute; top:-22px; left:50%; width:1px; height:22px; background:var(--lp2-border-strong); }
  body.lp2 .dm-bind { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:22px; position:relative; }
  body.lp2 .dm-bind::before { content:''; position:absolute; top:-22px; left:50%; width:1px; height:22px; background:var(--lp2-border-strong); }
  body.lp2 .dm-proccard { font-family:ui-monospace,Menlo,monospace; font-size:.7rem; color:var(--lp2-blue-glow); padding:7px 14px; border-radius:8px; background:var(--lp2-bg-0); border:1px dashed var(--lp2-gold); }
  body.lp2 .lp2-org-stage { max-width:600px; margin:0 auto; }
  body.lp2 .lp2-org-stage .lp2-demo { min-height:392px; }
  body.lp2 .lp2-org-cta { text-align:center; margin-top:30px; }

  /* ═════════════ Cena DASHBOARDS ═════════════ */
  body.lp2 .dm-dash { gap:12px; }
  body.lp2 .dm-dash-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  body.lp2 .dm-stat { position:relative; background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:9px; padding:13px 14px; }
  body.lp2 .dm-stat b { display:block; font-family:var(--lp2-font-display); font-size:1.6rem; color:var(--lp2-blue-glow); line-height:1; }
  body.lp2 .dm-stat span { display:block; margin-top:6px; font-size:.62rem; color:var(--lp2-text-mute); }
  body.lp2 .dm-trend { position:absolute; top:13px; right:14px; font-size:.62rem; font-style:normal; color:#6EE7A0; }
  body.lp2 .dm-chart { background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:9px; padding:13px 15px 22px; }
  body.lp2 .dm-bars { display:flex; align-items:flex-end; justify-content:space-between; gap:9px; height:118px; margin-top:12px; }
  body.lp2 .dm-bar { position:relative; flex:1; display:flex; align-items:flex-end; height:100%; }
  body.lp2 .dm-bar > b { display:block; width:100%; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--lp2-primary),rgba(46,85,135,.35)); transform-origin:bottom; }
  body.lp2 .dm-bar-hot > b { background:linear-gradient(180deg,var(--lp2-blue-glow),var(--lp2-primary)); box-shadow:0 0 16px rgba(126,184,246,.45); }
  body.lp2 .dm-bar i { position:absolute; bottom:-16px; left:0; right:0; text-align:center; font-size:.55rem; font-style:normal; color:var(--lp2-text-mute); }

  /* ═════════════ Cena SHOWCASE (trailer: todas as funções em sequência) ═════════════ */
  body.lp2 .lp2-final-show { max-width:640px; margin:30px auto 8px; }
  body.lp2 .dm-show { min-height:360px; }
  body.lp2 .dm-show-stage { position:relative; flex:1; min-height:236px; }
  body.lp2 .dm-frame { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity,transform; }
  body.lp2 .dm-frame:first-child { opacity:1; }   /* fallback sem-JS / reduced-motion: 1ª cena visível */
  body.lp2 .dm-frame .dm-card { width:100%; max-width:340px; }
  body.lp2 .dm-show-cap { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px 2px; border-top:1px solid var(--lp2-hairline); margin-top:12px; }
  body.lp2 .dm-show-label { font-family:var(--lp2-font-display); font-size:.7rem; letter-spacing:.08em; color:var(--lp2-blue-glow); text-transform:uppercase; }
  body.lp2 .dm-show-dots { display:flex; gap:6px; }
  body.lp2 .dm-show-dot { width:6px; height:6px; border-radius:50%; background:var(--lp2-border-strong); transition:background var(--mo-base),transform var(--mo-base); }
  body.lp2 .dm-show-dot.on { background:var(--lp2-blue-glow); transform:scale(1.3); }
  body.lp2 .dm-fr-org { display:flex; flex-direction:column; align-items:center; gap:18px; }
  body.lp2 .dm-fr-branch { display:flex; gap:14px; }
  body.lp2 .dm-fr-dash { width:100%; max-width:360px; display:flex; flex-direction:column; gap:12px; }
  body.lp2 .dm-fr-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  body.lp2 .dm-fr-bars { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:80px; }
  body.lp2 .dm-fr-bars span { flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--lp2-blue-glow),rgba(46,85,135,.4)); }
  body.lp2 .dm-fr-chat { display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; }
  body.lp2 .dm-fr-funnel { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  body.lp2 .dm-fr-funnel span { padding:9px 12px; border-radius:8px; font-size:.66rem; color:var(--lp2-text-mute); background:rgba(126,184,246,.05); border:1px dashed var(--lp2-border-strong); }
  body.lp2 .dm-fr-funnel span.on { color:var(--lp2-text); border-style:solid; border-color:var(--lp2-cyan); background:rgba(91,188,224,.12); }
  body.lp2 .dm-fr-auto { display:flex; flex-direction:column; align-items:center; gap:14px; }
  body.lp2 .dm-fr-nodes { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  body.lp2 .dm-fr-users { display:flex; flex-direction:column; gap:12px; }
  body.lp2 .dm-user { display:flex; align-items:center; gap:11px; background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:10px; padding:10px 14px; min-width:220px; }
  body.lp2 .dm-user b { display:block; font-size:.78rem; color:var(--lp2-text); }
  body.lp2 .dm-user > div > span { font-size:.64rem; color:var(--lp2-text-mute); }

  /* ═════════════ Abas "O Yuris por dentro" (telas interativas) ═════════════ */
  body.lp2 .lp2-screen { display:grid; grid-template-columns:.82fr 1.18fr; gap:38px; align-items:center; }
  body.lp2 .lp2-screen-text h3 { font-size:1.45rem; margin-top:16px; }
  body.lp2 .lp2-screen-text p { font-size:1rem; color:var(--lp2-text-dim); margin:0; }
  body.lp2 .lp2-screen-demo .lp2-demo { min-height:300px; }

  /* gráfico de linha (dashboard) */
  body.lp2 .dm-line { width:100%; height:84px; margin-top:10px; overflow:visible; }
  body.lp2 .dm-line-path { fill:none; stroke:var(--lp2-blue-glow); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:400; }
  body.lp2 .dm-line-area { fill:rgba(126,184,246,.10); stroke:none; }
  body.lp2 .dm-tab-dash .dm-bars { height:60px; margin-top:14px; margin-bottom:14px; }

  /* listas (processos, intimações) */
  body.lp2 .dm-tab-list { gap:7px; }
  body.lp2 .dm-lhead, body.lp2 .dm-lrow { display:grid; grid-template-columns:1.1fr 1fr auto; gap:10px; align-items:center; }
  body.lp2 .dm-lhead { color:var(--lp2-text-mute); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; padding:0 12px 2px; }
  body.lp2 .dm-lrow { background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:8px; color:var(--lp2-text-dim); font-size:.74rem; padding:10px 12px; }
  body.lp2 .dm-lnum { font-family:ui-monospace,Menlo,monospace; color:var(--lp2-blue-glow); font-size:.72rem; }
  body.lp2 .dm-spill { justify-self:end; padding:3px 9px; border-radius:999px; font-size:.62rem; border:1px solid var(--lp2-border-strong); white-space:nowrap; }
  body.lp2 .dm-s-ok { color:#6EE7A0; background:rgba(110,231,160,.08); border-color:rgba(110,231,160,.3); }
  body.lp2 .dm-s-warn { color:var(--lp2-gold); background:var(--lp2-gold-soft); border-color:rgba(201,162,75,.3); }
  body.lp2 .dm-s-new { color:var(--lp2-cyan); background:rgba(91,188,224,.1); border-color:rgba(91,188,224,.3); }

  /* kanban (tarefas) */
  body.lp2 .dm-kan { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-items:start; }
  body.lp2 .dm-kcol { background:rgba(126,184,246,.03); border:1px solid var(--lp2-border); border-radius:9px; padding:9px; min-height:150px; }
  body.lp2 .dm-ktag { display:block; font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--lp2-text-mute); margin-bottom:9px; text-align:center; }
  body.lp2 .dm-task { background:var(--lp2-card-2); border:1px solid var(--lp2-border-strong); border-radius:7px; padding:8px 10px; font-size:.66rem; color:var(--lp2-text); margin-bottom:7px; }
  body.lp2 .dm-task.dm-done-task { color:var(--lp2-text-mute); text-decoration:line-through; }

  /* lista de conversas (comunicação) */
  body.lp2 .dm-tab-chat { gap:9px; }
  body.lp2 .dm-conv { display:flex; align-items:center; gap:11px; padding:9px 12px; background:var(--lp2-bg-0); border:1px solid var(--lp2-border); border-radius:9px; }
  body.lp2 .dm-conv-b { flex:1; min-width:0; }
  body.lp2 .dm-conv-b b { display:block; font-size:.76rem; color:var(--lp2-text); }
  body.lp2 .dm-conv-b span { font-size:.68rem; color:var(--lp2-text-mute); }
  body.lp2 .dm-unread { flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; font-style:normal; color:#fff; background:var(--lp2-primary-2); }

  /* webhook / automação */
  body.lp2 .dm-tab-auto { align-items:center; justify-content:center; gap:14px; text-align:center; }
  body.lp2 .dm-hook { display:inline-flex; align-items:center; gap:9px; font-size:.74rem; color:var(--lp2-text-dim); padding:9px 14px; background:var(--lp2-bg-0); border:1px dashed var(--lp2-cyan); border-radius:9px; }

  /* compartilhamento matriz */
  body.lp2 .dm-tab-share { align-items:center; justify-content:center; gap:16px; }
  body.lp2 .dm-share-top { display:flex; justify-content:center; }
  body.lp2 .dm-share-doc { text-align:center; padding:9px 14px; border-radius:9px; background:var(--lp2-bg-0); border:1px dashed var(--lp2-gold); font-size:.72rem; color:var(--lp2-blue-glow); }
  body.lp2 .dm-share-doc .dm-tag { display:block; margin-bottom:4px; }

  @media (max-width:820px) {
    body.lp2 .lp2-screen { grid-template-columns:1fr; gap:24px; }
    body.lp2 .lp2-screen-text { text-align:center; }
    body.lp2 .lp2-screen-text .lp2-feature-icon { margin-inline:auto; }
  }

  @media (prefers-reduced-motion:reduce) {
    body.lp2 .lp2-demo.is-armed .dm-el { opacity:1 !important; }
    body.lp2 .dm-pulse { animation:none; }
    body.lp2 .dm-bar > b { transform:none !important; }
  }
  @media (max-width:560px) {
    body.lp2 .lp2-demo { min-height:330px; font-size:.76rem; }
    body.lp2 .dm-flow { flex-direction:column; align-items:center; }
    /* funil: aperta as 4 colunas para caberem sem cortar rótulos */
    body.lp2 .dm-cols { gap:5px; }
    body.lp2 .dm-coltag { font-size:.5rem; letter-spacing:0; }
    body.lp2 .dm-col { min-height:140px; }
    body.lp2 .dm-lead { font-size:.62rem; padding:7px 8px; }
    /* escopo: rótulos e números menores para não vazarem */
    body.lp2 .dm-seg-i { font-size:.6rem; padding:6px 0; }
    body.lp2 .dm-kpi { padding:12px 4px; }
    body.lp2 .dm-kpi b { font-size:1.2rem; }
    body.lp2 .dm-kpi span { font-size:.55rem; }
  }
}