/* BLYO · Sistemas: o celular ao lado da janela, o ponteiro que faz a ação principal de cada sistema,
   o PDV do restaurante, as peças de cada sistema em etiquetas e o trilho com o "o" que desce até o passo ativo.
   Tudo que começa escondido só existe com movimento liberado: sem JavaScript ou com
   "reduzir movimento", a seção já nasce no estado final e sem ponteiro. */

/* medidas do celular: calculadas uma vez na tela e herdadas já em px pela janela */
@property --sm-fone-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --sm-cobre { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---------- Título: cada linha sobe por trás de uma máscara, como na abertura ---------- */

.js .sistemas__cabeca .linha > span {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.05s var(--entra) calc(var(--i) * 120ms + 60ms);
}
.sistemas__cabeca h2.visivel .linha > span { transform: none; }

/* ---------- Palco: a largura dele dá o tamanho do celular ---------- */

.sistemas__palco { container: sm-palco / inline-size; }

/* computador: a janela fica presa e o celular fica no canto de baixo dela, um pouco para fora */
@media (min-width: 900px) {
  .sistemas__tela {
    --sm-fone-w: clamp(148px, min(15.6cqw, var(--tela-h) * .36), 196px);
    --sm-fone-h: calc(var(--sm-fone-w) * 2.04);
    --sm-cobre: calc(var(--sm-fone-w) * .52);
    --sm-sai: clamp(0px, var(--margem) - 24px, 40px);
    --sm-desce: calc(var(--sm-fone-h) * .26);
    /* a janela e o celular juntos ficam no meio da tela */
    top: max(calc(var(--topo-altura) + 12px), calc(var(--topo-altura) / 2 + (100svh - var(--tela-h) - var(--sm-desce)) / 2 - 12px));
    margin-bottom: var(--sm-desce);
  }
  .sistemas .janela { margin-right: calc(var(--sm-fone-w) - var(--sm-cobre) - var(--sm-sai)); }
  .sistemas__marcas { margin-right: calc(var(--sm-fone-w) - var(--sm-sai) + 20px); }
  .sm-fone { right: calc(-1 * var(--sm-sai)); top: calc(var(--tela-h) + var(--sm-desce) - var(--sm-fone-h)); }
}

/* celular e tablet: nada fica preso na tela. Sem JavaScript, a janela aparece uma vez antes dos passos;
   com ele, cada passo ganha a sua própria janela (sistemas-mais.js) e a original sai de cena */
@media (max-width: 899px) {
  .sistemas__tela {
    --sm-fone-w: clamp(132px, 26cqw, 150px);
    --sm-fone-h: calc(var(--sm-fone-w) * 2.04);
    --sm-cobre: calc(var(--sm-fone-w) - 12px);
    position: relative;
    top: auto;
    margin-top: 28px;
    padding-top: 0;
    padding-bottom: 64px;
  }
  .sm-fone { right: calc(var(--margem) - 12px); top: calc(var(--tela-h) + 58px - var(--sm-fone-h)); }
  .sistemas__marcas { margin-right: calc(var(--sm-fone-w) + 4px); }
  .sm-trilho { display: none !important; }
}
@media (max-width: 599px) {
  .sistemas__tela { --sm-cobre: 0px; padding-bottom: 22px; }
  .sm-fone { display: none; }
  .sistemas__marcas { margin-right: 0; }
}

.sm-copia { display: none; }
@media (max-width: 899px) {
  .sm-copias .sistemas__tela { display: none; }
  .sm-copias .sistemas__passos { padding-bottom: 0; }
  .sm-copias .passo {
    min-height: 0;
    justify-content: flex-start;
    margin-top: clamp(64px, 11vh, 96px);
    padding: 0;
    border-left: 0;
  }
  .sm-copias .passo:first-of-type { margin-top: clamp(36px, 6vh, 56px); }
  .sm-copias .passo h3 { color: var(--petroleo); }
  .sm-copias .sm-copia {
    --sm-fone-w: 0px;
    --sm-cobre: 0px;
    position: relative;
    display: block;
    margin: 12px 7px 9px 0;
  }
  /* a janela de cada passo tem a altura do que mostra */
  .sm-copia .janela { height: auto; box-shadow: 7px 9px 0 var(--petroleo); }
  .sm-copia .vista { position: relative; inset: auto; min-height: 290px; }
  .sm-copia .sm-fone { display: none; }
  /* sem o celular por cima, o aviso da captação desce para o pé e a Beatriz volta para a coluna */
  .sistemas .sm-copia .v-aviso { top: auto; bottom: 12px; }
  .sm-copia .vista--captacao { padding-bottom: 64px; }
  .sistemas .sm-copia .sm-desce { display: grid; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .sm-copias .sm-copia { --sm-fone-w: 150px; --sm-fone-h: 306px; --sm-cobre: 118px; margin-bottom: 70px; }
  .sm-copia .sm-fone { display: block; top: auto; right: -14px; bottom: -60px; }
  .sm-copia .vista { min-height: 330px; }
}

/* ---------- A janela abre espaço para o celular ---------- */

/* nenhum texto das telas abaixo de 13px */
.sistemas .v-chip, .sistemas .kanban__titulo, .sistemas .cartao, .sistemas .cartao i,
.sistemas .pedido__cabeca .mono, .sistemas .etapas li, .sistemas .lista .mono, .sistemas .lista em,
.sistemas .visitas span, .sistemas .visitas li.feita::after, .sistemas .tabela__linha i, .sistemas .tabela__cab,
.sistemas .janela__avatar { font-size: 13px; }

/* todos os cartões com a mesma altura: é isso que deixa o arrasto cair na vaga certa */
.sistemas .cartao i { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sistemas .v-aviso { right: calc(var(--sm-cobre) + 14px); }
.sistemas .vista--compras .lista,
.sistemas .vista--chamados .tabela,
.sistemas .sm-fila,
.sistemas .visitas { margin-right: calc(var(--sm-cobre) + 4px); }
/* a vista que sai some rápido, para o estado inicial dela não aparecer na troca */
.sistemas .vista:not(.ativa) { transition: opacity .2s var(--ease), transform .45s var(--entra), visibility 0s .45s; }

@container janela (min-width: 541px) {
  /* o mapa vai para a esquerda, longe do celular */
  .sistemas .mapa { order: -1; }
}
@container janela (max-width: 540px) {
  .sistemas .sm-desce { display: none; }
  .sistemas .v-aviso { top: 12px; right: 12px; bottom: auto; left: 12px; }
}

/* ---------- PDV: o salão, a comanda da mesa 7 e o pedido que vai para a cozinha ---------- */

.vista--pdv { padding: 14px; }
.sm-pdv {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.sm-pdv__lado { min-width: 0; display: grid; gap: 12px; }

.sm-comanda {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(16, 46, 40, .16);
  border-radius: 6px;
  background: var(--papel);
  box-shadow: 0 1px 0 rgba(16, 46, 40, .08);
}
.sm-comanda__cabeca {
  display: grid;
  gap: 1px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(16, 46, 40, .24);
  line-height: 1.25;
}
.sm-comanda__cabeca b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.sm-comanda__cabeca span { font-size: 13px; color: var(--suave-claro); }
.sm-comanda__itens { display: grid; gap: 7px; }
.sm-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  font-size: 13px;
  line-height: 1.3;
}
.sm-item__nome { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sm-item__valor { color: var(--suave-claro); font-variant-numeric: tabular-nums; }
.sm-item__estado {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--ok-fundo);
  color: var(--positivo);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}
.sm-comanda__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px dashed rgba(16, 46, 40, .24);
  font-size: 13px;
  font-weight: 600;
}
.sm-comanda__total b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sm-comanda__acoes { display: grid; gap: 6px; }
.sm-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1.5px solid rgba(16, 46, 40, .35);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.sm-botao--cozinha { border-color: var(--positivo); background: var(--positivo); color: var(--papel); }

/* o pedido impresso na cozinha */
.sm-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 9px 11px 10px;
  border: 1px solid rgba(16, 46, 40, .18);
  border-top: 3px solid var(--petroleo);
  border-radius: 2px 2px 6px 6px;
  background: var(--papel);
  box-shadow: 4px 5px 0 rgba(16, 46, 40, .14);
  font-size: 13px;
  line-height: 1.3;
}
.sm-ticket b { font-weight: 650; white-space: nowrap; }
.sm-ticket time { font-family: var(--mono); color: var(--suave-claro); }
.sm-ticket span { grid-column: 1 / -1; font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }

/* o aviso do pedido feito pelo QR da mesa */
.sm-qr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  background: var(--petroleo);
  color: var(--marfim);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.3;
}
.sm-qr svg { flex: none; width: 18px; height: 18px; fill: var(--menta); }

/* o mapa do salão: mesas com cadeiras, cada uma com o seu estado */
.sm-salao { min-width: 0; display: grid; gap: 10px; }
.sm-salao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-salao__cabeca b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.sm-mesas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
  padding: 16px 10px;
  border-radius: 6px;
  background: #F1ECD0;
}
.sm-mesa {
  --cadeira: rgba(16, 46, 40, .22);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding: 6px 9px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}
.sm-mesa::before, .sm-mesa::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 4px;
  margin-left: -19px;
  border-radius: 2px;
  background: var(--cadeira);
  box-shadow: 24px 0 0 var(--cadeira);
}
.sm-mesa::before { top: -8px; }
.sm-mesa::after { bottom: -8px; }
.sm-mesa > b { font-size: 15px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sm-mesa > span { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sm-mesa--ocupada { --cadeira: rgba(16, 46, 40, .5); background: var(--musgo); color: var(--marfim); }
.sm-mesa--ocupada > span { color: rgba(244, 240, 216, .84); }
.sm-mesa--livre { border-style: dashed; border-color: rgba(16, 46, 40, .34); color: var(--suave-claro); }
.sm-mesa--conta { --cadeira: rgba(138, 83, 0, .4); border-color: rgba(138, 83, 0, .38); background: var(--alerta-fundo); color: var(--alerta); }
.sm-mesa--conta > span:first-of-type { font-weight: 650; }
/* a mesa da comanda aberta ganha um anel */
.sm-mesa--aberta { box-shadow: 0 0 0 2px #F1ECD0, 0 0 0 4px var(--positivo); }
/* a mesa 4 recebe o pedido feito pelo QR */
.sm-mesa--qr { --cadeira: rgba(25, 116, 84, .45); border-color: var(--positivo); background: var(--ok-fundo); color: var(--positivo); }
.sm-mesa--qr > b { color: var(--petroleo); }
.sm-mesa--qr .sm-vira { font-weight: 650; }
.sm-mesa__agora { color: var(--suave-claro); }

/* troca de um texto pelo outro no mesmo lugar: no estado final fica só o segundo */
.sm-vira { display: inline-grid; }
.sm-vira > * { grid-area: 1 / 1; }
.sm-vira__de { opacity: 0; }

/* janela média (computador estreito): comanda mais fina, mesas sem o "R$" e "conta" sem o "pedida" */
@container janela (max-width: 540px) {
  .vista--pdv { padding: 12px; }
  .sm-pdv { grid-template-columns: 190px minmax(0, 1fr); gap: 12px; }
  .sm-mesas { gap: 18px 8px; padding: 16px 8px; }
  .sm-mesa { padding: 6px 7px; }
  .sm-largo, .sm-rs { display: none; }
}
/* janela estreita (celular): o salão em cima, com nove mesas, e a comanda embaixo */
@container janela (max-width: 430px) {
  .sm-pdv { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sm-pdv__lado { gap: 10px; }
  .sm-salao { order: -1; gap: 8px; }
  .sm-mesas { gap: 16px 8px; padding: 14px 8px; }
  .sm-mesa { min-height: 58px; }
  .sm-mesa:nth-child(n + 10) { display: none; }
  .sm-rs { display: inline; }
  .sm-comanda { gap: 9px; padding: 11px; }
  .sm-comanda__acoes { grid-template-columns: max-content minmax(0, 1fr); }
}

/* ---------- Fila e chamados ---------- */

/* um responsável por vez: "Sem responsável" vira Bruno no mesmo lugar */
.sm-resp { position: relative; display: inline-grid; min-width: 0; }
.sm-resp .troca { white-space: nowrap; }
.sm-resp .troca .para { display: inline-flex; align-items: center; gap: 6px; }
.sm-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--musgo);
  color: var(--marfim);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
}

/* a fila do balcão: a senha chamada agora e as que esperam */
.sm-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  /* a fila fica no pé da janela, longe da tabela */
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(16, 46, 40, .12);
  border-radius: 6px;
  background: #F7F3DF;
}
.sm-fila__titulo { display: grid; margin-right: auto; line-height: 1.25; }
.sm-fila__titulo b { font-size: 14px; font-weight: 650; }
.sm-fila__titulo span { font-size: 13px; color: var(--suave-claro); }
.sm-senhas { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-senha {
  display: grid;
  justify-items: center;
  min-width: 60px;
  padding: 5px 8px 6px;
  border: 1px solid rgba(16, 46, 40, .16);
  border-radius: 5px;
  background: var(--papel);
  line-height: 1.2;
}
.sm-senha b { font: 650 14px/1.25 var(--mono); letter-spacing: -.02em; }
.sm-senha span { font-size: 13px; color: var(--suave-claro); white-space: nowrap; }
.sm-senha--agora { border-color: var(--petroleo); background: var(--petroleo); color: var(--marfim); }
.sm-senha--agora b { color: var(--menta); }
.sm-senha--agora span { color: rgba(244, 240, 216, .84); }

@container janela (max-width: 540px) {
  .sm-senhas li:nth-child(4) { display: none; }
}

/* ---------- O celular ---------- */

.sm-fone {
  position: absolute;
  z-index: 3;
  width: var(--sm-fone-w);
  height: var(--sm-fone-h);
  pointer-events: none;
}
.sm-fone__entra, .sm-fone__corpo { height: 100%; }
.sm-fone__corpo {
  position: relative;
  padding: 5px;
  border: 1.5px solid #2C5A4B;
  border-radius: calc(var(--sm-fone-w) * .17);
  background: #0A231E;
  /* sombra dura de impressão, mais clara que a da janela para o aparelho não engrossar */
  box-shadow: 9px 12px 0 rgba(16, 46, 40, .24);
}
.sm-fone__botao { position: absolute; width: 3px; border-radius: 2px 0 0 2px; background: #0A231E; }
.sm-fone__botao--um { left: -4.5px; top: 19%; height: 7%; }
.sm-fone__botao--dois { left: -4.5px; top: 28%; height: 7%; }
.sm-fone__botao--lado { right: -4.5px; top: 24%; height: 12%; border-radius: 0 2px 2px 0; }
.sm-fone__tela {
  container: sm-fone / inline-size;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--sm-fone-w) * .17 - 6px);
  background: var(--papel);
  color: var(--petroleo);
  font-size: 13px;
  line-height: 1.3;
}
.sm-fone__ilha {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 6px;
  width: 30%;
  height: 15px;
  border-radius: 9px;
  background: #0A231E;
  transform: translateX(-50%);
}
.sm-fone__home {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 5px;
  width: 34%;
  height: 4px;
  border-radius: 2px;
  background: rgba(16, 46, 40, .5);
  transform: translateX(-50%);
}
.sm-app--compras.sm-ativa ~ .sm-fone__home { background: rgba(244, 240, 216, .7); }

.sm-app { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; }
.sm-app.sm-ativa { visibility: visible; }

.sm-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 4px 13px 0 15px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sm-status__icones { width: 29px; height: 8px; fill: currentColor; }

/* botão de ação dentro do celular */
.sm-acao {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--positivo);
  color: var(--papel);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

/* cabeçalho com voltar, foto e nome (ficha da captação e mesa do PDV) */
.sm-ficha { flex: none; display: flex; align-items: center; gap: 7px; padding: 4px 9px 8px 9px; border-bottom: 1px solid rgba(16, 46, 40, .1); }
.sm-ficha__voltar { flex: none; width: 7px; height: 12px; fill: none; stroke: var(--positivo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-foto {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--musgo);
  color: var(--marfim);
  font-size: 13px;
  font-weight: 650;
}
.sm-foto--mesa { border-radius: 8px; font-size: 15px; }
.sm-ficha__nome { display: grid; min-width: 0; line-height: 1.2; }
.sm-ficha__nome b { overflow: hidden; font-size: 14px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.sm-ficha__nome small { overflow: hidden; font-size: 13px; color: var(--suave-claro); white-space: nowrap; text-overflow: ellipsis; }

/* captação: a ficha da Mariana com a conversa do WhatsApp */
.sm-conversa {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 8px 10px;
  overflow: hidden;
  background: #EFEAD0;
}
.sm-conversa__canal {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--papel);
  color: var(--suave-claro);
  font-size: 13px;
  font-weight: 600;
}
.sm-conversa__canal svg { width: 13px; height: 13px; fill: none; stroke: var(--positivo); stroke-width: 1.6; }
.sm-balao {
  align-self: flex-start;
  max-width: 90%;
  padding: 6px 9px 7px;
  border-radius: 3px 10px 10px 10px;
  background: var(--papel);
  box-shadow: 0 1px 0 rgba(16, 46, 40, .1);
  font-size: 13px;
  line-height: 1.28;
}
.sm-balao--equipe { align-self: flex-end; border-radius: 10px 3px 10px 10px; background: var(--ok-fundo); }
.sm-balao--chave { font-weight: 560; }
.sm-conversa__feito {
  align-self: center;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--ok-fundo);
  color: var(--positivo);
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  text-align: center;
}
.sm-app--captacao > .sm-acao { margin: 8px 9px 16px; }

/* pdv: o app do garçom, com o pudim entrando na comanda da mesa 7 */
.sm-sub { padding: 0 11px 8px; font-size: 13px; font-weight: 600; color: var(--suave-claro); }
.sm-app--pdv .sm-sub { padding-top: 9px; }
.sm-cardapio { display: grid; gap: 6px; padding: 0 7px; }
.sm-prato {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px 7px 9px;
  border: 1px solid rgba(16, 46, 40, .12);
  border-radius: 8px;
  background: var(--papel);
}
.sm-prato__nome { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.sm-prato__nome b { overflow: hidden; font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.sm-prato__nome small { font-size: 13px; color: var(--suave-claro); font-variant-numeric: tabular-nums; }
.sm-qtd { flex: none; display: flex; align-items: center; gap: 7px; }
.sm-qtd__n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-mais {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--positivo);
  border-radius: 50%;
  color: var(--positivo);
}
.sm-mais svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sm-prato--escolhido { border-color: var(--positivo); background: var(--ok-fundo); }
.sm-prato--escolhido .sm-mais { background: var(--positivo); color: var(--papel); }
.sm-envio {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 11px;
  border-radius: 10px;
  background: var(--petroleo);
  color: var(--marfim);
}
.sm-envio__resumo { flex: 1; display: grid; min-width: 0; line-height: 1.2; }
.sm-envio__resumo b { font-size: 13px; font-weight: 650; white-space: nowrap; }
.sm-envio__resumo small { font-size: 13px; color: rgba(244, 240, 216, .84); font-variant-numeric: tabular-nums; }
.sm-envio .sm-acao { min-height: 32px; background: var(--menta); color: var(--petroleo); }

/* compras: a tela de bloqueio com o pedido para aprovar */
.sm-app--compras { background: var(--musgo); color: var(--marfim); }
.sm-bloqueio { display: grid; justify-items: center; padding: 8px 0 12px; }
.sm-bloqueio b { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sm-bloqueio span { margin-top: 5px; font-size: 13px; color: rgba(244, 240, 216, .82); }
.sm-notif {
  display: grid;
  gap: 1px;
  margin: 0 7px;
  padding: 8px 10px 10px;
  border-radius: 12px;
  background: var(--papel);
  color: var(--petroleo);
}
.sm-notif + .sm-notif { margin-top: 6px; }
.sm-notif--ok { background: var(--ok-fundo); }
.sm-notif__app { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--suave-claro); }
.sm-notif__app small { margin-left: auto; font-size: 13px; font-weight: 500; }
.sm-icone { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--petroleo); }
.sm-icone svg { width: 12px; height: 11px; fill: var(--menta); }
.sm-notif b { font-size: 14px; font-weight: 650; line-height: 1.25; }
.sm-notif__texto { font-size: 13px; line-height: 1.3; color: var(--suave-claro); }
.sm-notif__acoes { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sm-notif__acoes .sm-acao { flex: 1; min-height: 30px; }
.sm-notif__ver { font-size: 13px; font-weight: 650; color: var(--positivo); white-space: nowrap; }

/* agenda: a rota do dia com a próxima parada marcada */
.sm-cabeca { flex: none; display: flex; align-items: center; gap: 7px; padding: 4px 11px 9px; }
.sm-cabeca svg { flex: none; width: 21px; height: 19px; fill: var(--positivo); }
.sm-cabeca b { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.sm-cabeca span { margin-left: auto; padding: 3px 7px; border-radius: 4px; background: #ECE7C9; font-size: 13px; font-weight: 600; }
.sm-rota { display: grid; gap: 6px; padding: 0 7px; }
.sm-rota li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  padding: 7px 9px 8px;
  border: 1px solid rgba(16, 46, 40, .12);
  border-radius: 8px;
  background: var(--papel);
}
.sm-rota time { font: 600 13px/1.3 var(--mono); color: var(--suave-claro); }
.sm-rota b { grid-column: 1 / -1; font-size: 13px; font-weight: 650; line-height: 1.25; }
.sm-rota li > span { grid-column: 1 / -1; font-size: 13px; line-height: 1.25; color: var(--suave-claro); }
.sm-rota li > .sm-acao { min-height: 30px; margin-top: 7px; color: var(--papel); }
.sm-rota em { justify-self: end; padding: 1px 6px; border-radius: 3px; background: var(--positivo); color: var(--papel); font-size: 13px; font-style: normal; font-weight: 650; }
.sm-rota__feita { grid-template-columns: auto minmax(0, 1fr) auto; }
.sm-rota__feita b { grid-column: auto; overflow: hidden; color: var(--suave-claro); white-space: nowrap; text-overflow: ellipsis; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sm-rota__feita svg { width: 14px; height: 14px; fill: none; stroke: var(--positivo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sm-rota__proxima { border-color: var(--positivo); background: var(--ok-fundo); }

/* chamados: a lista de quem pediu e o aviso de que o chamado tem responsável */
.sm-pedidos { display: grid; gap: 6px; padding: 0 7px; }
.sm-pedidos li { display: grid; gap: 2px; padding: 8px 9px 9px; border: 1px solid rgba(16, 46, 40, .12); border-radius: 8px; background: var(--papel); }
.sm-pedidos b { font-size: 13px; font-weight: 650; line-height: 1.25; }
.sm-pedidos li > span { font-size: 13px; color: var(--suave-claro); }
.sm-pedidos__novo { border-color: rgba(25, 116, 84, .45); }
.sm-troca { display: inline-grid; }
.sm-troca > span { grid-area: 1 / 1; }
.sm-troca > span:first-child { color: var(--alerta); opacity: 0; }
.sm-troca > span:last-child { color: var(--positivo); font-weight: 650; }
.sm-toast {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px 10px;
  border-radius: 9px;
  background: var(--petroleo);
  color: rgba(244, 240, 216, .84);
  font-size: 13px;
  line-height: 1.25;
}
.sm-toast svg { flex: none; width: 18px; height: 16px; margin-top: 1px; fill: var(--menta); }
.sm-toast b { display: block; color: var(--marfim); font-weight: 650; }

/* celular médio (computador estreito): só o essencial */
@container sm-fone (max-width: 160px) {
  .sm-extra, .sm-notif__ver, .sm-rota li:nth-child(4), .sm-pedidos li:nth-child(2), .sm-prato:nth-child(3) { display: none; }
  .sm-bloqueio b { font-size: 32px; }
  .sm-foto--mesa, .sm-app--pdv .sm-sub, .sm-envio__resumo small { display: none; }
  .sm-app--pdv .sm-ficha { margin-bottom: 8px; }
  .sm-envio { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
}

/* ---------- Ponteiro e toque: só com movimento liberado ---------- */

/* do tamanho de um ponteiro de verdade: seta branca, contorno petróleo e uma sombra curta */
.sm-cursor {
  position: absolute;
  z-index: 6;
  display: none;
  width: 20px;
  height: 24px;
  overflow: visible;
  opacity: 0;
  transform-origin: 2px 1.5px;
  pointer-events: none;
}
.sm-cursor path, .sm-cursor__seta { fill: #FFFFFF; stroke: var(--petroleo); stroke-width: 1.3; stroke-linejoin: round; }
.sm-cursor .sm-cursor__sombra { fill: rgba(16, 46, 40, .32); stroke: none; }
.sistemas .sm-onda {
  position: absolute;
  z-index: 5;
  display: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 2px solid var(--positivo);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
/* a ponta da seta fica 2px para dentro do canto do desenho: a onda do clique nasce nela */
/* captação: o cartão inteiro, com a sombra e o ponteiro, é levado para "Visita marcada" */
.sm-pega { position: relative; z-index: 2; }
.sm-pega > .cartao { position: relative; }
.sm-pega__sombra { position: absolute; inset: 0; border-radius: 4px; background: rgba(16, 46, 40, .2); opacity: 0; transform: translate3d(5px, 7px, 0); }
.sm-pega .sm-cursor { left: 64%; top: 42%; }

/* pdv: "Enviar para a cozinha" */
.sm-botao--cozinha .sm-cursor { left: 74%; top: 46%; }
.sm-botao--cozinha .sm-onda { left: calc(74% - 13px); top: calc(46% - 13.5px); }

/* chamados: o clique em "Sem responsável" */
.sm-resp .sm-cursor { left: 44%; top: 34%; }
.sm-resp .sm-onda { left: calc(44% - 13px); top: calc(34% - 13.5px); }

/* compras */
.sistemas .v-botao--ok { position: relative; }
.v-botao--ok .sm-cursor { left: 70%; top: 48%; }
.v-botao--ok .sm-onda { left: calc(70% - 13px); top: calc(48% - 13.5px); }

/* agenda: o clique na próxima visita acende o ponto no mapa */
.visitas .sm-cursor { left: 62%; top: 44%; }
.visitas .sm-onda { left: calc(62% - 13px); top: calc(44% - 13.5px); }
.sm-toque__anel { fill: none; stroke: var(--positivo); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }

/* pdv no celular: o toque no "+" do pudim */
.sistemas .sm-onda--fone { right: 5px; top: calc(50% - 15px); }

@media (prefers-reduced-motion: no-preference) {
  .js .sm-cursor, .js .sistemas .sm-onda { display: block; }

  /* captação: a vaga de destino já existe, com a Beatriz por cima, e abre na hora do arrasto */
  .js .sistemas .cartao--entra { max-height: 90px; margin-top: 0; padding-block: 9px; border-width: 1px; opacity: 0; }
  .js .sistemas .sm-desce { transform: translate3d(0, calc(-100% - 8px), 0); }
  .sistemas .vista.anima .sm-pega { animation: sm-arrasta 2.6s linear both; }
  .sistemas .vista.anima .sm-pega__sombra { animation: sm-ergue 2.6s linear both; }
  .sistemas .vista.anima .cartao--sai { animation: sm-solta 2.6s linear both; }
  .sistemas .vista.anima .cartao--entra { animation: sm-chega 2.6s linear both; }
  .sistemas .vista.anima .cartao--espera { animation: espera .9s ease .5s 2, sm-sobe 2.6s linear both; }
  .sistemas .vista.anima .sm-desce { animation: sm-abre 2.6s linear both; }
  .sistemas .vista.anima .sm-pega .sm-cursor { animation: sm-mao-pega 2.6s linear both; }

  /* pdv: o clique manda a parmegiana para a cozinha; depois chega o pedido do QR da mesa 4 */
  .js .sm-ticket { opacity: 0; transform: translate3d(0, -12px, 0); clip-path: inset(0 0 100% 0); }
  .js .sm-qr { opacity: 0; transform: translate3d(0, 12px, 0); }
  .js .vista--pdv .sm-vira__de { opacity: 1; }
  .js .vista--pdv .sm-vira__para, .js .sm-mesa__agora { opacity: 0; }
  .js .sm-item__estado { background-color: #ECE7C9; color: var(--petroleo); }
  .js .sm-mesa--qr { --cadeira: rgba(16, 46, 40, .22); border-style: dashed; border-color: rgba(16, 46, 40, .34); background-color: transparent; color: var(--suave-claro); }
  .js .sm-mesa--qr > b { color: var(--suave-claro); }
  .sistemas .vista.anima .sm-botao--cozinha { animation: aperta .4s ease .9s both; }
  .sistemas .vista.anima .sm-botao--cozinha .sm-cursor { animation: sm-mao-clica 2.4s linear both; }
  .sistemas .vista.anima .sm-botao--cozinha .sm-onda { animation: sm-onda .6s var(--ease) .92s forwards; }
  .sistemas .vista.anima .sm-ticket { animation: sm-imprime .65s var(--entra) 1.15s forwards; }
  .sistemas .vista.anima .sm-item__estado { animation: sm-tag-ok .3s ease 1.35s forwards; }
  .sistemas .vista.anima .sm-item__estado .sm-vira__de { animation: sm-some .2s ease 1.35s forwards; }
  .sistemas .vista.anima .sm-item__estado .sm-vira__para { animation: sm-surge .3s ease 1.42s forwards; }
  .sistemas .vista.anima .sm-qr { animation: sm-surge .55s var(--entra) 2.1s forwards; }
  .sistemas .vista.anima .sm-mesa--qr { animation: sm-mesa-qr .45s ease 2.4s forwards; }
  .sistemas .vista.anima .sm-mesa--qr > b { animation: sm-cor-petroleo .45s ease 2.4s forwards; }
  .sistemas .vista.anima .sm-mesa--qr .sm-vira__de { animation: sm-some .2s ease 2.4s forwards; }
  .sistemas .vista.anima .sm-mesa--qr .sm-vira__para,
  .sistemas .vista.anima .sm-mesa__agora { animation: sm-surge .3s ease 2.5s forwards; }
  .sistemas .vista.anima .sm-salao__cabeca .sm-vira__de { animation: sm-some .2s ease 2.55s forwards; }
  .sistemas .vista.anima .sm-salao__cabeca .sm-vira__para { animation: sm-surge .3s ease 2.65s forwards; }

  /* chamados: clica em "Sem responsável" e o nome do Bruno toma o lugar */
  .sistemas .vista.anima .sm-resp .sm-cursor { animation: sm-mao-clica 2.4s linear both; }
  .sistemas .vista.anima .sm-resp .sm-onda { animation: sm-onda .6s var(--ease) .92s forwards; }

  /* compras: o clique em "Aprovar pedido" acontece junto com o aperto do botão */
  .sistemas .vista.anima .v-botao--ok .sm-cursor { animation: sm-mao-clica 2.4s linear both; }
  .sistemas .vista.anima .v-botao--ok .sm-onda { animation: sm-onda .6s var(--ease) .92s forwards; }

  /* agenda: o clique na próxima visita acende a linha e o ponto no mapa */
  .sistemas .vista.anima .visitas li.agora { animation-delay: .95s; }
  .js .sm-toque__anel { opacity: 0; }
  .sistemas .vista.anima .sm-toque__anel { animation: sm-anel .5s var(--entra) 1s both; }
  .sistemas .vista.anima .visitas .sm-cursor { animation: sm-mao-clica 2.4s linear both; }
  .sistemas .vista.anima .visitas .sm-onda { animation: sm-onda .6s var(--ease) .92s forwards; }
}

@keyframes sm-arrasta {
  0%, 38% { transform: translate3d(0, 0, 0) rotate(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  42% { transform: translate3d(-3px, -6px, 0) rotate(-2.5deg); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  66% { transform: translate3d(calc(100% + 22px), -6px, 0) rotate(-2.5deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  71%, 100% { transform: translate3d(calc(100% + 26px), 0, 0) rotate(0); }
}
@keyframes sm-ergue { 0%, 38% { opacity: 0; } 42%, 66% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes sm-solta { 0%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes sm-chega { 0%, 70% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes sm-sobe {
  0%, 48% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  60%, 100% { transform: translate3d(0, calc(-100% - 8px), 0); }
}
@keyframes sm-abre {
  0%, 44% { transform: translate3d(0, calc(-100% - 8px), 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  56%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes sm-mao-pega {
  0%, 5% { opacity: 0; transform: translate3d(-150px, 170px, 0) scale(1); animation-timing-function: cubic-bezier(.2, .6, .25, 1); }
  13% { opacity: 1; }
  36% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: ease-out; }
  39%, 70% { transform: translate3d(0, 0, 0) scale(.88); animation-timing-function: ease-out; }
  74% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); animation-timing-function: ease-in-out; }
  96%, 100% { opacity: 0; transform: translate3d(24px, 34px, 0) scale(1); }
}
@keyframes sm-mao-clica {
  0%, 5% { opacity: 0; transform: translate3d(-120px, 150px, 0) scale(1); animation-timing-function: cubic-bezier(.2, .6, .25, 1); }
  13% { opacity: 1; }
  35% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: ease-out; }
  38%, 42% { transform: translate3d(0, 0, 0) scale(.88); animation-timing-function: ease-out; }
  46% { transform: translate3d(0, 0, 0) scale(1); }
  64% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); animation-timing-function: ease-in-out; }
  88%, 100% { opacity: 0; transform: translate3d(26px, 34px, 0) scale(1); }
}
@keyframes sm-onda {
  from { opacity: .7; transform: scale(.35); }
  to { opacity: 0; transform: scale(1.7); }
}
@keyframes sm-anel {
  from { opacity: 0; transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sm-imprime { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes sm-tag-ok { to { background-color: var(--ok-fundo); color: var(--positivo); } }
@keyframes sm-mesa-qr { to { border-color: var(--positivo); background-color: var(--ok-fundo); color: var(--positivo); border-style: solid; } }
@keyframes sm-cor-petroleo { to { color: var(--petroleo); } }

/* ---------- O celular em movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* entra uma vez, quando a seção aparece */
  .js .sm-fone__entra {
    opacity: 0;
    transform: translate3d(36px, 80px, 0) rotate(7deg);
    transition: opacity .6s var(--ease) .2s, transform 1.25s var(--entra) .2s;
  }
  .js .sm-fone.sm-entrou .sm-fone__entra { opacity: 1; transform: none; }

  /* troca de sistema: o app que sai sobe, o que entra vem de baixo */
  .js .sm-app {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.97);
    transition: opacity .18s var(--ease), transform .4s var(--entra), visibility 0s .4s;
  }
  .js .sm-app.sm-antes { transform: translate3d(0, -22px, 0) scale(.97); }
  .js .sm-app.sm-ativa {
    opacity: 1;
    transform: none;
    transition: opacity .3s var(--ease) .14s, transform .65s var(--entra) .14s, visibility 0s;
  }

  /* captação: a mensagem chega e, quando a visita é marcada na janela, a conversa sobe para o aviso */
  .js .sm-app--captacao .sm-balao--chave { opacity: 0; transform: translate3d(0, 10px, 0) scale(.92); transform-origin: 0 100%; }
  .js .sm-app--captacao .sm-conversa > :not(.sm-conversa__feito) { translate: 0 31px; }
  .js .sm-app--captacao .sm-conversa__feito { opacity: 0; transform: translate3d(0, 8px, 0); }
  .sm-app--captacao.sm-anima .sm-conversa > :not(.sm-conversa__feito) { animation: sm-rola .5s var(--ease) 1.95s forwards; }
  .sm-app--captacao.sm-anima .sm-conversa > .sm-balao--chave { animation: sm-surge .5s var(--entra) .35s forwards, sm-rola .5s var(--ease) 1.95s forwards; }
  .sm-app--captacao.sm-anima .sm-conversa__feito { animation: sm-surge .45s var(--entra) 2.05s forwards; }

  /* pdv: o garçom toca no "+" do pudim e o pedido sobe para ser enviado */
  .js .sm-app--pdv .sm-prato--escolhido { border-color: rgba(16, 46, 40, .12); background-color: var(--papel); }
  .js .sm-app--pdv .sm-prato--escolhido .sm-mais { background-color: transparent; color: var(--positivo); }
  .js .sm-app--pdv .sm-qtd__n { opacity: 0; transform: scale(.6); }
  .js .sm-app--pdv .sm-envio { opacity: 0; transform: translate3d(0, 130%, 0); }
  .sm-app--pdv.sm-anima .sm-onda--fone { animation: sm-onda .6s var(--ease) .85s forwards; }
  .sm-app--pdv.sm-anima .sm-prato--escolhido { animation: sm-proxima .4s var(--ease) .9s forwards; }
  .sm-app--pdv.sm-anima .sm-prato--escolhido .sm-mais { animation: sm-mais .3s ease .9s forwards; }
  .sm-app--pdv.sm-anima .sm-qtd__n { animation: sm-surge .35s var(--entra) .95s forwards; }
  .sm-app--pdv.sm-anima .sm-envio { animation: sm-surge .55s var(--entra) 1.35s forwards; }
  .sm-app--pdv.sm-anima .sm-envio .sm-acao { animation: sm-pulsa .5s ease 2.05s 2; }

  /* compras: o pedido chega antes do clique; a confirmação, depois */
  .js .sm-app--compras .sm-notif { opacity: 0; transform: translate3d(0, -18px, 0) scale(.96); }
  .sm-app--compras.sm-anima .sm-notif--pede { animation: sm-surge .55s var(--entra) .2s forwards; }
  .sm-app--compras.sm-anima .sm-notif--ok { animation: sm-surge .55s var(--entra) 1.5s forwards; }

  /* agenda: a parada clicada na janela acende no celular */
  .js .sm-app--agenda .sm-rota__feita path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .sm-app--agenda .sm-rota__proxima { border-color: rgba(16, 46, 40, .12); background-color: var(--papel); }
  .js .sm-app--agenda .sm-rota__proxima em { opacity: 0; transform: scale(.7); }
  .sm-app--agenda.sm-anima .sm-rota__feita path { animation: sm-traco .4s var(--ease) .3s forwards; }
  .sm-app--agenda.sm-anima .sm-rota__proxima { animation: sm-proxima .45s var(--ease) .95s forwards; }
  .sm-app--agenda.sm-anima .sm-rota__proxima em { animation: sm-surge .4s var(--entra) 1.05s forwards; }
  .sm-app--agenda.sm-anima .sm-rota__proxima .sm-acao { animation: sm-pulsa .5s ease 1.35s 2; }

  /* chamados: o aviso sobe e o pedido ganha responsável */
  .js .sm-app--chamados .sm-troca > span:first-child { opacity: 1; }
  .js .sm-app--chamados .sm-troca > span:last-child { opacity: 0; }
  .js .sm-app--chamados .sm-toast { opacity: 0; transform: translate3d(0, 130%, 0); }
  .sm-app--chamados.sm-anima .sm-troca > span:first-child { animation: sm-some .3s ease 1.5s forwards; }
  .sm-app--chamados.sm-anima .sm-troca > span:last-child { animation: sm-surge .35s ease 1.6s forwards; }
  .sm-app--chamados.sm-anima .sm-toast { animation: sm-surge .6s var(--entra) 1.4s forwards; }
}

@keyframes sm-surge { to { opacity: 1; transform: none; } }
@keyframes sm-some { to { opacity: 0; } }
@keyframes sm-rola { to { translate: 0 0; } }
@keyframes sm-traco { to { stroke-dashoffset: 0; } }
@keyframes sm-proxima { to { border-color: var(--positivo); background-color: var(--ok-fundo); } }
@keyframes sm-pulsa { 50% { transform: scale(1.04); } }
@keyframes sm-mais { to { background-color: var(--positivo); color: var(--papel); } }

/* ---------- Passos: trilho com o "o" e etiquetas com as peças de cada sistema ---------- */

.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 46ch; margin-top: 4px; }
.sm-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px 6px 9px;
  border: 1px solid rgba(16, 46, 40, .2);
  border-radius: 4px;
  background: var(--papel);
  color: var(--petroleo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.sm-chips svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--positivo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.sm-trilho { display: none; }
.js .sistemas__passos { position: relative; }
.js .sistemas .passo, .js .sistemas .passo.ativo { border-left-color: transparent; }
.js .sm-trilho { position: absolute; z-index: 1; left: 0; top: 0; display: block; width: 2px; height: 100%; pointer-events: none; }
.sm-trilho__linha { position: absolute; left: 0; top: var(--sm-ini, 0px); width: 2px; height: var(--sm-alt, 0px); background: var(--linha-clara); }
.sm-trilho__feito {
  position: absolute;
  inset: 0;
  background: var(--positivo);
  transform: scaleY(var(--sm-feito, 0));
  transform-origin: 50% 0;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.sm-trilho__marco {
  position: absolute;
  left: 1px;
  top: var(--y, 0px);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid rgba(16, 46, 40, .3);
  border-radius: 50%;
  background: var(--marfim);
  transition: border-color .4s var(--ease) .35s;
}
.sm-trilho__marco.sm-passou { border-color: var(--positivo); }
.sm-trilho__o, .sm-trilho__eco {
  position: absolute;
  left: 1px;
  top: 0;
  width: 30px;
  height: 27px;
  transform: translate3d(-50%, calc(var(--sm-y, 0px) - 50%), 0);
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.sm-trilho__o { fill: var(--positivo); }
/* contornos que ficam para trás enquanto o "o" desce, como o rastro da marca */
.sm-trilho__eco { fill: none; stroke: var(--positivo); stroke-width: 5; opacity: 0; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .35s ease; }
.sm-trilho__eco:nth-of-type(1) { transition-delay: .08s, 0s; }
.sm-trilho__eco:nth-of-type(2) { transition-delay: .16s, 0s; }
.sm-trilho__eco:nth-of-type(3) { transition-delay: .24s, 0s; }
.sm-anda .sm-trilho__eco:nth-of-type(1) { opacity: .6; }
.sm-anda .sm-trilho__eco:nth-of-type(2) { opacity: .4; }
.sm-anda .sm-trilho__eco:nth-of-type(3) { opacity: .22; }
.sm-mede, .sm-mede * { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* as etiquetas entram uma a uma na primeira vez que o passo fica ativo */
  .js .sm-chips li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .45s var(--ease), transform .75s var(--entra); }
  .js .sm-chips path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease); }
  .js .passo.sm-viu .sm-chips li { opacity: 1; transform: none; }
  .js .passo.sm-viu .sm-chips path { stroke-dashoffset: 0; }
  .passo.sm-viu .sm-chips li:nth-child(1) { transition-delay: .2s; }
  .passo.sm-viu .sm-chips li:nth-child(2) { transition-delay: .32s; }
  .passo.sm-viu .sm-chips li:nth-child(3) { transition-delay: .44s; }
  .passo.sm-viu .sm-chips li:nth-child(1) path { transition-delay: .45s; }
  .passo.sm-viu .sm-chips li:nth-child(2) path { transition-delay: .57s; }
  .passo.sm-viu .sm-chips li:nth-child(3) path { transition-delay: .69s; }
}

/* ---------- Movimento reduzido: estado final, sem ponteiro ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .sistemas__cabeca .linha > span { transform: none; }
  .sm-cursor, .sistemas .sm-onda, .sm-toque__onda, .sm-toque__seta { display: none !important; }
}