/* entra subindo por cima do fim da seção lima (que termina toda preta), sem vão vazio entre as duas */
/* sobe durante o instante em que a tela já está toda preta (fim da trava da seção lima) */
.sv {
  position: relative; z-index: 2; margin-top: -95vh;
  /* texto vai do escuro (sobre o lima) ao claro (sobre o preto) junto com a passagem (--passagem 0..1) */
  --sv-k: calc(var(--passagem, 1) * 100%);
  --tinta: color-mix(in srgb, #f4f4ed var(--sv-k), #111112);
  --tinta-2: color-mix(in srgb, rgba(244,244,237,.66) var(--sv-k), rgba(17,17,18,.66));
  --tinta-3: color-mix(in srgb, rgba(244,244,237,.4) var(--sv-k), rgba(17,17,18,.42));
  --texto: var(--tinta); --texto-2: var(--tinta-2); --texto-3: var(--tinta-3);
  color: var(--tinta);
}
@media (max-width: 900px) { .sv { margin-top: -80vh; } }
.sv-topo { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.25rem, calc(var(--u) * 5), 4.5rem); }
.sv-titulo { font-size: clamp(1.75rem, calc(var(--u) * 3.4), 3.375rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; }
.sv-grade { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, calc(var(--u) * 1.6), 1.375rem); }
.sv-cartao {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding: clamp(1.375rem, calc(var(--u) * 2.6), 2.25rem);
  min-height: clamp(13.75rem, calc(var(--u) * 24), 18.75rem);
  /* seção em tema preto: cartão grafite com texto creme; hover lima */
  background: #1b1b1e; color: var(--creme);
  border: 1px solid rgba(244, 244, 237, 0.1);
  border-radius: var(--raio-l);
  transition: background-color 0.6s var(--curva), border-color 0.6s var(--curva), color 0.6s var(--curva), translate 0.7s var(--curva);
}
.sv-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; padding-bottom: 1.75rem; }
.sv-num { font-family: var(--fonte-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--acento); transition: color 0.6s var(--curva); }
.sv-icone { width: 2.25rem; height: 2.25rem; transition: transform 0.7s var(--curva-mola); }
.sv-nome { font-size: clamp(1.125rem, calc(var(--u) * 1.8), 1.5rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
.sv-frase { font-size: 0.9375rem; line-height: 1.45; color: rgba(244, 244, 237, 0.62); transition: color 0.6s var(--curva); }
.sv-cartao:hover { background: var(--acento); border-color: var(--acento); color: #111112; translate: 0 -6px; }
.sv-cartao:hover .sv-num, .sv-cartao:hover .sv-frase { color: rgba(17, 17, 18, 0.72); }
.sv-cartao:hover .sv-icone { transform: rotate(-8deg) scale(1.1); }
.sv-fecho { margin-top: clamp(2.5rem, calc(var(--u) * 6), 6rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sv-fecho-texto { font-size: clamp(1.125rem, calc(var(--u) * 1.9), 1.625rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; max-width: 32ch; }
.sv-botao { --b-fundo: var(--acento); --b-cor: #111112; }

@media (max-width: 900px) { .sv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .sv-grade { grid-template-columns: 1fr; }
  .sv-cartao { min-height: 0; }
  .sv-cab { padding-bottom: 1.25rem; }
}
/* Tablet: textos maiores nos cartões */
@media (min-width: 601px) and (max-width: 1100px) {
  .sv-nome { font-size: 1.625rem; }
  .sv-frase { font-size: 1.0625rem; }
  .sv-num { font-size: 0.8125rem; }
}

/* =========================================================
   Ilustração por serviço: dentro do cartão (toque) e na caixinha que segue o mouse (mouse fino).
   Cena fixa de 240x160; as animações só tocam com .tocando
   ========================================================= */
.sv-ilu {
  display: none; place-items: center;
  height: 10.5rem; margin-top: 1.125rem;
  border-radius: 1.125rem; background: var(--creme);
  overflow: hidden; color: var(--oliva);
  font-family: var(--fonte); letter-spacing: -0.01em;
}
@media (hover: none), (pointer: coarse) { .sv-ilu { display: grid; } }
.sv-cena { position: relative; width: 15rem; height: 10rem; flex: none; }
.sv-ilu ul { list-style: none; }
.sv-ilu i, .sv-ilu b, .sv-ilu em { font-style: normal; }

/* 01 Sistemas */
.sv-sis-jan { position: absolute; inset: 0.25rem 0; background: #fff; border: 1px solid rgba(40,44,32,.12); border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; }
.sv-sis-barra { display: flex; gap: 0.25rem; align-items: center; height: 1.125rem; padding: 0 0.5625rem; border-bottom: 1px solid rgba(40,44,32,.08); flex: none; }
.sv-sis-barra i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: rgba(40,44,32,.18); }
.sv-sis-corpo { flex: 1; display: flex; min-height: 0; }
.sv-sis-menu { width: 2.875rem; background: var(--oliva); padding: 0.5rem 0.375rem; display: flex; flex-direction: column; gap: 0.375rem; }
.sv-sis-menu li { display: flex; align-items: center; gap: 0.25rem; height: 1rem; padding: 0 0.25rem; border-radius: 0.3125rem; }
.sv-sis-menu li i { width: 0.4375rem; height: 0.4375rem; border-radius: 0.125rem; background: rgba(244,244,237,.45); flex: none; }
.sv-sis-menu li b { height: 0.25rem; flex: 1; border-radius: 0.125rem; background: rgba(244,244,237,.3); }
.sv-sis-menu li.ativo { background: var(--acento); }
.sv-sis-menu li.ativo i, .sv-sis-menu li.ativo b { background: var(--oliva); }
.sv-sis-main { flex: 1; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.sv-sis-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3125rem; }
.sv-sis-kpi { background: var(--creme); border-radius: 0.4375rem; padding: 0.3125rem 0.375rem; display: flex; flex-direction: column; gap: 1px; }
.sv-sis-kpi span { font-size: 0.625rem; line-height: 1.2; color: rgba(40,44,32,.6); font-weight: 500; }
.sv-sis-kpi b { font-size: 0.9375rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.sv-sis-graf { flex: 1; display: flex; align-items: flex-end; gap: 0.3125rem; padding: 0 0.125rem; border-bottom: 1px solid rgba(40,44,32,.12); }
.sv-sis-graf i { flex: 1; height: var(--h); border-radius: 0.1875rem 0.1875rem 0 0; background: rgba(40,44,32,.16); transform-origin: 50% 100%; }
.sv-sis-graf i.ativo { background: var(--oliva); }

/* 02 App */
.sv-app-cel { position: absolute; left: 4.375rem; top: 0; width: 6.25rem; height: 10rem; background: #fff; border: 0.3125rem solid var(--oliva); border-radius: 1.375rem; padding: 0.625rem 0.375rem 0; display: flex; flex-direction: column; gap: 0.375rem; overflow: hidden; }
.sv-app-cab { display: flex; align-items: center; gap: 0.25rem; padding: 0 1px; }
.sv-app-cab i { width: 0.6875rem; height: 0.6875rem; border-radius: 0.1875rem; background: var(--acento); box-shadow: inset 0 0 0 1.5px var(--oliva); flex: none; }
.sv-app-cab b { font-size: 0.625rem; font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; }
.sv-app-lista { display: flex; flex-direction: column; gap: 0.3125rem; }
.sv-app-lista li { display: flex; align-items: center; gap: 0.3125rem; height: 1.5625rem; padding: 0 0.3125rem; border-radius: 0.4375rem; background: var(--creme); }
.sv-app-lista li > i { width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: rgba(40,44,32,.2); flex: none; }
.sv-app-lista li span { flex: 1; display: flex; flex-direction: column; gap: 0.1875rem; }
.sv-app-lista li b { height: 0.25rem; width: 80%; border-radius: 0.125rem; background: rgba(40,44,32,.45); }
.sv-app-lista li em { height: 0.25rem; width: 55%; border-radius: 0.125rem; background: rgba(40,44,32,.2); }
.sv-app-lista li.ativo { background: var(--oliva); }
.sv-app-lista li.ativo > i { background: var(--acento); }
.sv-app-lista li.ativo b { background: rgba(244,244,237,.8); }
.sv-app-lista li.ativo em { background: rgba(244,244,237,.35); }
.sv-app-abas { margin-top: auto; height: 1.25rem; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(40,44,32,.1); margin-inline: -6px; padding: 0 0.375rem; flex: none; }
.sv-app-abas i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: rgba(40,44,32,.22); }
.sv-app-abas i.ativo { background: var(--oliva); width: 0.875rem; border-radius: 0.25rem; }
.sv-app-selo { position: absolute; padding: 0.3125rem 0.625rem; border-radius: 62.4375rem; font-size: 0.6875rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.sv-app-ios { left: 0.5rem; top: 2.125rem; background: var(--oliva); color: var(--creme); }
.sv-app-and { right: 0.125rem; top: 6.375rem; background: var(--acento); color: var(--oliva); box-shadow: inset 0 0 0 1px rgba(40,44,32,.15); }

/* 03 WhatsApp */
.sv-zap { position: absolute; inset: 0; border-radius: 0.75rem; overflow: hidden; background: #ece5dd; display: flex; flex-direction: column; }
.sv-zap-cab { height: 2rem; background: #075e54; color: #fff; display: flex; align-items: center; gap: 0.4375rem; padding: 0 0.5625rem; flex: none; }
.sv-zap-av { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #25d366; color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.sv-zap-cab span { display: flex; flex-direction: column; line-height: 1.1; }
.sv-zap-cab b { font-size: 0.6875rem; font-weight: 600; }
.sv-zap-cab em { font-size: 0.625rem; opacity: .8; }
.sv-zap-corpo { flex: 1; padding: 0.4375rem 0.5rem; display: flex; flex-direction: column; gap: 0.3125rem; }
.sv-zap-b { font-size: 0.6875rem; line-height: 1.25; padding: 0.3125rem 0.5rem; border-radius: 0.5rem; max-width: 86%; color: #111b21; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.sv-zap-cli { background: #fff; align-self: flex-start; border-top-left-radius: 0.125rem; }
.sv-zap-ia { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0.125rem; max-width: 80%; }
.sv-zap-tag { display: inline-block; margin-right: 0.25rem; padding: 1px 0.3125rem; border-radius: 0.25rem; background: #25d366; color: #fff; font-size: 0.625rem; font-weight: 700; line-height: 1.3; vertical-align: 1px; }
.sv-zap-dig { background: #fff; align-self: flex-start; display: flex; gap: 0.1875rem; padding: 0.4375rem 0.5625rem; border-top-left-radius: 0.125rem; }
.sv-zap-dig i { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #8696a0; }

/* 04 CRM */
.sv-crm { position: absolute; inset: 0.625rem 0; align-items: start; display: grid; grid-template-columns: repeat(3, 4.75rem); gap: 0.375rem; }
.sv-crm-col { background: rgba(40,44,32,.07); border-radius: 0.5625rem; padding: 0.375rem 0.375rem 0.5rem; min-height: 8.75rem; display: flex; flex-direction: column; gap: 0.3125rem; }
.sv-crm-col b { font-size: 0.625rem; font-weight: 700; line-height: 0.75rem; margin-bottom: 1px; white-space: nowrap; }
.sv-crm-col i, .sv-crm-anda { position: relative; display: block; height: 1.875rem; border-radius: 0.375rem; background: #fff; box-shadow: 0 1px 0 rgba(40,44,32,.08); flex: none; }
.sv-crm-col i::before, .sv-crm-anda::before { content: ''; position: absolute; left: 0.4375rem; top: 0.5625rem; width: 70%; height: 0.25rem; border-radius: 0.125rem; background: rgba(40,44,32,.42); }
.sv-crm-col i::after, .sv-crm-anda::after { content: ''; position: absolute; left: 0.4375rem; top: 1.0625rem; width: 42%; height: 0.25rem; border-radius: 0.125rem; background: rgba(40,44,32,.18); }
.sv-crm-col i.sv-crm-vaga { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(40,44,32,.14); }
.sv-crm-col i.sv-crm-vaga::before, .sv-crm-col i.sv-crm-vaga::after { content: none; }
.sv-crm-anda { position: absolute; left: 5.5rem; top: 3.6875rem; width: 4rem; background: var(--acento); box-shadow: inset 0 0 0 1px rgba(40,44,32,.25); transform: translateX(5.125rem); }
.sv-crm-anda::before { background: var(--oliva); }
.sv-crm-anda::after { background: rgba(40,44,32,.45); }

/* 05 Integrações */
.sv-int-linhas { position: absolute; inset: 0; width: 15rem; height: 10rem; }
.sv-int-linhas path { stroke: rgba(40,44,32,.42); stroke-width: 1.6; stroke-dasharray: 4 4; }
.sv-int-bola { position: absolute; left: 0; top: 0; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 1.5px var(--oliva); offset-path: var(--c); offset-rotate: 0deg; offset-distance: 55%; }
.sv-int-no { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.3125rem; height: 1.625rem; padding: 0 0.625rem; border-radius: 62.4375rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(40,44,32,.14); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.sv-int-no i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--oliva); }
.sv-int-mid { position: absolute; left: 7.5rem; top: 5rem; transform: translate(-50%, -50%); width: 3.5rem; height: 2.125rem; border-radius: 0.625rem; background: var(--oliva); color: var(--acento); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.02em; }

/* 06 Dados */
.sv-dad { position: absolute; inset: 0; border-radius: 0.75rem; background: var(--oliva); color: var(--creme); padding: 0.6875rem 0.75rem 0.75rem; display: flex; flex-direction: column; }
.sv-dad-topo { display: flex; justify-content: space-between; align-items: center; }
.sv-dad-topo span { font-size: 0.625rem; color: rgba(244,244,237,.65); font-weight: 500; }
.sv-dad-topo em { font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 62.4375rem; background: var(--acento); color: var(--oliva); }
.sv-dad-num { font-size: 1.5rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.04em; margin-top: 0.125rem; }
.sv-dad-barras { flex: 1; margin-top: 0.5rem; display: flex; align-items: flex-end; gap: 0.375rem; }
.sv-dad-barras i { flex: 1; height: var(--h); border-radius: 0.1875rem 0.1875rem 0 0; background: rgba(244,244,237,.22); transform-origin: 50% 100%; }
.sv-dad-barras i.ativo { background: var(--acento); }

/* ---------- Animações (só tocam ao abrir a ilustração) ---------- */
@keyframes sv-entra { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes sv-cresce { from { transform: scaleY(0); } }
@keyframes sv-balao { from { opacity: 0; transform: translateY(0.375rem) scale(.9); } }
@keyframes sv-pisca { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes sv-anda {
  0%, 12% { transform: translateX(0); }
  38% { transform: translateX(5.125rem) translateY(-4px) rotate(3deg); }
  46%, 88% { transform: translateX(5.125rem); opacity: 1; }
  96% { transform: translateX(5.125rem); opacity: 0; }
  97% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes sv-corre { from { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@keyframes sv-pulsa { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }

.tocando .sv-sis-menu li { animation: sv-entra .5s var(--curva) both; }
.tocando .sv-sis-menu li:nth-child(2) { animation-delay: .06s; }
.tocando .sv-sis-menu li:nth-child(3) { animation-delay: .12s; }
.tocando .sv-sis-menu li:nth-child(4) { animation-delay: .18s; }
.tocando .sv-sis-kpi { animation: sv-pop .55s var(--curva-mola) both; }
.tocando .sv-sis-kpi:nth-child(1) { animation-delay: .15s; }
.tocando .sv-sis-kpi:nth-child(2) { animation-delay: .25s; }
.tocando .sv-sis-kpi:nth-child(3) { animation-delay: .35s; }
.tocando :is(.sv-sis-graf, .sv-dad-barras) i { animation: sv-cresce .7s var(--curva) both; animation-delay: calc(.3s + var(--n, 0) * .06s); }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(2) { --n: 1; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(3) { --n: 2; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(4) { --n: 3; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(5) { --n: 4; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(6) { --n: 5; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(7) { --n: 6; }
:is(.sv-sis-graf, .sv-dad-barras) i:nth-child(8) { --n: 7; }

.tocando .sv-app-cel { animation: sv-entra .6s var(--curva) both; }
.tocando .sv-app-lista li { animation: sv-entra .5s var(--curva) both; }
.tocando .sv-app-lista li:nth-child(1) { animation-delay: .2s; }
.tocando .sv-app-lista li:nth-child(2) { animation-delay: .3s; }
.tocando .sv-app-lista li:nth-child(3) { animation-delay: .4s; }
.tocando .sv-app-ios { animation: sv-pop .6s var(--curva-mola) .45s both; }
.tocando .sv-app-and { animation: sv-pop .6s var(--curva-mola) .6s both; }

.tocando .sv-zap-cli { transform-origin: 0 0; animation: sv-balao .45s var(--curva-mola) .15s both; }
.tocando .sv-zap-ia { transform-origin: 100% 0; animation: sv-balao .45s var(--curva-mola) .75s both; }
.tocando .sv-zap-dig { transform-origin: 0 0; animation: sv-balao .4s var(--curva) 1.3s both; }
.tocando .sv-zap-dig i { animation: sv-pisca 1.1s ease-in-out infinite; }
.tocando .sv-zap-dig i:nth-child(2) { animation-delay: .15s; }
.tocando .sv-zap-dig i:nth-child(3) { animation-delay: .3s; }

.tocando .sv-crm-col i { animation: sv-entra .45s var(--curva) .1s both; }
.tocando .sv-crm-anda { animation: sv-anda 3.2s var(--curva) .4s infinite both; }

.tocando .sv-int-no { animation: sv-pop .5s var(--curva-mola) both; }
.tocando .sv-int-mid { animation: sv-pulsa 1.1s ease-in-out .5s infinite; }
.tocando .sv-int-bola { animation: sv-corre 2.2s cubic-bezier(.45, 0, .55, 1) var(--d) infinite both; }

.tocando .sv-dad-num { animation: sv-entra .5s var(--curva) .05s both; }
.tocando .sv-dad-topo em { animation: sv-pop .5s var(--curva-mola) .9s both; }

/* ---------- Caixinha que segue o mouse ---------- */
.sv-caixa {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 17rem; padding: 0.5rem; border-radius: 1.5rem;
  background: #fff; border: 1px solid var(--linha);
  box-shadow: 0 1.25rem 2.75rem -20px rgba(17, 17, 18, 0.32), 0 0.125rem 0.375rem rgba(17, 17, 18, 0.06);
  pointer-events: none; visibility: hidden;
  will-change: transform;
}
.sv-caixa-palco { position: relative; height: 11rem; overflow: hidden; border-radius: 1.0625rem; background: var(--creme); }
.sv-caixa-camada { position: absolute; inset: 0; }
.sv-caixa-camada > .sv-ilu { display: grid; height: 100%; margin: 0; border-radius: 0; }
@media (hover: none), (pointer: coarse) { .sv-caixa { display: none; } }