/* =========================================================
   A DEMONSTRACAO do heroi: o painel financeiro de um empresario, a funcionar.
   Pedido dela a 18-09: no lugar da fotografia, «um video» com a interface do
   dashboard, varios separadores, o cursor a mudar de janela, a rolar, a escrever
   dados e os KPI a amarelo, na linguagem do painel de obrigacoes (captura 162616).

   Nao e' um ficheiro de video: e' HTML + CSS + JS (assets/demo.js). Fica nitido em
   qualquer ecra, pesa poucos kB, para quando sai do ecra e respeita
   prefers-reduced-motion. Classes com prefixo dm- para nao colidirem com nada.
   ========================================================= */

.pr-demo{ align-self: center; margin-top: 0; perspective: 1700px; }
.pr-demo::before{ inset: -4% -10% -2% -10%; }

.dm{
  position: relative; z-index: 1; border-radius: 20px; padding: 1px;
  transform: rotateY(-10deg) rotateX(4deg) rotateZ(.4deg); transform-origin: 60% 50%;
  background: linear-gradient(150deg, rgba(244,223,72,.6), rgba(255,255,255,.10) 30%, rgba(255,255,255,.03) 62%, rgba(244,223,72,.22));
  box-shadow: 0 70px 120px -50px rgba(0,0,0,.95), 0 0 120px -30px rgba(244,223,72,.24);
  transition: transform 1.1s var(--fx);
  font-family: 'Inter Tight', sans-serif; color: #F7F7F9;
}
.dm:hover{ transform: rotateY(-3deg) rotateX(1deg); }
.dm-in{ position: relative; border-radius: 19px; overflow: hidden; background: linear-gradient(180deg, rgba(26,26,33,.98), rgba(13,13,17,.99)); }
.dm-in::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 50% at 12% 0%, rgba(244,223,72,.09), transparent 60%); }

/* barra da janela */
.dm-bar{ display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.dm-lights{ display: flex; gap: 6px; }
.dm-lights i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.13); }
.dm-lights i:first-child{ background: rgba(244,223,72,.8); box-shadow: 0 0 10px rgba(244,223,72,.6); }
.dm-url{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #77778A; }
.dm-tag{ margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #F4DF48; background: rgba(244,223,72,.16); border: 1px solid rgba(244,223,72,.28); padding: 4px 9px; border-radius: 6px; }

/* separadores */
.dm-tabs{ display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dm-tab{ position: relative; padding: 9px 13px 11px; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #77778A; border-radius: 9px 9px 0 0; transition: color .25s, background .25s; }
.dm-tab.on{ color: #F7F7F9; background: rgba(255,255,255,.045); }
.dm-tab.on::after{ content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: #F4DF48; box-shadow: 0 0 12px rgba(244,223,72,.7); }
.dm-tab.toque{ background: rgba(244,223,72,.14); }

/* a janela que se ve e o conteudo que rola la dentro */
.dm-view{ position: relative; height: 398px; overflow: hidden; }
.dm-pane{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.dm-pane.on{ opacity: 1; visibility: visible; }
.dm-scroll{ padding: 18px 18px 26px; transition: transform .9s var(--fx); will-change: transform; }

.dm-h{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: #77778A; font-weight: 500; margin: 0 0 10px; }
.dm-h + .dm-h, .dm-bloco + .dm-h, .dm-kpis + .dm-h, .dm-barras + .dm-h, .dm-linhas + .dm-h, .dm-graf + .dm-h{ margin-top: 20px; }

/* KPI */
.dm-kpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-kpi{ border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 13px 14px 14px; background: rgba(255,255,255,.025); }
.dm-kpi span{ display: block; font-size: 11px; color: #ADADBA; }
.dm-kpi b{ display: block; margin-top: 6px; font-size: 25px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #F4DF48; text-shadow: 0 0 30px rgba(244,223,72,.35); font-variant-numeric: tabular-nums; }
.dm-kpi small{ display: block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: #77778A; }
.dm-kpi.neutro b{ color: #F7F7F9; text-shadow: none; }

/* barras, como as do painel de obrigacoes */
.dm-barras{ display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.dm-barras i{ flex: 1; height: 8%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, rgba(244,223,72,.85), rgba(244,223,72,.10)); transition: height 1.1s var(--fx); }
.dm-barras i:last-child{ background: linear-gradient(180deg, #FFF6B8, rgba(244,223,72,.25)); box-shadow: 0 0 22px rgba(244,223,72,.45); }

/* linhas de lista */
.dm-linhas{ border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; }
.dm-l{ display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 13px; font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; }
.dm-l + .dm-l{ border-top: 1px solid rgba(255,255,255,.05); }
.dm-l small{ display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 400; color: #77778A; margin-top: 2px; letter-spacing: 0; }
.dm-l .v{ font-variant-numeric: tabular-nums; color: #ADADBA; font-weight: 500; }
.dm-chip{ font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; white-space: nowrap; color: #ADADBA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: color .3s, background .3s, border-color .3s; }
.dm-chip.ok{ color: #F4DF48; background: rgba(244,223,72,.16); border-color: rgba(244,223,72,.3); }
.dm-chip.run{ color: #9CC7FF; background: rgba(127,182,255,.12); border-color: rgba(127,182,255,.28); }
.dm-l.nova{ animation: dm-entra .6s var(--fx) both; background: linear-gradient(90deg, rgba(244,223,72,.13), transparent 70%); }
@keyframes dm-entra{ from{ opacity: 0; transform: translateY(-10px); } }

/* grafico de linha da tesouraria */
.dm-graf{ border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 12px 6px; background: rgba(255,255,255,.02); }
.dm-graf svg{ display: block; width: 100%; height: auto; overflow: visible; }
.dm-graf .linha{ fill: none; stroke: #F4DF48; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(244,223,72,.55)); stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.9s var(--fx); }
.dm-graf .area{ fill: url(#dm-grad); opacity: 0; transition: opacity 1.2s ease .7s; }
.dm-graf.on .linha{ stroke-dashoffset: 0; }
.dm-graf.on .area{ opacity: 1; }
.dm-graf .grade{ stroke: rgba(255,255,255,.06); stroke-width: 1; }
.dm-graf .ponto{ fill: #FFF6B8; opacity: 0; transition: opacity .4s ease 1.7s; filter: drop-shadow(0 0 8px rgba(244,223,72,.9)); }
.dm-graf.on .ponto{ opacity: 1; }

/* campos onde o cursor escreve */
.dm-campo{ display: block; }
.dm-campo + .dm-campo{ margin-top: 10px; }
.dm-campo span{ display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #77778A; margin-bottom: 6px; }
/* O campo e' um <span> dentro de .dm-campo, tal como a etiqueta: sem esta regra mais
   especifica herdava o estilo DELA (letra de maquina, maiusculas, cinzento) e o que
   o cursor escrevia saia «CLIENTE 0» em italico. Visto na captura dela das 16:34. */
.dm-campo .dm-input{ display: flex; align-items: center; min-height: 38px; margin: 0; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.35);
  font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: #F7F7F9;
  font-variant-numeric: tabular-nums; transition: border-color .25s, box-shadow .25s; }
.dm-input i{ font-style: normal; }
.dm-input.foco{ border-color: #F4DF48; box-shadow: 0 0 0 3px rgba(244,223,72,.16); }
.dm-input.foco::after{ content: ""; width: 1.5px; height: 17px; margin-left: 2px; background: #F4DF48; animation: dm-pisca .9s steps(1) infinite; }
@keyframes dm-pisca{ 50%{ opacity: 0; } }
.dm-input em{ font-style: normal; color: #77778A; font-weight: 400; }
.dm-duas{ display: grid; grid-template-columns: 1.3fr .7fr; gap: 10px; }
.dm-btn{ display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: #08080A; background: linear-gradient(180deg, #FBEE8A, #F4DF48); box-shadow: 0 0 0 1px rgba(244,223,72,.55), 0 14px 34px -12px rgba(244,223,72,.6); transition: transform .15s; }
.dm-btn.toque{ transform: scale(.95); }

/* resultado do simulador */
.dm-res{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-res .dm-kpi b{ font-size: 23px; }
.dm-nota{ margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: #ADADBA; }
.dm-nota b{ color: #F7F7F9; }

/* o cursor */
.dm-cursor{ position: absolute; left: 0; top: 0; z-index: 6; width: 20px; height: 20px; pointer-events: none;
  transform: translate(330px, 250px); transition: transform .95s cubic-bezier(.3,.7,.2,1); filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.dm-cursor svg{ display: block; width: 20px; height: 20px; }
.dm-cursor::after{ content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #F4DF48; opacity: 0; transform: scale(.3); }
.dm-cursor.clique::after{ animation: dm-clique .5s ease-out; }
@keyframes dm-clique{ 0%{ opacity: .95; transform: scale(.3); } 100%{ opacity: 0; transform: scale(1.5); } }

.dm-leg{ position: relative; z-index: 1; margin: 16px 0 0; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #77778A; }

@media (max-width: 980px){
  .pr-demo{ grid-column: 1; grid-row: 2; max-width: 560px; width: 100%; margin: 20px auto 0; }
  .dm{ transform: none; }
}
@media (max-width: 520px){
  .dm-view{ height: 360px; }
  .dm-tab{ padding: 9px 9px 11px; font-size: 11.5px; }
  .dm-url{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .dm, .dm-scroll, .dm-barras i, .dm-cursor, .dm-graf .linha, .dm-graf .area{ transition: none !important; }
  .dm-cursor{ display: none; }
  .dm{ transform: none; }
  .dm-input.foco::after{ animation: none; }
}