/* ===== VCL — Serviços de transporte =====
   DESKTOP (>=880px): scrollytelling — vídeo pinado (transform) que troca ao rolar.
   CELULAR (<880px): "cards empilhando" — cada card gruda no topo e o próximo desliza por cima (pilha).
   Sticky é feito em JS (transform) porque position:sticky QUEBRA neste site (#root é scroller morto).
   Grid original de cards fica escondido nos dois. Reversível: remover os 2 includes. */

.vcl-scrolly{position:relative;display:block;max-width:1180px;margin:0 auto;padding:8px 16px 0}
.vcl-scrolly *{box-sizing:border-box}
.vcl-scrolly + .grid{display:none !important}

/* selo/legenda do serviço ativo (desktop, sobre a mídia) */
.vcl-scrolly-tag{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-weight:700;font-size:.92rem;
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vcl-scrolly-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--acc,#4da3ff);box-shadow:0 0 10px var(--acc,#4da3ff)}

/* ---------- STAGE (desktop) ---------- */
.vcl-scrolly-col{display:none}
.vcl-scrolly-media{will-change:transform}
.vcl-scrolly-frame{position:relative;border-radius:20px;overflow:hidden;background:#0b0f16;
  box-shadow:0 30px 80px rgba(0,0,0,.45);height:76vh;max-height:760px}
.vcl-scrolly-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.3s ease}
.vcl-scrolly-vid.is-active{opacity:1;transform:scale(1)}
.vcl-scrolly-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,13,.02) 40%,rgba(7,9,13,.5))}

/* ---------- MÍDIA por card (CELULAR — vídeo no topo de cada card da pilha) ---------- */
.vcl-scrolly-stepmedia{display:block;position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;margin-bottom:16px;background:#0b0f16}
.vcl-scrolly-stepmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* CELULAR: card compacto pra caber inteiro na tela quando gruda.
   Antes o Aéreo tinha 834px numa tela de 812 e o fim ficava escondido. */
@media (max-width:879px){
  .vcl-scrolly-step{padding:18px 16px}
  .vcl-scrolly-stepmedia{aspect-ratio:8/3;margin-bottom:12px}
  .vcl-scrolly-head{margin-bottom:8px;gap:11px}
  .vcl-scrolly-ico{width:42px;height:42px;border-radius:12px;font-size:1.32rem}
  .vcl-scrolly-step h3{font-size:1.32rem}
  .vcl-scrolly-step .sub{margin:0 0 10px;font-size:.92rem}
  .vcl-scrolly-prazo{padding:8px 14px;margin-bottom:8px}
  .vcl-scrolly-prazo b{font-size:1.32rem}
  .vcl-scrolly-nota{margin:-4px 0 12px;font-size:.72rem}
  .vcl-scrolly-step ul{gap:7px;margin:0 0 14px}
  .vcl-scrolly-step li{font-size:.94rem;line-height:1.36;padding-left:22px}
  .vcl-scrolly-step li::before{width:8px;height:8px}
  .vcl-scrolly-cta{padding:12px 20px}
}

/* ---------- STEPS / CARDS ---------- */
.vcl-scrolly-steps{display:flex;flex-direction:column;gap:16px}
.vcl-scrolly-step{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.08);
  background:#12161f;                 /* CELULAR: fundo OPACO p/ a pilha cobrir o card de baixo */
  padding:22px 20px;will-change:transform;box-shadow:0 18px 40px rgba(0,0,0,.4)}
/* borda girando (mesma dos cards de transporte), por cor de serviço */
.vcl-scrolly-step::after{
  content:"";position:absolute;inset:0;border-radius:20px;padding:2px;z-index:2;pointer-events:none;
  --g1:#7b61ff;--g2:#ff5a8a;--g3:#ffb347;--g4:#21d4fd;
  background:conic-gradient(from var(--vclAng), var(--g1), var(--g2), var(--g3), var(--g4), var(--g1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:vclBrd 4s linear infinite;
}
.vcl-scrolly-step[data-i="0"]::after{--g1:#5aa8ff;--g2:#21d4fd;--g3:#1a6fe0;--g4:#7b61ff}
.vcl-scrolly-step[data-i="1"]::after{--g1:#ff7a5a;--g2:#ff4141;--g3:#cc0000;--g4:#ff5a8a;animation-delay:-1.3s}
.vcl-scrolly-step[data-i="2"]::after{--g1:#7bed9f;--g2:#35d07f;--g3:#12a150;--g4:#21d4c0;animation-delay:-2.6s}

.vcl-scrolly-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.vcl-scrolly-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;
  background:color-mix(in srgb,var(--acc) 22%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.vcl-scrolly-step h3{font-size:clamp(1.4rem,2.6vw,2.05rem);margin:0;color:#fff;font-weight:800;letter-spacing:-.01em}
.vcl-scrolly-step .sub{color:rgba(255,255,255,.66);margin:0 0 16px}
.vcl-scrolly-prazo{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:16px;padding:10px 16px;
  border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.vcl-scrolly-prazo b{font-size:1.5rem;color:var(--acc,#4da3ff);font-weight:800;line-height:1}
.vcl-scrolly-prazo span{color:rgba(255,255,255,.6);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em}
/* ressalva do cliente VCL: o prazo e tempo de viagem, nao entrega na porta.
   margin-top negativo compensa o margin-bottom do .vcl-scrolly-prazo (que e inline-flex) */
.vcl-scrolly-nota{margin:-9px 0 18px;color:rgba(255,255,255,.46);font-size:.76rem;line-height:1.45;max-width:36ch}
.vcl-scrolly-step ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.vcl-scrolly-step li{position:relative;padding-left:26px;color:rgba(255,255,255,.82);line-height:1.45}
.vcl-scrolly-step li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--acc,#4da3ff);box-shadow:0 0 8px var(--acc,#4da3ff)}
.vcl-scrolly-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;
  padding:13px 24px;border-radius:999px;font-weight:700;text-decoration:none;color:#fff;background:var(--acc,#4da3ff);
  transition:filter .2s ease,transform .2s ease}
.vcl-scrolly-cta:hover{filter:brightness(1.08)}

/* espaço extra no fim da pilha (celular) p/ os cards segurarem antes de soltar */
.vcl-scrolly-tail{height:22vh}

/* ---------- DESKTOP: 2 colunas + pin (sem pilha) ---------- */
@media (min-width:880px){
  .vcl-scrolly{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:start;padding:8px 20px 0}
  .vcl-scrolly-col{display:block}
  .vcl-scrolly-stepmedia{display:none}
  .vcl-scrolly-tail{display:none}
  .vcl-scrolly-steps{gap:24px}
  .vcl-scrolly-step{background:rgba(15,20,30,.5);padding:26px 24px;min-height:80vh;box-shadow:none;
    display:flex;flex-direction:column;justify-content:center;opacity:.45;transition:border-color .4s ease,opacity .4s ease}
  .vcl-scrolly-step.is-current{opacity:1}
}

/* ---------- Movimento reduzido: sem pin, sem pilha, sem giro ---------- */
@media (prefers-reduced-motion:reduce){
  .vcl-scrolly-media,.vcl-scrolly-step{transform:none !important}
  .vcl-scrolly-vid{transition:none}
  .vcl-scrolly-step{opacity:1 !important}
  .vcl-scrolly-step::after{animation:none}
}