.pe-logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.pe-logo-marquee.pe-fade-on::before,
.pe-logo-marquee.pe-fade-on::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pe-fade-depth, 80px);
  opacity: var(--pe-fade-intensity, 1);
  pointer-events: none;
  z-index: 2;
}

.pe-logo-marquee.pe-fade-on::before {
  left: 0;
  background: linear-gradient(to right, var(--pe-fade-color, #fff), transparent);
}

.pe-logo-marquee.pe-fade-on::after {
  right: 0;
  background: linear-gradient(to left, var(--pe-fade-color, #fff), transparent);
}

.pe-logo-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: pe-logo-marquee-scroll var(--pe-loop-duration, 20s) linear infinite;
}

.pe-logo-marquee-track[data-direction="right"] {
  animation-name: pe-logo-marquee-scroll-right;
}

.pe-logo-marquee-track[data-pause="true"]:hover {
  animation-play-state: paused;
}

.pe-logo-marquee-item {
  flex-shrink: 0;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  /* margin-right (not flex gap) so the rhythm is uniform across set boundaries → seamless loop */
  margin-right: var(--pe-marquee-gap, 40px);
}

/* Black & white modes — intensity is a CSS variable controlled per-mode */
.pe-logo-marquee.pe-bw .pe-logo-marquee-item {
  transition: filter var(--pe-bw-transition, 400ms) ease;
}

.pe-logo-marquee.pe-bw-grayscale .pe-logo-marquee-item {
  filter: grayscale(var(--pe-bw-intensity, 100%)) contrast(1.05);
}

.pe-logo-marquee.pe-bw-black .pe-logo-marquee-item {
  filter:
    grayscale(var(--pe-bw-intensity, 100%))
    brightness(calc(1 - var(--pe-bw-intensity, 100%) / 100%));
}

.pe-logo-marquee.pe-bw-white .pe-logo-marquee-item {
  filter:
    brightness(calc(1 - var(--pe-bw-intensity, 100%) / 100%))
    invert(calc(var(--pe-bw-intensity, 100%) / 100%));
}

.pe-logo-marquee.pe-bw.pe-bw-hover-color .pe-logo-marquee-item:hover {
  filter: none;
}

@keyframes pe-logo-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pe-logo-marquee-scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 2026-10-06 (CUMBRE) — opciones nuevas, solo con su clase (por defecto no aparecen: nada cambia).
   Tarjetas: caja cuadrada con el logo centrado (alto en % de la caja), nombre y descripción centrados debajo. */
.pe-logo-marquee.pe-lm--cards .pe-logo-marquee-track { align-items: flex-start; }
.pe-lm-card { display: flex; flex-direction: column; align-items: center; gap: 20px; box-sizing: content-box; width: 256px; }
.pe-lm-box { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 18px; }
.pe-lm-logo { display: block; height: 21%; width: auto; max-width: 80%; }
.pe-lm-texts { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 70%; text-align: center; }
.pe-lm-title, .pe-lm-desc { margin: 0; }
.pe-lm-title { font-size: 16px; line-height: 1.1; font-weight: 600; }
.pe-lm-desc { font-size: 12px; line-height: 1.4; font-weight: 600; color: #808080; }
/* Desvanecer con transparencia: máscara a los dos lados (deja ver el fondo, sin color) */
.pe-logo-marquee.pe-fade-mask { -webkit-mask: linear-gradient(90deg, #0000, #000 var(--pe-fade-mask, 25%) calc(100% - var(--pe-fade-mask, 25%)), #0000);
  mask: linear-gradient(90deg, #0000, #000 var(--pe-fade-mask, 25%) calc(100% - var(--pe-fade-mask, 25%)), #0000); }

/* Reducir movimiento (2026-10-08): la cinta sigue corriendo con ese ajuste, cuatro veces más lenta (lo pone el JS); antes
   se quedaba quieta. El color al pasar el mouse sobre un logo es una respuesta corta al pasar el mouse, iniciada por el visitante,
   así que se mantiene igual que siempre. Sin esto la regla de Elementor
   `@media (prefers-reduced-motion:reduce){html *{transition-duration:0s!important;transition-delay:0s!important}}`
   la anula y el efecto parece no funcionar. Mismas reglas y valores que arriba, con !important. */
@media (prefers-reduced-motion: reduce) {
  .pe-logo-marquee.pe-bw .pe-logo-marquee-item { transition: filter var(--pe-bw-transition, 400ms) ease !important; }
}