/* BLYO · Elementos e efeitos extras do suporte
   A frase ganha tinta palavra por palavra enquanto o "o" risca o sublinhado. Embaixo, quatro cartões,
   cada um com um sistema diferente: a conversa sobre a captação, a visita no mapa, o treino no PDV
   do restaurante e a manutenção do portal de compras. Cada cena toca uma vez quando aparece.
   O estado sem classe é sempre o final: é o que aparece sem JS e com "reduzir movimento". */

.suporte {
  --sp-sombra: rgba(3, 16, 13, .55);
  --sp-fio: rgba(16, 46, 40, .12);
  --sp-borda: rgba(16, 46, 40, .26);
  --sp-creme: #F1ECD0;
  --sp-chip: #ECE7C9;
  --sp-a: 0s;
}

/* ---------- A frase ---------- */

.sp-frase {
  position: relative;
  padding-bottom: clamp(30px, 3.9vw, 60px);
}
.sp-pl { display: inline-grid; }
.sp-pl > span { grid-area: 1 / 1; }
.sp-pl__contorno { display: none; }

/* com movimento, a palavra começa só no contorno e a tinta entra da esquerda para a direita */
.sp-mov .sp-pl__contorno {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 240, 216, .5);
  -webkit-user-select: none;
  user-select: none;
}
.sp-mov .suporte__frase .linha:last-child .sp-pl__contorno { -webkit-text-stroke-color: rgba(141, 255, 208, .55); }
.sp-mov .sp-pl__tinta { clip-path: inset(-.3em 100% -.3em 0); }

/* o sublinhado e o "o": posição e tamanho vêm do JS, que mede a última linha da frase */
.sp-traco { display: none; position: absolute; inset: 0; pointer-events: none; }
.sp-medida .sp-traco { display: block; }
.sp-traco__linha {
  position: absolute;
  border-radius: 99px;
  background: var(--menta);
  transform-origin: 0 50%;
}
.sp-traco__o, .sp-traco__eco { position: absolute; overflow: visible; }
/* cada cópia tem o corpo cheio na cor do fundo, então a seguinte cobre a anterior como papel recortado;
   o "o" cheio também, para o furo dele não mostrar as linhas das cópias de trás */
.sp-corpo { fill: var(--petroleo); }
.sp-traco__eco use { stroke: var(--menta); stroke-width: 4; stroke-linejoin: round; }
.sp-traco__eco .sp-furo { fill: none; }
.sp-traco__eco--1 use { stroke: var(--marfim); }
.sp-traco__marca { fill: var(--menta); }

/* ---------- Os cartões ---------- */

.sp-cartoes {
  margin-top: clamp(40px, 7vh, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 900px) {
  /* o suporte e os cuidados têm mais coisa na cena, então ganham a coluna larga, em zigue-zague */
  .sp-cartoes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sp-cartao--conversa, .sp-cartao--cuidado { grid-column: span 7; }
  .sp-cartao--visita, .sp-cartao--treino { grid-column: span 5; }
}

.sp-cartao {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.3vw, 32px) clamp(20px, 2.3vw, 32px) clamp(30px, 2.9vw, 42px);
  border: 1px solid rgba(244, 240, 216, .1);
  border-radius: 10px;
  background: var(--musgo);
}
.sp-cartao__texto h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.08; letter-spacing: -.03em; }
.sp-cartao__texto p { margin-top: 10px; max-width: 44ch; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.5; color: var(--suave-escuro); }

/* o palco ocupa o resto do cartão; o mapa, o PDV e o painel crescem até a altura da linha da grade */
.sp-palco {
  --sp-topo: clamp(22px, 2.4vw, 30px);
  container: sp-palco / inline-size;
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-topo);
}

/* barra de janela comum (treino e cuidados): petróleo, o "o" menta, o nome do sistema */
.sp-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--petroleo);
  color: var(--marfim);
  white-space: nowrap;
}
.sp-barra__o { flex: none; width: 21px; height: auto; fill: var(--menta); }
.sp-barra b { font-weight: 650; }
.sp-barra span { overflow: hidden; text-overflow: ellipsis; color: var(--suave-escuro); }
.sp-barra span::before { content: "/"; margin-right: 10px; opacity: .6; }

/* ---------- Suporte: a conversa e o relatório ---------- */

.sp-conversa { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sp-chat {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sp-creme);
  color: var(--petroleo);
  box-shadow: 8px 10px 0 var(--sp-sombra);
  font-size: 14px;
  line-height: 1.35;
}
.sp-chat__barra { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: var(--petroleo); color: var(--marfim); }
.sp-chat__foto { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--musgo); }
.sp-chat__foto svg { width: 21px; height: auto; fill: var(--menta); }
.sp-chat__quem { display: grid; min-width: 0; line-height: 1.25; }
.sp-chat__quem b { font-size: 15px; font-weight: 650; }
.sp-chat__quem small { overflow: hidden; font-size: 13px; color: var(--suave-escuro); white-space: nowrap; text-overflow: ellipsis; }
/* embaixo sobra lugar para o relatório, que entra por cima da borda da conversa */
.sp-chat__conversa { display: grid; gap: 10px; padding: 16px 14px 52px; }

/* cada vez de falar guarda o lugar da mensagem; os três pontinhos aparecem nesse mesmo lugar */
.sp-vez { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.sp-vez--eu { align-items: flex-end; }
.sp-msg {
  max-width: 86%;
  padding: 8px 12px 9px;
  border: 1px solid var(--sp-fio);
  border-radius: 3px 12px 12px 12px;
  background: var(--papel);
  transform-origin: 0 100%;
}
.sp-vez--eu .sp-msg { border-color: transparent; border-radius: 12px 3px 12px 12px; background: var(--ok-fundo); transform-origin: 100% 100%; }
.sp-msg b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 650; }
.sp-vez--eu .sp-msg b { color: var(--positivo); }
.sp-digita {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--sp-fio);
  border-radius: 3px 12px 12px 12px;
  background: var(--papel);
  opacity: 0;
}
.sp-vez--eu .sp-digita { left: auto; right: 0; border-color: transparent; border-radius: 12px 3px 12px 12px; background: var(--ok-fundo); }
.sp-digita i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave-claro); }
.sp-digita i:nth-child(2) { --k: 1; }
.sp-digita i:nth-child(3) { --k: 2; }

.sp-relatorio {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(100% - 20px, 340px);
  margin-top: -36px;
  padding: 14px 16px 12px;
  border-radius: 8px;
  background: var(--papel);
  color: var(--petroleo);
  box-shadow: 8px 10px 0 var(--sp-sombra);
  font-size: 13px;
  line-height: 1.3;
}
.sp-relatorio__cabeca { display: grid; gap: 1px; margin-bottom: 10px; }
.sp-relatorio__cabeca b { font-size: 14px; font-weight: 650; }
.sp-relatorio__cabeca span { color: var(--suave-claro); }
.sp-barras { display: grid; gap: 4px; }
.sp-barras li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 4px;
}
.sp-barras li:nth-child(2) { --k: 1; }
.sp-barras li:nth-child(3) { --k: 2; }
.sp-barras span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-barras i { height: 10px; border-radius: 2px; background: var(--petroleo); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.sp-barras b { font-weight: 600; text-align: right; }
.sp-barras__nova { background: var(--ok-fundo); }
.sp-barras__nova i { background: var(--positivo); }

@container sp-palco (min-width: 560px) {
  /* com espaço, o relatório fica ao lado e entra por cima da borda direita da conversa */
  .sp-conversa { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .sp-chat__conversa { padding: 16px 40px 18px 14px; }
  .sp-relatorio { justify-self: stretch; width: auto; margin: 58px 0 0 -22px; }
}

/* ---------- Visita: o mapa, o compromisso e o "o" que vai até vocês ---------- */

/* o desenho do mapa passa da área do viewBox: quando o cartão é mais alto, aparece mais cidade, nunca faixa vazia */
.sp-mapa {
  position: relative;
  flex: 1 0 auto;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: #EFEAD0;
  box-shadow: 8px 10px 0 var(--sp-sombra);
}
.sp-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-mapa__chao { fill: #EFEAD0; }
.sp-mapa__quadra { fill: #E5DEBE; }
.sp-mapa__ruas { fill: none; stroke: var(--papel); stroke-width: 11; }
.sp-mapa__praca { fill: var(--ok-fundo); }
.sp-mapa__arvores { fill: rgba(25, 116, 84, .24); }
.sp-mapa__destino { fill: var(--papel); stroke: var(--positivo); stroke-width: 2; }
.sp-mapa__plano { fill: none; stroke: rgba(16, 46, 40, .3); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .1 7; }
.sp-mapa__rota { fill: none; stroke: var(--positivo); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* o "o" da BLYO freia ao chegar e deixa contornos para trás, como na estampa do rastro: só a borda de fora,
   cada um cobrindo o anterior, os mais antigos mais apagados */
.sp-rastro { fill: var(--papel); stroke: var(--positivo); stroke-width: 7; stroke-linejoin: round; }
.sp-rastro--1 { stroke-opacity: .4; }
.sp-rastro--2 { stroke-opacity: .68; }
.sp-viajante__fundo { fill: var(--papel); }
.sp-viajante__o { fill: var(--menta); stroke: var(--petroleo); stroke-width: 14; stroke-linejoin: round; paint-order: stroke; }
.sp-rastro, .sp-pino, .sp-pino__sombra, .sp-pino__onda { transform-box: fill-box; transform-origin: 50% 50%; }
.sp-pino { transform-origin: 50% 100%; }
.sp-pino path { fill: var(--petroleo); }
.sp-pino circle { fill: var(--menta); }
.sp-pino__sombra { fill: rgba(16, 46, 40, .3); }
.sp-pino__onda { fill: none; stroke: var(--positivo); stroke-width: 2; opacity: 0; }

.sp-evento {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 24px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 10px;
  border-radius: 6px;
  background: var(--papel);
  color: var(--petroleo);
  box-shadow: 4px 5px 0 var(--petroleo);
  font-size: 14px;
  line-height: 1.25;
}
.sp-evento__icone { width: 22px; height: 22px; fill: none; stroke: var(--positivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-evento__icone rect { fill: var(--positivo); stroke: none; }
.sp-evento__texto { display: grid; min-width: 0; }
.sp-evento__texto b { font-weight: 650; white-space: nowrap; }
.sp-evento__texto small { font-size: 13px; color: var(--suave-claro); white-space: nowrap; }
.sp-evento__ok { padding: 4px 8px; border-radius: 3px; background: var(--ok-fundo); color: var(--positivo); font-size: 13px; font-weight: 650; }
@container sp-palco (max-width: 359px) {
  .sp-evento { grid-template-columns: auto minmax(0, 1fr); }
  .sp-evento__ok { display: none; }
}

/* ---------- Treino: o PDV do salão, do toque na mesa ao pedido na cozinha ---------- */

.sp-turma {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 5px 12px 5px 5px;
  border-radius: 6px;
  background: #335246;
  color: var(--marfim);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.sp-turma__fotos { display: flex; }
.sp-turma__fotos i {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--marfim);
  box-shadow: 0 0 0 2px #335246;
  color: var(--petroleo);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}
.sp-turma__fotos i + i { margin-left: -5px; }
.sp-turma__fotos i:nth-child(2) { --k: 1; z-index: 2; background: #1B6B4F; color: var(--marfim); }
.sp-turma__fotos i:nth-child(3) { --k: 2; z-index: 1; background: var(--musgo); color: var(--marfim); }

.sp-tela, .sp-painel {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--papel);
  color: var(--petroleo);
  box-shadow: 8px 10px 0 var(--sp-sombra);
  font-size: 14px;
  line-height: 1.3;
}

.sp-pdv { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.sp-pdv__lado { display: grid; align-content: start; gap: 7px; padding: 14px 14px 16px; }
.sp-rotulo { font-size: 13px; font-weight: 560; line-height: 1.2; color: var(--suave-claro); }
.sp-mesas { display: grid; grid-template-columns: repeat(6, 38px); gap: 6px; margin-bottom: 9px; }
.sp-mesas li {
  display: grid;
  place-items: center;
  height: 38px;
  border: 1.5px solid rgba(16, 46, 40, .34);
  border-radius: 6px;
  background: var(--papel);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sp-mesas .sp-mesa--ocupada, .sp-mesas .sp-mesa--alvo { border-color: var(--musgo); background: var(--musgo); color: var(--marfim); }
.sp-mesas .sp-mesa--conta { border-color: #D9B25F; background: var(--alerta-fundo); color: var(--alerta); }
/* a mesa do treino fica com o anel de selecionada */
.sp-mesas .sp-mesa--alvo { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--positivo); }
.sp-pratos { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-prato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1.5px solid var(--sp-borda);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.sp-prato svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--positivo); stroke-width: 2; stroke-linecap: round; }

.sp-comanda { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; border-top: 1px solid var(--sp-fio); }
.sp-comanda__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.sp-comanda__mesa { display: grid; min-width: 0; }
.sp-comanda__mesa > span { grid-area: 1 / 1; align-self: center; }
.sp-comanda__vazio { color: var(--suave-claro); opacity: 0; }
.sp-comanda__valor { display: grid; line-height: 1.2; }
.sp-comanda__valor b { font-size: 15px; font-weight: 650; }
.sp-comanda__valor small { font-size: 13px; color: var(--suave-claro); }
.sp-cozinha {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 3px;
  background: var(--ok-fundo);
  color: var(--positivo);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.sp-cozinha svg { width: 13px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-itens { position: relative; display: grid; }
.sp-itens > li:not(.sp-itens__vazio) {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 34px;
  border-bottom: 1px dashed rgba(16, 46, 40, .2);
}
.sp-itens i { font-style: normal; font-size: 13px; color: var(--suave-claro); }
.sp-itens span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-itens b { font-size: 13px; font-weight: 600; }
.sp-itens__vazio { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--suave-claro); opacity: 0; }
.sp-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 650; }
.sp-total > b { display: inline-grid; justify-items: end; font-weight: 650; }
.sp-total > b > span { grid-area: 1 / 1; }
.sp-total__0, .sp-total__1 { opacity: 0; }
/* dividir e fechar a conta só aparecem quando a comanda tem a coluna dela, onde sobra altura */
.sp-comanda__extras { display: none; }
.sp-comanda__extras span {
  display: grid;
  place-items: center;
  height: 34px;
  border: 1.5px solid var(--sp-borda);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.sp-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: auto;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--positivo);
  color: var(--papel);
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 1px 2px 0 #0F5C41;
}

@container sp-palco (min-width: 430px) {
  /* com espaço, a turma fica na barra da janela, à direita, e o salão vira coluna ao lado da comanda */
  .sp-turma { position: absolute; z-index: 2; top: calc(var(--sp-topo) + 6px); right: 10px; margin: 0; padding: 4px 10px 4px 4px; }
  .sp-turma__fotos i { width: 24px; height: 24px; }
  .sp-cartao--treino .sp-barra { padding-right: 214px; }
  .sp-pdv { grid-template-columns: 164px minmax(0, 1fr); }
  .sp-pdv__lado { padding: 14px; border-right: 1px solid var(--sp-fio); }
  .sp-mesas { grid-template-columns: repeat(3, 40px); gap: 8px; }
  .sp-mesas li { height: 40px; }
  .sp-pratos { display: grid; }
  .sp-comanda { padding: 14px 16px 16px; border-top: 0; }
  .sp-comanda__extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
  .sp-comanda__extras + .sp-enviar { margin-top: 0; }
}

/* o ponteiro e o círculo do clique andam por pontos que o JS mede no PDV */
.sp-ponteiro, .sp-clique { display: none; }
.sp-tela.sp-medida .sp-ponteiro, .sp-tela.sp-medida .sp-clique { display: block; }
.sp-ponteiro {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 20px;
  height: 24px;
  margin: -2.5px 0 0 -2.5px;
  overflow: visible;
  fill: var(--petroleo);
  stroke: var(--papel);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform: translate(var(--sp-pfx, 0px), var(--sp-pfy, 0px));
}
.sp-clique {
  position: absolute;
  z-index: 5;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--positivo);
  border-radius: 50%;
  opacity: 0;
  transform: translate(var(--sp-p4x, 0px), var(--sp-p4y, 0px));
}

/* ---------- Backups e melhorias ---------- */

/* quando o cartão vizinho é mais alto, a sobra vai para as linhas das melhorias, nunca para um vão no fim */
.sp-painel__corpo { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.sp-copia {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sp-fio);
}
.sp-anel { width: 44px; height: 44px; }
.sp-anel__trilho { fill: none; stroke: var(--sp-chip); stroke-width: 4.5; }
.sp-anel__cheio { fill: none; stroke: var(--positivo); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-anel__ok { fill: none; stroke: var(--positivo); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-copia__texto { display: grid; gap: 2px; min-width: 0; }
.sp-copia__texto b { font-weight: 650; }
.sp-copia__texto small { font-size: 13px; color: var(--suave-claro); }
.sp-estado {
  display: inline-grid;
  padding: 5px 9px;
  border-radius: 3px;
  background: var(--ok-fundo);
  color: var(--positivo);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.sp-estado > span { grid-area: 1 / 1; }
.sp-estado__de { opacity: 0; }

/* as últimas cópias: seis já feitas e a de hoje, que fecha junto com o anel */
.sp-noites { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sp-noites small { font-size: 13px; color: var(--suave-claro); }
.sp-noites__dias { display: flex; gap: 4px; }
.sp-noites__dias li { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 3px; background: var(--positivo); }
.sp-noites__dias svg { width: 11px; height: 11px; fill: none; stroke: var(--papel); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.sp-melhorias { display: flex; flex-direction: column; padding: 12px 16px 10px; }
.sp-melhorias ul { flex: 1 0 auto; display: grid; grid-auto-rows: minmax(52px, 1fr); }
.sp-melhorias__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.sp-melhorias__cabeca b { font-weight: 650; }
.sp-conta { flex: none; display: flex; gap: 4px; width: 100px; }
.sp-conta i { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sp-chip); }
.sp-conta i::after { content: ""; position: absolute; inset: 0; background: var(--positivo); transform-origin: 0 50%; }
.sp-conta i.sp-conta__vaga::after { content: none; }
.sp-conta i:nth-child(2) { --k: 1; }
.sp-conta i:nth-child(3) { --k: 2; }
.sp-melhorias li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 0;
  border-top: 1px solid var(--sp-fio);
}
.sp-melhorias li:nth-child(2) { --k: 1; }
.sp-melhorias li:nth-child(3) { --k: 2; }
.sp-caixa { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid rgba(16, 46, 40, .32); border-radius: 4px; }
.sp-caixa--feita { border-color: var(--positivo); background: var(--positivo); }
.sp-caixa svg { width: 14px; height: 14px; fill: none; stroke: var(--papel); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-item { display: grid; min-width: 0; line-height: 1.25; }
.sp-item > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-item small { font-size: 13px; color: var(--suave-claro); }
.sp-melhorias em { padding: 3px 8px; border-radius: 3px; background: var(--sp-chip); font-size: 13px; font-style: normal; font-weight: 600; white-space: nowrap; }
.sp-melhorias .sp-andamento { background: var(--alerta-fundo); color: var(--alerta); font-family: var(--fonte); }

@container sp-palco (min-width: 540px) {
  /* coluna larga: a cópia de segurança vira um bloco à esquerda, com o anel maior e as noites embaixo */
  .sp-painel__corpo { grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .sp-copia {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: start;
    gap: 12px;
    padding: 20px 18px;
    border-bottom: 0;
    border-right: 1px solid var(--sp-fio);
  }
  .sp-anel { width: 76px; height: 76px; }
  .sp-noites { margin-top: 10px; flex-direction: column; align-items: flex-start; }
  .sp-melhorias { padding: 14px 18px 10px; }
}
@container sp-palco (max-width: 419px) {
  /* estreito: o estado da cópia desce para baixo da hora, e as datas das melhorias saem */
  .sp-copia { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  .sp-anel { grid-row: span 2; }
  .sp-estado { justify-self: start; }
  .sp-noites { margin-top: 6px; }
  .sp-melhorias em:not(.sp-andamento) { display: none; }
}

/* ---------- Movimento: estado de espera e as cenas tocando uma vez ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* suporte */
  .sp-espera .sp-msg { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); }
  .sp-espera .sp-barras i { transform: scaleX(0); }
  .sp-espera .sp-barras b, .sp-espera .sp-barras__nova { opacity: 0; }

  .sp-toca .sp-vez--1 .sp-msg { animation: sp-surge .45s var(--entra) calc(var(--sp-a) + .25s) both; }
  .sp-toca .sp-vez--2 .sp-digita { animation: sp-digitando 1.2s linear calc(var(--sp-a) + .9s) both; }
  .sp-toca .sp-vez--2 .sp-digita i { animation: sp-pula .6s ease-in-out calc(var(--sp-a) + 1s + var(--k, 0) * .13s) 2 both; }
  .sp-toca .sp-vez--2 .sp-msg { animation: sp-surge .45s var(--entra) calc(var(--sp-a) + 2.1s) both; }
  .sp-toca .sp-vez--3 .sp-digita { animation: sp-digitando 1s linear calc(var(--sp-a) + 3s) both; }
  .sp-toca .sp-vez--3 .sp-digita i { animation: sp-pula .6s ease-in-out calc(var(--sp-a) + 3.08s + var(--k, 0) * .13s) both; }
  .sp-toca .sp-vez--3 .sp-msg { animation: sp-surge .45s var(--entra) calc(var(--sp-a) + 4s) both; }
  .sp-toca .sp-barras li i { animation: sp-barra .8s var(--entra) calc(var(--sp-a) + .2s + var(--k, 0) * .1s) both; }
  .sp-toca .sp-barras li b { animation: sp-aparece .3s ease calc(var(--sp-a) + .55s + var(--k, 0) * .1s) both; }
  .sp-toca .sp-barras .sp-barras__nova { animation: sp-linha-nova .45s var(--entra) calc(var(--sp-a) + 2.4s) both, sp-acende .9s ease calc(var(--sp-a) + 4.05s) both; }
  .sp-toca .sp-barras .sp-barras__nova i { animation: sp-barra .8s var(--entra) calc(var(--sp-a) + 2.55s) both; }
  .sp-toca .sp-barras .sp-barras__nova b { animation: sp-aparece .3s ease calc(var(--sp-a) + 2.95s) both; }

  /* visita: o compromisso, o pino no prédio e o "o" que percorre a rota */
  .sp-espera .sp-evento { opacity: 0; transform: translate3d(0, -10px, 0); }
  .sp-espera .sp-evento__ok { opacity: 0; transform: scale(.4); }
  .sp-espera .sp-mapa__rota { stroke-dashoffset: 1; }
  .sp-espera .sp-pino { opacity: 0; transform: translate(0, -70px); }
  .sp-espera .sp-pino__sombra { opacity: 0; transform: scale(.2); }
  .sp-espera .sp-viajante { transform: translate(-224px, 84px); }
  .sp-espera .sp-rastro { opacity: 0; }

  .sp-toca .sp-evento { animation: sp-desce .5s var(--entra) calc(var(--sp-a) + .1s) both; }
  .sp-toca .sp-evento__ok { animation: sp-brota .35s var(--entra) calc(var(--sp-a) + .45s) both; }
  .sp-toca .sp-pino { animation: sp-cai .65s linear calc(var(--sp-a) + .7s) both; }
  .sp-toca .sp-pino__sombra { animation: sp-sombra-pino .65s linear calc(var(--sp-a) + .7s) both; }
  .sp-toca .sp-mapa__rota { animation: sp-risca 1.6s cubic-bezier(.5, 0, .2, 1) calc(var(--sp-a) + 1.1s) both; }
  .sp-toca .sp-viajante { animation: sp-viaja 1.6s linear calc(var(--sp-a) + 1.1s) both; }
  .sp-toca .sp-rastro--1 { animation: sp-deixa .3s var(--ease) calc(var(--sp-a) + 2.07s) both; }
  .sp-toca .sp-rastro--2 { animation: sp-deixa .3s var(--ease) calc(var(--sp-a) + 2.17s) both; }
  .sp-toca .sp-rastro--3 { animation: sp-deixa .3s var(--ease) calc(var(--sp-a) + 2.29s) both; }
  /* forwards e não both: antes do atraso a onda fica invisível, no estado base */
  .sp-toca .sp-pino__onda { animation: sp-onda .75s var(--ease) calc(var(--sp-a) + 2.62s) forwards; }

  /* treino: mesa 12, dois pratos, enviar para a cozinha */
  .sp-espera .sp-turma { opacity: 0; transform: translate3d(0, 8px, 0); }
  .sp-espera .sp-turma__fotos i { opacity: 0; transform: scale(.5); }
  .sp-espera .sp-mesa--alvo { border-color: rgba(16, 46, 40, .34); background-color: var(--papel); color: var(--petroleo); box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px transparent; }
  .sp-espera .sp-comanda__vazio, .sp-espera .sp-itens__vazio, .sp-espera .sp-total__0 { opacity: 1; }
  .sp-espera .sp-comanda__valor, .sp-espera .sp-itens__1, .sp-espera .sp-itens__2, .sp-espera .sp-total__2 { opacity: 0; }
  .sp-espera .sp-cozinha { opacity: 0; transform: translate3d(-6px, 0, 0); }
  .sp-espera .sp-cozinha svg { stroke-dashoffset: 1; }
  .sp-espera .sp-ponteiro { opacity: 0; transform: translate(var(--sp-p0x, 0px), var(--sp-p0y, 0px)); }

  .sp-toca .sp-turma { animation: sp-surge .45s var(--entra) var(--sp-a) both; }
  .sp-toca .sp-turma__fotos i { animation: sp-brota .35s var(--entra) calc(var(--sp-a) + .2s + var(--k, 0) * .12s) both; }
  .sp-toca .sp-ponteiro { animation: sp-ponteiro 3.6s cubic-bezier(.45, 0, .25, 1) var(--sp-a) both; }
  .sp-toca .sp-clique { animation: sp-clique 3.6s linear var(--sp-a) both; }
  .sp-toca .sp-mesa--alvo { animation: sp-mesa-escolhe .22s ease calc(var(--sp-a) + 1s) both, sp-mesa-ocupa .3s ease calc(var(--sp-a) + 3.2s) forwards; }
  .sp-toca .sp-comanda__vazio { animation: sp-some .2s ease calc(var(--sp-a) + 1s) both; }
  .sp-toca .sp-comanda__valor { animation: sp-entra-baixo .3s ease calc(var(--sp-a) + 1.08s) both; }
  .sp-toca .sp-prato--1 { animation: sp-aperta .3s ease calc(var(--sp-a) + 1.62s) both; }
  .sp-toca .sp-prato--2 { animation: sp-aperta .3s ease calc(var(--sp-a) + 2.17s) both; }
  .sp-toca .sp-itens__vazio { animation: sp-some .2s ease calc(var(--sp-a) + 1.66s) both; }
  .sp-toca .sp-itens__1 { animation: sp-linha .35s var(--ease) calc(var(--sp-a) + 1.7s) both; }
  .sp-toca .sp-itens__2 { animation: sp-linha .35s var(--ease) calc(var(--sp-a) + 2.25s) both; }
  .sp-toca .sp-total__0 { animation: sp-sai-cima .22s ease calc(var(--sp-a) + 1.7s) both; }
  .sp-toca .sp-total__1 { animation: sp-total-meio .65s linear calc(var(--sp-a) + 1.72s) both; }
  .sp-toca .sp-total__2 { animation: sp-entra-baixo .3s ease calc(var(--sp-a) + 2.27s) both; }
  .sp-toca .sp-enviar { animation: sp-aperta .35s ease calc(var(--sp-a) + 2.97s) both; }
  .sp-toca .sp-cozinha { animation: sp-entra-lado .35s var(--entra) calc(var(--sp-a) + 3.12s) both; }
  .sp-toca .sp-cozinha svg { animation: sp-risca .3s var(--ease) calc(var(--sp-a) + 3.3s) both; }

  /* backups e melhorias */
  .sp-espera .sp-anel__cheio, .sp-espera .sp-anel__ok, .sp-espera .sp-caixa--feita svg, .sp-espera .sp-noites__hoje svg { stroke-dashoffset: 1; }
  .sp-espera .sp-estado { background-color: var(--sp-chip); color: var(--petroleo); }
  .sp-espera .sp-estado__de { opacity: 1; }
  .sp-espera .sp-estado__para { opacity: 0; }
  .sp-espera .sp-noites__hoje { background-color: var(--sp-chip); }
  .sp-espera .sp-caixa--feita { border-color: rgba(16, 46, 40, .32); background-color: transparent; }
  .sp-espera .sp-item--feito { color: var(--suave-claro); }
  .sp-espera .sp-conta i::after { transform: scaleX(0); }

  .sp-toca .sp-anel__cheio { animation: sp-risca 1.4s cubic-bezier(.5, 0, .3, 1) calc(var(--sp-a) + .3s) both; }
  .sp-toca .sp-anel__ok { animation: sp-risca .3s var(--ease) calc(var(--sp-a) + 1.72s) both; }
  .sp-toca .sp-estado { animation: sp-estado-ok .3s ease calc(var(--sp-a) + 1.75s) both; }
  .sp-toca .sp-estado__de { animation: sp-sai-cima .25s ease calc(var(--sp-a) + 1.7s) both; }
  .sp-toca .sp-estado__para { animation: sp-entra-baixo .3s ease calc(var(--sp-a) + 1.8s) both; }
  .sp-toca .sp-noites__hoje { animation: sp-noite .25s ease calc(var(--sp-a) + 1.76s) both; }
  .sp-toca .sp-noites__hoje svg { animation: sp-risca .25s var(--ease) calc(var(--sp-a) + 1.86s) both; }
  .sp-toca .sp-caixa--feita { animation: sp-caixa .22s ease calc(var(--sp-a) + 2.1s + var(--k, 0) * .5s) both; }
  .sp-toca .sp-caixa--feita svg { animation: sp-risca .28s var(--ease) calc(var(--sp-a) + 2.18s + var(--k, 0) * .5s) both; }
  .sp-toca .sp-item--feito { animation: sp-texto-ok .25s ease calc(var(--sp-a) + 2.1s + var(--k, 0) * .5s) both; }
  .sp-toca .sp-conta i::after { animation: sp-enche .35s var(--ease) calc(var(--sp-a) + 2.1s + var(--k, 0) * .5s) both; }
}

@keyframes sp-surge { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sp-digitando {
  0% { opacity: 0; transform: translate3d(0, 6px, 0); }
  14%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes sp-pula { 0%, 60%, 100% { transform: none; } 30% { transform: translate3d(0, -4px, 0); } }
@keyframes sp-barra { from { transform: scaleX(0); } to { transform: scaleX(var(--v)); } }
@keyframes sp-linha-nova { from { opacity: 0; clip-path: inset(0 100% 0 0 round 4px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 4px); } }
@keyframes sp-acende { 0%, 100% { background-color: var(--ok-fundo); } 35% { background-color: #BFF2DA; } }
@keyframes sp-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-some { from { opacity: 1; } to { opacity: 0; } }
@keyframes sp-desce { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }
@keyframes sp-brota { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sp-risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sp-cai {
  0% { opacity: 0; transform: translate(0, -70px); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  12% { opacity: 1; }
  55% { transform: translate(0, 0) scale(1.1, .86); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  76% { transform: translate(0, -7px) scale(.97, 1.04); animation-timing-function: cubic-bezier(.6, 0, .8, .5); }
  100% { opacity: 1; transform: none; }
}
@keyframes sp-sombra-pino {
  0% { opacity: 0; transform: scale(.2); }
  55% { opacity: 1; transform: scale(1.12); }
  76% { opacity: 1; transform: scale(.86); }
  100% { opacity: 1; transform: none; }
}
@keyframes sp-onda { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(2.3); } }

/* o "o" da visita percorre a rota com a mesma curva do risco: sai devagar, anda e freia ao chegar.
   Os pontos são relativos à chegada, então sem animação ele já está no destino. */
@keyframes sp-viaja {
  0% { transform: translate(-224px, 84px); }
  5% { transform: translate(-222.9px, 84px); }
  10% { transform: translate(-219.2px, 84px); }
  15% { transform: translate(-211.9px, 84px); }
  20% { transform: translate(-199.5px, 84px); }
  25% { transform: translate(-179.6px, 84px); }
  30% { transform: translate(-149.2px, 84px); }
  35% { transform: translate(-107.8px, 84px); }
  38.81% { transform: translate(-74px, 84px); }
  39.39% { transform: translate(-69.2px, 83.4px); }
  39.98% { transform: translate(-65px, 81px); }
  40.58% { transform: translate(-62.6px, 76.8px); }
  41.2% { transform: translate(-62px, 72px); }
  45% { transform: translate(-62px, 45.5px); }
  50% { transform: translate(-62px, 18.3px); }
  51.4% { transform: translate(-62px, 12px); }
  52.56% { transform: translate(-61.4px, 7.2px); }
  53.81% { transform: translate(-59px, 3px); }
  55% { transform: translate(-55.3px, .8px); }
  56.61% { transform: translate(-50px, 0); }
  60% { transform: translate(-40px, 0); }
  65% { transform: translate(-28.3px, 0); }
  70% { transform: translate(-19.4px, 0); }
  75% { transform: translate(-12.6px, 0); }
  80% { transform: translate(-7.6px, 0); }
  85% { transform: translate(-4px, 0); }
  90% { transform: translate(-1.7px, 0); }
  95% { transform: translate(-.4px, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes sp-deixa { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* o ponteiro: começa no canto, passa pela mesa, pelos dois pratos e pelo botão, e descansa ao lado dele */
@keyframes sp-ponteiro {
  0% { opacity: 0; transform: translate(var(--sp-p0x), var(--sp-p0y)); }
  8% { opacity: 1; transform: translate(var(--sp-p0x), var(--sp-p0y)); }
  26%, 30% { transform: translate(var(--sp-p1x), var(--sp-p1y)); }
  44%, 47% { transform: translate(var(--sp-p2x), var(--sp-p2y)); }
  59%, 62% { transform: translate(var(--sp-p3x), var(--sp-p3y)); }
  80%, 86% { transform: translate(var(--sp-p4x), var(--sp-p4y)); }
  97% { transform: translate(var(--sp-pfx), var(--sp-pfy)); }
  100% { opacity: 1; transform: translate(var(--sp-pfx), var(--sp-pfy)); }
}
/* um círculo abre embaixo da ponta a cada clique: 1 s, 1,65 s, 2,2 s e 3 s */
@keyframes sp-clique {
  0%, 27.7% { opacity: 0; transform: translate(var(--sp-p1x), var(--sp-p1y)) scale(.4); }
  27.8% { opacity: .9; transform: translate(var(--sp-p1x), var(--sp-p1y)) scale(.4); }
  35% { opacity: 0; transform: translate(var(--sp-p1x), var(--sp-p1y)) scale(1.35); }
  35.1%, 45.7% { opacity: 0; transform: translate(var(--sp-p2x), var(--sp-p2y)) scale(.4); }
  45.8% { opacity: .9; transform: translate(var(--sp-p2x), var(--sp-p2y)) scale(.4); }
  53% { opacity: 0; transform: translate(var(--sp-p2x), var(--sp-p2y)) scale(1.35); }
  53.1%, 61% { opacity: 0; transform: translate(var(--sp-p3x), var(--sp-p3y)) scale(.4); }
  61.1% { opacity: .9; transform: translate(var(--sp-p3x), var(--sp-p3y)) scale(.4); }
  68.3% { opacity: 0; transform: translate(var(--sp-p3x), var(--sp-p3y)) scale(1.35); }
  68.4%, 83.2% { opacity: 0; transform: translate(var(--sp-p4x), var(--sp-p4y)) scale(.4); }
  83.3% { opacity: .9; transform: translate(var(--sp-p4x), var(--sp-p4y)) scale(.4); }
  90.5%, 100% { opacity: 0; transform: translate(var(--sp-p4x), var(--sp-p4y)) scale(1.35); }
}
@keyframes sp-mesa-escolhe {
  from { border-color: rgba(16, 46, 40, .34); background-color: var(--papel); color: var(--petroleo); box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px transparent; }
  to { border-color: var(--positivo); background-color: var(--ok-fundo); color: var(--petroleo); box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--positivo); }
}
@keyframes sp-mesa-ocupa {
  from { border-color: var(--positivo); background-color: var(--ok-fundo); color: var(--petroleo); }
  to { border-color: var(--musgo); background-color: var(--musgo); color: var(--marfim); }
}
@keyframes sp-aperta { 0%, 100% { transform: none; } 40% { transform: scale(.94); } }
@keyframes sp-linha { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes sp-total-meio {
  0% { opacity: 0; transform: translate3d(0, 6px, 0); }
  20%, 77% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
@keyframes sp-entra-lado { from { opacity: 0; transform: translate3d(-6px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sp-estado-ok {
  from { background-color: var(--sp-chip); color: var(--petroleo); }
  to { background-color: var(--ok-fundo); color: var(--positivo); }
}
@keyframes sp-sai-cima { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes sp-entra-baixo { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes sp-noite { from { background-color: var(--sp-chip); } to { background-color: var(--positivo); } }
@keyframes sp-caixa {
  from { border-color: rgba(16, 46, 40, .32); background-color: transparent; }
  to { border-color: var(--positivo); background-color: var(--positivo); }
}
@keyframes sp-texto-ok { from { color: var(--suave-claro); } to { color: var(--petroleo); } }
@keyframes sp-enche { from { transform: scaleX(0); } to { transform: none; } }