/* 06-previa-sistema.css — Prévia do sistema: layout da seção e animação do MacBook + iPhone.
   Os arquivos css/ são carregados em ordem numérica pelo index.html: a ordem importa (cascata). */
/* ---------- Prévia do sistema (mockups notebook + celular) ---------- */
.sys-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.sys-stage {
  position: relative;
  padding: 0 3.4rem 2.8rem 0;
}
.sys-grid {
  --bezel: #101815;
  --laptop-base-a: #dce0dc;
  --laptop-base-b: #b7bdb7;
}

.laptop-view {
  position: relative;
  aspect-ratio: 16/9.8;
  background: var(--surface-alt);
}

.phone-view {
  position: relative;
  aspect-ratio: 9/18.6;
}
.laptop-view img,
.phone-view img,
.laptop-view video,
.phone-view video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.sys-stage .shot-ph {
  border-radius: 0;
  gap: 0.55rem;
}

.sys-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2rem;
}
.sys-points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.sys-points .sp-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--chip-bg);
  display: grid;
  place-items: center;
  color: var(--chip-text);
}
.sys-points strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.15rem;
  color: var(--heading);
}
.sys-points p {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (max-width: 960px) {
  .sys-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .sys-stage {
    order: 2;
  }
}
@media (max-width: 640px) {
  .sys-stage {
    padding: 0 1.6rem 2rem 0;
  }

  /* afasta o texto do placeholder da área coberta pelo celular */
  .laptop-view .shot-ph {
    padding-right: 32%;
  }
  .laptop-view .shot-ph small {
    max-width: 22ch;
  }
}

/* ---------- Prévia do sistema AO VIVO (telas do sistema em HTML, animadas) ----------
   As telas dentro do notebook e do celular são o sistema recriado em HTML/CSS
   (mesma tipografia, rótulos e cores do front-cotacao-ceasa), animadas por JS:
   cursor na cotação, dedo montando o pedido, conferência avançando.
   Cada tela é desenhada num tamanho fixo (notebook 1120x686, celular 390x806) e
   reduzida com a propriedade zoom (--k, calculado no JS pela largura real da
   moldura). zoom e não transform: scale, para o texto ser redesenhado nítido.
   Paleta: a do SISTEMA (menu #143d2c, página #f7f5ef, cartões brancos), não a do site. */
.sys-live,
.mock {
  --sl-bg: #fff;
  --sl-page: #f7f5ef;
  --sl-side: #143d2c;
  --sl-tx: #183f3b;
  --sl-mu: #647b7c;
  --sl-bd: #dee7e8;
  --sl-green: #1d704b;
  --sl-lime: #a0eb70;
  --sl-btn: #197049;
  --sl-st: #625d58; /* status e barra do item na visão do cliente (--login-muted) */
  --sl-cond: 'Barlow Condensed', system-ui, sans-serif;
  --sl-body: 'DM Sans', system-ui, sans-serif;
  --sl-mono: 'DM Mono', ui-monospace, monospace;
}
.sys-live .laptop-view,
.sys-live .phone-view {
  background: var(--sl-bg);
  overflow: hidden;
}
/* MacBook Pro: regras copiadas de Devices.css v0.2.0 (MIT, github.com/picturepan2/devices.css),
   só as do .device-macbook-pro e restritas ao .sys-live. A regra global da biblioteca que põe
   display:block em tudo dentro do .device NÃO foi trazida: quebraria as telas do sistema.
   Prata no tema claro, cinza espacial (.device-spacegray da biblioteca) no escuro.
   Tamanho original 740x434; o .sl-mbp reduz com zoom (--kd, calculado no JS). */
.sl-mbp {
  width: 740px;
  height: 434px;
  zoom: var(--kd, 0.68);
}
.sys-live .device {
  position: relative;
}
.sys-live .device-frame,
.sys-live .device-header,
.sys-live .device-power,
.sys-live .device-screen {
  display: block;
  box-sizing: border-box;
}
.sys-live .device-frame::after,
.sys-live .device-header::before,
.sys-live .device-header::after,
.sys-live .device-power::before,
.sys-live .device-power::after {
  display: block;
  box-sizing: border-box;
}
.sys-live .device-macbook-pro {
  height: 434px;
  width: 740px;
}
.sys-live .device-macbook-pro .device-frame {
  background: #0d0d0d;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #c8cacb;
  height: 418px;
  margin: 0 auto;
  padding: 9px 9px 23px 9px;
  position: relative;
  width: 618px;
}
.sys-live .device-macbook-pro .device-frame::after {
  background: linear-gradient(to bottom, #272727, #0d0d0d);
  border-radius: 0 0 20px 20px;
  bottom: 2px;
  content: '';
  height: 24px;
  left: 2px;
  position: absolute;
  width: 614px;
}
.sys-live .device-macbook-pro .device-header {
  background: #0d0d0d;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 12px;
  left: 50%;
  margin-left: -32px;
  position: absolute;
  top: 11px;
  width: 64px;
  z-index: 2;
}
.sys-live .device-macbook-pro .device-header::after,
.sys-live .device-macbook-pro .device-header::before {
  content: '';
  height: 4px;
  position: absolute;
  top: 0;
  width: 4px;
}
.sys-live .device-macbook-pro .device-header::after {
  background: radial-gradient(
    circle at bottom left,
    transparent 0,
    transparent 75%,
    #0d0d0d 75%,
    #0d0d0d 100%
  );
  left: -4px;
}
.sys-live .device-macbook-pro .device-header::before {
  background: radial-gradient(
    circle at bottom right,
    transparent 0,
    transparent 75%,
    #0d0d0d 75%,
    #0d0d0d 100%
  );
  right: -4px;
}
.sys-live .device-macbook-pro .device-screen {
  border: 2px solid #121212;
  border-radius: 10px 10px 0 0;
  height: 375px;
  width: 600px;
}
.sys-live .device-macbook-pro .device-power {
  background: radial-gradient(circle at center, #e2e3e4 85%, #c8cacb 100%);
  border: solid #a0a3a7;
  border-radius: 2px 2px 12px 12px;
  border-width: 1px 2px 0 2px;
  box-shadow: inset 0 -2px 8px 0 #6c7074;
  height: 24px;
  margin-top: -10px;
  position: relative;
  width: 740px;
  z-index: 9;
}
.sys-live .device-macbook-pro .device-power::after {
  background: #e2e3e4;
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 0 4px 2px #babdbf;
  content: '';
  height: 10px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 0;
  width: 120px;
}
.sys-live .device-macbook-pro .device-power::before {
  background: transparent;
  border-radius: 0 0 3px 3px;
  bottom: -2px;
  box-shadow:
    -300px 0 #272727,
    300px 0 #272727;
  content: '';
  height: 2px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  width: 40px;
}
/* fundo escuro como a borda: qualquer fresta entre a tela e a moldura, mesmo com o aparelho
   em movimento, nunca aparece clara. O sistema ainda sobra 1px para cada lado (refit no JS). */
.sys-live .device-screen {
  background: #121212;
  overflow: hidden;
  position: relative;
}
/* iPhone 17 Pro Max: moldura oficial (mesma do rastreio). Tela na área transparente do PNG. */
.sl-iph {
  position: relative;
  aspect-ratio: 1470/3000;
}
.sl-iph .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.35));
}
/* fundo preto sob a tela, escondido pela borda da moldura: cobre a fresta de ~1px
   entre a tela e a moldura, para o fundo da seção não aparecer em volta da tela */
.sl-iph::before {
  content: '';
  position: absolute;
  inset: 2% 4.35%;
  border-radius: 15.5% / 7.2%;
  background: #000;
}
.sl-iph .sl-iph-screen {
  position: absolute;
  left: 5.2381%;
  top: 2.2667%;
  width: 89.4558%;
  height: 95.4333%;
  border-radius: 15.2% / 6.98%;
  overflow: hidden;
  background: var(--sl-bg);
}
.sl-status {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 26px 0 32px;
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--sl-tx);
}
.sl-status span:last-child {
  display: flex;
  gap: 5px;
  align-items: center;
}
.sl-fit {
  position: absolute;
  left: 0;
  top: 0;
  zoom: var(--k, 0.5);
} /* zoom (não transform) para o texto ser redesenhado nítido no tamanho final */
.sl-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sl-bg);
  color: var(--sl-tx);
  font-family: var(--sl-body);
  font-size: 14px;
  line-height: 1.3;
  transition: opacity 0.35s ease;
}
/* troca de ciclo: no notebook só o conteúdo some, sobre o menu e o fundo claro
   (o fundo da moldura é escuro e apareceria como uma tela preta) */
.sl-zoom,
.sl-desk .sl-cartbar {
  transition: opacity 0.35s ease;
}
.sys-live.sl-fade .sl-mob,
.sys-live.sl-fade .sl-zoom,
.sys-live.sl-fade .sl-desk .sl-cartbar {
  opacity: 0;
}
.sl-app svg {
  flex: none;
}

/* --- notebook: layout do sistema (menu lateral + cotação) --- */
.sl-desk {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: transparent; /* em telas com escala fracionada, o branco do .sl-app vazava na borda do menu */
}
.sl-side {
  background: var(--sl-side);
  color: #f0f7f2;
  display: flex;
  flex-direction: column;
  padding: 22px 13px 14px;
}
.sl-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px 22px;
  font-family: var(--sl-cond);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
}
.sl-logo em {
  font-style: normal;
  color: var(--sl-lime);
  margin-left: -7px;
}
.sl-logo img {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 2px;
  border-radius: 8px;
  background: #fff; /* o traço verde da marca some sobre o menu verde-escuro */
  position: static; /* anula o .laptop-view img / .phone-view img, que preenche a tela */
  object-fit: contain;
}
.sl-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #c9d9d0;
  font-size: 12.5px;
}
.sl-nav span.on {
  background: #fff;
  color: var(--sl-tx);
  font-weight: 700;
}
.sl-user {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #41604f;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.sl-user small {
  display: block;
  color: #c9d9d0;
  font-size: 10.5px;
  font-weight: 400;
}
.sl-user .sl-av {
  flex: none;
  width: 34px;
  height: 34px;
  background: #fff;
}
.sl-main {
  position: relative;
  overflow: hidden;
  background: var(--sl-page);
}
/* aproximação dentro da tela: feita com a propriedade zoom, animada pelo JS quadro a quadro
   (transform: scale ampliava a imagem já rasterizada e borrava o texto). 720x560 = área do conteúdo. */
.sl-zoom {
  position: absolute;
  left: 0;
  top: 0;
  width: 720px;
  height: 560px;
}
.sl-scroll {
  position: relative;
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.sl-desk .sl-scroll {
  width: 640px;
  margin: 0 auto;
  padding: 24px 0 120px;
}
.sl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sl-bd);
}
.sl-head > b {
  color: var(--sl-green);
  font-size: 12px;
  font-weight: 700;
  padding-top: 6px;
}
.sl-date {
  font-family: var(--sl-cond);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.02em;
  color: #153c2c;
}
.sl-days {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #d4ddd6;
  border-radius: 13px;
  background: #fff;
}
.sl-days header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 9px;
}
.sl-days header span,
.sl-kicker {
  font-family: var(--sl-cond);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #5e7568;
}
.sl-days header b {
  color: #294b39;
  font-size: 12.5px;
}
.sl-days > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sl-day {
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5ded7;
  border-radius: 10px;
  background: #f8f9f6;
  color: #62746a;
}
.sl-day.on {
  border-color: #176b46;
  box-shadow: inset 3px 0 #176b46;
  background: #e8f4ec;
  color: #176b46;
}
.sl-day.on svg {
  position: absolute;
  top: 6px;
  right: 6px;
}
.sl-day small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.sl-day strong {
  font: 800 23px/1 var(--sl-cond);
}
.sl-day span {
  font-size: 9px;
  text-transform: uppercase;
}
.sl-kicker {
  margin: 22px 0 0;
  display: block;
}
.sl-section {
  font-family: var(--sl-cond);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
  margin: 2px 0 2px;
  color: #153c2c;
}
.sl-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 9px 2px;
  margin-top: 8px;
  border-bottom: 1px solid #d5ddd7;
  font-size: 11px;
  color: #66796d;
}
.sl-cat b {
  font-family: var(--sl-cond);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #173d2d;
}
.sl-cat span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sl-cat svg {
  color: #276b49;
}
.sl-row {
  position: relative;
  border-bottom: 1px solid #e6ebe7;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.sl-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 112px;
  gap: 16px;
  align-items: center;
  min-height: 74px;
  padding: 11px 12px;
}
.sl-row .nm {
  min-width: 0;
  font-size: 11.5px;
  color: #65776c;
}
.sl-row .nm strong {
  display: block;
  font-size: 13.5px;
  color: #173d2d;
  margin-bottom: 3px;
}
.sl-row .nm small {
  display: block;
  margin-top: 3px;
  color: #536b5e;
  font-size: 11.5px;
  font-weight: 600;
}
.sl-row .pr {
  text-align: right;
  white-space: nowrap;
  font-size: 10.5px;
  color: #7b8981;
}
.sl-row .pr strong {
  display: block;
  margin-bottom: 2px;
  font: 700 18px var(--sl-cond);
  color: #173d2d;
}
.sl-add {
  height: 40px;
  border: 1px solid var(--sl-btn);
  border-radius: 8px;
  background: var(--sl-btn);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.sl-add .t2,
.sl-add .t3 {
  display: none;
}
.sl-row.is-open {
  box-shadow: inset 0 0 0 1px #1b704a;
}
.sl-row.is-open .sl-add {
  border-color: #e0a6a0;
  background: #fff0ee;
  color: #b73c31;
}
.sl-row.is-open .sl-add .t1,
.sl-row.is-added .sl-add .t1 {
  display: none;
}
.sl-row.is-open .sl-add .t2 {
  display: inline-flex;
}
.sl-row.is-added .sl-add {
  background: #e2f2e8;
  border-color: #e2f2e8;
  color: #196642;
}
.sl-row.is-added .sl-add .t3 {
  display: inline;
}
.sl-row.is-spot {
  background: #eef6f0;
  box-shadow: inset 3px 0 #176b46;
}
.sl-qty {
  display: grid;
  grid-template-columns: 1fr 94px;
  gap: 10px;
  max-height: 0;
  padding: 0 12px;
  opacity: 0;
  overflow: hidden;
  background: #f2f7f3;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    padding 0.35s ease;
}
.sl-row.is-open .sl-qty {
  max-height: 150px;
  padding: 12px;
  opacity: 1;
  border-top: 1px solid #d8e3db;
}
.sl-qty label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #4d6457;
  margin-bottom: 5px;
}
.sl-qty .fld {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #cbd7ce;
  border-radius: 8px;
  background: #fff;
  color: #234635;
  font-size: 13px;
  font-weight: 600;
}
.sl-qty .fld svg:last-child {
  margin-left: auto;
}
.sl-qty .fld.qin.focus {
  border-color: var(--sl-btn);
  box-shadow: 0 0 0 2px rgba(29, 112, 75, 0.2);
}
.sl-qty .ok {
  grid-column: 1/-1;
  height: 40px;
  border-radius: 8px;
  background: #176b46;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.sl-cartbar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 400px;
  margin-left: -200px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #ffffff22;
  border-radius: 13px;
  background: #153f2e;
  color: #fff;
  box-shadow: 0 12px 26px rgba(8, 25, 17, 0.28);
  z-index: 2;
}
.sl-cartbar .ic {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #ffffff15;
  display: grid;
  place-items: center;
}
.sl-cartbar .tx {
  min-width: 0;
  font-size: 10px;
  color: #bad0c2;
}
.sl-cartbar .tx b {
  display: block;
  font: 700 18px/1.15 var(--sl-cond);
  color: #fff;
}
.sl-fin {
  padding: 9px 11px;
  border-radius: 8px;
  background: #fff;
  color: #174731;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.sl-cartbar.has .sl-fin {
  opacity: 1;
}
.sl-cartbar.bump {
  animation: slBump 0.45s ease;
}
@keyframes slBump {
  40% {
    transform: scale(1.05);
  }
}

/* cursor (notebook) e dedo (celular) */
.sl-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.sl-finger {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: rgba(140, 140, 140, 0.38);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.25s,
    scale 0.15s;
}
.sl-finger.down {
  scale: 0.82;
}
/* no celular o toque não é desenhado (sem dedo nem anel); o roteiro mantém o tempo de cada toque */
.sys-live .sl-finger,
.sys-live .sl-mob .sl-ring {
  display: none;
}
.sl-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid var(--sl-green);
  z-index: 5;
  pointer-events: none;
  animation: slRing 0.5s ease-out forwards;
}
@keyframes slRing {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- celular: cotação + conferência --- */
.sl-mob {
  display: flex;
  flex-direction: column;
  background: var(--sl-page);
}
.sl-mob .sl-status {
  background: #fff;
}
.sl-mhead {
  flex: none;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--sl-bd);
  background: #fff;
  font-family: var(--sl-cond);
  font-weight: 700;
  font-size: 23px;
}
.sl-mhead > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sl-mhead em {
  font-style: normal;
  color: #24843b;
  margin-left: -6px;
}
.sl-mhead img {
  flex: none;
  width: 30px;
  height: 30px;
  position: static; /* anula o .laptop-view img / .phone-view img, que preenche a tela */
  object-fit: contain;
}
.sl-av {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sl-bd);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--sl-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--sl-tx);
}
.sl-pages {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.sl-page {
  position: absolute;
  inset: 0;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.sl-page.trk {
  background: #fff;
  transform: translateX(100%);
}
.sl-mob.on-trk .sl-page.buy {
  transform: translateX(-100%);
}
.sl-mob.on-trk .sl-page.trk {
  transform: none;
}
.sl-mob .sl-scroll {
  padding: 16px 12px 120px;
}
.sl-mob .sl-head {
  padding-bottom: 13px;
}
.sl-mob .sl-head > b {
  display: none;
}
.sl-mob .sl-date {
  font-size: 25px;
}
.sl-mob .sl-sum {
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 2px;
}
.sl-mob .sl-add {
  grid-column: 1 / 3;
  height: 42px;
}
.sl-mob .sl-row.is-open .sl-sum {
  padding-inline: 10px;
}
.sl-mob .sl-cartbar {
  left: 10px;
  right: 10px;
  width: auto;
  margin: 0;
  bottom: 10px;
}
.sl-tabs {
  flex: none;
  height: 68px;
  padding: 7px 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--sl-bd);
  background: #fff;
}
.sl-tabs span {
  width: calc(100% - 6px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  font-size: 10px;
  color: var(--sl-mu);
  transition:
    background 0.3s,
    color 0.3s;
}
.sl-tabs span.on {
  background: var(--sl-lime);
  color: var(--sl-tx);
}
.sl-trk {
  padding: 8px 14px 20px;
  color: var(--sl-tx);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.sl-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font-size: 12px;
  color: var(--sl-mu);
}
.sl-crumb b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  color: var(--sl-green);
  font-weight: 700;
}
.sl-trk h4 {
  font-family: var(--sl-cond);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  margin: 4px 0 0;
}
.sl-trk .sub {
  color: var(--sl-mu);
  font-size: 12px;
  margin: 5px 0 0;
}
.sl-prog {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 7px;
  font-size: 12px;
  color: var(--sl-mu);
}
.sl-prog b {
  font: 700 12px var(--sl-mono);
  color: var(--sl-tx);
}
.sl-bar {
  height: 6px;
  background: var(--sl-bd);
  overflow: hidden;
}
.sl-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sl-green);
  transition: width 0.6s ease;
}
.sl-itens {
  margin: 12px 0;
  height: 42px;
  border-bottom: 1px solid var(--sl-bd);
  box-shadow: inset 0 -2px var(--sl-green);
  color: var(--sl-green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.sl-ti {
  padding: 14px 15px;
  margin-bottom: 10px;
  border: 1px solid var(--sl-bd);
  border-radius: 12px;
  background: #fff;
  transition:
    background 0.4s,
    box-shadow 0.4s;
}
.sl-ti .nm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}
.sl-ti .st {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sl-st);
}
.sl-ti > small {
  display: block;
  margin-top: 3px;
  color: var(--sl-mu);
  font-size: 11px;
}
.sl-ti .rc {
  margin-top: 12px;
}
.sl-ti .rc i {
  display: block;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sl-mu);
}
.sl-ti .rc b {
  display: block;
  margin-top: 3px;
  font: 700 19px var(--sl-mono);
}
.sl-ti .ln {
  height: 5px;
  background: var(--sl-bd);
  margin-top: 10px;
  overflow: hidden;
}
.sl-ti .ln i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sl-st);
  transition: width 0.5s ease;
}
.sl-ti .fx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
  font-size: 11px;
  color: var(--sl-mu);
}
.sl-ti .fx strong {
  display: block;
  margin-top: 2px;
  color: var(--sl-tx);
  font-size: 13.5px;
}
.sl-ti.ok {
  box-shadow: inset 3px 0 #16a34a;
  background: #f4f9f6;
}
.sl-ti.ok .ln i {
  width: 100%;
}

/* --- Palco: aparelhos em cena 3D + balões fora das telas ---
   Cada cena é uma classe no .sys-live (sc-off, sc-rest, sc-cot, sc-buy, sc-trk).
   O .sl-dev muda de POSIÇÃO e TAMANHO pelo layout (left/top/width…), não por
   transform: scale. Assim o texto das telas é redesenhado no tamanho final e fica
   nítido (ampliar com transform amplia a imagem já pronta). O aparelho dentro dele
   flutua sozinho (slBob, só translateY: girar um texto rasterizado o suaviza).
   Os balões ficam na faixa livre ao lado do aparelho em foco e se ligam à tela
   por linhas SVG (.sl-links) recalculadas a cada quadro pelo JS. */
.sys-stage.sys-live {
  padding: 0;
  aspect-ratio: 10/7;
  perspective: 1800px;
  --lap-cot-top: 14.8%;
  --ph-buy-bottom: 3.5%;
}
.sl-dev {
  position: absolute;
  transition:
    transform 1.05s cubic-bezier(0.34, 1.32, 0.64, 1),
    opacity 0.55s ease,
    filter 0.55s ease,
    left 1.05s cubic-bezier(0.34, 1.2, 0.64, 1),
    top 1.05s cubic-bezier(0.34, 1.2, 0.64, 1),
    width 1.05s cubic-bezier(0.34, 1.2, 0.64, 1),
    right 1.05s cubic-bezier(0.34, 1.2, 0.64, 1),
    bottom 1.05s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.sl-dev-lap {
  left: 2%;
  top: 4%;
  width: 80%;
  transform-origin: 50% 50%;
}
.sl-dev-ph {
  right: 1%;
  bottom: 0;
  width: 24%;
  transform-origin: 50% 50%;
  z-index: 2;
}

/* molduras mais finas (metade da original: 10px → 5px no notebook, 8px → 4px no celular) */

.sl-dev-lap .sl-mbp {
  animation: slBob 6.5s ease-in-out infinite;
}
.sl-dev-ph .sl-iph {
  animation: slBob 5.2s ease-in-out -2.1s infinite;
}
@keyframes slBob {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
}

.sys-live.sc-off .sl-dev-lap {
  transform: translate(-45%, 8%) rotateY(55deg) scale(0.8);
  opacity: 0;
}
.sys-live.sc-off .sl-dev-ph {
  transform: translate(35%, -95%) rotate(-24deg);
  opacity: 0;
}
.sys-live.sc-cot .sl-dev-lap {
  left: 38%;
  top: var(--lap-cot-top);
  width: 57.6%;
}
.sys-live.sc-cot .sl-dev-ph {
  transform: translate(70%, 30%) rotate(16deg) scale(0.8);
  opacity: 0;
}
.sys-live.sc-buy .sl-dev-lap,
.sys-live.sc-trk .sl-dev-lap {
  transform: translate(-75%, 4%) rotateY(50deg) scale(0.66);
  opacity: 0;
  filter: blur(3px);
}
/* sem rotateY em repouso nas cenas com o celular ampliado: transform 2D é redesenhado nítido no tamanho final */
.sys-live.sc-buy .sl-dev-ph,
.sys-live.sc-trk .sl-dev-ph {
  right: 14.9%;
  bottom: var(--ph-buy-bottom);
  width: 30.7%;
}
/* giro da conferência: animação temporária; ao terminar o celular volta a ser 2D (nítido) */
.sys-live.sc-trk .sl-dev-ph {
  animation: slSpin 1.25s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes slSpin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.sys-live.sc-rest .sl-dev-ph {
  transition-delay: 0.12s;
}

/* linhas que ligam balão → tela */
.sl-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.sl-links line {
  stroke: var(--sl-green);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.sl-links circle {
  fill: var(--sl-green);
}

/* balões */
.sl-calls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.sl-b {
  position: absolute;
  opacity: 0;
  transform: translateX(-18px) scale(0.6) rotate(7deg);
  transform-origin: 0 50%;
  transition:
    opacity 0.3s ease,
    transform 0.6s cubic-bezier(0.34, 1.7, 0.64, 1);
}
.sl-b.on {
  opacity: 1;
  transform: none;
}
.sl-b.on.bob {
  animation: slBob 4.6s ease-in-out infinite;
}
.sl-kick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.05vw, 0.7rem);
  letter-spacing: 0.14em;
  color: var(--sl-green);
  text-transform: uppercase;
}
.sl-kick::before {
  content: '';
  width: 0;
  height: 2px;
  background: var(--sl-green);
  transition: width 0.5s ease 0.1s;
}
.sl-b.on .sl-kick::before {
  width: 1.6rem;
}
.sl-kin {
  margin-top: 0.25rem;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2.15rem);
  line-height: 1;
  color: var(--heading);
}
.sl-kin .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-right: 0.22em;
  position: relative;
}
.sl-kin .w > span {
  display: inline-block;
  transform: translateY(110%) rotate(7deg);
  transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.sl-b.on .sl-kin .w > span {
  transform: none;
}
.sl-kin .w.hl > span {
  color: var(--sl-green);
}
.sl-kin .w.hl::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.14em;
  height: 0.3em;
  background: var(--sl-green);
  opacity: 0.22;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  transition-delay: calc(var(--i) * 55ms + 420ms);
}
.sl-b.on .sl-kin .w.hl::after {
  transform: scaleX(1);
}
.sl-chip {
  padding: 0.45rem 0.75rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--sl-green);
  border-radius: 9px;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.4);
  color: var(--heading);
  white-space: nowrap;
}
.sl-chip i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.95vw, 0.62rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sl-chip b {
  display: block;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.1vw, 1.35rem);
  line-height: 1.1;
}
.sl-chip.total {
  border-left-color: var(--sl-green);
}
.sl-chip.total b {
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}
.sl-sent {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  background: var(--sl-btn);
  color: #fff;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.9vw, 1.15rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: scale(0.3) rotate(-10deg);
}
.sl-sent.on {
  transform: rotate(-3deg);
}
.sl-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.sl-rings i {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--sl-green);
  opacity: 0;
}
.sl-sent.on .sl-rings i {
  animation: slRing 0.9s ease-out forwards;
}
.sl-sent.on .sl-rings i:nth-child(2) {
  animation-delay: 0.15s;
}
.sl-sent.on .sl-rings i:nth-child(3) {
  animation-delay: 0.3s;
}
/* etapas do acompanhamento (fora da tela) */
.sl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sl-steps li {
  position: relative;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  min-height: clamp(2.3rem, 5.4vw, 3.4rem);
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 0.35s,
    transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.sl-steps li.in {
  opacity: 1;
  transform: none;
}
.sl-steps .dot {
  position: relative;
  flex: none;
  width: clamp(1rem, 2.2vw, 1.45rem);
  height: clamp(1rem, 2.2vw, 1.45rem);
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.sl-steps li:not(:last-child) .dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3px;
  margin-left: -1.5px;
  height: clamp(1.1rem, 3.1vw, 1.9rem);
  background: var(--line-strong);
}
.sl-steps li.done .dot {
  background: var(--sl-green);
  border-color: var(--sl-green);
}
.sl-steps li.done .dot::before {
  content: '✓';
}
.sl-steps li.done:not(:last-child) .dot::after {
  background: var(--sl-green);
}
.sl-steps li.act .dot {
  border-color: var(--sl-green);
}
.sl-steps li.act .dot {
  animation: slPulse 1.1s ease-out infinite;
}
@keyframes slPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
}
.sl-steps b {
  display: block;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.4rem);
  line-height: 1.1;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.sl-steps li.done b,
.sl-steps li.act b {
  color: var(--heading);
}
.sl-steps small {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.95vw, 0.62rem);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.sl-steps .bar {
  width: clamp(6rem, 17vw, 11rem);
  height: 5px;
  margin: 0.3rem 0 0.15rem;
  background: var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
}
.sl-steps .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sl-green);
  transition: width 0.6s ease;
}
.sl-steps li.done .bar i {
  background: var(--sl-green);
}
/* aparelhos que entram voando de fora do palco não podem alargar a página */
#sistema {
  overflow-x: clip;
}
/* Celular: o palco fica mais alto. Na cotação o notebook vai para cima, na largura
   toda, e os balões descem para baixo dele; no pedido e no acompanhamento o celular
   fica à direita e os balões à esquerda. As linhas balão → tela somem: nesse
   tamanho elas cruzam os balões. As posições dos balões vêm do HTML (style), por
   isso o !important. */
@media (max-width: 640px) {
  .sys-stage.sys-live {
    aspect-ratio: 10/12.5;
    --ph-buy-bottom: 30%;
  }
  .sl-links {
    display: none;
  }
  /* repouso (e quadro parado do "reduzir movimento"): os dois aparelhos maiores */
  .sl-dev-lap {
    top: 16%;
    width: 86%;
  }
  .sl-dev-ph {
    bottom: 26%;
    width: 30%;
  }
  .sys-live.sc-cot .sl-dev-lap {
    left: 4%;
    top: 3%;
    width: 92%;
  }
  .sys-live.sc-buy .sl-dev-ph,
  .sys-live.sc-trk .sl-dev-ph {
    right: 2%;
    width: 41%;
  }
  .sl-b[data-b='cot-t'] {
    left: 0 !important;
    top: 50% !important;
    width: 100% !important;
  }
  .sl-b[data-b='cot-1'] {
    left: 0 !important;
    top: 68% !important;
  }
  .sl-b[data-b='cot-2'] {
    left: 52% !important;
    top: 68% !important;
  }
  .sl-b[data-b='buy-t'],
  .sl-b[data-b='trk-t'] {
    left: 0 !important;
    top: 3% !important;
    width: 55% !important;
  }
  .sl-b[data-b='buy-0'] {
    left: 0 !important;
    top: 30% !important;
  }
  .sl-b[data-b='buy-1'] {
    left: 0 !important;
    top: 42% !important;
  }
  .sl-b[data-b='buy-2'] {
    left: 0 !important;
    top: 54% !important;
  }
  .sl-b[data-b='buy-total'] {
    left: 0 !important;
    top: 67% !important;
  }
  .sl-b[data-b='buy-sent'] {
    left: 0 !important;
    top: 83% !important;
  }
  .sl-b[data-b='trk-s'] {
    left: 0 !important;
    top: 30% !important;
    width: 56% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sys-live * {
    transition: none !important;
    animation: none !important;
  }
}
.sys-live h4 {
  color: inherit;
  letter-spacing: normal;
}
.sys-live .laptop-view .sl-fit {
  left: -1px;
  top: -1px;
}

/* Telas grandes: a animação ocupa toda a largura do container, com o texto acima,
   para o sistema aparecer em tamanho legível (o tamanho do aparelho define o da letra). */
@media (min-width: 961px) {
  .sys-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .sys-grid > div:last-child {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .sys-grid .sys-points {
    margin-top: 0;
  }
  .sys-stage.sys-live {
    aspect-ratio: 16/9;
    --lap-cot-top: 14%;
    --ph-buy-bottom: 2%;
  }
  .sl-dev-ph {
    width: 21.5%;
  }
  .sys-live.sc-cot .sl-dev-lap {
    left: 32%;
    width: 67%;
  }
  .sys-live.sc-buy .sl-dev-ph,
  .sys-live.sc-trk .sl-dev-ph {
    right: 12%;
    width: 25.5%;
  }
}