/* Portfólio de sistemas: casca de portfolio-nova.css. Cada sistema num notebook prateado claro,
   com a gravação real na tela e o texto ao lado (alternando). */

.sz-mural .wp-col { flex-basis: 260px; }

/* ---------- Lista ---------- */
.sz-lista { padding: 24px 0 40px; }
.sz { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; padding: 64px 0; }
.sz-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.sz-inv .sz-palco { order: 2; }

/* palco com a luz violeta atrás do notebook */
.sz-palco { position: relative; padding: 40px 28px 56px; }
.sz-palco::before { content: ""; position: absolute; left: 6%; right: 6%; top: 8%; bottom: 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(132, 24, 244, .45), rgba(132, 24, 244, 0)); filter: blur(10px); }

/* ---------- Notebook prateado ---------- */
.sz-note { position: relative; transform: perspective(1800px) rotateX(6deg); transform-origin: 50% 100%; transition: transform .9s var(--ease); }
.sz-palco:hover .sz-note, .sz.visto .sz-note { transform: perspective(1800px) rotateX(0deg); }
.sz-tampa {
  position: relative; padding: 2.4% 2.4% 2.8%; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #F4F2F8, #D9D5E4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(17, 19, 25, .08), 0 40px 80px rgba(4, 2, 16, .55);
}
.sz-cam { position: absolute; left: 50%; top: 1%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A2540; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.sz-tela { overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 4px #111319; }
.sz-barra { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; background: #F4F2F8; border-bottom: 1px solid #ECE8F4; }
.sz-barra i { width: 7px; height: 7px; border-radius: 50%; background: #DCD6EA; }
.sz-barra span { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 3px 10px; border-radius: 6px; font: 400 10.5px var(--tech); color: #6B6585; background: #fff; }
.sz-barra svg { width: 10px; height: 10px; }
.sz-tela video { display: block; width: 100%; aspect-ratio: 1280 / 636; object-fit: cover; background: #F4F2F8; }
/* base: aba mais larga que a tampa, com o recorte para abrir */
.sz-base { position: relative; height: 16px; margin: 0 -7%; border-radius: 2px 2px 18px 18px; background: linear-gradient(180deg, #ECE9F3 0%, #C9C4D6 60%, #A9A3BC 100%); box-shadow: 0 18px 30px rgba(4, 2, 16, .45); }
.sz-base i { position: absolute; left: 50%; top: 0; width: 16%; height: 7px; margin-left: -8%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #BDB7CC, #D9D5E4); }

/* ---------- Texto ---------- */
.sz-txt { position: relative; }
.sz-num { position: absolute; right: 0; top: -60px; z-index: -1; font: 600 140px/1 var(--tech); letter-spacing: -.05em; color: rgba(255, 255, 255, .035); pointer-events: none; }
.wp-tipo-s { display: inline-block; margin: 0; padding: 6px 11px; border-radius: 999px; font: 600 10.5px/1 var(--tech); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); background: rgba(207, 113, 247, .08); box-shadow: inset 0 0 0 1px rgba(207, 113, 247, .25); }
.sz-txt h2 { margin: 18px 0 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; font-weight: 500; letter-spacing: -.025em; }
.sz-desc { margin: 14px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.sz-itens { list-style: none; display: grid; gap: 12px; margin: 26px 0 0; padding: 0; }
.sz-itens li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.sz-itens li span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--lilac); background: rgba(207, 113, 247, .1); }
.sz-itens svg { width: 12px; height: 12px; stroke-width: 3; }
.sz-nota { display: inline-flex; align-items: center; gap: 9px; margin: 28px 0 0; font: 400 12.5px var(--tech); color: var(--muted); }
.sz-ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(61, 214, 140, .6); animation: sz-pulso 1.8s ease-out infinite; }
@keyframes sz-pulso { to { box-shadow: 0 0 0 8px rgba(61, 214, 140, 0); } }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .sz, .sz-inv { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 40px 0; }
  .sz-inv .sz-palco { order: 0; }
  .sz-num { top: -30px; font-size: 96px; }
}
@media (max-width: 620px) {
  .sz-palco { padding: 16px 6px 40px; }
  .sz-tampa { border-radius: 12px 12px 4px 4px; }
  .sz-barra { height: 22px; }
  .sz-barra span { font-size: 9px; }
  .sz-base { height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-note { transform: none; transition: none; }
}