.stack {
  margin-top: 85px;
  position: relative;
  min-height: 400px;
  max-height: 40vh;

  /* Media query para dispositivos móviles 
  @media (max-width: 600px) {
    min-height: 460px;
     Ajusta la altura máxima para dispositivos móviles 
  }*/
}

/* DIV IMAGEN */
.contenedor {
  position: absolute;
  top: 0px;
  /* min-height: 700px;
  max-height: 40vh; */
  height: 35vw;
  min-height: 400px;
  width: 100%;
  background-image: url("/assets/img/fondo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* Media query para dispositivos móviles 
  @media (max-width: 600px) {
    min-height: 460px;
     Ajusta la altura máxima para dispositivos móviles 
  }*/
}

.fondo {
  position: relative;
  top: 0px;
  left: 0px;
}

.fondo-imagen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* DIV LOGOS */
.logos {
  position: absolute;
  top: 0px;
  z-index: 10;
}

.degradado {
  background: linear-gradient(to bottom, black, transparent);
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.container-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.image-container-logos {
  width: 200px;
  margin: 10px;
}

.image-container-logos img {
  width: 100%;
  height: auto;
}

/* FIN DIV Personajes */

.contenedor-principal {
  overflow: hidden; /* Asegura el recorte */
  display: flex; /* Usamos flexbox para centrar */
  align-items: center;
  height: auto;
}

.stack-marca {
  position: relative; /* Establece el contexto de posicionamiento para las imágenes */
  height: 35vw; /* Alto del contenedor principal */
  min-height: 400px;
  white-space: nowrap;
}

.stack-marca img {
  position: absolute; /* Posiciona las imágenes de forma absoluta dentro del contenedor */
}
/* Ajusta el ancho de la imagen a la del contenedor*/
.stack-marca img {
  width: 100%;
}

/* Posicionamiento de imágenes específicas */
.stack-marca img:nth-child(1) { /* personajes.png */
  bottom: 0vw;
  left: 20vw;
  z-index: 6;
  width: 24vw;
  min-width: 270px;
}

.stack-marca img:nth-child(2) { /* inicio-f1.png */
  top: 0vw;
  left: 2vw;
  z-index: 4;
  width: 17vw;
  min-width: 170px;
}

.stack-marca img:nth-child(3) { /* inicio-f2.png */
    top: max(17vw,200px);
    left: 18vw;
    z-index: 3;
    width: 9.2vw;
    min-width: 100px;
  }

  .stack-marca img:nth-child(4) { /* inicio-f3.png */
    top: max(23vw,250px);
    left: max(30vw,100px);
    z-index: 4;
    width: 2.3vw;
    min-width: 25px;
  }

  .stack-marca img:nth-child(5) { /* inicio-f4.png */
    top: max(27vw,330px);
    left: max(57.3vw,300px);
    z-index: 7;
    width: 12.5vw;
    min-width: 100px;
  }
  .stack-marca img:nth-child(6) { /* inicio-f7.png */
    top: max(15vw,200px);
    left: 80vw;
    z-index: 5;
    width: 25vw;
    min-width: 200px;
  }
  .stack-marca img:nth-child(7) { /* inicio-f8.png */
    top: 28vw;
    left: 18vw;
    transform: translate(100%,100%);
    z-index: 5;
    width: 2.7vw;
    min-width: 30px;
  }
  .stack-marca img:nth-child(8) { /* inicio-f9.png */
    top: max(2vh,50px);
    left: 80vw;
    z-index: 5;
    width: 5vw;
    min-width: 50px;
  }


  @media (min-width: 800px) {
    .stack-marca img:nth-child(1) {
      transform: translate(50%, 0%);
    }
  }
  @media (min-width: 1000px) {
    .stack-marca img:nth-child(1) {
      left: 25vw;
    }
  }
  @media (max-width: 1060px){
    .stack-marca img:nth-child(7) { /* inicio-f8.png */
      top: 330px;
    }
    .stack-marca img:nth-child(8) { /* inicio-f9.png */
      top: 100px;
    }
  }
  @media (max-width: 500px){
    .stack-marca img:nth-child(7) { /* inicio-f8.png */
      left: 0px;
    }
  }