/* CSS responsive usando Flexbox para animación de dos imágenes con fade */
.imagen-index-A {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  aspect-ratio: 954 / 340; /* Ratio para navegadores modernos */
}

.imagen-index-A a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.imagen-index-A img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* para estar seguros de que la imagen cubre todo el área sin distorsión */
  opacity: 0;
  transition: opacity 1s ease, filter 1s ease;
}

/* Imagen 1 */
.imagen-index-A img:nth-of-type(1) {
  z-index: 2;
  animation: fadeImage 12s infinite 0s;
}
/* Imagen 2 */
.imagen-index-A img:nth-of-type(2) {
  z-index: 1;
  animation: fadeImage 12s infinite 6s;
}

@keyframes fadeImage {
  0%, 100% {
    opacity: 0;
    filter: blur(3px);
    transform: perspective(1000px) rotateY(-30deg) translateZ(-100px) translateX(-100%);
  }
  8%, 42% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(1000px) rotateY(0deg) translateZ(0) translateX(0%);
  }
  50%, 100% {
    opacity: 0;
    filter: blur(3px);
    transform: perspective(1000px) rotateY(30deg) translateZ(150px) translateX(100%);
  }
}

/* Fallback para navegadores que no soporten aspect-ratio */
@supports not (aspect-ratio: 954 / 340) {
  .imagen-index-A {
    height: 0;
    padding-bottom: 35.64%; /* 340/954 = 35.64% */
  }
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
  .imagen-index-A {
    aspect-ratio: 954 / 340;
  }
  
  @supports not (aspect-ratio: 954 / 340) {
    .imagen-index-A {
      padding-bottom: 35.64%; /* 340/954 = 35.64% */
    }
  }
}