/* BLYO · Soluções: o leque de operações para as quais a BLYO desenvolve sistemas.
   Fundo musgo, entre o marfim dos sistemas e o petróleo dos recursos. Cada segmento tem uma mini tela
   de papel com sombra dura de impressão, que toca a sua cena uma vez quando aparece e fica no fim.
   O desenho base já é o estado final: sem JavaScript ou com "reduzir movimento", nada fica escondido. */

.solucoes {
  --so-sombra: rgba(4, 18, 15, .6);
  --so-gap: clamp(20px, 2.2vw, 32px);
  --so-fio: rgba(16, 46, 40, .13);
  position: relative;
  padding: clamp(96px, 15vh, 176px) 0 clamp(96px, 14vh, 160px);
  background: var(--musgo);
  color: var(--marfim);
}

/* ---------- Cabeça: o título largo e a apresentação deslocada para a direita ---------- */

.so-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--so-gap); }
.so-titulo {
  grid-column: 1 / -1;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: .98;
  letter-spacing: -.05em;
}
.so-intro {
  grid-column: 8 / -1;
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 40ch;
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--suave-escuro);
}

/* ---------- Texto de cada segmento ---------- */

.so-segmento {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--linha-escura);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.so-segmento .mono { font-weight: 500; color: var(--menta); }
/* o "o" da marca: o contorno espera e o "o" cheio pousa em cima quando o segmento aparece */
.so-marca { position: relative; flex: none; width: 26px; height: 24px; }
.so-marca svg { position: absolute; left: 0; top: 0; width: 26px; height: 24px; overflow: visible; }
.so-marca__anel { fill: none; stroke: var(--menta); stroke-width: 6; stroke-linejoin: round; }
.so-marca__cheio { fill: var(--menta); }

.so-texto { min-width: 0; }
.so-texto h3 {
  margin-top: 18px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.so-texto > p:not(.so-segmento) { margin-top: 14px; max-width: 40ch; color: var(--suave-escuro); }
.so-bloco--restaurante .so-texto h3 { font-size: clamp(32px, 3.6vw, 54px); line-height: .98; letter-spacing: -.045em; }
.so-bloco--empresas .so-texto h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1; letter-spacing: -.04em; }

.so-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.so-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(244, 240, 216, .24);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 560;
  line-height: 1.2;
}
.so-tags svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--menta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Grade: celular numa coluna; tablet em duas; computador editorial em doze ---------- */

.so-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(72px, 11vh, 132px);
  margin-top: clamp(56px, 9vh, 104px);
}
.so-bloco { position: relative; min-width: 0; }
.so-palco { position: relative; min-width: 0; }
.so-bloco > .so-palco { margin-top: 30px; }

@media (min-width: 1200px) {
  .so-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--so-gap); }
  /* os dois segmentos largos ocupam a linha toda, em lados trocados */
  .so-bloco--restaurante, .so-bloco--empresas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--so-gap);
    align-items: center;
  }
  .so-bloco--restaurante > .so-palco { grid-column: 1 / span 8; grid-row: 1; margin-top: 0; }
  .so-bloco--restaurante > .so-texto { grid-column: 9 / span 4; grid-row: 1; padding-left: 6px; }
  .so-bloco--empresas > .so-texto { grid-column: 1 / span 4; grid-row: 1; }
  .so-bloco--empresas > .so-palco { grid-column: 6 / span 7; grid-row: 1; margin-top: 0; }
  /* os dois menores andam em degrau, como o "o" que deixa rastro na diagonal */
  .so-bloco--educacao { grid-column: 1 / span 5; }
  .so-bloco--atendimento { grid-column: 7 / span 6; margin-top: clamp(72px, 7vw, 120px); }
  .so-proxima { grid-column: 1 / -1; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .so-intro { grid-column: 6 / -1; }
  .so-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--so-gap); }
  .so-bloco--restaurante, .so-bloco--empresas, .so-proxima { grid-column: 1 / -1; }
  .so-bloco--atendimento { margin-top: clamp(56px, 8vw, 96px); }
  /* nos largos, o título fica de um lado e a explicação do outro, acima da mini tela */
  .so-bloco--restaurante > .so-texto, .so-bloco--empresas > .so-texto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--so-gap);
    align-items: start;
  }
  .so-bloco--restaurante .so-segmento, .so-bloco--empresas .so-segmento { grid-column: 1 / -1; }
  .so-bloco--restaurante .so-texto h3, .so-bloco--empresas .so-texto h3 { grid-column: 1; grid-row: 2 / span 2; }
  .so-bloco--restaurante .so-texto > p:not(.so-segmento),
  .so-bloco--empresas .so-texto > p:not(.so-segmento) { grid-column: 2; margin-top: 20px; }
  .so-bloco--restaurante .so-tags, .so-bloco--empresas .so-tags { grid-column: 2; }
  .so-bloco--restaurante > .so-palco, .so-bloco--empresas > .so-palco { margin-top: 40px; }
}

@media (max-width: 699px) {
  .so-intro { grid-column: 1 / -1; }
  .so-grade { row-gap: 84px; }
}

/* ---------- Peças comuns das mini telas ---------- */

.so-pousa { position: relative; }
.so-sombra {
  position: absolute;
  inset: 0;
  border-radius: var(--so-raio, 8px);
  background: var(--so-sombra);
  transform: translate3d(var(--so-sx, 9px), var(--so-sy, 12px), 0);
}

.so-janela { --so-raio: 8px; position: relative; }
.so-janela__corpo {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--petroleo);
  border-radius: var(--so-raio);
  background: var(--papel);
  color: var(--petroleo);
  font-size: 14px;
  line-height: 1.35;
}

.so-app-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  background: var(--petroleo);
  color: var(--marfim);
  font-size: 14px;
  white-space: nowrap;
}
.so-app-barra b { font-weight: 650; }
.so-app-barra__o { flex: none; width: 20px; height: 18px; fill: var(--menta); }
.so-app-barra__trilha { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--suave-escuro); }
.so-app-barra__trilha::before { content: "/"; margin-right: 10px; opacity: .6; }

.so-av {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--musgo);
  color: var(--marfim);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 1;
}

.so-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 3px;
  background: #ECE7C9;
  color: var(--petroleo);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.so-chip--ok { background: var(--ok-fundo); color: var(--positivo); }
.so-chip--alerta { background: var(--alerta-fundo); color: var(--alerta); }

/* troca de estado: o antes e o depois no mesmo lugar; no desenho base fica o depois */
.so-troca { display: inline-grid; }
.so-troca > * { grid-area: 1 / 1; }
.so-troca > :first-child { opacity: 0; }

.so-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1.5px solid rgba(16, 46, 40, .35);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.so-btn .so-troca svg { display: inline-block; width: 13px; height: 13px; margin: -2px 6px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.so-btn--ok { border-color: var(--positivo); background: var(--positivo); color: var(--papel); }

/* toque na tela e clique: anel que abre e some (só aparece com movimento) */
.so-onda {
  position: absolute;
  z-index: 3;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  width: 28px;
  height: 28px;
  border: 2px solid var(--papel);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
/* ponteiro do mouse no tamanho de verdade: 16 x 22 px, ponta no canto de cima.
   Seletor com a classe do palco, para nenhuma regra de ícone de botão mudar o tamanho dele. */
.so-palco .so-ponteiro {
  position: absolute;
  z-index: 4;
  left: 58%;
  top: 56%;
  width: 16px;
  height: 22px;
  overflow: visible;
  fill: var(--petroleo);
  stroke: var(--papel);
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0;
  transform-origin: 1.5px 1.5px;
  pointer-events: none;
}

/* ---------- 01 Restaurantes: o tablet do salão, a impressora da cozinha e a placa do QR ---------- */

.so-pdv { container: so-pdv / inline-size; }
.so-pdv__grade { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }

.so-tablet { --so-raio: 22px; --so-sx: 11px; --so-sy: 14px; position: relative; z-index: 1; }
.so-tablet__corpo {
  position: relative;
  padding: 10px;
  border: 1.5px solid #2C5A4B;
  border-radius: var(--so-raio);
  background: #0A231E;
}
.so-tablet__corpo::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #2C5A4B;
}
.so-tablet__tela {
  container: so-tela / inline-size;
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: var(--papel);
  color: var(--petroleo);
  font-size: 14px;
  line-height: 1.3;
}
.so-abas { display: flex; align-items: stretch; height: 100%; gap: 2px; margin-left: 4px; }
.so-abas > * { display: flex; align-items: center; padding: 0 9px; color: var(--suave-escuro); }
.so-abas b { color: var(--marfim); box-shadow: inset 0 -3px 0 var(--menta); }
.so-app-barra__hora { margin-left: auto; font-size: 13px; color: var(--suave-escuro); }

.so-pdv__corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; padding: 12px; }

.so-salao { position: relative; min-width: 0; padding: 10px 8px 84px; border-radius: 6px; background: #F1ECD0; }
.so-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 4px; font-size: 13px; line-height: 1.3; color: var(--suave-claro); }
.so-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.so-legenda span::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(16, 46, 40, .42);
  border-radius: 3px;
  background: var(--papel);
}
.so-legenda .so-legenda__ocupada::before { border-color: var(--musgo); background: var(--musgo); }
.so-legenda .so-legenda__conta::before { border-color: var(--alerta); background: var(--alerta-fundo); }

.so-mesas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 6px;
  justify-items: center;
  align-items: center;
  margin-top: 18px;
}
/* cada mesa com as cadeiras desenhadas por fora: em cima e embaixo nas quadradas, dos lados nas redondas */
.so-mesa {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  width: 64px;
  height: 48px;
  border: 1.5px solid rgba(16, 46, 40, .42);
  border-radius: 6px;
  background: var(--papel);
  color: var(--petroleo);
  line-height: 1;
}
.so-mesa::before, .so-mesa::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 5px;
  margin-left: -13px;
  border-radius: 3px;
  background: rgba(16, 46, 40, .26);
}
.so-mesa::before { top: -9px; }
.so-mesa::after { bottom: -9px; }
.so-mesa b { font-size: 15px; font-weight: 700; }
.so-mesa small { font-size: 13px; font-weight: 500; }
.so-mesa--redonda { width: 48px; height: 48px; border-radius: 50%; }
.so-mesa--redonda::before, .so-mesa--redonda::after { top: 50%; bottom: auto; left: auto; width: 5px; height: 22px; margin: -11px 0 0; }
.so-mesa--redonda::before { left: -9px; }
.so-mesa--redonda::after { right: -9px; }
.so-mesa--ocupada { border-color: var(--musgo); background: var(--musgo); color: var(--marfim); }
.so-mesa--ocupada small { color: var(--menta); }
.so-mesa--conta { border-color: var(--alerta); background: var(--alerta-fundo); color: var(--alerta); }
.so-mesa--conta small { font-weight: 650; }
.so-mesa--sel { outline: 2.5px solid var(--positivo); outline-offset: 3px; }
.so-mesa__qr {
  position: absolute;
  top: -11px;
  right: -14px;
  padding: 1px 5px;
  border: 2px solid #F1ECD0;
  border-radius: 4px;
  background: var(--menta);
  color: var(--petroleo);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

.so-comanda {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(16, 46, 40, .14);
  border-radius: 6px;
  background: var(--papel);
}
.so-comanda__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.so-comanda__cab b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.so-comanda__cab span { font-size: 13px; color: var(--suave-claro); white-space: nowrap; }
.so-comanda__quem { margin-top: 2px; font-size: 13px; color: var(--suave-claro); }
.so-itens { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(16, 46, 40, .25); }
.so-itens li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.25; }
.so-itens .mono { font-size: 13px; }
.so-itens small { display: block; margin-top: 1px; font-size: 13px; color: var(--alerta); }
.so-comanda__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px dashed rgba(16, 46, 40, .25); font-size: 14px; font-weight: 650; }
.so-comanda__total b { font: 650 15px var(--mono); }
.so-comanda__acoes { display: grid; gap: 7px; margin-top: auto; padding-top: 12px; }
/* desenho base: o pedido já foi para a cozinha */
.so-btn--cozinha { border-color: var(--positivo); background: var(--ok-fundo); color: var(--positivo); }
.so-btn--cozinha .so-onda { border-color: var(--menta); }

/* o aviso do pedido feito pelo QR chega no pé do mapa do salão, sem cobrir nenhuma mesa */
.so-aviso {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 9px 12px 10px;
  border-radius: 6px;
  background: var(--petroleo);
  color: var(--marfim);
  box-shadow: 4px 5px 0 rgba(16, 46, 40, .22);
  font-size: 13px;
  line-height: 1.3;
}
.so-aviso__qr { width: 18px; height: 18px; margin-top: 1px; fill: var(--menta); }
.so-aviso__txt { min-width: 0; }
.so-aviso__txt b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-aviso__txt span { display: block; color: var(--suave-escuro); }
.so-aviso time { color: var(--suave-escuro); white-space: nowrap; }

/* impressora da cozinha: o papel sai pela boca, de cima para baixo */
.so-cozinha { position: relative; z-index: 3; }
.so-impressora {
  position: relative;
  z-index: 2;
  height: 54px;
  border: 1.5px solid #2C5A4B;
  border-radius: 10px 10px 6px 6px;
  background: #0A231E;
  box-shadow: 8px 10px 0 var(--so-sombra);
}
.so-impressora__luz { position: absolute; left: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.so-impressora__nome { position: absolute; left: 30px; top: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--suave-escuro); }
.so-impressora__boca { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 5px; border-radius: 3px; background: #030C0A; }
.so-ticket { position: relative; z-index: 1; margin: -13px 16px 0; clip-path: inset(0 -40px -60px -40px); }
.so-ticket__rolo { position: relative; transform: rotate(1.4deg); transform-origin: 50% 0; }
.so-ticket__sombra, .so-ticket__papel {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 97.5% 100%, 95% calc(100% - 6px), 92.5% 100%, 90% calc(100% - 6px), 87.5% 100%, 85% calc(100% - 6px), 82.5% 100%, 80% calc(100% - 6px), 77.5% 100%, 75% calc(100% - 6px), 72.5% 100%, 70% calc(100% - 6px), 67.5% 100%, 65% calc(100% - 6px), 62.5% 100%, 60% calc(100% - 6px), 57.5% 100%, 55% calc(100% - 6px), 52.5% 100%, 50% calc(100% - 6px), 47.5% 100%, 45% calc(100% - 6px), 42.5% 100%, 40% calc(100% - 6px), 37.5% 100%, 35% calc(100% - 6px), 32.5% 100%, 30% calc(100% - 6px), 27.5% 100%, 25% calc(100% - 6px), 22.5% 100%, 20% calc(100% - 6px), 17.5% 100%, 15% calc(100% - 6px), 12.5% 100%, 10% calc(100% - 6px), 7.5% 100%, 5% calc(100% - 6px), 2.5% 100%, 0% calc(100% - 6px));
}
.so-ticket__sombra { position: absolute; inset: 0; background: var(--so-sombra); transform: translate3d(7px, 9px, 0); }
.so-ticket__papel { position: relative; padding: 26px 12px 22px; background: var(--papel); color: var(--petroleo); font-size: 13px; line-height: 1.4; }
.so-ticket__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; }
.so-ticket__cab b { font-weight: 700; }
.so-ticket__cab span { font-size: 13px; }
.so-ticket__quem { color: var(--suave-claro); }
.so-ticket__itens { display: grid; gap: 5px; margin-top: 9px; padding: 9px 0; border-block: 1.5px dashed rgba(16, 46, 40, .42); }
.so-ticket__itens li { padding-left: 3ch; text-indent: -3ch; }
.so-ticket__itens b { font-weight: 700; }
.so-ticket__itens small { display: block; text-indent: 0; font-size: 13px; color: var(--alerta); }
.so-ticket__pe { margin-top: 8px; color: var(--suave-claro); }

/* a placa da mesa com o QR que o cliente aponta com o celular */
.so-tenda { position: relative; z-index: 2; }
.so-tenda__peca { --so-giro: -4deg; --so-raio: 8px; --so-sx: 7px; --so-sy: 9px; width: 136px; transform: rotate(var(--so-giro)); }
.so-tenda__peca > .so-sombra { bottom: 9px; }
.so-tenda__placa {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--petroleo);
  border-radius: 8px;
  background: var(--papel);
  color: var(--petroleo);
  text-align: center;
}
.so-tenda__mesa { padding: 6px 0 5px; background: var(--petroleo); color: var(--marfim); font-size: 13px; font-weight: 650; }
.so-tenda__qr { width: 92px; height: 92px; margin: 8px auto 4px; fill: var(--petroleo); shape-rendering: crispEdges; }
.so-tenda__dica { padding: 0 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.so-tenda__pe { position: relative; display: block; height: 9px; margin: 0 16px; border-radius: 0 0 4px 4px; background: #0A231E; }

/* palco largo: o tablet à esquerda; a impressora e a placa numa coluna à direita, por cima da borda dele */
@container so-pdv (min-width: 640px) {
  .so-pdv__grade { grid-template-columns: minmax(0, 1fr) clamp(170px, 26%, 216px); grid-template-rows: auto minmax(0, 1fr); }
  .so-tablet { grid-column: 1; grid-row: 1 / 3; margin: 26px -24px 18px 0; }
  .so-cozinha { grid-column: 2; grid-row: 1; }
  .so-tenda { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin: 22px 10px 0 0; }
}
/* palco estreito: o tablet em cima; a placa e a impressora embaixo, encostando nele */
@container so-pdv (max-width: 639px) {
  .so-pdv__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 14px; }
  .so-tablet { --so-raio: 18px; --so-sx: 8px; --so-sy: 10px; grid-column: 1 / -1; grid-row: 1; }
  .so-tablet__corpo { padding: 8px; }
  .so-tenda { grid-column: 1; grid-row: 2; justify-self: start; margin: -6px 0 0 4px; }
  .so-cozinha { grid-column: 2; grid-row: 2; justify-self: end; width: min(100%, 196px); margin-top: -26px; }
  .so-ticket__quem, .so-ticket__pe { display: none; }
}
/* tela estreita: só seis mesas e a comanda resumida, com o total e o botão */
@container so-tela (max-width: 479px) {
  .so-pdv__corpo { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .so-mesas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .so-mesa--extra { display: none; }
  .so-abas > :nth-child(3) { display: none; }
  .so-comanda { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 10px 12px; }
  .so-comanda__quem, .so-itens { display: none; }
  .so-comanda__total { margin: 0; padding: 0; border: 0; }
  .so-comanda__total span { display: none; }
  .so-comanda__acoes { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; padding-top: 10px; }
}
@container so-tela (max-width: 359px) {
  .so-comanda__acoes { grid-template-columns: minmax(0, 1fr); }
  .so-comanda__acoes > :last-child { display: none; }
}

/* ---------- 02 Educação: o funil até a matrícula ---------- */

.so-funil { max-width: 540px; }
.so-funil .so-janela__corpo { container: so-funil / inline-size; }
.so-funil__corpo { padding: 14px 14px 22px; }
.so-funil__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.so-funil__cab b { font-weight: 650; }
/* a ficha anda numa raia à direita do funil; a altura fixa das etapas faz o passo dela ser exato */
.so-funil__area { --so-raia: 44%; --so-passo: 48px; position: relative; margin-top: 14px; padding-right: var(--so-raia); }
.so-etapas { display: grid; gap: 8px; }
.so-etapas li {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(var(--w) * 100%);
  height: 40px;
  margin-inline: auto;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.so-etapas li::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 5px; background: #ECE7C9; }
.so-etapas li:nth-child(2)::before { background: #E4ECD6; }
.so-etapas li:nth-child(3)::before { background: var(--ok-fundo); }
.so-etapas li.so-etapas__fim { color: var(--papel); }
.so-etapas li.so-etapas__fim::before { background: var(--positivo); }
.so-etapas b { font: 650 14px var(--mono); }
.so-etapas .so-troca { justify-items: end; }

.so-ficha {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(3 * var(--so-passo) + 20px - 38px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 6px 8px;
  width: calc(var(--so-raia) - 14px);
  height: 76px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 46, 40, .18);
  border-radius: 6px;
  background: var(--papel);
  box-shadow: 4px 5px 0 rgba(16, 46, 40, .16);
}
.so-ficha::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 32px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(16, 46, 40, .18);
  border-bottom: 1px solid rgba(16, 46, 40, .18);
  background: var(--papel);
  transform: rotate(45deg);
}
.so-ficha .so-av { width: 28px; height: 28px; }
.so-ficha__txt { min-width: 0; }
.so-ficha__txt b, .so-ficha__txt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.so-ficha__txt b { font-size: 14px; font-weight: 650; }
.so-ficha__txt small { font-size: 13px; color: var(--suave-claro); }
.so-ficha__estado { grid-column: 1 / -1; justify-self: start; }

@container so-funil (max-width: 459px) {
  .so-funil__area { --so-raia: 48%; }
  /* funil menos inclinado, para o nome de cada etapa caber na barra */
  .so-etapas li { width: calc((.55 + var(--w) * .45) * 100%); padding: 0 10px; }
  .so-ficha { grid-template-columns: minmax(0, 1fr); padding: 8px 9px; }
  .so-ficha .so-av { display: none; }
}

/* ---------- 03 Atendimento: a fila que anda ---------- */

.so-fila { max-width: 560px; }
.so-fila .so-janela__corpo { container: so-fila / inline-size; }
/* alturas fixas: o #314 desce exatamente uma etapa e as linhas de baixo sobem uma */
.so-fila__corpo {
  --so-grupo: 30px;
  --so-linha: 46px;
  --so-vao: 6px;
  display: grid;
  grid-template-rows: var(--so-grupo) var(--so-linha) var(--so-grupo) var(--so-linha) var(--so-linha) var(--so-linha);
  gap: var(--so-vao);
  padding: 12px 14px 16px;
}
.so-grupo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--suave-claro); }
.so-grupo b { padding: 1px 7px; border-radius: 3px; background: #ECE7C9; color: var(--petroleo); font: 600 13px/1.35 var(--mono); }
.so-chamado { position: relative; min-width: 0; }
.so-chamado__papel {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 46px;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(16, 46, 40, .14);
  border-radius: 6px;
  background: var(--papel);
  font-size: 14px;
}
.so-chamado__papel > i { font: 13px var(--mono); font-style: normal; color: var(--suave-claro); }
.so-chamado__papel > b { min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.so-chamado__sombra { position: absolute; inset: 0; border-radius: 6px; background: rgba(16, 46, 40, .18); opacity: 0; transform: translate3d(4px, 6px, 0); }
.so-resp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.so-resp .so-av { width: 22px; height: 22px; }
.so-prazo { font: 13px var(--mono); color: var(--suave-claro); text-align: right; white-space: nowrap; }
.so-prazo--alerta { font-weight: 600; color: var(--alerta); }
.so-chamado--desce { z-index: 2; }
.so-chamado__estado { justify-items: start; }

@container so-fila (max-width: 439px) {
  .so-chamado__papel { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .so-prazo { display: none; }
}

/* ---------- 04 Empresas: a aprovação que vira e a parada da rota que é marcada ---------- */

.so-empresa { container: so-empresa / inline-size; }
.so-empresa__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.so-empresa__rota { margin-top: 64px; }

/* sem overflow escondido: o ponteiro chega de fora do cartão; a barra arredonda os próprios cantos */
.so-cartao {
  position: relative;
  height: 100%;
  border: 1.5px solid var(--petroleo);
  border-radius: 8px;
  background: var(--papel);
  color: var(--petroleo);
  font-size: 14px;
  line-height: 1.35;
}
.so-cartao__barra { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 6.5px 6.5px 0 0; background: var(--petroleo); color: var(--marfim); white-space: nowrap; }
.so-cartao__barra b { font-weight: 650; }
.so-cartao__barra .mono { margin-left: auto; font-size: 13px; color: var(--suave-escuro); }
.so-cartao__barra .so-av { margin-left: auto; background: #2C5A4B; }

.so-aprova__peca { --so-giro: -1.2deg; transform: rotate(var(--so-giro)); }
.so-aprova { display: grid; }
.so-aprova__frente, .so-aprova__verso { --so-raio: 8px; grid-area: 1 / 1; position: relative; }
/* desenho base: o cartão já virou para o lado aprovado */
.so-aprova__frente { transform: scaleX(0); }
.so-aprova__corpo { display: grid; gap: 6px; padding: 14px 14px 16px; }
.so-aprova__titulo { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.so-aprova__quem { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave-claro); }
.so-aprova__valor { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.so-aprova__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.so-aprova__acoes .so-btn { min-height: 36px; }
/* o verso: o mesmo cartão, agora no verde de aprovado, com o histórico no pé */
.so-cartao--ok { display: flex; flex-direction: column; border-color: var(--positivo); background: var(--ok-fundo); }
.so-aprova__feito { display: flex; align-items: center; gap: 12px; padding: 18px 14px 14px; }
.so-selo { flex: none; width: 38px; height: 38px; }
.so-selo circle { fill: var(--positivo); }
.so-selo path { fill: none; stroke: var(--papel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.so-aprova__feito > span { min-width: 0; }
.so-aprova__feito b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--positivo); }
.so-aprova__feito span span { display: block; margin-top: 3px; font-size: 13px; }
.so-historico { display: grid; gap: 6px; margin: auto 14px 0; padding: 11px 0 14px; border-top: 1px dashed rgba(25, 116, 84, .5); }
.so-historico li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.3; color: var(--suave-claro); }

.so-rota__peca { --so-giro: 1.4deg; transform: rotate(var(--so-giro)); }
.so-paradas { position: relative; padding: 6px 14px 10px; }
.so-parada {
  position: relative;
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  height: 56px;
  border-top: 1px solid rgba(16, 46, 40, .1);
}
.so-parada:first-child { border-top: 0; }
/* o trecho até a próxima parada: verde depois que a parada foi feita */
.so-parada:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  top: 39px;
  width: 2px;
  height: 34px;
  background: var(--positivo);
  transform-origin: 50% 0;
}
.so-check {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--positivo);
  border-radius: 50%;
  background: var(--positivo);
}
.so-check svg { width: 12px; height: 12px; fill: none; stroke: var(--papel); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.so-parada--proxima .so-check { border-color: rgba(16, 46, 40, .32); background: var(--papel); }
.so-parada time { font: 13px var(--mono); color: var(--suave-claro); }
.so-parada__txt { min-width: 0; }
.so-parada__txt b, .so-parada__txt small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.so-parada__txt b { font-size: 14px; font-weight: 650; }
.so-parada__txt small { font-size: 13px; color: var(--suave-claro); }
.so-parada--feita .so-parada__txt b, .so-parada--agora .so-parada__txt b { color: var(--suave-claro); }
.so-parada--proxima .so-parada__txt { padding-right: 76px; }
/* o selo "Próxima" desce de uma parada para a outra */
.so-rota__proxima { position: absolute; right: 14px; top: calc(6px + 2 * 56px + 16px); }

/* palco estreito: os dois cartões em degrau, um embaixo e à direita do outro */
@container so-empresa (max-width: 699px) {
  .so-empresa__grade { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .so-empresa__aprova { width: min(100%, 360px); }
  .so-empresa__rota { width: min(100%, 360px); justify-self: end; margin-top: 0; }
}

/* ---------- O fim da seção: a próxima operação pode ser a sua ---------- */

.so-proxima {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 28px;
  padding-top: 36px;
  border-top: 1px solid var(--linha-escura);
}
.so-marca--vazia { width: 44px; height: 40px; }
.so-marca--vazia svg { width: 44px; height: 40px; }
.so-marca--vazia .so-marca__anel { stroke-width: 4.5; stroke-dasharray: 9 7; }
.so-proxima__texto { max-width: 30ch; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.14; letter-spacing: -.03em; }
.so-proxima__texto span { color: var(--suave-escuro); }

@media (max-width: 699px) {
  .so-proxima { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .so-proxima .botao { width: 100%; }
}

/* ---------- Movimento: só com movimento liberado e com o JavaScript da seção armado ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* título: cada linha sobe por trás de uma máscara */
  .so-arma .so-titulo .linha > span { transform: translate3d(0, 112%, 0); transition: transform 1.05s var(--entra) calc(var(--i) * 120ms + 60ms); }
  .so-arma .so-titulo.visivel .linha > span { transform: none; }

  /* tudo começa parado no primeiro quadro; a entrada roda com .so-dentro e a cena com .so-toca */
  .so-arma .so-texto > *, .so-arma .so-proxima > * { animation: so-sobe .85s var(--entra) both paused; }
  .so-arma .so-texto > :nth-child(1), .so-arma .so-proxima > :nth-child(1) { animation-delay: calc(var(--so-d, 0ms)); }
  .so-arma .so-texto > :nth-child(2), .so-arma .so-proxima > :nth-child(2) { animation-delay: calc(var(--so-d, 0ms) + 80ms); }
  .so-arma .so-texto > :nth-child(3), .so-arma .so-proxima > :nth-child(3) { animation-delay: calc(var(--so-d, 0ms) + 160ms); }
  .so-arma .so-texto > :nth-child(4) { animation-delay: calc(var(--so-d, 0ms) + 240ms); }
  .so-arma .so-marca__cheio { transform-origin: 50% 50%; animation: so-marca .7s var(--entra) calc(var(--so-d, 0ms) + 380ms) both paused; }

  /* cada peça pousa com a sua sombra encolhendo; as peças de apoio chegam um pouco depois */
  .so-arma .so-pousa { animation: so-pousa 1s var(--entra) calc(var(--so-d, 0ms) + var(--so-atraso, 180ms)) both paused; }
  .so-arma .so-pousa > .so-sombra { animation: so-sombra 1s var(--entra) calc(var(--so-d, 0ms) + var(--so-atraso, 180ms)) both paused; }
  .so-cozinha__peca, .so-rota__peca { --so-atraso: 320ms; }
  .so-tenda__peca { --so-atraso: 440ms; }
  /* o botão só usa o primeiro quadro: depois da entrada ele volta a reagir ao mouse */
  .so-arma .so-proxima > .botao { animation-fill-mode: backwards; }

  /* "running" com !important: vence as regras de cada peça, que são mais específicas e trazem "paused" */
  .so-arma .so-dentro .so-texto > *, .so-arma .so-dentro .so-marca__cheio, .so-arma .so-dentro .so-pousa,
  .so-arma .so-dentro .so-pousa > .so-sombra, .so-arma .so-proxima.so-dentro > * { animation-play-state: running !important; }

  /* 01: envia o pedido, a cozinha imprime e chega um pedido pelo QR da mesa 12 */
  .so-arma .so-btn--cozinha .so-onda { animation: so-onda .65s var(--ease) .3s both paused; }
  .so-arma .so-btn--cozinha { animation: so-enviado .5s ease .38s both paused; }
  .so-arma .so-btn--cozinha .so-troca > :first-child { animation: so-sai .28s ease .56s both paused; }
  .so-arma .so-btn--cozinha .so-troca > :last-child { animation: so-entra .32s ease .66s both paused; }
  .so-arma .so-impressora__luz { animation: so-luz .4s steps(1, end) .78s 4 both paused; }
  .so-arma .so-ticket__rolo { animation: so-imprime 1.7s cubic-bezier(.3, .55, .35, 1) .82s both paused; }
  .so-arma .so-mesa--qr { animation: so-mesa-qr 1.3s ease 2.55s both paused; }
  .so-arma .so-mesa__qr { animation: so-salta .5s cubic-bezier(.3, 1.6, .5, 1) 2.6s both paused; }
  .so-arma .so-aviso { animation: so-chega .65s var(--entra) 2.7s both paused; }

  /* 02: o funil se abre e a Ana Clara desce de "Visita" para "Matrícula" */
  .so-arma .so-etapas li::before { transform-origin: 50% 50%; animation: so-barra .75s var(--entra) both paused; }
  .so-arma .so-etapas li > * { animation: so-surge .45s ease both paused; }
  .so-arma .so-etapas li:nth-child(1)::before { animation-delay: .1s; }
  .so-arma .so-etapas li:nth-child(2)::before { animation-delay: .18s; }
  .so-arma .so-etapas li:nth-child(3)::before { animation-delay: .26s; }
  .so-arma .so-etapas li:nth-child(4)::before { animation-delay: .34s; }
  .so-arma .so-etapas li:nth-child(1) > * { animation-delay: .4s; }
  .so-arma .so-etapas li:nth-child(2) > * { animation-delay: .48s; }
  .so-arma .so-etapas li:nth-child(3) > * { animation-delay: .56s; }
  .so-arma .so-etapas li:nth-child(4) > * { animation-delay: .64s; }
  .so-arma .so-ficha { animation: so-ficha 1s cubic-bezier(.5, 0, .2, 1) 1.05s both paused; }
  .so-arma .so-etapas li:nth-child(3) .so-troca > :first-child { animation: so-sai .28s ease 1.35s both paused; }
  .so-arma .so-etapas li:nth-child(3) .so-troca > :last-child { animation: so-entra .32s ease 1.45s both paused; }
  .so-arma .so-etapas li:nth-child(4) .so-troca > :first-child { animation: so-sai .28s ease 1.85s both paused; }
  .so-arma .so-etapas li:nth-child(4) .so-troca > :last-child { animation: so-entra .32s ease 1.95s both paused; }
  .so-arma .so-ficha__estado > :first-child { animation: so-sai .28s ease 2.05s both paused; }
  .so-arma .so-ficha__estado > :last-child { animation: so-entra .32s ease 2.15s both paused; }

  /* 03: o Bruno assume o #314, que desce para "Em atendimento" enquanto o resto da fila sobe */
  .so-arma .so-chamado__estado > :first-child { animation: so-sai .28s ease .55s both paused; }
  .so-arma .so-chamado__estado > :last-child { animation: so-entra .32s ease .65s both paused; }
  .so-arma .so-chamado--desce { animation: so-fila-desce .9s cubic-bezier(.55, 0, .25, 1) 1.05s both paused; }
  .so-arma .so-chamado--desce .so-chamado__sombra { animation: so-ergue .9s ease 1.05s both paused; }
  .so-arma .so-chamado--sobe, .so-arma .so-grupo--atende { animation: so-fila-sobe .62s cubic-bezier(.4, 0, .2, 1) 1.18s both paused; }
  .so-arma .so-grupo .so-troca > :first-child { animation: so-sai .28s ease 1.4s both paused; }
  .so-arma .so-grupo .so-troca > :last-child { animation: so-entra .32s ease 1.5s both paused; }
  .so-arma .so-chamado--desce .so-chamado__papel { animation: so-acende 1.5s ease 1.95s both paused; }

  /* 04: o clique em "Aprovar" vira o cartão; na rota, a parada da farmácia é marcada como feita */
  .so-arma .so-ponteiro { animation: so-ponteiro 1.5s cubic-bezier(.45, 0, .25, 1) .35s both paused; }
  .so-arma .so-aprova .so-btn--ok { animation: so-aperta .36s ease 1.24s both paused; }
  .so-arma .so-aprova .so-onda { animation: so-onda .6s var(--ease) 1.26s both paused; }
  .so-arma .so-aprova__frente { animation: so-vira-sai .24s cubic-bezier(.55, 0, 1, .45) 1.85s both paused; }
  .so-arma .so-aprova__verso { animation: so-vira-entra .34s cubic-bezier(0, .55, .45, 1) 2.09s both paused; }
  .so-arma .so-selo path { animation: so-traco .4s var(--ease) 2.35s both paused; }
  .so-arma .so-parada--agora .so-check { animation: so-marca-feita .32s ease 2.75s both paused; }
  .so-arma .so-parada--agora .so-check path { animation: so-traco .35s var(--ease) 2.88s both paused; }
  .so-arma .so-parada--agora .so-parada__txt b { animation: so-apaga .4s ease 2.95s both paused; }
  .so-arma .so-parada--agora::after { animation: so-liga .45s var(--ease) 3s both paused; }
  .so-arma .so-rota__proxima { animation: so-chip-desce .55s var(--entra) 3.15s both paused; }

  .so-arma .so-toca, .so-arma .so-toca *, .so-arma .so-toca *::before, .so-arma .so-toca *::after { animation-play-state: running !important; }
}

@keyframes so-sobe { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes so-marca { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes so-pousa {
  from { opacity: 0; transform: translate3d(0, -34px, 0) rotate(calc(var(--so-giro, 0deg) + 2.4deg)) scale(1.05); }
  35% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--so-giro, 0deg)); }
}
@keyframes so-sombra {
  from { transform: translate3d(calc(var(--so-sx, 9px) * 3.4), calc(var(--so-sy, 12px) * 3.4), 0); }
  to { transform: translate3d(var(--so-sx, 9px), var(--so-sy, 12px), 0); }
}
@keyframes so-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes so-entra { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes so-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes so-onda {
  0% { opacity: 0; transform: scale(.35); }
  1% { opacity: .95; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes so-enviado {
  0% { border-color: var(--positivo); background-color: var(--positivo); color: var(--papel); transform: none; }
  30% { border-color: var(--positivo); background-color: #0F5C41; color: var(--papel); transform: scale(.96); }
  55% { transform: none; }
  100% { border-color: var(--positivo); background-color: var(--ok-fundo); color: var(--positivo); transform: none; }
}
@keyframes so-luz { 0% { background-color: #2C5A4B; } 50% { background-color: var(--menta); } 100% { background-color: var(--menta); } }
@keyframes so-imprime {
  0% { transform: translate3d(0, -100%, 0) rotate(0deg); }
  80% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(0, 0, 0) rotate(1.4deg); }
}
@keyframes so-mesa-qr {
  0% { border-color: var(--musgo); }
  20%, 55% { border-color: var(--menta); }
  100% { border-color: var(--musgo); }
}
@keyframes so-salta { from { transform: scale(0); } to { transform: none; } }
@keyframes so-chega { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes so-barra { from { transform: scaleX(.22); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes so-ficha {
  0% { transform: translate3d(0, calc(-1 * var(--so-passo)), 0); }
  18% { transform: translate3d(-2px, calc(-1 * var(--so-passo) - 4px), 0) scale(1.03); }
  82% { transform: translate3d(-2px, 2px, 0) scale(1.03); }
  100% { transform: none; }
}
@keyframes so-fila-desce {
  0% { transform: translate3d(0, calc(-1 * (var(--so-grupo) + var(--so-linha) + 2 * var(--so-vao))), 0); }
  18% { transform: translate3d(-3px, calc(-1 * (var(--so-grupo) + var(--so-linha) + 2 * var(--so-vao)) - 3px), 0) scale(1.02); }
  85% { transform: translate3d(-3px, 0, 0) scale(1.02); }
  100% { transform: none; }
}
@keyframes so-ergue { 0% { opacity: 0; } 18%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes so-fila-sobe { from { transform: translate3d(0, calc(var(--so-linha) + var(--so-vao)), 0); } to { transform: none; } }
@keyframes so-acende { 0% { background-color: var(--papel); } 22% { background-color: var(--ok-fundo); } 100% { background-color: var(--papel); } }
@keyframes so-ponteiro {
  0% { opacity: 0; transform: translate3d(58px, 44px, 0); }
  14% { opacity: 1; }
  56% { transform: translate3d(0, 0, 0); }
  63% { transform: translate3d(0, 0, 0) scale(.82); }
  71% { transform: translate3d(0, 0, 0); }
  88% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(8px, 12px, 0); }
}
@keyframes so-aperta { 0% { transform: none; } 40% { transform: scale(.94); background-color: #0F5C41; } 100% { transform: none; background-color: #0F5C41; } }
@keyframes so-vira-sai { from { transform: none; } to { transform: scaleX(0); } }
@keyframes so-vira-entra { from { transform: scaleX(0); } to { transform: none; } }
@keyframes so-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes so-marca-feita { from { border-color: rgba(16, 46, 40, .32); background-color: var(--papel); } to { border-color: var(--positivo); background-color: var(--positivo); } }
@keyframes so-apaga { from { color: var(--petroleo); } to { color: var(--suave-claro); } }
@keyframes so-liga { from { transform: scaleY(0); } to { transform: none; } }
@keyframes so-chip-desce { from { transform: translate3d(0, -56px, 0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .so-ponteiro, .so-onda, .so-chamado__sombra { display: none; }
}