/* PromoPrint · carril de productos compartido (carrusel.js): "Ideas del catálogo" en los servicios y
   "También te puede interesar" en cada producto. Sin barra de desplazamiento; flechas a los costados que
   desaparecen en los extremos; desvanecido en el borde por donde sigue el carril; arrastre con el ratón;
   las tarjetas entran escalonadas la primera vez que el carril se ve. Usa los tokens de hero.css. */

/* Registradas para que el desvanecido aparezca y se vaya suave (sin @property el cambio sería brusco). */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

.crs { position: relative; }

.crs__track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* El borde por donde hay más tarjetas se desvanece (carrusel.js pone data-l / data-r en .crs). */
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  transition: --fade-l 300ms, --fade-r 300ms;
}
.crs__track::-webkit-scrollbar { display: none; }
.crs[data-l] .crs__track { --fade-l: 56px; }
.crs[data-r] .crs__track { --fade-r: 56px; }
.crs__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.crs__track.is-drag * { user-select: none; }

/* Flechas: redondas, de vidrio, centradas en la foto de las tarjetas (--crs-y lo calcula carrusel.js). */
.crs__btn {
  position: absolute; z-index: 2; top: var(--crs-y, 50%); display: grid; place-items: center;
  width: 50px; height: 50px; margin-top: -25px; padding: 0; border: 1px solid rgb(var(--paper-rgb) / 0.18); border-radius: 50%;
  background: rgb(var(--glass-rgb) / 0.78); color: var(--paper); cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.9);
  transition: opacity 260ms var(--ease-ui), transform 320ms var(--ease-out), border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui);
}
.crs__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
.crs__btn--prev { left: -25px; }
.crs__btn--next { right: -25px; }
.crs__btn[disabled] { opacity: 0; pointer-events: none; transform: scale(0.7); }
.crs__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .crs__btn:hover { border-color: var(--brand); color: var(--brand); }
  .crs__btn--prev:hover svg { transform: translateX(-2px); }
  .crs__btn--next:hover svg { transform: translateX(2px); }
}
.crs__btn:active { transform: scale(0.94); }

/* Entrada escalonada: cada tarjeta llega desde la derecha con un pequeño retraso (--d, por tarjeta).
   Se anima el contenido del <li>, no el <li>: el <li> es el punto de ajuste del carril y moverlo lo desplazaría. */
.crs--anim .crs__track > li > * { transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: var(--d, 0ms); }
.crs--anim:not(.is-in) .crs__track > li > * { opacity: 0; transform: translate3d(48px, 0, 0); }

@media (max-width: 600px) {
  /* En el teléfono el carril se desliza con el dedo; las flechas estorbarían sobre las tarjetas. */
  .crs__btn { display: none; }
  .crs[data-l] .crs__track { --fade-l: 24px; }
  .crs[data-r] .crs__track { --fade-r: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .crs--anim .crs__track > li > * { transition: none; opacity: 1; transform: none; }
  .crs__btn, .crs__btn svg { transition: none; }
}