/* ===== VCL — Cards de SERVIÇO: empilhar no celular (mantendo o holofote) =====
   Aplica nos .service-card do React (o holofote continua vindo do vcl-fx.css).
   Celular: cada card gruda no topo e o próximo desliza por cima (stack via JS transform).
   Reversível: remover os 2 includes (svc.css/js). O desktop recebe o Tile Fly-In (próxima etapa). */

/* fundo OPACO + holofote ACIMA do fundo (era z-index:-1 sobre card transparente; agora z-index:0 sobre card opaco) */
#servicos .service-card{background:#12161f !important;box-shadow:0 18px 40px rgba(0,0,0,.5)}
#servicos .service-card::before{z-index:0 !important}   /* holofote entre o fundo e o conteúdo */
#servicos .service-card > *{position:relative;z-index:1} /* conteúdo acima do holofote */

/* z-index crescente p/ a pilha (card de cima cobre o de baixo). position:relative já vem do holofote. */
#servicos .service-card:nth-child(1){z-index:1}
#servicos .service-card:nth-child(2){z-index:2}
#servicos .service-card:nth-child(3){z-index:3}
#servicos .service-card:nth-child(4){z-index:4}

/* CELULAR: prepara a pilha */
@media (max-width:879px){
  #servicos .service-card{will-change:transform}
  #servicos .grid{position:relative;padding-bottom:16vh}   /* folga p/ os cards segurarem antes de soltar */
}

@media (prefers-reduced-motion:reduce){
  #servicos .service-card{transform:none !important}
}