/* Quién lo usa: un mazo de logos que se reparte en una tira y gira en bucle. Lógica en deck.js. */
.dk-who { display: grid; gap: 6px; overflow: hidden; }
.dk-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.dk-hd h2 { margin: 0 !important; }

.dk { position: relative; margin-inline: calc(clamp(26px, 3vw, 40px) * -1); }   /* la tira llega a los bordes del panel */
/* sin JavaScript: la lista de logos queda visible como antes */
.dk-src { list-style: none; margin: 0; padding: 8px clamp(26px, 3vw, 40px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dk-src li { width: 110px; aspect-ratio: 1; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -16px rgb(15 30 61 / .45); }
.dk-src img { width: 76%; height: 76%; object-fit: contain; }
.dk-stage { display: none; }
.dk.on .dk-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; }
.dk.on .dk-stage { display: block; position: relative; height: var(--dk-h, 220px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.dk.on .dk-stage.grabbing { cursor: grabbing; }
.dk-strip { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: center; will-change: transform; }

.dk-card { --dk-w: 150px; position: absolute; left: 0; top: 0; width: var(--dk-w); height: var(--dk-w); margin: calc(var(--dk-w) / -2) 0 0 calc(var(--dk-w) / -2);
  transform-origin: center center; transform-style: preserve-3d; will-change: transform; }
.dk-face, .dk-back { position: absolute; inset: 0; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: grid; place-items: center; }
.dk-face { background: #fff; box-shadow: 0 18px 30px -20px rgb(15 30 61 / .5), 0 0 0 1px rgb(15 30 61 / .06); }
.dk-face img { width: 72%; height: 72%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
/* al darse vuelta, la tarjeta muestra el nombre de la empresa */
.dk-back { transform: rotateY(180deg); padding: 14px; text-align: center; color: #fff; background: radial-gradient(120% 100% at 30% 10%, #24427E 0%, #0F2148 60%, #0B1834 100%);
  box-shadow: 0 18px 30px -20px rgb(15 30 61 / .6); }
.dk-back span { font: 700 .95rem/1.2 var(--head); letter-spacing: -.01em; }
.dk-back::after { content: ""; position: absolute; left: 50%; bottom: 16px; width: 26px; height: 3px; border-radius: 3px; background: var(--accent); transform: translateX(-50%); }

.dk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.dk-more { margin: 0; color: var(--ink-2); font-size: .95rem; }
.dk-more span { font-weight: 700; color: #0F1E3D; }

@media (max-width: 700px) {
  .dk { margin-inline: -18px; }
  .dk-card { --dk-w: 118px; }
  .dk.on .dk-stage { --dk-h: 180px; }
  .dk-face, .dk-back { border-radius: 18px; }
  .dk-back span { font-size: .84rem; }
  .dk-src li { width: 84px; }
}