.gva-bg-slider{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}

.gva-bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition: opacity 1s ease, transform 1.5s ease;
  pointer-events:none;
}

.gva-bg-slide.is-active{
  opacity:1;
}

/* ===== NONE ===== */
.gva-bg-effect-none .gva-bg-slide{
  transition:none;
}

/* ===== FADE ===== */
.gva-bg-effect-fade .gva-bg-slide{
  transition: opacity 1.2s ease;
}

/* ================================
   KEN BURNS SLIDESHOW
================================ */

.gva-bg-effect-kenBurns .gva-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 2s ease-in-out, transform 5s ease-in-out;
}

.gva-bg-effect-kenBurns .gva-bg-slide.is-active {
  opacity: 1;
  transform: scale(1.05) translate(-2.5%, -2.5%);
}

.gva-bg-effect-kenBurns .gva-bg-slide.is-active:nth-child(odd) {
  transform: scale(1.30) translate(2.5%, 2.5%);
}
.gva-bg-effect-kenBurns .gva-bg-slide:first-child {
transform: scale(1.30) translate(2%, 2%);
}
.gva-bg-effect-kenBurns .gva-bg-slide.is-active:first-child {
  animation: initialKenBurns 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform: scale(1.30) translate(2%, 2%);
}

/* 5. KEYFRAMES: Alineados con los valores del estado activo */
@keyframes initialKenBurns {
  from {
    transform: scale(1.05) translate(0, 0);
  }
  to {
    transform: scale(1.30) translate(2%, 2%);
  }
}

/* ===== SLIDE HORIZONTAL ===== */
.gva-bg-effect-slideHorizontal .gva-bg-slide{
  transform: translateX(100%);
  opacity:1;
}

.gva-bg-effect-slideHorizontal .gva-bg-slide.is-active{
  transform: translateX(0);
}

.gva-bg-effect-slideHorizontal .gva-bg-slide.is-active ~ .gva-bg-slide{
  transform: translateX(-100%);
}

/* ===== SLIDE VERTICAL ===== */
.gva-bg-effect-slideVertical .gva-bg-slide{
  transform: translateY(100%);
  opacity:1;
}

.gva-bg-effect-slideVertical .gva-bg-slide.is-active{
  transform: translateY(0);
}

/* ===== BLINDS ===== */
.gva-bg-effect-blinds .gva-bg-slide {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1s ease, opacity 1s ease;
  will-change: transform, opacity;
}

.gva-bg-effect-blinds .gva-bg-slide.is-active {
  opacity: 1;
  transform: scaleY(1);
}

/* ===== BARS ===== */
.gva-bg-effect-bars .gva-bg-slide{
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s ease;
  opacity:1;
}

.gva-bg-effect-bars .gva-bg-slide.is-active{
  transform: scaleY(1);
}

/* ===== BARS RANDOM ===== */
.gva-bg-effect-barsRandom .gva-bg-slide{
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  opacity:1;
}

.gva-bg-effect-barsRandom .gva-bg-slide.is-active{
  transform: scaleY(1);
}

/* ===== BOXES ===== */
.gva-bg-effect-boxes .gva-bg-slide{
  transform: scale(0.6);
  transition: transform 1.2s ease;
  opacity:1;
}

.gva-bg-effect-boxes .gva-bg-slide.is-active{
  transform: scale(1);
}

/* ===== BOXES RANDOM ===== */
.gva-bg-effect-boxesRandom .gva-bg-slide{
  transform: scale(0);
  transition: transform 1.2s cubic-bezier(.3,.9,.2,1);
  opacity:1;
}

.gva-bg-effect-boxesRandom .gva-bg-slide.is-active{
  transform: scale(1);
}

/* ===== BOXES GROW ===== */
.gva-bg-effect-boxesGrow .gva-bg-slide{
  transform: scale(0.3);
  opacity:0;
  transition: transform 1.5s ease, opacity 1s ease;
}

.gva-bg-effect-boxesGrow .gva-bg-slide.is-active{
  transform: scale(1);
  opacity:1;
}


/* ============================= */
/* ZOOM */
/* ============================= */

.gva-bg-effect-zoom .gva-bg-slide {
  transform: scale(1.15);
  transition: transform 2s ease, opacity 1.5s ease;
  opacity: 0;
}

.gva-bg-effect-zoom .gva-bg-slide.is-active {
  transform: scale(1);
  opacity: 1;
}


/* ============================= */
/* CINEMATIC */
/* ============================= */

.gva-bg-effect-cinematic .gva-bg-slide {
  transform: scale(1.25) translateX(-5%) translateY(5%);
  opacity: 0;
  transition: transform 3s cubic-bezier(.16,1,.3,1), opacity 1.5s ease;
}

.gva-bg-effect-cinematic .gva-bg-slide.is-active {
  transform: scale(1) translateX(0) translateY(0);
  opacity: 1;
}

/* ============================= */
/* ROTATE */
/* ============================= */

.gva-bg-effect-rotate .gva-bg-slide {
  transform: scale(1.1) rotate(-15deg);
  opacity: 0;
  transition: transform 1.5s ease, opacity 1.5s ease;
}

.gva-bg-effect-rotate .gva-bg-slide.is-active {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* CUBO 3D */
.gva-bg-effect-cube3d{
  perspective: 1200px;
  overflow: hidden;
}

.gva-bg-effect-cube3d
.gva-bg-slide{
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.gva-bg-effect-cube3d
.gva-bg-slide.is-active{
  animation: cube3d-in 1.2s ease-in-out forwards;
}

.gva-bg-effect-cube3d
.gva-bg-slide.is-prev{
  animation: cube3d-out 1.2s ease-in-out forwards;
}

@keyframes cube3d-in {
  0%{
    transform: rotateY(90deg) translateZ(0);
    opacity: 0;
  }
  100%{
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}

@keyframes cube3d-out {
  0%{
    transform: rotateY(0deg) translateZ(0);
    opacity: 1;
  }
  100%{
    transform: rotateY(-90deg) translateZ(0);
    opacity: 0;
  }
}

/* EFECTO PÁGINA */
.gva-bg-effect-pageFold{
  perspective: 1400px;
  overflow: hidden;
}

.gva-bg-effect-pageFold
.gva-bg-slide{
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.gva-bg-effect-pageFold
.gva-bg-slide.is-active{
  animation: pagefold-in 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  z-index: 2;
}

.gva-bg-effect-pageFold
.gva-bg-slide.is-prev{
  animation: pagefold-out 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  z-index: 1;
}

@keyframes pagefold-in {
  0%{
    transform: rotateY(90deg);
    opacity: 0;
  }
  100%{
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes pagefold-out {
  0%{
    transform: rotateY(0deg);
    opacity: 1;
  }
  100%{
    transform: rotateY(-80deg);
    opacity: 0.3;
  }
}

.gva-bg-effect-pageFold
.gva-bg-slide::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.1),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

.gva-bg-effect-pageFold
.gva-bg-slide.is-prev::after{
  animation: pagefold-shadow 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes pagefold-shadow{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}