/* Carrossel de cards no celular (trilho). Mesma técnica dos chips da Home e do CNPJ.
   No computador (acima de 640px) o container segue o layout de sempre. No celular os cards viram uma linha só,
   com rolagem de lado, snap, o próximo card aparecendo cortado, degradê nas duas pontas e uma barra fina de posição.
   Uso: acrescente a classe mk-trilho no container dos cards (HTML na mesma ordem). Variantes:
   mk-trilho--estreito (cards ~66% da tela), mk-trilho--passos (etapas, número em cima do texto), mk-trilho--velho (layout antigo, gutter 24px). */
.mk-trilho-barra{display:none}
@media (max-width:640px){
  .mk-trilho{--mk-sangra:clamp(20px,4vw,64px);--mk-card:min(81vw,420px);display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-template-columns:none!important;grid-template-rows:none!important;align-items:stretch!important;gap:12px!important;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--mk-sangra);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    box-sizing:border-box;margin-inline:calc(var(--mk-sangra) * -1)!important;padding:6px var(--mk-sangra)!important;margin-block:-6px;max-width:none!important;width:auto!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 32px),transparent 100%)}
  .mk-trilho::-webkit-scrollbar{display:none}
  .mk-trilho:focus-visible{outline:2px solid #CC0601;outline-offset:-2px;border-radius:12px}
  .mk-trilho>*{flex:0 0 var(--mk-card)!important;width:var(--mk-card)!important;max-width:var(--mk-card)!important;min-width:0;box-sizing:border-box;scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important;margin:0!important;height:auto}
  .mk-trilho--estreito{--mk-card:min(66vw,340px)}
  .mk-trilho--velho{--mk-sangra:clamp(24px,5vw,84px)}
  /* Etapas: o número ou a semana vão para cima do texto, o cartão não fica espremido */
  .mk-trilho--passos>*{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  /* Barra fina de posição, só aparece quando o JS cria (poucos pixels) */
  .mk-trilho-barra{display:block;position:relative;height:3px;margin:12px 0 0;border-radius:3px;background:rgba(127,127,133,.22);overflow:hidden}
  .mk-trilho-barra>i{position:absolute;left:0;top:0;height:100%;width:30%;border-radius:3px;background:#CC0601;transform:translateX(0);will-change:transform}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .mk-trilho{scroll-behavior:smooth}
}