/* ============================================================
   SCROLLING IMAGES SUB – Subgrafica
   Basado en el Masonry, pero versión Carrusel Infinito
============================================================ */

/* ============================================================
   WRAPPER BASE
============================================================ */
.scrolling-images-sub-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  opacity: 0;                        /* Fade inicial */
  transition: opacity 0.6s ease-out; /* Duración y curva del fade */
}

/* Cuando JS termina de preparar el carrusel:
   - se activa la animación del track
   - se hace fade-in del wrapper */
.scrolling-images-sub-wrapper.scrolling-ready {
  opacity: 1;
}

/* TRACK DEL CARRUSEL */
.scrolling-images-sub-track {
  display: flex;
  align-items: center; /* valor por defecto, luego lo puede sobreescribir children-align-* */
  gap: var(--scroll-gap, 20px);
  width: max-content;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: 0.3s ease;
  animation-play-state: paused; /* por defecto pausado */
  backface-visibility: hidden;
}

/* Cuando JS marca .scrolling-ready → arranca la animación */
.scrolling-images-sub-wrapper.scrolling-ready .scrolling-images-sub-track {
  animation-play-state: running;
}

/* Pausar animación (desde JS + clase del padre) */
.scrolling-images-sub-wrapper.pause-on-hover.scrolling-images-sub-paused .scrolling-images-sub-track {
  animation-play-state: paused !important;
}

/* ============================================================
   ANIMACIONES DE DIRECCIÓN
============================================================ */
@keyframes scroll-left {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scroll-right {
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.direction-left .scrolling-images-sub-track {
  animation-name: scroll-left;
}

.direction-right .scrolling-images-sub-track {
  animation-name: scroll-right;
}

/* ============================================================
   ITEM BASE
============================================================ */
.scrolling-img-item {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  max-width: var(--scroll-maxwidth, 200px);
  width: 100%;
}

/* Divi Border Radius debe funcionar */
.scrolling-img-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: 0.35s ease;
  border-radius: inherit; /* Support Divi Border Controls */
}

/* ============================================================
   IMAGE RATIO & FIT
============================================================ */

/* Ratios fijos */
.ratio-4-3 .scrolling-img-item {
  aspect-ratio: 4 / 3;
}

.ratio-3-4 .scrolling-img-item {
  aspect-ratio: 3 / 4;
}

.ratio-1-1 .scrolling-img-item {
  aspect-ratio: 1 / 1;
}

.ratio-16-9 .scrolling-img-item {
  aspect-ratio: 16 / 9;
}

/* Imagen ocupando la caja del ratio */
.ratio-4-3 .scrolling-img-item img,
.ratio-3-4 .scrolling-img-item img,
.ratio-1-1 .scrolling-img-item img,
.ratio-16-9 .scrolling-img-item img {
  width: 100%;
  height: 100%;
}

/* Fit: cover / contain */
.ratio-fit-cover .scrolling-img-item img {
  object-fit: cover;
}

.ratio-fit-contain .scrolling-img-item img {
  object-fit: contain;
  background-color: transparent;
}

/* ============================================================
   VERTICAL ALIGN DE LOS HIJOS
============================================================ */
.children-align-top .scrolling-images-sub-track {
  align-items: flex-start;
}

.children-align-center .scrolling-images-sub-track {
  align-items: center;
}

.children-align-bottom .scrolling-images-sub-track {
  align-items: flex-end;
}

/* ============================================================
   OVERLAY (estilo Masonry)
============================================================ */
.scrolling-img-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-color: var(--scroll-overlay, rgba(0,0,0,0.4));
  transition: opacity 0.35s ease;
}

/* Overlay always visible */
.overlay-mode-always .scrolling-img-overlay {
  opacity: 1 !important;
}

/* Overlay on hover */
.overlay-mode-hover .scrolling-img-item:hover .scrolling-img-overlay {
  opacity: 1;
}

/* ============================================================
   TEXT WRAPPER & POSITIONING (igual que Masonry)
============================================================ */
.scrolling-img-text-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 10px;
  transition: opacity 0.35s ease;
  opacity: 1;
  pointer-events: none;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Text visible only on hover */
.text-mode-hover .scrolling-img-text-wrapper {
  opacity: 0;
}

.text-mode-hover .scrolling-img-item:hover .scrolling-img-text-wrapper {
  opacity: 1;
}

/* POSICIONES – Masonry Style */
.text-pos-top-left      .scrolling-img-text-wrapper { justify-content:flex-start; align-items:flex-start; }
.text-pos-top-center    .scrolling-img-text-wrapper { justify-content:flex-start; align-items:center; }
.text-pos-top-right     .scrolling-img-text-wrapper { justify-content:flex-start; align-items:flex-end; }

.text-pos-center-left   .scrolling-img-text-wrapper { justify-content:center; align-items:flex-start; }
.text-pos-center-center .scrolling-img-text-wrapper { justify-content:center; align-items:center; }
.text-pos-center-right  .scrolling-img-text-wrapper { justify-content:center; align-items:flex-end; }

.text-pos-bottom-left   .scrolling-img-text-wrapper { justify-content:flex-end; align-items:flex-start; }
.text-pos-bottom-center .scrolling-img-text-wrapper { justify-content:flex-end; align-items:center; }
.text-pos-bottom-right  .scrolling-img-text-wrapper { justify-content:flex-end; align-items:flex-end; }

/* TITLES + SUBTITLES */
.scrolling-img-title {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  pointer-events: none;
}

.scrolling-img-subtitle {
  margin: 5px 0 0;
  padding: 0;
  pointer-events: none;
}

/* ============================================================
   HOVER EFFECTS – Estilo Masonry pero adaptado
============================================================ */

/* NO EFFECT */
.effect-none .scrolling-img-item img {}

/* ZOOM */
.effect-zoom   .scrolling-img-item:hover img { transform: scale(1.08); }

/* BLUR */
.effect-blur   .scrolling-img-item:hover img { filter: blur(3px); }

/* OPACITY */
.effect-opacity .scrolling-img-item:hover img { opacity: 0.6; }

/* SHINE (con pseudo-elemento, tipo slick) */
.effect-shine .scrolling-img-item {
  overflow: hidden;
}

.effect-shine .scrolling-img-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: translate3d(-150%, 0, 0);
  transition: 0.6s ease;
}

.effect-shine .scrolling-img-item:hover::after {
  transform: translate3d(150%, 0, 0);
}

/* ROTATE */
.effect-rotate .scrolling-img-item:hover img { transform: rotate(3deg); }

/* SHADOW */
.effect-shadow .scrolling-img-item:hover img {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

/* ============================================================
   PAUSE SUPPORT
============================================================ */
.scrolling-images-sub-paused .scrolling-images-sub-track {
  animation-play-state: paused !important;
}