@keyframes box1 {
    0% {
      opacity: 0;
      transform: translateX(-500px);
    }
    20%,80% {
      opacity: 1;
      transform: translateX(0);
    }
  }


  @keyframes box3 {
    0% {
      opacity: 0;
      transform: translateX(500px);
    }
    20%,80% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes box2 {
    0% {
      opacity: 0;
      transform: translateX(500px);
    }
    20%,80% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes box4 {
    0% {
      opacity: 0;
      transform: translateY(-500px);
    }
    20%,80% {
      opacity: 1;
      transform: translateY(0);
      
    }
  }





.cuadricula {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    opacity: 1; /* Establecemos la opacidad inicial en 1 (totalmente visible) */
    transition: opacity 1s ease-in-out; /* Agregamos una transición de 1 segundo para la propiedad de opacidad */
  }

.centrar{
    width: 100%;
    height: 100%;
    text-align: center;
}


.cuadriculados {
    width: 100%;
    display: grid;
    grid:
    ". span1 span1 ." 1fr;
    gap: 8px;
    
}

.span1 { grid-area: span1; }

/* Clase que inicia la animación de desvanecimiento */
.fade-out {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

/* Clase que inicia la animación de aparición */
.fade-in {
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

/* Clase para ocultar elementos */
.d-none {
    display: none !important;
}


.centrocuadricula {
    width: 920px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .seccionimagenes {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.imagenxa{
    position: relative;
    opacity: 1;
    animation-name: box1;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 3s;
}

.menimagenxa{
    position: relative;
    opacity: 1;
    animation-name: box3;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 3s;
}

.imagenxy{
    position: relative;
    opacity: 1;
    animation-name: box1;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 6s;
}

.classection{
  font-size: 15px;
}

.imglogo{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: -20px;
  align-items: center;
  justify-content: center;
  display: flex;
}
footer{
  margin-top: 50px;
  margin-bottom: 30px;
  margin-right: 100px;
  margin-left: 50px;
}
.textuno{
  text-align: justify;
  color: #fff;
  
}

.cen{
  margin-top: 130px;
  align-items: center;
  justify-content: center;
  display: flex;
}

@media (max-width: 600px){
  
  .cen{
    margin-top: 10px;
  }
  .cuadricula {
    width: auto;
    border-left: 10px;
    border-right: 10px;
  }
  .imglogo{
    margin-left: 0;
    margin-right: 0;
  }
  
}