/* CSS responsive usando Flexbox para animación de acumulación de tres imágenes */
.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;
}

/* Imagen 1: entra desde la izquierda y queda encima del resto */
.imagen-index-A img:nth-of-type(1) {
  z-index: 3;
  animation: entradaIzquierda 9.7s infinite;
}

/* Imagen 2: entra desde arriba */
.imagen-index-A img:nth-of-type(2) {
  z-index: 2;
  animation: entradaArriba 9.7s infinite;
}

/* Imagen 3: entra con fundido */
.imagen-index-A img:nth-of-type(3) {
  z-index: 1;
  animation: entradaFundido 9.7s infinite;
}

/* Ciclo completo: 9.7s
   0.0s - 1.0s  -> Imagen 1 entra desde la izquierda
   0.7s - 1.7s  -> Imagen 2 entra desde arriba (solape de 0.3s con la imagen 1)
   2.2s - 3.2s  -> Imagen 3 entra con fundido (0.5s después de que la imagen 2 termine, sin solape)
   3.2s - 8.2s  -> Las 3 imágenes permanecen juntas (5s)
   8.2s - 9.2s  -> Fundido de salida conjunto
   9.2s - 9.7s  -> 0.5s sin imagen
*/

@keyframes entradaIzquierda {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  10.31% {
    opacity: 1;
    transform: translateX(0);
  }
  84.54% {
    opacity: 1;
    transform: translateX(0);
  }
  94.85% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes entradaArriba {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  7.22% {
    opacity: 0;
    transform: translateY(-100%);
  }
  17.53% {
    opacity: 1;
    transform: translateY(0);
  }
  84.54% {
    opacity: 1;
    transform: translateY(0);
  }
  94.85% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes entradaFundido {
  0% {
    opacity: 0;
  }
  22.68% {
    opacity: 0;
  }
  32.99% {
    opacity: 1;
  }
  84.54% {
    opacity: 1;
  }
  94.85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 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; /* Ratio un pelín más alto para móviles */
  }

  @supports not (aspect-ratio: 3 / 1.4) {
    .imagen-index-A {
      padding-bottom: 46.67%; /* 1.4/3 = 46.67% */
    }
  }
}